/*
Theme Name: Oddsline
Theme URI: https://example.com/oddsline
Author: Oddsline Studio
Author URI: https://example.com
Description: Brutalist Betting Terminal — a dark, dense, monospace-numeral theme built for long-form analysis content (tennis betting strategy pillar/cluster content package). Hard offset acid-green shadows, zero radius, condensed grotesk headlines, terminal-style two-tier header, dense inline collapsible table of contents. All SEO logic (meta, canonical, JSON-LD, breadcrumbs, TOC, FAQ, related content, sitemap hygiene) lives inside the theme — no page builder, no SEO plugin required.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: oddsline
Tags: blog, one-column, custom-logo, custom-menu, featured-images, translation-ready, dark

Design card
------------
Composition   : dense single column — no sidebar. The auto-generated table of
                contents is a full-width collapsible <details> panel directly
                under the entry header instead (deliberately different
                composition axis from this generator's sibling theme,
                Matchline, which used a sticky sidebar TOC — see brief §10:
                "варьируй осознанно"). Front page keeps the imported PILLAR
                hero/layout as-is.
Header        : 3 selectable variants — terminal (dense two-tier: a slim
                mono status strip above the main brand/nav row, sticky),
                stacked (logo centered above a centered nav row), minimal
                (logo left, burger-only, slide-in drawer). Chosen in
                functions.php via ODL_HEADER_STYLE.
Palette       : Dark by default (unlike Matchline's light-by-default) —
                near-black page, off-white ink, one acid-lime accent used as
                a hard offset "sticker" shadow on every card. Optional light
                variant toggled via ODL_THEME_VARIANT.
Typography    : Condensed grotesk (Archivo Narrow) for headings, a
                technical sans (IBM Plex Sans) for body copy, IBM Plex Mono
                for everything numeric — odds figures, dates, bylines, nav
                meta, card foot rows. Fluid scale via clamp().
Cards         : 2px hairline border, 0 radius, flat fill — offset by a solid
                3px acid-lime "hard shadow" (no blur) at rest, which grows to
                5px and nudges the card up-left by 2px on hover/focus. No
                drop shadow softness anywhere in this theme.
Details       : radius 0 everywhere, dividers are hard 1-2px rules (never
                soft/blurred), hover/focus always moves the hard-shadow
                offset rather than fading opacity.
Density       : dense information layout — tighter line-height, more
                visible rules/borders, mono data everywhere, minimal
                whitespace compared to an editorial layout.

Compatibility notes (read before editing selectors)
----------------------------------------------------
Same constraint as always with this content package: the imported PILLAR
page's own <style> block (element selectors: body, h1, h2, h3, p, ul,
a[href], figure, blockquote, table, plus content classes such as .hero,
.toc, .card-grid, .site-header, .site-footer, .header-meta, etc.) is printed
by the theme on EVERY page via #pillar-custom-styles, positioned in <head>
AFTER this stylesheet on purpose, so content wins any tie on shared
selectors. Two consequences:

  1. Every class here is prefixed "odl-" — never a bare/generic name like
     .container, .card, .header, .footer, .hero, .toc (those belong to
     content).
  2. Chrome that must survive the content stylesheet's low-specificity
     element rules (nav links, TOC panel, cards, footer fallback, buttons)
     is scoped under a stable ID (#odl-shell, #odl-site-header, #odl-toc-
     panel, #odl-related, #odl-articles-grid, #main-content, ...) or written
     with two-class selectors. Either beats "a[href]"/"h1"/a single content
     class without ever resorting to !important, which the brief explicitly
     forbids for fighting content styles.
*/

/* ============================================================
   1) FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@600;700;800&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

/* ============================================================
   2) DESIGN TOKENS (all prefixed --odl-)
   ============================================================ */
:root {
  --odl-bg: #0a0b0c;
  --odl-surface: #141617;
  --odl-surface-raised: #1b1e1f;
  --odl-ink: #f3f4f0;
  --odl-ink-muted: #9ba1a3;
  --odl-ink-faint: #686e70;
  --odl-border: #2a2e30;
  --odl-border-strong: #454b4d;
  --odl-accent: #caff33;
  --odl-accent-ink: #0a0b0c;
  --odl-accent-wash: #1a2109;
  --odl-danger: #ff6a55;

  --odl-font-head: "Archivo Narrow", system-ui, sans-serif;
  --odl-font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --odl-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  --odl-shell-width: 1280px;
  --odl-read-width: 1280px;
  --odl-radius: 0px;
  --odl-shadow: 3px 3px 0 var(--odl-accent);
  --odl-shadow-hover: 5px 5px 0 var(--odl-accent);
}

#odl-shell.odl-variant-light {
  --odl-bg: #f1f0ea;
  --odl-surface: #ffffff;
  --odl-surface-raised: #e9e7dd;
  --odl-ink: #0f1110;
  --odl-ink-muted: #4c5152;
  --odl-ink-faint: #787d7e;
  --odl-border: #cfccbf;
  --odl-border-strong: #a9a597;
  --odl-accent: #0b6e64;
  --odl-accent-ink: #ffffff;
  --odl-accent-wash: #dcece8;
  --odl-danger: #a83a2c;
  --odl-shadow: 3px 3px 0 var(--odl-ink);
  --odl-shadow-hover: 5px 5px 0 var(--odl-ink);
}

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

/* ============================================================
   3) SHELL — everything the theme owns lives inside #odl-shell so
      content's global body{background/color/font} rule (printed
      after this file) cannot repaint the theme's own chrome.
   ============================================================ */
#odl-shell {
  background: var(--odl-bg);
  color: var(--odl-ink);
  font-family: var(--odl-font-body);
  font-size: .98rem;
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#odl-shell img {
  max-width: 100%;
  height: auto;
}

#odl-shell :focus-visible {
  outline: 3px solid var(--odl-accent);
  outline-offset: 2px;
}

.odl-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  background: var(--odl-accent);
  color: var(--odl-accent-ink);
  padding: .8em 1.2em;
  font-family: var(--odl-font-mono);
  font-weight: 700;
  font-size: .85rem;
  text-decoration: none;
}

.odl-skip-link:focus {
  left: 1rem;
  top: 1rem;
}

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

/* ============================================================
   4) HEADER (#odl-site-header) — 3 selectable layouts
   ============================================================ */
#odl-status-strip {
  background: var(--odl-accent);
  color: var(--odl-accent-ink);
  font-family: var(--odl-font-mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .35em 1.5rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

#odl-status-strip span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#odl-site-header {
  border-bottom: 2px solid var(--odl-border-strong);
  background: var(--odl-surface);
  position: sticky;
  top: 0;
  z-index: 40;
}

#odl-site-header .odl-header-row {
  max-width: var(--odl-shell-width);
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

#odl-site-header .odl-brand {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  text-decoration: none;
  color: var(--odl-ink);
}

#odl-site-header .odl-brand img {
  display: block;
  height: 36px;
  width: auto;
}

#odl-site-header .odl-brand .odl-brand-name {
  font-family: var(--odl-font-head);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  font-size: 1.4rem;
}

#odl-site-header .odl-brand .odl-brand-strap {
  font-family: var(--odl-font-mono);
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--odl-ink-muted);
}

#odl-site-header .odl-nav {
  display: flex;
}

#odl-site-header .odl-nav ul {
  list-style: none;
  display: flex;
  gap: 1.6rem;
  margin: 0;
  padding: 0;
}

#odl-site-header .odl-nav .odl-nav__link {
  font-family: var(--odl-font-mono);
  font-weight: 600;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--odl-ink);
  text-decoration: none;
  padding: .3em .1em;
  border-bottom: 2px solid transparent;
}

#odl-site-header .odl-nav .odl-nav__link:hover,
#odl-site-header .odl-nav .odl-nav__link:focus-visible {
  color: var(--odl-accent);
  border-bottom-color: var(--odl-accent);
}

#odl-site-header .odl-nav .sub-menu {
  list-style: none;
  margin: 0;
  padding: .4rem 0;
  position: absolute;
  background: var(--odl-surface);
  border: 2px solid var(--odl-border-strong);
  min-width: 200px;
  display: none;
  flex-direction: column;
}

#odl-site-header .odl-nav li {
  position: relative;
}

#odl-site-header .odl-nav li:hover>.sub-menu,
#odl-site-header .odl-nav li:focus-within>.sub-menu {
  display: flex;
}

#odl-site-header .odl-nav .sub-menu .odl-nav__link {
  padding: .55em 1rem;
  display: block;
  border: none;
}

#odl-site-header .odl-nav .sub-menu .odl-nav__link:hover {
  background: var(--odl-accent-wash);
}

#odl-site-header .odl-burger {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  width: 42px;
  height: 42px;
  border: 2px solid var(--odl-border-strong);
  background: transparent;
  cursor: pointer;
  padding: 0;
}

#odl-site-header .odl-burger span {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background: var(--odl-ink);
}

/* header variant: terminal (default) — status strip visible */
#odl-site-header.odl-header--terminal {}

/* header variant: stacked */
#odl-site-header.odl-header--stacked .odl-header-row {
  flex-direction: column;
  gap: .75rem;
  padding-top: 1.3rem;
  text-align: center;
}

#odl-site-header.odl-header--stacked .odl-nav ul {
  justify-content: center;
}

#odl-site-header.odl-header--stacked .odl-header-aside {
  position: absolute;
  right: 1.5rem;
  top: 1.3rem;
}

/* header variant: minimal — burger + drawer only, status strip hidden */
#odl-shell.odl-header-style--minimal #odl-status-strip {
  display: none;
}

#odl-site-header.odl-header--minimal .odl-nav {
  display: none;
}

#odl-site-header.odl-header--minimal .odl-burger {
  display: inline-flex;
}

#odl-site-header .odl-header-aside {
  display: flex;
  align-items: center;
  gap: 1rem;
}

@media (max-width:900px) {
  #odl-site-header .odl-nav {
    display: none;
  }

  #odl-site-header .odl-burger {
    display: inline-flex;
  }

  #odl-site-header.odl-header--stacked .odl-header-aside {
    position: static;
  }

  #odl-status-strip {
    font-size: .62rem;
  }
}

/* mobile drawer */
#odl-mobile-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(86vw, 340px);
  background: var(--odl-surface);
  border-left: 2px solid var(--odl-border-strong);
  transform: translateX(100%);
  transition: transform .25s ease;
  z-index: 60;
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
}

#odl-mobile-drawer.odl-is-open {
  transform: translateX(0);
}

#odl-mobile-drawer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#odl-mobile-drawer li {
  border-bottom: 1px solid var(--odl-border);
}

#odl-mobile-drawer .odl-nav__link {
  display: block;
  padding: .85em 0;
  font-family: var(--odl-font-mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--odl-ink);
  text-decoration: none;
}

#odl-mobile-drawer .odl-drawer-close {
  border: 2px solid var(--odl-border-strong);
  background: none;
  width: 36px;
  height: 36px;
  font-size: 1.1rem;
  cursor: pointer;
  margin-bottom: 1rem;
  color: var(--odl-ink);
}

#odl-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 55;
}

#odl-drawer-overlay.odl-is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================================
   5) LAYOUT — single dense column, no sidebar (composition axis
      change from this generator's other theme).
   ============================================================ */
#main-content {
  max-width: var(--odl-shell-width);
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
  width: 100%;
  flex: 1;
}

.odl-primary {
  min-width: 0;
}

/* ============================================================
   6) BREADCRUMBS
   ============================================================ */
#odl-breadcrumbs {
  max-width: var(--odl-shell-width);
  margin: 0 auto;
  padding: 1rem 1.5rem 0;
}

#odl-breadcrumbs .odl-crumbs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .4em;
  margin: 0;
  padding: 0;
  font-family: var(--odl-font-mono);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--odl-ink-faint);
}

#odl-breadcrumbs .odl-crumbs li:not(:last-child)::after {
  content: "/";
  margin-left: .4em;
  color: var(--odl-border-strong);
}

#odl-breadcrumbs .odl-crumbs a {
  color: var(--odl-ink-muted);
  text-decoration: none;
}

#odl-breadcrumbs .odl-crumbs a:hover {
  color: var(--odl-accent);
}

#odl-breadcrumbs .odl-crumbs [aria-current="page"] {
  color: var(--odl-ink);
}

/* ============================================================
   7) ENTRY HEADER
   ============================================================ */
#odl-entry-header {
  max-width: var(--odl-read-width);
  margin: 1.2rem 0 1.4rem;
}

#odl-entry-header .odl-eyebrow {
  display: inline-block;
  font-family: var(--odl-font-mono);
  font-weight: 700;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--odl-accent);
  margin-bottom: .6em;
}

#odl-entry-header .odl-entry-title {
  font-family: var(--odl-font-head);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -.005em;
  margin: 0 0 .5em;
  color: var(--odl-ink);
}

.odl-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  font-family: var(--odl-font-mono);
  font-size: .76rem;
  color: var(--odl-ink-muted);
  padding-top: .8em;
  border-top: 2px solid var(--odl-border-strong);
}

.odl-meta-row .odl-meta-item {
  display: inline-flex;
  align-items: center;
  gap: .4em;
}

/* .odl-meta-row .odl-meta-item a — two classes (0,2,1), not ".odl-meta-row
   a" (0,1,1), which would tie with content's global a[href] and lose since
   content's stylesheet is printed after this one. Same reasoning applies
   throughout this file wherever a bare "a" follows a single theme class. */
.odl-meta-row .odl-meta-item a {
  color: var(--odl-ink-muted);
  text-decoration: none;
}

.odl-meta-row .odl-meta-item a:hover {
  color: var(--odl-accent);
}

#odl-featured-figure {
  margin: 0 0 1.6rem;
  max-width: var(--odl-shell-width);
}

#odl-featured-figure img {
  width: 100%;
  height: auto;
  display: block;
  border: 2px solid var(--odl-border-strong);
}

/* ============================================================
   8) ENTRY CONTENT — low specificity on purpose: the imported
      article HTML is styled by the content's own <style>.
   ============================================================ */
.odl-entry-content {
  max-width: var(--odl-read-width);
}

.odl-entry-content table {
  width: 100%;
}

.odl-table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  margin: 1.5em 0;
}

.odl-table-responsive table {
  min-width: 520px;
  margin: 0;
}

/* ============================================================
   9) INLINE TOC PANEL (composition-axis difference: this theme
      has no sidebar — the auto-TOC is a dense collapsible panel
      instead, full width, directly under the entry header).
   ============================================================ */
.odl-toc-panel {
  max-width: var(--odl-read-width);
  margin: 0 0 1.8rem;
  border: 2px solid var(--odl-border-strong);
  background: var(--odl-surface);
}

.odl-toc-panel .odl-toc-panel__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: .7em 1em;
  font-family: var(--odl-font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .78rem;
  color: var(--odl-ink);
}

.odl-toc-panel .odl-toc-panel__summary::-webkit-details-marker {
  display: none;
}

.odl-toc-panel .odl-toc-panel__summary::after {
  content: "[ + ]";
  color: var(--odl-accent);
  font-size: .75rem;
}

.odl-toc-panel[open] .odl-toc-panel__summary::after {
  content: "[ \2212 ]";
}

.odl-toc-panel .odl-toc-panel__body {
  border-top: 2px solid var(--odl-border-strong);
  padding: .9em 1em 1.1em;
  display: grid;
/*   grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .2em 1.5em; */
}

.odl-toc-panel ol,
.odl-toc-panel ol ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.odl-toc-panel li {
  margin: 0;
}

/* .odl-toc-panel .odl-toc-link — two classes (specificity 0,2,0) rather
   than ".odl-toc-panel a" (0,1,1), which would tie with content's a[href]
   and lose since content's stylesheet loads after this one. */
.odl-toc-panel .odl-toc-link {
  display: block;
  padding: .3em 0;
  font-family: var(--odl-font-mono);
  font-size: .84rem;
  color: var(--odl-ink-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: .5em;
  margin-left: -.5em;
}

.odl-toc-panel .odl-toc-link:hover,
.odl-toc-panel .odl-toc-link:focus-visible,
.odl-toc-panel .odl-toc-link.odl-is-active {
  color: var(--odl-ink);
  border-left-color: var(--odl-accent);
}

.odl-toc-panel ol ol {
  padding-left: 1em;
  grid-column: 1/-1;
}

#odl-front-toc {
  max-width: var(--odl-read-width);
  margin: 1.6rem auto;
}

/* ============================================================
   10) CARDS — hard offset acid shadow, 2px border, zero radius
   ============================================================ */
.odl-card {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--odl-border-strong);
  background: var(--odl-surface);
  box-shadow: var(--odl-shadow);
  transition: box-shadow .12s ease, transform .12s ease;
}

.odl-card:hover,
.odl-card:focus-within {
  box-shadow: var(--odl-shadow-hover);
  transform: translate(-2px, -2px);
}

.odl-card .odl-card__media {
  display: block;
  aspect-ratio: 16/10;
  overflow: hidden;
  border-bottom: 2px solid var(--odl-border-strong);
}

.odl-card .odl-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(.15) contrast(1.05);
}

.odl-card .odl-card__body {
  padding: 1.1rem 1.2rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1;
}

.odl-card .odl-card__eyebrow {
  font-family: var(--odl-font-mono);
  font-weight: 700;
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--odl-accent);
}

.odl-card .odl-card__title {
  font-family: var(--odl-font-head);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.1rem;
  line-height: 1.22;
  margin: 0;
}

.odl-card .odl-card__title {
  position: relative;
}

.odl-card .odl-card__title a {
  color: var(--odl-ink);
  text-decoration: none;
}

.odl-card .odl-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.odl-card .odl-card__excerpt {
  font-size: .87rem;
  line-height: 1.5;
  color: var(--odl-ink-muted);
  margin: 0;
}

.odl-card .odl-card__foot {
  margin-top: auto;
  padding-top: .6em;
  border-top: 1px dashed var(--odl-border-strong);
  font-family: var(--odl-font-mono);
  font-size: .7rem;
  color: var(--odl-ink-faint);
  display: flex;
  gap: .9em;
  text-transform: uppercase;
  letter-spacing: .04em;
}

#odl-articles-grid,
#odl-related-grid,
#odl-news-grid,
#odl-predictions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.6rem 1.4rem;
  margin: 1.5rem 0;
}

#odl-related {
  max-width: var(--odl-read-width);
  margin: 3rem auto 0;
  padding-top: 1.6rem;
  border-top: 2px solid var(--odl-border-strong);
}

#odl-related .odl-section-title {
  font-family: var(--odl-font-head);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.3rem;
  margin: 0 0 1.2rem;
}

.odl-card--feature {
  grid-column: 1/-1;
  flex-direction: row;
}

.odl-card--feature .odl-card__media {
  border-bottom: none;
  border-right: 2px solid var(--odl-border-strong);
  flex: 0 0 46%;
  aspect-ratio: auto;
}

.odl-card--feature .odl-card__body {
  flex: 1;
  justify-content: center;
  padding: 1.6rem 1.8rem;
}

.odl-card--feature .odl-card__title {
  font-size: 1.6rem;
}

@media (max-width:700px) {
  .odl-card--feature {
    flex-direction: column;
  }

  .odl-card--feature .odl-card__media {
    border-right: none;
    border-bottom: 2px solid var(--odl-border-strong);
    flex: none;
    aspect-ratio: 16/10;
  }
}

/* ============================================================
   10b) FAQ accordion
   ============================================================ */
.odl-faq {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin: 1.8em 0;
  max-width: var(--odl-read-width);
}

.odl-faq .odl-faq__item {
  border: 2px solid var(--odl-border-strong);
  background: var(--odl-surface);
}

.odl-faq .odl-faq__summary {
  list-style: none;
  cursor: pointer;
  padding: .9em 1.1em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
}

.odl-faq .odl-faq__summary::-webkit-details-marker {
  display: none;
}

.odl-faq .odl-faq__summary::after {
  content: "[ + ]";
  font-family: var(--odl-font-mono);
  color: var(--odl-accent);
  font-size: .8rem;
  flex-shrink: 0;
}

.odl-faq .odl-faq__item[open] .odl-faq__summary::after {
  content: "[ \2212 ]";
}

.odl-faq .odl-faq__question {
  font-family: var(--odl-font-head);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1rem;
  margin: 0;
  color: var(--odl-ink);
}

.odl-faq .odl-faq__answer {
  padding: 0 1.1em 1em;
  color: var(--odl-ink-muted);
  font-size: .92rem;
  line-height: 1.55;
  border-top: 1px dashed var(--odl-border-strong);
  margin-top: 0;
  padding-top: .8em;
}

.odl-faq .odl-faq__answer p {
  margin: 0;
}

/* ============================================================
   11) PAGINATION
   ============================================================ */
.odl-pagination {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 2.2rem 0 0;
  padding-top: 1.4rem;
  border-top: 2px solid var(--odl-border-strong);
  font-family: var(--odl-font-mono);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.odl-pagination .odl-pagination__link,
.odl-pagination .odl-pagination__disabled {
  color: var(--odl-ink);
  text-decoration: none;
  padding: .5em .9em;
  border: 2px solid var(--odl-border-strong);
  display: inline-block;
}

.odl-pagination .odl-pagination__link:hover {
  border-color: var(--odl-accent);
  color: var(--odl-accent);
}

.odl-pagination .odl-pagination__disabled {
  color: var(--odl-ink-faint);
}

/* ============================================================
   12) AUTHOR BIO / EMPTY NOTICE
   ============================================================ */
.odl-author-bio {
  display: flex;
  gap: 1rem;
  align-items: center;
  max-width: var(--odl-read-width);
  margin: 2.4rem 0 0;
  padding-top: 1.4rem;
  border-top: 2px solid var(--odl-border-strong);
  font-family: var(--odl-font-mono);
  font-size: .8rem;
  color: var(--odl-ink-muted);
}

.odl-empty-notice {
  border: 2px dashed var(--odl-border-strong);
  padding: 2rem;
  text-align: center;
  font-family: var(--odl-font-mono);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--odl-ink-muted);
  margin: 1.5rem 0;
}

/* ============================================================
   13) FOOTER FALLBACK (#odl-site-footer)
   ============================================================ */
#odl-site-footer {
  margin-top: auto;
  background: #000000;
  color: #a9afb1;
  border-top: 2px solid var(--odl-border-strong);
}

#odl-site-footer .odl-footer-row {
  max-width: var(--odl-shell-width);
  margin: 0 auto;
  padding: 2.8rem 1.5rem 2rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

#odl-site-footer .odl-footer-title {
  font-family: var(--odl-font-mono);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--odl-accent);
  margin: 0 0 .8em;
}

#odl-site-footer p {
  color: #a9afb1;
  font-size: .8rem;
  line-height: 1.6;
  margin: 0 0 .6em;
}

#odl-site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#odl-site-footer li {
  margin: .3em 0;
}

#odl-site-footer a {
  color: #c8cccd;
  text-decoration: none;
  font-size: .83rem;
}

#odl-site-footer a:hover {
  color: var(--odl-accent);
}

#odl-site-footer .odl-footer-bottom {
  max-width: var(--odl-shell-width);
  margin: 0 auto;
  padding: 1.1rem 1.5rem 2rem;
  border-top: 1px solid #222;
  font-family: var(--odl-font-mono);
  font-size: .7rem;
  color: #6b7072;
  text-transform: uppercase;
  letter-spacing: .05em;
}

@media (max-width:800px) {
  #odl-site-footer .odl-footer-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width:480px) {
  #odl-site-footer .odl-footer-row {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   14) BACK TO TOP
   ============================================================ */
#odl-back-to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 44px;
  height: 44px;
  border: 2px solid var(--odl-border-strong);
  background: var(--odl-surface);
  color: var(--odl-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  box-shadow: var(--odl-shadow);
  transition: opacity .2s ease, transform .2s ease, border-color .2s ease;
  z-index: 45;
}

#odl-back-to-top.odl-is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#odl-back-to-top:hover {
  border-color: var(--odl-accent);
  color: var(--odl-accent);
}

/* ============================================================
   15) 404
   ============================================================ */
#odl-404 {
  max-width: var(--odl-read-width);
  margin: 3rem auto;
  text-align: center;
}

#odl-404 .odl-404-code {
  font-family: var(--odl-font-mono);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .3em;
  color: var(--odl-accent);
}

#odl-404 h1 {
  font-family: var(--odl-font-head);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  margin: .3em 0;
}

#odl-404 .odl-404-subtitle {
  font-family: var(--odl-font-mono);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--odl-ink-muted);
  margin: 2rem 0 0;
}

#odl-404 .odl-404-list {
  list-style: none;
  margin: .8rem 0 0;
  padding: 0;
  text-align: left;
  display: inline-block;
}

#odl-404 .odl-404-list li {
  border-bottom: 1px solid var(--odl-border-strong);
}

#odl-404 .odl-404-list a {
  display: block;
  padding: .7em 0;
  color: var(--odl-ink);
  text-decoration: none;
  font-family: var(--odl-font-mono);
}

#odl-404 .odl-404-list a:hover {
  color: var(--odl-accent);
}

/* ============================================================
   16) SITEMAP
   ============================================================ */
.odl-sitemap-tree {
  max-width: var(--odl-read-width);
}

.odl-sitemap-tree ul {
  list-style: none;
  margin: 0 0 0 1.1rem;
  padding: 0;
  border-left: 1px solid var(--odl-border-strong);
}

.odl-sitemap-tree>ul {
  margin-left: 0;
  border-left: none;
}

.odl-sitemap-tree li {
  margin: .15em 0;
  padding-left: 1rem;
}

.odl-sitemap-tree .odl-sitemap-link {
  color: var(--odl-ink);
  text-decoration: none;
  font-family: var(--odl-font-mono);
  font-size: .9rem;
}

.odl-sitemap-tree .odl-sitemap-link:hover {
  color: var(--odl-accent);
}

.odl-sitemap-section-title {
  font-family: var(--odl-font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .75rem;
  color: var(--odl-ink-muted);
  margin: 2rem 0 .6rem;
}

.odl-sitemap-section-title:first-child {
  margin-top: 0;
}

/* ============================================================
   17) PRINT
   ============================================================ */
@media print {

  #odl-site-header,
  #odl-status-strip,
  #odl-back-to-top,
  #odl-mobile-drawer,
  #odl-drawer-overlay,
  #odl-site-footer {
    display: none !important;
  }
}

/* Fix*/
:root {
  --content-width: 960px;
}

[data-content="hero"] {
  max-width: none;
  width: auto;
  margin-left: 0;
  padding: 0;
  text-align: left;
  position: static;
  background: none;
}

.hero-rubric {
  text-align: center;
}

.custom-logo {
  max-width: 100px !important;
  display: block;
}

main header {
  background: initial;
  border-bottom: initial;
  padding: initial;
  position: initial;
  top: initial;
  z-index: initial;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: inherit !important;
}

.tldr {
  background: initial;
  border-left: initial;
  border-radius: initial;
  padding: initial;
  margin-top: initial;
  margin-bottom: initial;
}

th {
  background: transparent;
  color: inherit;
  font-weight: normal;
  text-align: inherit;
  padding: 0;
  border-bottom: none;
}

tr:hover {
  background: inherit;
}

.card-grid>div {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

[data-content="faq"] details {
  background: transparent;
  border: none;
  border-radius: 0;
  margin-bottom: 0;
}

[data-content="faq"] summary {
  padding: 0;
  cursor: pointer;
  font-weight: normal;
  list-style: initial;
}

.callout {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
}
.reveal {
  opacity: 1 !important;
}