/* eol.css v1.2 (2026-10-05) — one grammar for the end-of-life and aging suite, each site in its own voice.
 *
 * caregoals.com (the decision) · qualitydeath.com (the person who stays) · vimty.com (the grid underneath)
 * Next stops on the same journey wear their own systems: comfortcard.org (Kept) and co-op.care.
 *
 * SHARED (the grammar, never changed per site):
 *   1. Paper, ink, one accent. Hairlines separate things; shadow is for the one thing that floats.
 *   2. One nav on every page: brand · 3–5 links · one call to action; on a phone: brand · call to action · Menu.
 *      A tool screen (the cards, the summary) wears the quiet form: brand · what is kept where · one link.
 *   3. The question is the hero, in the second person, in the display face; under it, the one honest line.
 *   4. Tap, don't type. A choice is a 56px card that says it was chosen. Two people share one phone.
 *   5. Every record says where it lives: a tag reads on this device · sent to the hub · a person · planned (with a date).
 *   6. Progress is minutes, not percent.
 *   7. One primary button per screen; everything else is a ghost or a link. Buttons are pills, 48px; the big one 56px.
 *   8. Three doors at the end: where this goes next, always the same three siblings.
 *   9. 988 before anything else where dying is the subject.
 *  10. One footer band: the sentence a stranger most needs, the honesty line, the page list, the sibling line.
 *
 * PER SITE (the voice, set once in /voice.css AFTER this file, then worn on every page):
 *   --eol-paper / --eol-paper-2 / --eol-sheet        the page, its tint, the sheet a card sits on
 *   --eol-ink / -2 / -3                               text, supporting text, fine print (13px and up)
 *   --eol-line / --eol-line-2                         hairlines
 *   --eol-accent / -deep / -mid / -soft               the one colour allowed to be loud (links, selected, progress, focus)
 *   --eol-mark / --eol-mark-soft                      the second mark: kickers, a warm stamp; never body text
 *   --eol-btn-bg / --eol-btn-ink                      the primary button (CareGoals: ink; Quality Death: moss; Vimty: teal)
 *   --eol-display / --eol-display-weight / --eol-sans the faces
 *   --eol-nav-bg / -ink / -muted, --eol-foot-bg / -ink / -muted   a dark chrome (Vimty) or the paper (the two end-of-life sites)
 * CareGoals: paper #fcf9f3, teal #24555e, clay kickers, Newsreader 400 + Plus Jakarta Sans, ink buttons.
 * Quality Death: paper #fff8f5, moss #334537, Newsreader 400 + Plus Jakarta Sans, moss buttons, the 988 strip on every page.
 * Vimty: ivory #faf8f4, teal #0D7377, Manrope 800 + Inter, navy nav and footer.
 *
 * Copy this file into the repo as /eol.css and link it before /voice.css and before the page's own <style>.
 * Edit only the canonical file (estate-tests/eol-design/eol.css), bump the version line, re-copy;
 * design-drift.mjs --baseline design.json compares the copy with it.
 */

:root {
  --eol-paper: #fcf9f3;
  --eol-paper-2: #f5f2ea;
  --eol-sheet: #ffffff;
  --eol-ink: #162433;
  --eol-ink-2: #2b3a4b;
  --eol-ink-3: #4a4e55;
  --eol-line: #e7e2da;
  --eol-line-2: #d6cfc4;
  --eol-accent: #24555e;
  --eol-accent-deep: #1a4047;
  --eol-accent-mid: #7fa0a6;
  --eol-accent-soft: #f0f6f7;
  --eol-mark: #a8492d;
  --eol-mark-soft: #fdf1ed;
  --eol-planned: #7a5a1e;
  --eol-planned-soft: #f6ecd6;
  --eol-btn-bg: var(--eol-ink);
  --eol-btn-ink: #ffffff;
  --eol-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --eol-display-weight: 400;
  --eol-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --eol-nav-bg: rgba(252, 249, 243, 0.92);
  --eol-nav-ink: var(--eol-ink);
  --eol-nav-muted: var(--eol-ink-2);
  --eol-nav-line: var(--eol-line);
  --eol-foot-bg: var(--eol-paper-2);
  --eol-foot-ink: var(--eol-ink-2);
  --eol-foot-muted: var(--eol-ink-3);
  --eol-max: 1120px;
  --eol-gutter: 20px;
  --eol-nav-h: 64px;
  --eol-radius: 16px;
  --eol-radius-sm: 12px;
  --eol-pill: 999px;
  --eol-shadow: 0 2px 8px -2px rgba(22, 36, 51, 0.06);
  --eol-shadow-lift: 0 18px 40px -10px rgba(22, 36, 51, 0.14);
}

/* ---------- base: the page's own styles come after this file and may refine it ---------- */
html { scroll-padding-top: calc(var(--eol-nav-h) + 12px); }
body { margin: 0; background: var(--eol-paper); color: var(--eol-ink); font: 400 17px/1.6 var(--eol-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3 { font-family: var(--eol-display); font-weight: var(--eol-display-weight); text-wrap: balance; } /* colour is inherited on purpose: a dark band keeps its white headline */
:focus-visible { outline: 3px solid color-mix(in srgb, var(--eol-accent) 60%, transparent); outline-offset: 3px; border-radius: 4px; }
.eol-skip { position: absolute; left: -9999px; top: 8px; z-index: 300; background: var(--eol-ink); color: #fff; padding: 10px 14px; border-radius: 8px; text-decoration: none; }
.eol-skip:focus { left: 8px; }
.eol-wrap { max-width: var(--eol-max); margin: 0 auto; padding: 0 var(--eol-gutter); }
.eol-wrap--narrow { max-width: 780px; }

/* ---------- 9. the crisis strip: the first thing on any page where dying is the subject ---------- */
.eol-988 { background: var(--eol-paper-2); border-bottom: 1px solid var(--eol-line); text-align: center; padding: 9px var(--eol-gutter); font-family: var(--eol-sans); font-size: 13.5px; line-height: 1.5; color: var(--eol-ink-2); }
.eol-988 a { font-weight: 700; color: var(--eol-accent); text-decoration: underline; text-underline-offset: 3px; padding: 14px 2px; }

/* ---------- 2. nav: the same bar on every page ---------- */
.eol-nav { position: sticky; top: 0; z-index: 100; background: var(--eol-nav-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--eol-nav-line); font-family: var(--eol-sans); color: var(--eol-nav-ink); padding: 0; margin: 0; box-shadow: none; }
.eol-nav-in { max-width: var(--eol-max); margin: 0 auto; padding: 0 var(--eol-gutter); height: var(--eol-nav-h); display: flex; align-items: center; gap: 16px; min-width: 0; }
.eol-brand { font-family: var(--eol-display); font-weight: var(--eol-display-weight); font-size: 25px; letter-spacing: -0.01em; color: var(--eol-nav-ink); text-decoration: none; white-space: nowrap; margin-right: auto; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; }
.eol-brand svg { flex: none; color: var(--eol-accent); }
.eol-brand small { font-family: var(--eol-sans); font-size: 12px; letter-spacing: 0.04em; color: var(--eol-nav-muted); }
.eol-links { display: flex; align-items: center; gap: 4px; }
.eol-links a { color: var(--eol-nav-muted); text-decoration: none; font-size: 15px; font-weight: 500; padding: 8px 10px; border-radius: 8px; min-height: 40px; display: inline-flex; align-items: center; white-space: nowrap; }
.eol-links a:hover, .eol-links a[aria-current] { color: var(--eol-nav-ink); background: color-mix(in srgb, var(--eol-nav-ink) 7%, transparent); }
.eol-cta { background: var(--eol-btn-bg); color: var(--eol-btn-ink) !important; text-decoration: none; font-weight: 700; font-size: 15px; padding: 0 18px; min-height: 42px; display: inline-flex; align-items: center; border-radius: var(--eol-pill); white-space: nowrap; }
.eol-cta:hover { filter: brightness(1.12); }
.eol-cta--ghost { background: transparent; color: var(--eol-nav-ink) !important; border: 1px solid var(--eol-line-2); font-weight: 600; }
.eol-status { font-size: 14px; color: var(--eol-nav-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.eol-menu { display: none; position: relative; }
.eol-menu summary { list-style: none; cursor: pointer; color: var(--eol-nav-ink); font-weight: 600; font-size: 15px; padding: 8px 12px; min-height: 42px; display: inline-flex; align-items: center; border-radius: var(--eol-pill); border: 1px solid var(--eol-line-2); }
.eol-menu summary::-webkit-details-marker { display: none; }
.eol-menu[open] summary { background: color-mix(in srgb, var(--eol-nav-ink) 7%, transparent); }
.eol-menu-list { position: absolute; right: 0; top: calc(100% + 8px); background: var(--eol-sheet); border: 1px solid var(--eol-line); border-radius: var(--eol-radius); box-shadow: var(--eol-shadow-lift); padding: 8px; min-width: 230px; display: flex; flex-direction: column; }
.eol-menu-list a { color: var(--eol-ink); text-decoration: none; font-weight: 500; font-size: 16px; padding: 12px; border-radius: var(--eol-radius-sm); min-height: 44px; display: flex; align-items: center; }
.eol-menu-list a:hover { background: var(--eol-accent-soft); }
@media (max-width: 760px) {
  .eol-links { display: none; }
  .eol-menu { display: block; }
  .eol-nav-in { gap: 10px; height: 60px; }
  .eol-brand { font-size: 22px; }
  .eol-brand small { display: none; }
  .eol-cta { padding: 0 14px; }
}
/* the quiet form for a tool screen: brand · the status · one link. The menu stays off; the screen is the task. */
.eol-nav--tool .eol-links, .eol-nav--tool .eol-menu { display: none; }
.eol-nav--tool .eol-nav-in { gap: 12px; }
.eol-nav--tool .eol-status { margin-left: auto; }

/* ---------- 3. the question is the hero; then the one honest line ---------- */
.eol-kicker { font-family: var(--eol-sans); font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--eol-mark); margin: 0 0 10px; }
.eol-h1 { font-family: var(--eol-display); font-weight: var(--eol-display-weight); font-size: clamp(2.1rem, 5vw, 3.6rem); line-height: 1.1; letter-spacing: -0.015em; color: var(--eol-ink); margin: 0 0 16px; text-wrap: balance; }
.eol-h1 em { font-style: italic; color: var(--eol-accent); }
.eol-h2 { font-family: var(--eol-display); font-weight: var(--eol-display-weight); font-size: clamp(1.7rem, 3.6vw, 2.75rem); line-height: 1.15; letter-spacing: -0.012em; color: var(--eol-ink); margin: 0 0 12px; text-wrap: balance; }
.eol-lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.6; color: var(--eol-ink-2); max-width: 36em; margin: 0 0 18px; }
.eol-honest { font-size: 15.5px; line-height: 1.55; color: var(--eol-ink-3); max-width: 60ch; margin: 0; }

/* ---------- 7. buttons: one primary per screen ---------- */
.eol-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 26px; border-radius: var(--eol-pill); font-family: var(--eol-sans); font-weight: 700; font-size: 16px; line-height: 1; text-decoration: none; cursor: pointer; border: 1.5px solid transparent; background: var(--eol-btn-bg); color: var(--eol-btn-ink); box-shadow: var(--eol-shadow); transition: transform 0.15s ease, filter 0.2s; }
.eol-btn:hover { filter: brightness(1.12); }
.eol-btn:active { transform: scale(0.98); }
.eol-btn:disabled { opacity: 0.55; cursor: default; }
.eol-btn--ghost { background: transparent; color: var(--eol-ink); border-color: var(--eol-line-2); box-shadow: none; }
.eol-btn--ghost:hover { filter: none; border-color: var(--eol-ink); background: color-mix(in srgb, var(--eol-ink) 5%, transparent); }
.eol-btn--big { min-height: 56px; font-size: 18px; padding: 0 34px; }
.eol-btn--quiet { background: none; border: 0; box-shadow: none; color: var(--eol-ink-3); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; padding: 0 8px; }

/* ---------- 4. tap, don't type ---------- */
.eol-choices { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.eol-choices--wrap { flex-direction: row; flex-wrap: wrap; }
.eol-choice { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 12px 16px; border: 1.5px solid var(--eol-line); border-radius: var(--eol-radius-sm); background: var(--eol-sheet); color: var(--eol-ink); font: 600 16px/1.3 var(--eol-sans); text-align: left; cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
.eol-choices--wrap .eol-choice { width: auto; min-height: 48px; border-radius: 14px; }
.eol-choice::before { content: ""; flex: none; width: 20px; height: 20px; border: 2px solid var(--eol-line-2); border-radius: 50%; background: var(--eol-sheet); }
.eol-choice:hover { border-color: var(--eol-accent); }
.eol-choice:active { transform: scale(0.98); }
.eol-choice[aria-pressed="true"] { border-color: var(--eol-accent); background: var(--eol-accent-soft); color: var(--eol-accent-deep); }
.eol-choice[aria-pressed="true"]::before { border-color: var(--eol-accent); background: var(--eol-accent) radial-gradient(circle, #fff 32%, transparent 36%); }

/* ---------- 5. every record says where it lives ---------- */
.eol-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--eol-sans); font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--eol-pill); line-height: 1.3; white-space: nowrap; }
.eol-tag--device { color: var(--eol-ink); background: transparent; border: 1px solid var(--eol-line-2); }
.eol-tag--sent { color: var(--eol-accent-deep); background: var(--eol-accent-soft); }
.eol-tag--person { color: var(--eol-mark); background: var(--eol-mark-soft); }
.eol-tag--planned { color: var(--eol-planned); background: var(--eol-planned-soft); }
.eol-device { display: flex; gap: 12px; align-items: flex-start; background: var(--eol-accent-soft); border: 1px solid color-mix(in srgb, var(--eol-accent) 22%, var(--eol-line)); border-radius: var(--eol-radius); padding: 14px 16px; font-size: 15px; color: var(--eol-ink); line-height: 1.5; }
.eol-device svg { flex: none; color: var(--eol-accent); margin-top: 2px; }

/* ---------- 6. progress is minutes, not percent ---------- */
.eol-progress { margin: 0 0 18px; }
.eol-progress-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--eol-ink-3); margin-bottom: 6px; }
.eol-progress-bar { height: 6px; border-radius: var(--eol-pill); background: var(--eol-line); overflow: hidden; }
.eol-progress-bar i { display: block; height: 100%; width: 0; background: var(--eol-accent); transition: width 0.25s; }

/* ---------- 1. cards and sheets: hairlines, one shadow ---------- */
.eol-card { background: var(--eol-sheet); border: 1px solid var(--eol-line); border-radius: var(--eol-radius); padding: 22px; }
.eol-card--lift { box-shadow: var(--eol-shadow); }
.eol-band { padding: clamp(48px, 8vw, 96px) 0; }
.eol-band--tint { background: var(--eol-paper-2); }

/* ---------- 8. three doors: where this goes next ---------- */
.eol-doors { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 0; padding: 0; list-style: none; }
.eol-door { display: flex; flex-direction: column; padding: 22px 22px 18px; background: var(--eol-sheet); border: 1px solid var(--eol-line); border-radius: var(--eol-radius); text-decoration: none; color: inherit; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.eol-door:hover { border-color: var(--eol-accent); transform: translateY(-3px); box-shadow: var(--eol-shadow-lift); }
.eol-door .eol-kicker { display: block; font-size: 12px; margin-bottom: 8px; }
.eol-door .eol-door-t { display: block; font-family: var(--eol-display); font-weight: var(--eol-display-weight); font-size: 24px; line-height: 1.2; color: var(--eol-ink); margin: 0 0 8px; text-align: left; }
.eol-door .eol-door-d { font-size: 15px; color: var(--eol-ink-3); line-height: 1.6; flex: 1; margin: 0; max-width: none; text-align: left; }
.eol-door-go { display: block; font-size: 14.5px; font-weight: 700; color: var(--eol-accent); margin-top: 14px; padding: 6px 0; }

/* ---------- 10. the footer band: the same on every page ---------- */
.eol-foot { background: var(--eol-foot-bg); color: var(--eol-foot-ink); border-top: 1px solid var(--eol-line); font-family: var(--eol-sans); margin: 0; padding: 0; box-shadow: none; }
.eol-foot-in { max-width: var(--eol-max); margin: 0 auto; padding: 36px var(--eol-gutter) 30px; display: grid; gap: 14px; }
.eol-foot p { margin: 0; font-size: 14.5px; line-height: 1.7; max-width: 70ch; color: var(--eol-foot-ink); }
.eol-foot p strong { color: var(--eol-nav-ink); }
.eol-foot a { color: var(--eol-foot-ink); font-weight: 600; text-underline-offset: 3px; }
.eol-foot-first a, .eol-foot-first strong { font-weight: 700; }
.eol-foot-links { display: flex; flex-wrap: wrap; gap: 0 10px; margin-left: -6px; }
.eol-foot-links a { text-decoration: none; font-size: 14.5px; min-height: 44px; padding: 0 6px; display: inline-flex; align-items: center; }
.eol-foot-links a:hover { text-decoration: underline; }
.eol-foot-sib { font-size: 13px; color: var(--eol-foot-muted); }
.eol-foot-sib a { color: var(--eol-foot-muted); font-weight: 600; text-decoration: none; }
.eol-foot-sib a:hover { text-decoration: underline; }
.eol-foot-fine { font-size: 12.5px; color: var(--eol-foot-muted); }

/* ---------- small things ---------- */
@media (prefers-reduced-motion: reduce) { .eol-btn, .eol-choice, .eol-door, .eol-progress-bar i { transition: none; } }
@media print { .eol-skip, .eol-988, .eol-nav, .eol-foot, .eol-doors { display: none !important; } body { background: #fff; } }