/* ================================================
   THE CLOUD OF UNKNOWING — PWA Styles
   A contemplative, monastic reading experience
   ================================================ */

/* ── CSS Custom Properties ─────────────────────── */
:root {
  /* Light mode (parchment) */
  --bg-primary:        #f7f2e9;
  --bg-secondary:      #ede7d9;
  --bg-header:         rgba(247, 242, 233, 0.88);
  --bg-toc:            #f0e9db;
  --bg-nav:            #ede7d9;

  --text-primary:      #2c1a0e;
  --text-secondary:    #5c4030;
  --text-muted:        #8a6a52;
  --text-header:       #2c1a0e;

  --accent:            #7a5230;
  --accent-light:      #c49a6c;
  --accent-rule:       #c4a882;
  --border:            #d6c9b4;

  --drop-cap-color:    #5c3318;
  --link-color:        #7a5230;

  --shadow-header:     0 1px 12px rgba(44, 26, 14, 0.10);
  --shadow-toc:        4px 0 32px rgba(44, 26, 14, 0.18);
  --shadow-nav-btn:    0 2px 8px rgba(44, 26, 14, 0.12);

  --progress-fill:     #a0702a;
  --progress-track:    #d6c9b4;

  --meta-theme:        #2c1a0e;
  --read-bg:           rgba(122, 82, 48, 0.06);

  /* Typography */
  --font-body:         'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-display:      'Cinzel', 'Palatino Linotype', 'Book Antiqua', serif;

  /* Spacing & Layout */
  --header-height:     60px;
  --content-max-width: 66ch;
  --content-padding:   1.5rem;
  --toc-width:         min(320px, 85vw);

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-med:    280ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-toc:    340ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark mode overrides */
[data-theme="dark"] {
  --bg-primary:        #0e0b08;
  --bg-secondary:      #1a1410;
  --bg-header:         rgba(14, 11, 8, 0.90);
  --bg-toc:            #141009;
  --bg-nav:            #1a1410;

  --text-primary:      #e8dcc8;
  --text-secondary:    #c4a882;
  --text-muted:        #8a7060;
  --text-header:       #e8dcc8;

  --accent:            #c49a6c;
  --accent-light:      #a07840;
  --accent-rule:       #4a3820;
  --border:            #2e2218;

  --drop-cap-color:    #d4a870;
  --link-color:        #c49a6c;

  --shadow-header:     0 1px 16px rgba(0, 0, 0, 0.40);
  --shadow-toc:        4px 0 40px rgba(0, 0, 0, 0.60);
  --shadow-nav-btn:    0 2px 8px rgba(0, 0, 0, 0.30);

  --progress-fill:     #c49a6c;
  --progress-track:    #2e2218;

  --meta-theme:        #0e0b08;
  --read-bg:           rgba(196, 154, 108, 0.08);
}


/* ── Reset & Base ───────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 18px; /* comfortable base for long-form reading */
}

body {
  font-family:        var(--font-body);
  background-color:   var(--bg-primary);
  color:              var(--text-primary);
  line-height:        1.75;
  min-height:         100dvh;
  transition:         background-color var(--transition-med),
                      color var(--transition-med);
  /* Subtle parchment texture via CSS */
  background-image:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
}

[data-theme="dark"] body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}


/* ── Icon Button (shared) ───────────────────────── */
.icon-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           40px;
  height:          40px;
  padding:         0;
  background:      transparent;
  border:          none;
  border-radius:   6px;
  color:           var(--text-header);
  cursor:          pointer;
  transition:      background-color var(--transition-fast),
                   color var(--transition-fast);
  flex-shrink:     0;
}
.icon-btn:hover {
  background-color: var(--bg-secondary);
}
.icon-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.icon-btn svg {
  width:  22px;
  height: 22px;
}


/* ── Site Header ────────────────────────────────── */
.site-header {
  position:         sticky;
  top:              0;
  z-index:          100;
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  gap:              0.75rem;
  height:           var(--header-height);
  padding:          0 1rem;
  background-color: var(--bg-header);
  backdrop-filter:  blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  border-bottom:    1px solid var(--border);
  box-shadow:       var(--shadow-header);
  transition:       background-color var(--transition-med),
                    border-color var(--transition-med),
                    box-shadow var(--transition-med);
}

.header-title-group {
  flex:        1;
  text-align:  center;
  overflow:    hidden;
}

.header-eyebrow {
  display:        block;
  font-family:    var(--font-display);
  font-size:      0.5rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color:          var(--text-muted);
  line-height:    1;
  margin-bottom:  1px;
}

.header-title {
  font-family:     var(--font-display);
  font-size:       clamp(0.75rem, 2.5vw, 1rem);
  font-weight:     600;
  letter-spacing:  0.04em;
  color:           var(--text-header);
  white-space:     nowrap;
  overflow:        hidden;
  text-overflow:   ellipsis;
  line-height:     1.2;
}


/* ── Progress Bar ───────────────────────────────── */
.progress-bar-track {
  position:         sticky;
  top:              var(--header-height);
  z-index:          90;
  height:           2px;
  background-color: var(--progress-track);
  transition:       background-color var(--transition-med);
}

.progress-bar-fill {
  height:           100%;
  width:            0%;
  background-color: var(--progress-fill);
  transition:       width 100ms linear,
                    background-color var(--transition-med);
}


/* ── TOC Overlay ────────────────────────────────── */
.toc-overlay {
  position:         fixed;
  inset:            0;
  z-index:          200;
  background-color: rgba(14, 11, 8, 0.5);
  backdrop-filter:  blur(2px);
  opacity:          0;
  pointer-events:   none;
  transition:       opacity var(--transition-toc);
}

.toc-overlay.is-open {
  opacity:        1;
  pointer-events: auto;
}


/* ── TOC Sidebar ────────────────────────────────── */
.toc-sidebar {
  position:         fixed;
  top:              0;
  left:             0;
  bottom:           0;
  z-index:          210;
  width:            var(--toc-width);
  background-color: var(--bg-toc);
  border-right:     1px solid var(--border);
  box-shadow:       var(--shadow-toc);
  overflow-y:       auto;
  overscroll-behavior: contain;
  transform:        translateX(-100%);
  transition:       transform var(--transition-toc),
                    background-color var(--transition-med),
                    border-color var(--transition-med);

  /* Custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--accent-rule) transparent;
}

.toc-sidebar::-webkit-scrollbar { width: 4px; }
.toc-sidebar::-webkit-scrollbar-track { background: transparent; }
.toc-sidebar::-webkit-scrollbar-thumb { background-color: var(--accent-rule); border-radius: 2px; }

.toc-sidebar.is-open {
  transform: translateX(0);
}

.toc-header {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  padding:          1.1rem 1rem 1rem 1.25rem;
  border-bottom:    1px solid var(--border);
  position:         sticky;
  top:              0;
  background-color: var(--bg-toc);
  z-index:          1;
}

.toc-label {
  font-family:    var(--font-display);
  font-size:      0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          var(--text-muted);
}

.toc-close-btn {
  color: var(--text-muted);
}

.toc-list {
  list-style:  none;
  padding:     0.5rem 0 2rem;
}

.toc-item {
  border-bottom: 1px solid var(--border);
}

.toc-link {
  display:         block;
  width:           100%;
  padding:         0.65rem 1.25rem;
  background:      transparent;
  border:          none;
  font-family:     var(--font-body);
  font-size:       0.82rem;
  color:           var(--text-secondary);
  text-decoration: none;
  text-align:      left;
  line-height:     1.4;
  transition:      background-color var(--transition-fast),
                   color var(--transition-fast);
  cursor:          pointer;
}

.toc-link:hover {
  background-color: var(--bg-secondary);
  color:            var(--text-primary);
}

.toc-link.is-active {
  background-color: var(--bg-secondary);
  color:            var(--accent);
  font-style:       italic;
  border-left:      3px solid var(--accent);
  padding-left:     calc(1.25rem - 3px);
}

.toc-num-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   2px;
}

.toc-chapter-number {
  font-family:    var(--font-display);
  font-size:      0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--text-muted);
}

.toc-check {
  font-size:     0.62rem;
  font-weight:   700;
  color:         var(--accent);
  opacity:       0;
  flex-shrink:   0;
  padding:       1px 5px;
  border-radius: 3px;
  transition:    opacity var(--transition-fast),
                 background-color var(--transition-fast);
}

.toc-item.is-read .toc-check {
  opacity:          1;
  background-color: rgba(122, 82, 48, 0.15);
}

[data-theme="dark"] .toc-item.is-read .toc-check {
  background-color: rgba(196, 154, 108, 0.18);
}

.toc-item.is-read {
  background-color: var(--read-bg);
}

.toc-item.is-read .toc-chapter-number {
  color: var(--accent);
}

.toc-progress-track {
  height:           3px;
  background-color: var(--border);
  transition:       background-color var(--transition-med);
}

.toc-progress-fill {
  height:           100%;
  width:            0%;
  background-color: var(--accent);
  transition:       width 500ms ease,
                    background-color var(--transition-med);
}


/* ── Main Content ───────────────────────────────── */
.main-content {
  padding-top:    2.5rem;
  padding-bottom: 5rem;
  min-height:     calc(100dvh - var(--header-height));
}


/* ── Chapter Display ────────────────────────────── */
.chapter-display {
  max-width:   var(--content-max-width);
  margin:      0 auto;
  padding:     0 var(--content-padding);
  animation:   fadeIn 400ms ease both;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Chapter header area */
.chapter-header {
  text-align:     center;
  margin-bottom:  2.5rem;
  padding-bottom: 2rem;
  border-bottom:  1px solid var(--border);
}

.chapter-eyebrow {
  font-family:    var(--font-display);
  font-size:      0.65rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color:          var(--text-muted);
  display:        block;
  margin-bottom:  0.75rem;
}

.chapter-title {
  font-family:    var(--font-display);
  font-size:      clamp(1.1rem, 4vw, 1.5rem);
  font-weight:    400;
  letter-spacing: 0.02em;
  color:          var(--text-primary);
  line-height:    1.35;
  margin-bottom:  1.5rem;
}

/* Ornamental rule beneath chapter title */
.ornament {
  display:     block;
  text-align:  center;
  color:       var(--accent-rule);
  font-size:   1.1rem;
  line-height: 1;
  user-select: none;
  letter-spacing: 0.4em;
}


/* ── Body Typography ────────────────────────────── */
.chapter-body p {
  margin-bottom: 1.4em;
  font-size:     1rem;
  text-align:    justify;
  hanging-punctuation: first last;
}

/* Drop cap on the very first paragraph */
.chapter-body p:first-child::first-letter {
  float:         left;
  font-family:   var(--font-display);
  font-size:     4.2em;
  font-weight:   600;
  line-height:   0.78;
  margin-right:  0.08em;
  margin-top:    0.08em;
  color:         var(--drop-cap-color);
}

.chapter-body em {
  font-style: italic;
}

.chapter-body strong {
  font-weight: 600;
  color:       var(--text-primary);
}

/* Placeholder styling for chapters not yet filled in */
.chapter-body .placeholder-notice {
  margin-top:       2rem;
  padding:          1.25rem 1.5rem;
  border:           1px dashed var(--border);
  border-radius:    4px;
  background-color: var(--bg-secondary);
  font-size:        0.82rem;
  color:            var(--text-muted);
  font-style:       italic;
  text-align:       center;
  line-height:      1.6;
}

.chapter-body .placeholder-notice a {
  color:           var(--link-color);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ── Chapter Nav ────────────────────────────────── */
.chapter-nav {
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  gap:            1rem;
  max-width:      var(--content-max-width);
  margin:         3.5rem auto 0;
  padding:        2rem var(--content-padding) 0;
  border-top:     1px solid var(--border);
}

.nav-btn {
  display:         flex;
  align-items:     center;
  gap:             0.4rem;
  padding:         0.6rem 1.1rem;
  background-color: var(--bg-nav);
  color:           var(--text-secondary);
  border:          1px solid var(--border);
  border-radius:   4px;
  font-family:     var(--font-display);
  font-size:       0.7rem;
  letter-spacing:  0.12em;
  text-transform:  uppercase;
  cursor:          pointer;
  transition:      background-color var(--transition-fast),
                   color var(--transition-fast),
                   border-color var(--transition-fast),
                   box-shadow var(--transition-fast);
}

.nav-btn:hover:not(:disabled) {
  background-color: var(--bg-secondary);
  color:            var(--text-primary);
  box-shadow:       var(--shadow-nav-btn);
}

.nav-btn:focus-visible {
  outline:        2px solid var(--accent);
  outline-offset: 2px;
}

.nav-btn:disabled {
  opacity:    0.35;
  cursor:     not-allowed;
}

.nav-btn svg {
  width:  16px;
  height: 16px;
  flex-shrink: 0;
}

.chapter-indicator {
  font-family:      var(--font-display);
  font-size:        0.62rem;
  letter-spacing:   0.2em;
  text-transform:   uppercase;
  color:            var(--text-muted);
  text-align:       center;
  flex:             1;
  background:       transparent;
  border:           none;
  padding:          0.3rem 0.5rem;
  border-radius:    4px;
  cursor:           pointer;
  transition:       color var(--transition-fast),
                    background-color var(--transition-fast);
}

.chapter-indicator:hover {
  color:            var(--text-secondary);
  background-color: var(--bg-secondary);
}

.chapter-indicator:focus-visible {
  outline:        2px solid var(--accent);
  outline-offset: 2px;
}


/* ── Back to Top ────────────────────────────────── */
.back-to-top {
  position:         fixed;
  bottom:           2rem;
  right:            1.25rem;
  z-index:          80;
  width:            42px;
  height:           42px;
  background-color: var(--accent);
  border:           none;
  border-radius:    50%;
  color:            var(--bg-primary);
  cursor:           pointer;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  box-shadow:       0 3px 12px rgba(0, 0, 0, 0.20);
  transition:       opacity var(--transition-fast),
                    transform var(--transition-fast),
                    background-color var(--transition-fast);
  opacity:          0;
  pointer-events:   none;
}

.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.back-to-top:hover {
  background-color: var(--accent-light);
  transform:        translateY(-2px);
}

.back-to-top svg {
  width:  18px;
  height: 18px;
}


/* ── Read Bar ───────────────────────────────────── */
.read-bar {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             0.8rem;
  max-width:       var(--content-max-width);
  margin:          2.5rem auto 0;
  padding:         1.75rem var(--content-padding) 2rem;
  border-top:      1px solid var(--border);
}

.read-toggle {
  display:          inline-flex;
  align-items:      center;
  gap:              0.45rem;
  padding:          0.5rem 1.4rem;
  background:       transparent;
  border:           1px solid var(--border);
  border-radius:    999px;
  color:            var(--text-muted);
  font-family:      var(--font-display);
  font-size:        0.62rem;
  letter-spacing:   0.18em;
  text-transform:   uppercase;
  cursor:           pointer;
  transition:       border-color var(--transition-fast),
                    color var(--transition-fast);
}

.read-toggle:hover {
  border-color: var(--accent-light);
  color:        var(--text-secondary);
}

.read-toggle:focus-visible {
  outline:        2px solid var(--accent);
  outline-offset: 2px;
}

.read-toggle.is-read {
  border-color: var(--accent);
  color:        var(--accent);
}

.read-toggle.is-read:hover {
  border-color: var(--accent-light);
  color:        var(--text-secondary);
}

.read-toggle svg {
  width:       13px;
  height:      13px;
  flex-shrink: 0;
}


/* ── Chapter Read Badge ─────────────────────────── */
.chapter-read-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            0.3em;
  margin-top:     0.65rem;
  padding:        0.2rem 0.7rem;
  border:         1px solid var(--accent);
  border-radius:  999px;
  font-family:    var(--font-display);
  font-size:      0.52rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--accent);
  user-select:    none;
  animation:      fadeIn 300ms ease both;
}

.chapter-read-badge svg {
  width:       9px;
  height:      9px;
  flex-shrink: 0;
}


/* ── Next Unread Button ──────────────────────────── */
.next-unread-btn {
  display:          inline-flex;
  align-items:      center;
  gap:              0.5rem;
  padding:          0.5rem 1.35rem;
  background-color: var(--accent);
  color:            var(--bg-primary);
  border:           none;
  border-radius:    999px;
  font-family:      var(--font-display);
  font-size:        0.6rem;
  letter-spacing:   0.15em;
  text-transform:   uppercase;
  cursor:           pointer;
  transition:       opacity var(--transition-fast),
                    transform var(--transition-fast);
  animation:        fadeIn 300ms ease both;
}

.next-unread-btn:hover {
  opacity:   0.85;
  transform: translateX(3px);
}

.next-unread-btn:focus-visible {
  outline:        2px solid var(--accent);
  outline-offset: 3px;
}

.next-unread-btn svg {
  width:       13px;
  height:      13px;
  flex-shrink: 0;
}

.all-read-msg {
  font-family:    var(--font-display);
  font-size:      0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          var(--accent);
}


/* ── Responsive Tweaks ──────────────────────────── */
@media (max-width: 480px) {
  html { font-size: 17px; }

  .chapter-nav {
    flex-wrap: wrap;
  }
  .chapter-indicator {
    order:  -1;
    flex:   0 0 100%;
    margin-bottom: 0.25rem;
  }
}

@media (min-width: 768px) {
  html { font-size: 19px; }
  :root {
    --content-padding: 2rem;
  }
}

@media (min-width: 1100px) {
  html { font-size: 20px; }
}

/* ── Print Styles ───────────────────────────────── */
@media print {
  .site-header,
  .toc-sidebar,
  .toc-overlay,
  .chapter-nav,
  .read-bar,
  .back-to-top,
  .progress-bar-track { display: none; }

  .chapter-display {
    max-width: 100%;
    padding:   0;
  }
}

/* ── Site footer ────────────────────────────────── */
.site-footer {
  text-align: center;
  padding: 2rem 1rem 3rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
}

.footer-link {
  color: var(--accent);
  text-decoration: none;
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}

.footer-link:hover,
.footer-link:focus-visible {
  opacity: 1;
  text-decoration: underline;
}