/* darijavibes.com - Zellij Modern (see .claude/DESIGN-PERSONA.md):
   plaster grounds, tile structure, brass accents. Chamfered, never rounded;
   grout hairlines, never shadows. */
:root{
  --ground:#FCF9F2; --panel:#F8F3E8; --paper:#FFFDF8;
  --grout:#E2D9C6; --border:#D8CEBB;
  --ink:#2E2A24; --ink-2:#6E6457; --muted:#8A8071;
  --teal:#17727B; --mint:#2E7D57; --saffron:#B97E14;
  --majorelle:#4A50C4; --clay:#A9552F;
  --lvl:var(--majorelle);
}
[data-level="A0"]{--lvl:var(--teal)} [data-level="A1"]{--lvl:var(--mint)} [data-level="A2"]{--lvl:var(--saffron)}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);
  font:16px/1.55 "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  -webkit-text-size-adjust:100%}
.wrap{max-width:760px;margin:0 auto;padding:0 18px 72px}
header.top{background:var(--panel);border-bottom:1px solid var(--grout)}
header.top .wrap{padding-top:22px;padding-bottom:18px}
.eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  font-family:system-ui,-apple-system,sans-serif}
h1{margin:.28em 0 .1em;font-size:1.85rem;line-height:1.15}
h2{margin:2.1em 0 .5em;font-size:1.2rem}
h2 .orn{color:var(--lvl);margin-right:.4em}
.sub{color:var(--ink-2);margin:.2em 0 0}
.rule{height:2px;position:relative;background:var(--grout);margin:.55em 0 0}
.rule::before{content:"";position:absolute;left:0;top:0;height:2px;width:3.2em;background:var(--lvl)}
.tag{display:inline-block;padding:3px 11px;background:var(--lvl);color:#fff;font-size:11px;
  font-weight:700;letter-spacing:.09em;font-family:system-ui,-apple-system,sans-serif;
  clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px)}
.note{background:var(--panel);border:1px solid var(--grout);border-left:3px solid var(--saffron);
  padding:12px 14px;margin:1.4em 0;font-size:.9rem;color:var(--ink-2)}
ol.tracks{list-style:none;margin:.6em 0 0;padding:0;border:1px solid var(--border);background:var(--paper)}
ol.tracks li{display:flex;gap:12px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--grout)}
ol.tracks li:last-child{border-bottom:0}
ol.tracks li.playing{background:#F3EEE0}
.play{flex:0 0 auto;width:34px;height:34px;border:1px solid var(--lvl);background:var(--paper);
  color:var(--lvl);cursor:pointer;font-size:13px;line-height:1;display:grid;place-items:center;
  clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px)}
.play:hover{background:var(--lvl);color:#fff}
.play[aria-pressed="true"]{background:var(--lvl);color:#fff}
.txt{min-width:0;flex:1}
.dar{font-weight:600;overflow-wrap:anywhere}
.ar{font-size:1.12rem;color:var(--ink-2);direction:rtl;unicode-bidi:isolate;
  font-family:"Amiri","Geeza Pro","Noto Naskh Arabic",serif}
.en{font-size:.85rem;color:var(--muted)}
.who{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--lvl);
  font-family:system-ui,-apple-system,sans-serif;font-weight:700}
.scene{margin:.35em 0 .1em;font-size:.92rem;color:var(--ink-2);font-style:italic}
.playall{margin:.9em 0 0;padding:9px 16px;border:1px solid var(--lvl);background:var(--lvl);color:#fff;
  font:inherit;font-size:.9rem;cursor:pointer;
  clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px)}
.units{list-style:none;padding:0;margin:1em 0 0}
.units li{border:1px solid var(--border);background:var(--paper);margin-bottom:8px}
.units a{display:flex;gap:14px;align-items:baseline;padding:13px 15px;text-decoration:none;color:inherit}
.units a:hover{background:var(--panel)}
.units .id{font-weight:700;color:var(--lvl);min-width:4.5em;font-size:.9rem}
.units .n{font-size:.78rem;color:var(--muted);margin-left:auto;white-space:nowrap}
footer{margin-top:44px;padding-top:16px;border-top:1px solid var(--grout);
  font-size:.8rem;color:var(--muted)}
a{color:var(--majorelle)}
@media (prefers-color-scheme:dark){
  :root{--ground:#191713;--panel:#221F1A;--paper:#26221C;--grout:#3A342B;--border:#443D32;
        --ink:#F2EADA;--ink-2:#C9BEA9;--muted:#9A8F7C;--teal:#4FA9B2;--mint:#5FB287;
        --saffron:#D8A33F;--majorelle:#8D91E8;--clay:#C97B54}
  ol.tracks li.playing{background:#2C2820}
}