:root{
  --ink:#12261F; --paper:#FBF9F3; --card:#FFFFFF;
  --green:#0E3B2E; --gold:#B07A22; --dim:#5E6E66;
  --rule:rgba(14,59,46,.14); --sel:rgba(176,122,34,.18);
  --measure:66ch;
}
:root:not([data-theme="light"]){}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#EAE6DB; --paper:#0C1613; --card:#122019;
    --green:#CFE3D6; --gold:#E8B04B; --dim:#9DB0A6;
    --rule:rgba(234,230,219,.16); --sel:rgba(232,176,75,.22);
  }
}
:root[data-theme="dark"]{
  --ink:#EAE6DB; --paper:#0C1613; --card:#122019;
  --green:#CFE3D6; --gold:#E8B04B; --dim:#9DB0A6;
  --rule:rgba(234,230,219,.16); --sel:rgba(232,176,75,.22);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"IBM Plex Serif",Georgia,"Times New Roman",serif;
  font-size:19px; line-height:1.62;
}
body[dir="rtl"]{font-family:"IBM Plex Sans Arabic","Noto Naskh Arabic",Tahoma,sans-serif; line-height:1.9}
::selection{background:var(--sel)}
a{color:inherit; text-underline-offset:.18em; text-decoration-thickness:.06em}
a:hover{text-decoration-color:var(--gold)}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px}

.bar{
  border-bottom:1px solid var(--rule); background:var(--paper);
  position:sticky; top:0; z-index:20;
}
.bar .in{
  max-width:78rem; margin:0 auto; padding:.85rem 1.5rem;
  display:flex; align-items:baseline; gap:1rem; justify-content:space-between;
  font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:.8rem;
}
body[dir="rtl"] .bar .in{font-family:"IBM Plex Sans Arabic",system-ui,sans-serif}
.brand{font-weight:600; letter-spacing:.02em; text-decoration:none}
.brand b{color:var(--gold)}
.bar nav{display:flex; gap:1.1rem; align-items:baseline}
.bar nav a{color:var(--dim); text-decoration:none}
.bar nav a:hover{color:var(--ink)}

main{max-width:78rem; margin:0 auto; padding:0 1.5rem 6rem}

/* index */
.masthead{padding:5rem 0 3rem; border-bottom:1px solid var(--rule)}
.masthead h1{
  font-size:clamp(2.4rem,6vw,4rem); line-height:1.05; margin:0 0 1rem;
  font-weight:600; letter-spacing:-.015em; text-wrap:balance;
}
.masthead p{max-width:var(--measure); color:var(--dim); margin:0 0 .6rem; font-size:1.05rem}
.count{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.75rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin:0 0 1.2rem;
}
body[dir="rtl"] .count{font-family:"IBM Plex Sans Arabic",sans-serif; letter-spacing:0}

.group{padding:3rem 0 0}
.group h2{
  font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:.78rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
  margin:0 0 1.4rem; font-weight:600;
}
body[dir="rtl"] .group h2{font-family:"IBM Plex Sans Arabic",sans-serif; letter-spacing:0; text-transform:none; font-size:.95rem}
.rows{display:grid; gap:0}
.row{
  display:grid; grid-template-columns:1fr auto; gap:1rem 2rem;
  padding:1.35rem 0; border-top:1px solid var(--rule); align-items:start;
}
.row:last-child{border-bottom:1px solid var(--rule)}
.row h3{margin:0 0 .3rem; font-size:1.2rem; font-weight:600; line-height:1.3}
.row h3 a{text-decoration:none}
.row h3 a:hover{text-decoration:underline; text-decoration-color:var(--gold)}
.row p{margin:0; color:var(--dim); font-size:.95rem; max-width:58ch}
.meta{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.72rem;
  color:var(--dim); white-space:nowrap; letter-spacing:.06em; padding-top:.35rem;
}
body[dir="rtl"] .meta{font-family:"IBM Plex Sans Arabic",sans-serif; letter-spacing:0}

/* article */
.wrap{display:grid; grid-template-columns:minmax(0,1fr); gap:3rem; padding-top:3.5rem}
@media(min-width:1080px){ .wrap{grid-template-columns:minmax(0,1fr) 15rem} }
article{max-width:var(--measure)}
.kicker{
  font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:.75rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin:0 0 1rem;
}
body[dir="rtl"] .kicker{font-family:"IBM Plex Sans Arabic",sans-serif; letter-spacing:0; text-transform:none; font-size:.9rem}
article h1{
  font-size:clamp(2rem,4.4vw,3rem); line-height:1.12; margin:0 0 1.1rem;
  font-weight:600; letter-spacing:-.012em; text-wrap:balance;
}
.standfirst{color:var(--dim); font-size:1.12rem; margin:0 0 2.4rem; max-width:60ch}
article h2{
  font-size:1.5rem; margin:2.8rem 0 .9rem; font-weight:600; line-height:1.25;
  text-wrap:balance; scroll-margin-top:5rem;
}
article h3{font-size:1.15rem; margin:2rem 0 .6rem; font-weight:600}
article p{margin:0 0 1.15rem}
article ul,article ol{margin:0 0 1.25rem; padding-inline-start:1.4rem}
article li{margin:0 0 .5rem}
article blockquote{
  margin:1.8rem 0; padding-inline-start:1.2rem;
  border-inline-start:3px solid var(--gold); color:var(--dim); font-style:italic;
}
article strong{font-weight:600}
article table{width:100%; border-collapse:collapse; margin:1.6rem 0; font-size:.92rem}
article th,article td{text-align:start; padding:.6rem .8rem; border-bottom:1px solid var(--rule)}
article th{font-family:"IBM Plex Sans",sans-serif; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--dim)}
.scroller{overflow-x:auto}

.toc{position:sticky; top:5rem; align-self:start; font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:.83rem}
body[dir="rtl"] .toc{font-family:"IBM Plex Sans Arabic",sans-serif}
.toc h4{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); margin:0 0 .8rem; font-weight:600;
}
body[dir="rtl"] .toc h4{letter-spacing:0; text-transform:none; font-size:.85rem}
.toc a{display:block; padding:.32rem 0; color:var(--dim); text-decoration:none; line-height:1.35}
.toc a:hover{color:var(--ink)}
@media(max-width:1079px){ .toc{display:none} }

.faq{margin:3.5rem 0 0; padding-top:2rem; border-top:1px solid var(--rule)}
.faq h2{font-size:1.35rem; margin:0 0 1.2rem}
.faq details{border-bottom:1px solid var(--rule); padding:.9rem 0}
.faq summary{cursor:pointer; font-weight:600; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; float:inline-end; color:var(--gold); font-weight:400}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:.7rem 0 0; color:var(--dim)}

.next{margin:3.5rem 0 0; padding-top:2rem; border-top:1px solid var(--rule)}
.next h2{font-size:1.35rem; margin:0 0 1rem}
.next ul{list-style:none; margin:0; padding:0}
.next li{padding:.55rem 0; border-bottom:1px solid var(--rule)}
.next a{text-decoration:none}
.next a:hover{text-decoration:underline; text-decoration-color:var(--gold)}

.pair{
  margin:2.4rem 0 0; padding:1rem 1.2rem; background:var(--card);
  border:1px solid var(--rule); border-radius:2px;
  font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:.88rem;
}
body[dir="rtl"] .pair{font-family:"IBM Plex Sans Arabic",sans-serif}
.pair span{color:var(--dim); display:block; margin-bottom:.2rem; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase}
body[dir="rtl"] .pair span{letter-spacing:0; text-transform:none}

footer{
  border-top:1px solid var(--rule); margin-top:5rem; padding:2rem 0;
  font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:.8rem; color:var(--dim);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
body[dir="rtl"] footer{font-family:"IBM Plex Sans Arabic",sans-serif}
footer a{color:inherit}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}