/* =====================================================================
   Basma Ahmad Sedki Dajani — scholarly bilingual design system
   Manuscript ivory · deep teal + muted gold. Spectral (EN) + Amiri (AR).
   Fully bilingual with logical properties so one sheet serves LTR & RTL.
   ===================================================================== */
:root {
  --paper:   #f7f4ec;
  --paper-2: #efe8d8;
  --ink:     #23282a;
  --muted:   #5f6360;
  --primary: #0e5c53;
  --primary-d:#0a463f;
  --gold:    #a8842c;
  --line:    #e2dcc9;
  --card:    #fffdf8;
  --shadow:  0 18px 40px -24px rgba(30,40,35,.4);
  --shadow-sm:0 8px 20px -14px rgba(30,40,35,.35);
  --serif: "Spectral", Georgia, "Times New Roman", serif;
  --ar: "Amiri", "Spectral", serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --wrap: 1140px;
}
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--serif); font-size:18px; line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
/* Arabic: Amiri, larger & airier */
html[dir="rtl"] body { font-family:var(--ar); font-size:19px; line-height:2; }
[lang="ar"]:not(html):not(body) { font-family:var(--ar); }
html[dir="ltr"] [lang="en"] { font-family:var(--serif); }

img{ max-width:100%; display:block; }
a{ color:var(--primary); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; line-height:1.15; margin:0 0 .5em; color:var(--ink); letter-spacing:-.01em; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4 { font-family:var(--ar); font-weight:700; letter-spacing:0; line-height:1.4; }
h1{ font-size:clamp(2.1rem,4.6vw,3.1rem); }
h2{ font-size:clamp(1.6rem,3vw,2.2rem); }
h3{ font-size:1.25rem; }
p{ margin:0 0 1rem; }
.wrap{ width:min(100% - 2.6rem, var(--wrap)); margin-inline:auto; }
.narrow{ max-width:44rem; }
.muted{ color:var(--muted); } .small{ font-size:.82rem; } .center{ text-align:center; }
:focus-visible{ outline:2px solid var(--primary); outline-offset:3px; border-radius:3px; }

.eyebrow{ font-family:var(--sans); font-weight:600; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
html[dir="rtl"] .eyebrow{ font-family:var(--sans); letter-spacing:.08em; }
.ornament{ display:block; width:60px; height:12px; margin:1rem auto 0; color:var(--gold); }
.section-head{ text-align:center; margin-bottom:2.4rem; }
.section-head .sub{ max-width:42rem; margin:1rem auto 0; color:var(--muted); }
.section-head h1,.section-head h2{ margin:.2rem 0 0; }
.col-h{ font-family:var(--sans); font-weight:600; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--primary); margin:0 0 1rem; }
html[dir="rtl"] .col-h{ font-family:var(--sans); letter-spacing:.05em; font-size:.9rem; }
.ic{ width:1.05em; height:1.05em; vertical-align:-.15em; }

/* buttons */
.btn{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--sans); font-weight:500; font-size:.95rem; padding:.7rem 1.4rem; border-radius:2px; border:1px solid transparent; cursor:pointer; transition:background .15s,color .15s,border-color .15s; }
html[dir="rtl"] .btn{ font-family:var(--ar); font-weight:700; font-size:1.05rem; }
.btn:hover{ text-decoration:none; }
.btn .ic{ width:1.15em; height:1.15em; }
html[dir="rtl"] .btn .ic{ transform:scaleX(-1); }
.btn-primary{ background:var(--primary); color:#fdfdfb; }
.btn-primary:hover{ background:var(--primary-d); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--primary); color:var(--primary); }

/* header */
.site-header{ position:sticky; top:0; z-index:50; background:rgba(247,244,236,.9); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.bar{ display:flex; align-items:center; gap:1.2rem; padding:.7rem 0; }
.brand{ display:flex; flex-direction:column; color:var(--ink); line-height:1.1; }
.brand:hover{ text-decoration:none; }
.brand-name{ font-family:var(--serif); font-weight:500; font-size:1.15rem; }
html[dir="rtl"] .brand-name{ font-family:var(--ar); font-weight:700; font-size:1.3rem; }
.brand-role{ font-family:var(--sans); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:2px; }
html[dir="rtl"] .brand-role{ font-family:var(--ar); text-transform:none; letter-spacing:0; font-size:.8rem; }
.site-nav{ margin-inline-start:auto; display:flex; align-items:center; gap:.2rem; }
.site-nav a{ font-family:var(--sans); font-size:.9rem; color:var(--ink); padding:.5rem .8rem; border-radius:2px; }
html[dir="rtl"] .site-nav a{ font-family:var(--ar); font-weight:700; font-size:1.02rem; }
.site-nav a:hover{ text-decoration:none; color:var(--primary); }
.site-nav a.active{ color:var(--primary); box-shadow:inset 0 -2px 0 var(--gold); }
.lang-switch{ border:1px solid var(--line); margin-inline-start:.5rem; color:var(--primary)!important; }
.nav-toggle{ display:none; margin-inline-start:auto; width:44px; height:40px; background:var(--card); border:1px solid var(--line); border-radius:3px; color:var(--ink); cursor:pointer; }
.nav-toggle svg{ width:22px; height:22px; }

/* sections */
.block{ padding:clamp(3rem,6vw,5rem) 0; }
.tint{ background:var(--paper-2); }

/* hero */
.hero{ padding:clamp(2.4rem,5vw,4.2rem) 0 clamp(2.6rem,5vw,4rem); }
.hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.hero-name{ font-size:clamp(2.3rem,5vw,3.4rem); margin:.3rem 0 0; }
.hero-alt{ color:var(--muted); font-size:1.1rem; margin:.3rem 0 0; }
.hero-role{ font-family:var(--sans); font-weight:500; letter-spacing:.02em; color:var(--primary); margin:.9rem 0 0; }
html[dir="rtl"] .hero-role{ font-family:var(--ar); font-weight:700; font-size:1.2rem; }
.hero .lead{ font-size:1.15rem; color:var(--muted); max-width:34rem; margin-top:1rem; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.7rem; }
.portrait-frame{ position:relative; padding:10px; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); aspect-ratio:1/1; }
.portrait-frame::after{ content:""; position:absolute; inset:3px; border:1px solid var(--gold); opacity:.5; pointer-events:none; }
.portrait-frame img{ width:100%; height:100%; object-fit:cover; display:block; }

/* prose (bio) */
.prose p{ font-size:1.1rem; }
html[dir="rtl"] .prose p{ font-size:1.22rem; line-height:2.1; text-align:justify; }

/* two-col interests / education */
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); }
.tags{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.tags li{ background:var(--card); border:1px solid var(--line); border-radius:2px; padding:.4rem .8rem; font-family:var(--sans); font-size:.86rem; color:var(--ink); }
html[dir="rtl"] .tags li{ font-family:var(--ar); font-size:1.02rem; }
.stack{ list-style:none; margin:0; padding:0; }
.stack li{ padding:.5rem 0; border-bottom:1px solid var(--line); }
.edu .edu-row{ display:flex; gap:1.1rem; padding:.9rem 0; border-bottom:1px solid var(--line); }
.edu-year{ font-family:var(--sans); font-weight:600; color:var(--gold); font-size:1.05rem; min-width:3.2rem; }
.edu-row b{ font-weight:600; }
.edu-row p{ margin:.2rem 0 0; color:var(--muted); font-size:.95rem; }

/* books */
.books-row{ display:flex; flex-wrap:wrap; gap:1.6rem; justify-content:center; }
.book{ margin:0; width:190px; text-align:center; }
a.book{ display:block; color:inherit; text-decoration:none; }
a.book:hover{ text-decoration:none; }
.book img{ width:100%; box-shadow:var(--shadow); border:1px solid var(--line); transition:transform .18s ease, box-shadow .18s ease; }
a.book:hover img{ transform:translateY(-5px); box-shadow:0 22px 44px -22px rgba(30,40,35,.55); }
.book figcaption{ font-family:var(--sans); font-size:.82rem; color:var(--muted); margin-top:.7rem; }
html[dir="rtl"] .book figcaption{ font-family:var(--ar); font-size:1rem; }
a.book:hover figcaption{ color:var(--primary); }
.book-read{ display:inline-flex; align-items:center; gap:.25rem; color:var(--primary); white-space:nowrap; }
.book-read .ic{ width:1em; height:1em; vertical-align:-.1em; }

/* press cards */
.press-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); gap:1.1rem; margin-bottom:1.8rem; }
.press-card{ display:block; background:var(--card); border:1px solid var(--line); border-radius:3px; padding:1.4rem 1.5rem; color:var(--ink); box-shadow:var(--shadow-sm); transition:transform .18s, box-shadow .18s; }
.press-card:hover{ text-decoration:none; transform:translateY(-3px); box-shadow:var(--shadow); }
.press-meta{ display:flex; justify-content:space-between; gap:.5rem; font-family:var(--sans); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:.6rem; }
.press-src{ color:var(--primary); font-weight:600; } .press-date{ color:var(--muted); }
.press-card h3{ font-size:1.16rem; margin:0 0 .5rem; }
.press-card p{ color:var(--muted); font-size:.95rem; margin:0 0 .8rem; }
.press-read{ font-family:var(--sans); font-size:.82rem; font-weight:600; color:var(--primary); display:inline-flex; align-items:center; gap:.35rem; }
html[dir="rtl"] .press-read .ic{ transform:scaleX(-1); }

/* publications list */
.pub-list{ list-style:none; margin:0; padding:0; max-width:56rem; margin-inline:auto; }
.pub{ display:flex; align-items:flex-start; gap:1rem; padding:1.1rem .4rem; border-bottom:1px solid var(--line); }
.pub-num{ font-family:var(--sans); font-size:.8rem; color:var(--gold); font-weight:600; padding-top:.25rem; min-width:1.8rem; }
.pub-title{ flex:1; font-size:1.06rem; line-height:1.5; }
.pub-title[dir="rtl"]{ font-family:var(--ar); font-size:1.2rem; line-height:1.7; }
.pub-dl{ flex:none; font-family:var(--sans); font-size:.78rem; font-weight:600; color:var(--primary); display:inline-flex; align-items:center; gap:.35rem; border:1px solid var(--line); border-radius:2px; padding:.35rem .7rem; white-space:nowrap; }
.pub-dl:hover{ text-decoration:none; border-color:var(--primary); background:var(--card); }
html[dir="rtl"] .pub-dl{ font-family:var(--ar); font-size:.95rem; }
/* publications grouped by year */
.pub-years{ max-width:58rem; margin-inline:auto; }
.pub-year-group{ display:grid; grid-template-columns:4.5rem 1fr; gap:0 1.5rem; align-items:start; padding:1.3rem 0; border-top:1px solid var(--line); }
.pub-year-group:first-child{ border-top:0; padding-top:0; }
.pub-year{ font-family:var(--sans); font-weight:700; font-size:1.35rem; color:var(--gold); line-height:1; padding-top:.3rem; }
.pub-years .pub-list{ margin:0; }
.pub-years .pub{ padding:.5rem 0; border-bottom:1px dashed var(--line); }
.pub-years .pub:last-child{ border-bottom:0; }
.pub-more{ margin-top:2.2rem; font-family:var(--sans); font-size:.95rem; }
html[dir="rtl"] .pub-more{ font-family:var(--ar); font-size:1.05rem; }
.pub-more .ic{ width:1em; height:1em; vertical-align:-.1em; }
/* academic-profile brand tiles */
.brand-tile{ width:26px; height:26px; flex:none; }
.prof-link{ gap:.55rem; padding:.5rem .85rem; }

/* media grid + youtube facade */
.media-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1.3rem; }
.media-card{ margin:0; }
.yt{ position:relative; display:block; width:100%; padding:0; border:1px solid var(--line); background:#000; cursor:pointer; overflow:hidden; aspect-ratio:16/10; }
.yt img{ width:100%; height:100%; object-fit:cover; opacity:.9; transition:opacity .2s,transform .3s; }
.yt:hover img{ opacity:1; transform:scale(1.03); }
.yt-play{ position:absolute; inset:0; display:grid; place-items:center; color:#fff; }
.yt-play .ic{ width:56px; height:56px; filter:drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
.yt.loaded{ aspect-ratio:16/9; } .yt.loaded iframe{ width:100%; height:100%; display:block; }
.media-card figcaption{ font-family:var(--sans); font-size:.88rem; color:var(--muted); margin-top:.7rem; }
html[dir="rtl"] .media-card figcaption{ font-family:var(--ar); font-size:1.05rem; }

/* contact */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,3.5rem); align-items:start; }
.foot-mail{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--sans); color:var(--ink); }
.foot-mail.big{ font-size:1.1rem; margin-top:.6rem; }
.prof-links{ display:flex; flex-wrap:wrap; gap:.6rem; }
.prof-link{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--sans); font-size:.86rem; background:var(--card); border:1px solid var(--line); border-radius:2px; padding:.45rem .8rem; color:var(--ink); }
.prof-link:hover{ text-decoration:none; border-color:var(--primary); color:var(--primary); }
html[dir="rtl"] .prof-link{ font-family:var(--ar); font-size:1rem; }
.form-card{ background:var(--card); border:1px solid var(--line); border-radius:4px; padding:clamp(1.5rem,3vw,2.2rem); box-shadow:var(--shadow-sm); }
.contact-form label{ display:block; margin-bottom:1rem; }
.contact-form label span{ display:block; font-family:var(--sans); font-size:.82rem; color:var(--muted); margin-bottom:.35rem; }
html[dir="rtl"] .contact-form label span{ font-family:var(--ar); font-size:.98rem; }
.contact-form input,.contact-form textarea{ width:100%; font:inherit; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:3px; padding:.7rem .85rem; }
.contact-form input:focus,.contact-form textarea:focus{ outline:none; border-color:var(--primary); background:#fff; box-shadow:0 0 0 3px rgba(14,92,83,.1); }
.contact-form .hp{ position:absolute!important; inset-inline-start:-9999px; width:1px; height:1px; opacity:0; }
.captcha-row{ display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; }
.captcha-q{ font-family:var(--sans); font-weight:600; font-size:1.05rem; color:var(--ink); min-width:5rem; }
.captcha-field input[name="captcha"]{ width:6.5rem; }
.captcha-refresh{ flex:none; background:transparent; border:1px solid var(--line); color:var(--muted); border-radius:2px; padding:.4rem .65rem; cursor:pointer; font-size:1rem; line-height:1; }
.captcha-refresh:hover{ color:var(--primary); border-color:var(--primary); }
.contact-form button[type="submit"]{ width:100%; justify-content:center; margin-top:.4rem; }
.form-status{ border-radius:3px; padding:.8rem 1rem; margin-bottom:1rem; font-family:var(--sans); }
.form-status.ok{ background:#e7f2ee; border:1px solid #bcdccf; color:#1f6b52; }
.form-status.bad{ background:#fbeeee; border:1px solid #f0d2d2; color:#9c3b3b; }

/* footer */
.site-footer{ background:#1c2422; color:#dfe3df; padding:clamp(2.6rem,5vw,3.6rem) 0 1.4rem; }
.foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:1.6rem 2rem; }
.foot-name{ font-family:var(--serif); font-size:1.3rem; color:#fff; }
html[dir="rtl"] .foot-name{ font-family:var(--ar); }
.foot-role{ color:#a7ada7; font-size:.9rem; margin:.3rem 0 1rem; }
.site-footer .foot-mail{ color:#dfe3df; }
.foot-col h4{ font-family:var(--sans); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#8fb7ad; margin-bottom:.7rem; }
html[dir="rtl"] .foot-col h4{ font-family:var(--ar); letter-spacing:0; font-size:.95rem; }
.foot-col a{ display:block; color:#cfd4cf; padding:.2rem 0; font-family:var(--sans); font-size:.9rem; }
html[dir="rtl"] .foot-col a{ font-family:var(--ar); font-size:1.02rem; }
.foot-col a:hover{ color:#fff; }
.foot-bottom{ border-top:1px solid #34403c; margin-top:2.2rem; padding-top:1.2rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem 1.2rem; color:#8b918b; font-family:var(--sans); font-size:.82rem; }
html[dir="rtl"] .foot-bottom{ font-family:var(--ar); font-size:.95rem; }
.foot-bottom a{ color:#8b918b; }
.foot-credit{ margin-inline:auto; }
.foot-credit a{ color:#a9c4bd; font-weight:600; }
.foot-credit a:hover{ color:#fff; }

/* reveal */
.reveal{ opacity:1; }
.js .reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.js .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .js .reveal{ opacity:1; transform:none; transition:none; } .press-card,.yt img{ transition:none!important; } }

/* responsive */
@media (max-width:860px){
  .hero-grid{ grid-template-columns:1fr; gap:1.4rem; text-align:center; justify-items:center; }
  .hero-portrait{ order:-1; width:12rem; max-width:56vw; margin-inline:auto; }
  .hero-copy{ display:flex; flex-direction:column; align-items:center; }
  .hero .lead{ margin-inline:auto; }
  .hero-cta{ justify-content:center; }
  .two-col,.contact-grid{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:680px){
  .site-nav{ position:absolute; top:100%; inset-inline:0; flex-direction:column; align-items:stretch; gap:.1rem; background:var(--paper); border-bottom:1px solid var(--line); padding:.6rem 1.3rem 1rem; box-shadow:var(--shadow); display:none; }
  .site-nav.open{ display:flex; }
  .site-nav a{ padding:.7rem .4rem; } .lang-switch{ text-align:center; margin:.4rem 0 0; }
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  .pub{ flex-wrap:wrap; gap:.5rem; }
  .pub-year-group{ grid-template-columns:1fr; gap:.3rem; } .pub-year{ padding-top:0; }
  .foot-grid{ grid-template-columns:1fr; }
  .hero{ padding:1.4rem 0 2.4rem; }
  .hero-portrait{ width:8.5rem; max-width:44vw; }
  .hero-name{ font-size:1.85rem; }
  .hero .lead{ font-size:1.02rem; }
  .hero-cta{ flex-direction:column; align-self:stretch; }
  .hero-cta .btn{ justify-content:center; }
  .portrait-frame{ padding:6px; }
  html[dir="rtl"] .hero-name{ font-size:2rem; }
}