/* ============ Fonts (self-hosted, variable) ============ */
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("fonts/cairo-arabic-wght-normal.748022f50c.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("fonts/cairo-latin-wght-normal.82c13cbd13.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============ Tokens ============ */
:root {
  color-scheme: light;
  --bg: #f6f3ec;
  --surface: #fffdf8;
  --surface-2: #ece6d9;
  --ink: #1d2823;
  --muted: #55635b;
  --line: #ddd6c6;
  --edge: #7f897f;
  --brand: #1f6f54;
  --brand-ink: #14513c;
  --on-brand: #ffffff;
  --focus: #0b5cad;
  --red: #a63a2a;
  --amber: #8f4e0e;
  --blue: #1f5f96;
  --mark: #ffe08a;
  --shadow: 0 1px 2px rgb(40 35 20 / .06), 0 8px 24px -12px rgb(40 35 20 / .18);
  --radius: 14px;
  --topbar-h: 56px;
  --tone: var(--brand);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111815; --surface: #18221d; --surface-2: #223029; --ink: #e9ede8; --muted: #a6b3ab;
  --line: #2b3a32; --edge: #71827a; --brand: #62c7a0; --brand-ink: #8fdcbc; --on-brand: #0c1a14; --focus: #8cc4ff;
  --red: #f19483; --amber: #f0ac64; --blue: #86bdec; --mark: #6b5310;
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px -12px rgb(0 0 0 / .6);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #111815; --surface: #18221d; --surface-2: #223029; --ink: #e9ede8; --muted: #a6b3ab;
    --line: #2b3a32; --edge: #71827a; --brand: #62c7a0; --brand-ink: #8fdcbc; --on-brand: #0c1a14; --focus: #8cc4ff;
    --red: #f19483; --amber: #f0ac64; --blue: #86bdec; --mark: #6b5310;
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px -12px rgb(0 0 0 / .6);
  }
}
/* Text-size control: every size on the site is in rem, so this scales everything. */
:root[data-fs="1"] { font-size: 112.5%; }
:root[data-fs="2"] { font-size: 125%; }
.tone-red { --tone: var(--red); }
.tone-amber { --tone: var(--amber); }
.tone-blue { --tone: var(--blue); }
.tone-plain { --tone: var(--brand); }

/* ============ Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar-h) + 16px); }
html:has(dialog[open]) { overflow: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Cairo", "Noto Kufi Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.9;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-ink); text-underline-offset: .25em; text-decoration-thickness: .08em; }
a:hover { text-decoration-thickness: .14em; }
h1, h2, h3 { line-height: 1.45; text-wrap: balance; margin: 0; }
p { margin: 0 0 1em; }
ul[role="list"], ol { margin: 0; padding: 0; }
ul[role="list"] { list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
main:focus { outline: none; }
svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.fill { fill: currentColor; stroke: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 12px; top: -80px; z-index: 100; background: var(--brand); color: var(--on-brand); padding: 8px 16px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 8px; }

/* ============ Top bar ============ */
.topbar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.topbar-in { display: flex; align-items: center; gap: 8px; height: var(--topbar-h); max-width: 1240px; margin-inline: auto; padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 800; font-size: 1.05rem; color: var(--ink); text-decoration: none; margin-inline-end: auto; padding: 6px; border-radius: 10px; }
.brand img { border-radius: 8px; flex: none; }
.brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-short { display: none; }
@media (max-width: 440px) {
  .brand-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .brand-short { display: inline; }
}
@media (max-width: 350px) {
  .topbar-in { gap: 2px; padding-inline: 6px; }
  .brand { gap: 6px; padding: 4px; }
  .brand img { display: none; }
}
.tools { display: flex; gap: 2px; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: none; color: var(--ink); text-decoration: none; flex: none; }
.icon-btn:hover { background: var(--surface-2); }
.icon-btn.txt span { font-weight: 800; font-size: 20px; line-height: 1; }
:root[data-fs="1"] .icon-btn.txt span { font-size: 23px; }
:root[data-fs="2"] .icon-btn.txt span { font-size: 26px; }
.i-sun { display: none; }
:root[data-theme="dark"] .i-sun { display: inline; }
:root[data-theme="dark"] .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .i-sun { display: inline; }
  :root:not([data-theme="light"]) .i-moon { display: none; }
}
.progress { height: 3px; margin-top: -3px; position: relative; top: 3px; pointer-events: none; }
.progress span { display: block; height: 100%; width: 100%; background: var(--brand); transform: scaleX(0); transform-origin: right center; }

/* ============ Shell / TOC ============ */
.shell { flex: 1; width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); display: block; }
main { min-width: 0; padding-block: 24px 48px; }
.shell > .toc { display: none; }
.toc-group > p { margin: 18px 0 6px; padding-inline: 10px; font-size: .8125rem; font-weight: 800; color: var(--muted); }
.toc-group:first-child > p { margin-top: 4px; }
.toc a { display: flex; gap: 10px; align-items: center; min-height: 44px; padding: 6px 10px; border-radius: 10px; color: var(--ink); text-decoration: none; font-size: .9375rem; line-height: 1.6; }
.toc a:hover { background: var(--surface-2); }
.toc a[aria-current] { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand-ink); font-weight: 700; }
.toc-n { flex: none; min-width: 1.7em; display: grid; place-items: center; font-size: .8125rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.toc-n svg { width: 1.1rem; height: 1.1rem; }
.toc-t { flex: 1; min-width: 0; }
.toc a[aria-current] .toc-n { color: inherit; }
.toc a.seen::after { content: "✓"; flex: none; font-size: .8125rem; font-weight: 800; color: var(--brand-ink); }
@media (min-width: 1024px) {
  .nav-open { display: none !important; }
  .k-doc .shell { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 40px; }
  .k-doc .shell > .toc { display: block; position: sticky; top: calc(var(--topbar-h) + 1px); align-self: start; max-height: calc(100dvh - var(--topbar-h) - 1px); overflow-y: auto; padding-block: 20px 32px; overscroll-behavior: contain; scrollbar-width: thin; }
  .k-doc .shell > .toc a { min-height: 38px; }
}

/* ============ Drawer & lightbox ============ */
dialog { border: 0; padding: 0; color: var(--ink); max-width: none; max-height: none; }
dialog::backdrop { background: rgb(10 16 13 / .55); }
.drawer { margin: 0; margin-inline-end: auto; height: 100dvh; width: min(360px, 88vw); background: var(--bg); box-shadow: var(--shadow); }
.drawer[open] { display: flex; flex-direction: column; animation: slide-in .22s ease-out; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding-inline: 16px 8px; border-bottom: 1px solid var(--line); min-height: var(--topbar-h); flex: none; }
.drawer-body { position: relative; overflow-y: auto; padding: 12px 10px 32px; overscroll-behavior: contain; }
@keyframes slide-in { from { transform: translateX(40px); opacity: 0; } }
.lightbox { width: 100vw; height: 100dvh; background: rgb(10 14 12 / .96); overflow: hidden; }
.lightbox[open] { display: block; }
.lightbox-stage { width: 100%; height: 100%; overflow: auto; display: grid; place-items: center; overscroll-behavior: contain; }
.lightbox-stage img { max-width: 100vw; max-height: 100dvh; object-fit: contain; background: #fff; cursor: zoom-in; }
.lightbox.zoomed .lightbox-stage { place-items: start; }
.lightbox.zoomed .lightbox-stage img { max-width: none; max-height: none; width: auto; cursor: zoom-out; }
.lightbox .icon-btn { position: fixed; top: max(10px, env(safe-area-inset-top)); inset-inline-end: 10px; background: rgb(255 255 255 / .94); color: #1d2823; z-index: 1; box-shadow: 0 1px 6px rgb(0 0 0 / .4); }
.lightbox-hint { position: fixed; inset-inline: 0; bottom: max(14px, env(safe-area-inset-bottom)); margin: 0 auto; width: max-content; max-width: calc(100vw - 24px); padding: 4px 14px; border-radius: 999px; background: rgb(0 0 0 / .7); color: #fff; font-size: .8125rem; pointer-events: none; }
.lightbox.zoomed .lightbox-hint { display: none; }
.lightbox-stage img.fits { cursor: default; }
/* Script-only controls take their space from the start, so nothing jumps when the script runs. */
html:not(.js) .search, html:not(.js) .doc-tools { display: none; }

/* ============ Buttons ============ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 8px 22px; border-radius: 999px; border: 1.5px solid var(--edge); background: var(--surface); color: var(--ink); font-weight: 700; text-decoration: none; }
.btn:hover { border-color: var(--brand); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn.primary:hover { filter: brightness(1.08); }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 16px; border-radius: 999px; border: 1px solid var(--edge); background: var(--surface); font-size: .875rem; font-weight: 600; }
.chip:hover { border-color: var(--tone); }
.chip svg { width: 1.1rem; height: 1.1rem; }

/* ============ Home ============ */
.k-home main, .k-404 main { max-width: 980px; margin-inline: auto; width: 100%; }
.hero { padding: clamp(20px, 5vw, 48px) 0 8px; }
.eyebrow { margin: 0 0 6px; font-size: .875rem; font-weight: 700; color: var(--tone); }
.hero h1 { font-size: clamp(1.9rem, 1.3rem + 3vw, 3rem); font-weight: 900; }
.hero h1 span { display: block; font-size: .5em; font-weight: 600; color: var(--muted); margin-top: 4px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.resume { margin: 16px 0 0; font-size: .9375rem; color: var(--muted); }
.resume a { font-weight: 700; display: inline-block; padding-block: 8px; }
.nf p { color: var(--muted); }

.search { margin-top: 28px; position: relative; }
.search form { position: relative; }
.search-ico { position: absolute; inset-inline-start: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); display: grid; pointer-events: none; }
.search input { width: 100%; min-height: 54px; padding-block: 8px; padding-inline: 48px 16px; border-radius: var(--radius); border: 1.5px solid var(--edge); background: var(--surface); color: var(--ink); font: inherit; font-size: max(1rem, 16px); }
.search input::placeholder { color: var(--muted); opacity: 1; }
.search input:focus-visible { outline-offset: 0; border-color: var(--focus); }
.search-status { margin: 8px 4px 0; font-size: .875rem; color: var(--muted); min-height: 1.7em; }
.results { margin-top: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.results li + li { border-top: 1px solid var(--line); }
.results a { display: block; padding: 12px 16px; color: var(--ink); text-decoration: none; }
.results a:hover, .results a:focus-visible { background: var(--surface-2); }
.results b { display: block; color: var(--brand-ink); }
.results small { display: block; font-size: .875rem; color: var(--muted); line-height: 1.7; }
.results mark { background: var(--mark); color: var(--ink); border-radius: 3px; padding-inline: 2px; }

.group { margin-top: 36px; }
.group h2 { font-size: 1.125rem; font-weight: 800; margin-bottom: 12px; display: flex; align-items: center; gap: 12px; }
.group h2::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px; }
.card { position: relative; display: flex; align-items: center; gap: 12px; min-height: 68px; height: 100%; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; font-weight: 700; line-height: 1.6; transition: transform .15s, box-shadow .15s, border-color .15s; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--tone); }
.card-n { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--tone) 13%, var(--surface)); color: var(--tone); font-size: .875rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.card-n svg { width: 1.15rem; height: 1.15rem; }
.card-t { flex: 1; min-width: 0; }
.card-done { color: var(--brand-ink); display: grid; }

/* ============ Article ============ */
.doc { max-width: 46rem; margin-inline: auto; }
.crumbs { display: flex; flex-wrap: wrap; gap: 0 8px; align-items: center; font-size: .875rem; color: var(--muted); margin-bottom: 8px; }
.crumbs a { color: var(--muted); display: inline-block; padding-block: 10px; }
.doc-head { margin-bottom: 26px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.doc h1 { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.25rem); font-weight: 900; }
.doc h1::after { content: ""; display: block; width: 56px; height: 4px; border-radius: 4px; background: var(--tone); margin-top: 14px; }
.doc-tools { display: flex; gap: 8px; margin-top: 16px; }

.prose > * + * { margin-top: 1.1em; }
.prose p { margin-bottom: 0; }
.prose li > p + p { margin-top: .6em; }
.prose a.url { overflow-wrap: anywhere; display: inline-block; max-width: 100%; text-align: start; }
.prose .lead { font-size: 1.125em; font-weight: 700; color: var(--tone); }
.prose h2 { margin-top: 2em; padding: 10px 16px; background: color-mix(in srgb, var(--tone) 10%, var(--surface)); border-inline-start: 4px solid var(--tone); border-start-end-radius: 10px; border-end-end-radius: 10px; font-size: 1.2em; font-weight: 800; }
.prose h3 { margin-top: 1.8em; display: flex; gap: 12px; align-items: baseline; font-size: 1.0625em; font-weight: 800; }
.prose h3 .num { flex: none; display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--tone); color: var(--bg); font-size: .875em; }
.prose .label { font-weight: 800; color: var(--tone); }
.prose p.label { margin-top: 1.4em; }
.prose p.label + p { margin-top: .3em; }
.prose li b.label { display: inline-block; margin-top: .5em; }
.pts > li, .para > li { position: relative; padding-inline-start: 1.6em; }
.pts > li + li { margin-top: .7em; }
.para > li + li { margin-top: 1.1em; }
/* Markers are drawn with borders (not backgrounds) so they also appear on paper. */
.pts > li::before { content: ""; position: absolute; inset-inline-start: .25em; top: .72em; width: 0; height: 0; border: .27em solid var(--tone); transform: rotate(45deg); border-radius: 1.5px; }
.para > li::before { content: ""; position: absolute; inset-inline-start: .3em; top: .78em; width: .5em; height: .5em; border: 2px solid var(--tone); border-radius: 2px; }
.sub { margin-top: .5em; padding-inline-start: 1.1em; border-inline-start: 2px solid color-mix(in srgb, var(--tone) 35%, transparent); }
.sub > li + li { margin-top: .45em; }
ul.sub > li { position: relative; padding-inline-start: 1.1em; }
ul.sub > li::before { content: ""; position: absolute; inset-inline-start: 0; top: .78em; width: 0; height: 0; border: .2em solid color-mix(in srgb, var(--tone) 70%, var(--bg)); border-radius: 50%; }
ol.sub { list-style: decimal; padding-inline-start: 2.4em; }
ol.sub > li::marker { font-weight: 800; color: var(--tone); }
.notes { display: grid; gap: 10px; }
.notes > li { padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-inline-start: 4px solid var(--edge); border-radius: 10px; }

.gallery { margin-top: 32px; display: grid; gap: 16px; }
.gallery.grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
figure { margin: 0; }
.zoom { display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #fff; cursor: zoom-in; }
.zoom img { width: 100%; }
.gallery:not(.grid) .zoom img { max-height: 80vh; object-fit: contain; }
.gallery.grid .zoom img { aspect-ratio: 1; object-fit: cover; }

.voice { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px 20px; }
.voices .prose > .voice + .voice { margin-top: 16px; }
.voice header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: 10px; }
.voice-n { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: color-mix(in srgb, var(--brand) 14%, var(--surface)); color: var(--brand-ink); font-weight: 800; font-size: .875rem; }
.voice h2:not(.sr) { margin: 0; padding: 0; background: none; border: 0; font-size: 1.15em; }
.voice-by { margin: 0; font-weight: 700; color: var(--muted); }
.voice p + p { margin-top: .9em; }

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 44px; }
.pager a { display: flex; align-items: center; gap: 10px; min-height: 68px; padding: 12px 14px; border: 1px solid var(--edge); border-radius: var(--radius); background: var(--surface); color: var(--ink); text-decoration: none; line-height: 1.5; }
.pager a:hover { border-color: var(--brand); }
.pager span { display: grid; min-width: 0; flex: 1; }
.pager small { font-size: .8125rem; color: var(--muted); }
.pager b { font-size: .9375rem; }
.pager a.pager-next { text-align: end; background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.pager-next small { color: inherit; }
.pager-next:hover { filter: brightness(1.08); }
@media (max-width: 480px) { .pager { grid-template-columns: 1fr; } .pager-next { order: -1; } }

.contact-list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.contact-btn { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--edge); color: var(--ink); text-decoration: none; }
.contact-btn:hover { border-color: var(--brand); box-shadow: var(--shadow); }
.contact-btn svg { width: 2.25rem; height: 2.25rem; padding: 6px; border-radius: 50%; color: #fff; }
.contact-btn.tg svg { background: #1675b3; }
.contact-btn.fb svg { background: #1a5fca; }
.contact-btn span { display: grid; line-height: 1.5; }
.contact-btn small { color: var(--muted); font-size: .8125rem; }

/* ============ Footer / toast ============ */
.foot { border-top: 1px solid var(--line); padding: 22px 16px calc(22px + env(safe-area-inset-bottom)); text-align: center; font-size: .875rem; color: var(--muted); }
.foot p { margin: 0 0 4px; }
.foot a { color: var(--muted); display: inline-block; padding: 10px 6px; }
.toast { position: fixed; inset-inline: 0; bottom: max(20px, env(safe-area-inset-bottom)); margin-inline: auto; width: max-content; max-width: calc(100vw - 32px); padding: 10px 20px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: .9375rem; font-weight: 600; opacity: 0; transform: translateY(12px); transition: opacity .2s, transform .2s; pointer-events: none; z-index: 60; }
.toast.on { opacity: 1; transform: none; }

/* ============ Motion / print ============ */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  @view-transition { navigation: none; }
}
@media print {
  :root, :root[data-theme], :root:not([data-theme="light"]) {
    color-scheme: light;
    --bg: #fff; --surface: #fff; --surface-2: #fff; --ink: #000; --muted: #333; --line: #bbb; --edge: #888;
    --brand: #14513c; --brand-ink: #14513c; --red: #8a2c1f; --amber: #7a4208; --blue: #17507f; --shadow: none;
    font-size: 100%;
  }
  .topbar, .toc, .foot, .pager, .doc-tools, .crumbs, .skip, dialog, .toast, .search, .hero-cta, .resume, .card-done { display: none !important; }
  body { font-size: 11.5pt; line-height: 1.7; display: block; }
  .shell { display: block !important; padding: 0; max-width: none; }
  main { padding: 0; }
  .doc { max-width: none; }
  h1, h2, h3 { break-after: avoid; }
  .prose li, .notes > li, .gallery figure { break-inside: avoid; }
  .voice { border: 0; border-top: 1px solid #bbb; border-radius: 0; padding-inline: 0; }
  .zoom { border: 0; }
  .zoom img { max-height: 16cm !important; width: auto; margin-inline: auto; aspect-ratio: auto !important; }
  a { color: inherit; text-decoration: none; }
}

/* =====================================================================
   Art layer — display typeface, ornament, hero, richer cards and footer
   ===================================================================== */
@font-face {
  font-family: "El Messiri";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/el-messiri-arabic-wght-normal.970b721e9b.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC;
}
:root {
  --display: "El Messiri", "Cairo", "Noto Kufi Arabic", system-ui, sans-serif;
  --gold: #a47a2a;
  --gold-soft: #ead9ae;
  --hero-1: #12402f;
  --hero-2: #1f6f54;
  --star: 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='%23fff' stroke-opacity='.075'%3E%3Cpath d='M32 6l7.6 18.4L58 32l-18.4 7.6L32 58l-7.6-18.4L6 32l18.4-7.6z'/%3E%3Cpath d='M0 0l8 8M64 0l-8 8M0 64l8-8M64 64l-8-8'/%3E%3C/g%3E%3C/svg%3E");
  --star-ink: 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='%231f6f54' stroke-opacity='.07'%3E%3Cpath d='M32 6l7.6 18.4L58 32l-18.4 7.6L32 58l-7.6-18.4L6 32l18.4-7.6z'/%3E%3Cpath d='M0 0l8 8M64 0l-8 8M0 64l8-8M64 64l-8-8'/%3E%3C/g%3E%3C/svg%3E");
}
:root[data-theme="dark"] { --gold: #dcbd74; --gold-soft: #3a3320; --hero-1: #0c2a20; --hero-2: #17503d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --gold: #dcbd74; --gold-soft: #3a3320; --hero-1: #0c2a20; --hero-2: #17503d; } }

body { background-image: radial-gradient(60rem 28rem at 100% -6rem, color-mix(in srgb, var(--brand) 9%, transparent), transparent 70%), radial-gradient(44rem 24rem at -10% 22rem, color-mix(in srgb, var(--gold) 8%, transparent), transparent 70%); background-repeat: no-repeat; }
h1, h2, h3, .brand, .btn, .pager b, .foot-brand b { font-family: var(--display); }
.brand { font-size: 1.2rem; font-weight: 700; }
.btn { font-size: 1.0625rem; }

/* ---- hero ---- */
.k-home main { padding-top: 20px; }
.hero { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; padding: clamp(28px, 6vw, 60px) clamp(22px, 5vw, 56px); border-radius: 28px; color: #fff; background: var(--star), radial-gradient(40rem 22rem at 0% 110%, rgb(255 255 255 / .1), transparent 60%), linear-gradient(135deg, var(--hero-2), var(--hero-1)); box-shadow: 0 24px 48px -28px rgb(18 64 47 / .7); }
.hero::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgb(234 217 174 / .28); border-radius: 20px; pointer-events: none; z-index: -1; }
.hero .eyebrow { display: inline-flex; align-items: center; gap: 10px; color: #f1e2b8; font-size: .9375rem; margin-bottom: 12px; }
.hero .eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; border-radius: 2px; }
.hero h1 { font-size: clamp(2.2rem, 1.4rem + 4.2vw, 3.9rem); font-weight: 700; line-height: 1.25; }
.hero h1 span { color: rgb(255 255 255 / .82); font-family: "Cairo", sans-serif; font-weight: 500; font-size: .4em; margin-top: 10px; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.hero-stats li { display: inline-flex; align-items: center; gap: 7px; padding: 5px 14px; border-radius: 999px; background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .2); font-size: .875rem; font-weight: 600; }
.hero-stats b { font-size: 1.05rem; font-weight: 800; color: #f1e2b8; }
.hero-stats svg { width: 1rem; height: 1rem; color: #f1e2b8; stroke-width: 2.4; }
.hero-cta { margin-top: 26px; }
.hero .btn { border-color: rgb(255 255 255 / .5); background: rgb(255 255 255 / .06); color: #fff; }
.hero .btn:hover { background: rgb(255 255 255 / .16); border-color: #fff; }
.hero .btn.primary { background: #fbf6e6; border-color: #fbf6e6; color: #12402f; box-shadow: 0 8px 20px -10px rgb(0 0 0 / .5); }
.hero .btn.primary:hover { background: #fff; filter: none; }
.hero .btn:focus-visible, .hero a:focus-visible { outline-color: #fff; }
.hero .resume { color: rgb(255 255 255 / .85); }
.hero .resume a { color: #f1e2b8; }
.hero-art { display: none; color: #f1e2b8; }
.hero-art img { width: 100%; height: auto; border-radius: 10px 4px 4px 10px; box-shadow: 0 0 0 1px rgb(255 255 255 / .25), -10px 14px 0 -4px rgb(0 0 0 / .18), 0 28px 44px -18px rgb(0 0 0 / .65); transform: rotate(-3deg); }
@media (min-width: 760px) {
  .hero { grid-template-columns: minmax(0, 1fr) clamp(170px, 22vw, 240px); gap: 40px; }
  .hero-art { display: block; padding-inline-end: 8px; }
}
.nf { margin-top: 12px; }
.hero.nf p:not(.eyebrow) { color: rgb(255 255 255 / .85); }

/* ---- search as a raised card overlapping the hero ---- */
.search { margin: -28px clamp(12px, 4vw, 40px) 0; z-index: 2; }
.search input { min-height: 60px; border-radius: 18px; border-color: transparent; box-shadow: 0 1px 0 var(--line), 0 16px 36px -18px rgb(18 64 47 / .45); }
:root[data-theme="dark"] .search input { border-color: var(--edge); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .search input { border-color: var(--edge); } }
.search input:hover { border-color: var(--edge); }

/* ---- groups & cards ---- */
.group { margin-top: 44px; }
.group h2 { font-size: 1.4rem; font-weight: 700; gap: 12px; margin-bottom: 16px; }
.group h2::after { background: linear-gradient(to left, var(--line), transparent); }
.g-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--hero-2), var(--hero-1)); box-shadow: 0 8px 16px -10px var(--hero-1); }
.g-ico svg { width: 1.45rem; height: 1.45rem; }
.group h2 small { order: 3; flex: none; font-family: "Cairo", sans-serif; font-size: .8125rem; font-weight: 700; color: var(--muted); background: var(--surface-2); padding: 2px 12px; border-radius: 999px; }
.cards { gap: 12px; }
.card { min-height: 76px; padding: 14px 16px; border-radius: 18px; overflow: hidden; background: linear-gradient(to left, color-mix(in srgb, var(--tone) 5%, var(--surface)), var(--surface) 55%); box-shadow: 0 1px 2px rgb(40 35 20 / .04); }
.card::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--tone); opacity: .75; transition: width .15s; }
.card:hover::before { width: 7px; opacity: 1; }
.card-n { width: 40px; height: 40px; background: var(--tone); color: var(--surface); font-size: .9375rem; box-shadow: 0 6px 12px -8px var(--tone); }
.card-t { font-family: var(--display); font-size: 1.0625rem; font-weight: 600; }

/* ---- section pages ---- */
.doc-head { position: relative; margin-bottom: 30px; padding: 22px clamp(18px, 4vw, 30px) 24px; border: 1px solid var(--line); border-radius: 24px; background: var(--star-ink), linear-gradient(160deg, color-mix(in srgb, var(--tone) 11%, var(--surface)), var(--surface) 62%); overflow: hidden; }
.doc-head::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 6px; background: linear-gradient(var(--tone), color-mix(in srgb, var(--tone) 40%, var(--gold))); }
.doc .eyebrow { display: inline-block; padding: 2px 12px; border-radius: 999px; background: color-mix(in srgb, var(--tone) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--tone) 30%, transparent); margin-bottom: 10px; }
.doc h1 { font-size: clamp(1.8rem, 1.3rem + 2.4vw, 2.6rem); font-weight: 700; }
.doc h1::after { content: none; }
.orn { display: block; width: 150px; margin-top: 12px; color: var(--gold); }
.orn svg { width: 100%; height: 14px; stroke-width: 1.2; }
.orn .orn-fill { fill: currentColor; }
.prose h2 { font-size: 1.35em; font-weight: 700; border-radius: 14px; border-inline-start: 0; padding: 12px 18px; display: flex; align-items: center; gap: 12px; background: color-mix(in srgb, var(--tone) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--tone) 22%, transparent); }
.prose h2::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--tone); transform: rotate(45deg); border-radius: 2px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--tone) 18%, transparent); }
.voice h2:not(.sr) { display: block; border: 0; }
.voice h2:not(.sr)::before { content: none; }
.prose h3 { font-size: 1.15em; }
.prose .lead { font-family: var(--display); font-size: 1.3em; line-height: 1.7; }
.notes > li { border-radius: 14px; border-inline-start-color: var(--gold); background: linear-gradient(to left, color-mix(in srgb, var(--gold) 9%, var(--surface)), var(--surface) 70%); }
.voice { border-radius: 20px; position: relative; box-shadow: 0 1px 2px rgb(40 35 20 / .04); }
.voice::after { content: "”"; position: absolute; top: 2px; inset-inline-end: 18px; font-family: Georgia, serif; font-size: 4.5rem; line-height: 1; color: color-mix(in srgb, var(--gold) 38%, transparent); pointer-events: none; }
.voice-n { background: var(--brand); color: var(--on-brand); }
.zoom { border-radius: 20px; box-shadow: 0 14px 30px -20px rgb(40 35 20 / .5); transition: transform .2s, box-shadow .2s; }
.zoom:hover { transform: translateY(-3px); box-shadow: 0 20px 36px -20px rgb(40 35 20 / .6); }
.pager a { border-radius: 18px; }
.pager a.pager-next { background: linear-gradient(135deg, var(--hero-2), var(--hero-1)); border-color: transparent; color: #fff; box-shadow: 0 14px 26px -18px var(--hero-1); }
.contact-btn { border-radius: 20px; }
.toc a[aria-current] { box-shadow: inset -3px 0 0 var(--brand); }
[dir="ltr"] .toc a[aria-current] { box-shadow: inset 3px 0 0 var(--brand); }

/* ---- footer ---- */
.foot { margin-top: 24px; border-top: 0; padding: 0; color: rgb(255 255 255 / .82); background: var(--star), linear-gradient(135deg, var(--hero-2), var(--hero-1)); }
.foot-in { max-width: 1240px; margin-inline: auto; padding: 34px 20px calc(26px + env(safe-area-inset-bottom)); display: grid; gap: 6px; justify-items: center; }
.foot-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 8px !important; text-align: start; }
.foot-brand img { border-radius: 10px; box-shadow: 0 0 0 2px rgb(255 255 255 / .25); }
.foot-brand span { display: grid; line-height: 1.5; }
.foot-brand b { color: #fff; font-size: 1.2rem; font-weight: 700; }
.foot-brand small { font-size: .8125rem; }
.foot a { color: #f1e2b8; }
.foot a:focus-visible { outline-color: #fff; }

@media print {
  body { background-image: none; }
  .hero { background: none; color: #000; box-shadow: none; padding: 0; border-radius: 0; }
  .hero::after, .hero-art, .hero-stats, .orn, .voice::after { display: none; }
  .hero h1 span { color: #333; }
  .doc-head { background: none; border: 0; border-bottom: 1px solid #bbb; border-radius: 0; padding: 0 0 12px; }
  .doc-head::before { display: none; }
  .card, .notes > li, .prose h2 { background: none; }
}

/* Book cover in the hero on small screens: sits beside the title, everything else spans full width. */
@media (max-width: 759px) {
  .hero { grid-template-columns: minmax(0, 1fr) 92px; column-gap: 16px; align-items: start; }
  .hero-in { display: contents; }
  .hero-in > * { grid-column: 1 / -1; }
  .hero-in > .eyebrow, .hero-in > h1 { grid-column: 1; }
  .hero-art { display: block; grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .hero-art img { transform: rotate(-4deg); box-shadow: 0 0 0 1px rgb(255 255 255 / .25), 0 14px 24px -10px rgb(0 0 0 / .6); }
}
@media (max-width: 350px) { .hero { grid-template-columns: minmax(0, 1fr) 70px; column-gap: 10px; } }
@media print { .hero-art { display: none !important; } }
@media (max-width: 759px) { .hero .eyebrow { font-size: .8125rem; } .hero .eyebrow::before { content: none; } }

/* =====================================================================
   Guide layer — overview timeline, before-you-start, checklist, inline pictures, CTAs
   ===================================================================== */
.paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 12px; margin-top: 26px; }
.path { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; box-shadow: 0 1px 2px rgb(40 35 20 / .04); }
a.path { transition: transform .15s, box-shadow .15s, border-color .15s; }
a.path:hover { transform: translateY(-2px); border-color: var(--brand); box-shadow: var(--shadow); }
.path > span:last-child { display: grid; gap: 2px; min-width: 0; line-height: 1.6; }
.path b { font-family: var(--display); font-size: 1.2rem; font-weight: 700; }
.path small { color: var(--muted); font-size: .875rem; }
.path-before { border-color: color-mix(in srgb, var(--red) 35%, var(--line)); background: linear-gradient(to left, color-mix(in srgb, var(--red) 6%, var(--surface)), var(--surface) 70%); }
.path-before .g-ico { background: var(--red); box-shadow: none; color: var(--surface); }
.path-links { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.path-links a { font-size: .9375rem; font-weight: 600; padding-block: 6px; }

.before { margin-bottom: 26px; padding: 14px 18px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--red) 40%, var(--line)); background: color-mix(in srgb, var(--red) 6%, var(--surface)); }
.before-t { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; color: var(--red); }
.before ul { display: flex; flex-wrap: wrap; gap: 2px 18px; }
.before a { display: inline-block; padding-block: 8px; font-weight: 700; }

.inline-fig { margin-block: 1.2em 1.6em; }
.inline-fig .zoom img { max-height: 78vh; object-fit: contain; }
.gallery.whole .zoom img { aspect-ratio: 4 / 5; object-fit: contain; background: var(--surface-2); }

.cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; margin-top: 36px; padding: 20px 22px; border-radius: 22px; color: #fff; background: var(--star), linear-gradient(135deg, var(--hero-2), var(--hero-1)); box-shadow: 0 18px 34px -24px var(--hero-1); }
.cta + .cta { margin-top: 12px; }
.cta div { min-width: min(100%, 220px); flex: 1; }
.cta b { font-family: var(--display); font-size: 1.3rem; font-weight: 700; }
.cta p { margin: 2px 0 0; color: rgb(255 255 255 / .85); font-size: .9375rem; }
.cta .btn.primary { background: #fbf6e6; border-color: #fbf6e6; color: #12402f; }
.cta .btn.primary:hover { background: #fff; filter: none; }
.cta .btn:focus-visible { outline-color: #fff; }
.cta .btn svg { width: 1.3rem; height: 1.3rem; }

.checklist { margin-bottom: 30px; padding: 18px 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.checklist h2 { font-size: 1.3rem; font-weight: 700; margin-bottom: 8px; }
.checklist ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 2px 18px; }
.checklist label { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px 6px; border-radius: 10px; cursor: pointer; line-height: 1.6; }
.checklist label:hover { background: var(--surface-2); }
.checklist input { flex: none; width: 22px; height: 22px; accent-color: var(--brand); }
.checklist input:checked + span { color: var(--muted); text-decoration: line-through; }
.checklist-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 0; font-size: .9375rem; font-weight: 700; color: var(--brand-ink); min-height: 44px; }

.doc-intro { margin: 12px 0 0; color: var(--muted); }
.stages { list-style: none; display: grid; gap: 0; margin: 0 0 28px; padding: 0; counter-reset: stage; }
.stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding-inline-start: 34px; padding-bottom: 26px; }
.stage::before { content: ""; position: absolute; inset-inline-start: 9px; top: 8px; bottom: -8px; width: 2px; background: color-mix(in srgb, var(--brand) 35%, var(--line)); }
.stage:last-child::before { display: none; }
.stage::after { content: ""; position: absolute; inset-inline-start: 0; top: 8px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); border: 5px solid var(--brand); }
.stage-when { margin: 0; justify-self: start; padding: 2px 16px; border-radius: 999px; font-family: var(--display); font-size: 1.1rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--hero-2), var(--hero-1)); }
.stage-body { padding: 16px 18px 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.stage-body h2 { font-size: 1.3rem; font-weight: 700; margin-bottom: 10px; }
.stage-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.stage-links .chip { text-decoration: none; color: var(--brand-ink); }
.toc-top { margin-bottom: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.toc-top a { font-weight: 700; }

/* Long testimonials fold; the button is added by script, so without it they stay fully open. */
.voice.fold .voice-body { max-height: 15rem; overflow: hidden; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.voice .more { margin-top: 10px; }

@media print {
  .paths, .cta, .before, .checklist-foot button, .voice .more { display: none !important; }
  .voice.fold .voice-body { max-height: none; -webkit-mask-image: none; mask-image: none; }
  .stage-when { background: none; color: #000; border: 1px solid #888; }
}

/* ---- floating "home" button on every inner page, shop button ---- */
.home-fab { position: fixed; z-index: 15; inset-inline-end: max(14px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 8px; min-height: 54px; padding: 8px 22px 8px 18px; border-radius: 999px; font-family: var(--display); font-size: 1.15rem; font-weight: 700; color: #fff; text-decoration: none; background: linear-gradient(135deg, var(--hero-2), var(--hero-1)); border: 2px solid rgb(255 255 255 / .35); box-shadow: 0 14px 28px -12px rgb(0 0 0 / .55); transition: transform .15s; }
.home-fab:hover { transform: translateY(-2px); }
.home-fab:focus-visible { outline-color: var(--focus); outline-offset: 3px; }
.home-fab svg { width: 1.5rem; height: 1.5rem; stroke-width: 2; }
.k-doc main, .k-404 main { padding-bottom: 96px; }
.contact-btn.shop svg { background: var(--gold); stroke: #fff; fill: none; }
@media print { .home-fab { display: none !important; } }

/* =====================================================================
   Reading settings — larger text steps and alternative typefaces
   ===================================================================== */
@font-face {
  font-family: "Noto Naskh Arabic";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/noto-naskh-arabic-arabic-wght-normal.2a10d33e1f.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC;
}
:root[data-fs="3"] { font-size: 150%; }
:root[data-fs="4"] { font-size: 175%; }
:root[data-font="naskh"] { --display: "Noto Naskh Arabic", "Amiri", "Traditional Arabic", serif; }
:root[data-font="naskh"] body, :root[data-font="naskh"] .hero h1 span, :root[data-font="naskh"] .group h2 small { font-family: "Noto Naskh Arabic", "Amiri", "Traditional Arabic", serif; font-size: 1.1875rem; line-height: 2; }
:root[data-font="naskh"] .group h2 small { font-size: .875rem; }
:root[data-font="system"] { --display: system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif; }
:root[data-font="system"] body, :root[data-font="system"] .hero h1 span, :root[data-font="system"] .group h2 small { font-family: system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif; }
/* The top bar keeps a fixed size so its controls stay reachable at every text size. */
.topbar { font-size: 16px; }
.brand { font-size: 19px; }
.icon-btn.txt span, :root[data-fs] .icon-btn.txt span { font-size: 22px; }

.reading { width: min(420px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); border-radius: 22px; background: var(--bg); box-shadow: var(--shadow); font-size: 16px; overflow: auto; }
.reading-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 18px; padding-inline: 18px 8px; border-bottom: 1px solid var(--line); }
.reading-head h2 { font-size: 20px; }
.reading-body { display: grid; gap: 18px; padding: 18px; }
.reading-row { margin: 0; padding: 0; border: 0; min-width: 0; }
.reading-row > p, .reading-row > legend { margin: 0 0 8px; padding: 0; font-weight: 800; font-size: 15px; color: var(--muted); }
.stepper { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; gap: 10px; }
.step { height: 56px; border-radius: 16px; border: 1.5px solid var(--edge); background: var(--surface); font-size: 30px; font-weight: 800; line-height: 1; color: var(--ink); }
.step:hover:not(:disabled) { border-color: var(--brand); }
.step:disabled { opacity: .4; cursor: not-allowed; }
.stepper output { text-align: center; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fonts { display: grid; gap: 8px; }
.font-opt { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 14px; border-radius: 16px; border: 1.5px solid var(--edge); background: var(--surface); cursor: pointer; }
.font-opt:has(input:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 1.5px var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--surface)); }
.font-opt input { flex: none; width: 22px; height: 22px; accent-color: var(--brand); }
.font-opt span { display: grid; line-height: 1.5; }
.font-opt b { font-size: 19px; }
.font-opt small { font-size: 13px; color: var(--muted); }
.f-cairo b { font-family: "Cairo", sans-serif; }
.f-naskh b { font-family: "Noto Naskh Arabic", "Amiri", serif; font-size: 21px; }
.f-system b { font-family: system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif; }
.reading-sample { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px dashed var(--edge); font-size: 1.0625rem; line-height: 1.9; }
:root[data-fs] .reading-sample { font-size: calc(1.0625rem * 1); }
.reading-body .chip { justify-self: start; }
/* Very large text on narrow phones: let long words and rows wrap instead of overflowing. */
:root[data-fs="3"] .pager, :root[data-fs="4"] .pager { grid-template-columns: 1fr; }
:root[data-fs="3"] .hero-art, :root[data-fs="4"] .hero-art { display: none; }
:root[data-fs="3"] .hero, :root[data-fs="4"] .hero { grid-template-columns: minmax(0, 1fr); }
:root[data-fs="3"] .hero-in > *, :root[data-fs="4"] .hero-in > * { grid-column: 1 / -1; }
:root[data-fs="3"] .home-fab span, :root[data-fs="4"] .home-fab span { font-size: 18px; }
/* Wrapping fixes found when testing 175% text on 320px phones. */
.group h2 { flex-wrap: wrap; }
.group h2::after { min-width: 24px; }
.doc-tools, .hero-cta, .stage-links { flex-wrap: wrap; }
.prose h2 { display: block; position: relative; padding-inline-start: 40px; }
.prose h2::before { position: absolute; inset-inline-start: 16px; top: calc(12px + .5em); }
.voice h2:not(.sr) { padding-inline-start: 0; }
.chip { max-width: 100%; }

/* =====================================================================
   Testimonials spotlight — animated gold accents wherever the section is linked
   ===================================================================== */
@keyframes sheen { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 rgb(241 226 184 / .55); } 60% { box-shadow: 0 0 0 9px rgb(241 226 184 / 0); } }
@keyframes twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.18) rotate(12deg); } }
.hero-stats .stat-voices { padding: 0; border: 0; background: none; }
.stat-voices a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 6px 16px; border-radius: 999px; font-weight: 800; color: #3b2a05; text-decoration: none; background: linear-gradient(100deg, #e9c869 0%, #fff3c9 50%, #e9c869 100%); background-size: 200% 100%; animation: sheen 3.2s linear infinite, glow 2.4s ease-out infinite; }
.stat-voices a svg { width: 1.1rem; height: 1.1rem; color: #3b2a05; }
.stat-voices a svg:first-child { fill: #3b2a05; stroke: none; animation: twinkle 2.4s ease-in-out infinite; }
.stat-voices a:hover { filter: brightness(1.06); }
.path-voices, .card.card-voices { border-color: transparent; color: #3b2a05; background: linear-gradient(100deg, #edcd77 0%, #fff6d6 50%, #edcd77 100%); background-size: 200% 100%; animation: sheen 5s linear infinite; box-shadow: 0 14px 28px -18px rgb(164 122 42 / .9); }
.path-voices small { color: #5a4310; }
.path-voices .g-ico, .card-voices .card-n { background: #7a5a12; color: #fff6d6; box-shadow: none; }
.path-voices .g-ico svg { fill: currentColor; stroke: none; animation: twinkle 2.4s ease-in-out infinite; }
.card.card-voices::before { background: #7a5a12; opacity: 1; }
.card.card-voices .card-done { color: #3b2a05; }
.checklist label small { display: block; font-size: .8125rem; font-weight: 600; color: var(--muted); line-height: 1.5; }
.checklist input:checked + span small { text-decoration: none; }
.day-figs { margin-top: 34px; }
.day-figs > h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 4px; }
@media print { .stat-voices a, .path-voices, .card.card-voices { animation: none; background: none; box-shadow: none; } }

/* =====================================================================
   Start-date board at the top of the home page
   ===================================================================== */
html:not(.js) .fridays { display: none; }
.fridays { display: flex; align-items: center; gap: clamp(14px, 3vw, 26px); margin-bottom: 18px; padding: clamp(18px, 4vw, 30px) clamp(18px, 4vw, 34px); border-radius: 28px; color: #2f2204; background: linear-gradient(110deg, #f6e3a4, #fff7dc 45%, #efd27f); border: 2px solid #c79d3a; box-shadow: 0 20px 40px -26px rgb(164 122 42 / .95), inset 0 0 0 5px rgb(255 255 255 / .35); }
.fr-ico { flex: none; display: grid; place-items: center; width: clamp(56px, 12vw, 88px); height: clamp(56px, 12vw, 88px); border-radius: 50%; color: #fff7dc; background: linear-gradient(135deg, var(--hero-2), var(--hero-1)); box-shadow: 0 10px 20px -10px var(--hero-1); }
.fr-ico svg { width: 55%; height: 55%; stroke-width: 1.6; }
.fr-body { min-width: 0; flex: 1; }
.fridays h2 { font-size: clamp(1.05rem, .9rem + .8vw, 1.3rem); font-weight: 700; color: #6b4c0c; margin-bottom: 4px; }
.fr-list { display: grid; gap: 6px; min-height: 2.2em; }
.fr-list li { font-family: var(--display); font-size: clamp(1.25rem, 1rem + 1.7vw, 2rem); font-weight: 700; line-height: 1.5; }
.fr-list b { color: #12402f; white-space: nowrap; }
.fr-ok { color: #6b4c0c; }
.fr-wait { opacity: .6; }
.fr-join { margin: 12px 0 0; }
.fr-join a { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 20px; border-radius: 999px; font-family: var(--display); font-size: 1.1rem; font-weight: 700; color: #fff; text-decoration: none; background: linear-gradient(135deg, var(--hero-2), var(--hero-1)); box-shadow: 0 10px 20px -12px var(--hero-1); }
.fr-join a:hover { filter: brightness(1.1); }
.fr-join svg { width: 1.3rem; height: 1.3rem; }
.fr-note { margin: 10px 0 0; font-size: .8125rem; color: #5a4310; }
@media (max-width: 520px) { .fridays { flex-direction: column; align-items: flex-start; } .fr-ico { width: 52px; height: 52px; } }
@media print { .fridays { display: none; } }
/* Reserve room for two dates so the page below does not jump when they are filled in. */
.fr-list { min-height: 12.6rem; align-content: center; }
@media (min-width: 521px) { .fr-list { min-height: 9.5rem; } }
@media (min-width: 1100px) { .fr-list { min-height: 12.5rem; } }
@media (max-width: 520px) { .fr-list b { white-space: normal; } }
:root[data-fs="3"] .fr-list b, :root[data-fs="4"] .fr-list b { white-space: normal; }
:root[data-fs="3"] .fr-join a, :root[data-fs="4"] .fr-join a { border-radius: 22px; }

/* =====================================================================
   Spacing system — one scale for every gap, and a consistent vertical rhythm.
   Loaded last on purpose: it re-states the distances set piecemeal above.
   ===================================================================== */
:root { --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; }
h1, h2, h3 { line-height: 1.5; }
main { padding-block: var(--s5) var(--s8); }
.k-home main { padding-top: var(--s5); }

/* ---- start-date board ---- */
.fridays { gap: var(--s5); margin-bottom: var(--s5); padding: var(--s6) clamp(20px, 4vw, 36px); align-items: flex-start; }
.fr-ico { margin-top: var(--s1); }
.fridays h2 { margin-bottom: var(--s4); line-height: 1.4; }
.fr-list { gap: 0; min-height: 0; }
.fr-list li { display: grid; gap: var(--s1); padding-block: var(--s4); font-size: clamp(1.35rem, 1.05rem + 1.6vw, 2rem); line-height: 1.45; border-top: 1px solid rgb(122 90 18 / .28); }
.fr-list li:first-child { padding-top: 0; border-top: 0; }
.fr-list li.fr-wait { min-height: 7.5rem; align-content: center; }
.fr-day { color: #2f2204; }
.fr-hij { font-family: "Cairo", sans-serif; font-size: .6em; font-weight: 700; color: #5a4310; line-height: 1.6; }
.fr-ok { justify-self: start; margin-top: var(--s2); padding: 2px var(--s4); border-radius: 999px; font-family: "Cairo", sans-serif; font-size: .875rem; font-weight: 800; line-height: 1.9; color: #12402f; background: rgb(18 64 47 / .12); border: 1px solid rgb(18 64 47 / .3); }
.fr-join { margin-top: var(--s4); }
.fr-join a { padding: var(--s3) var(--s5); line-height: 1.6; }
.fr-note { margin-top: var(--s4); line-height: 1.8; }
@media (max-width: 520px) { .fridays { gap: var(--s4); padding: var(--s5) 20px; } }

/* ---- hero ---- */
.hero { padding: clamp(32px, 6vw, 64px) clamp(24px, 5vw, 56px) calc(clamp(32px, 6vw, 64px) + 30px); row-gap: 0; }
.hero .eyebrow { margin-bottom: var(--s3); line-height: 1.6; }
.hero h1 { line-height: 1.35; }
.hero h1 span { margin-top: var(--s3); line-height: 1.7; }
.hero-stats { gap: var(--s2) var(--s2); margin-top: var(--s5); }
.hero-stats li { min-height: 44px; padding: var(--s1) var(--s4); line-height: 1.6; }
.hero-cta { gap: var(--s3); margin-top: var(--s5); }
.hero .resume { margin-top: var(--s4); line-height: 1.8; }
.search { margin-top: -30px; }
@media (max-width: 759px) { .hero-art { align-self: start; margin-top: var(--s2); } }

/* ---- home: start cards, groups, cards ---- */
.paths { gap: var(--s3); margin-top: var(--s6); }
.path { gap: var(--s4); padding: var(--s4) 20px; }
.path > span:last-child { gap: var(--s1); }
.path-links { gap: 0 var(--s4); }
.group { margin-top: var(--s7); }
.group h2 { gap: var(--s3); margin-bottom: var(--s4); }
.cards { gap: 10px; }
.card { min-height: 64px; gap: var(--s3); padding: var(--s3) var(--s4); line-height: 1.55; }
.card-n { width: 36px; height: 36px; }

/* ---- section pages ---- */
.doc-head { margin-bottom: var(--s6); padding: var(--s5) clamp(20px, 4vw, 32px) var(--s5); }
.crumbs { margin-bottom: var(--s1); }
.doc .eyebrow { margin-bottom: var(--s3); }
.orn { margin-top: var(--s4); }
.doc-tools { gap: var(--s2); margin-top: var(--s4); }
.doc-intro { margin-top: var(--s4); }
.before { margin-bottom: var(--s6); padding: var(--s4) 20px; }
.before-t { margin-bottom: var(--s2); }
.before ul { gap: 0 var(--s5); }
.checklist { margin-bottom: var(--s6); padding: var(--s5) 20px; }
.checklist h2 { margin-bottom: var(--s3); }
.checklist-foot { margin-top: var(--s3); }

.prose > * + * { margin-top: 1.25em; }
.prose > h2 { margin-top: 2.8em; margin-bottom: 0; padding-block: var(--s3); line-height: 1.55; }
.prose > h2:first-child, .prose > .lead + h2 { margin-top: 0; }
.prose > h2 + * { margin-top: 1.25em; }
.prose > h3 { margin-top: 2.2em; }
.prose > h3 + * { margin-top: .9em; }
.pts > li + li { margin-top: .85em; }
.para > li + li { margin-top: 1.25em; }
.prose li > p + p { margin-top: .7em; }
.sub { margin-top: .7em; padding-block: 2px; }
.sub > li + li { margin-top: .55em; }
.prose > .notes { margin-top: 1.6em; }
.prose > .notes + * { margin-top: 1.6em; }
.notes { gap: var(--s3); }
.notes > li { padding: var(--s4) 20px; }
.inline-fig { margin-block: 1.5em 2em; }
.voices .prose > .voice + .voice { margin-top: var(--s5); }
.voice { padding: var(--s5) clamp(18px, 4vw, 26px); }
.voice header { margin-bottom: var(--s3); }
.voice p + p { margin-top: 1em; }
.gallery { margin-top: var(--s7); gap: var(--s4); }
.cta { margin-top: var(--s7); padding: var(--s5) clamp(20px, 4vw, 28px); gap: var(--s4) var(--s5); }
.cta + .cta { margin-top: var(--s4); }
.cta p { margin-top: var(--s1); line-height: 1.8; }
.pager { margin-top: var(--s7); gap: var(--s3); }
.pager a { padding: var(--s4); }
.stages { margin-bottom: var(--s6); }
.stage { gap: var(--s3); padding-bottom: var(--s6); }
.stage-body { padding: 20px 20px var(--s4); }
.stage-body h2 { margin-bottom: var(--s3); }
.stage-links { gap: var(--s2); margin-top: var(--s4); }
.day-figs { margin-top: var(--s7); }
.day-figs > h2 { margin-bottom: var(--s2); }
.contact-list { gap: var(--s3); }

/* ---- footer ---- */
.foot { margin-top: var(--s6); }
.foot-in { padding: var(--s7) 20px calc(var(--s6) + env(safe-area-inset-bottom)); gap: var(--s2); }
.foot-brand { margin-bottom: var(--s3) !important; }
.foot p { margin: 0; line-height: 1.9; }
.k-doc main, .k-404 main { padding-bottom: 112px; }
.hero-stats { margin-top: 30px; }
/* Board: reserve the height of the usual two dates; on wide screens the dates sit side by side. */
.fr-list li.fr-wait { min-height: 15.5rem; }
@media (min-width: 760px) {
  .fr-list { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s5); }
  .fr-list li { padding-block: 0; border-top: 0; }
  .fr-list li + li { padding-inline-start: var(--s5); border-inline-start: 1px solid rgb(122 90 18 / .28); }
  .fr-list li.fr-wait { min-height: 8rem; }
}

/* Latin-only lines (citations) and raw web addresses */
.ltr-line { display: block; text-align: left; unicode-bidi: isolate; font-size: .9375em; line-height: 1.7; }
.prose a.url { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; margin-top: var(--s1); padding: 4px var(--s4); border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: .875em; font-weight: 600; text-decoration: none; text-align: left; }
.prose a.url:hover { border-color: var(--brand); }
@media print { .prose a.url { white-space: normal; overflow: visible; border: 0; padding: 0; background: none; overflow-wrap: anywhere; } }
.notes > li, .prose li, .prose li > p { min-width: 0; }

/* =====================================================================
   Hero quotation — a golden box where the book cover used to sit
   ===================================================================== */
.hero-quote { position: relative; margin: 0; padding: var(--s6) var(--s5) var(--s5); border-radius: 22px; color: #2f2204; background: linear-gradient(140deg, #f6e3a4, #fff7dc 48%, #efd27f); border: 2px solid #c79d3a; box-shadow: 0 22px 40px -22px rgb(0 0 0 / .6), inset 0 0 0 4px rgb(255 255 255 / .35); }
.hero-quote::before { content: "”"; position: absolute; top: -6px; inset-inline-start: 18px; font-family: Georgia, "Times New Roman", serif; font-size: 5.5rem; line-height: 1; color: #b88a25; pointer-events: none; }
.hero-quote blockquote { margin: 0; }
.hero-quote p { margin: 0; font-family: var(--display); font-size: clamp(1.15rem, 1rem + .7vw, 1.45rem); font-weight: 700; line-height: 1.85; }
.hero-quote figcaption { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid rgb(122 90 18 / .35); font-weight: 800; font-size: .9375rem; color: #6b4c0c; text-align: end; }
@media (min-width: 760px) { .hero.hero-has-quote { grid-template-columns: minmax(0, 1fr) clamp(280px, 34vw, 400px); gap: var(--s7); } }
@media (max-width: 759px) {
  .hero.hero-has-quote { grid-template-columns: minmax(0, 1fr); }
  .hero.hero-has-quote .hero-in { display: block; }
  .hero-quote { margin-top: var(--s6); }
}
:root[data-fs="3"] .hero.hero-has-quote, :root[data-fs="4"] .hero.hero-has-quote { grid-template-columns: minmax(0, 1fr); }
:root[data-fs="3"] .hero-quote, :root[data-fs="4"] .hero-quote { margin-top: var(--s6); }
@media print { .hero-quote { background: none; box-shadow: none; border: 1px solid #888; } .hero-quote::before { display: none; } }

/* =====================================================================
   Hero, re-engineered: compact title block + one golden card that carries
   the author's words with his book leaning out of its corner.
   ===================================================================== */
.hero.hero-has-quote { padding: clamp(26px, 4.5vw, 48px) clamp(22px, 4.5vw, 52px) calc(clamp(26px, 4.5vw, 48px) + 30px); align-items: center; }
.hero-has-quote h1 { font-size: clamp(2rem, 1.3rem + 3.2vw, 3.3rem); }
.hero-has-quote .hero-stats { margin-top: var(--s5); }
.hero-has-quote .hero-cta { margin-top: var(--s5); }
.hero-quote { display: flow-root; margin-top: 0; padding: var(--s5) var(--s5) var(--s4); border-radius: 24px; background: linear-gradient(150deg, #f8e7ae, #fff8e0 46%, #eccd76); box-shadow: 0 26px 44px -24px rgb(0 0 0 / .65), inset 0 0 0 4px rgb(255 255 255 / .38); }
.hero-quote::before { top: -10px; inset-inline-start: 20px; font-size: 5rem; }
.hero-book { float: inline-end; width: clamp(92px, 11vw, 132px); height: auto; margin: -46px 0 var(--s2) var(--s4); margin-inline: var(--s4) -6px; border-radius: 6px 3px 3px 6px; transform: rotate(-5deg); box-shadow: 0 0 0 1px rgb(255 255 255 / .5), -6px 10px 0 -3px rgb(60 40 5 / .18), 0 18px 28px -12px rgb(0 0 0 / .6); }
.hero-quote blockquote { padding-top: var(--s3); }
.hero-quote p { font-size: clamp(1.02rem, .93rem + .5vw, 1.24rem); line-height: 1.85; text-wrap: pretty; }
.hero-quote figcaption { clear: both; margin-top: var(--s3); padding-top: var(--s3); font-size: .875rem; }
@media (min-width: 760px) {
  .hero.hero-has-quote { grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); gap: clamp(28px, 4vw, 56px); }
  .hero-quote { margin-top: 30px; }
}
@media (max-width: 759px) {
  .hero-has-quote h1 { font-size: clamp(1.9rem, 1.2rem + 3.6vw, 2.5rem); line-height: 1.3; }
  .hero-has-quote .hero-stats li { min-height: 40px; font-size: .8125rem; }
  .hero-has-quote .btn { min-height: 46px; padding-inline: 20px; }
  .hero-quote { margin-top: calc(var(--s6) + 22px); padding: var(--s4) var(--s4) var(--s3); }
  .hero-book { width: 84px; margin-top: -40px; }
  .hero-quote::before { font-size: 4rem; top: -8px; }
}
:root[data-fs="3"] .hero-quote, :root[data-fs="4"] .hero-quote { margin-top: calc(var(--s6) + 22px); }
:root[data-fs="3"] .hero-book, :root[data-fs="4"] .hero-book { display: none; }
@media print { .hero-book { display: none; } }