/* bandaralhattab.com · concept sprint mockups 2026-10-29 · NOT production CSS */
:root{
  --paper:#F9F0DC; --band:#F2E3C2; --ink:#1D1915; --ink-2:#5C4A3A; --rule:#E4D2AE;
  --rubric:#8E3F18; --rubric-on-ink:#F0A06A; --on-ink:#F9F0DC;
  --display:"Amiri",serif; --body:"Noto Naskh Arabic","Amiri",serif; --label:"Noto Kufi Arabic",sans-serif;
  --latin:"Amiri","Georgia",serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper)}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:19.5px;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)}
.wrap{max-width:var(--wrap,62rem);margin-inline:auto;padding-inline:2.5rem}
.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:.75;margin-inline-start:.35em;vertical-align:super;line-height:0;white-space:nowrap}
.draft::before{content:"· "}
/* mock banner */
.mockbar{background:var(--ink);color:var(--on-ink);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{border-bottom:1px solid var(--rule)}
.site-head .wrap{display:flex;align-items:baseline;justify-content:space-between;gap:2rem;padding-block:1.6rem}
.brand{font-family:var(--display);font-weight:700;font-size:1.6rem;line-height:1.2}
.brand small{display:block;font-family:var(--latin);font-weight:400;font-size:.8rem;color:var(--ink-2);letter-spacing:.02em}
.nav{display:flex;gap:2rem;align-items:baseline;font-family:var(--label);font-size:14px;font-weight:500}
.nav a[aria-current]{color:var(--rubric)}
.nav .lang{font-family:var(--latin);font-size:15px;color:var(--ink-2);padding-inline-start:1.5rem;border-inline-start:1px solid var(--rule)}
/* rows (titles + dek + year) */
.rows{list-style:none}
.row{display:grid;grid-template-columns:1fr auto;column-gap:2rem;padding-block:1.05rem;border-bottom:1px solid var(--rule)}
.row:first-child{border-top:1px solid var(--rule)}
.row .t{font-family:var(--display);font-weight:700;font-size:1.35rem;line-height:1.5}
.row .d{grid-column:1;color:var(--ink-2);font-size:1rem;line-height:1.8;margin-top:.15rem}
.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}
.more{display:inline-block;font-family:var(--label);font-weight:600;font-size:14px;color:var(--rubric);margin-top:1.6rem;border-bottom:1px solid var(--rubric);padding-bottom:.1rem}
.sec-title{font-family:var(--label);font-size:14px;font-weight:600;color:var(--rubric);margin-bottom:1.4rem}
/* footer */
.site-foot{background:var(--ink);color:var(--on-ink);margin-top:0}
.site-foot .wrap{padding-block:2.6rem;display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;font-family:var(--label);font-size:13px;line-height:2}
.site-foot a{color:var(--rubric-on-ink)}
.site-foot .fname{font-family:var(--display);font-size:1.3rem;font-weight:700;color:var(--on-ink)}
.site-foot .links{display:flex;gap:1.6rem;flex-wrap:wrap}
/* newsletter line */
.nl{display:flex;gap:1rem;align-items:baseline;flex-wrap:wrap}
.nl input{font-family:var(--latin);font-size:1rem;background:transparent;border:0;border-bottom:1px solid var(--ink-2);padding:.3rem 0;min-width:16rem;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:.55rem 1.3rem;cursor:pointer}
/* style C cover placeholder */
.cover-ph{background:var(--band);aspect-ratio:2/3;display:flex;align-items:flex-end;justify-content:center;padding:1rem;font-family:var(--label);font-size:12px;color:var(--ink-2);background-image:repeating-linear-gradient(135deg,transparent 0 7px,rgba(92,74,58,.07) 7px 8px)}
/* essay */
.essay{--measure:40rem}
.essay-head,.essay-body,.essay-end{max-width:var(--measure);margin-inline:auto}
.essay-head{padding-top:5.5rem;padding-bottom:2.5rem}
.essay-head h1{font-family:var(--display);font-weight:700;font-size:3.4rem;line-height:1.35;margin:.6rem 0 1rem}
.essay-head .dek{font-size:1.2rem;color:var(--ink-2);line-height:1.85}
.essay-head .meta{margin-top:1.6rem;display:flex;gap:1.4rem;flex-wrap:wrap}
.essay-body{border-top:1px solid var(--rule);padding-top:2.6rem}
.essay-body p{margin-bottom:1.35em}
.essay-body h2{font-family:var(--display);font-weight:700;font-size:1.6rem;margin:2rem 0 .8rem}
.essay-body .excerpt-note{font-family:var(--label);font-size:12px;color:var(--ink-2);border-top:1px solid var(--rule);padding-top:1rem;margin-top:2rem}
@media (max-width:760px){
  body{font-size:19px;line-height:1.9}
  .wrap{padding-inline:1.25rem}
  .site-head .wrap{flex-direction:column;gap:.7rem;padding-block:1.1rem}
  .nav{gap:1.15rem;font-size:13px;flex-wrap:wrap}
  .nav .lang{padding-inline-start:1rem}
  .row{column-gap:1rem}
  .row .t{font-size:1.18rem}
  .row .d{font-size:.95rem}
  .essay-head{padding-top:2.8rem}
  .essay-head h1{font-size:2.3rem}
  .nl input{min-width:0;flex:1 1 12rem}
}

.whisper{margin-top:1.25rem;font-family:var(--label);font-size:12px;font-weight:400;color:var(--ink-2);letter-spacing:0;}