/* ===== Reset / base ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; }
ol, ul { padding-left: 0; }
input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ===== Tokens ===== */
:root {
  /* sizes */
  --font-size: 17px;
  --line-height: 1.62;
  --measure: 36rem;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --bar-h: 56px;

  /* light theme defaults */
  --bg: #fbf7ee;
  --bg-soft: #f3eedf;
  --fg: #1d1b15;
  --fg-soft: #5a5546;
  --rule: rgba(29, 27, 21, 0.12);
  --accent: #6a5b2c;
  --mark: #fde79c;
  --bar-bg: rgba(251, 247, 238, 0.86);
  --bar-fg: #2a2519;
  --bar-shadow: 0 -1px 0 rgba(29, 27, 21, 0.08);
}

:root[data-theme="light"] {
  --bg: #fbf7ee;
  --bg-soft: #f3eedf;
  --fg: #1d1b15;
  --fg-soft: #5a5546;
  --rule: rgba(29, 27, 21, 0.12);
  --accent: #6a5b2c;
  --bar-bg: rgba(251, 247, 238, 0.86);
  --bar-fg: #2a2519;
}

:root[data-theme="sepia"] {
  --bg: #f4ecd8;
  --bg-soft: #ebe1c6;
  --fg: #3a2c17;
  --fg-soft: #6a5837;
  --rule: rgba(58, 44, 23, 0.18);
  --accent: #7a5c1f;
  --mark: #efce69;
  --bar-bg: rgba(244, 236, 216, 0.9);
  --bar-fg: #3a2c17;
}

:root[data-theme="dark"] {
  --bg: #14130f;
  --bg-soft: #1d1c17;
  --fg: #e8e2d0;
  --fg-soft: #8e8773;
  --rule: rgba(232, 226, 208, 0.14);
  --accent: #c6ae74;
  --mark: #5a4717;
  --bar-bg: rgba(20, 19, 15, 0.86);
  --bar-fg: #e8e2d0;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --bg: #14130f; --bg-soft: #1d1c17; --fg: #e8e2d0; --fg-soft: #8e8773;
    --rule: rgba(232, 226, 208, 0.14); --accent: #c6ae74; --mark: #5a4717;
    --bar-bg: rgba(20, 19, 15, 0.86); --bar-fg: #e8e2d0;
  }
}

/* Reader text size tokens. UI elements (bottom bar, sheets, search input,
 * TOC) are pinned to body's 16px baseline and ignore these. Only
 * `main#reader` and the footnote popover scale with them. */
:root[data-size="s"]  { --font-size: 15px; --line-height: 1.6; }
:root[data-size="m"]  { --font-size: 18px; --line-height: 1.6; }
:root[data-size="l"]  { --font-size: 22px; --line-height: 1.5; }
:root[data-size="xl"] { --font-size: 28px; --line-height: 1.42; }

/* family tokens */
:root[data-family="system"]   { --font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable", "Segoe UI", Roboto, sans-serif; }
:root[data-family="palatino"] { --font-family: Palatino, "Palatino Linotype", "Book Antiqua", "URW Palladio L", "Liberation Serif", serif; }
:root[data-family="fern"]     { --font-family: "Fern Text", Palatino, "Palatino Linotype", serif; }

/* ===== Body ===== */
/* The DOCUMENT is the scroll container — not a sub-element. This gives us
 * back macOS' overlay scrollbar, trackpad tap-to-stop-inertia, iOS rubber-
 * banding, and URL-bar hide/show in browser mode (all of which WebKit only
 * applies to the root scroller). */
html {
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
  overflow-x: clip;            /* defensive against runaway horizontal content */
  overscroll-behavior-y: contain;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-family, ui-sans-serif, system-ui, sans-serif);
  /* Body / UI baseline stays fixed at 16px — only the reader scales. */
  font-size: 16px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Trailing space so the last paragraph can clear the fixed bottom bar. */
  padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom));
}
main#reader, .popover-body, .signature {
  font-size: var(--font-size);
  line-height: var(--line-height);
}

/* ===== Language toggle ===== */
:root[lang="en"] [lang="fr"] { display: none; }
:root[lang="fr"] [lang="en"] { display: none; }

/* ===== Reader (scroll-snapped articles) ===== */
/* main#reader is just a flow wrapper now — no position/overflow/snap rules.
 * Scrolling and snapping are owned by <html> above. */

main#reader > article {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  min-height: 100dvh;
  padding: clamp(2rem, 7vh, 4.5rem) var(--gutter) clamp(2rem, 6vh, 4rem);
  max-width: var(--measure);
  margin: 0 auto;
  border-bottom: 1px solid var(--rule);
}
main#reader > article:last-child { border-bottom: none; }

article > header { margin-bottom: 1.4em; }
article > header .eyebrow {
  font-size: 0.78em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-soft);
  font-weight: 500;
  margin: 0 0 0.5em;
}
article > header h2 {
  /* 1.45em at XL would render at ~40px, where a single uppercase word like
   * "TRANSFORMATION." won't fit a phone column. Cap absolute size with rem
   * so the title scales gracefully but never balloons past readability. */
  font-size: min(1.45em, 1.85rem);
  line-height: 1.2;
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
  /* Defensive in case a single uppercase token still exceeds the column. */
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}
article > header h2 i, article > header h2 em { font-style: italic; }

article > p[data-para] {
  margin: 0 0 1.05em;
  text-wrap: pretty;
  hyphens: auto;
  /* At very large sizes, allow last-resort breaking inside long words /
   * inside nbsp-glued word+footnote-ref chunks. Lets the line wrap when
   * a single token would otherwise be wider than the column. */
  overflow-wrap: anywhere;
}
article > header .eyebrow { overflow-wrap: anywhere; }
.para-num {
  font-size: 0.7em;
  font-weight: 500;
  color: var(--fg-soft);
  margin-right: 0.25em;
  font-variant-numeric: tabular-nums;
  user-select: none;
}

article p i, article p em { font-style: italic; }
article p b, article p strong { font-weight: 600; }
article p a:not(.fn-ref a) { color: inherit; text-decoration: underline; text-decoration-color: var(--rule); text-decoration-thickness: 1px; text-underline-offset: 3px; }

sup.fn-ref { font-size: 0.7em; vertical-align: super; line-height: 0; white-space: nowrap; }
sup.fn-ref a { color: var(--accent); text-decoration: none; font-weight: 600; padding: 0 0.15em; }
sup.fn-ref a:hover { text-decoration: underline; }

/* Briefly highlight an article/paragraph after smooth-scroll. */
.flash { animation: flash 0.9s ease-out; }
@keyframes flash {
  0%, 30% { background: color-mix(in oklab, var(--mark), transparent 60%); }
  100% { background: transparent; }
}

/* Signature at end of document */
.signature {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 2rem var(--gutter) 4rem;
  text-align: center;
  color: var(--fg-soft);
}
.signature-pope { font-weight: 600; letter-spacing: 0.08em; margin-top: 1.5em; }

/* Hidden footnotes container (popover pulls from it) */
#footnotes { display: none; }

/* ===== Bottom bar ===== */
nav#bottombar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--bar-h) + env(safe-area-inset-bottom));
  padding: 0 max(env(safe-area-inset-left), 0.5rem) env(safe-area-inset-bottom) max(env(safe-area-inset-right), 0.5rem);
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  gap: 0.25rem;
  background: var(--bar-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: var(--bar-shadow, 0 -1px 0 var(--rule));
  z-index: 5;
}
nav#bottombar button {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bar-fg);
  position: relative;
  min-width: 44px;
  min-height: 44px;
  font-weight: 500;
}
nav#bottombar button:active { background: color-mix(in oklab, var(--fg), transparent 92%); }
nav#bottombar button svg { display: block; }
.opts-label { font-family: var(--font-family); font-size: 1.1em; letter-spacing: -0.02em; line-height: 1; }
.opts-label small { font-size: 0.65em; }
.lang-current { display: none; }

/* ===== Sheets (modal dialogs styled as bottom sheets) ===== */
.sheet[open] {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: auto 0 0 0;
  margin: 0;
  width: 100%;
  max-width: 100%;
  max-height: 86vh;
  padding: 0;
  border: none;
  border-radius: 1.25rem 1.25rem 0 0;
  background: var(--bg);
  color: var(--fg);
  box-shadow: 0 -10px 40px rgba(0,0,0,0.18);
  animation: sheet-rise 0.22s ease-out;
}
.sheet::backdrop {
  background: color-mix(in oklab, var(--fg), transparent 80%);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: backdrop-fade 0.22s ease-out;
}
@keyframes sheet-rise {
  from { transform: translateY(100%); opacity: 0.5; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes backdrop-fade { from { opacity: 0; } to { opacity: 1; } }
.sheet-handle {
  width: 36px; height: 4px;
  background: var(--rule);
  border-radius: 2px;
  margin: 0.5rem auto 0.25rem;
}
.sheet-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.4rem 1rem 0.6rem;
  border-bottom: 1px solid var(--rule);
}
.sheet-header h2 { margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: 0.02em; }
.sheet-close {
  font-size: 1rem;
  color: var(--fg-soft);
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.sheet-close:hover { background: var(--bg-soft); color: var(--fg); }
.sheet-body { overflow-y: auto; padding: 1rem 1.25rem 2rem; flex: 1 1 auto; }

/* TOC — fixed (UI-scaled) typography; hierarchy by spacing/indent, not by
 * bold/italic markup. */
.toc-majors { list-style: none; padding: 0; margin: 0; }
.toc-majors > li { padding: 0.6rem 0 1rem; border-bottom: 1px solid var(--rule); }
.toc-majors > li:last-child { border-bottom: none; }
.toc-major {
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-soft);
  font-weight: 500;
  margin: 0 0 0.6rem;
  line-height: 1.3;
}
.toc-subs { list-style: none; padding: 0; margin: 0; }
.toc-subs > li { padding: 0; }
.toc-subs a {
  color: var(--fg);
  text-decoration: none;
  font-size: 1.1rem;
  line-height: 1.35;
  display: block;
  padding: 0.4rem 0;
}
.toc-subs a:hover { color: var(--accent); }
.toc-subs i, .toc-subs em { font-style: italic; }
/* Hierarchy via spacing/indent. L1 entries open a new cluster (margin-top);
 * L2 entries cluster tightly underneath their L1 parent with an indent. */
.toc-subs > li.toc-l1 + li.toc-l1 { margin-top: 0.5rem; }
.toc-subs > li.toc-l1 + li.toc-l2,
.toc-subs > li.toc-l2 + li.toc-l2 { /* tight */ }
.toc-subs > li.toc-l2 + li.toc-l1 { margin-top: 0.9rem; }
.toc-subs > li.toc-l2 a {
  padding-left: 1.25rem;
  font-size: 1.02rem;
  color: var(--fg-soft);
}
.toc-subs > li.toc-l2 a:hover { color: var(--accent); }

/* Options */
.opts-row { border: none; padding: 0; margin: 0 0 1.5rem; }
.opts-row legend {
  font-size: 0.78em; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-soft); font-weight: 500; padding: 0; margin-bottom: 0.6rem;
}
.seg {
  display: grid; gap: 0.4rem;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: var(--bg-soft);
  padding: 0.3rem;
  border-radius: 0.75rem;
}
.seg-btn {
  padding: 0.55rem 0.5rem;
  border-radius: 0.55rem;
  color: var(--fg-soft);
  text-align: center;
  font-size: 0.95em;
  line-height: 1.2;
  transition: background 0.12s, color 0.12s;
}
.seg-btn.is-active {
  background: var(--bg);
  color: var(--fg);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 0 0 1px var(--rule);
}
.seg-btn:hover:not(.is-active) { color: var(--fg); }
.seg-mini { padding: 0.2rem; }
.seg-mini .seg-btn { padding: 0.35rem 0.5rem; font-size: 0.85em; min-width: 2.6rem; }
.size-sample { display: inline-block; line-height: 1; }
.size-s { font-size: 13px; }
.size-m { font-size: 16px; }
.size-l { font-size: 21px; }
.size-xl { font-size: 28px; }

/* EPUB download buttons in the options sheet */
.dl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}
.dl-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  padding: 0.65rem 0.85rem;
  border-radius: 0.55rem;
  background: var(--bg-soft);
  color: var(--fg);
  text-decoration: none;
  border: 1px solid var(--rule);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.dl-btn:hover { background: var(--bg); color: var(--accent); border-color: var(--accent); }
.dl-btn:active { transform: translateY(0.5px); }
.dl-lang { font-size: 0.95rem; font-weight: 500; }
.dl-size { font-size: 0.78rem; color: var(--fg-soft); font-variant-numeric: tabular-nums; }

/* Search */
.search-bar {
  display: flex; gap: 0.5rem; align-items: center;
  padding-bottom: 0.75rem; border-bottom: 1px solid var(--rule); margin-bottom: 0.5rem;
}
#search-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.7rem 0.85rem;
  border-radius: 0.6rem;
  border: 1px solid var(--rule);
  background: var(--bg-soft);
  color: var(--fg);
  font-size: 1em;
}
#search-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.search-results { list-style: none; padding: 0; margin: 0; }
.search-results > li { border-bottom: 1px solid var(--rule); }
.search-results a {
  display: block;
  padding: 0.85rem 0.25rem;
  color: var(--fg);
  text-decoration: none;
}
.search-results a:hover { background: var(--bg-soft); }
.result-eyebrow {
  display: block;
  font-size: 0.72em; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-soft); font-weight: 500; margin-bottom: 0.25rem;
  font-variant-numeric: tabular-nums;
}
.result-snippet { display: block; font-size: 0.95em; line-height: 1.45; }
.search-results mark { background: var(--mark); color: inherit; padding: 0 0.1em; border-radius: 2px; }
.search-empty { color: var(--fg-soft); text-align: center; margin: 2rem 0; font-size: 0.95em; }

/* Footnote popover */
.popover[open] {
  position: fixed;
  inset: auto 0 calc(var(--bar-h) + env(safe-area-inset-bottom) + 1rem) 0;
  margin: 0 auto;
  max-width: min(36rem, calc(100% - 2rem));
  padding: 1rem 1.25rem;
  border: 1px solid var(--rule);
  border-radius: 0.9rem;
  background: var(--bg);
  color: var(--fg);
  box-shadow: 0 10px 40px rgba(0,0,0,0.25);
  animation: pop-in 0.18s ease-out;
}
.popover::backdrop { background: transparent; }
@keyframes pop-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.popover-close {
  position: absolute; top: 0.5rem; right: 0.5rem;
  width: 28px; height: 28px;
  color: var(--fg-soft); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.popover-close:hover { background: var(--bg-soft); color: var(--fg); }
.popover-body { font-size: 0.95em; line-height: 1.55; padding-right: 1.5rem; }
.popover-body i, .popover-body em { font-style: italic; }
.popover-body a { color: var(--accent); }
.popover-body .fn-backref { display: none; }

@font-face { font-family: "Fern Text"; src: url(/fonts/fern-regular-e36b35b8.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Fern Text"; src: url(/fonts/fern-italic-2bf1d563.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Fern Text"; src: url(/fonts/fern-bold-d0588d88.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Fern Text"; src: url(/fonts/fern-bolditalic-163c406d.woff2) format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }