/* ==========================================================================
   TafsirKurd 2.0 — editorial pages (about.html, founder.html). On tk3.css.
   Calm by design: reveals only (transform/opacity), no ambient animation.
   ========================================================================== */

/* ── page hero ──────────────────────────────────────────────────────────── */
.tkp-hero { position: relative; overflow: hidden; padding-block: var(--s9) var(--s8); background:
  radial-gradient(80% 120% at 85% 0%, var(--surface) 0%, transparent 60%), var(--cream); border-bottom: 1px solid var(--line); }
.tkp-hero__in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s8); align-items: center; }
.tkp-kick { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: var(--green); font-weight: 700; font-size: var(--t-sm); }
.tkp-kick::before { content: ''; width: 28px; height: 2px; border-radius: 2px; background: currentColor; }
.tkp-hero h1 { margin: var(--s4) 0 0; font: 800 var(--t-display)/1.12 var(--f-ui); color: var(--green-ink); letter-spacing: -.01em; text-wrap: balance; }
.tkp-hero__sub { margin: var(--s3) 0 0; font-size: var(--t-xl); color: var(--ink-2); font-weight: 500; }
.tkp-hero__lede { margin: var(--s5) 0 0; font-size: var(--t-lg); line-height: 1.95; color: var(--ink-2); max-width: 36rem; }
.tkp-hero__cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.tkp-seal { position: relative; justify-self: center; width: min(360px, 80vw); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: var(--green); box-shadow: var(--shadow-device); }
.tkp-seal::before, .tkp-seal::after { content: ''; position: absolute; border-radius: 50%; border: 1px solid var(--line-strong); }
.tkp-seal::before { inset: -18px; } .tkp-seal::after { inset: -40px; opacity: .5; }
.tkp-seal .tk-logo { height: 34%; background: var(--on-green); }
.tkp-seal--photo { background: var(--green); padding: 6px; }
.tkp-seal--photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.tkp-seal--mono { font: 700 clamp(4rem, 8vw, 7rem)/1 var(--f-ui); color: var(--on-green); }
@media (max-width: 900px) {
  .tkp-hero { padding-block: var(--s7) var(--s7); }
  .tkp-hero__in { grid-template-columns: 1fr; gap: var(--s7); }
  .tkp-seal { width: min(168px, 44vw); order: -1; }
  .tkp-seal--mono { font-size: 4rem; }
  .tkp-seal::after { inset: -28px; }
}

/* ── sections ───────────────────────────────────────────────────────────── */
.tkp-sec { padding-block: var(--s9) 0; }
.tkp-sec__head { max-width: 44rem; margin-bottom: var(--s7); }
.tkp-sec__head h2 { margin: var(--s3) 0 0; font-size: var(--t-h2); line-height: 1.25; color: var(--green-ink); text-wrap: balance; }
.tkp-sec__head p { margin: var(--s4) 0 0; font-size: var(--t-lg); color: var(--ink-2); line-height: 1.95; }
.tkp-prose p { margin: 0 0 var(--s5); font: 400 clamp(1.15rem, .4vw + 1.05rem, 1.35rem)/2 var(--f-read); color: var(--ink); max-width: 42rem; }
.tkp-prose p:first-child::first-letter { color: var(--green); }
@media (max-width: 900px) { .tkp-sec { padding-block: var(--s8) 0; } }

/* numbers */
.tkp-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; background: var(--surface); }
.tkp-nums > div { padding: var(--s5) var(--s5); border-inline-start: 1px solid var(--line); }
.tkp-nums > div:first-child { border-inline-start: 0; }
.tkp-nums b { display: block; white-space: nowrap; font: 800 clamp(1.5rem, 1.2vw + 1.1rem, 2.3rem)/1.1 var(--f-ui); color: var(--green-ink); font-variant-numeric: tabular-nums; }
.tkp-nums span { display: block; margin-top: 6px; color: var(--muted); font-size: var(--t-sm); }
.tkp-nums small { display: block; margin-top: 2px; color: var(--muted); font-size: var(--t-xs); opacity: .8; }
@media (max-width: 600px) { .tkp-nums { grid-template-columns: 1fr 1fr; } .tkp-nums > div { border-inline-start: 0; border-top: 1px solid var(--line); } .tkp-nums > div:nth-child(-n+2) { border-top: 0; }
  .tkp-nums > div:nth-child(even) { border-inline-start: 1px solid var(--line); } }

/* source (book) */
.tkp-source { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s8); align-items: center; }
.tkp-book { position: relative; justify-self: center; width: min(300px, 70vw); aspect-ratio: 3 / 4; border-radius: 6px 16px 16px 6px; overflow: hidden;
  background: linear-gradient(160deg, var(--green) 0%, var(--green-ink) 100%); box-shadow: var(--shadow-device); transform: rotate(-2deg); }
.tkp-book::before { content: ''; position: absolute; inset-block: 0; inset-inline-end: 0; width: 14px; background: linear-gradient(90deg, rgba(0,0,0,.25), rgba(255,255,255,.08)); z-index: 1; }
.tkp-book { display: block; transition: transform var(--d3) var(--ease); }
.tkp-book:hover { transform: rotate(-2deg) translate3d(0, -6px, 0); }
.tkp-book img { width: 100%; height: 100%; object-fit: cover; }
.tkp-book__ph { position: absolute; inset: 0; display: grid; place-content: center; gap: 8px; text-align: center; color: var(--on-green); padding: var(--s5); }
.tkp-book__ph b { font: 700 1.6rem/1.3 var(--f-read); } .tkp-book__ph small { opacity: .8; }
.tkp-source h3 { margin: var(--s3) 0 0; font-size: var(--t-h3); color: var(--green-ink); }
.tkp-source__by { margin: 6px 0 0; color: var(--green); font-weight: 600; }
@media (max-width: 900px) { .tkp-source { grid-template-columns: 1fr; gap: var(--s7); } }

/* offer list: numbered rows, not a card grid */
.tkp-offer { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.tkp-offer li { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: var(--s5); align-items: center; padding-block: var(--s6); border-bottom: 1px solid var(--line); }
.tkp-offer__n { font: 800 3rem/1 var(--f-ui); color: var(--sand-deep); font-variant-numeric: tabular-nums; }
.tkp-offer h3 { margin: 0; font-size: var(--t-xl); color: var(--ink); }
.tkp-offer p { margin: 6px 0 0; color: var(--ink-2); max-width: 40rem; }
@media (max-width: 700px) { .tkp-offer li { grid-template-columns: 56px minmax(0, 1fr); } .tkp-offer__n { font-size: 2rem; } .tkp-offer .tk-link { grid-column: 2; } }

/* ayah quote */
.tkp-ayah { position: relative; margin: 0; padding: var(--s8) var(--s7); border-radius: var(--r-xl); text-align: center; background: var(--green); color: var(--on-green); overflow: hidden; }
.tkp-ayah::before, .tkp-ayah::after { content: ''; position: absolute; width: 260px; height: 260px; border-radius: 50%; border: 1px solid rgba(244, 232, 204, .16); }
.tkp-ayah::before { top: -130px; inset-inline-start: -90px; } .tkp-ayah::after { bottom: -150px; inset-inline-end: -80px; }
.tkp-ayah__ar { position: relative; margin: 0; font: 400 clamp(1.7rem, 1.6vw + 1.2rem, 2.6rem)/2.1 var(--f-quran); }
.tkp-ayah__ku { position: relative; margin: var(--s5) auto 0; max-width: 44rem; font: 400 var(--t-lg)/1.95 var(--f-read); opacity: .92; }
.tkp-ayah__ref { position: relative; display: inline-block; margin-top: var(--s4); padding: 4px 14px; border-radius: 999px; background: rgba(244, 232, 204, .14); font-size: var(--t-xs); font-weight: 600; }
:root[data-theme="sakina"] .tkp-ayah { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); }
:root[data-theme="sakina"] .tkp-ayah__ref { background: var(--wash-2); color: var(--green); }
@media (max-width: 600px) { .tkp-ayah { padding: var(--s7) var(--s4); } }

/* statement */
.tkp-statement { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s7); padding: var(--s7); border-radius: var(--r-xl);
  border: 1px solid var(--line-strong); background: var(--surface); }
.tkp-statement h2 { margin: var(--s3) 0 0; font-size: var(--t-h2); line-height: 1.2; color: var(--green-ink); }
.tkp-statement p { margin: 0 0 var(--s4); font-size: var(--t-lg); line-height: 1.95; color: var(--ink-2); }
@media (max-width: 900px) { .tkp-statement { grid-template-columns: 1fr; gap: var(--s4); padding: var(--s6) var(--s5); } }

/* person / contact */
.tkp-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); }
.tkp-person { display: flex; align-items: center; gap: var(--s5); padding: var(--s6); border-radius: var(--r-xl); background: var(--green); color: var(--on-green);
  transition: transform var(--d2) var(--ease); }
.tkp-person:hover { transform: translateY(-3px); color: var(--on-green); }
.tkp-person__mono { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; flex: none; background: rgba(244, 232, 204, .14); font: 700 2rem/1 var(--f-ui); }
.tkp-person b { display: block; font-size: var(--t-xl); } .tkp-person small { display: block; opacity: .8; margin-top: 2px; }
.tkp-person .tk-icon { margin-inline-start: auto; }
.tkp-duo { align-items: start; }
.tkp-contact { padding: var(--s6); border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--surface); }
.tkp-contact h3 { margin: 0 0 var(--s4); font-size: var(--t-xl); color: var(--green-ink); }
.tkp-contact ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tkp-contact a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); color: var(--ink); transition: background-color var(--d1) var(--ease); }
.tkp-contact a:hover { background: var(--wash); }
.tkp-contact a .tk-icon { color: var(--green); width: 22px; height: 22px; }
.tkp-contact small { margin-inline-start: auto; color: var(--muted); font-size: var(--t-xs); }
.tkp-contact .tkp-fill { fill: currentColor; stroke: none; }
/* platforms with several accounts: their handles as chips under the row */
.tkp-accts { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 10px; padding-inline-start: 46px; }
.tkp-contact .tkp-accts a { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: var(--t-xs); background: var(--wash); color: var(--ink-2); direction: ltr; }
.tkp-contact .tkp-accts a:hover { background: var(--green); color: var(--on-green); }
:root[data-theme="sakina"] .tkp-person, :root[data-theme="sakina"] .tkp-seal { color: var(--on-green); }
@media (max-width: 900px) { .tkp-duo { grid-template-columns: 1fr; } }

/* timeline (founder) */
.tkp-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.tkp-timeline::before { content: ''; position: absolute; inset-block: 12px; inset-inline-start: 23px; width: 2px; background: var(--line-strong); }
.tkp-timeline li { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s5); padding-bottom: var(--s7); }
.tkp-timeline li:last-child { padding-bottom: 0; }
.tkp-timeline__dot { position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--surface);
  border: 2px solid var(--green); color: var(--green); font-weight: 800; font-variant-numeric: tabular-nums; }
.tkp-timeline li:last-child .tkp-timeline__dot { background: var(--green); color: var(--on-green); }
.tkp-timeline h3 { margin: 8px 0 0; font-size: var(--t-xl); color: var(--ink); }
.tkp-timeline p { margin: 8px 0 0; color: var(--ink-2); line-height: 1.95; max-width: 40rem; }

/* commitments (founder) */
.tkp-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; }
.tkp-values > div { padding: var(--s6); background: var(--surface); }
.tkp-values .tk-icon { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--wash); color: var(--green); }
.tkp-values h3 { margin: var(--s4) 0 0; font-size: var(--t-xl); color: var(--ink); }
.tkp-values p { margin: 8px 0 0; color: var(--ink-2); line-height: 1.95; }
@media (max-width: 700px) { .tkp-values { grid-template-columns: 1fr; } }

/* closing */
.tkp-close { margin-top: var(--s9); text-align: center; }
.tkp-close h2 { margin: 0; font-size: var(--t-h2); color: var(--green-ink); text-wrap: balance; }
.tkp-close p { margin: var(--s3) auto 0; max-width: 36rem; color: var(--ink-2); font-size: var(--t-lg); }
.tkp-close .tkp-hero__cta { justify-content: center; }
.tkp-dua { margin: 0 auto var(--s6); max-width: 46rem; font: 400 clamp(1.2rem, .5vw + 1.05rem, 1.45rem)/2 var(--f-read); color: var(--ink); text-align: center; }

/* ── legal documents ────────────────────────────────────────────────────── */
.tkl-head { padding-block: var(--s8) var(--s6); border-bottom: 1px solid var(--line); }
.tkl-head h1 { margin: var(--s3) 0 0; font: 800 var(--t-h2)/1.2 var(--f-ui); color: var(--green-ink); }
.tkl-head p { margin: var(--s3) 0 0; color: var(--muted); }
.tkl { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--s8); align-items: start; padding-top: var(--s6); }
.tkl-toc { position: sticky; top: calc(var(--nav-h) + 20px); max-height: calc(100dvh - var(--nav-h) - 40px); overflow: auto; padding: var(--s4); border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line); font-size: var(--t-sm); scrollbar-width: thin; }
.tkl-toc summary { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; color: var(--green-ink); font-weight: 700; cursor: pointer; list-style: none; }
.tkl-toc summary::-webkit-details-marker { display: none; }
.tkl-toc summary::after { content: '⌄'; color: var(--muted); }
.tkl-toc details:not([open]) summary { margin-bottom: 0; }
.tkl-toc details[open] summary::after { transform: rotate(180deg); }
.tkl-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.tkl-toc a { display: flex; gap: 8px; padding: 6px 8px; border-radius: 8px; color: var(--ink-2); line-height: 1.5; }
.tkl-toc a::before { counter-increment: toc; content: counter(toc, arabic-indic); color: var(--muted); min-width: 1.4em; }
.tkl-toc a:hover, .tkl-toc a[aria-current="true"] { background: var(--wash); color: var(--green-ink); }
.tkl-doc { max-width: 46rem; font-size: var(--t-lg); line-height: 2; color: var(--ink); }
.tkl-doc h2 { margin: var(--s7) 0 var(--s3); font-size: var(--t-h3); line-height: 1.4; color: var(--green-ink); scroll-margin-top: calc(var(--nav-h) + 24px); }
.tkl-doc h2:first-of-type { margin-top: var(--s5); }
.tkl-doc h3 { margin: var(--s5) 0 var(--s2); font-size: var(--t-lg); color: var(--ink); }
.tkl-doc p { margin: 0 0 var(--s4); }
.tkl-doc ul { margin: 0 0 var(--s4); padding-inline-start: 1.4em; }
.tkl-doc li { margin-bottom: 6px; } .tkl-doc li::marker { color: var(--green); }
.tkl-doc strong { color: var(--green-ink); }
.tkl-doc a { border-bottom: 1px solid var(--line-strong); }
.tkl-lede { font-size: var(--t-xl); line-height: 1.9; color: var(--ink-2); }
.tkl-close { margin-top: var(--s7); padding: var(--s5); border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line); }
.tkl-close p:last-child { margin-bottom: 0; }
.tkl-other { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s6); }
@media (max-width: 900px) { .tkl { grid-template-columns: 1fr; gap: var(--s5); } .tkl-toc { position: relative; top: 0; max-height: none; } .tkl-doc { font-size: var(--t-md); } }

/* ── delete-account.html ─────────────────────────────────────────────────── */
.tkl-doc .tkd-steps, .tkd-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); counter-reset: none; }
.tkd-steps li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s4); align-items: center; padding: var(--s4) var(--s5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.tkd-steps .step-num { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: var(--on-green); font-weight: 800; font-size: 1.2rem; }
.tkd-steps .step-label { display: block; font-weight: 700; }
.tkd-steps .step-detail { display: block; color: var(--ink-2); margin-top: 2px; }
.ltr-text { direction: ltr; unicode-bidi: isolate; }
.tkd-cta { display: flex; justify-content: center; margin: var(--s6) 0; }
.tkd-cta .tk-btn { min-height: 56px; padding: 0 var(--s6); font-size: var(--t-md); }
.tkd-warn { padding: var(--s6); border-radius: var(--r-xl); background: color-mix(in srgb, var(--error) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--error) 28%, var(--line)); }
.tkd-warn h2 { color: var(--error) !important; margin-top: 0 !important; }
.tkd-warn .data-list { columns: 2; column-gap: var(--s6); }
.tkd-note { margin-top: var(--s4); padding: var(--s4); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); font-size: var(--t-md); }
.tkd-note p:last-child { margin-bottom: 0; }
@media (max-width: 600px) { .tkd-warn { padding: var(--s5) var(--s4); } .tkd-warn .data-list { columns: 1; } }

/* about · sources list */
.tkp-srcs { display: grid; gap: 0; margin: var(--s7, 48px) 0 0; border-top: 1px solid var(--line); }
.tkp-srcs div { display: grid; grid-template-columns: minmax(130px, 200px) 1fr; gap: var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.tkp-srcs dt { font-weight: 700; color: var(--green-ink); }
.tkp-srcs dd { margin: 0; color: var(--ink-2); line-height: 1.85; }
@media (max-width: 600px) { .tkp-srcs div { grid-template-columns: 1fr; gap: 4px; } }