/* In Memory of Joe – its own quiet page. No store header, logo, buttons, sidebar, ads, trackers or scripts.
   Calm plum background; darkest colour is deep plum, never pure black. */
:root{--plum:#230c16;--plum2:#3a1430;--rose:#5a1f48;--gold:#e2b86a;--gold2:#f3d9a4;--text:#f4e9ef;--muted:#d8c3cf;--pink:#f07ab8;--line:rgba(226,184,106,.28);
  --serif:"Cormorant Garamond","Cormorant","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --display:"Playfair Display",Georgia,"Times New Roman",serif}
*{box-sizing:border-box}
html{color:var(--text);background:var(--plum)}
body{margin:0;min-height:100vh;font-family:var(--serif);font-size:19px;line-height:1.6;color:var(--text);
  background:radial-gradient(ellipse at 50% -10%,rgba(240,122,184,.18),rgba(240,122,184,0) 55%),
             radial-gradient(ellipse at 100% 60%,rgba(120,50,140,.25),rgba(120,50,140,0) 50%),
             linear-gradient(180deg,var(--plum2) 0%,var(--plum) 45%,#2c0f22 100%)}
img{display:block;max-width:100%;height:auto}
a{color:var(--gold2)}
.wrap{max-width:860px;margin:0 auto;padding:56px 22px 40px}
.center{text-align:center}
.dua{margin:0;font-size:clamp(64px,13vw,128px);line-height:1.15;color:var(--gold);font-family:"Amiri","Scheherazade New","Noto Naskh Arabic","Traditional Arabic",serif;
  text-shadow:0 2px 18px rgba(226,184,106,.25)}
.dua-tr{margin:6px 0 0;font-style:italic;color:var(--muted);font-size:17px}
.divider{width:120px;height:1px;margin:34px auto;background:linear-gradient(90deg,rgba(240,122,184,0),var(--pink),rgba(240,122,184,0));position:relative}
.divider::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;background:var(--pink);transform:translate(-50%,-50%) rotate(45deg)}
.portrait{width:min(300px,70vw);aspect-ratio:515/675;margin:0 auto;border-radius:50%;overflow:hidden;border:3px solid var(--gold);
  box-shadow:0 0 0 6px rgba(226,184,106,.12),0 14px 40px rgba(20,4,14,.55)}
.portrait img{width:100%;height:100%;object-fit:cover}
h1{margin:22px 0 0;font-family:var(--display);font-weight:700;font-size:clamp(34px,6vw,52px);line-height:1.15;color:var(--gold)}
h1 em{font-style:italic;font-weight:400}
.name{margin:10px 0 0;font-family:var(--display);font-size:24px;color:var(--gold2)}
.years{margin:2px 0 0;letter-spacing:.18em;color:var(--muted)}
.pill{display:inline-block;margin-top:16px;padding:6px 16px;border:1px solid var(--line);border-radius:999px;font-family:var(--display);
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold2)}
.quote{margin:34px auto 0;max-width:640px;padding:26px 28px;border:1px solid var(--line);border-radius:6px;background:rgba(58,20,48,.45);text-align:center}
.quote p{margin:0 0 10px;font-style:italic;font-size:21px}
.quote .lead{color:var(--gold);font-size:23px}
.quote cite{display:block;font-style:normal;font-family:var(--display);font-size:13px;letter-spacing:.2em;color:var(--muted)}
section{margin-top:10px}
h2{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(28px,4.6vw,40px);line-height:1.2;color:var(--gold);text-align:center}
.sub{margin:8px auto 22px;max-width:680px;text-align:center;font-style:italic;font-size:20px;color:var(--text)}
figure{margin:0}
figcaption{margin-top:8px;text-align:center;font-family:var(--display);color:var(--gold2);font-size:17px}
.solo{max-width:420px;margin:0 auto}
.solo img{border-radius:6px;border:1px solid var(--line)}
.est{margin:20px 0 18px;text-align:center;font-family:var(--display);font-size:22px;color:var(--gold2)}
.grid{display:grid;gap:14px;padding:16px;border:1px solid var(--line);border-radius:8px;background:rgba(35,12,22,.5)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px}
.grid figcaption{text-align:left;font-size:15px}
.grid figcaption b{font-weight:700;margin-right:6px}
.credit{margin:10px 0 0;text-align:center;font-family:Georgia,serif;font-size:13px;color:var(--muted)}
.home{margin:56px 0 0;text-align:center;font-family:Georgia,serif;font-size:15px}
.home a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.home a:hover{color:var(--gold2)}
@media (max-width:720px){
  body{font-size:18px}
  .wrap{padding:36px 16px 32px}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr}
  .grid{padding:10px;gap:12px}
  .quote{padding:20px 18px}
  .quote p{font-size:19px}
}