@charset "utf-8";
/* ==========================================================
   Sultan Altaf Ali \2014  Visual system
   Tokens \b7  base \b7  glass \b7  buttons \b7  nav \b7  hero \b7  covers
   ========================================================== */
:root{
  color-scheme: light;
  --indigo:#667BC6; --indigo-ink:#4F63B0; --dusty:#8EA6C8;
  --aqua:#8FCBC3; --teal:#6FA8A3; --teal-ink:#3E7A75;
  --sage:#A8C3A0; --sage-ink:#58764F;
  --peach:#F3BE9D; --coral:#DE8F83; --coral-ink:#AE5F57;
  --lav:#B7A5D8; --lav-ink:#7160A5;
  --lav-50:#EEEAF8; --blue-50:#EAF3F8; --aqua-50:#E7F5F2; --peach-50:#FCEFE7; --sage-50:#EDF3EA;
  --neutral:#F7F7F5; --warm:#FBF8F5;
  --ink:#33373D; --ink-2:#6E747C; --ink-3:#8E949B; --line:rgba(51,55,61,.08);
  --glass:rgba(255,255,255,.55); --glass-hi:rgba(255,255,255,.74); --glass-line:rgba(255,255,255,.78);
  --blur:blur(18px) saturate(120%);
  --sh-1:0 1px 2px rgba(51,55,61,.04), 0 10px 30px -14px rgba(72,84,130,.22);
  --sh-2:0 2px 4px rgba(51,55,61,.04), 0 26px 60px -24px rgba(72,84,130,.34);
  --ease:cubic-bezier(.22,.7,.18,1);
  --f-ui:"Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-display:"Instrument Serif", "Iowan Old Style", Georgia, serif;
  --f-nq:"Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Noto Naskh Arabic", serif;
  --f-ur:"Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --dirx:1;
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .2 0 0 0 0 .21 0 0 0 0 .25 0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
[dir="rtl"]{--dirx:-1}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--neutral); color:var(--ink); font-family:var(--f-ui); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased}
.stage{font-family:var(--f-ui); background:var(--neutral); transition:opacity .25s var(--ease)}
.stage[dir="rtl"]{font-family:var(--f-ur)}
.stage[dir="rtl"] *{letter-spacing:0 !important}
h1,h2,h3,h4,p,figure,dl,dd{margin:0}
h1,h2,h3{text-wrap:balance}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer; background:none; border:0; padding:0}
ul{list-style:none; margin:0; padding:0}
:focus-visible{outline:2px solid var(--indigo); outline-offset:3px; border-radius:10px}
svg{flex:none}
.nq{font-family:var(--f-nq); line-height:2.1; font-weight:500}
.sr{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.ico{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
[dir="rtl"] .flip{transform:scaleX(-1)}

.site{container:site / inline-size; position:relative; overflow:clip}
.wrap{width:min(1240px, 100% - 64px); margin-inline:auto; position:relative}
.sec{position:relative; isolation:isolate; padding-block:128px}
.bg{position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden}
.bg::after{content:""; position:absolute; inset:0; background-image:var(--grain); opacity:.6}

/* ---------- Type scale: 12.5 / 14 / 16 / 18 / 22 / 28 / 40\2013 58 / 56\2013 104 ---------- */
.eyebrow{display:inline-flex; align-items:center; gap:10px; font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2)}
.eyebrow::before{content:""; width:22px; height:1.5px; border-radius:2px; background:currentColor; opacity:.55}
[dir="rtl"] .eyebrow{font-size:15px; font-weight:600}
.h2{margin-top:18px; font-size:clamp(34px, 4.5cqi, 58px); line-height:1.06; font-weight:600; letter-spacing:-.035em; color:var(--ink)}
.h2 em{font-family:var(--f-display); font-style:italic; font-weight:400; letter-spacing:-.01em; color:var(--indigo-ink)}
[dir="rtl"] .h2{font-family:var(--f-nq); font-weight:700; font-size:clamp(28px, 3.4cqi, 44px); line-height:2}
[dir="rtl"] .h2 em{font-family:inherit; font-style:normal; font-weight:inherit; color:var(--teal-ink)}
.lead{font-size:18px; line-height:1.7; color:var(--ink-2); max-width:56ch}
[dir="rtl"] .lead{line-height:2.05; font-size:17.5px}
.sec-head{display:grid; grid-template-columns:1.15fr .85fr; gap:24px 64px; align-items:end; margin-bottom:56px}
.sec-head .lead{justify-self:end}

/* stroke beside headings \2014  a single calligraphic flourish */
.stroke{display:block; width:120px; height:22px; margin-top:14px; color:var(--teal); opacity:.7}
.stroke path{fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round}
[dir="rtl"] .stroke{transform:scaleX(-1)}

/* ---------- Glass ---------- */
.glass{--tint:#fff; background:linear-gradient(135deg, rgba(255,255,255,.66), color-mix(in srgb, var(--tint) 18%, rgba(255,255,255,.42))); border:1px solid var(--glass-line); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); box-shadow:inset 0 1px 0 rgba(255,255,255,.85), var(--sh-1)}

/* ---------- Buttons ---------- */
.btn{--tint:#fff; position:relative; isolation:isolate; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:10px; height:50px; padding-inline:24px; border-radius:999px; font-size:15px; font-weight:600; letter-spacing:-.005em; white-space:nowrap; color:var(--ink);
  background:linear-gradient(135deg, rgba(255,255,255,.72), color-mix(in srgb, var(--tint) 20%, rgba(255,255,255,.45)));
  border:1px solid rgba(255,255,255,.88); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  box-shadow:inset 0 1px 0 #fff, 0 10px 26px -14px rgba(72,84,130,.45);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease)}
.btn::after{content:""; position:absolute; inset:-1px; z-index:-1; pointer-events:none; background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.85) 50%, transparent 65%); transform:translateX(-110%); transition:transform .9s var(--ease)}
.btn:hover{transform:translateY(-2px); box-shadow:inset 0 1px 0 #fff, 0 18px 34px -14px rgba(72,84,130,.5)}
.btn:hover::after{transform:translateX(110%)}
.btn:active{transform:translateY(0)}
.btn .ico{width:18px; height:18px}
.btn-primary{color:#fff; background:linear-gradient(135deg, #5A6EBB 0%, #6A7FC7 45%, #5A9892 100%); border-color:rgba(255,255,255,.4); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 14px 30px -12px rgba(90,110,187,.6)}
.btn-primary::after{background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%)}
.btn-sm{height:36px; padding-inline:14px; gap:6px; font-size:13px}
.btn-sm .ico{width:15px; height:15px}
.ibtn{display:grid; place-items:center; width:44px; height:44px; border-radius:14px; color:var(--ink); background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.9); box-shadow:0 6px 18px -12px rgba(72,84,130,.5); transition:transform .35s var(--ease), background .3s}
.ibtn:hover{transform:translateY(-1px); background:#fff}
.ibtn.round{border-radius:50%; width:48px; height:48px}
.link{display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:650; color:var(--indigo-ink)}
.link .arr{display:inline-flex; transition:transform .35s var(--ease)}
.link:hover .arr{transform:translateX(calc(var(--dirx) * 4px))}
.link .ico{width:17px; height:17px}

.chip{--tint:var(--indigo); display:inline-flex; align-items:center; gap:8px; height:36px; padding-inline:14px; border-radius:999px; font-size:13.5px; font-weight:600; white-space:nowrap; color:var(--ink);
  background:linear-gradient(135deg, rgba(255,255,255,.78), color-mix(in srgb, var(--tint) 16%, rgba(255,255,255,.5)));
  border:1px solid rgba(255,255,255,.95); box-shadow:0 6px 18px -12px color-mix(in srgb, var(--tint) 80%, transparent); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur)}
.chip i{width:7px; height:7px; border-radius:50%; background:var(--tint)}
[dir="rtl"] .chip{font-size:14px}

/* ---------- Overlay layer (nav, drawers, lightbox) ---------- */
.overlay{position:fixed; inset:0; z-index:60; pointer-events:none; container:ov / inline-size}
.overlay > .nav, .overlay > .toast{pointer-events:auto}

.nav{position:absolute; inset-block-start:18px; inset-inline:24px; margin-inline:auto; max-width:1320px; height:68px; display:flex; align-items:center; gap:10px; padding-inline:10px; border-radius:22px;
  background:rgba(255,255,255,.32); border:1px solid rgba(255,255,255,.6); -webkit-backdrop-filter:blur(12px) saturate(115%); backdrop-filter:blur(12px) saturate(115%);
  transition:max-width .7s var(--ease), inset .7s var(--ease), height .5s var(--ease), background .5s, box-shadow .5s}
.nav.floating{inset-block-start:12px; max-width:1190px; height:62px; background:rgba(255,255,255,.7); border-color:rgba(255,255,255,.95); box-shadow:var(--sh-2)}
.brand{display:flex; align-items:center; gap:12px; padding-inline:4px 12px; min-width:0}
.mark{display:grid; place-items:center; width:42px; height:42px; border-radius:14px; padding-bottom:6px; font-family:var(--f-nq); font-size:19px; line-height:1; color:var(--indigo-ink);
  background:linear-gradient(140deg, #DCE4F7, #E1F2EE 55%, #F7E4D8); border:1px solid #fff; box-shadow:inset 0 1px 0 #fff, 0 6px 16px -8px rgba(72,84,130,.45)}
.brand-txt{display:flex; flex-direction:column; line-height:1.15}
.brand-txt small{font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2)}
.brand-txt b{font-size:15.5px; font-weight:700; letter-spacing:-.01em; white-space:nowrap}
[dir="rtl"] .brand-txt small{font-size:11.5px; line-height:1.5}
[dir="rtl"] .brand-txt b{font-family:var(--f-nq); font-size:15px; line-height:1.8}

.nav-links{position:relative; display:flex; align-items:center; gap:2px; margin-inline:auto; padding:4px}
.nav-links a{position:relative; z-index:1; display:block; padding:8px 13px; border-radius:12px; font-size:14px; font-weight:600; color:var(--ink-2); transition:color .3s}
.nav-links a:hover, .nav-links a.active{color:var(--ink)}
[dir="rtl"] .nav-links a{font-size:15px; padding-block:6px}
.nav-ind{position:absolute; z-index:0; top:4px; bottom:4px; left:0; width:0; border-radius:12px; background:rgba(255,255,255,.9); box-shadow:0 4px 14px -6px rgba(72,84,130,.4), inset 0 0 0 1px #fff; transition:left .55s var(--ease), width .55s var(--ease), opacity .3s; pointer-events:none}
.nav-tools{display:flex; align-items:center; gap:8px}
.burger{display:none}

.lang{position:relative; display:flex; padding:4px; border-radius:14px; background:rgba(51,55,61,.055)}
.lang button{position:relative; z-index:1; flex:1 1 0; height:34px; min-width:50px; padding-inline:10px; border-radius:10px; font-size:13px; font-weight:700; color:var(--ink-2); transition:color .3s}
.lang button[aria-pressed="true"]{color:var(--ink)}
.lang .ur{font-family:var(--f-nq); font-size:14px; font-weight:600; line-height:1; padding-top:5px}
.lang .thumb{position:absolute; top:4px; bottom:4px; inset-inline-start:4px; width:calc(50% - 4px); border-radius:10px; background:#fff; box-shadow:0 3px 10px -4px rgba(72,84,130,.45); transition:transform .55s var(--ease)}
.lang.is-ur .thumb{transform:translateX(calc(var(--dirx) * 100%))}

@container ov (max-width: 1140px){
  .nav-links{display:none}
  .burger{display:grid}
  .nav-tools{margin-inline-start:auto}
}
@container ov (max-width: 560px){
  .nav{inset-inline:12px; inset-block-start:10px; height:60px; border-radius:20px; padding-inline:8px}
  .nav.floating{inset-block-start:8px; height:58px}
  .brand{gap:9px; padding-inline:2px 0}
  .mark{width:38px; height:38px; border-radius:12px}
  .brand-txt small{display:none}
  .brand-txt b{font-size:14.5px}
  .nav-search{display:none}
  .lang button{min-width:42px; padding-inline:6px}
  .ibtn{width:40px; height:40px; border-radius:12px}
}

/* ---------- Hero ---------- */
.hero{padding-block:132px 44px; overflow:hidden}
.wash{position:absolute; inset:0; opacity:0; transition:opacity 1.4s var(--ease)}
.wash.on{opacity:1}
.wash[data-i="0"]{background:radial-gradient(60% 70% at 10% 15%, #DAE3F8, transparent 62%), radial-gradient(50% 60% at 92% 10%, #D9F0EA, transparent 65%), radial-gradient(55% 60% at 70% 100%, #E7E0F7, transparent 62%), linear-gradient(180deg, #F1F4FA, #F6F7F8)}
.wash[data-i="1"]{background:radial-gradient(60% 70% at 88% 20%, #F8E2D4, transparent 62%), radial-gradient(55% 65% at 8% 85%, #DCE4F6, transparent 62%), radial-gradient(40% 50% at 50% 0%, #EEE8F8, transparent 70%), linear-gradient(180deg, #F7F3F1, #F7F7F6)}
.wash[data-i="2"]{background:radial-gradient(55% 65% at 85% 25%, #E6DCF6, transparent 62%), radial-gradient(50% 60% at 15% 90%, #F7DFD9, transparent 62%), radial-gradient(45% 55% at 30% 10%, #E4ECF8, transparent 70%), linear-gradient(180deg, #F5F3F9, #F7F6F7)}
.wash[data-i="3"]{background:radial-gradient(55% 65% at 12% 20%, #DFEEDB, transparent 62%), radial-gradient(55% 65% at 90% 30%, #D5EEE9, transparent 62%), radial-gradient(50% 60% at 60% 100%, #E8E2F6, transparent 65%), linear-gradient(180deg, #F1F6F2, #F6F7F6)}
.orb{position:absolute; border-radius:50%; filter:blur(56px); opacity:.5; animation:drift 24s ease-in-out infinite alternate}
.orb.o1{width:420px; height:420px; background:#C8D3F2; top:-140px; inset-inline-start:-100px}
.orb.o2{width:340px; height:340px; background:#C6E8E0; top:34%; inset-inline-end:6%; animation-duration:30s}
.orb.o3{width:300px; height:300px; background:#E0D5F3; bottom:-140px; inset-inline-start:38%; animation-duration:27s}
@keyframes drift{to{transform:translate(40px, 30px) scale(1.08)}}
.hero-callig{position:absolute; top:-30px; inset-inline-end:3%; font-family:var(--f-nq); font-size:560px; line-height:1.2; color:var(--indigo-ink); opacity:.055; user-select:none}
.hero-verse{position:absolute; bottom:28px; inset-inline-start:4%; font-family:var(--f-nq); font-size:30px; line-height:2; color:var(--teal-ink); opacity:.08; white-space:nowrap; user-select:none}

.slides{display:grid; touch-action:pan-y}
.slide{--step:1; grid-area:1 / 1; display:grid; grid-template-columns:55fr 45fr; gap:40px; align-items:center; min-height:580px;
  opacity:0; visibility:hidden; transform:translateX(calc(var(--dirx) * var(--step) * 30px));
  transition:opacity .7s var(--ease), transform 1s var(--ease), visibility 0s linear .7s}
.slide.is-active{opacity:1; visibility:visible; transform:none; transition:opacity .9s var(--ease) .12s, transform 1.1s var(--ease) .12s, visibility 0s}
.slide.is-leaving{transform:translateX(calc(var(--dirx) * var(--step) * -30px))}
.hero.animating .slide.is-active .rise{animation:rise .95s var(--ease) both; animation-delay:calc(var(--d, 0) * 90ms + 260ms)}
.hero.animating .slide.is-active .reveal-img{animation:imgReveal 1.3s var(--ease) both .18s}
@keyframes rise{from{opacity:0; transform:translateY(16px)}}
@keyframes imgReveal{from{clip-path:inset(9% 9% 9% 9% round 32px); transform:scale(1.04)}}

.slide-text{position:relative; z-index:2; display:flex; flex-direction:column; align-items:flex-start; gap:24px; max-width:640px}
.kicker{display:inline-flex; align-items:center; gap:10px; height:38px; padding-inline:6px 16px; border-radius:999px; font-size:13px; font-weight:600; color:var(--ink-2)}
.kicker b{display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:#fff}
.kicker b::after{content:""; width:8px; height:8px; border-radius:50%; background:linear-gradient(135deg, var(--indigo), var(--teal)); box-shadow:0 0 0 4px rgba(102,123,198,.15)}
[dir="rtl"] .kicker{font-size:14px}
.hero-name{font-family:var(--f-display); font-weight:400; font-size:clamp(54px, 7.6cqi, 108px); line-height:.94; letter-spacing:-.03em}
.hero-name .pre{display:block; margin-bottom:.55em; font-family:var(--f-ui); font-size:max(13px, .16em); font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--indigo-ink)}
.hero-name em{font-style:italic; padding-inline-end:.08em; color:transparent; background:linear-gradient(95deg, #5A6EBB, #5F9E98 60%, #9A86C9); -webkit-background-clip:text; background-clip:text}
[dir="rtl"] .hero-name{font-family:var(--f-nq); font-weight:700; font-size:clamp(38px, 5cqi, 70px); line-height:1.85}
[dir="rtl"] .hero-name .pre{font-family:var(--f-ur); font-size:17px; font-weight:600; line-height:1.6; margin-bottom:0}
[dir="rtl"] .hero-name em{font-style:normal; color:var(--teal-ink); background:none; padding:0}
.roles{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; font-size:15.5px; font-weight:600}
.roles i{width:5px; height:5px; border-radius:50%; background:var(--peach)}
.roles i:nth-of-type(2){background:var(--aqua)} .roles i:nth-of-type(3){background:var(--lav)}
.actions{display:flex; flex-wrap:wrap; gap:12px}
.slide-title{font-size:clamp(36px, 4.6cqi, 60px); line-height:1.04; font-weight:600; letter-spacing:-.035em}
.slide-title .ur-sub{display:block; margin-top:8px; font-family:var(--f-nq); font-size:.5em; font-weight:500; line-height:2; letter-spacing:0; color:var(--teal-ink)}
[dir="rtl"] .slide-title{font-family:var(--f-nq); font-weight:700; font-size:clamp(32px, 4cqi, 52px); line-height:1.9}
[dir="rtl"] .slide-title .ur-sub{font-family:var(--f-ui); font-size:17px; font-weight:600; line-height:1.4; color:var(--ink-2)}
.meta{display:flex; flex-wrap:wrap; gap:10px 28px}
.meta div{display:flex; flex-direction:column; gap:2px}
.meta dt{font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.meta dd{font-size:15px; font-weight:600}
[dir="rtl"] .meta dt{font-size:13px}

.slide-media{position:relative; align-self:stretch; display:grid; place-items:end center; min-height:560px}
.media-panel{position:absolute; inset:84px 0 0 0; border-radius:40px}
.portrait{position:relative; width:76%; aspect-ratio:4 / 5; max-height:560px; margin-bottom:34px; border-radius:30px; box-shadow:0 40px 70px -30px rgba(60,72,120,.5)}
.float-card{position:absolute; z-index:3; display:flex; align-items:center; gap:12px; padding:10px 18px 10px 10px; border-radius:20px; font-size:13px; line-height:1.35}
[dir="rtl"] .float-card{padding:10px 10px 10px 18px}
.float-card b{display:block; font-size:14px}
.float-card span{color:var(--ink-2)}
.fc-badge{display:grid; place-items:center; width:48px; height:48px; border-radius:14px; background:linear-gradient(140deg, #D8EFE9, #E5E0F6); color:var(--teal-ink); font-family:var(--f-nq); font-size:17px; line-height:1; padding-top:8px}
.fc1{inset-inline-start:-4%; bottom:18%; animation:bob 7s ease-in-out infinite}
.fc2{inset-inline-end:-3%; top:26%; animation:bob 8.5s ease-in-out -2s infinite}
.fc2 .mini{width:40px}
@keyframes bob{50%{transform:translateY(-8px)}}

/* book stage in hero */
.book-stage{position:relative; display:grid; place-items:center; min-height:560px}
.book-stage .halo{position:absolute; width:78%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.9), rgba(255,255,255,0) 68%)}
.book-stage .ring{position:absolute; width:66%; aspect-ratio:1; border-radius:50%; border:1px dashed color-mix(in srgb, var(--indigo) 35%, transparent); animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.book-stage .plinth{position:absolute; bottom:12%; width:70%; height:90px; border-radius:50%; background:radial-gradient(closest-side, rgba(72,84,130,.22), transparent); filter:blur(6px)}
.book-stage .cover{width:min(330px, 64%); transform:rotate(calc(var(--dirx) * -4deg))}
.book-stage.upcoming .cover{transform:rotate(calc(var(--dirx) * 3deg))}
.forth{position:absolute; z-index:3; top:16%; inset-inline-end:14%; display:flex; align-items:center; gap:8px; height:38px; padding-inline:14px; border-radius:999px; font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--lav-ink)}
.status{display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:16px; font-size:14px; font-weight:600; color:var(--ink-2)}
.status .ico{color:var(--lav-ink)}

.fan{position:relative; min-height:560px}
.fan .cover{position:absolute; width:min(230px, 40%); top:50%; left:50%; transition:transform .9s var(--ease)}
.fan .cover:nth-child(1){transform:translate(-118%, -52%) rotate(-12deg)}
.fan .cover:nth-child(2){transform:translate(-78%, -56%) rotate(-4deg)}
.fan .cover:nth-child(3){transform:translate(-30%, -50%) rotate(5deg)}
.fan .cover:nth-child(4){transform:translate(14%, -44%) rotate(13deg)}
.fan:hover .cover:nth-child(1){transform:translate(-128%, -54%) rotate(-15deg)}
.fan:hover .cover:nth-child(4){transform:translate(24%, -44%) rotate(16deg)}

.hero-ctrl{display:flex; align-items:center; gap:24px; margin-top:24px}
.dots{display:flex; gap:14px; flex:1; min-width:0}
.dot{display:flex; flex-direction:column; gap:10px; width:156px; text-align:start}
.dot .n{display:flex; gap:10px; font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap; transition:color .3s}
.dot .n span{font-weight:600; letter-spacing:0; overflow:hidden; text-overflow:ellipsis}
[dir="rtl"] .dot .n{font-size:13px}
.dot .bar{height:3px; border-radius:3px; background:rgba(51,55,61,.1); overflow:hidden}
.dot .bar b{display:block; height:100%; transform:scaleX(0); transform-origin:left; background:linear-gradient(90deg, var(--indigo), var(--teal))}
[dir="rtl"] .dot .bar b{transform-origin:right}
.dot.is-active .n{color:var(--ink)}
.dot.is-active .bar b{animation:fill 7.5s linear forwards}
.hero.paused .dot.is-active .bar b{animation-play-state:paused}
.hero.no-auto .dot.is-active .bar b{animation:none; transform:scaleX(1)}
@keyframes fill{to{transform:scaleX(1)}}
.arrows{display:flex; gap:10px}

/* ---------- Book cover component ---------- */
.cover{--c1:#7C8FD0; --c2:#45548E; --c3:#F3BE9D; --ic:#FBF6F0; container-type:inline-size; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:space-between; width:100%; aspect-ratio:2 / 3; padding:0; overflow:hidden; text-align:center; color:var(--ic); border-radius:5px 14px 14px 5px;
  background:radial-gradient(110% 60% at 85% 0%, color-mix(in srgb, var(--c3) 50%, transparent), transparent 60%), radial-gradient(90% 60% at 0% 100%, color-mix(in srgb, var(--c2) 70%, transparent), transparent 70%), linear-gradient(165deg, var(--c1), var(--c2));
  box-shadow:0 1px 1px rgba(0,0,0,.08), 0 34px 50px -24px color-mix(in srgb, var(--c2) 75%, transparent), 0 14px 22px -14px rgba(0,0,0,.28)}
.cover::before{content:""; position:absolute; inset-block:0; left:0; width:7%; background:linear-gradient(90deg, rgba(0,0,0,.24), rgba(255,255,255,.2) 45%, rgba(0,0,0,.05) 75%, transparent)}
.cover::after{content:""; position:absolute; inset:5.5%; border:1px solid color-mix(in srgb, var(--ic) 32%, transparent); border-radius:3px; pointer-events:none}
.cover[data-bind="rtl"]{border-radius:14px 5px 5px 14px}
.cover[data-bind="rtl"]::before{left:auto; right:0; transform:scaleX(-1)}
.cover.paper{--ic:#3A3F49}
.cv-top{margin-top:13cqi; padding-inline:8cqi; font-family:var(--f-ui); font-size:5.2cqi; font-weight:700; letter-spacing:.2em; text-transform:uppercase; opacity:.8; line-height:1.3}
.cv-orn{width:36cqi; aspect-ratio:1; border-radius:50%; opacity:.7;
  background:radial-gradient(circle, var(--ic) 0 13%, transparent 14% 22%, color-mix(in srgb, var(--c3) 90%, transparent) 23% 24%, transparent 25%), repeating-conic-gradient(color-mix(in srgb, var(--c3) 85%, transparent) 0 5deg, transparent 5deg 15deg);
  -webkit-mask:radial-gradient(circle, #000 69%, transparent 70%); mask:radial-gradient(circle, #000 69%, transparent 70%)}
.cv-ur{font-family:var(--f-nq); font-size:12.5cqi; font-weight:700; line-height:1.95}
.cv-en{font-family:var(--f-display); font-size:8.6cqi; line-height:1.05; letter-spacing:0}
.cv-by{margin-bottom:11cqi; font-family:var(--f-ui); font-size:4.6cqi; font-weight:600; letter-spacing:.14em; text-transform:uppercase; opacity:.85}
.cv-titles{padding-inline:11cqi; display:flex; flex-direction:column; align-items:center}
.mini{flex:none; width:44px}
.mini .cover{padding:0; border-radius:3px 6px 6px 3px}
.mini .cover > *{display:none}