/* ==========================================================================
   TafsirKurd 2.0 — sheikh.html: one teacher's books + Islam Voice videos.
   Premium pass: a framed portrait on a deep-green hero (the photo, blurred,
   tints the backdrop — static), big numbers, the newest lesson as a cinematic
   banner, books standing on a wooden shelf (3D shapes from tk3-library.css),
   series as playlist stacks, a sliding tab pill, other teachers at the end.
   Motion: hover transforms, the shared data-rv reveal, one finite play-ring.
   ========================================================================== */

/* ── hero ── */
.tks-hero { position: relative; isolation: isolate; overflow: hidden; color: #F4E8CC; padding-block: var(--s8);
  background: radial-gradient(70% 110% at 12% 20%, rgba(216, 181, 106, .16) 0%, rgba(216, 181, 106, 0) 60%),
              radial-gradient(90% 120% at 90% 0%, rgba(140, 196, 164, .18) 0%, rgba(140, 196, 164, 0) 55%),
              linear-gradient(160deg, #143522 0%, #0E1A14 80%); }
.tks-hero__bg { position: absolute; inset: -40px; z-index: -2; background: center / cover no-repeat; filter: blur(40px) saturate(1.25); opacity: .26; transform: scale(1.1); }
/* a faint eight-point star lattice, static */
.tks-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .07; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23F4E8CC' stroke-width='1'%3E%3Cpath d='M32 8l7 17 17 7-17 7-7 17-7-17-17-7 17-7z'/%3E%3Crect x='20' y='20' width='24' height='24' transform='rotate(45 32 32)'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 64px 64px;
  -webkit-mask-image: linear-gradient(270deg, #000 0%, transparent 70%); mask-image: linear-gradient(270deg, #000 0%, transparent 70%); }
[dir="ltr"] .tks-hero::before { -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 70%); mask-image: linear-gradient(90deg, #000 0%, transparent 70%); }
.tks-hero::after { content: ''; position: absolute; inset: auto 0 0; height: 45%; z-index: -1; background: linear-gradient(0deg, rgba(14, 26, 20, .7), rgba(14, 26, 20, 0)); }
.tks-hero__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s8); align-items: center; }
.tks-hero__txt { min-width: 0; }
.tks-back { display: flex; width: max-content; align-items: center; gap: 6px; color: #B9B09A; font-size: var(--t-sm); font-weight: 600; margin-bottom: var(--s4); }
.tks-back:hover { color: #FBF3DD; }
.tks-back .tk-icon { width: 16px; height: 16px; }
.tks-kick { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: #D8B56A; font-weight: 700; font-size: var(--t-sm); }
.tks-kick::before { content: ''; width: 28px; height: 2px; border-radius: 2px; background: currentColor; }
.tks-hero h1 { margin: var(--s3) 0 0; font: 800 clamp(2.1rem, 2.6vw + 1.3rem, 3.8rem)/1.18 var(--f-ui); color: #FBF3DD; letter-spacing: -.01em; text-wrap: balance; }
.tks-lede { margin: var(--s4) 0 0; max-width: 38rem; color: #D7CDB4; font-size: var(--t-lg); line-height: 1.85; }
.tks-lede:empty { display: none; }
.tks-nums { display: flex; flex-wrap: wrap; margin: var(--s6) 0 0; }
.tks-nums:empty { display: none; }
.tks-nums div { display: grid; gap: 2px; padding-inline: var(--s5); }
.tks-nums div:first-child { padding-inline-start: 0; }
.tks-nums div + div { border-inline-start: 1px solid rgba(244, 232, 204, .16); }
.tks-nums b { font: 800 clamp(1.7rem, 1.2vw + 1.2rem, 2.4rem)/1.1 var(--f-ui); color: #FBF3DD; font-variant-numeric: tabular-nums; }
.tks-nums span { color: #B9B09A; font-size: var(--t-sm); }
.tks-cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.tks-cta:empty { display: none; }
.tks-btn--light { background: #F4E8CC; color: #0F3A25; border: 0; }
.tks-btn--light:hover { background: #fff; color: #0F3A25; }
.tks-btn--glass { background: rgba(244, 232, 204, .08); color: #FBF3DD; border: 1px solid rgba(244, 232, 204, .22); cursor: pointer; font: inherit; font-weight: 600; }
.tks-btn--glass:hover { background: rgba(244, 232, 204, .16); color: #fff; }
.tks-cta .tk-btn:active { transform: scale(.98); }
.tks-cta .tk-icon { width: 18px; height: 18px; }

/* the portrait: a gold hairline frame offset behind a rounded photo */
.tks-portrait { position: relative; width: 300px; aspect-ratio: 4 / 5; }
.tks-portrait__frame { position: absolute; inset: 0; border-radius: 34px; border: 1.5px solid rgba(216, 181, 106, .6); transform: translate3d(-18px, 18px, 0) rotate(-3deg); }
[dir="ltr"] .tks-portrait__frame { transform: translate3d(18px, 18px, 0) rotate(3deg); }
.tks-portrait__pic { position: absolute; inset: 0; overflow: hidden; border-radius: 34px; background: #1B4D33;
  box-shadow: 0 0 0 1px rgba(244, 232, 204, .14) inset, 0 40px 70px -30px rgba(0, 0, 0, .85); }
.tks-portrait__pic img { width: 100%; height: 100%; object-fit: cover; }
.tks-portrait__pic i { width: 100%; height: 100%; display: grid; place-items: center; font: 800 6rem/1 var(--f-ui); font-style: normal; color: #F4E8CC; }
.tks-portrait__pic::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 26, 20, 0) 55%, rgba(14, 26, 20, .45)); }

/* index hero: a fan of teacher faces */
.tks-stack { position: relative; width: 320px; height: 220px; }
.tks-stack span { position: absolute; top: 50%; left: 50%; width: 132px; height: 132px; margin: -66px 0 0 -66px; border-radius: 50%; overflow: hidden;
  border: 4px solid #12291c; box-shadow: 0 20px 36px -18px rgba(0, 0, 0, .8);
  transform: translate3d(calc((var(--i) - 2) * 62px), calc((var(--i) - 2) * (var(--i) - 2) * 6px), 0) rotate(calc((var(--i) - 2) * 4deg)); z-index: calc(5 - (var(--i) - 2) * (var(--i) - 2)); }
.tks-stack span img { width: 100%; height: 100%; object-fit: cover; }
.tks-hero--index .tks-nums b { font-size: clamp(1.5rem, 1vw + 1.1rem, 2rem); }

/* ── tabs: a segmented control with a sliding pill ── */
.tks-main { padding-block: var(--s6) var(--s9); }
.tks-tabs { position: sticky; top: calc(var(--nav-h, 68px) + 8px); z-index: 5; display: inline-flex; gap: 4px; padding: 4px; margin-bottom: var(--s2);
  border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 12px 28px -18px rgba(15, 30, 20, .45); }
.tks-tabs[hidden] { display: none; }
.tks-tabs__ind { position: absolute; top: 4px; bottom: 4px; left: 4px; width: 0; border-radius: 999px; background: var(--green);
  box-shadow: 0 6px 16px -8px rgba(15, 58, 37, .7); transition: transform var(--d3) var(--ease), width var(--d3) var(--ease); }
.tks-tabs button { position: relative; min-height: 42px; padding: 0 22px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font: 600 var(--t-sm)/1 var(--f-ui); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: color var(--d3) var(--ease); }
.tks-tabs button:hover { color: var(--green); }
.tks-tabs button[aria-selected="true"] { color: var(--on-green); }
.tks-tabs small { font-size: 11px; opacity: .75; }

/* ── sections ── */
.tks-sec { margin-top: var(--s7); }
.tks-sec__head { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); margin-bottom: var(--s5); }
.tks-sec__head h2 { display: flex; align-items: center; gap: 12px; margin: 0; font-size: var(--t-xl); font-weight: 800; color: var(--green-ink); }
.tks-sec__head h2 small { font-size: var(--t-sm); color: var(--muted); font-weight: 500; }
.tks-sec__ic { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--wash-2); color: var(--green); }
.tks-sec__ic .tk-icon { width: 20px; height: 20px; }
.tks-sec button.tk-link { border: 0; background: none; padding: 0; cursor: pointer; font-family: inherit; }

/* ── the newest lesson ── */
.tks-featwrap { margin-top: var(--s6); }
.tks-sk-feat { height: clamp(260px, 30vw, 400px); border-radius: var(--r-xl); }
.tks-feat { position: relative; isolation: isolate; display: block; min-height: clamp(300px, 30vw, 420px); overflow: hidden; border-radius: var(--r-xl);
  background: #0b1510; color: #F4E8CC; box-shadow: 0 30px 60px -30px rgba(8, 20, 14, .55); }
.tks-feat__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.tks-feat__bg img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.tks-feat:hover .tks-feat__bg img { transform: scale(1.04); }
.tks-feat__bg::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(270deg, rgba(8, 16, 12, .96) 0%, rgba(8, 16, 12, .84) 36%, rgba(8, 16, 12, .3) 66%, rgba(8, 16, 12, .05) 100%),
              linear-gradient(0deg, rgba(8, 16, 12, .5) 0%, rgba(8, 16, 12, 0) 40%); }
[dir="ltr"] .tks-feat__bg::after { transform: scaleX(-1); }
.tks-feat__body { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 12px; width: min(540px, 100%); min-height: inherit; padding: var(--s7); }
.tks-feat__tag { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 5px 12px; border-radius: 999px;
  background: rgba(216, 181, 106, .14); border: 1px solid rgba(216, 181, 106, .4); color: #E6C98A; font-weight: 700; font-size: var(--t-xs); }
.tks-feat__tag .tk-icon { width: 14px; height: 14px; }
.tks-feat__t { font: 800 clamp(1.5rem, 1.3vw + 1.1rem, 2.4rem)/1.3 var(--f-ui); color: #FBF3DD; text-wrap: balance;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tks-feat__meta { color: #C9BFA6; font-size: var(--t-sm); }
.tks-feat__cta { display: inline-flex; align-items: center; gap: 14px; align-self: flex-start; margin-top: var(--s3); font-weight: 700; font-size: var(--t-lg); color: #FBF3DD; }
.tks-feat__play { position: relative; width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%; background: #F4E8CC; color: #0F3A25;
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .6); transition: transform var(--d3) var(--ease); }
.tks-feat__play .tk-icon { width: 24px; height: 24px; fill: currentColor; margin-inline-start: 3px; }
.tks-feat__play::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(244, 232, 204, .55); opacity: 0; }
html.tk-js .tks-feat.is-in .tks-feat__play::before { animation: tksRing 1.8s var(--ease) .5s 3; }
@keyframes tksRing { from { transform: scale(.85); opacity: .9; } to { transform: scale(1.45); opacity: 0; } }
.tks-feat:hover .tks-feat__play { transform: scale(1.08); }

/* ── books: standing on a wooden shelf («هەمی»), a grid on the books tab ── */
.tks-shelf { --bk: 150px; display: grid; grid-auto-flow: column; grid-auto-columns: var(--bk); gap: var(--s6); overflow-x: auto; padding: 10px 6px 18px; scrollbar-width: thin;
  /* the plank's top edge sits at the covers' feet (10px padding + cover height); repeat-x + local = it runs the whole scroll width */
  background: linear-gradient(180deg, #caa576 0, #b28a58 45%, #8e6b41 100%) 0 calc(10px + var(--bk) * 4.3 / 3 - 3px) / 100% 14px repeat-x local,
              linear-gradient(180deg, rgba(40, 25, 8, .28), rgba(40, 25, 8, 0)) 0 calc(10px + var(--bk) * 4.3 / 3 + 11px) / 100% 14px repeat-x local; }
:root[data-theme="sakina"] .tks-shelf { background: linear-gradient(180deg, #6f5433 0, #5a4228 55%, #3e2d1a 100%) 0 calc(10px + var(--bk) * 4.3 / 3 - 3px) / 100% 14px repeat-x local; }
.tks-shelf .bk3__t { margin-top: 26px; }
.tks-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s7) var(--s5); padding-top: var(--s2); }
.tks-book { width: 100%; }
.tks-book .bk3__stage { margin-bottom: 4px; }
.tks-cover__t { position: absolute; inset: 0; display: grid; place-items: center; padding: 12px; text-align: center; font-weight: 700; font-size: var(--t-sm); line-height: 1.5;
  color: var(--green-ink); background: linear-gradient(160deg, var(--wash-2), var(--surface-2)); }
.bk3__cover img { position: relative; z-index: 1; }
.bk3__cover.tks-cover--series { box-shadow: -6px -6px 0 -1px var(--sand), 0 18px 26px -14px rgba(15, 20, 12, .55); }

/* ── videos ── */
.tks-rail { padding-bottom: 6px; }
.tks-rail--stack, .tks-grid--stack { padding-top: 12px; }
.tks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s6) var(--s4); }
.tks-media-img, .tks-ep .tk-media__img, .tks-ser .tk-media__img { border-radius: var(--r-lg); box-shadow: 0 14px 28px -18px rgba(15, 30, 20, .55); }
.tks-ser__stack { position: relative; display: block; }
.tks-ser__stack::before, .tks-ser__stack::after { content: ''; position: absolute; inset-inline: 8%; top: -6px; bottom: 6px; border-radius: var(--r-lg); background: var(--sand); opacity: .75; }
.tks-ser__stack::after { inset-inline: 16%; top: -12px; bottom: 12px; opacity: .45; }
.tks-ser__stack .tk-media__img { position: relative; z-index: 1; transition: transform var(--d3) var(--ease); }
.tks-ser:hover .tks-ser__stack .tk-media__img { transform: translate3d(0, -3px, 0); }
.tks-count { position: absolute; bottom: 8px; inset-inline-start: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 6px;
  background: rgba(8, 20, 14, .82); color: #F4E8CC; font-size: 11px; font-weight: 700; }
.tks-count .tk-icon { width: 13px; height: 13px; }
.tks-new { position: absolute; top: 10px; inset-inline-start: 10px; padding: 2px 9px; border-radius: 6px; background: var(--green); color: var(--on-green); font-size: 11px; font-weight: 700; }
.tks-play { position: absolute; inset: 0; margin: auto; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(244, 232, 204, .94); color: #0F3A25; opacity: 0; transform: scale(.8); transition: opacity var(--d2) var(--ease), transform var(--d2) var(--ease); }
.tks-play .tk-icon { width: 20px; height: 20px; fill: currentColor; margin-inline-start: 2px; }
.tk-media:hover .tks-play, .tk-media:focus-visible .tks-play { opacity: 1; transform: none; }
.tks-more { display: flex; margin: var(--s6) auto 0; }

/* ── people: other teachers (a row of rings) and the index (cards) ── */
.tks-others { display: grid; grid-auto-flow: column; grid-auto-columns: 138px; gap: var(--s4); overflow-x: auto; padding: 4px 2px var(--s3); scrollbar-width: thin; }
.tks-person { display: grid; justify-items: center; align-content: start; gap: 2px; text-align: center; color: var(--ink); }
.tks-person b { font-size: var(--t-sm); line-height: 1.4; }
.tks-person small { color: var(--muted); font-size: var(--t-xs); }
.tks-person__av { width: 112px; height: 112px; padding: 3px; margin-bottom: 8px; border-radius: 50%; flex: none;
  background: conic-gradient(from 210deg, var(--green), #8CC4A4, #D8B56A, var(--green)); transition: transform var(--d3) var(--ease); }
.tks-person__av img, .tks-person__av i { width: 100%; height: 100%; display: grid; place-items: center; border-radius: 50%; object-fit: cover; border: 3px solid var(--cream);
  background: var(--green); color: var(--on-green); font: 800 2.2rem/1 var(--f-ui); font-style: normal; }
.tks-person:hover .tks-person__av, .tks-card:hover .tks-person__av { transform: translate3d(0, -4px, 0) scale(1.03); }

.tks-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--s5); }
.tks-card { position: relative; display: grid; justify-items: center; align-content: start; gap: 8px; padding: var(--s6) var(--s4) var(--s5); text-align: center; color: var(--ink);
  border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 16px 34px -26px rgba(15, 30, 20, .5); transition: transform var(--d3) var(--ease), border-color var(--d3) var(--ease); }
.tks-card:hover { transform: translate3d(0, -4px, 0); border-color: var(--line-strong); color: var(--ink); }
.tks-card:active { transform: scale(.98); }
.tks-card .tks-person__av { width: 124px; height: 124px; margin-bottom: 4px; }
.tks-card b { font-size: var(--t-md); line-height: 1.4; text-wrap: balance; }
.tks-card__m { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.tks-card__m span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: var(--wash-2); color: var(--green-ink); font-size: var(--t-xs); font-weight: 600; }
.tks-card__m .tk-icon { width: 13px; height: 13px; color: var(--green); }

.tks-skel { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s4); margin-top: var(--s6); }
.tks-skel .tk-sk, .tks-sk-media { aspect-ratio: 16 / 9; border-radius: var(--r-md); }
.tks-empty { display: grid; justify-items: center; gap: var(--s4); padding: var(--s8) var(--s4); text-align: center; color: var(--ink-2); }
.tks-empty p { margin: 0; }

@media (max-width: 900px) {
  .tks-hero { padding-block: var(--s6); }
  .tks-hero__in { grid-template-columns: 1fr; gap: var(--s5); }
  .tks-portrait { order: -1; width: 168px; }
  .tks-portrait__frame, .tks-portrait__pic { border-radius: 24px; }
  .tks-portrait__frame { transform: translate3d(-10px, 10px, 0) rotate(-3deg); }
  .tks-stack { order: -1; width: 100%; height: 130px; }
  .tks-stack span { width: 84px; height: 84px; margin: -42px 0 0 -42px; transform: translate3d(calc((var(--i) - 2) * 40px), calc((var(--i) - 2) * (var(--i) - 2) * 4px), 0) rotate(calc((var(--i) - 2) * 4deg)); }
  .tks-lede { font-size: var(--t-md); }
  .tks-nums div { padding-inline: var(--s4); }
  .tks-feat { min-height: 0; }
  .tks-feat__bg { position: relative; display: block; aspect-ratio: 16 / 9; z-index: 0; }
  .tks-feat__bg::after { background: linear-gradient(0deg, #0b1510 0%, rgba(11, 21, 16, 0) 55%); }
  .tks-feat__body { width: 100%; margin-top: -40px; padding: 0 var(--s5) var(--s5); }
  .tks-feat__play { width: 50px; height: 50px; }
}
@media (max-width: 700px) {
  .tks-tabs { display: flex; width: 100%; }
  .tks-tabs button { flex: 1; padding: 0 10px; }
  .tks-shelf { --bk: 118px; gap: var(--s5); }
  .tks-books { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6) var(--s3); }
  .tks-books .bk3__t { font-size: var(--t-xs); }
  .bk3__book { --T: 14px; }
  .tks-others { grid-auto-columns: 112px; }
  .tks-others .tks-person__av { width: 92px; height: 92px; }
  .tks-people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
  .tks-card { padding: var(--s5) var(--s3) var(--s4); }
  .tks-card .tks-person__av { width: 96px; height: 96px; }
  .tks-card b { font-size: var(--t-sm); }
}
@media (prefers-reduced-motion: reduce) {
  .tks-feat__play::before { animation: none !important; }
  .tks-tabs__ind { transition: none; }
}

/* ── biography: a dated timeline, the works at a glance, the full list of works ── */
.tks-tl { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: var(--s4); }
.tks-tl::before { content: ''; position: absolute; top: 8px; bottom: 8px; inset-inline-start: 43px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--green), rgba(31, 107, 68, .15)); }
.tks-tl li { position: relative; display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--s4); align-items: start; }
.tks-tl__y { position: relative; z-index: 1; justify-self: center; min-width: 64px; padding: 4px 10px; border-radius: 999px; text-align: center;
  background: var(--green); color: var(--on-green); font: 700 var(--t-xs)/1.5 var(--f-ui); font-variant-numeric: tabular-nums; box-shadow: 0 0 0 4px var(--cream); }
.tks-tl__y.is-dot { min-width: 0; width: 14px; height: 14px; padding: 0; margin-top: 6px; border-radius: 50%; background: var(--surface); border: 3px solid var(--green); }
.tks-tl p { margin: 0; color: var(--ink); line-height: 1.95; }

.tks-biot { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--s6); align-items: start; padding: var(--s6); border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 16px 34px -26px rgba(15, 30, 20, .45); }
.tks-glance { display: grid; justify-items: start; gap: 4px; padding: var(--s5); border: 0; border-radius: var(--r-lg); text-align: start; cursor: pointer; color: #F4E8CC; font: inherit;
  background: radial-gradient(90% 100% at 100% 0%, rgba(216, 181, 106, .22), rgba(216, 181, 106, 0) 60%), linear-gradient(160deg, #1B4D33, #0E1A14); transition: transform var(--d3) var(--ease); }
.tks-glance:hover { transform: translate3d(0, -3px, 0); }
.tks-glance b { font: 800 3rem/1 var(--f-ui); color: #FBF3DD; }
.tks-glance span { font-weight: 700; }
.tks-glance small { color: #B9B09A; font-variant-numeric: tabular-nums; }
.tks-glance em { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s3); font-style: normal; font-weight: 700; font-size: var(--t-sm); color: #E6C98A; }
.tks-glance em .tk-icon { width: 16px; height: 16px; }

.tks-bio { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--s6); align-items: start; padding: var(--s7) var(--s6); border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 16px 34px -26px rgba(15, 30, 20, .45); }
.tks-bio__full { display: grid; gap: 2px; margin: 0 0 var(--s6); padding-bottom: var(--s5); border-bottom: 1px solid var(--line); }
.tks-bio__full span { color: var(--muted); font-size: var(--t-xs); font-weight: 600; }
.tks-bio__full b { font: 800 var(--t-xl)/1.4 var(--f-ui); color: var(--green-ink); }
.tks-bio__side { position: sticky; top: calc(var(--nav-h, 68px) + 76px); display: grid; gap: var(--s4); }
.tks-bio__big { display: grid; gap: 4px; padding: var(--s5); border-radius: var(--r-lg); color: #F4E8CC;
  background: radial-gradient(90% 100% at 100% 0%, rgba(216, 181, 106, .22), rgba(216, 181, 106, 0) 60%), linear-gradient(160deg, #1B4D33, #0E1A14); }
.tks-bio__big b { font: 800 3.2rem/1 var(--f-ui); color: #FBF3DD; }
.tks-bio__big span { font-weight: 700; }
.tks-bio__big small { color: #B9B09A; }
.tks-bio__side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tks-bio__side li { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); }
.tks-bio__side li b { font: 800 var(--t-lg)/1 var(--f-ui); color: var(--green-ink); }

.tks-kind { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1.7; }
.tks-kind--au { background: var(--wash-2); color: var(--green-ink); }
.tks-kind--tr { background: rgba(216, 181, 106, .2); color: #7a5a1c; }
.tks-kind--ed { background: rgba(90, 120, 160, .14); color: #34506f; }
:root[data-theme="sakina"] .tks-kind--tr { color: #E6C98A; } :root[data-theme="sakina"] .tks-kind--ed { color: #a9c1dc; }

.tks-wtools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s5); }
.tks-wchips { display: flex; flex-wrap: wrap; gap: 8px; }
.tks-wchips small { font-size: 11px; opacity: .7; }
.tks-wsearch { display: flex; align-items: center; gap: 8px; min-width: min(280px, 100%); height: 42px; padding: 0 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
.tks-wsearch:focus-within { border-color: var(--green); }
.tks-wsearch .tk-icon { width: 18px; height: 18px; flex: none; }
.tks-wsearch input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--ink); font: inherit; font-size: var(--t-sm); }
.tks-works { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px var(--s4); }
.tks-work { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line);
  content-visibility: auto; contain-intrinsic-size: auto 84px; }
.tks-work[hidden] { display: none; }
.tks-work__n { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--wash-2); color: var(--green); font: 800 var(--t-xs)/1 var(--f-ui); font-variant-numeric: tabular-nums; }
.tks-work p { margin: 0; font-weight: 600; line-height: 1.7; }
.tks-work__m { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; color: var(--muted); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.tks-sec__note { margin: calc(var(--s3) * -1) 0 var(--s4); color: var(--muted); font-size: var(--t-sm); }
/* works that are in the library: the whole card opens the book; a small 3D cover rides on the end */
.tks-work.is-on { padding: 0; border-color: rgba(31, 107, 68, .35); background: linear-gradient(160deg, var(--surface), var(--wash)); }
.tks-work.is-on > a { display: flex; gap: 14px; align-items: center; width: 100%; padding: 14px 16px; color: var(--ink); border-radius: inherit; }
.tks-work.is-on > a > div { flex: 1; min-width: 0; }
.tks-work.is-on:hover { border-color: var(--green); }
.tks-work.is-on .tks-work__n { background: var(--green); color: var(--on-green); }
.tks-work__on { display: inline-flex; align-items: center; gap: 4px; color: var(--green); font-weight: 700; }
.tks-work__on .tk-icon { width: 14px; height: 14px; }
.tks-work__cvs { flex: none; display: flex; gap: 6px; padding: 2px 4px 8px; }
.tks-work__cv { width: 46px; }
.tks-work__cv .bk3__book { --T: 7px; }
.tks-work__cv .bk3__stage::after { inset: auto 6% -6px 12%; height: 10px; }
.tks-work__cv .bk3__cover { border-radius: 4px 1px 1px 4px; }
.tks-work.is-on:hover .bk3__book { transform: rotateY(8deg) translate3d(0, -3px, 0); }
.is-flat .tks-work.is-on:hover .bk3__book { transform: translate3d(0, -2px, 0); }
.tks-wchips .tk-chip .tk-icon { width: 15px; height: 15px; }
.tks-wnone { text-align: center; color: var(--muted); padding: var(--s6) 0; }

@media (max-width: 900px) {
  .tks-biot, .tks-bio { grid-template-columns: 1fr; padding: var(--s5) var(--s4); }
  .tks-bio__side { position: static; grid-row: 1; }
  .tks-bio__side ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tks-bio__side li { flex-direction: column-reverse; gap: 6px; padding: 10px 6px; text-align: center; }
  .tks-works { grid-template-columns: 1fr; }
  .tks-tl::before { inset-inline-start: 33px; }
  .tks-tl li { grid-template-columns: 68px minmax(0, 1fr); gap: var(--s3); }
  .tks-tl__y { min-width: 58px; padding: 3px 8px; }
  .tks-wsearch { width: 100%; }
}

/* server-rendered content (crawlers, no-JS, and the first paint before tk3-sheikh.js redraws) */
.tks-seo { margin-top: var(--s5); }
.tks-seo__en { margin: 0 0 var(--s4); color: var(--muted); font-size: var(--t-sm); }
.tks-seo__facts, .tks-seo__list { margin: 0 0 var(--s5); padding-inline-start: 1.2em; line-height: 1.9; }
.tks-seo__list small { color: var(--muted); }
.tks-seo__people { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s3); margin: var(--s5) 0 0; padding: 0; list-style: none; }
.tks-seo__people a { display: grid; gap: 2px; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r-md); color: inherit; }
.tks-seo__people small { color: var(--muted); font-size: var(--t-xs); }
.tks-person__av .tks-person__bg { width: 100%; height: 100%; display: block; border-radius: 50%; background-size: cover; background-position: center; border: 3px solid var(--cream); box-sizing: border-box; }