/* MAG Academy-inspired UI layout for Majnoon Jana.
   Design/layout only: existing content, colors, images and JS are preserved. */
:root{
  --mag-radius:18px;
  --mag-gap:18px;
  --mag-panel:#1d3028;
  --mag-panel-2:#21372e;
  --mag-border:#dfb48032;
}

body{background:#182823;}
header{
  width:min(1180px,calc(100% - 28px));
  margin:14px auto 0;
  padding:12px 16px;
  border:1px solid var(--mag-border);
  border-radius:16px;
  background:#1b2d26f5;
  box-shadow:0 10px 30px #00000020;
}
header .brand{font-family:Tahoma,Arial,sans-serif;font-weight:700;gap:10px}
header .brand .name-mark{font-size:22px}
header .brand span{font-size:12px;padding-right:12px}
header>.index-toggle{border-radius:12px;padding:9px 14px;font-size:13px}

main{width:min(1180px,calc(100% - 28px));}
.home-intro{
  margin:18px 0;
  padding:34px 26px 28px;
  min-height:0;
  border-radius:22px;
  background:linear-gradient(145deg,#1d3028,#21372e);
  border:1px solid var(--mag-border);
  box-shadow:0 16px 45px #00000022;
}
.home-intro .home-monogram{width:110px;margin:0 auto 12px}
.home-intro .eyebrow{font-size:12px;padding:5px 12px;border-radius:999px}
.home-intro h1{font-family:Tahoma,Arial,sans-serif;font-size:clamp(32px,5vw,54px);font-weight:800;line-height:1.35;margin:8px 0}
.home-intro .author-motto{font-size:15px;color:#ead8b9;margin:4px 0 12px}
.home-lead{font-family:Tahoma,Arial,sans-serif;font-size:16px;line-height:1.9;margin:0 auto 24px}
.home-about{max-width:920px;text-align:right;padding:18px 20px;border-radius:16px;background:#182823;border:1px solid var(--mag-border)}
.home-about h2{font-size:17px}
.home-about p{font-size:14px;line-height:2;margin:5px 0}
.poetry-themes{max-width:920px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px auto 0}
.poetry-themes span{background:#182823;border:1px solid var(--mag-border);border-radius:13px;padding:9px;color:var(--copper);font-size:13px}
.home-memory{display:inline-flex;align-items:center;gap:7px;margin-top:16px}

/* The drawer becomes the academy-style course/filter panel. */
#poem-drawer{width:min(440px,94vw);padding:20px;background:#182823;border-left:1px solid #dfb48055}
.drawer-heading{padding-bottom:12px;border-bottom:1px solid var(--mag-border)}
.drawer-heading h2{font-family:Tahoma,Arial,sans-serif;font-size:21px;font-weight:800}
.drawer-home{margin-top:10px;padding:10px 12px;background:#1d3028;border:1px solid var(--mag-border);border-radius:12px}
.poem-search{margin:14px 0}
.search-row{gap:8px}
.search-row input{border-radius:11px;border-color:#dfb48055;background:#1d3028;color:#f3f4f5}
.search-row button{border-radius:11px;padding:9px 15px}
.drawer-author-note{margin:14px 0!important;border-radius:14px!important}
.poem-index h2{font-family:Tahoma,Arial,sans-serif;text-align:right;font-size:18px;font-weight:800;margin:18px 0 10px}
.poem-index nav{display:grid;grid-template-columns:1fr;gap:10px}
.poem-index nav a{min-height:76px;padding:13px 14px!important;border:1px solid var(--mag-border)!important;border-radius:14px;background:#1d3028;transition:.2s ease}
.poem-index nav a:hover,.poem-index nav a[aria-current=true]{transform:translateY(-1px);background:#21372e}
.poem-index nav .number{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#dfb48012;border:1px solid #dfb48030}

/* Course-card feel for each poem while retaining the existing paper appearance/colors. */
.poem-card{max-width:1100px;margin:20px auto;padding:22px;border-radius:22px;outline:0;box-shadow:0 16px 42px #00000024}
.poem-card .paper-top{padding-bottom:12px}
.poem-card h2{font-family:Tahoma,Arial,sans-serif;font-weight:800;font-size:clamp(27px,4vw,42px);margin:16px 0 0}
.poem-card .poem-meaning{font-size:13px}
.poem-card .verses{max-width:900px;padding:22px 10px}
.poem-card .verses p{padding:15px 14px;margin:0 0 12px;border:1px solid #b99b6830;border-radius:14px;background:#ffffff28}
.poem-card .paper-bottom{margin-top:12px;padding-top:14px}

#reading-toolbar{max-width:1100px;border-radius:14px;padding:10px 12px;background:#1d3028;border:1px solid var(--mag-border)}
footer{width:min(1100px,100%);margin:28px auto 20px;padding:20px;border-radius:18px;background:#1d3028;border:1px solid var(--mag-border)}

/* Poet profile as an academy-style profile/dashboard card. */
.poet-profile{width:min(1100px,100%);margin:26px auto;padding:0}
.poet-profile>.eyebrow{display:inline-block;margin-bottom:4px;padding:5px 12px;border:1px solid var(--mag-border);border-radius:999px}
.poet-profile h1{font-family:Tahoma,Arial,sans-serif;font-weight:800;font-size:clamp(30px,5vw,48px);margin:5px 0}
.poet-alias{font-size:14px}
.poet-profile-grid{grid-template-columns:220px 1fr;gap:18px;margin-top:18px}
.poet-photo-slot{border-radius:18px;overflow:hidden;background:#1d3028;border:1px solid var(--mag-border)}
.poet-photo-slot img{border-radius:0!important}
.poet-profile section{padding:22px;border-radius:18px;background:#1d3028;border:1px solid var(--mag-border);box-shadow:0 14px 35px #00000018}
.poet-profile section h2{font-family:Tahoma,Arial,sans-serif;font-size:20px;font-weight:800;text-align:right;margin:0 0 10px}
.poet-profile section p{font-size:14px;line-height:2}
.poet-profile .poetry-themes{grid-template-columns:repeat(4,1fr);margin-top:14px}
.poet-back{border-radius:11px!important;padding:10px 18px!important}
.poet-memory{display:flex;justify-content:center;align-items:center;gap:7px;margin:16px 0}

/* Keep both themes coherent. */
html.light-theme body{background:#f5eddd}
html.light-theme header,html.light-theme .home-intro,html.light-theme #reading-toolbar,html.light-theme footer,html.light-theme .poet-profile section{background:#fffaf0;border-color:#b99b6845}
html.light-theme .home-about,html.light-theme .poetry-themes span,html.light-theme .poem-index nav a{background:#f5eddd;border-color:#b99b6850}
html.light-theme .poem-index nav a:hover,html.light-theme .poem-index nav a[aria-current=true]{background:#eadcc6}
html.light-theme #poem-drawer{background:#fffaf0}
html.light-theme .search-row input{background:#f5eddd;color:#352d23}

@media(max-width:760px){
  header{width:calc(100% - 18px);margin-top:9px}
  main{width:calc(100% - 18px)}
  .home-intro{padding:28px 14px 22px;border-radius:18px}
  .home-intro .home-monogram{width:88px}
  .poetry-themes,.poet-profile .poetry-themes{grid-template-columns:repeat(2,1fr)}
  .poem-card{padding:16px;border-radius:18px}
  .poem-card .verses{padding:14px 0;font-size:22px}
  .poet-profile-grid{grid-template-columns:1fr}
  .poet-photo-slot{width:180px;justify-self:center}
  .poet-profile section{padding:17px}
}