:root{
  --ink:#14213D; --lapis:#1F4E79; --teal:#0F7C74; --teal-deep:#0B5F59;
  --gold:#B8862B; --gold-text:#7F5A12; --paper:#F4F7F5; --surface:#FFFFFF;
  --line:#D5DEDA; --muted:#4A5A6A; --text:#14213D; --night:#14213D;
  --display:"Marcellus","Palatino Linotype",Palatino,Georgia,serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --arabic:"Amiri","Traditional Arabic","Noto Naskh Arabic",serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#E9EEF2; --lapis:#8DB4DA; --teal:#4FC1B4; --teal-deep:#7FD6CB;
    --gold:#E0B45A; --gold-text:#E8C47A; --paper:#0E1726; --surface:#15213A;
    --line:#2A3A55; --muted:#A9B7C6; --text:#E9EEF2; --night:#0A1220;
  }
}
:root[data-theme="dark"]{
  --ink:#E9EEF2; --lapis:#8DB4DA; --teal:#4FC1B4; --teal-deep:#7FD6CB;
  --gold:#E0B45A; --gold-text:#E8C47A; --paper:#0E1726; --surface:#15213A;
  --line:#2A3A55; --muted:#A9B7C6; --text:#E9EEF2; --night:#0A1220;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--text);font:400 1.0625rem/1.7 var(--body);overflow-x:hidden;-webkit-tap-highlight-color:transparent}
a{color:var(--teal-deep);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.skip{position:absolute;inset-inline-start:1rem;top:-5rem;background:var(--night);color:#fff;padding:.75rem 1rem;border-radius:8px;z-index:30}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + .75rem)}
.wrap{width:min(1120px,100% - 2.5rem);margin-inline:auto}

header.site{background:var(--night);color:#F4F7F5;border-bottom:1px solid rgba(224,180,90,.25)}
header.site .wrap{display:flex;align-items:center;gap:1rem;min-height:4.25rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:#F4F7F5;font:400 1.3rem/1 "Marcellus",Georgia,serif;margin-inline-end:auto;white-space:nowrap}
.brand svg{width:34px;height:34px;flex:none}
.back{display:inline-flex;align-items:center;min-height:2.75rem;padding:.4rem 1.1rem;border-radius:999px;border:1.5px solid rgba(224,180,90,.55);color:#F4F7F5;text-decoration:none;font-weight:600;font-size:.95rem}
.back:hover{border-color:#E0B45A;color:#E8C47A}
@media (max-width:420px){.brand{font-size:1.12rem}.brand svg{width:30px;height:30px}}

/* Page title band: the arch echoes the calculator's result panel */
.band{background:var(--night);color:#F4F7F5;position:relative;overflow:hidden}
.band::before{content:"";position:absolute;inset:0;opacity:.07;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23E0B45A' stroke-width='1.2'%3E%3Crect x='20' y='20' width='40' height='40'/%3E%3Crect x='20' y='20' width='40' height='40' transform='rotate(45 40 40)'/%3E%3C/g%3E%3C/svg%3E");
  background-size:80px 80px;-webkit-mask-image:linear-gradient(to bottom,#000 30%,transparent);mask-image:linear-gradient(to bottom,#000 30%,transparent)}
.band .wrap{position:relative;padding-block:clamp(2.2rem,6vw,3.8rem) clamp(2.4rem,6vw,3.6rem)}
.band h1{font:400 clamp(2.1rem,6vw,3.3rem)/1.12 var(--display);margin:0 0 .7rem;max-width:18ch}
.band p{margin:0;color:#C9D5DE;max-width:52ch;font-size:clamp(1.02rem,2.2vw,1.15rem)}
.band .updated{margin-top:1rem;font-size:.9rem;color:#98A9B8}

article{padding-block:clamp(2rem,5vw,3.25rem) 3rem}
article .wrap{max-width:720px}
article h2{font:400 1.55rem/1.3 var(--display);color:var(--lapis);margin:2.4rem 0 .6rem}
article h2:first-child{margin-top:0}
article p,article li{max-width:68ch}
article ul{padding-inline-start:1.25rem}
article li{margin-bottom:.45rem}
article li::marker{color:var(--gold)}
.note{border-inline-start:4px solid var(--gold);background:var(--surface);padding:1rem 1.2rem;border-radius:0 14px 14px 0;margin:1.6rem 0}
[dir="rtl"] .note{border-radius:14px 0 0 14px}
.note p{margin:0}
.mail{display:block;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:1.4rem 1.4rem 1.5rem;margin:1.2rem 0 1.8rem;text-decoration:none;color:var(--text)}
.mail small{display:block;color:var(--muted);font-size:.93rem;margin-bottom:.3rem}
.mail b{display:block;font:400 clamp(1.15rem,4.6vw,1.5rem)/1.3 var(--display);color:var(--teal-deep);overflow-wrap:anywhere}
.mail span{display:inline-flex;margin-top:1rem;min-height:3rem;align-items:center;padding:.6rem 1.4rem;border-radius:999px;background:#E0B45A;color:#14213D;font-weight:600}
.ar{font:400 1.45rem/1.9 var(--arabic);color:var(--gold-text);display:block}

footer{background:var(--night);color:#C2CFD9;padding:2.5rem 0 3rem;font-size:.93rem}
footer .brand{margin-bottom:.9rem}
footer p{max-width:70ch;margin:.4rem 0}
footer nav ul{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;list-style:none;padding:0;margin:0 0 1rem}
footer nav a{display:inline-flex;min-height:2.75rem;align-items:center;color:#E8C47A;text-decoration:none;font-weight:600}
footer nav a:hover{text-decoration:underline}
footer nav a[aria-current="page"]{color:#F4F7F5}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}