.reflection-page { --reading-nav-height: var(--nav-height, 110px); background: #fffcf4; color: #29281f; }
.reflection-page [id] { scroll-margin-top: calc(var(--reading-nav-height) + 1.5rem); }
.reflection-page :focus-visible { outline: 3px solid #986212; outline-offset: 5px; }
.skip-reading { position: absolute; top: -100px; left: 1rem; z-index: 100; padding: .8rem; background: #f8c344; }
.skip-reading:focus { top: 1rem; }
.reading-header { height: var(--reading-nav-height); background: #000; color: #fff; }
.reading-header .top-navigation .links a[href="index.html#oria"], .reflection-page .footer-menu a[href="index.html#oria"] { color: var(--gold); }
@media (prefers-reduced-motion: no-preference) {
  .reading-header .top-navigation .links a[href="index.html#oria"], .reflection-page .footer-menu a[href="index.html#oria"] { animation: oria-nav-glow 3.5s ease-in-out infinite; }
}
/* This reading page keeps one fixed navigation appearance at every scroll position. */
.reading-header .top-navigation { border-bottom-color: transparent; }
.reading-header .top-navigation::before { background: #000; opacity: 1; transition: none; }
.reading-article { padding: 0; border-radius: 0; background: transparent; box-shadow: none; }
.reading-hero { position: relative; isolation: isolate; overflow: hidden; background: #fff; }
.reading-hero-content { position: relative; z-index: 1; min-height: 410px; display: flex; align-items: center; padding-block: 2.5rem; }
.reading-intro { width: 57%; max-width: 620px; padding: 0; background: transparent; }
.reading-article .reading-date { color: #696253; font-size: .76rem; margin: 0 0 1rem; }
.reading-intro .eyebrow { color: #696969; }
.reading-hero h1 { color: var(--gold); font-size: clamp(2.5rem, 3.9vw, 3.35rem); line-height: 1.06; font-weight: 600; letter-spacing: -.045em; }
.reading-hero h1 em { color: inherit; font-style: normal; }
.reading-article .reading-deck { margin: 1.1rem 0; max-width: 31rem; font-size: 1.02rem; line-height: 1.6; color: #605d53; }
.reading-article .reading-meta { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; font-size: .78rem; color: #696253; }
.reading-image { position: absolute; z-index: 0; inset: 0 0 0 auto; width: 62%; margin: 0; background: white; }
.reading-image::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #fff 0%, #fffffff0 17%, #ffffffa8 33%, transparent 54%); }
.reading-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 48% 42%; border-radius: 0; }
.reading-layout { display: grid; grid-template-columns: 220px minmax(0, 690px); gap: 4.5rem; padding-block: 1.5rem 5rem; scroll-margin-top: 2rem; }
.reading-aside { padding-top: 1.5rem; }
.aside-line { display: block; width: 40px; height: 4px; background: #f8c344; }
.reading-article .reading-aside p { color: #797060; font: italic 1.3rem/1.4 Georgia, serif; margin: 1.2rem 0; }
.reading-aside a { font-size: .77rem; text-decoration: underline; text-underline-offset: .3em; }
.reading-body { font: 1.13rem/1.85 Georgia, "Times New Roman", serif; }
.reading-article .reading-body p { color: #49473f; margin: 1.3rem 0; }
.reading-body .reading-opening { font-size: 1.25rem; color: #29281f; }
.reading-body h2 { margin: 2.7rem 0 1rem; font-size: clamp(1.65rem, 2.8vw, 2rem); font-weight: 600; line-height: 1.2; }
.reading-verse { margin: 2.5rem 0; padding: 1.5rem 0 1.5rem 1.6rem; border-left: 4px solid #eab942; }
.reading-verse blockquote { margin: 0; }
.reading-article .reading-verse blockquote p { margin: 0 0 1rem; color: #4a442e; font-size: 1.65rem; line-height: 1.45; }
.reading-verse figcaption { font: .78rem/1.9 system-ui, sans-serif; color: #696253; }
.reading-verse a { text-decoration: underline; text-underline-offset: .2em; }
.reading-pause { background: var(--gold); color: #fff; padding: 1.8rem 2rem; margin: 2.7rem 0; border-radius: 3px 3px 28px 3px; }
.reading-article .reading-pause .eyebrow { font: 750 .7rem/1.5 system-ui, sans-serif; color: #626262; letter-spacing: .16em; margin: 0; }
.reading-pause h2 { margin: .5rem 0; }
.reading-article .reading-pause > p:not(.eyebrow) { color: #fff; }
.reading-article .reading-pause p:last-child { margin-bottom: 0; }
.reading-prayer { font-style: italic; }
.reading-recommendation { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 1.4rem; align-items: center; padding: 1.4rem; margin: 2.5rem 0; border-block: 1px solid #e0d7bf; background: #f9f4e7; font: .9rem/1.55 system-ui, sans-serif; }
.reading-recommendation > img { display: block; width: 100%; height: auto; }
.reading-article .reading-recommendation .eyebrow { margin: 0 0 .4rem; font-size: .62rem; color: #78602c; }
.reading-recommendation h2 { font-size: 1.35rem; margin: 0; line-height: 1.2; }
.reading-article .reading-recommendation p { margin: .65rem 0 .9rem; font-size: .86rem; line-height: 1.55; }
.reading-recommendation .button { display: inline-flex; align-items: center; min-height: 44px; padding: .65rem 1rem; color: #fff; font-size: .8rem; }
.reading-comment { margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid #dcd4c0; font: .96rem/1.5 system-ui, sans-serif; scroll-margin-top: 1.5rem; }
.reading-comment h2 { color: var(--gold); margin: 0 0 .3rem; }
.reading-article .reading-comment .comment-intro { margin: 0 0 .8rem; font-style: italic; }
.reflection-page .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.reading-comment textarea { display: block; width: 100%; padding: .8rem; resize: vertical; min-height: 110px; font: inherit; line-height: 1.5; color: #29281f; background: #fffef9; border: 1px solid #a99d82; border-radius: 7px; }
.reading-comment textarea::placeholder { color: #aaa7a0; opacity: 1; }
.comment-meta { display: flex; justify-content: flex-end; margin-bottom: .4rem; }
#comment-count { margin-top: .25rem; font-size: .72rem; color: #686154; }
.comment-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; }
.reading-comment .button { background: var(--gold); color: #fff; font: 700 .86rem/1.3 system-ui, sans-serif; cursor: pointer; min-height: 46px; min-width: 130px; margin-top: 0; }
.reading-comment .button:hover, .reading-comment .button:active { background: var(--gold); color: #fff; filter: none; }
.reading-article #comment-status { margin: .4rem 0 0; min-height: 1.6em; color: #625327; font-size: .8rem; }
@media (max-width: 900px) {
  .reading-intro { width: 63%; }
  .reading-layout { grid-template-columns: 150px minmax(0, 1fr); gap: 2rem; }
}
@media (max-width: 680px) {
  .reading-hero-content { min-height: 0; padding-block: 1.6rem 10rem; }
  .reading-intro { width: 100%; max-width: none; padding: 0; }
  .reading-hero h1 { max-width: 24rem; font-size: 2.2rem; }
  .reading-article .reading-deck { margin: .9rem 0; font-size: .95rem; }
  .reading-image { inset: auto 0 0; width: 100%; height: 175px; }
  .reading-image img { object-position: 52% 37%; }
  .reading-image::after { background: linear-gradient(90deg, #fff 0%, #ffffff8c 20%, transparent 48%); }
  .reading-recommendation { grid-template-columns: 84px minmax(0, 1fr); gap: 1rem; padding: 1rem; }
  .reading-recommendation h2 { font-size: 1.2rem; }
  .reading-layout { display: block; padding-block: 1.7rem 3rem; }
  .reading-aside { display: none; }
  .reading-body { font-size: 1.08rem; line-height: 1.8; }
  .reading-body .reading-opening { font-size: 1.16rem; }
  .reading-verse { padding-left: 1rem; }
  .reading-article .reading-verse blockquote p { font-size: 1.4rem; }
  .reading-pause { padding: 1.4rem; }
  .comment-meta { gap: .5rem; }
  .reading-comment .button { width: 100%; }
}