/* Return links belong to each title; the article outline occupies its own rail. */
.reading-back { display: inline-flex; align-items: center; gap: .5rem; width: fit-content; color: var(--muted); font-size: .8125rem; letter-spacing: .04em; }
.reading-back svg, .reading-neighbor svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.reading-back:hover { color: var(--ink); }
.journal-kicker { display: flex; align-items: center; gap: 1rem; }
.journal-kicker > span { color: var(--muted); font-size: .75rem; letter-spacing: .04em; padding-left: 1rem; border-left: 1px solid var(--rule); }
.photography .photography-kicker.reading-back { color: var(--muted); letter-spacing: .04em; }
.photography .photography-kicker.reading-back:hover { color: var(--ink); }
.reading-region {
  position: relative; display: flow-root;
  --reading-end-y: 100dvh;
  --reading-rail-left: clamp(2rem, 3.5vw, 4rem);
  --reading-rail-top: max(calc(var(--header-height) + 2rem), 20dvh);
  --reading-tools-height: 32px;
  --reading-tools-top: min(var(--reading-rail-top), calc(var(--reading-end-y) - var(--reading-tools-height) - 1.5rem));
  --reading-toc-top: calc(var(--reading-tools-top) + var(--reading-tools-height) + .875rem);
}
.reading-tools { position: fixed; z-index: 19; left: var(--reading-rail-left); top: var(--reading-tools-top); width: max-content; }
.reading-toc-trigger { display: flex; flex-shrink: 0; align-items: center; white-space: nowrap; gap: .375rem; padding: .25rem 0; border: 0; border-radius: 0; background: none; color: var(--muted); font: inherit; font-size: .875rem; line-height: 1.5rem; letter-spacing: .08em; cursor: pointer; touch-action: manipulation; }
.reading-toc-trigger[aria-expanded="true"] { color: var(--ink); font-weight: 500; }
.reading-toc-trigger:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.reading-toc-chevron { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 260ms ease; }
.reading-toc-trigger[aria-expanded="true"] .reading-toc-chevron { transform: rotate(180deg); }
.reading-toc-trigger--header { display: none; }
.reading-toc-trigger[hidden], .reading-toc[hidden], .reading-toc-backdrop[hidden] { display: none !important; }
.reading-toc-trigger:focus-visible, .reading-back:focus-visible, .reading-toc a:focus-visible, .reading-neighbor:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; }
/* Unfold below the label without changing the article's position or width. */
.reading-toc {
  position: fixed; z-index: 17; top: var(--reading-toc-top); left: var(--reading-rail-left);
  width: clamp(7rem, calc((100vw - 62rem) / 2 - var(--reading-rail-left) - 1.5rem), 14rem);
  max-height: max(0px, min(calc(100dvh - var(--reading-toc-top) - 2rem), calc(var(--reading-end-y) - var(--reading-toc-top) - 1.5rem)));
  overflow-y: auto; overscroll-behavior: contain; background: transparent;
  scrollbar-width: thin; scrollbar-color: var(--rule) transparent;
  transform: translateY(-.5rem); clip-path: inset(0 0 100% 0); opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform 260ms cubic-bezier(.22, 1, .36, 1), clip-path 260ms cubic-bezier(.22, 1, .36, 1), opacity 180ms ease, visibility 0s 260ms;
}
.reading-toc.is-open { transform: translateY(0); clip-path: inset(-2rem); opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.reading-toc a { display: block; margin: 0; padding: .15rem .25rem .15rem 0; color: var(--muted); font-size: .8125rem; line-height: 1.65; overflow-wrap: anywhere; }
.reading-toc a[data-level="3"] { padding-left: 1rem; }
.reading-toc a:hover { color: var(--ink); }
.reading-toc a[aria-current="location"] { color: var(--coral); font-weight: 500; }
.reading-toc-backdrop { display: none; }

/* Previous/next titles use the same typography as body paragraphs. */
.reading-neighbors { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 4rem; width: min(100%, 62rem); margin: 3rem auto 0; }
.reading-neighbor { display: flex; align-items: flex-start; gap: .75rem; min-width: 0; color: var(--body); }
.reading-neighbor span { min-width: 0; font-family: inherit; font-size: 1rem; font-weight: 300; line-height: 2rem; overflow-wrap: anywhere; }
.reading-neighbor svg { flex: none; width: 18px; height: 18px; margin-top: 7px; }
.reading-neighbor--previous { grid-column: 1; text-align: left; }
.reading-neighbor--next { grid-column: 2; justify-content: flex-end; text-align: right; }
.reading-neighbor:hover { color: var(--coral); }
.photography .reading-neighbors { width: 100%; }

/* Narrow screens use a text entry in the existing header, without an extra toolbar. */
@media (max-width: 1320px) {
  .reading-region { --reading-toc-top: calc(var(--header-height) + 1rem); }
  .reading-tools { display: none; }
  .reading-toc-trigger--header { display: flex; margin-left: auto; }
  .reading-toc-trigger--header ~ .site-nav { margin-left: 0; }
  .reading-toc { width: min(20rem, calc(100% - 2 * var(--reading-rail-left))); background: var(--card); border-radius: 4px; box-shadow: 0 6px 24px color-mix(in srgb, var(--ink) 10%, transparent); }
  .reading-toc-links { padding: .875rem 1rem; }
  .reading-toc-backdrop { display: block; position: fixed; z-index: 16; inset: var(--header-height) 0 max(0px, calc(100dvh - var(--reading-end-y))); padding: 0; border: 0; background: color-mix(in srgb, var(--ink) 10%, transparent); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 180ms ease, visibility 0s 260ms; }
  .reading-toc-backdrop.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
}
@media (max-width: 800px) { .reading-region { --reading-rail-left: 1.1rem; } .reading-toc-trigger--header { margin-right: .25rem; min-height: 44px; } .reading-back { min-height: 44px; } }
@media (max-width: 720px) { .reading-neighbors { column-gap: 1.5rem; margin-top: 2.5rem; } .reading-neighbor { gap: .5rem; } }
@media (max-width: 600px) {
  .reading-neighbors { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .reading-neighbor--previous, .reading-neighbor--next { grid-column: 1; min-height: 44px; }
}
@media (pointer: coarse) { .reading-toc-trigger, .reading-back, .reading-neighbor { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .reading-toc, .reading-toc-backdrop, .reading-toc-chevron { transition: none; } }
@media print { .reading-tools, .reading-toc-trigger, .reading-toc, .reading-toc-backdrop { display: none !important; } }