/* Zikr al Habeeb — tokens from docs/03-design-foundations.md. Use only these tokens below. */
:root {
  --bg: #ffffff; --fg: #15171a; --muted: #6b6b6b;
  --header-bg: rgba(250, 247, 242, .9); --header-fg: #16222a;
  --gold: #c9a24d; --gold-hover: #b88f3a; --on-gold: #0f1c24;
  --accent: #d1005b; --accent-hover: #a8004a; --on-accent: #ffffff;
  --line: #e1e1e1; --footer-bg: #000000; --footer-fg: #ffffff; --footer-muted: #979797;
  --error: #b3261e; --video-bg: #15171a;
  --font-title: "IBM Plex Sans Arabic", -apple-system, system-ui, "Segoe UI", "Geeza Pro", Tahoma, sans-serif;
  --font-body: "Noto Naskh Arabic", "Amiri", "Geeza Pro", "Times New Roman", serif;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --measure: 720px; --wide: 1100px;
  --r-pill: 999px; --r-input: 8px; --r-media: 6px;
  --fast: 150ms;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121416; --fg: #ecedee; --muted: #a3a3a3;
    --header-bg: rgba(28, 26, 23, .92); --header-fg: #ecedee;
    --accent: #ff6fa3; --accent-hover: #ff94bb; --on-accent: #121416;
    --line: #2c2e31; --error: #f2b8b5;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 18px/2 var(--font-body); }
img { max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-title); font-weight: 700; line-height: 1.3; text-wrap: balance; margin: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: var(--s4); inset-block-start: -100px; background: var(--gold); color: var(--on-gold); padding: var(--s2) var(--s4); z-index: 20; }
.skip:focus { inset-block-start: var(--s2); }
.wrap { max-width: var(--measure); margin-inline: auto; padding-inline: max(var(--s4), env(safe-area-inset-left, 0px)) max(var(--s4), env(safe-area-inset-right, 0px)); }

/* Header */
.site-head .bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--s4);
  background: var(--header-bg); color: var(--header-fg); border-block-end: 1px solid var(--line);
  padding: var(--s2) max(var(--s4), env(safe-area-inset-right, 0px)) var(--s2) max(var(--s4), env(safe-area-inset-left, 0px));
  font-family: var(--font-title); backdrop-filter: blur(6px); }
.site-head { position: sticky; top: 0; z-index: 10; }
.brand img { display: block; width: 44px; height: 44px; object-fit: contain; }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s5); }
.menu a { text-decoration: none; font-size: 16px; font-weight: 500; line-height: 1.4; transition: color var(--fast); }
.menu a:hover, .menu a[aria-current="page"] { color: var(--accent); }
.menu a[aria-current="page"] { font-weight: 700; }
.actions { margin-inline-start: auto; display: flex; align-items: center; gap: var(--s2); }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--r-pill); background: transparent; color: inherit; cursor: pointer; }
.icon-btn:hover { color: var(--accent); }
.btn-gold { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s4); border-radius: var(--r-pill); background: var(--gold); color: var(--on-gold); font: 600 15px/1 var(--font-title); text-decoration: none; transition: background var(--fast); }
.btn-gold:hover { background: var(--gold-hover); }
.burger { display: none; }
.site-head.has-cover { position: static; }
.site-head.has-cover .bar { position: sticky; }
.cover { position: relative; display: grid; justify-items: center; gap: var(--s4); text-align: center;
  padding: var(--s8) var(--s4); background: var(--header-bg) url("/assets/images/cover.jpg") center / cover no-repeat; color: var(--header-fg); }
.cover::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(250,247,242,.15), rgba(250,247,242,.35)); }
.cover > * { position: relative; }
.cover-logo { width: 120px; height: 120px; background: #fff; padding: var(--s2); }
.cover-desc { max-width: 34ch; margin: 0; font: 500 22px/1.7 var(--font-title); color: #16222a; }

@media (max-width: 860px) {
  .burger { display: inline-grid; }
  .menu { position: absolute; inset-inline: 0; inset-block-start: 100%; background: var(--bg); border-block-end: 1px solid var(--line); display: none; }
  .menu.open { display: block; }
  .menu ul { flex-direction: column; gap: 0; padding: var(--s2) var(--s4); }
  .menu a { display: block; padding: var(--s3) 0; font-size: 18px; }
  .bar { position: relative; }
  .actions .btn-gold { display: none; }
}

/* Lists */
.list { padding-block: var(--s7) var(--s8); }
.list-head { display: grid; gap: var(--s2); margin-block-end: var(--s6); }
.list-head h1 { font-size: clamp(30px, 6vw, 44px); }
.post-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s7); }
.post-item { display: grid; gap: var(--s2); }
.tag { font: 600 14px/1.5 var(--font-title); color: var(--muted); text-decoration: none; }
a.tag:hover { color: var(--accent); }
.featured { font: 600 13px/1.5 var(--font-title); color: var(--accent); margin-inline-start: var(--s2); }
.featured::before { content: "✦ "; }
.item-title { font-size: clamp(24px, 5vw, 34px); font-weight: 800; }
.item-title a { text-decoration: none; }
.item-title a:hover { color: var(--accent); }
.item-excerpt { margin: 0; font-size: 17px; line-height: 1.9; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.meta { font: 400 14px/1.5 var(--font-title); color: var(--muted); }
.empty { color: var(--muted); }
.pager { display: flex; justify-content: space-between; gap: var(--s4); margin-block-start: var(--s7); font: 600 16px/1.5 var(--font-title); }
.pager a { text-decoration: none; color: var(--accent); }
.topic-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s6); }

/* Article */
.article { padding-block: var(--s7) var(--s6); }
.article-head { display: grid; gap: var(--s3); margin-block-end: var(--s6); }
.article-head h1 { font-size: clamp(32px, 7vw, 48px); font-weight: 800; }
.article-excerpt { margin: 0; font-size: 19px; line-height: 1.8; color: var(--muted); }
.byline { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-block-start: var(--s2); }
.byline-author { display: flex; align-items: center; gap: var(--s3); font: 600 15px/1.5 var(--font-title); }
.byline-author a { text-decoration: none; }
.avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--line); color: var(--muted); overflow: hidden; }
.avatar svg { width: 30px; height: 30px; margin-block-start: 8px; }
.btn-outline { min-height: 40px; padding: 0 var(--s4); border: 1px solid var(--line); border-radius: var(--r-pill); background: transparent; color: inherit; font: 600 14px/1 var(--font-title); cursor: pointer; }
.btn-outline:hover { border-color: var(--muted); }
.content > * + * { margin-block-start: var(--s5); }
.content p, .content li { margin-block: 0; }
.content h2 { font-size: clamp(24px, 4.5vw, 28px); margin-block-start: var(--s7); }
.content h3 { font-size: 22px; margin-block-start: var(--s6); }
.content a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.content a:hover { text-decoration-thickness: 2px; }
.content blockquote { margin-inline: 0; padding-inline-start: var(--s4); border-inline-start: 3px solid var(--accent); font-style: italic; }
.content hr { border: 0; border-block-start: 1px solid var(--line); margin-block: var(--s7); }
.content ul, .content ol { padding-inline-start: var(--s5); }
.content img { border-radius: var(--r-media); display: block; margin-inline: auto; }
.content iframe { display: block; width: 100%; max-width: 100%; border: 0; }

/* Video: thumbnail first, YouTube loads on press */
.video { margin-inline: 0; }
.yt { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; border-radius: var(--r-media); overflow: hidden; background: var(--video-bg); cursor: pointer; }
.yt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-play { position: absolute; inset: 0; margin: auto; width: 68px; height: 48px; border-radius: 12px; background: rgba(0,0,0,.72); transition: transform var(--fast), background var(--fast); }
.yt-play::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-block: 10px solid transparent; border-inline-end: 0; border-left: 17px solid #fff; transform: translateX(3px); }
.yt:hover .yt-play, .yt:focus-visible .yt-play { background: #c4302b; transform: scale(1.08); }
.yt-title { position: absolute; inset-inline: 0; inset-block-start: 0; padding: var(--s3); color: #fff; font: 500 15px/1.5 var(--font-title); text-align: start; background: linear-gradient(rgba(0,0,0,.65), transparent); }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Sign-up box */
.signup-box { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); text-align: center; padding-block: var(--s6) var(--s7); }
.signup-box h2 { font-size: clamp(26px, 5vw, 36px); font-weight: 800; }
.signup { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
.signup-row { display: flex; gap: var(--s2); padding: var(--s1); border: 1px solid var(--line); border-radius: var(--r-input); background: var(--bg); }
.signup-row:focus-within { border-color: var(--accent); }
.signup input { flex: 1; width: 100%; min-width: 0; min-height: 44px; border: 0; background: transparent; color: var(--fg); font: 400 16px/1.4 var(--font-title); padding-inline: var(--s3); text-align: end; }
.signup input:focus { outline: none; }
.signup.invalid .signup-row { border-color: var(--error); }
.btn-accent { min-height: 44px; padding: 0 var(--s5); border: 0; border-radius: var(--r-input); background: var(--accent); color: var(--on-accent); font: 600 15px/1 var(--font-title); cursor: pointer; transition: background var(--fast); }
.btn-accent:hover { background: var(--accent-hover); }
.btn-accent[disabled] { opacity: .6; cursor: progress; }
.signup-msg { margin: 0; min-height: 1.5em; font: 400 14px/1.5 var(--font-title); }
.signup.invalid .signup-msg { color: var(--error); }
.related { padding-block: var(--s6) var(--s8); border-block-start: 1px solid var(--line); }
.related-in-page { margin-block-start: var(--s8); }
.subscribe-dialog { width: min(480px, calc(100% - 32px)); border: 0; border-radius: 12px; padding: var(--s6) var(--s5); background: var(--bg); color: var(--fg); text-align: center; }
.subscribe-dialog::backdrop { background: rgba(0,0,0,.55); }
.subscribe-dialog h2 { font-size: 28px; margin-block-end: var(--s2); }
.subscribe-dialog p { margin-block: 0 var(--s4); font-size: 16px; line-height: 1.8; }
.dialog-close { position: absolute; inset-block-start: var(--s2); inset-inline-end: var(--s2); }
.subscribe-dialog { position: fixed; }
.dialog-logo { display: block; width: 72px; height: 72px; margin: 0 auto var(--s3); }
.signup-text { margin: 0 auto; max-width: 52ch; font-size: 16px; line-height: 1.9; color: var(--muted); }
.signup input { text-align: start; }

/* Search */
.search-form input { width: 100%; min-height: 48px; padding: 0 var(--s4); border: 1px solid var(--line); border-radius: var(--r-input); background: var(--bg); color: var(--fg); font: 400 17px/1.4 var(--font-title); }
.search-form input:focus { border-color: var(--accent); outline: 2px solid var(--gold); outline-offset: 2px; }
.search-status { margin-block: var(--s4); }
.notfound .btn-gold { margin-block-start: var(--s5); }

/* Footer */
.site-foot { background: var(--footer-bg); color: var(--footer-fg); font: 400 14px/1.6 var(--font-title); }
.site-foot .inner { max-width: var(--wide); margin-inline: auto; padding: var(--s7) max(var(--s4), env(safe-area-inset-right, 0px)) var(--s7) max(var(--s4), env(safe-area-inset-left, 0px)); display: grid; justify-items: center; gap: var(--s3); text-align: center; }
.site-foot p { margin: 0; }
.foot-links { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s5); align-items: center; }
.foot-links a { color: var(--footer-muted); text-decoration: none; display: inline-flex; min-height: 32px; align-items: center; }
.foot-links a:hover { color: var(--footer-fg); }

@media (min-width: 900px) { body { font-size: 19px; } }

/* Laptop and wider: post grid as on the old site (Casper) — full-width newest post,
   then two side by side, then three per row. Phones keep the single column. */
.wide { max-width: var(--wide); }
@media (min-width: 768px) {
  .post-list.feed { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 38px var(--s6); }
  .post-list.feed-home > li:first-child { grid-column: 1 / -1; }
  .post-list.feed .item-title { font-size: 26px; }
  .post-list.feed-home > li:first-child .item-title { font-size: 44px; }
}
@media (min-width: 992px) {
  .post-list.feed { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .post-list.feed > li { grid-column: span 2; }
  .post-list.feed-home > li:first-child { grid-column: 1 / -1; }
  .post-list.feed-home > li:nth-child(2), .post-list.feed-home > li:nth-child(3) { grid-column: span 3; }
  .post-list.feed-home > li:nth-child(2) .item-title, .post-list.feed-home > li:nth-child(3) .item-title { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }