:root{
      --bg: #0b0c10;
      --panel: rgba(255,255,255,0.06);
      --panel-2: rgba(255,255,255,0.04);
      --text: rgba(255,255,255,0.92);
      --muted: rgba(255,255,255,0.68);
      --faint: rgba(255,255,255,0.52);
      --line: rgba(255,255,255,0.12);
      --accent: #9ad7ff;
      --accent-2: #ffd36a;

      --radius: 18px;
      --max: 980px;
      --shadow: 0 12px 40px rgba(0,0,0,0.35);
    }

    *{ box-sizing: border-box; }
    html, body{ height: 100%; }
    body{
      margin: 0;
      background:
        radial-gradient(1200px 700px at 15% -5%, rgba(154,215,255,0.18), transparent 55%),
        radial-gradient(900px 600px at 95% 15%, rgba(255,211,106,0.14), transparent 50%),
        radial-gradient(900px 700px at 50% 110%, rgba(154,215,255,0.10), transparent 55%),
        var(--bg);
      color: var(--text);
      font: 16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      letter-spacing: 0.2px;
    }

    a{ color: var(--accent); text-decoration: none; }
    a:hover{ text-decoration: underline; }

    .wrap{
      max-width: var(--max);
      margin: 0 auto;
      padding: 36px 18px 72px;
    }

/* Ad CSS */
.site-ad {
  margin: 3rem auto 2rem;
  max-width: 900px;
  opacity: 0.9;
}

.site-ad img {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  transition: opacity 0.2s ease;
}

.site-ad img:hover {
  opacity: 1;
}


    /* Top header (small, unobtrusive) */
    header.site{
      display: grid;
      gap: 14px;
      padding: 20px 22px;
      border: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      backdrop-filter: blur(8px);
    }
    .brand{
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
    }
    .brand h1{
      margin: 0;
      font-size: 22px;
      font-weight: 650;
      letter-spacing: 0.3px;
    }
    .brand .tag{
      color: var(--muted);
      font-size: 14px;
      white-space: nowrap;
    }
    nav{
      display: flex;
      flex-wrap: wrap;
      gap: 10px 14px;
      align-items: center;
    }
    .pill{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255,255,255,0.03);
      color: var(--text);
      font-size: 14px;
    }
    .pill strong{
      color: var(--accent-2);
      font-weight: 650;
      letter-spacing: 0.2px;
    }

    /* Sections */
    section{
      margin-top: 18px;
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255,255,255,0.03);
      box-shadow: 0 10px 30px rgba(0,0,0,0.22);
      backdrop-filter: blur(6px);
    }
    section h2{
      margin: 0 0 10px;
      font-size: 15px;
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.14em;
    }
    .about{
      display: grid;
      gap: 10px;
    }
    .about p{
      margin: 0;
      color: var(--text);
    }

    /* Upcoming books */
    .grid{
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 14px;
    }
    .book{
      grid-column: span 12;
      display: grid;
      grid-template-columns: 120px 1fr;
      gap: 14px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: rgba(255,255,255,0.03);
    }
    .cover-img{
      width: 120px;
      aspect-ratio: 2/3;
      border-radius: 12px;
      border: 1px solid var(--line);
      overflow: hidden;
      background: rgba(255,255,255,0.02);
      display: block;
    }
    .cover-img img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .book h3{
      margin: 0 0 6px;
      font-size: 18px;
      font-weight: 700;
    }
    .book .meta{
      margin: 0 0 8px;
      color: var(--muted);
      font-size: 13px;
    }
    .book p{
      margin: 0;
      color: var(--text);
    }

    /* Posts */
    .posts{
      display: grid;
      gap: 14px;
    }
    article.post{
      padding: 16px 16px 14px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: rgba(255,255,255,0.025);
    }
    article.post header{
      display: grid;
      gap: 6px;
      margin-bottom: 10px;
    }
    .post h3{
      margin: 0;
      font-size: 20px;
      font-weight: 750;
      letter-spacing: 0.2px;
    }
    .post .date{
      color: var(--muted);
      font-size: 13px;
    }
    .post .content{
      color: var(--text);
      white-space: pre-wrap; /* keeps line breaks */
    }
    .post .content p{ margin: 0 0 10px; }

    footer{
      margin-top: 18px;
      color: var(--faint);
      font-size: 13px;
      text-align: center;
      padding: 10px 0 0;
    }

    @media (min-width: 760px){
      .book{ grid-template-columns: 140px 1fr; }
      .cover-img{ width: 140px; }
    }
  
/* Author portrait, complete cover display, and collapsible posts */
.author-photo { float: right; width: 145px; max-width: 35%; height: auto; margin: 0 0 16px 24px; border-radius: 12px; }
.about::after { content: ""; display: block; clear: both; }
.cover-img { height: auto; aspect-ratio: auto; }
.cover-img img { height: auto; object-fit: contain; }
.next-book { display: grid; grid-template-columns: 200px minmax(0,1fr); gap: 28px; align-items: start; }
.next-book > img { width: 100%; height: auto; }
.next-book h3 { margin-top: 0; font-size: 24px; line-height: 1.25; }
.next-book p { margin: 0 0 16px; }
.next-book li { margin-bottom: 10px; }
details.post { border-bottom: 1px solid var(--line); padding: 0; }
details.post summary { cursor: pointer; padding: 16px 6px; }
.post-title { font-size: 19px; font-weight: 700; }
summary .date { display: block; margin: 5px 0 0 20px; }
details.post .content { padding: 12px 6px 20px; white-space: normal; }
details.post .content p { margin-bottom: 16px; }
summary:hover { color: var(--accent); }
summary:focus-visible, a:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 4px; }
@media (max-width: 620px) { .next-book { grid-template-columns: 1fr; } .next-book > img { max-width: 240px; margin: auto; } .author-photo { width: 105px; margin-left: 14px; } }