/* Layout: a quiet journal. Today's quote beside its painting, a visual theme index,
   then the collection as image cards in a flowing column layout. */
:root{
  --bg:#F2F4F7; --surface:#FFFFFF; --ink:#17223A; --muted:#5A6578; --line:#DADFE7;
  --accent:#9A7130; --accent-soft:#F1E7D5; --night:#0F1728; --danger:#A33A2B;
  --serif:"Newsreader", "Iowan Old Style", Georgia, serif;
  --sans:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --callig:"Aref Ruqaa", "Noto Naskh Arabic", "Geeza Pro", serif;
  --r:12px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0D1422; --surface:#141D2F; --ink:#E7EBF2; --muted:#9AA4B7; --line:#243049;
  --accent:#D8B36E; --accent-soft:#2A2A2C; --night:#0A101C; --danger:#E0806F; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0D1422; --surface:#141D2F; --ink:#E7EBF2; --muted:#9AA4B7; --line:#243049;
  --accent:#D8B36E; --accent-soft:#2A2A2C; --night:#0A101C; --danger:#E0806F; color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:80px}
body{margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 var(--sans); padding-inline:20px; padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%; display:block}
[hidden]{display:none!important}
.wrap{max-width:1120px; margin:0 auto}
a{color:inherit}
button{font:inherit; color:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
.label{font:600 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}

header.top{position:sticky; top:0; z-index:5; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line); margin-inline:-20px; padding:calc(14px + env(safe-area-inset-top,0px)) 20px 14px}
header.top .wrap{display:flex; align-items:center; gap:24px; flex-wrap:wrap}
.mark{font:500 21px/1 var(--serif); letter-spacing:-.01em; text-decoration:none; display:flex; align-items:baseline; gap:8px}
.mark small{font:italic 400 15px var(--serif); color:var(--muted)}
nav.links{display:flex; gap:20px; margin-left:auto; flex-wrap:wrap; align-items:center}
nav.links a{text-decoration:none; font-size:14px; color:var(--muted)}
nav.links a:hover, .navlink:hover{color:var(--ink)}
.navlink{border:0; background:none; padding:0; font-size:14px; color:var(--muted)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:8px 16px; font-size:14px; font-weight:500}
.btn:hover{border-color:var(--accent)}
.btn.solid{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.btn.solid:hover{opacity:.9}
.btn.danger{background:var(--danger); border-color:var(--danger); color:#fff}
.btn.big{padding:13px; font-size:16px; width:100%}
.btn[disabled]{opacity:.55; cursor:progress}
.linkish{border:0; background:none; padding:0; color:var(--muted); text-decoration:underline; text-underline-offset:3px; font-size:13px}

/* intro: who he is */
.intro{display:grid; grid-template-columns:minmax(0,200px) minmax(0,1fr); gap:44px; align-items:center; padding-block:48px 8px}
.portrait{width:100%; max-width:200px; aspect-ratio:3/4; height:auto; object-fit:cover; border-radius:var(--r)}
.intro h1{font:400 clamp(36px, 5vw, 52px)/1.05 var(--serif); margin:0; letter-spacing:-.015em}
.intro .role{margin:10px 0 16px; color:var(--accent); font-weight:600; letter-spacing:.04em; font-size:14px}
.intro p{max-width:62ch; margin:0; font-size:17px}
.intro .stats{margin-top:22px}
.bookintro{margin-top:22px; border-top:1px solid var(--line); padding-top:16px; max-width:62ch}
.bookintro summary{cursor:pointer; font-weight:600; font-size:15px; color:var(--accent); list-style:none}
.bookintro summary::-webkit-details-marker{display:none}
.bookintro summary::after{content:" +"}
.bookintro[open] summary::after{content:" −"}
.bi{display:grid; gap:12px; margin-top:16px; font:italic 400 18px/1.55 var(--serif)}
.bi p{margin:0; font-size:18px}
.bi-basmala{font-style:normal!important; font:600 14px var(--sans)!important; color:var(--muted)}
.bi-sign{font-style:normal; font:500 15px var(--sans)!important}
.bi-sign span{color:var(--muted); font-size:13px}

/* today: the quote sits on its own dimmed painting */
.today{position:relative; margin-block:32px 56px; border-radius:18px; overflow:hidden; background:#0F1728; color:#F3F4F7; min-height:min(560px, 80vh); display:grid; align-items:end; padding:64px clamp(24px, 6vw, 72px) 56px}
.today-text{position:relative; z-index:1; display:grid; gap:26px; min-width:0; max-width:820px}
.meta{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.today .label{color:rgba(243,244,247,.75)}
.meta .dot{width:4px; height:4px; border-radius:50%; background:rgba(243,244,247,.4)}
.today blockquote{margin:0; font:italic 300 clamp(28px, 4.4vw, 52px)/1.2 var(--serif); letter-spacing:-.015em; text-wrap:balance; white-space:pre-line; text-shadow:0 2px 24px rgba(0,0,0,.35)}
.today blockquote::before{content:"“"; display:block; font:400 84px/0.6 var(--serif); color:#D8B36E; margin-bottom:16px}
.sig{font:500 15px var(--sans); display:flex; align-items:center; gap:12px}
.sig::before{content:""; width:28px; height:1px; background:var(--accent)}
.today .sig::before{background:#D8B36E}
.actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.actions.center{justify-content:center}
.today .btn{background:rgba(255,255,255,.1); color:#F3F4F7; border-color:rgba(255,255,255,.3)}
.today .btn.solid{background:#F3F4F7; color:#0F1728; border-color:#F3F4F7}
.today-art{position:absolute; inset:0; margin:0}
.today-art img{width:100%; height:100%; object-fit:cover; opacity:.42; transition:opacity .4s}
.today-art::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(10,16,28,.85), rgba(10,16,28,.1) 70%)}
.callig{position:absolute; right:22px; top:14px; font:400 46px/1.4 var(--callig); color:#fff; opacity:.7; direction:rtl; pointer-events:none; z-index:1}

/* sections */
section.block{padding-block:56px; border-top:1px solid var(--line)}
.head{display:flex; align-items:end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:26px}
h2{font:400 34px/1.1 var(--serif); margin:6px 0 0; letter-spacing:-.01em; text-wrap:balance}

.themes{display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:12px}
@media (max-width:1000px){.themes{grid-template-columns:repeat(4, minmax(0,1fr))}}
@media (max-width:760px){.themes{grid-template-columns:repeat(3, minmax(0,1fr))}}
@media (max-width:520px){.themes{grid-template-columns:repeat(2, minmax(0,1fr))}}
.theme{position:relative; border:0; padding:0; border-radius:var(--r); overflow:hidden; aspect-ratio:4/3; background:var(--night); text-align:left; color:#fff}
.theme img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s}
.theme::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,12,22,.78), rgba(8,12,22,.05) 65%)}
.theme:hover img{transform:scale(1.05)}
.theme .tx{position:absolute; left:14px; right:14px; bottom:10px; z-index:1; display:flex; justify-content:space-between; align-items:end; gap:8px}
.theme b{font:400 19px/1.15 var(--serif); display:block}
.theme small{font-size:12px; opacity:.8; font-variant-numeric:tabular-nums}
.theme .ar{font:400 26px/1 var(--callig); opacity:.9}

.tools{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:14px}
.search{flex:1 1 280px; display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:10px 16px; color:var(--muted)}
.search input{border:0; outline:0; background:transparent; font:inherit; color:var(--ink); width:100%}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px}
.chip{border:1px solid var(--line); background:transparent; border-radius:999px; padding:5px 12px; font-size:13px; color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.count{font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums}

.grid{columns:3 300px; column-gap:20px}
.card{position:relative; break-inside:avoid; margin:0 0 20px; background:#0F1728; color:#F3F4F7; border:0; border-radius:var(--r); overflow:hidden; display:block; cursor:pointer; text-align:left; width:100%; padding:0; isolation:isolate}
.card .art{position:absolute; inset:0; z-index:-1}
.card .art img{width:100%; height:100%; object-fit:cover; opacity:.4; transition:opacity .3s, transform .6s}
.card .art::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(10,16,28,.75), rgba(10,16,28,.15))}
.card:hover .art img{opacity:.5; transform:scale(1.03)}
.card .callig{font-size:30px; right:16px; top:6px}
.card .body{padding:64px 24px 18px; min-height:240px; display:grid; gap:16px; align-content:end}
.card q{quotes:none; font:400 21px/1.42 var(--serif); white-space:pre-line; text-shadow:0 1px 14px rgba(0,0,0,.4)}
.card footer{display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:12px; color:rgba(243,244,247,.7)}
.card .t{color:#D8B36E; font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:11px}
.empty{color:var(--muted); padding:30px 0}
.more{display:flex; justify-content:center; margin-top:10px}

.stats{display:flex; gap:40px; flex-wrap:wrap; margin-top:26px; padding-top:22px; border-top:1px solid var(--line)}
.stats div{display:grid; gap:2px}
.stats b{font:400 34px/1 var(--serif); font-variant-numeric:tabular-nums}
.stats span{font-size:13px; color:var(--muted)}

footer.site{border-top:1px solid var(--line); padding-block:28px 40px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--muted)}

/* dialogs */
dialog{border:0; padding:0; background:var(--surface); color:var(--ink); border-radius:16px; width:min(960px, calc(100vw - 24px)); max-height:calc(100dvh - 24px); box-shadow:0 30px 80px rgba(5,10,25,.35)}
dialog.small{width:min(440px, calc(100vw - 24px))}
dialog::backdrop{background:rgba(8,13,26,.55); backdrop-filter:blur(3px)}
.dlg{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.dlg .l{padding:34px; display:grid; gap:18px; align-content:start; min-width:0}
.dlg .r{background:var(--bg); padding:28px; display:grid; gap:14px; align-content:start; justify-items:center; border-left:1px solid var(--line); min-width:0}
.dlg q{quotes:none; font:italic 400 26px/1.35 var(--serif); white-space:pre-line}
.x{position:absolute; top:10px; right:10px; z-index:2; border:0; background:var(--surface); border-radius:50%; width:36px; height:36px; font-size:22px; line-height:1; color:var(--muted)}
canvas{width:100%; max-width:340px; height:auto; border-radius:8px; box-shadow:0 10px 30px rgba(5,10,25,.25)}
.seg{display:inline-flex; border:1px solid var(--line); border-radius:999px; padding:3px; background:var(--surface)}
.seg button{border:0; background:transparent; padding:5px 14px; border-radius:999px; font-size:13px; color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--ink); color:var(--bg)}
.hint{font-size:12px; color:var(--muted); text-align:center; margin:0}
.hint.err{color:var(--danger)}

.admin{border-top:1px dashed var(--line); padding-top:18px; display:grid; gap:12px}
.field{display:grid; gap:6px; font-size:13px; color:var(--muted)}
textarea, select, input[type=password]{width:100%; font:400 17px/1.45 var(--serif); color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:12px; resize:vertical}
select, input[type=password]{font:500 15px var(--sans)}
.confirm{display:flex; gap:10px; align-items:center; flex-wrap:wrap; background:var(--accent-soft); padding:10px 12px; border-radius:10px; font-size:14px}
.cands{display:flex; gap:8px; flex-wrap:wrap}
.cands button{border:2px solid transparent; padding:0; border-radius:8px; overflow:hidden; width:64px; height:64px; background:var(--night)}
.cands button[aria-pressed="true"]{border-color:var(--accent)}
.cands img{width:100%; height:100%; object-fit:cover}

.form{padding:34px 28px 26px; display:grid; gap:14px}
.form h3{margin:0; font:400 26px var(--serif)}
.form textarea{font-style:italic; font-size:19px}

.toast{position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%) translateY(20px); background:var(--ink); color:var(--bg); padding:10px 18px; border-radius:999px; font-size:14px; opacity:0; transition:.25s; pointer-events:none; z-index:20; max-width:calc(100vw - 32px); text-align:center}
.toast.on{opacity:1; transform:translateX(-50%)}

@media (max-width:760px){
  nav.links a.hide-sm{display:none}
  .today{margin-block:20px 40px; min-height:0; padding:72px 22px 30px}
  .about,.dlg{grid-template-columns:minmax(0,1fr)}
  .intro{grid-template-columns:minmax(0,1fr); gap:20px; padding-top:28px}
  .portrait{max-width:140px}
  .dlg .r{border-left:0; border-top:1px solid var(--line)}
  .dlg .l{padding:30px 20px 22px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; scroll-behavior:auto!important}}

/* quotes still waiting for their own image get a quiet night gradient */
.card .art, .today-art{background:radial-gradient(120% 90% at 85% 0%, #2A3A5C, #0F1728 70%)}