/* ── Thmanyah fonts (self-hosted) ── */
@font-face { font-family:'Display'; font-weight:700; font-display:swap; src:url('/assets/fonts/thmanyahserifdisplay-Bold.woff2') format('woff2'); }
@font-face { font-family:'Display'; font-weight:500; font-display:swap; src:url('/assets/fonts/thmanyahserifdisplay-Medium.woff2') format('woff2'); }
@font-face { font-family:'Display'; font-weight:400; font-display:swap; src:url('/assets/fonts/thmanyahserifdisplay-Regular.woff2') format('woff2'); }
@font-face { font-family:'Text'; font-weight:700; font-display:swap; src:url('/assets/fonts/thmanyahseriftext-Bold.woff2') format('woff2'); }
@font-face { font-family:'Text'; font-weight:400; font-display:swap; src:url('/assets/fonts/thmanyahseriftext-Regular.woff2') format('woff2'); }
@font-face { font-family:'Text'; font-weight:300; font-display:swap; src:url('/assets/fonts/thmanyahseriftext-Light.woff2') format('woff2'); }
@font-face { font-family:'Sans'; font-weight:500; font-display:swap; src:url('/assets/fonts/thmanyahsans-Medium.woff2') format('woff2'); }
@font-face { font-family:'Sans'; font-weight:400; font-display:swap; src:url('/assets/fonts/thmanyahsans-Regular.woff2') format('woff2'); }

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

:root {
  --bg:#15110D; --fg:#E8DCC4; --accent:#C8552E;
  --muted:rgba(232,220,196,.4); --faint:rgba(232,220,196,.62);
  --border:rgba(232,220,196,.1); --card:rgba(232,220,196,.022); --hover:rgba(232,220,196,.06);
  --fd:'Display',Georgia,serif; --ft:'Text',Georgia,serif; --fs:'Sans',system-ui,sans-serif;
}
:root.light {
  --bg:#F2E9D8; --fg:#2B1F18; --muted:rgba(43,31,24,.42); --faint:rgba(43,31,24,.66);
  --border:rgba(43,31,24,.11); --card:rgba(43,31,24,.025); --hover:rgba(43,31,24,.05);
}
html { background:var(--bg); color:var(--fg); transition:background .24s,color .24s; }
body { font-family:var(--ft); min-height:100vh; background:var(--bg); -webkit-font-smoothing:antialiased; }
a { color:inherit; }

/* ── Header ── */
header { position:sticky; top:0; z-index:10; background:var(--bg); border-bottom:1px solid var(--border); height:58px; padding:0 28px; display:flex; align-items:center; justify-content:space-between; transition:background .24s,border-color .24s; }
.logo { font-family:var(--fs); font-size:19.5px; font-weight:600; color:var(--accent); text-decoration:none; transition:opacity .18s; } .logo:hover { opacity:.78; }
.h-right { display:flex; align-items:center; gap:22px; }
.h-btn { background:none; border:none; cursor:pointer; font-family:var(--fs); font-size:18px; font-weight:600; color:var(--accent); letter-spacing:.04em; transition:color .18s,opacity .18s; padding:4px 0; }
.h-btn:hover { color:var(--accent); opacity:.78; }

/* ── Menu overlay ── */
.menu { position:fixed; inset:0; z-index:100; background:var(--bg); display:flex; flex-direction:column; justify-content:center; padding:0 clamp(28px,8vw,90px); opacity:0; visibility:hidden; transition:opacity .32s ease,visibility .32s; }
.menu.open { opacity:1; visibility:visible; }
.menu-close { position:absolute; top:16px; left:28px; background:none; border:none; cursor:pointer; font-family:var(--fs); font-size:12px; color:var(--muted); letter-spacing:.06em; transition:color .18s; }
.menu-close:hover { color:var(--fg); }
.menu-mark { position:absolute; top:17px; right:28px; font-family:var(--fs); font-size:13px; color:var(--fg); }
.menu-nav { display:flex; flex-direction:column; gap:26px; }
.menu-nav a { display:block; text-decoration:none; width:fit-content; max-width:42rem; opacity:0; transform:translateY(12px); }
.mn-title { display:block; font-family:var(--fd); font-weight:500; font-size:clamp(1.8rem,6.5vw,2.9rem); line-height:1.2; color:var(--fg); transition:color .2s; }
.mn-desc { display:block; font-family:var(--ft); font-weight:300; font-size:clamp(.9rem,2.2vw,1rem); line-height:1.6; color:var(--faint); margin-top:7px; }
.menu-nav a:hover .mn-title { color:var(--accent); }
.menu.open .menu-nav a { animation:mIn .45s ease forwards; }
.menu.open .menu-nav a:nth-child(1){animation-delay:.06s;} .menu.open .menu-nav a:nth-child(2){animation-delay:.12s;}
.menu.open .menu-nav a:nth-child(3){animation-delay:.18s;} .menu.open .menu-nav a:nth-child(4){animation-delay:.24s;}
@keyframes mIn { to { opacity:1; transform:translateY(0); } }
.menu-social { margin-top:clamp(40px,7vw,64px); padding-top:26px; border-top:1px solid var(--border); display:flex; gap:26px; align-items:center; opacity:0; transition:opacity .4s ease .34s; }
.menu.open .menu-social { opacity:1; }
.menu-social a { display:inline-flex; color:var(--faint); transition:color .2s,transform .2s; }
.menu-social svg { width:21px; height:21px; display:block; }
.menu-social a:hover { color:var(--accent); transform:translateY(-2px); }

/* ── Layout wrap ── */
.wrap { max-width:760px; margin:0 auto; padding:0 28px; }
.article-wrap { max-width:648px; margin:0 auto; padding:0 28px; }
@keyframes up { from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:translateY(0);} }

/* ── Hero ── */
.hero { padding:64px 0 44px; animation:up .7s ease; }
.hero h1 { font-family:var(--fd); font-weight:700; font-size:clamp(1.9rem,5vw,2.9rem); line-height:1.16; letter-spacing:-.02em; margin-bottom:0; }
.hero-rule { display:block; width:48px; height:2px; background:var(--accent); border-radius:2px; margin:24px 0; }
.greeting { font-family:var(--ft); font-weight:300; font-style:normal; font-size:clamp(.95rem,2vw,1.05rem); line-height:1.7; color:var(--faint); margin-top:26px; }
.hero p { font-family:var(--ft); font-weight:300; font-size:clamp(.96rem,2vw,1.08rem); line-height:1.85; color:var(--faint); max-width:34em; }

/* ── Section head label ── */
.sec-h { font-family:var(--fs); font-size:22px; font-weight:600; color:var(--accent); letter-spacing:.04em; padding-top:54px; padding-bottom:26px; border-top:1px solid var(--border); }

/* ── Shelves grid (شبكة مربّعة مؤطّرة، فواصل شعرية، تمتلئ عند المرور) ── */
.shelves { display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:1px; background:var(--border); border:1px solid var(--border); border-radius:3px; overflow:hidden; }
.shelf-card { position:relative; display:flex; flex-direction:column; min-height:148px; padding:22px 20px;
  background:var(--bg); text-decoration:none; transition:background .22s ease; }
.shelf-card::after { content:""; position:absolute; inset-inline-start:0; bottom:0; height:2px; width:0;
  background:var(--accent); transition:width .26s ease; }
.shelf-card:hover { background:var(--hover); }
.shelf-card:hover::after { width:100%; }
.sc-name { font-family:var(--fd); font-weight:500; font-size:1.32rem; color:var(--fg); margin-bottom:8px; transition:color .18s; }
.shelf-card:hover .sc-name { color:var(--accent); }
.sc-themes { font-family:var(--ft); font-weight:300; font-size:.86rem; line-height:1.65; color:var(--faint); }
.sc-count { margin-top:auto; padding-top:14px; font-family:var(--fs); font-size:.68rem; letter-spacing:.04em; color:var(--muted); }

/* ── Post listing ── */
.post { display:block; text-decoration:none; padding:22px 0; border-top:1px solid var(--border); }
.post:first-of-type { border-top:none; }
.post-shelf { display:block; font-family:var(--fs); font-size:10px; font-weight:500; color:var(--accent); letter-spacing:.12em; margin-bottom:9px; }
.post-title { display:block; font-family:var(--fd); font-weight:500; font-size:1.5rem; line-height:1.3; color:var(--fg); margin-bottom:6px; transition:color .18s; }
.post-sub { display:block; font-family:var(--ft); font-weight:300; font-size:1rem; color:var(--faint); line-height:1.6; }
.post:hover { padding-inline-start:8px; }
.post:hover .post-title { color:var(--accent); }

/* ── Newsletter ── */
.news { margin:64px 0; padding:40px 34px; border:1px solid var(--border); background:var(--card); border-radius:2px; }
.news h3 { font-family:var(--fd); font-weight:500; font-size:1.4rem; margin-bottom:12px; }
.news p { font-family:var(--ft); font-weight:300; font-size:.98rem; color:var(--faint); line-height:1.7; margin-bottom:22px; max-width:32em; }
.news-form { display:flex; gap:10px; max-width:420px; }
.news input { flex:1; background:transparent; border:1px solid var(--border); color:var(--fg); font-family:var(--ft); font-size:.95rem; padding:11px 14px; border-radius:2px; outline:none; transition:border-color .18s; }
.news input:focus { border-color:var(--accent); }
.news button { background:var(--accent); color:#fff; border:none; font-family:var(--fs); font-weight:500; font-size:.85rem; padding:0 22px; border-radius:2px; cursor:pointer; transition:opacity .18s; }
.news button:hover { opacity:.88; }
.news .done { font-family:var(--fs); font-size:.9rem; color:var(--accent); }

/* ── Footer ── */
footer { border-top:1px solid var(--border); padding:34px 0 60px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; }
footer .c { font-family:var(--fs); font-size:11px; color:var(--muted); }
footer .links a { font-family:var(--fs); font-size:11px; color:var(--faint); text-decoration:none; margin-inline-start:18px; transition:color .18s; }
footer .links a:hover { color:var(--accent); }

/* ── Article page ── */
.article { padding:68px 0 120px; animation:up .6s ease; }
.article .shelf { display:block; font-family:var(--fs); font-size:10px; font-weight:500; color:var(--accent); letter-spacing:.14em; margin-bottom:16px; text-decoration:none; }
.article .title-wrap { margin-bottom:60px; }
.article h1 { font-family:var(--fd); font-weight:700; font-size:clamp(2rem,5vw,2.9rem); line-height:1.22; letter-spacing:-.015em; margin-bottom:10px; }
.article .subtitle { font-family:var(--fd); font-weight:400; font-size:clamp(1rem,2.5vw,1.2rem); line-height:1.5; color:var(--muted); }
.body { font-family:var(--ft); font-size:1.07rem; line-height:2.1; color:var(--fg); }
.body p { margin-bottom:1.5em; }
.body .sec { margin:3.6em 0 1.7em; }
.body .sec-num { display:block; font-family:var(--fs); font-size:.78rem; font-weight:500; color:var(--accent); letter-spacing:.16em; margin-bottom:.55em; }
.body .sec-title { display:block; font-family:var(--fd); font-weight:500; font-size:clamp(1.35rem,3.2vw,1.62rem); line-height:1.4; letter-spacing:-.01em; color:var(--fg); }
.body .sep { display:block; font-family:var(--fs); color:var(--muted); font-size:.82rem; letter-spacing:.12em; margin:3em 0 2.4em; }
.body h2 { font-family:var(--fd); font-weight:500; font-size:1.5rem; margin:2.6em 0 1.2em; }
.body blockquote { border-inline-start:2px solid var(--accent); padding-inline-start:18px; margin:2em 0; color:var(--faint); }
.closing { margin-top:3.4em; padding-top:1.8em; border-top:1px solid var(--border); }
.closing .ctext { display:block; font-family:var(--fs); font-size:10.5px; color:var(--muted); letter-spacing:.04em; margin-bottom:7px; }
.closing .tags { font-family:var(--fs); font-size:10.5px; color:var(--accent); }

/* ── Generic page (about, letters) ── */
.page { padding:80px 0 120px; animation:up .6s ease; }
.page h1 { font-family:var(--fd); font-weight:700; font-size:clamp(2rem,5vw,2.8rem); line-height:1.25; margin-bottom:36px; }
.page .lead { font-family:var(--ft); font-weight:300; font-size:1.15rem; line-height:1.95; color:var(--faint); }

@media (max-width:560px) {
  .shelves { grid-template-columns:1fr 1fr; }
  .shelf-card { min-height:120px; padding:18px 16px; }
  .news-form { flex-direction:column; } .news button { padding:12px; }
}

/* النماذج العامّة */
.hp { position:absolute; width:1px; height:1px; padding:0; margin:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; opacity:0; pointer-events:none; }
.letter-form textarea { width:100%; background:transparent; border:1px solid var(--border); color:var(--fg);
  font-family:var(--ft); font-size:1.02rem; line-height:1.9; padding:16px 18px; border-radius:3px; outline:none;
  transition:border-color .18s; margin-top:30px; }
.letter-form textarea:focus { border-color:var(--accent); }
.letter-btn { background:var(--accent); color:#fff; border:none; font-family:var(--fs); font-weight:500;
  font-size:.9rem; padding:12px 26px; border-radius:3px; cursor:pointer; transition:opacity .18s; }
.letter-btn:hover { opacity:.9; }
.letter-done, .news .done { display:block; margin-top:30px; font-family:var(--fs); font-size:.95rem; color:var(--accent); }

/* ── Accessibility: reduce motion ── */
@media (prefers-reduced-motion: reduce) {
  .hero, .article, .page { animation: none; opacity: 1; transform: none; }
  .menu-nav a, .menu-social { opacity: 1 !important; transform: none !important; animation: none !important; }
}