@charset "utf-8";
/* ==========================================================
   Sections: placeholders \b7  biography \b7  research \b7  books \b7 
   collection \b7  selected research
   ========================================================== */

/* ---------- Photo placeholders (to be replaced by real photography) ---------- */
.ph{--p1:#DCE4F4; --p2:#E7DEF3; --p3:#C9D4EA; --p4:#B8C5DE; position:relative; overflow:hidden; isolation:isolate;
  background:radial-gradient(120% 90% at 25% 15%, var(--p1), transparent 60%), radial-gradient(100% 80% at 85% 95%, var(--p2), transparent 60%), linear-gradient(160deg, var(--p3), var(--p4))}
.ph::before{content:""; position:absolute; inset:0; z-index:1; background-image:var(--grain); opacity:.9; pointer-events:none}
.sil{position:absolute; inset-inline:17%; bottom:-4%; height:47%; border-radius:50% 50% 8% 8% / 72% 72% 8% 8%; background:linear-gradient(180deg, rgba(66,78,116,.2), rgba(66,78,116,.3))}
.sil::before{content:""; position:absolute; left:28%; bottom:94%; width:44%; aspect-ratio:1; border-radius:50%; background:rgba(66,78,116,.19)}
.ph-tag{position:absolute; z-index:2; inset-block-start:14px; inset-inline-start:14px; display:inline-flex; align-items:center; gap:6px; height:28px; padding-inline:10px; border-radius:999px; font-size:11.5px; font-weight:600; color:var(--ink-2); background:rgba(255,255,255,.62); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.ph-tag .ico{width:14px; height:14px}
.ph.sepia{--p1:#EFE6DA; --p2:#DCCFBF; --p3:#CFC3B4; --p4:#B5A898; filter:saturate(.7)}
.ph.sepia .sil{background:linear-gradient(180deg, rgba(90,74,58,.22), rgba(90,74,58,.32))}
.ph.sepia .sil::before{background:rgba(90,74,58,.22)}

/* reveal: elements stay readable; only motion is added */
.js .reveal{transition:transform 1s var(--ease), clip-path 1.2s var(--ease)}
.js .reveal:not(.in){transform:translateY(26px)}
.js .reveal.img:not(.in){clip-path:inset(4% 4% 4% 4% round 28px); transform:scale(1.02)}

/* ---------- Biography ---------- */
.bio .bg{background:radial-gradient(45% 55% at 95% 5%, #FBE7DB, transparent 70%), radial-gradient(40% 50% at 0% 100%, #ECE7F8, transparent 70%), var(--warm)}
.bio-grid{display:grid; grid-template-columns:5fr 6fr; gap:88px; align-items:center}
.collage{position:relative; padding-bottom:70px; padding-inline-end:48px}
.collage .main{aspect-ratio:4 / 5; border-radius:32px; --p1:#F6DFD0; --p2:#E6E0F5; --p3:#E4D7CB; --p4:#CBBFC0; box-shadow:0 40px 70px -34px rgba(120,90,80,.45)}
.collage .old{position:absolute; bottom:0; inset-inline-end:0; width:46%; aspect-ratio:1; border-radius:22px; border:8px solid #fff; box-shadow:var(--sh-2); transform:rotate(calc(var(--dirx) * 3deg))}
.collage .old .ph{position:absolute; inset:0; border-radius:14px}
.collage .note{position:absolute; top:10%; inset-inline-end:0; max-width:220px; padding:16px 18px; border-radius:20px; --tint:var(--peach)}
.collage .note small{display:block; font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--coral-ink)}
.collage .note b{display:block; margin-top:4px; font-size:15px; line-height:1.4}
[dir="rtl"] .collage .note small{font-size:13px}
.collage .callig{position:absolute; top:-60px; inset-inline-start:-40px; z-index:-1; font-family:var(--f-nq); font-size:220px; line-height:1.4; color:var(--coral-ink); opacity:.06}
.bio-text{display:flex; flex-direction:column; gap:22px}
.bio-text p{font-size:17px; line-height:1.75; color:var(--ink-2); max-width:58ch}
[dir="rtl"] .bio-text p{font-size:17px; line-height:2.1}
.bio-text p:first-of-type::first-line{color:var(--ink); font-weight:600}
.pull{position:relative; margin:6px 0; padding-block:6px; padding-inline-start:28px; font-family:var(--f-display); font-size:30px; line-height:1.25; color:var(--ink); max-width:26ch}
.pull::before{content:"\201c "; position:absolute; inset-inline-start:-6px; top:-16px; font-size:70px; line-height:1; color:var(--peach)}
[dir="rtl"] .pull{font-family:var(--f-nq); font-size:24px; line-height:2}
[dir="rtl"] .pull::before{content:"\201d "}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.facts{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; padding-block:22px; border-block:1px solid var(--line)}
.facts dt{font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.facts dd{margin-top:6px; font-size:15px; font-weight:600; line-height:1.45}
[dir="rtl"] .facts dt{font-size:13px}

/* ---------- Research bento ---------- */
.research .bg{background:radial-gradient(50% 60% at 0% 0%, #DDEBF6, transparent 70%), radial-gradient(45% 55% at 100% 60%, #DCF1EC, transparent 70%), linear-gradient(180deg, #EEF5F9, #F2F7F7)}
.bento{display:grid; grid-template-columns:repeat(6, 1fr); gap:18px}
.card{--acc:var(--aqua); --acc-ink:var(--teal-ink); position:relative; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; gap:14px; padding:28px; border-radius:28px;
  background:linear-gradient(160deg, rgba(255,255,255,.8), color-mix(in srgb, var(--acc) 22%, rgba(255,255,255,.5))); border:1px solid rgba(255,255,255,.9); box-shadow:inset 0 1px 0 #fff, var(--sh-1);
  transition:transform .6s var(--ease), box-shadow .6s var(--ease)}
.card:hover{transform:translateY(-4px); box-shadow:inset 0 1px 0 #fff, var(--sh-2)}
.card .ic{display:grid; place-items:center; width:48px; height:48px; border-radius:16px; color:var(--acc-ink); background:color-mix(in srgb, var(--acc) 30%, #fff)}
.card .ic .ico{width:24px; height:24px}
.card h3{font-size:22px; line-height:1.2; font-weight:650; letter-spacing:-.02em}
.card p{font-size:15px; line-height:1.6; color:var(--ink-2)}
[dir="rtl"] .card h3{font-family:var(--f-nq); font-size:21px; font-weight:700; line-height:1.9}
[dir="rtl"] .card p{line-height:1.95}
.card .link{margin-top:auto; color:var(--acc-ink)}
.b-feature{grid-column:span 3; grid-row:span 2; padding:40px; gap:18px; min-height:460px}
.b-feature h3{font-size:34px; letter-spacing:-.03em}
[dir="rtl"] .b-feature h3{font-size:32px}
.b-feature .big-callig{position:absolute; z-index:-1; bottom:-70px; inset-inline-end:-10px; font-family:var(--f-nq); font-size:230px; line-height:1.6; color:var(--teal-ink); opacity:.08}
.works{display:flex; flex-wrap:wrap; gap:8px}
.works span{padding:6px 12px; border-radius:999px; font-size:13px; font-weight:600; background:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.95)}
.b-med{grid-column:span 3}
.b-sm{grid-column:span 2}
.t-blue{--acc:var(--dusty); --acc-ink:var(--indigo-ink)}
.t-lav{--acc:var(--lav); --acc-ink:var(--lav-ink)}
.t-peach{--acc:var(--peach); --acc-ink:var(--coral-ink)}
.t-coral{--acc:var(--coral); --acc-ink:var(--coral-ink)}
.t-sage{--acc:var(--sage); --acc-ink:var(--sage-ink)}
.t-aqua{--acc:var(--aqua); --acc-ink:var(--teal-ink)}
.b-med{flex-direction:row; align-items:flex-start; gap:20px}
.b-med .body{display:flex; flex-direction:column; gap:10px; min-height:100%}

/* ---------- Books & library ---------- */
.books .bg{background:radial-gradient(40% 45% at 100% 0%, #E9E4F8, transparent 70%), radial-gradient(40% 45% at 0% 100%, #E3EEF8, transparent 70%), radial-gradient(60% 60% at 50% 40%, #FFFFFF, transparent 80%), #F8F8FA}
.library{display:flex; flex-direction:column; gap:18px; margin-bottom:44px}
.search{display:flex; align-items:center; gap:14px; height:64px; padding-inline:22px 10px; border-radius:999px; --tint:var(--lav)}
.search .ico{color:var(--ink-3); width:22px; height:22px}
.search input{flex:1; min-width:0; height:100%; border:0; outline:0; background:none; font-size:17px; font-weight:500}
.search input::placeholder{color:var(--ink-3)}
.search kbd{display:grid; place-items:center; min-width:30px; height:30px; padding-inline:8px; border-radius:9px; font:600 13px var(--f-ui); color:var(--ink-2); background:rgba(51,55,61,.06)}
.search:focus-within{box-shadow:inset 0 1px 0 #fff, 0 0 0 4px rgba(102,123,198,.16), var(--sh-2)}
.filter-row{display:flex; align-items:center; gap:14px; justify-content:space-between}
.fchips{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:4px 2px 8px; margin:-4px -2px -8px}
.fchips::-webkit-scrollbar{display:none}
.fchip{--tint:var(--indigo); display:inline-flex; align-items:center; gap:8px; height:40px; padding-inline:16px; border-radius:999px; font-size:14px; font-weight:600; white-space:nowrap; color:var(--ink-2); background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.95); box-shadow:0 4px 14px -10px rgba(72,84,130,.45); transition:all .35s var(--ease)}
.fchip i{width:8px; height:8px; border-radius:50%; background:var(--tint); transition:transform .35s var(--ease)}
.fchip:hover{color:var(--ink); transform:translateY(-1px)}
.fchip[aria-pressed="true"]{color:var(--ink); background:linear-gradient(135deg, #fff, color-mix(in srgb, var(--tint) 28%, #fff)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--tint) 45%, transparent), 0 8px 20px -12px color-mix(in srgb, var(--tint) 90%, transparent)}
.fchip[aria-pressed="true"] i{transform:scale(1.25)}
.selects{display:flex; gap:8px; flex:none}
.sel{position:relative}
.sel select{appearance:none; -webkit-appearance:none; height:40px; padding-inline:16px 36px; border-radius:14px; font-size:13.5px; font-weight:600; color:var(--ink); background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.95); box-shadow:0 4px 14px -10px rgba(72,84,130,.45); cursor:pointer}
.sel .ico{position:absolute; top:50%; inset-inline-end:12px; width:15px; height:15px; transform:translateY(-50%); pointer-events:none; color:var(--ink-2)}
[dir="rtl"] .sel select{padding-inline:36px 16px}
.filters-btn{display:none}
.lib-foot{display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:14px; color:var(--ink-2); font-variant-numeric:tabular-nums}
.book-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:28px 24px}
.book{--c1:#7C8FD0; --c2:#45548E; position:relative; display:flex; flex-direction:column; border-radius:28px; padding:14px; background:linear-gradient(170deg, rgba(255,255,255,.85), rgba(255,255,255,.55)); border:1px solid rgba(255,255,255,.95); box-shadow:inset 0 1px 0 #fff, 0 20px 40px -30px color-mix(in srgb, var(--c2) 60%, transparent);
  transition:transform .6s var(--ease), box-shadow .6s var(--ease), opacity .45s var(--ease)}
.book.hide{display:none}
.book.enter{animation:bookIn .6s var(--ease) both}
@keyframes bookIn{from{opacity:0; transform:translateY(12px) scale(.98)}}
.book-shelf{position:relative; display:grid; place-items:center; padding:36px 0 30px; border-radius:20px; overflow:hidden;
  background:radial-gradient(70% 60% at 50% 100%, color-mix(in srgb, var(--c1) 28%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--c1) 10%, #fff), color-mix(in srgb, var(--c3, var(--c1)) 16%, #fff))}
.book-shelf .cover{width:48%; transition:transform .7s var(--ease), box-shadow .7s var(--ease)}
.book:hover{transform:translateY(-4px); box-shadow:inset 0 1px 0 #fff, 0 34px 60px -30px color-mix(in srgb, var(--c2) 70%, transparent)}
.book:hover .book-shelf .cover{transform:translateY(-10px) rotate(calc(var(--dirx) * -2deg))}
.book-body{display:flex; flex-direction:column; gap:8px; padding:18px 10px 6px}
.book-meta{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-size:12.5px; font-weight:600; color:var(--ink-2); font-variant-numeric:tabular-nums}
.book-meta .tag{padding:4px 10px; border-radius:999px; color:var(--ink); background:color-mix(in srgb, var(--c1) 16%, #fff)}
.book-meta .sep{width:3px; height:3px; border-radius:50%; background:var(--ink-3)}
.book h3{font-size:21px; font-weight:650; line-height:1.25; letter-spacing:-.02em}
.book .alt{font-family:var(--f-nq); font-size:16px; line-height:2; color:var(--ink-2)}
[dir="rtl"] .book h3{font-family:var(--f-nq); font-size:22px; font-weight:700; line-height:1.9}
[dir="rtl"] .book .alt{font-family:var(--f-ui); font-size:14px; font-weight:600; line-height:1.4}
.book-more{display:grid; grid-template-rows:0fr; transition:grid-template-rows .6s var(--ease)}
.book-more > div{overflow:hidden}
.book-more p{padding-top:4px; font-size:14.5px; line-height:1.6; color:var(--ink-2)}
[dir="rtl"] .book-more p{line-height:1.95}
.book:hover .book-more, .book:focus-within .book-more{grid-template-rows:1fr}
.book-actions{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.book-actions .btn{transition:transform .45s var(--ease), box-shadow .45s var(--ease), background .3s}
.book:hover .book-actions .btn{animation:actIn .5s var(--ease) both}
.book:hover .book-actions .btn:nth-child(2){animation-delay:.05s}
.book:hover .book-actions .btn:nth-child(3){animation-delay:.1s}
@keyframes actIn{from{transform:translateY(6px)}}
.empty{display:none; padding:48px; text-align:center; border-radius:28px; color:var(--ink-2)}
.empty.show{display:block}
.empty b{display:block; margin-bottom:6px; font-size:18px; color:var(--ink)}

/* ---------- Sultan Bahoo collection ---------- */
.collection .bg{background:radial-gradient(55% 60% at 0% 10%, #DCEBD8, transparent 70%), radial-gradient(50% 60% at 100% 30%, #D2ECE6, transparent 70%), radial-gradient(45% 55% at 60% 100%, #E6E0F5, transparent 70%), linear-gradient(180deg, #EFF5F0, #F1F6F5)}
.collection .verse-bg{position:absolute; top:44px; inset-inline:0; text-align:center; font-family:var(--f-nq); font-size:120px; line-height:2; color:var(--sage-ink); opacity:.05; white-space:nowrap; overflow:hidden}
.col-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.col-text{display:flex; flex-direction:column; gap:22px}
.col-ur{font-family:var(--f-nq); font-size:34px; line-height:2; font-weight:600; color:var(--teal-ink); margin-block:-10px -18px}
.col-text .h2{margin-top:0}
.verse{--tint:var(--aqua); padding:22px 26px; border-radius:24px; display:flex; flex-direction:column; gap:6px}
.verse .nq{font-size:22px; line-height:2.2; color:var(--ink); text-align:start}
.verse .nq{direction:rtl; text-align:right}
.verse p{font-size:14.5px; line-height:1.6; color:var(--ink-2); font-style:italic}
[dir="rtl"] .verse p{font-style:normal}
.verse small{font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--teal-ink)}
[dir="rtl"] .verse small{font-size:13px}
.stack{position:relative; height:560px}
.stack .cover{position:absolute; top:50%; left:50%; width:250px; cursor:pointer;
  transition:transform .9s var(--ease), filter .9s var(--ease), box-shadow .9s var(--ease); transform:translate(calc(-50% + var(--x) * 1px), calc(-50% + var(--y) * 1px)) rotate(calc(var(--r) * 1deg)) scale(var(--s)); z-index:var(--z); filter:saturate(var(--sat))}
.stack-hint{position:absolute; bottom:6px; left:50%; transform:translateX(-50%); display:inline-flex; align-items:center; gap:8px; height:38px; padding-inline:14px; border-radius:999px; font-size:13px; font-weight:600; color:var(--ink-2); white-space:nowrap}
.col-tabs{margin-top:64px; display:flex; flex-direction:column; gap:22px}
.col-strip{display:grid; grid-template-columns:repeat(4, 1fr); gap:14px}
.work{--c1:#7C8FD0; display:flex; align-items:center; gap:14px; padding:12px; border-radius:20px; background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.95); box-shadow:var(--sh-1); transition:transform .5s var(--ease), box-shadow .5s var(--ease)}
.work:hover{transform:translateY(-3px); box-shadow:var(--sh-2)}
.work.enter{animation:bookIn .55s var(--ease) both}
.work .mini{width:48px}
.work b{display:block; font-size:14.5px; line-height:1.3; font-weight:650}
.work span{display:block; margin-top:3px; font-size:12.5px; color:var(--ink-2)}
[dir="rtl"] .work b{font-family:var(--f-nq); font-size:15px; font-weight:700; line-height:1.9}
.work .soon{display:inline-block; margin-inline-start:6px; padding:1px 8px; border-radius:999px; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--lav-ink); background:var(--lav-50); vertical-align:middle}

/* ---------- Selected research ---------- */
.selected .bg{background:radial-gradient(45% 60% at 100% 0%, #E2ECF8, transparent 70%), radial-gradient(40% 50% at 0% 100%, #FBEDE5, transparent 70%), var(--neutral)}
.rail-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:40px}
.rail{display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:max(32px, (100% - 1240px) / 2); padding-inline:max(32px, (100% - 1240px) / 2); padding-block:10px 30px; scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.paper{--acc:var(--aqua); --acc-ink:var(--teal-ink); flex:none; width:372px; scroll-snap-align:start; display:flex; flex-direction:column; border-radius:28px; overflow:hidden; background:rgba(255,255,255,.78); border:1px solid rgba(255,255,255,.95); box-shadow:inset 0 1px 0 #fff, var(--sh-1); transition:transform .6s var(--ease), box-shadow .6s var(--ease)}
.paper:hover{transform:translateY(-5px); box-shadow:var(--sh-2)}
.paper-top{position:relative; height:132px; overflow:hidden; display:flex; align-items:flex-start; justify-content:space-between; padding:20px 22px; background:radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--acc) 55%, #fff), transparent 70%), linear-gradient(160deg, color-mix(in srgb, var(--acc) 22%, #fff), color-mix(in srgb, var(--acc) 38%, #fff))}
.paper-top .kw{position:absolute; bottom:-34px; inset-inline-end:18px; font-family:var(--f-nq); font-size:96px; line-height:1.6; color:var(--acc-ink); opacity:.22}
.paper-top .cat{position:relative; padding:5px 12px; border-radius:999px; font-size:12px; font-weight:700; color:var(--acc-ink); background:rgba(255,255,255,.75)}
.paper-top .yr{position:relative; font-family:var(--f-display); font-size:26px; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums}
.paper-body{display:flex; flex-direction:column; gap:10px; flex:1; padding:22px 24px 24px}
.paper h3{font-size:19px; line-height:1.3; font-weight:650; letter-spacing:-.015em}
[dir="rtl"] .paper h3{font-family:var(--f-nq); font-size:19px; font-weight:700; line-height:1.95}
.paper .lang-l{font-size:12.5px; font-weight:600; color:var(--ink-3)}
.paper p{font-size:14.5px; line-height:1.6; color:var(--ink-2)}
[dir="rtl"] .paper p{line-height:1.95}
.paper .link{margin-top:auto; padding-top:8px; color:var(--acc-ink); font-size:14px}