/* Shared stylesheet for the generated document pages.
   index.html keeps its own inline CSS and is deliberately untouched.

   Colour rules, measured against #f5f3eb:
     #2d4a3e  8.75:1  body text OK
     #4a6a5a  5.40:1  body text OK
     #5a7a6a  4.27:1  LARGE text only
     #6a8a7a  3.42:1  LARGE text only
     #7fb069  2.27:1  DECORATION ONLY - never text
*/

:root {
  --bg: #f5f3eb;
  --ink: #2d4a3e;
  --ink-soft: #4a6a5a;
  --accent: #7fb069;
  --rule: #d9d5c6;
  --panel: #f9f9f7;
  --measure: 68ch;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  line-height: 1.6;
}

.skip-link {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--bg);
  padding: 0.6rem 1rem; z-index: 10;
}
.skip-link:focus { left: 1rem; top: 1rem; }

a { color: var(--ink); text-underline-offset: 0.15em; }
a:hover { color: var(--ink-soft); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---- layout ---- */
.doc-layout {
  display: grid;
  grid-template-columns: minmax(210px, 250px) minmax(0, 1fr);
  gap: 3rem;
  max-width: 1180px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
  align-items: start;
}

.doc-rail {
  position: sticky;
  top: 2rem;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  font-size: 0.85rem;
  border-right: 1px solid var(--rule);
  padding-right: 1.25rem;
}
.doc-home, .rail-doc a {
  display: block;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.8rem;
  margin-bottom: 1.25rem;
}
.doc-home:hover, .rail-doc a:hover { text-decoration: underline; }
.rail-doc { margin-bottom: 1.25rem; font-weight: 600; }
.rail-heading {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  margin-bottom: 0.6rem;
  font-weight: 700;
}
.rail-list { list-style: none; margin-bottom: 1.75rem; }
.rail-list li { margin: 0.3rem 0; line-height: 1.4; }
.rail-list a { color: var(--ink-soft); text-decoration: none; }
.rail-list a:hover { color: var(--ink); text-decoration: underline; }
.rail-l2 { font-weight: 700; margin-top: 0.9rem !important; }
.rail-l2 a { color: var(--ink); }
.rail-l3 { padding-left: 0.85rem; font-size: 0.95em; }

/* ---- masthead ---- */
.doc-main { min-width: 0; }
.doc-masthead { border-bottom: 2px solid var(--accent); padding-bottom: 1.25rem; margin-bottom: 2rem; }
.doc-eyebrow {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--ink-soft); font-weight: 700;
}
.doc-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.15; margin: 0.5rem 0 0.35rem; font-weight: 400;
}
.doc-meta { color: var(--ink-soft); font-size: 0.9rem; }

/* ---- body ---- */
.doc-body { max-width: var(--measure); font-family: Georgia, 'Times New Roman', serif; font-size: 1.05rem; line-height: 1.75; color: #3d5a4c; }
.doc-body h1, .doc-body h2, .doc-body h3, .doc-body h4 {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--ink); line-height: 1.25; scroll-margin-top: 1.5rem;
}
.doc-body h1 { font-size: 1.7rem; margin: 3rem 0 1rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.doc-body h2 { font-size: 1.3rem; margin: 2.25rem 0 0.75rem; }
.doc-body h3 { font-size: 1.05rem; margin: 1.75rem 0 0.5rem; }
/* h4 added here: brief's CSS didn't name a level below h3, but real pages emit
   h4 for a fourth heading depth (see ethos/index.html's cluster sub-questions).
   Scaled down from h3 on the same step as h3 was from h2, kept bold rather than
   sized any smaller so it stays legible at the small end of the ramp. */
.doc-body h4 { font-size: 0.95rem; margin: 1.5rem 0 0.4rem; font-weight: 700; }
.doc-body p, .doc-body ul, .doc-body ol { margin-bottom: 1.1rem; }
.doc-body ul, .doc-body ol { padding-left: 1.4rem; }
.doc-body li { margin-bottom: 0.4rem; }
.doc-body strong { color: var(--ink); }
.doc-body hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

.doc-body blockquote {
  border-left: 3px solid var(--accent);
  padding: 0.2rem 0 0.2rem 1.1rem;
  margin: 1.5rem 0;
  color: var(--ink-soft);
}
.doc-body blockquote p:last-child { margin-bottom: 0; }

.doc-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em; background: var(--panel);
  border: 1px solid var(--rule); border-radius: 3px; padding: 0.1em 0.35em;
}
.doc-body pre {
  background: var(--panel); border: 1px solid var(--rule); border-radius: 5px;
  padding: 1rem; overflow-x: auto; margin-bottom: 1.25rem;
}
.doc-body pre code { background: none; border: 0; padding: 0; font-size: 0.85rem; }

/* Wide tables scroll inside their own box, never the page. */
.doc-body table {
  display: block; overflow-x: auto; max-width: 100%;
  border-collapse: collapse; margin-bottom: 1.5rem; font-size: 0.92rem;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.doc-body th, .doc-body td {
  border: 1px solid var(--rule); padding: 0.5rem 0.7rem;
  text-align: left; vertical-align: top;
}
.doc-body th { background: var(--panel); color: var(--ink); font-weight: 700; }

/* ---- pager and footer ---- */
.doc-pager {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  border-top: 1px solid var(--rule); margin-top: 3rem; padding-top: 1.25rem;
}
.doc-pager a { text-decoration: none; max-width: 46%; }
.pager-next { margin-left: auto; text-align: right; }
.pager-dir {
  display: block; font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--ink-soft); font-weight: 700;
}
.pager-name { display: block; color: var(--ink); }
.doc-pager a:hover .pager-name { text-decoration: underline; }
.doc-footer {
  border-top: 1px solid var(--rule); margin-top: 3rem; padding-top: 1.25rem;
  font-size: 0.85rem; color: var(--ink-soft);
}
.doc-footer p { margin-bottom: 0.3rem; }

/* ---- narrow screens: rail becomes a contents block, nothing sticks ---- */
@media (max-width: 768px) {
  .doc-layout { grid-template-columns: 1fr; gap: 1.75rem; padding: 1.25rem 1rem 3rem; }
  .doc-rail {
    position: static; max-height: none; overflow: visible;
    border-right: 0; border-bottom: 1px solid var(--rule);
    padding-right: 0; padding-bottom: 1.25rem;
  }
  .doc-body { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}