/* Notes — shared stylesheet.
   Light only, by intent: these pages are read in daylight and printed.
   Fonts are served from /notes/assets/fonts and shared across every page. */

@font-face{font-family:'ReemKufi';src:url(fonts/reemkufi-ar.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'AmiriAr';src:url(fonts/amiri-ar-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'AmiriAr';src:url(fonts/amiri-ar-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Spectral';src:url(fonts/spectral-300.woff2) format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Spectral';src:url(fonts/spectral-300i.woff2) format('woff2');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'Spectral';src:url(fonts/spectral-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --paper:#EDEBE2; --card:#F7F6EF; --sink:#E3E1D6;
  --ink:#1A2119; --muted:#5D675C; --faint:#889284;
  --gold:#856320; --gold-soft:#B39450; --teal:#1D5650; --teal-soft:#3F7A72;
  --rule:#CFCBBB; --hair:#DCD9CB;
  --ar:'AmiriAr',"Traditional Arabic",serif;
  --kufi:'ReemKufi','AmiriAr',serif;
  --body:'Spectral',"Iowan Old Style",Georgia,serif;
  --shadow:0 1px 2px rgba(26,33,25,.05),0 12px 34px -22px rgba(26,33,25,.34);
}

*,*::before,*::after{box-sizing:border-box}
img,svg{max-width:100%;height:auto}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-weight:300;font-size:16.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:54rem;margin:0 auto;padding:clamp(1.6rem,5vw,3rem) clamp(1.1rem,5vw,2.5rem) 5rem}
.wrap.narrow{max-width:47rem}
a{color:var(--teal)}

/* ---------- breadcrumb: the only navigation, and it never points at the portfolio root ---------- */
.crumb{
  display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin:0 0 2.4rem;
}
.crumb a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--hair)}
.crumb a:hover{color:var(--ink);border-color:var(--gold-soft)}
.crumb span{color:var(--rule)}

.eyebrow{
  font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:500;color:var(--gold);margin:0;
}
.ar-inline{direction:rtl;unicode-bidi:isolate;font-family:var(--ar);font-size:1.05em}
.eb-ar{font-family:var(--ar);font-size:1.05rem;letter-spacing:0;text-transform:none;vertical-align:-.05em}

header.page{display:flex;flex-direction:column;align-items:center;gap:.8rem;text-align:center}
header.page h1{
  font-family:var(--kufi);direction:rtl;font-weight:400;
  font-size:clamp(1.9rem,6vw,3rem);line-height:1.45;margin:0;text-wrap:balance;
}
header.page h1.latin{font-family:var(--body);direction:ltr;font-weight:300;font-size:clamp(2rem,6vw,3.1rem);line-height:1.2}
.sub{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0;font-weight:500}
.meta{font-size:.82rem;color:var(--faint);margin:0}
.meta a{color:var(--teal);text-decoration:none;border-bottom:1px solid var(--rule)}
.meta a:hover{border-color:var(--teal)}
.blurb{max-width:36rem;font-size:.97rem;line-height:1.72;color:var(--muted);font-style:italic;margin:.4rem 0 0}

section{margin-top:3.4rem}
.sec-head{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;margin-bottom:.45rem}
.sec-head h2{font-family:var(--ar);direction:rtl;font-weight:400;font-size:clamp(1.5rem,4.4vw,2rem);margin:0;line-height:1.5}
.sec-head h2.latin{font-family:var(--body);direction:ltr;font-size:clamp(1.3rem,3.6vw,1.7rem);font-weight:300}
.sec-head .en{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);font-weight:500}
.span-tag{
  font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);
  border:1px solid var(--gold-soft);border-radius:100px;padding:.2rem .6rem;white-space:nowrap;
}
.lede{font-size:.95rem;line-height:1.7;color:var(--muted);margin:0 0 1.8rem;max-width:44rem}

/* ---------- index cards ---------- */
.cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.card{
  display:flex;flex-direction:column;gap:.5rem;text-decoration:none;color:inherit;
  background:var(--card);border-radius:3px;box-shadow:var(--shadow);
  border-top:2px solid var(--gold-soft);padding:1.4rem 1.3rem 1.5rem;
  transition:transform .18s ease,box-shadow .18s ease;
}
.card:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(26,33,25,.06),0 18px 40px -24px rgba(26,33,25,.5)}
.card .k{font-size:.63rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.card .t-ar{direction:rtl;font-family:var(--ar);font-size:1.5rem;line-height:1.6;margin:0}
.card .t{font-size:1.12rem;line-height:1.4;margin:0}
.card p{margin:0;font-size:.92rem;line-height:1.62;color:var(--muted)}
.card .go{margin-top:.3rem;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);font-weight:500}
.card.quiet{border-top-color:var(--rule);opacity:.72}
.card.quiet .go{color:var(--faint)}

/* ---------- generic list rows ---------- */
.rows{display:flex;flex-direction:column}
.row{display:flex;gap:1rem;align-items:baseline;padding:.85rem 0;border-top:1px solid var(--hair)}
.row:last-child{border-bottom:1px solid var(--hair)}
.row .n{font-size:.68rem;color:var(--gold);font-variant-numeric:tabular-nums;flex:0 0 2.2rem}
.row .b{flex:1 1 auto;min-width:0}
.row .b p{margin:0}
.row .ar{direction:rtl;font-family:var(--ar);font-size:1.15rem;line-height:1.8}
.row .en{font-size:.88rem;color:var(--muted);font-style:italic}

footer.page{
  margin-top:3.6rem;padding-top:1.3rem;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.78rem;color:var(--faint);
}
.f-ar{direction:rtl;font-family:var(--ar);font-size:1rem;color:var(--muted)}

@media print{
  body{background:#fff}
  .crumb,.filters,.modes{display:none}
  .card,.track,.arith{box-shadow:none;border:1px solid #ddd}
}
@media (prefers-reduced-motion:no-preference){
  .fade{opacity:0;transform:translateY(9px);animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards}
  @keyframes rise{to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){.card:hover{transform:none}}