/* =========================================================
   Bassthalk-inspired layout refresh
   Design-only layer: preserves existing content, colors,
   scripts, data and functionality.
   ========================================================= */

:root{
  --layout-max:1240px;
  --radius-lg:26px;
  --radius-md:18px;
  --radius-sm:12px;
  --shadow-soft:0 16px 45px #00000018;
  --shadow-card:0 10px 28px #00000018;
}

/* ---------- Global shell ---------- */
html{scroll-behavior:smooth}
body{
  min-height:100vh;
  background:#182823;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.035;
  background-image:radial-gradient(circle at 20% 20%,#dfb480 0 1px,transparent 1px);
  background-size:26px 26px;
  z-index:-1;
}
header{
  position:sticky;
  top:0;
  z-index:50;
  width:min(var(--layout-max),calc(100% - 36px));
  margin:16px auto 0;
  padding:13px 18px;
  border:1px solid #dfb48035;
  border-radius:20px;
  background:#182823ee;
  box-shadow:0 10px 35px #00000018;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
header .brand{
  gap:14px;
  min-width:0;
}
header .brand .name-mark{
  font-size:clamp(22px,3vw,31px);
}
header .brand span{
  padding-right:14px;
  font-size:13px;
}
header>.index-toggle{
  flex-shrink:0;
  border:1px solid #dfb48080;
  border-radius:999px;
  padding:9px 17px;
  background:#dfb48012;
  color:var(--copper);
  transition:transform .2s ease,background .2s ease;
}
header>.index-toggle:hover{
  transform:translateY(-1px);
  background:#dfb48020;
}
main{
  width:min(var(--layout-max),calc(100% - 36px));
  padding:0;
}
footer{
  margin:65px 0 25px;
  padding:25px 8px;
  border:1px solid #dfb48028;
  border-radius:22px;
  background:#1d3028;
}

/* ---------- Home / hero ---------- */
.home-intro{
  max-width:none;
  min-height:auto;
  margin:30px 0 24px;
  padding:clamp(38px,6vw,78px) clamp(20px,6vw,85px);
  border:1px solid #dfb48038;
  border-radius:32px;
  background:#1d3028;
  box-shadow:var(--shadow-soft);
  position:relative;
  overflow:hidden;
}
.home-intro::after{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  left:-180px;
  bottom:-220px;
  border:1px solid #dfb48022;
  border-radius:50%;
  pointer-events:none;
}
.home-intro .home-monogram{
  width:clamp(170px,24vw,255px);
  margin:0 auto 6px;
}
.home-intro .eyebrow{
  display:inline-block;
  padding:6px 15px;
  border:1px solid #dfb48045;
  border-radius:999px;
  background:#dfb4800d;
}
.home-intro h1{
  margin:4px 0 3px;
  font-size:clamp(44px,7vw,82px);
  line-height:1.45;
}
.home-intro .author-motto{
  margin:0 0 15px;
  font-size:clamp(18px,2.2vw,23px);
}
.home-lead{
  max-width:720px;
  margin:0 auto 38px;
  font-size:clamp(19px,2.5vw,27px);
}
.home-about{
  max-width:850px;
  margin:0 auto;
  padding:25px 28px;
  border:1px solid #dfb48028;
  border-radius:22px;
  background:#182823;
  box-shadow:0 8px 25px #00000012;
}
.home-about h2{
  margin-bottom:8px;
  font-size:20px;
}
.home-about p{
  margin:7px 0;
  line-height:2;
}
.poetry-themes{
  max-width:850px;
  margin:22px auto 0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.poetry-themes span{
  border:1px solid #dfb48038;
  border-radius:15px;
  padding:11px 15px;
  background:#182823;
  border-inline-start:1px solid #dfb48038;
  transition:transform .2s ease,background .2s ease;
}
.poetry-themes span:hover{
  transform:translateY(-2px);
  background:#dfb48010;
}
.home-memory{
  margin:18px auto 0;
}

/* ---------- Search / reading toolbar ---------- */
#reading-toolbar{
  width:min(850px,100%);
  margin:20px auto;
  padding:10px;
  border:1px solid #dfb48035;
  border-radius:16px;
  background:#1d3028;
  box-shadow:0 8px 22px #00000012;
}
#reading-toolbar .index-toggle{
  border-radius:999px;
  padding:8px 15px;
}

/* ---------- Poetry list/cards ---------- */
.poem-card{
  max-width:980px;
  margin:22px auto 0;
  padding:clamp(24px,4vw,48px);
  border:1px solid #b99b68;
  border-radius:28px;
  outline:0;
  background:#f5eddd;
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}
.poem-card::before{
  width:70%;
  height:70%;
}
.poem-card .paper-top{
  padding-bottom:15px;
  border-bottom:1px solid #b99b6840;
}
.poem-card h2{
  font-size:clamp(34px,5vw,52px);
  margin-top:23px;
}
.poem-card .ornament{
  margin:13px auto 28px;
}
.poem-card .verses{
  max-width:790px;
  margin:auto;
  font-size:clamp(22px,2.5vw,31px);
}
.poem-card .verses p{
  padding:0 0 25px;
  margin:0 0 25px;
  border-bottom:1px solid #b99b6828;
}
.poem-card .verses p:last-child{
  border-bottom:0;
  margin-bottom:0;
}
.paper-bottom{
  margin-top:30px;
  padding-top:18px;
}

/* ---------- Explanations ---------- */
.verse-explanations{
  max-width:790px;
  margin:32px auto 0;
  border:1px solid #b99b6840;
  border-radius:18px;
  background:#f0e6d4;
  overflow:hidden;
}
.verse-explanations summary{
  padding:15px 18px;
  cursor:pointer;
  font-weight:700;
}
.verse-explanations>p,
.verse-explanations>ol{
  padding-inline:20px;
}
.verse-explanations li{
  padding:15px 0;
  border-top:1px solid #b99b6828;
}
.verse-explanations blockquote{
  margin:10px 0;
  padding:10px 15px;
  border-radius:12px;
  background:#f5eddd;
}

/* ---------- Drawer: course-filter feel ---------- */
#poem-drawer{
  width:min(440px,94vw);
  padding:25px;
  background:#1d3028;
  border-left:1px solid #dfb48055;
  box-shadow:-22px 0 60px #0007;
}
.drawer-heading{
  padding-bottom:14px;
  border-bottom:1px solid #dfb48030;
}
.drawer-heading h2{
  font-size:28px;
}
#close-index{
  border-radius:50%;
}
.drawer-home{
  margin:12px 0;
  padding:12px 15px;
  border:1px solid #dfb48030;
  border-radius:12px;
  background:#182823;
}
.poem-search{
  padding:16px;
  border:1px solid #dfb48030;
  border-radius:17px;
  background:#182823;
}
.search-row{
  gap:8px;
}
.search-row input{
  border-radius:12px;
}
.search-row button{
  border-radius:12px;
}
.poem-index{
  max-width:none;
  margin-top:18px;
}
.poem-index h2{
  margin-bottom:12px;
}
.poem-index nav{
  gap:10px;
}
.poem-index nav a{
  min-height:68px;
  padding:13px 14px;
  border:1px solid #dfb4802d;
  border-radius:15px;
  background:#182823;
  transition:transform .18s ease,background .18s ease,border-color .18s ease;
}
.poem-index nav a:hover{
  transform:translateX(-3px);
  background:#304638;
}
.poem-index nav a[aria-current=true]{
  border-color:#dfb480;
  background:#2d4034;
  box-shadow:0 8px 20px #00000018;
}

/* ---------- About poet page ---------- */
.poet-profile{
  width:min(1100px,100%);
  margin:30px auto;
  padding:clamp(28px,5vw,60px);
  border:1px solid #dfb48038;
  border-radius:30px;
  background:#1d3028;
  box-shadow:var(--shadow-soft);
}
.poet-profile>h1{
  margin-top:5px;
}
.poet-profile-grid{
  display:grid;
  grid-template-columns:minmax(260px,380px) minmax(0,1fr);
  gap:45px;
  align-items:center;
  margin-top:30px;
}
.poet-photo-slot{
  margin:0;
  padding:10px;
  border:1px solid #dfb48042;
  border-radius:24px;
  background:#182823;
  box-shadow:var(--shadow-card);
}
.poet-photo-slot img{
  border-radius:17px!important;
}
.poet-profile-grid section{
  padding:28px;
  border:1px solid #dfb4802d;
  border-radius:22px;
  background:#182823;
}
.poet-profile-grid section h2{
  margin-top:0;
  text-align:right;
}
.poet-back{
  display:inline-flex;
  margin-top:18px;
  padding:10px 18px;
  border:1px solid #dfb48070;
  border-radius:999px;
  color:var(--copper);
}

/* ---------- Motion / focus ---------- */
.poem-index nav a,
.poetry-themes span,
header>.index-toggle,
.poet-back{
  will-change:transform;
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .poem-index nav a,
  .poetry-themes span,
  header>.index-toggle{transition:none}
}

/* ---------- Responsive ---------- */
@media(max-width:800px){
  header{
    width:min(var(--layout-max),calc(100% - 20px));
    margin-top:10px;
    border-radius:16px;
  }
  main{
    width:min(var(--layout-max),calc(100% - 20px));
  }
  .home-intro{
    margin-top:16px;
    border-radius:24px;
    padding:35px 17px;
  }
  .home-about{
    padding:20px 17px;
  }
  .poetry-themes{
    grid-template-columns:repeat(2,1fr);
  }
  .poem-card{
    border-radius:22px;
    padding:27px 19px;
  }
  .poet-profile{
    margin-top:16px;
    padding:25px 17px;
    border-radius:24px;
  }
  .poet-profile-grid{
    grid-template-columns:1fr;
    gap:22px;
  }
  .poet-profile-grid section{
    padding:20px 17px;
  }
}
@media(max-width:520px){
  header .brand span{display:none}
  header{
    padding:10px 11px;
  }
  header>.index-toggle{
    padding:8px 12px;
  }
  header>.index-toggle span{
    display:none;
  }
  .home-intro .home-monogram{
    width:190px;
  }
  .home-intro h1{
    font-size:44px;
  }
  .home-lead{
    margin-bottom:25px;
  }
  .poetry-themes{
    gap:8px;
  }
  .poetry-themes span{
    padding:9px 8px;
  }
  .poem-card .verses{
    font-size:22px;
    line-height:2.05;
  }
  #reading-toolbar{
    border-radius:13px;
  }
  footer{
    border-radius:18px;
  }
}

/* ---------- Balanced light/dark themes ---------- */
:root{
  --surface-dark:#1d3028;
  --surface-dark-2:#182823;
  --text-dark:#f3f4f5;
  --muted-dark:#aeb9c4;
  --surface-light:#fffaf0;
  --surface-light-2:#f5eddd;
  --text-light:#352d23;
  --muted-light:#705d43;
}

/* Keep the dark mode visually unified. */
html:not(.light-theme) body{background:var(--surface-dark-2);color:var(--text-dark)}
html:not(.light-theme) header{background:#182823ee;color:var(--text-dark)}
html:not(.light-theme) .home-intro,
html:not(.light-theme) footer,
html:not(.light-theme) #poem-drawer{background:var(--surface-dark)}
html:not(.light-theme) .poem-card{background:#f5f2eb;color:#152332}

/* Light mode: every major surface, control and text element follows one palette. */
html.light-theme body{background:var(--surface-light-2);color:var(--text-light)}
html.light-theme body::before{opacity:.02}
html.light-theme header{
  background:rgba(255,250,240,.94);
  color:var(--text-light);
  border-color:#b99b6840;
  box-shadow:0 10px 30px #62441f12;
}
html.light-theme header .brand{color:#79502e}
html.light-theme header .brand span{color:#705d43;border-color:#b99b6840}
html.light-theme header .header-note{color:#705d43}
html.light-theme header>.index-toggle{
  background:#b99b6810;
  color:#79502e;
  border-color:#b99b6880;
}
html.light-theme .home-intro{
  background:var(--surface-light);
  color:var(--text-light);
  border-color:#b99b6845;
  box-shadow:0 16px 45px #62441f14;
}
html.light-theme .home-intro .eyebrow{background:#b99b6810;border-color:#b99b6855;color:#79502e}
html.light-theme .home-intro .home-lead{color:#62441f}
html.light-theme .home-about h2,
html.light-theme .home-about p{color:#62441f}
html.light-theme .poetry-themes span{color:#79502e;border-color:#b99b6855}
html.light-theme .poet-home-link{color:#79502e;border-color:#b99b6855}
html.light-theme .upcoming-poems{border-color:#b99b6855}
html.light-theme .upcoming-poems h2,
html.light-theme .upcoming-poems p{color:#62441f}
html.light-theme footer{background:var(--surface-light);color:#705d43;border-color:#b99b6840}
html.light-theme .footer-brand{color:#79502e}
html.light-theme .index-title{color:#352d23}
html.light-theme .index-title span,
html.light-theme nav small,
html.light-theme .aside-note{color:#796243}
html.light-theme nav a{border-color:#b99b6835}
html.light-theme nav a[aria-current=true]{background:#eadcc6;border-right-color:#a97843}
html.light-theme nav a:hover{background:#f0e5d2}
html.light-theme .number,
html.light-theme .arrow{color:#79502e}
html.light-theme article.poem-card{
  background:var(--surface-light);
  color:var(--text-light);
  box-shadow:0 18px 45px #62441f18;
}
html.light-theme .paper-top,
html.light-theme .paper-bottom{color:#705d43}
html.light-theme .paper-top>span:first-child,
html.light-theme .page{color:#79502e}
html.light-theme .poet{color:#796b5b}
html.light-theme .ornament{color:#a97843}
html.light-theme .poem-details button,
html.light-theme .poem-extras button,
html.light-theme .poem-extras select,
html.light-theme .font-toggle,
html.light-theme .theme-toggle,
html.light-theme .verse-share,
html.light-theme .random-quote button,
html.light-theme .resume-reading{
  background:#f5eddd;
  color:#62441f;
  border-color:#b99b68;
}
html.light-theme .poem-extras p,
html.light-theme .meaning-hint,
html.light-theme .writing-date{color:#796243}
html.light-theme .poem-extras details,
html.light-theme .verse-explanations,
html.light-theme .poem-timeline{border-color:#b99b6855}
html.light-theme .poem-extras summary,
html.light-theme .verse-explanations summary,
html.light-theme .verse-explanations h3,
html.light-theme .poem-timeline summary{color:#62441f}
html.light-theme .private-note{border-color:#b99b6880}
html.light-theme .private-note textarea{background:#fffaf0;color:#352d23;border-color:#b99b68}
html.light-theme #poem-drawer{
  background:#fffaf0;
  color:#352d23;
  border-color:#b99b6880;
  box-shadow:-20px 0 60px #62441f20;
}
html.light-theme .drawer-heading h2,
html.light-theme .drawer-home,
html.light-theme .drawer-author-note h3{color:#79502e}
html.light-theme #close-index{color:#79502e;border-color:#b99b6880}
html.light-theme .drawer-author-note{background:#f5eddd;border-color:#b99b6855}
html.light-theme .drawer-author-note p{color:#62441f}
html.light-theme #reading-toolbar{color:#62441f}
html.light-theme #reading-toolbar>a{color:#79502e}
html.light-theme .site-toast{background:#fffaf0;color:#62441f;border-color:#b99b68;box-shadow:0 8px 30px #62441f20}
html.light-theme .dhikr-watermark{background:#fffaf0;color:#62441f;border-color:#b99b6866}
html.light-theme .daily-poem,
html.light-theme .random-quote,
html.light-theme .diwan-stats span{background:#f5eddd;color:#62441f;border-color:#b99b6880}
html.light-theme .daily-poem a{color:#79502e}
html.light-theme .poem-pagination a{color:#62441f;border-color:#b99b6880}
html.light-theme .poem-pagination a:hover{background:#eadcc6}
html.light-theme .meaning-dialog{background:#fffaf0;color:#352d23;border-color:#b99b68}
html.light-theme .meaning-dialog::backdrop{background:#352d2388}
html.light-theme .ornate-seal{border-color:#b99b68}
html.light-theme .ornate-seal .seal-ornament{color:#99723f}
html.light-theme .poem-card .verses::after{color:#705d43}
html.light-theme .poet-profile{color:#352d23}
html.light-theme .poet-profile h1,
html.light-theme .poet-alias,
html.light-theme .poet-profile .author-seal{color:#79502e}
html.light-theme .poet-photo-slot{background:#f5eddd;border-color:#b99b6866;color:#79502e}
html.light-theme .poet-profile section p{color:#62441f}
html.light-theme .poet-back{color:#79502e;border-color:#b99b68}
html.light-theme .poet-motto{border-color:#b99b6866}
html.light-theme .poet-memory{color:#79502e}

/* Theme toggle remains an icon, with the same copper accent in both modes. */
html.light-theme #home .home-theme-toggle{color:#79502e}
html.light-theme #home .home-theme-toggle:hover{color:#a97843}