/* حكايا · public identity site · one stylesheet for every page
   CSP-safe: no inline style, no <style>, no inline script anywhere · fonts are local · SVG colours live in fill= attributes
   identity from the «قريباً» page: paper, navy ink, IBM Plex Sans Arabic 400/700 · the orange is for the main button only
   the one bold thing: the hero strip, a voice wave that widens into pictures, drawn once on load */

@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 400; font-display: swap; src: url("fonts/plex-arabic-400-arabic.c094b91f8db8.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-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: "IBM Plex Sans Arabic"; font-weight: 400; font-display: swap; src: url("fonts/plex-arabic-400-latin.eadb12e578b8.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; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 700; font-display: swap; src: url("fonts/plex-arabic-700-arabic.89e0f9b275a9.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-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: "IBM Plex Sans Arabic"; font-weight: 700; font-display: swap; src: url("fonts/plex-arabic-700-latin.c6a7b569b1c3.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; }

:root {
  color-scheme: light;
  --paper: #FBFAF7; --card: #FFFFFF; --ink: #12122B; --soft: #585868; --line: #E7E3DA; --mist: #F3F0EA;
  --accent: #B5532B;
  --pad: 20px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { background: var(--paper); color: var(--ink); font-size: 17px; line-height: 1.8;
  font-family: "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "SF Arabic", "Segoe UI", Tahoma, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-underline-offset: 5px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
svg { display: block; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: 8px; z-index: 5; }
.skip:focus { top: 12px; }
.ltr { direction: ltr; unicode-bidi: isolate; }

.wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--pad); }

/* ── header ─────────────────────────────────────────── */
.bar { border-bottom: 1px solid var(--line); }
.bar .wrap { display: flex; align-items: center; gap: 20px; min-height: 68px; flex-wrap: wrap; }
.mark { font-weight: 700; font-size: 28px; line-height: 1; text-decoration: none; padding-block: 6px; }
.nav { margin-inline-start: auto; }
.nav ul { display: flex; gap: 18px; font-size: 15px; }
.nav a { color: var(--soft); text-decoration: none; padding-block: 6px; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--ink); }

/* ── type ───────────────────────────────────────────── */
h1 { font-size: clamp(34px, 7.4vw, 68px); line-height: 1.18; font-weight: 700; letter-spacing: -0.01em; max-width: 14em; }
h2 { font-size: clamp(24px, 3.6vw, 34px); line-height: 1.35; font-weight: 700; }
h3 { font-size: 19px; line-height: 1.5; font-weight: 700; }
.lead { font-size: clamp(18px, 2.4vw, 21px); color: var(--soft); max-width: 32em; margin-top: 18px; }
.prose p, .prose li { max-width: 36em; }
.prose p + p { margin-top: 14px; }
.soft { color: var(--soft); }
.small { font-size: 15px; }
.tiny { font-size: 14px; color: var(--soft); }

/* ── buttons ────────────────────────────────────────── */
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 10px 26px; border-radius: 999px;
  font: inherit; font-size: 16px; font-weight: 700; text-decoration: none; cursor: pointer; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); }
.btn:hover { background: var(--mist); }
.btn.main { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.btn.main:hover { background: #9E4724; border-color: #9E4724; }

/* ── page sections ──────────────────────────────────── */
main { display: block; }
.sec { padding-block: 56px; }
.sec + .sec { border-top: 1px solid var(--line); }
.sec.band { background: var(--mist); border-top: 0; }
.sec.band + .sec { border-top: 0; }

/* hero */
.hero { padding-block: 44px 8px; }
.strip { width: 100%; height: auto; margin-top: 44px; }
@media (prefers-reduced-motion: no-preference) {
  .strip { animation: tell 1.8s cubic-bezier(.3, .7, .2, 1) .25s both; }
}
@keyframes tell { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }

/* why the name: heading on one side, the saying on the other */
.why { display: grid; gap: 20px; }
.saying { font-size: clamp(24px, 3.4vw, 32px); line-height: 1.5; font-weight: 700; max-width: 18em; }

/* what we do: two crafts side by side, each opened by a thick rule */
.crafts { display: grid; gap: 32px; margin-top: 28px; }
.craft { border-top: 3px solid var(--ink); padding-top: 22px; }
.craft svg { width: 44px; height: 44px; margin-bottom: 14px; }
.craft p { color: var(--soft); margin-top: 8px; max-width: 30em; }
.later { margin-top: 30px; }

/* principles on the mist band */
.principles { display: grid; gap: 34px; margin-top: 28px; }
.principle h3 { font-size: clamp(21px, 2.6vw, 26px); }
.principle p { color: var(--soft); margin-top: 8px; max-width: 30em; }

/* forms */
.signup { display: grid; gap: 28px; align-items: start; }
.form { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 24px; display: grid; gap: 20px; }
.field { display: grid; gap: 8px; }
.field label, .form legend { font-weight: 700; font-size: 15px; }
.input { width: 100%; min-height: 50px; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
.input::placeholder { color: #8A8A96; }
textarea.input { min-height: 150px; resize: vertical; line-height: 1.7; }
fieldset { border: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 20px; border: 1.5px solid var(--line); border-radius: 999px; cursor: pointer; background: var(--paper); }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.form .btn { justify-self: start; }
.form .tiny a { color: var(--ink); }
.done { background: var(--mist); border-radius: 12px; padding: 14px 16px; font-weight: 700; }
.done[hidden] { display: none; }
.err { color: #9A3B1E; font-size: 15px; }
.err[hidden] { display: none; }

/* article lists */
.posts { margin-top: 12px; }
.posts li { border-bottom: 1px solid var(--line); }
.posts a { display: block; padding-block: 22px; text-decoration: none; }
.posts a:hover h3, .posts a:hover h2 { text-decoration: underline; text-underline-offset: 6px; }
.posts p { color: var(--soft); margin-top: 6px; max-width: 36em; }
.meta { font-size: 14px; color: var(--soft); display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; }
.more { display: inline-block; margin-top: 22px; font-weight: 700; }

/* page head for inner pages */
.head { padding-block: 44px 36px; border-bottom: 1px solid var(--line); }
.head h1 { font-size: clamp(32px, 6vw, 54px); }

/* about: the way we work is a real sequence, so it is numbered */
.steps { counter-reset: step; display: grid; gap: 26px; margin-top: 24px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 52px 1fr; gap: 4px 16px; }
.steps li::before { content: counter(step, arabic-indic); grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ink);
  display: grid; place-items: center; font-weight: 700; font-size: 18px; }
.steps p { color: var(--soft); max-width: 32em; }
.beliefs { display: grid; gap: 22px; margin-top: 24px; }
.beliefs li { border-inline-start: 3px solid var(--ink); padding-inline-start: 18px; }
.beliefs p { color: var(--soft); margin-top: 4px; max-width: 32em; }

/* contact */
.mail { display: grid; gap: 6px; }
.mail a { font-size: clamp(20px, 3vw, 26px); font-weight: 700; }

/* single article */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--soft); }
.crumbs li + li::before { content: "‹"; margin-inline-end: 6px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.article { padding-block: 40px 64px; }
.article header { max-width: 40em; }
.article h1 { font-size: clamp(32px, 5.6vw, 52px); margin-top: 22px; }
.article .meta { font-size: 15px; margin-top: 14px; }
.body { margin-top: 36px; font-size: 18px; line-height: 1.95; }
.body > * { max-width: 34em; }
.body p + p { margin-top: 16px; }
.body h2 { font-size: clamp(22px, 3vw, 27px); margin-top: 40px; margin-bottom: 10px; }
.body .open { font-size: clamp(20px, 2.6vw, 23px); line-height: 1.8; color: var(--ink); }
.body .close { margin-top: 40px; padding-top: 22px; border-top: 3px solid var(--ink); font-weight: 700; }
.next { border-top: 1px solid var(--line); padding-top: 26px; margin-top: 56px; max-width: 34em; }

/* legal pages: a contents list beside a long, calm column */
.legal { display: grid; gap: 34px; padding-block: 40px 72px; }
.toc { font-size: 15px; }
.toc h2 { font-size: 15px; color: var(--soft); margin-bottom: 10px; }
.toc ol { display: grid; gap: 6px; counter-reset: toc; }
.toc li { counter-increment: toc; display: flex; gap: 10px; }
.toc li::before { content: counter(toc, arabic-indic); color: var(--soft); min-width: 1.2em; }
.toc a { text-decoration: none; color: var(--soft); }
.toc a:hover { color: var(--ink); text-decoration: underline; }
.terms { counter-reset: part; }
.terms section { counter-increment: part; padding-top: 30px; scroll-margin-top: 20px; }
.terms section:first-child { padding-top: 0; }
.terms h2 { font-size: clamp(21px, 2.8vw, 25px); display: flex; gap: 12px; }
.terms h2::before { content: counter(part, arabic-indic); color: var(--soft); font-weight: 400; }
.terms p, .terms li { max-width: 36em; color: #2A2A40; }
.terms p { margin-top: 10px; }
.terms ul { margin-top: 10px; display: grid; gap: 6px; }
.terms li { padding-inline-start: 18px; position: relative; }
.terms li::before { content: ""; position: absolute; inset-inline-start: 0; top: .8em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.updated { font-size: 15px; color: var(--soft); margin-top: 12px; }

/* 404 */
.lost { padding-block: 72px 96px; }
.lost svg { width: min(100%, 520px); height: auto; margin-bottom: 36px; }

/* ── footer ─────────────────────────────────────────── */
.foot { border-top: 1px solid var(--line); padding-block: 40px 28px; }
.foot .wrap { display: grid; gap: 26px; }
.foot .mark { font-size: 26px; }
.foot p { color: var(--soft); margin-top: 8px; font-size: 15px; }
.foot ul { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 15px; }
.foot ul a { color: var(--soft); text-decoration: none; }
.foot ul a:hover { color: var(--ink); text-decoration: underline; }
.foot .copy { font-size: 13px; color: var(--soft); border-top: 1px solid var(--line); padding-top: 18px; }

/* ── wider screens ──────────────────────────────────── */
@media (min-width: 760px) {
  :root { --pad: 36px; }
  body { font-size: 18px; }
  .nav ul { gap: 26px; }
  .hero { padding-block: 72px 12px; }
  .sec { padding-block: 84px; }
  .why { grid-template-columns: 4fr 7fr; gap: 48px; }
  .crafts { grid-template-columns: 1fr 1fr; gap: 48px; }
  .principles { grid-template-columns: 1fr 1fr; gap: 0; }
  .principle + .principle { border-inline-start: 1px solid #DCD7CB; padding-inline-start: 48px; }
  .principle:first-child { padding-inline-end: 48px; }
  .signup { grid-template-columns: 5fr 6fr; gap: 56px; }
  .form { padding: 32px; }
  .head { padding-block: 72px 48px; }
  .article { padding-block: 56px 96px; }
  .legal { grid-template-columns: 240px 1fr; gap: 64px; padding-block: 56px 96px; }
  .toc { position: sticky; top: 24px; align-self: start; }
  .foot .wrap { grid-template-columns: 1fr auto; align-items: start; }
  .foot .copy { grid-column: 1 / -1; }
  .lost { padding-block: 110px 140px; }
}

/* ── the Django side · added by the hakaaya tab when the prototype moved in, 2026-11-14 */
.body > p:first-child { font-size: clamp(20px, 2.6vw, 23px); line-height: 1.8; color: var(--ink); }
.body h3 { font-size: 20px; margin-top: 28px; margin-bottom: 8px; }
.body ul, .body ol { margin-top: 12px; display: grid; gap: 8px; padding-inline-start: 22px; }
.body li::marker { color: var(--ink); }
.body p + ul, .body p + ol, .body ul + p, .body ol + p { margin-top: 14px; }
.body a, .terms a { text-decoration: underline; text-underline-offset: 3px; }
.trap { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.msgs { list-style: none; padding: 0; margin: 0 0 18px; }
.msgs li { border-radius: 12px; padding: 14px 16px; background: var(--mist); font-weight: 700; }
.msgs li.error { background: #FBEDE7; color: #9A3B1E; }
.err ul { list-style: none; padding: 0; margin: 4px 0 0; }
.next .more { display: block; width: fit-content; }
.next .more + .more { margin-top: 12px; }