/* The Caffeine Tail — series-local styles. Shared article styles live in /articles/styles.css. */

html { scroll-behavior: smooth; }

.series-kicker { margin: 18px 0 6px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }

/* series nav (same shape as The Edmonton Half, Measured) */
.series-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 4px; }
.series-nav a, .series-nav span { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 8px 14px; border-radius: 999px; text-decoration: none; border: 1px solid rgba(69, 34, 14, 0.18); }
.series-nav .now { background: var(--blue); color: #fff; border-color: var(--blue); }
.series-nav a:not(.now) { color: var(--blue); background: #fff; }

/* No JavaScript: every level shows, stacked, and the dead tab bar is hidden. */
.level-dossier:not(.tabs-ready) .folder-tabs { display: none; }
.level-dossier:not(.tabs-ready) .folder-body { border-top: 1px solid var(--line-strong); border-radius: 8px; }
.level-dossier:not(.tabs-ready) .level-panel + .level-panel { margin-top: 56px; padding-top: 40px; border-top: 2px solid var(--line-strong); }
.level-kicker { margin: 0; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
.folder-tab:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* citations and sources (same shape as the Edmonton series) */
.cite { font-size: 0.64em; font-weight: 800; line-height: 0; white-space: nowrap; }
.cite a, .article-prose .cite a { color: #b5372a; text-decoration: none; padding: 0 1px; font-weight: 800; }
.cite a:hover { text-decoration: underline; }
.series-sources { margin-top: 44px; }
.series-sources h2 { font-size: 1.6rem; }
.source-list { list-style: decimal; padding-left: 1.7em; }
.source-list li { margin: 0 0 10px; line-height: 1.55; scroll-margin-top: 96px; }
.source-list li::marker { color: #b5372a; font-weight: 800; }
.source-list a { color: var(--blue); font-weight: 700; overflow-wrap: anywhere; }
.source-list li:target { background: rgba(181, 55, 42, 0.1); outline: 2px solid rgba(181, 55, 42, 0.4); outline-offset: 3px; border-radius: 4px; }

/* figures */
.tail-figure { margin: 26px 0 10px; }
.tail-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line-strong); border-radius: 8px; background: #f0e7d5; }
.tail-figure figcaption { margin-top: 10px; color: var(--muted); font-size: 0.88rem; line-height: 1.55; }
.tail-figure figcaption strong { color: var(--ink-soft); }

/* stat strip */
.statstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; margin: 18px 0 8px; }
.stat { background: #0d1c22; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 13px 14px; color: #EAF4F6; }
.stat .k { font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: #93b4bc; }
.stat .v { font-size: 1.42rem; font-weight: 800; margin-top: 3px; }
.stat .n { font-size: 0.7rem; color: #93b4bc; margin-top: 2px; }

/* the safety line every level carries */
.safety { background: #fbf8f2; border: 1px solid rgba(69, 34, 14, 0.16); border-left: 5px solid #b5372a; border-radius: 12px; padding: 14px 18px; font-size: 0.9rem; line-height: 1.6; color: #5b4630; }
.safety strong { color: #2a1a0e; }

/* model box */
.model-box { background: #fbf8f2; border: 1px solid rgba(69, 34, 14, 0.16); border-left: 5px solid #8a755a; border-radius: 12px; padding: 16px 20px; font-size: 0.92rem; line-height: 1.6; color: #5b4630; }
.model-box code, .article-prose code { font-size: 0.9em; background: rgba(69, 34, 14, 0.06); padding: 1px 5px; border-radius: 4px; }
.equation { display: block; overflow-x: auto; white-space: pre; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.9rem; background: rgba(69, 34, 14, 0.05); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }

.table-scroll { overflow-x: auto; }

.read-on { margin-top: 34px; padding: 20px 22px; background: linear-gradient(135deg, #0E6E78, #123A4F); color: #EAF4F6; border-radius: 16px; box-shadow: 0 16px 38px rgba(14, 110, 120, 0.28); }
.read-on p { margin: 0; line-height: 1.6; color: #EAF4F6; }
.read-on p + p { margin-top: 8px; }
.read-on a { color: #ffd166; font-weight: 800; }

.back-to-top-wrap { text-align: center; margin: 40px 0 6px; }
.back-to-top { display: inline-flex; align-items: center; gap: 10px; padding: 15px 36px; border-radius: 999px; background: #0d1c22; color: #EAF4F6; text-decoration: none; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.back-to-top:hover { background: #122a33; }

/* Text-heavy grids stay legible on phones: scroll sideways instead of shrinking. */
@media (max-width: 640px) {
  .tail-figure.wide { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tail-figure.wide img { min-width: 660px; }
}