/* ==========================================================================
   The Archive — "Lantern" design.
   Graphite-first: graphite ground with an ambient grape/salmon glow,
   porcelain text, content floating on translucent sheets. Salmon is the
   call-to-action, grape the second voice. Light and sepia re-derive the
   same tokens; theme comes from data-theme, set pre-paint.
   ========================================================================== */

:root {
  --paper:        #343330;
  --surface:      #3e3d38;
  --ink:          #fdfff7;
  --ink-soft:     #b0b8b6;
  --ink-faint:    #77878b;
  --rule:         #4c4b45;
  --rule-soft:    #413f3a;
  --accent:       #a7a3d9;   /* grape, lifted for contrast on graphite */
  --accent-ink:   #343330;
  --accent-solid: #726da8;   /* true grape, for fills with white text */
  --accent-soft:  #454356;
  --cta:          #ff958c;
  --cta-ink:      #343330;

  /* Lantern atmosphere */
  --glow-a: rgba(114, 109, 168, 0.28);
  --glow-b: rgba(255, 149, 140, 0.10);
  --sheet: rgba(62, 61, 56, 0.62);
  --sheet-border: rgba(253, 255, 247, 0.09);
  --sheet-strong: rgba(62, 61, 56, 0.80);

  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-prose: "Newsreader", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* Reader preferences, overridden per-user from localStorage pre-paint */
  --reader-size: 19px;
  --reader-measure: 68ch;
  --reader-leading: 1.75;

  color-scheme: dark;
}

[data-theme="light"] {
  --paper:        #fdfff7;
  --surface:      #ffffff;
  --ink:          #343330;
  --ink-soft:     #5e6c70;
  --ink-faint:    #77878b;
  --rule:         #e2e2d8;
  --rule-soft:    #eeeee4;
  --accent:       #726da8;
  --accent-ink:   #ffffff;
  --accent-solid: #726da8;
  --accent-soft:  #e9e8f4;
  --cta:          #ff958c;
  --cta-ink:      #343330;
  --glow-a: rgba(114, 109, 168, 0.13);
  --glow-b: rgba(255, 149, 140, 0.12);
  --sheet: rgba(255, 255, 255, 0.72);
  --sheet-border: rgba(52, 51, 48, 0.10);
  --sheet-strong: rgba(255, 255, 255, 0.88);
  color-scheme: light;
}

[data-theme="sepia"] {
  --paper:        #f3ecdc;
  --surface:      #faf5e9;
  --ink:          #3d3830;
  --ink-soft:     #6b6353;
  --ink-faint:    #93886f;
  --rule:         #ddd4bc;
  --rule-soft:    #e8e0cd;
  --accent:       #67629c;
  --accent-ink:   #faf5e9;
  --accent-solid: #67629c;
  --accent-soft:  #e7e1d4;
  --cta:          #f28a80;
  --cta-ink:      #343330;
  --glow-a: rgba(114, 109, 168, 0.10);
  --glow-b: rgba(255, 149, 140, 0.14);
  --sheet: rgba(250, 245, 233, 0.72);
  --sheet-border: rgba(61, 56, 48, 0.12);
  --sheet-strong: rgba(250, 245, 233, 0.90);
  color-scheme: light;
}

/* Explicit dark = the default graphite look; kept so a stored "dark"
   choice always wins. */
[data-theme="dark"] {
  --paper:        #343330;
  --surface:      #3e3d38;
  --ink:          #fdfff7;
  --ink-soft:     #b0b8b6;
  --ink-faint:    #77878b;
  --rule:         #4c4b45;
  --rule-soft:    #413f3a;
  --accent:       #a7a3d9;
  --accent-ink:   #343330;
  --accent-solid: #726da8;
  --accent-soft:  #454356;
  --cta:          #ff958c;
  --cta-ink:      #343330;
  --glow-a: rgba(114, 109, 168, 0.28);
  --glow-b: rgba(255, 149, 140, 0.10);
  --sheet: rgba(62, 61, 56, 0.62);
  --sheet-border: rgba(253, 255, 247, 0.09);
  --sheet-strong: rgba(62, 61, 56, 0.80);
  color-scheme: dark;
}

[data-font="sans"] { --font-prose: var(--font-ui); }

/* ---------- base ---------- */

* { box-sizing: border-box; }

.skip-link {
  position: absolute;
  left: -999px;
  top: .5rem;
  z-index: 10;
  background: var(--accent-solid);
  color: #fff;
  padding: .5rem 1rem;
  border-radius: 8px;
}
.skip-link:focus { left: .5rem; text-decoration: none; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(90rem 42rem at 80% -20%, var(--glow-a), transparent 60%),
    radial-gradient(60rem 30rem at 0% 110%, var(--glow-b), transparent 55%),
    var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Wide chrome, narrow prose: browsing surfaces get the full column,
   while reading surfaces (.sheet, .comments, .prose) cap themselves
   at the reader's measure regardless of shell width. */
.shell {
  width: 100%;
  max-width: 75rem;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
}

/* ---------- header / footer ---------- */

.site-header { border-bottom: 1px solid var(--sheet-border); }

.header-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}

.brand {
  font-family: var(--font-prose);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.brand:hover { text-decoration: none; color: var(--cta); }

.site-nav { display: flex; gap: 1.25rem; font-size: .9rem; }
.site-nav a { color: var(--ink-soft); }
.site-nav a:hover { color: var(--accent); }

/* header: [hamburger][brand] ......... [profile] */
.header-left { display: flex; align-items: center; gap: .85rem; }

.header-user { display: flex; align-items: center; gap: .75rem; position: relative; }

.btn-compact { padding: .35rem .85rem; font-size: .85rem; }

/* Mirrors .drawer-toggle so the header's two icon buttons read as a pair. */
.avatar-btn {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--accent-soft);
  color: var(--ink);   /* white icon on graphite, matching the hamburger */
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.avatar-btn:hover,
.avatar-btn:focus-visible,
.avatar-btn[aria-expanded="true"] { background: var(--accent-solid); color: #fff; }

/* Floating sheet, same surface language as the reader settings panel. */
.profile-menu {
  position: absolute;
  top: calc(100% + .6rem);
  right: 0;
  min-width: 12.5rem;
  background: var(--sheet-strong);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--sheet-border);
  border-radius: 14px;
  padding: .4rem;
  display: flex;
  flex-direction: column;
  z-index: 70;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}
.profile-menu[hidden] { display: none; }

.profile-menu-label {
  font-size: .75rem;
  color: var(--ink-faint);
  margin: 0 0 .3rem;
  padding: .45rem .6rem .55rem;
  border-bottom: 1px solid var(--rule-soft);
}
.profile-menu-label strong { color: var(--ink-soft); }

.profile-menu a,
.profile-menu-logout button {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: .9rem;
  padding: .45rem .6rem;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.profile-menu a:hover, .profile-menu a:focus-visible,
.profile-menu-logout button:hover, .profile-menu-logout button:focus-visible {
  background: var(--rule-soft);
  text-decoration: none;
}

.profile-menu-logout {
  margin: .3rem 0 0;
  padding-top: .3rem;
  border-top: 1px solid var(--rule-soft);
}
.profile-menu-logout button { color: var(--cta); }

main.shell { flex: 1; padding-top: 2.25rem; padding-bottom: 4rem; }

.site-footer {
  border-top: 1px solid var(--sheet-border);
  padding: 1.25rem 0 2rem;
  font-size: .8rem;
  color: var(--ink-faint);
}
.foot-sep { margin: 0 .5rem; }
.footer-row { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; }
.footer-nav { display: flex; gap: 1rem; }
.footer-nav a { color: var(--ink-faint); }
.footer-nav a:hover { color: var(--accent); }

/* ---------- studio ---------- */

.studio-form { display: flex; flex-direction: column; gap: 1.1rem; max-width: 34rem; }
.studio-form-wide { max-width: 46rem; }
.studio-form textarea, .studio-form input[type="text"], .studio-form select,
.studio-form input[type="datetime-local"] {
  font: inherit;
  padding: .5rem .8rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  width: 100%;
}
.studio-form textarea[name="body_html"] { font-family: var(--font-prose); line-height: 1.6; }
.studio-form-actions { display: flex; gap: .6rem; }

.field-tags ul { list-style: none; margin: .25rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .15rem .8rem; }
.field-tags li label { display: flex; gap: .45rem; align-items: baseline; font-size: .85rem; color: var(--ink-soft); font-weight: 400; }
.field-tags input[type="checkbox"] { width: auto; accent-color: var(--accent-solid); }

/* studio chapter list: move controls beside each row */
.studio-ch-row { display: flex; align-items: center; gap: .35rem; }
.studio-ch-row .toc-link { flex: 1; min-width: 0; }
.studio-ch-move { display: flex; gap: .2rem; flex: none; }
.move-btn {
  width: 1.7rem;
  height: 1.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: .85rem;
  border: 1px solid transparent;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--ink);
  cursor: pointer;
}
.move-btn:hover:not(:disabled) { background: var(--accent-solid); color: #fff; }
.move-btn:disabled { opacity: .3; cursor: default; }

.page-prose { margin: 1rem 0 3rem; }
.page-prose h1 { font-weight: 500; letter-spacing: -.015em; }
.page-prose h2 { font-size: 1.15rem; margin-top: 1.75em; }

/* ---------- shared bits ---------- */

.page-head { margin-bottom: 1.75rem; }
.page-head h1 {
  font-family: var(--font-prose);
  font-weight: 500;
  font-size: 1.9rem;
  letter-spacing: -0.015em;
  margin: 0 0 .25rem;
}
.page-sub { margin: 0; color: var(--ink-soft); }

.chip {
  display: inline-block;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .02em;
  padding: .16rem .6rem;
  border-radius: 999px;
  color: var(--accent);
  background: var(--accent-soft);
  margin: 0 .3rem .3rem 0;
}
.chip-status { background: rgba(255, 149, 140, .16); color: var(--cta); }
[data-theme="light"] .chip-status,
[data-theme="sepia"] .chip-status { background: rgba(255, 149, 140, .22); color: #b3574d; }

.btn {
  display: inline-block;
  font: inherit;
  font-size: .9rem;
  font-weight: 500;
  padding: .5rem 1.05rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  cursor: pointer;
}
.btn:hover { background: var(--accent-solid); color: #fff; text-decoration: none; }
/* Primary buttons are grape: #726DA8 on white text is 4.6:1 (AA). Salmon
   (--cta) stays for secondary accents; never put white text on salmon. */
.btn-primary { background: var(--accent-solid); border-color: var(--accent-solid); color: #fff; }
.btn-primary:hover { background: var(--accent-solid); color: #fff; filter: brightness(1.1); }

/* Pill controls — the reader's dock language */
.pill {
  font-family: var(--font-mono);
  font-size: .72rem;
  padding: .38rem .85rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
a.pill:hover, button.pill:hover { color: var(--ink); border-color: var(--accent); text-decoration: none; }
.pill-on {
  background: var(--accent-solid);
  border-color: var(--accent-solid);
  color: #fff;
}

.pill-quiet { background: transparent; border-color: transparent; cursor: default; }

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  margin-top: 2.25rem;
}

.page-eyebrow {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cta);
  margin: 0 0 .3rem;
}

/* browse: tag cloud */
.tag-group { margin-bottom: 2.25rem; }
.tag-group-head {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 .8rem;
}
.tag-cloud { display: flex; flex-wrap: wrap; gap: .5rem; }
.tag-pill {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  padding: .4rem .95rem;
  border-radius: 999px;
  background: var(--sheet);
  border: 1px solid var(--sheet-border);
  color: var(--ink);
  font-size: .9rem;
}
.tag-pill:hover { text-decoration: none; border-color: var(--accent); color: var(--accent); }
.tag-count { font-family: var(--font-mono); font-size: .7rem; color: var(--ink-faint); }

/* search */
.search-form { display: flex; gap: .5rem; max-width: 30rem; margin-top: .9rem; }
.search-input {
  flex: 1;
  font: inherit;
  padding: .5rem .9rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
}
.search-input::placeholder { color: var(--ink-faint); }
.search-count { margin-bottom: 1.25rem; }

.empty-state { text-align: center; padding: 4rem 1rem; color: var(--ink-soft); }

/* ---------- auth ---------- */

.nav-logout { display: inline; margin: 0; }
.nav-logout-btn {
  font: inherit;
  font-size: .9rem;
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink-soft);
  cursor: pointer;
}
.nav-logout-btn:hover { color: var(--accent); }

.auth-sheet {
  background: var(--sheet);
  border: 1px solid var(--sheet-border);
  border-radius: 16px;
  padding: 2rem clamp(1.25rem, 5vw, 2.25rem);
  max-width: 26rem;
  margin: 2rem auto;
}
.auth-title {
  font-family: var(--font-prose);
  font-weight: 500;
  font-size: 1.6rem;
  margin: 0 0 1.25rem;
}
.auth-form { display: flex; flex-direction: column; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: .3rem; }
.field-label { font-size: .78rem; font-weight: 600; letter-spacing: .04em; color: var(--ink-soft); }
.field input, .field-input {
  font: inherit;
  padding: .5rem .8rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  width: 100%;
}
.field-error { font-size: .78rem; color: var(--cta); }
.field-help { font-size: .72rem; color: var(--ink-faint); }
.field-help ul { margin: .2rem 0 0; padding-left: 1.1rem; }
.form-error {
  font-size: .85rem;
  color: var(--cta);
  background: rgba(255, 149, 140, .12);
  border-radius: 8px;
  padding: .6rem .9rem;
}
.auth-alt { margin-top: 1.25rem; font-size: .85rem; color: var(--ink-soft); }

/* ---------- library ---------- */

.lib-section { margin-bottom: 2.5rem; }
.lib-shelf, .lib-feed { list-style: none; margin: 0; padding: 0; }

.lib-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .8rem .2rem;
  border-bottom: 1px solid var(--sheet-border);
}
.lib-row-title { font-family: var(--font-prose); font-weight: 500; font-size: 1.1rem; margin: 0 0 .1rem; }
.lib-row-title a { color: var(--ink); }
.lib-row-title a:hover { color: var(--cta); text-decoration: none; }
.lib-row-state { margin: 0; font-size: .78rem; color: var(--ink-faint); }
.lib-row-actions { flex: none; }

.lib-feed-link {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  padding: .55rem .2rem;
  border-bottom: 1px solid var(--sheet-border);
  color: var(--ink);
}
.lib-feed-link:hover { text-decoration: none; color: var(--cta); }
.lib-feed-work { font-weight: 600; font-size: .9rem; flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-feed-ch { font-size: .9rem; color: var(--ink-soft); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-feed-when { flex: none; font-size: .72rem; color: var(--ink-faint); }
.empty-state h2 { font-family: var(--font-prose); font-weight: 500; color: var(--ink); }

/* ---------- prose ---------- */

.prose {
  font-family: var(--font-prose);
  font-size: 1.05rem;
  line-height: 1.72;
  max-width: 68ch;
}
.prose p { margin: 0 0 1em; }
.prose blockquote {
  margin: 1.25em 0;
  padding-left: 1em;
  border-left: 2px solid var(--rule);
  color: var(--ink-soft);
}
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2em auto; width: 40%; }
.prose h2, .prose h3, .prose h4 { font-weight: 600; line-height: 1.3; }

/* ---------- browse: cover grid ---------- */

.work-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: 1.1rem;
}

.work-card {
  background: var(--sheet);
  border: 1px solid var(--sheet-border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .12s ease;
}
.work-card:hover { transform: translateY(-2px); }

.cover {
  display: block;
  aspect-ratio: 2 / 3;
  position: relative;
  overflow: hidden;
  color: var(--paper);
  text-decoration: none;
}
.cover:hover { text-decoration: none; }
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Placeholder covers until image uploads exist: a set of gradients keyed
   off the work id, with the title set like a printed jacket. */
.cover-ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: .9rem .85rem;
}
.cover-g0 { background: linear-gradient(160deg, #726da8 0%, #3f3c5e 70%, #343330 100%); }
.cover-g1 { background: linear-gradient(160deg, #ff958c 0%, #8c5a55 65%, #343330 100%); }
.cover-g2 { background: linear-gradient(160deg, #77878b 0%, #46535a 65%, #2a2926 100%); }
.cover-g3 { background: linear-gradient(160deg, #a7a3d9 0%, #5c588c 60%, #2f2d40 100%); }
.cover-g4 { background: linear-gradient(160deg, #d99a94 0%, #72555e 60%, #2e2a2e 100%); }

.cover-ph-title {
  font-family: var(--font-prose);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: #fdfff7;
  margin: 0 0 .2rem;
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
}
.cover-ph-by {
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(253,255,247,.75);
  margin: 0;
}

.work-card-body { padding: .8rem .9rem .95rem; display: flex; flex-direction: column; gap: .3rem; }
.work-card-title {
  font-family: var(--font-prose);
  font-weight: 500;
  font-size: 1.02rem;
  line-height: 1.25;
  letter-spacing: -.01em;
  margin: 0;
}
.work-card-title a { color: var(--ink); }
.work-card-title a:hover { color: var(--cta); text-decoration: none; }
.work-card-credits { margin: 0; font-size: .76rem; color: var(--ink-soft); }
.work-card-updated { margin: 0; font-size: .7rem; color: var(--ink-faint); }
.work-card-tags { margin: .25rem 0 0; line-height: 1; }
.work-card-tags .chip { font-size: .62rem; padding: .12rem .5rem; }

/* ---------- work page ---------- */

.work-head {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 1.75rem;
  margin-bottom: 1.75rem;
  align-items: start;
}
@media (max-width: 40rem) { .work-head { grid-template-columns: 7.5rem 1fr; gap: 1.1rem; } }

.work-head .cover {
  aspect-ratio: 2 / 3;
  border-radius: 10px;
  border: 1px solid var(--sheet-border);
}

.work-title {
  font-family: var(--font-prose);
  font-weight: 500;
  font-size: clamp(1.6rem, 5vw, 2.3rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 .35rem;
  text-wrap: balance;
}
.work-credits { margin: 0 0 .8rem; color: var(--ink-soft); font-size: .95rem; }
.work-meta { margin: 0 0 .55rem; display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: center; }
.meta-stat { font-size: .8rem; color: var(--ink-faint); }

.work-summary {
  background: var(--sheet);
  border: 1px solid var(--sheet-border);
  border-radius: 14px;
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.6rem;
  color: var(--ink-soft);
}
.work-summary p:last-child { margin-bottom: 0; }

.work-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2rem; }

.toc {
  background: var(--sheet);
  border: 1px solid var(--sheet-border);
  border-radius: 14px;
  padding: 1.1rem 1.4rem 1.3rem;
}
.toc-head {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 .5rem;
}
.toc-list { list-style: none; margin: 0; padding: 0; }
.toc-link {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
  padding: .55rem .25rem;
  border-bottom: 1px solid var(--sheet-border);
  color: var(--ink);
  border-radius: 4px;
}
.toc-list li:last-child .toc-link { border-bottom: 0; }
.toc-link:hover { text-decoration: none; color: var(--cta); }
.toc-date { flex: none; font-size: .74rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* ---------- chapter page: the sheet ---------- */

.sheet {
  background: var(--sheet);
  border: 1px solid var(--sheet-border);
  border-radius: 18px;
  padding: clamp(1.4rem, 4vw, 2.4rem);
  max-width: calc(var(--reader-measure) + 9rem);
  margin: 0 auto;
}

.sheet-booktitle {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}
.sheet-booktitle a { color: var(--accent); }
.sheet-booktitle a:hover { color: var(--cta); text-decoration: none; }
.sheet-booktitle .by { color: var(--ink-faint); font-weight: 400; letter-spacing: .12em; }

.chapter-label {
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cta);
  margin: 0 0 .3rem;
}
.chapter-title {
  font-family: var(--font-prose);
  font-weight: 500;
  font-size: clamp(1.45rem, 4.5vw, 1.9rem);
  letter-spacing: -0.015em;
  margin: 0 0 1.6rem;
  text-wrap: balance;
}

.chapter-body {
  font-size: var(--reader-size);
  line-height: var(--reader-leading);
  max-width: var(--reader-measure);
}
.chapter-body p { text-wrap: pretty; }

/* progress: a sentence, then the thread */
.sheet-progress { margin-top: 1.6rem; }
.progress-sentence { font-size: .82rem; color: var(--ink-soft); margin: 0 0 .4rem; }
.progress-sentence b { color: var(--cta); font-weight: 600; font-variant-numeric: tabular-nums; }
.progress-track {
  height: 5px;
  border-radius: 999px;
  background: var(--accent-soft);
  overflow: hidden;
}
.progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-solid), var(--cta));
  transition: width .2s ease;
}

/* the dock */
.sheet-dock {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: 1.3rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--sheet-border);
}

.chapter-select {
  font-family: var(--font-mono);
  font-size: .72rem;
  max-width: 13rem;
  padding: .38rem .6rem;
  border: 1px solid var(--accent-solid);
  border-radius: 8px;
  background: var(--accent-solid);
  color: #fff;
  cursor: pointer;
}

/* reader settings — floats above the dock */
.reader-settings {
  background: var(--sheet-strong);
  border: 1px solid var(--sheet-border);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  margin: 1rem auto 0;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  max-width: 26rem;
  backdrop-filter: blur(6px);
}
.rs-row { display: flex; align-items: center; gap: 1rem; }
.rs-label { flex: none; width: 4.5rem; font-size: .76rem; color: var(--ink-faint); }
.rs-options { display: flex; gap: .35rem; }
.rs-options button {
  font: inherit;
  font-size: .76rem;
  padding: .25rem .65rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}
.rs-options button[aria-pressed="true"] {
  background: var(--accent-solid);
  border-color: var(--accent-solid);
  color: #fff;
}
.reader-settings input[type="range"] { flex: 1; accent-color: var(--accent-solid); }

/* ---------- comments ---------- */

.comments {
  max-width: calc(var(--reader-measure) + 9rem);
  margin: 2rem auto 0;
}
.comments-head {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1rem;
}
.comment {
  background: var(--sheet);
  border: 1px solid var(--sheet-border);
  border-radius: 12px;
  padding: .9rem 1.1rem;
  margin-bottom: .7rem;
}
.comment-nested {
  margin: .7rem 0 0 1.5rem;
  background: transparent;
  border-left: 2px solid var(--accent-soft);
  border-top: 0; border-right: 0; border-bottom: 0;
  border-radius: 0;
  padding: .2rem 0 .2rem 1rem;
}
.comment-meta { margin: 0 0 .3rem; font-size: .82rem; }
.comment-when { color: var(--ink-faint); font-size: .74rem; margin-left: .5rem; }
.comment-body { margin: 0; font-size: .92rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.comments-empty { color: var(--ink-faint); font-size: .9rem; }

.btn-quiet { background: transparent; color: var(--ink-faint); }
.btn-quiet:hover { background: transparent; color: var(--cta); }

.comment-tools { margin: .35rem 0 0; font-size: .72rem; }
.comment-tools a { color: var(--ink-faint); }
.comment-tools a:hover { color: var(--cta); }

.comment-reply { margin-top: .5rem; }
.comment-reply summary { font-size: .78rem; color: var(--accent); cursor: pointer; }

.comment-form { display: flex; flex-direction: column; gap: .6rem; margin-top: 1rem; }
.comment-form textarea {
  font: inherit;
  font-size: .92rem;
  padding: .6rem .8rem;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  resize: vertical;
}
.comment-form .btn { align-self: flex-start; }

/* ---------- dashboard ---------- */

.dash-scroll { overflow-x: auto; background: var(--sheet); border: 1px solid var(--sheet-border); border-radius: 14px; }
.dash-table { border-collapse: collapse; width: 100%; min-width: 42rem; font-size: .88rem; }
.dash-table th, .dash-table td { text-align: left; padding: .7rem 1rem; border-bottom: 1px solid var(--sheet-border); }
.dash-table thead th {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.dash-table tbody tr:last-child td { border-bottom: 0; }
.dash-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-table a { color: var(--ink); font-weight: 500; }
.dash-table a:hover { color: var(--cta); text-decoration: none; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  .work-card { transition: none; }
  .progress-fill { transition: none; }
}

/* ---------- front page: Threshold hero over Front Table shelves ---------- */

.fp-hero {
  text-align: center;
  padding: clamp(1.5rem, 5vw, 3rem) 0 clamp(1.75rem, 5vw, 2.75rem);
}
.fp-statement {
  font-family: var(--font-prose);
  font-weight: 500;
  font-size: clamp(1.5rem, 4.5vw, 2.3rem);
  line-height: 1.18;
  letter-spacing: -.018em;
  margin: 0 auto .5rem;
  max-width: 26ch;
  text-wrap: balance;
}
.fp-sub {
  color: var(--ink-soft);
  font-size: .95rem;
  margin: 0 0 1.4rem;
}
.fp-search {
  max-width: 26rem;
  margin: 0 auto 1.1rem;
}
.fp-doors {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .55rem;
}
.fp-door {
  display: inline-block;
  padding: .42rem 1.05rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: .88rem;
  font-weight: 500;
}
.fp-door:hover { background: var(--accent-solid); color: #fff; text-decoration: none; }

.shelf { margin-bottom: 2.1rem; }
.shelf-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .65rem;
}
.shelf-title {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
}
.shelf-all {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--accent);
  white-space: nowrap;
}
.shelf-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(7.5rem, 9.5rem);
  gap: .8rem;
  overflow-x: auto;
  padding-bottom: .4rem;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.shelf-cover {
  scroll-snap-align: start;
  border-radius: 10px;
  border: 1px solid var(--sheet-border);
  transition: transform .12s ease;
}
.shelf-cover:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .shelf-cover { transition: none; }
}

/* ---------- front page: banner + columns (owner's wireframe) ---------- */

.header-search {
  flex: 1;
  max-width: 24rem;
  margin: 0 1.25rem;
}
.header-search .search-input { width: 100%; font-size: .88rem; padding: .42rem .85rem; }
@media (max-width: 40rem) { .header-search { display: none; } }

.banner {
  position: relative;
  border-radius: 16px;
  border: 1px solid var(--sheet-border);
  overflow: hidden;
  margin-bottom: 1.6rem;
}
.banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(20,19,17,.82) 0%, rgba(20,19,17,.55) 55%, rgba(20,19,17,.18) 100%);
}
.banner-inner {
  position: relative;
  padding: clamp(1.4rem, 4vw, 2.4rem) clamp(1.2rem, 4vw, 2.5rem);
  max-width: 46rem;
}
.banner-eyebrow {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cta);
  margin: 0 0 .35rem;
}
.banner-title {
  font-family: var(--font-prose);
  font-weight: 500;
  font-size: clamp(1.6rem, 4.5vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #fdfff7;
  margin: 0 0 .3rem;
  text-wrap: balance;
}
.banner-by { color: rgba(253,255,247,.75); font-size: .88rem; margin: 0 0 .6rem; }
.banner-blurb { color: rgba(253,255,247,.85); font-size: .95rem; max-width: 55ch; margin: 0 0 1rem; }
.banner-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.banner-btn-quiet { background: rgba(253,255,247,.14); color: #fdfff7; }
.banner-btn-quiet:hover { background: rgba(253,255,247,.24); color: #fdfff7; }

.fp-cols {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 52rem) { .fp-cols { grid-template-columns: 1fr; } }

.fp-panel {
  background: var(--sheet);
  border: 1px solid var(--sheet-border);
  border-radius: 14px;
  padding: 1rem 1.2rem 1.1rem;
  margin-bottom: 1.25rem;
}
.fp-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .55rem;
}
.fp-empty { color: var(--ink-faint); font-size: .85rem; margin: .3rem 0 0; }

.upd-row {
  display: flex;
  gap: .9rem;
  align-items: baseline;
  padding: .5rem 0;
  border-bottom: 1px solid var(--sheet-border);
  color: var(--ink);
}
.upd-row:last-of-type { border-bottom: 0; }
.upd-row:hover { text-decoration: none; color: var(--accent); }
.upd-work { font-weight: 600; font-size: .88rem; flex: none; max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upd-ch { color: var(--ink-soft); font-size: .88rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upd-when { flex: none; font-family: var(--font-mono); font-size: .68rem; color: var(--ink-faint); }

.fp-article-title {
  font-family: var(--font-prose);
  font-weight: 600;
  font-size: 1.15rem;
  margin: 0 0 .4rem;
}
.fp-article-body { font-size: .9rem; color: var(--ink-soft); }
.fp-article-body p { margin: 0 0 .6em; }
.fp-article-body p:last-child { margin-bottom: 0; }

.cmt-row {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--sheet-border);
  color: var(--ink);
}
.cmt-row:last-of-type { border-bottom: 0; }
.cmt-row:hover { text-decoration: none; }
.cmt-row:hover .cmt-body { color: var(--accent); }
.cmt-meta { font-size: .74rem; color: var(--ink-faint); }
.cmt-meta strong { color: var(--ink-soft); }
.cmt-body { font-size: .85rem; color: var(--ink-soft); }

.footer-nav { flex-wrap: wrap; margin-bottom: .6rem; }
.footer-social { display: flex; gap: .7rem; margin-bottom: .6rem; }
.footer-social a { color: var(--ink-faint); }
.footer-social a:hover { color: var(--accent); }
.footer-social svg { width: 16px; height: 16px; }
.footer-line { margin: 0; }

/* ---------- notifications ---------- */

.notif-panel { padding-top: .4rem; padding-bottom: .4rem; }
.notif-row {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
  padding: .6rem .35rem;
  border-bottom: 1px solid var(--sheet-border);
  color: var(--ink-soft);
  border-radius: 6px;
}
.notif-row:last-of-type { border-bottom: 0; }
.notif-row:hover { text-decoration: none; color: var(--accent); }
.notif-unread { color: var(--ink); background: var(--accent-soft); }
.notif-unread:hover { color: #fff; background: var(--accent-solid); }
.notif-text strong { font-weight: 600; }

/* ---------- seasons + work analytics ---------- */

.toc-volume {
  font-family: var(--font-prose);
  font-weight: 600;
  font-size: 1.05rem;
  margin: 1.1rem 0 .3rem;
  color: var(--ink);
}
.toc-list + .toc-volume { border-top: 1px solid var(--sheet-border); padding-top: 1rem; }

.season-row { display: flex; gap: .5rem; align-items: center; margin-bottom: .5rem; flex-wrap: wrap; }
.season-rename { display: flex; gap: .5rem; flex: 1; min-width: 14rem; }
.season-row input[type="text"] {
  font: inherit;
  padding: .4rem .7rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  flex: 1;
  min-width: 0;
}