/* bandaralhattab.com · Concept B · execute (C craft folded in, Sun Paper) · mock 2026-10-29 · NOT production CSS · linked only by B-execute pages */
:root{
  /* Sun Paper (ورق الشمس) · exact locked study tokens, palette-brighter/src/palettes.py O1 */
  --paper:#FFF8E8; --paper-hi:#FFFDF6; --band:#F3E4C4; --band-2:#EAD6AE;
  --ink:#1A1511; --ink-2:#5E4836; --umber:#3B2A1F; --rule:#E6D3A9; --rule-ink:#4A3B2D;
  --night:#2A2218; --night-2:#352A1E;
  --rubric:#A84418; --rubric-deep:#8A3A14; --rubric-on-ink:#F2A877; --on-ink:#FFF8E8; --on-ink-2:#D8C6A6;
  --display:"Amiri",serif; --body:"Noto Naskh Arabic","Amiri",serif; --label:"Noto Kufi Arabic",sans-serif; --latin:"Amiri","Georgia",serif;
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .36  0 0 0 0 .26  0 0 0 0 .16  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.22'/></svg>");
  --fiber:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.004 .09' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .32  0 0 0 0 .18  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23f)' opacity='.07'/></svg>");
  --grain-night:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .95  0 0 0 0 .85  0 0 0 0 .7  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.09'/></svg>");
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper)}
body{background-color:var(--paper);background-image:var(--grain),var(--fiber),radial-gradient(120% 80% at 50% 0%,var(--paper-hi) 0,transparent 60%);color:var(--ink);font-family:var(--body);font-size:20px;line-height:1.95;text-align:start;font-variant-numeric:lining-nums;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:hover{color:var(--rubric)}
:lang(en){font-family:var(--latin)}
h1,h2,h3{text-wrap:balance} p{text-wrap:pretty}
img{display:block;max-width:100%}
.wrap{max-width:var(--wrap,80rem);margin-inline:auto;padding-inline:3rem}
.label{font-family:var(--label);font-size:13px;line-height:1.6;color:var(--ink-2);font-weight:500}
.rubric{color:var(--rubric)}
.draft{font-family:var(--label);font-size:10px;font-weight:500;color:var(--rubric);opacity:.8;margin-inline-start:.35em;vertical-align:super;line-height:0;white-space:nowrap;letter-spacing:0}
.draft::before{content:"· "}
.night .draft{color:var(--rubric-on-ink)}
/* rules */
.rule2{height:4px;border-top:1px solid var(--ink);border-bottom:.5px solid var(--ink);opacity:.9}
.lozenge{display:inline-block;width:.5em;height:.5em;background:var(--rubric);transform:rotate(45deg);vertical-align:middle}
/* plate: etched cover in UI */
.plate{display:block;position:relative;background:var(--band);overflow:hidden}
.plate img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;filter:none}
.plate::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(26,21,17,.55),inset 0 0 0 5px var(--paper),inset 0 0 0 5.5px rgba(26,21,17,.35);pointer-events:none}
.night .plate{background:var(--paper)}
.night .plate::after{box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)}
/* mock banner */
.mockbar{background:var(--night);color:var(--on-ink-2);font-family:var(--label);font-size:12px;line-height:1.6;padding:.45rem 0}
.mockbar .wrap{display:flex;gap:1.25rem;flex-wrap:wrap;justify-content:space-between}
.mockbar a{color:var(--rubric-on-ink)}
/* header */
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding-block:1.7rem 1.5rem}
.site-head .rule2{max-width:var(--wrap,80rem);margin-inline:auto;width:calc(100% - 6rem)}
.brand{font-family:var(--display);font-weight:700;font-size:2rem;line-height:1.15;display:flex;align-items:baseline;gap:.8rem}
.brand small{font-family:var(--latin);font-weight:400;font-size:.95rem;color:var(--ink-2);letter-spacing:.06em}
.nav{display:flex;gap:2.4rem;align-items:baseline;font-family:var(--label);font-size:15px;font-weight:500}
.nav a[aria-current]{color:var(--rubric);box-shadow:0 2px 0 var(--rubric)}
.nav .lang{font-family:var(--latin);font-size:16px;color:var(--ink-2);padding-inline-start:1.6rem;border-inline-start:1px solid var(--rule)}
/* rows */
.rows{list-style:none}
.row{display:grid;grid-template-columns:1fr auto;column-gap:2rem;padding-block:1.15rem;border-bottom:1px solid var(--rule)}
.row .t{font-family:var(--display);font-weight:700;font-size:1.5rem;line-height:1.5}
.row .d{grid-column:1;color:var(--ink-2);font-size:1.02rem;line-height:1.8;margin-top:.1rem}
.row .y{grid-column:2;grid-row:1;font-family:var(--label);font-size:13px;color:var(--ink-2);align-self:baseline}
.row[lang=en] .t{font-family:var(--latin);font-weight:700}
.row[lang=en] .d{font-family:var(--latin);font-size:1.05rem}
/* footer */
.site-foot{background-color:var(--night);background-image:var(--grain-night);color:var(--on-ink)}
.site-foot .wrap{padding-block:4.2rem 2.4rem}
.site-foot .top{display:grid;grid-template-columns:1fr auto;gap:3rem;align-items:end;padding-bottom:2.2rem;border-bottom:1px solid var(--rule-ink)}
.site-foot .fname{font-family:var(--display);font-size:3.4rem;line-height:1.2;font-weight:700}
.site-foot .fname small{display:block;font-family:var(--latin);font-weight:400;font-size:1rem;color:var(--on-ink-2);letter-spacing:.08em;margin-top:.3rem}
.site-foot .line{font-size:1.05rem;color:var(--on-ink-2);max-width:34rem;margin-top:1rem}
.site-foot .links{display:flex;gap:1.8rem;flex-wrap:wrap;font-family:var(--label);font-size:14px}
.site-foot a{color:var(--rubric-on-ink)}
.site-foot .base{display:flex;justify-content:space-between;padding-top:1.4rem;font-family:var(--label);font-size:12px;color:var(--on-ink-2)}
.site-foot .lozenge{background:var(--rubric-on-ink)}
/* newsletter */
.nl{display:flex;gap:1rem;align-items:baseline;flex-wrap:wrap}
.nl input{font-family:var(--latin);font-size:1.05rem;background:transparent;border:0;border-bottom:1px solid var(--ink);padding:.35rem 0;min-width:18rem;color:var(--ink);direction:ltr;text-align:left;border-radius:0}
.nl button{font-family:var(--label);font-size:14px;font-weight:600;background:var(--ink);color:var(--on-ink);border:0;border-radius:0;padding:.6rem 1.5rem;cursor:pointer;box-shadow:inset 0 0 0 1px var(--ink),inset 0 0 0 3px var(--paper),inset 0 0 0 3.5px var(--ink)}
.night .nl input{border-color:var(--on-ink-2);color:var(--on-ink)}
@media (max-width:760px){
  body{font-size:19px;line-height:1.9}
  .wrap{padding-inline:1.25rem}
  .site-head .rule2{width:calc(100% - 2.5rem)}
  .site-head .wrap{flex-direction:column;align-items:flex-start;gap:.8rem;padding-block:1.2rem 1rem}
  .brand{font-size:1.75rem}
  .nav{gap:1.2rem;font-size:14px;flex-wrap:wrap}
  .nav .lang{padding-inline-start:1rem}
  .row{column-gap:1rem}
  .row .t{font-size:1.25rem}
  .row .d{font-size:.98rem}
  .nl input{min-width:0;flex:1 1 12rem}
  .site-foot .top{grid-template-columns:1fr;gap:1.6rem}
  .site-foot .fname{font-size:2.4rem}
  .site-foot .base{flex-direction:column;gap:.4rem}
}