/* The ad landing pages (/levantine, /classical, /religious) in the website's look: ink on paper, one lapis accent,
   Amiri for Arabic, hairline boxes, and the carved khatam wall behind the page (art.css + art.js).
   Loaded after each page's own stylesheet, so it wins by order; the old tokens are re-pointed rather than renamed. */
:root{
  --cream:#fdfdfc; --cream-2:#f4f4f2; --paper:#ffffff;
  --marble:#141a17; --marble-2:#2a302d; --marble-d:#141a17;
  --ink:#141a17; --ink-2:#3a403c; --muted:#6b716c;
  --gold:#141a17; --gold-d:#6b716c;
  --line:#e4e4e1; --wa:#141a17; --acc:#2b3f8c;
  --shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 1px 2px rgba(20,26,23,.05), 0 10px 28px -18px rgba(20,26,23,.22);
  --f-cal:'Amiri','Traditional Arabic',serif;
}
body{background:var(--cream)}

/* the page is the paper; the sections are see-through so the carving shows in the bands between them */
main{position:relative;isolation:isolate;background:var(--cream)}
main > .ink-paper-page{z-index:-1}
.ink-paper{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}

/* type */
h1,h2,h3{font-weight:500;color:var(--ink)}
.cal{font-family:var(--f-cal);color:var(--ink);font-weight:400}
.eyebrow{color:var(--muted);font-weight:600}

/* buttons: ink or paper with a hairline, 6 px corners, no glow */
.btn{border-radius:6px;font-weight:600}
.btn:hover{transform:none}
.btn:focus-visible{outline:2px solid var(--acc)}
.btn-wa{background:var(--ink);color:var(--cream);box-shadow:none}
.btn-wa:hover{background:#2a302d}
.btn-line{background:var(--paper);color:var(--ink);border:1px solid var(--line)}
.btn-line:hover{border-color:var(--ink)}
.btn-acc{background:var(--ink);color:var(--cream)}

/* header and phone bar: paper glass */
.nav{background:rgba(253,253,252,.9);border-bottom:1px solid var(--line)}
.brand{color:var(--ink)}
.brand img{object-fit:contain;border-radius:0}
.sticky{background:rgba(253,253,252,.95)!important}

/* boxes: hairlines and 8 px corners, matte paper */
.card,.step,.faq details{background:var(--paper);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow)}
.phrase,.note,.root-core,.root-w{background:var(--cream);border-radius:8px}
.proof span,.creds span{background:var(--paper);border-radius:6px}
.portrait img{border-radius:10px;box-shadow:0 18px 40px -28px rgba(20,26,23,.45)}
.portrait figcaption{background:rgba(255,255,255,.94);border-radius:8px}
.teacher img{border-radius:8px}

/* small marks in ink */
.learn li::before{width:6px;height:6px;top:.7em;left:6px;background:var(--ink);opacity:1}
.step .n{background:transparent;color:var(--ink);border:1px solid var(--ink);font-family:'Cormorant Garamond',Georgia,serif;font-weight:600}
.faq summary::after{color:var(--ink)}
.root-core{color:var(--acc)}
h1 em,h2 em{color:var(--acc)}
a{color:var(--ink)}

/* the closing call: paper, not a green block */
.final{background:transparent;color:var(--ink);border-top:1px solid var(--line)}
.final h2,.final .cal{color:var(--ink)}
.final p{color:var(--ink-2)}
.final .btn-line{color:var(--ink);border-color:var(--line)}
.others{color:var(--muted)}.others a{color:var(--ink)}
footer a,footer button{color:var(--ink)}