/* === Open Word — Reading Experience CSS ===
   Tokens: docs/decision-records/2026-04-18-visual-identity.md
   Spec:   docs/decision-records/2026-04-18-design-specification.md  */

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; }

/* === Base === */
body {
  margin: 0;
  background: #faf9f5;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover,
a:focus-visible { text-decoration: underline; }

/* Content links (not nav buttons) carry persistent underlines so they are
   distinguishable without hover — WCAG 1.4.1. Nav buttons use .ow-nav-btn
   which resets text-decoration via its own ruleset. */
.ow-main a,
.ow-colophon a { text-decoration: underline; }


/* ===================================================================
   COLOR TOKENS — declaration order per §2.1 of design specification
   Each oklch() value is preceded by a hex fallback on the prior line.
   =================================================================== */

/* 1. Light mode defaults — Easter / Christmas accent */
.ow-root {
  --ow-bg: #faf9f5;
  --ow-bg: oklch(0.985 0.004 85);
  --ow-surface: #faf9f5;
  --ow-surface: oklch(0.985 0.004 85);
  --ow-ink: #2e2a22;
  --ow-ink: oklch(0.24 0.012 80);
  --ow-ink-soft: #6b6259;
  --ow-ink-soft: oklch(0.45 0.010 80);
  --ow-ink-faint: #9a9289;
  --ow-ink-faint: oklch(0.62 0.010 80);
  --ow-rule: #e8e5de;
  --ow-rule: oklch(0.88 0.006 85);
  --ow-accent: #bd9851;
  --ow-accent: oklch(0.70 0.10 82);
  /* --ow-accent-soft: spec-defined per §2.3; no component uses it yet (post-MVP) */
  --ow-accent-soft: #f0ead7;
  --ow-accent-soft: oklch(0.92 0.05 85);
  /* Easter/Christmas light --ow-accent fails WCAG AA for text (2.56:1);
     --ow-accent-text uses a darker gold at 7.39:1 */
  --ow-accent-text: #694a00;
  --ow-accent-text: oklch(0.44 0.10 82);
  --ow-serif: Georgia, Cambria, "Times New Roman", Times, serif;
  --ow-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* 2. Dark mode defaults — Easter / Christmas accent */
@media (prefers-color-scheme: dark) {
  .ow-root {
    --ow-bg: #262014;
    --ow-bg: oklch(0.18 0.006 80);
    --ow-surface: #262014;
    --ow-surface: oklch(0.18 0.006 80);
    --ow-ink: #eeebe4;
    --ow-ink: oklch(0.90 0.006 85);
    --ow-ink-soft: #b3ada2;
    --ow-ink-soft: oklch(0.72 0.008 82);
    --ow-ink-faint: #8c857c;
    --ow-ink-faint: oklch(0.58 0.010 82);
    --ow-rule: #3d3730;
    --ow-rule: oklch(0.30 0.008 80);
    --ow-accent: #cfb47c;
    --ow-accent: oklch(0.78 0.08 85);
    --ow-accent-soft: #363020;
    --ow-accent-soft: oklch(0.28 0.02 85);
    /* Dark Easter gold passes WCAG AA at 8.06:1 */
    --ow-accent-text: #cfb47c;
    --ow-accent-text: oklch(0.78 0.08 85);
  }
}

/* 3. Advent / Lent — light */
.ow-root[data-season="advent"],
.ow-root[data-season="lent"] {
  --ow-accent: #7d287d;
  --ow-accent: oklch(0.44 0.16 328);
  /* Advent/Lent light passes WCAG AA at 8.06:1 */
  --ow-accent-text: #7d287d;
  --ow-accent-text: oklch(0.44 0.16 328);
}

/* 4. Advent / Lent — dark */
@media (prefers-color-scheme: dark) {
  .ow-root[data-season="advent"],
  .ow-root[data-season="lent"] {
    --ow-accent: #b850b8;
    --ow-accent: oklch(0.60 0.18 328);
    /* Dark Advent/Lent needs lighter text for WCAG AA: #e878e5 = 6.34:1 */
    --ow-accent-text: #e878e5;
    --ow-accent-text: oklch(0.75 0.18 328);
  }
}

/* 5. Ordinary Time — light */
.ow-root[data-season="ordinary"] {
  --ow-accent: #186420;
  --ow-accent: oklch(0.44 0.13 145);
  /* Ordinary Time light passes WCAG AA at 6.92:1 */
  --ow-accent-text: #186420;
  --ow-accent-text: oklch(0.44 0.13 145);
}

/* 6. Ordinary Time — dark */
@media (prefers-color-scheme: dark) {
  .ow-root[data-season="ordinary"] {
    --ow-accent: #16a34a;
    --ow-accent: oklch(0.63 0.17 149);
    /* Dark Ordinary passes WCAG AA at 4.90:1 */
    --ow-accent-text: #16a34a;
    --ow-accent-text: oklch(0.63 0.17 149);
  }
}

/* 7. Pentecost — light */
.ow-root[data-season="pentecost"] {
  --ow-accent: #c62d25;
  --ow-accent: oklch(0.54 0.19 28);
  /* Pentecost light passes WCAG AA at 5.24:1 */
  --ow-accent-text: #c62d25;
  --ow-accent-text: oklch(0.54 0.19 28);
}

/* 8. Pentecost — dark */
@media (prefers-color-scheme: dark) {
  .ow-root[data-season="pentecost"] {
    --ow-accent: #e04040;
    --ow-accent: oklch(0.61 0.20 25);
    /* Dark Pentecost needs lighter text for WCAG AA: #ff6f6b = 5.95:1 */
    --ow-accent-text: #ff6f6b;
    --ow-accent-text: oklch(0.75 0.20 25);
  }
}


/* ===================================================================
   PAGE SHELL
   =================================================================== */

.ow-root {
  background: var(--ow-bg);
  color: var(--ow-ink);
  font-family: var(--ow-serif);
  min-height: 100vh;
}

/* .ow-vp-desktop: intentional scaffolding class on .ow-root for future
   viewport-specific layout variants. No styles attached in this MVP. */


/* ===================================================================
   NAVIGATION
   =================================================================== */

.ow-nav {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  width: 100%;
  background: var(--ow-bg);
}

.ow-nav-top {
  position: relative;
  padding-top: 2px; /* space for ::before accent rule */
  border-bottom: 1px solid var(--ow-rule);
}

/* 2px accent rule above the top nav.
   Hex fallback (#bd9851) is Easter gold — pre-OKLCH browsers (Safari <15.4,
   Chrome <111) receive this value for all seasons. Accepted trade-off. */
.ow-nav-top::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: #bd9851;
  background: var(--ow-accent);
}

.ow-nav-bottom {
  border-top: 1px solid var(--ow-rule);
}

.ow-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  font-family: var(--ow-sans);
  font-size: 13px;
  font-weight: 450;
  color: var(--ow-ink-soft);
  text-decoration: none;
}

.ow-nav-btn:hover,
.ow-nav-btn:focus-visible {
  color: var(--ow-ink);
  text-decoration: none;
}

.ow-nav-today {
  color: var(--ow-ink);
  font-weight: 500;
  position: relative;
}

.ow-nav-today::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 8px;
  height: 1.5px;
  background: #bd9851;
  background: var(--ow-accent);
  border-radius: 1px;
}

.ow-nav-arrow {
  font-size: 16px;
  line-height: 1;
}

.ow-nav-label {
  display: inline;
}

.ow-nav-disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
}

@media (min-width: 1024px) {
  .ow-nav-btn { font-size: 14px; }
}


/* ===================================================================
   OBSERVANCE HEADER
   =================================================================== */

.ow-obs {
  max-width: 65ch;
  margin: 0 auto;
  padding: 44px 22px 28px;
}

.ow-season {
  font-family: var(--ow-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #694a00;
  color: var(--ow-accent-text);
  margin: 0 0 16px;
}

.ow-title {
  font-family: var(--ow-serif);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--ow-ink);
  margin: 0 0 10px;
}

.ow-date {
  font-family: var(--ow-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ow-ink-soft);
  margin: 0;
}

@media (min-width: 1024px) {
  .ow-obs {
    padding: 72px 32px 40px;
  }
  .ow-title {
    font-size: 40px;
  }
}


/* ===================================================================
   MAIN READING AREA
   =================================================================== */

.ow-main {
  max-width: 65ch;
  margin: 0 auto;
  padding: 0 22px;
}

@media (min-width: 1024px) {
  .ow-main {
    padding: 0 32px;
  }
}


/* ===================================================================
   READING BLOCKS
   =================================================================== */

.ow-reading {
  padding: 24px 0 28px;
  border-top: 1px solid var(--ow-rule);
}

.ow-reading:first-child {
  border-top: none;
  padding-top: 16px;
}

@media (min-width: 1024px) {
  .ow-reading {
    padding: 32px 0 40px;
  }
  .ow-reading:first-child {
    padding-top: 24px;
  }
}

.ow-reading-head {
  margin-bottom: 24px;
}

.ow-kind {
  font-family: var(--ow-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ow-ink-faint);
  margin: 0 0 8px;
}

.ow-ref {
  font-family: var(--ow-serif);
  font-size: 19px;
  font-style: italic;
  font-weight: 400;
  color: var(--ow-ink-soft);
  margin: 0;
}

@media (min-width: 1024px) {
  .ow-ref { font-size: 22px; }
}


/* ===================================================================
   SCRIPTURE TEXT
   =================================================================== */

.ow-prose {
  font-family: var(--ow-serif);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.70;
  color: var(--ow-ink);
  margin: 0;
}

@media (min-width: 1024px) {
  .ow-prose {
    font-size: 19px;
    line-height: 1.72;
  }
}


/* ===================================================================
   VERSE NUMBERS
   =================================================================== */

.ow-vn {
  font-family: var(--ow-sans);
  font-size: 0.64em;
  font-weight: 500;
  color: var(--ow-ink-faint);
  vertical-align: super;
  line-height: 0;
  margin-right: 0.22em;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ===================================================================
   POETRY
   =================================================================== */

.ow-poetry {
  font-family: var(--ow-serif);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.70;
  color: var(--ow-ink);
}

@media (min-width: 1024px) {
  .ow-poetry {
    font-size: 19px;
    line-height: 1.72;
  }
}

.ow-stanza {
  margin-bottom: 0;
}

.ow-stanza + .ow-stanza {
  margin-top: 0.6em;
}

.ow-line {
  position: relative;
  padding-left: 1.6em;
  text-indent: -1.6em;
}

.ow-line-cont {
  padding-left: 3.2em;
  text-indent: -1.6em;
}

/* Poetry verse number in hanging indent gutter */
.ow-poetry .ow-line-lead > .ow-vn {
  display: inline-block;
  width: 1.3em;
  margin-right: 0.3em;
}

/* Narrower indent on mobile */
@media (max-width: 767px) {
  .ow-line { padding-left: 1.4em; text-indent: -1.4em; }
  .ow-line-cont { padding-left: 2.6em; text-indent: -1.4em; }
}


/* ===================================================================
   TRACK 1 / TRACK 2
   =================================================================== */

.ow-track-block {
  margin-bottom: 8px;
}

.ow-track-label {
  font-family: var(--ow-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ow-ink-faint);
  margin: 0 0 12px;
  padding-top: 24px;
}


/* ===================================================================
   "OR" SEPARATOR
   =================================================================== */

.ow-or-separator {
  font-family: var(--ow-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ow-ink-faint);
  text-align: center;
  padding: 8px 0;
  margin: 0;
}


/* ===================================================================
   PASSAGE CONTINUES / NOT AVAILABLE
   =================================================================== */

.ow-continues {
  font-family: var(--ow-sans);
  font-size: 13px;
  font-weight: 400;
  font-style: italic;
  color: var(--ow-ink-faint);
  margin: 12px 0 0;
}


/* ===================================================================
   FOOTER
   =================================================================== */

.ow-foot {
  margin-top: 16px;
}


/* ===================================================================
   COLOPHON
   =================================================================== */

.ow-colophon {
  font-family: var(--ow-sans);
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ow-ink-faint);
  text-align: center;
  padding: 16px 22px 32px;
  margin: 0 auto;
  max-width: 65ch;
}

@media (min-width: 1024px) {
  .ow-colophon {
    padding: 16px 32px 40px;
  }
}


/* ===================================================================
   CURATOR CONTENT
   =================================================================== */

.ow-curator {
  margin: 32px 0 16px;
  padding: 20px 24px;
  border: 1px solid var(--ow-rule);
  border-radius: 4px;
  background: var(--ow-surface);
}

.ow-curator-devotion {
  font-family: var(--ow-serif);
  font-size: 18px;
  font-style: italic;
  line-height: 1.65;
  color: var(--ow-ink-soft);
  margin: 0 0 16px;
  padding: 0 0 0 16px;
  border-left: 2px solid var(--ow-rule);
}

.ow-curator-body {
  font-family: var(--ow-sans);
  font-size: 14px;
  color: var(--ow-ink-soft);
  line-height: 1.6;
}

.ow-curator-study-link { margin: 0; }


/* ===================================================================
   MULTI-OBSERVANCE LIST (date-index pages with >1 observance)
   =================================================================== */

.ow-obs-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ow-obs-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--ow-rule);
}

.ow-obs-list a {
  font-family: var(--ow-sans);
  font-size: 16px;
  color: var(--ow-ink);
  text-decoration: none;
}

.ow-obs-list a:hover,
.ow-obs-list a:focus-visible { text-decoration: underline; }


/* ===================================================================
   CALENDAR
   =================================================================== */

.ow-calendar-page {
  max-width: 65ch;
  margin: 0 auto;
  padding: 44px 22px;
  font-family: var(--ow-sans);
  color: var(--ow-ink);
  background: var(--ow-bg);
  min-height: 100vh;
}

.ow-calendar-title {
  font-family: var(--ow-serif);
  font-size: 28px;
  font-weight: 400;
  margin: 0 0 32px;
  color: var(--ow-ink);
}

.ow-calendar-month {
  margin-bottom: 32px;
}

.ow-month-heading {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ow-ink-faint);
  border-bottom: 1px solid var(--ow-rule);
  padding-bottom: 6px;
  margin: 0 0 12px;
}

.ow-calendar-month ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ow-calendar-month li {
  padding: 4px 0;
  border-bottom: 1px solid var(--ow-rule);
}

.ow-calendar-month a {
  font-size: 14px;
  color: var(--ow-ink);
  text-decoration: none;
}

.ow-calendar-month a:hover,
.ow-calendar-month a:focus-visible { text-decoration: underline; }

.ow-cal-season {
  font-size: 12px;
  color: var(--ow-ink-faint);
  margin-left: 4px;
}

@media (min-width: 1024px) {
  .ow-calendar-page { padding: 64px 32px; }
  .ow-calendar-title { font-size: 36px; }
}