:root {
  --paper: #f4efe3;
  --paper-2: #ece3d0;
  --ink: #241d17;
  --ink-soft: #5b4f42;
  --rule: #d8ccb4;
  --accent: #7c2d2d; /* oxblood */
  --accent-soft: #9a4a3f;
  --gold: #9c7a3c;
  --shadow: rgba(40, 29, 20, 0.14);
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  background-color: var(--paper);
  /* Seamless procedural parchment: an inline SVG feTurbulence grain (top layer,
     semi-transparent) over a two-tone cream vignette. The grain uses
     stitchTiles="stitch" so it tiles perfectly by construction; the vignette
     fades between two opaque creams (never the transparent-black keyword) so it
     shows real depth with no muddy grey edge. No photo, no watermark, no seams. */
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22220%22%20height%3D%22220%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.85%22%20numOctaves%3D%222%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23n%29%22%20opacity%3D%220.55%22%2F%3E%3C%2Fsvg%3E"),
    radial-gradient(125% 100% at 50% 22%, #fffdf3 0%, #b08a44 100%);
  background-repeat: repeat, no-repeat;
  background-size: 220px 220px, auto;
  background-attachment: fixed, fixed;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.app {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px 40px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* ---------- masthead ---------- */
.masthead {
  border-bottom: 2px solid var(--ink);
  margin-bottom: 22px;
  padding: 30px 0 18px;
}
.masthead-inner { text-align: center; }
.masthead h1 {
  margin: 0;
  font-size: clamp(30px, 5vw, 46px);
  letter-spacing: 0.06em;
  font-weight: 700;
  font-variant: small-caps;
}
.masthead .sub {
  margin: 8px auto 0;
  max-width: 640px;
  color: var(--ink-soft);
  font-style: italic;
  font-size: 15.5px;
}

/* ---------- layout ---------- */
.stage {
  display: flex;
  justify-content: center;
  flex: 1;
  min-height: 0;
}

/* ---------- chat ---------- */
.chat {
  display: flex;
  flex-direction: column;
  min-height: 60vh;
  width: 100%;
  max-width: 760px; /* comfortable single-column reading measure */
}
.messages {
  flex: 1;
  overflow-y: auto;
  padding: 4px 6px 10px;
}
.msg { margin: 0 0 22px; }
.msg .who {
  font-variant: small-caps;
  letter-spacing: 0.04em;
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 5px;
}
.msg.user .who { color: var(--accent); }
.bubble {
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 13px 16px;
  background: #fbf8f0;
  box-shadow: 0 1px 0 var(--shadow);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.msg.user .bubble {
  background: var(--paper-2);
  border-color: #cbbb9c;
}
.msg.assistant .bubble { border-left: 3px solid var(--gold); }
.bubble .cite {
  color: var(--accent);
  font-style: italic;
  font-size: 0.94em;
}
.bubble.thinking { color: var(--ink-soft); font-style: italic; }
.cursor {
  display: inline-block;
  width: 8px;
  margin-left: 1px;
  animation: blink 1s steps(2, start) infinite;
}
@keyframes blink { to { opacity: 0; } }

/* ---------- reference list (appended under an answer) ---------- */
.references {
  margin: 9px 2px 0;
  padding-top: 8px;
  border-top: 1px dotted var(--rule);
  font-size: 13px;
  color: var(--ink-soft);
}
.references-label {
  font-variant: small-caps;
  letter-spacing: 0.05em;
  font-size: 11.5px;
  margin-bottom: 4px;
}
.references ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.references li {
  margin: 2px 0;
  line-height: 1.35;
}
.references .ref {
  color: var(--accent);
  font-style: italic;
}
.references .title {
  color: var(--ink-soft);
}

/* ---------- composer ---------- */
.composer {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  border-top: 1px solid var(--rule);
  padding-top: 14px;
}
.composer textarea {
  flex: 1;
  resize: none;
  font-family: var(--serif);
  font-size: 16.5px;
  line-height: 1.45;
  color: var(--ink);
  background: #fbf8f0;
  border: 1px solid #cbbb9c;
  border-radius: 3px;
  padding: 11px 13px;
  max-height: 180px;
}
.composer textarea:focus {
  outline: none;
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 2px rgba(124, 45, 45, 0.12);
}
.composer button {
  font-family: var(--serif);
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-size: 16px;
  color: #f6efe0;
  background: var(--accent);
  border: 1px solid #611f1f;
  border-radius: 3px;
  padding: 11px 22px;
  cursor: pointer;
  transition: background 0.15s;
}
.composer button:hover { background: var(--accent-soft); }
.composer button:disabled { opacity: 0.5; cursor: default; }

/* ---------- grounding sidebar ---------- */
.grounding {
  border-left: 1px solid var(--rule);
  padding-left: 22px;
}
@media (max-width: 820px) {
  .grounding { border-left: none; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 18px; }
}
.grounding h2 {
  font-variant: small-caps;
  letter-spacing: 0.05em;
  font-size: 17px;
  margin: 2px 0 10px;
}
.grounding-note {
  color: var(--ink-soft);
  font-size: 13.5px;
  font-style: italic;
  margin: 0 0 14px;
}
.method-tag {
  display: inline-block;
  font-size: 11px;
  font-variant: small-caps;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 1px 7px;
  margin-bottom: 12px;
}
.sources { list-style: none; margin: 0; padding: 0; }
.sources li {
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: #fbf8f0;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.sources li.kind-digression { border-left: 3px solid var(--gold); }
.sources .kind-label {
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-size: 10.5px;
  color: var(--ink-soft);
  margin-bottom: 3px;
}
.sources li.kind-digression .kind-label { color: var(--gold); }
.sources .ref {
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}
.sources .title {
  color: var(--ink-soft);
  font-style: italic;
  font-size: 12.5px;
}
.sources .snippet {
  color: var(--ink);
  font-size: 13.5px;
  margin-top: 5px;
  line-height: 1.4;
}

/* ---------- feedback footer ---------- */
.app-footer {
  text-align: center;
  padding: 22px 0 4px;
  margin-top: 8px;
  border-top: 1px solid var(--rule);
}
.feedback-btn {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14.5px;
  color: var(--ink-soft);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 3px;
}
.feedback-btn:hover { color: var(--accent); text-decoration: underline; }

/* ---------- toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  background: var(--ink);
  color: #f6efe0;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 4px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  z-index: 60;
  max-width: 90vw;
  text-align: center;
}

/* ---------- password gate ---------- */
.gate {
  position: fixed;
  inset: 0;
  background: rgba(30, 22, 15, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 50;
}
/* The `hidden` attribute must beat `.gate { display: flex }`, or setting
   gate.hidden = true won't actually hide the overlay. */
.gate[hidden] {
  display: none;
}
.gate-card {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 4px;
  padding: 28px 26px;
  max-width: 380px;
  width: 100%;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  text-align: center;
}
.gate-card h2 { margin: 0 0 8px; font-variant: small-caps; letter-spacing: 0.05em; }
.gate-card p { color: var(--ink-soft); font-style: italic; margin: 0 0 16px; }
.gate-card input {
  width: 100%;
  font-family: var(--serif);
  font-size: 16px;
  padding: 10px 12px;
  border: 1px solid #cbbb9c;
  border-radius: 3px;
  background: #fbf8f0;
  margin-bottom: 12px;
}
.gate-card input:focus { outline: none; border-color: var(--accent-soft); }
.gate-card button {
  font-family: var(--serif);
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-size: 16px;
  color: #f6efe0;
  background: var(--accent);
  border: none;
  border-radius: 3px;
  padding: 10px 26px;
  cursor: pointer;
}
.gate-error { color: var(--accent) !important; font-style: normal !important; margin-top: -6px !important; }

/* ---------- reference links (into the reading page) ---------- */
.references a.ref { text-decoration: none; }
.references a.ref:hover { text-decoration: underline; }

/* ---------- reading page (read.html) ---------- */
/* The global reset sets body { height: 100% } (needed for the chat layout),
   but that caps the body box at one viewport, so the sticky header unsticks
   once you scroll past the first screen. Let the reading body grow to its
   full content height so the header stays put all the way down. */
body.reading {
  height: auto;
  min-height: 100%;
}
.rd-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(244, 239, 227, 0.95);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid var(--ink);
  padding: 10px 18px;
}
.rd-back {
  color: var(--accent);
  text-decoration: none;
  font-variant: small-caps;
  letter-spacing: 0.04em;
}
.rd-back:hover { text-decoration: underline; }
.rd-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  margin-left: 14px;
  font-variant: small-caps;
  font-size: 14px;
}
.rd-nav a:hover { color: var(--accent); }
.rd-book {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 20px 90px;
}
.rd-title {
  text-align: center;
  font-variant: small-caps;
  letter-spacing: 0.05em;
  margin: 10px 0 30px;
}
.rd-h { scroll-margin-top: 64px; } /* keep the sticky bar from covering targets */
.rd-part {
  text-align: center;
  font-variant: small-caps;
  letter-spacing: 0.06em;
  margin: 52px 0 20px;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 8px;
}
.rd-sect,
.rd-memb {
  margin: 34px 0 12px;
  font-size: 18px;
  font-variant: small-caps;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.rd-subs {
  margin: 26px 0 10px;
  font-size: 16px;
  font-style: italic;
}
.rd-preface {
  text-align: center;
  font-variant: small-caps;
  margin: 40px 0 20px;
}
.rd-book p {
  margin: 0 0 14px;
  text-align: justify;
  hyphens: auto;
}
.rd-h:target {
  background: rgba(214, 178, 92, 0.28);
  border-radius: 2px;
}

/* ---------- footnote markers + endnotes (read.html) ---------- */
sup.fn {
  line-height: 0;
  font-size: 0.72em;
}
sup.fn a {
  color: var(--accent);
  text-decoration: none;
  padding: 0 1px;
}
sup.fn a:hover { text-decoration: underline; }

.rd-notes {
  margin-top: 40px;
  border-top: 2px solid var(--ink);
  padding-top: 8px;
}
.rd-note {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 8px;
  padding-left: 2.2em;
  text-indent: -2.2em; /* hanging indent */
  scroll-margin-top: 150px; /* land well below the sticky header, not under it */
}
/* the marker anchors, so clicking a footnote's ↩ back-link also clears the bar */
sup.fn a[id^='ref'] { scroll-margin-top: 150px; }
.rd-note-num {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}
.rd-note-num:hover { text-decoration: underline; }
.rd-note-back {
  color: var(--accent);
  text-decoration: none;
  margin-left: 4px;
}
.rd-note:target,
p[id^="fn"]:target { background: rgba(214, 178, 92, 0.28); border-radius: 2px; }
sup.fn a:target { background: rgba(214, 178, 92, 0.45); border-radius: 2px; }

/* ---------- feedback invitation (shown after heavy use) ---------- */
.feedback-invite {
  margin: 9px 2px 0;
  padding-top: 8px;
  border-top: 1px dotted var(--rule);
  font-size: 14px;
  font-style: italic;
  color: var(--ink-soft);
}
.feedback-invite-link {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--accent);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}
.feedback-invite-link:hover { color: var(--accent-soft); }