/* -------------------------------------------------------
   HARBOR-DELTA DESIGN SYSTEM
   delta-extensions.css  (v1.1)
   Purpose: Article themes, accent modules, experimental
            overrides, Harborbluee & DockBlue variants
-------------------------------------------------------- */

/* ------------------------------------------------------------
   ARTICLE THEMES — BASE HOOK
   ------------------------------------------------------------ */

.article-container[data-article-theme] {
  --delta-color-fg: #000; /* universal body text color */
  border-left: 4px solid transparent;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

/* ------------------------------------------------------------
   THEME: ALERT  (canvas-matching)
   ------------------------------------------------------------ */

.article-container[data-article-theme="alert"] {
  --delta-color-bg: #ffffff;
  --delta-color-fg: black; /* ALERT is the ONLY theme with its own fg */
  --delta-color-border: rgb(180, 11, 14);

  background: var(--page-canvas-bg);
  border-left-color: var(--delta-color-border);
}

/* ------------------------------------------------------------
   THEME: SOFTBLUE
   ------------------------------------------------------------ */

.article-container[data-article-theme="softblue"] {
  --delta-color-bg: #f4f8ff;
  --delta-color-border: #bcd3f7;

  background: var(--delta-color-bg);
  border-left-color: var(--delta-color-border);
}

/* ------------------------------------------------------------
   THEME: GOLD
   ------------------------------------------------------------ */

.article-container[data-article-theme="gold"] {
  --delta-color-bg: #fffdf5;
  --delta-color-border: #e8d48a;

  background: var(--delta-color-bg);
  border-left-color: var(--delta-color-border);
}

/* ------------------------------------------------------------
   THEME: PARCHMENT
   ------------------------------------------------------------ */

.article-container[data-article-theme="parchment"] {
  --delta-color-bg: #faf6e9;
  --delta-color-border: #d8c9a3;

  background: var(--delta-color-bg);
  border-left-color: var(--delta-color-border);
}

[data-article-theme="parchment"] {
  --article-bg: linear-gradient(
  to bottom,
  #faf6e9 0%,
  #f3e9d3 32%,
  #e4d3aa 100%
)!important;

  --delta-border-color: #c2a878;
}

[data-article-theme="parchment"] .article-container img {
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  border-radius: 4px;
}

/* ------------------------------------------------------------
   THEME: RED
   ------------------------------------------------------------ */

.article-container[data-article-theme="red"] {
  --delta-color-bg: #faf6e9;
  --delta-color-border: red;

  background: var(--delta-color-bg);
  border-left-color: var(--delta-color-border);
}

/* ------ THEME: DIGITAL (Enhanced) ------ */
.article-container[data-article-theme="digital"] {
  /* Colors */
  --delta-color-border: rgb(35,114,116);
  --digital-bg: linear-gradient(to bottom, #fdfcf9 0%, #f7f4eb 100%);

  /* Shadows */
  --digital-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --digital-shadow-md: 0 3px 6px rgba(0, 0, 0, 0.08);
  --digital-shadow-lg: 0 8px 16px rgba(35, 114, 116, 0.18);
  --digital-shadow-hover: 0 12px 24px rgba(35, 114, 116, 0.26);

  /* Typography */
  font-family: var(--digital-sans, "Inter", "Segoe UI", sans-serif);

  /* Application */
  background: var(--digital-bg);
  border-left-color: var(--delta-color-border);
  border-radius: var(--radius-md);
  padding: var(--delta-space-5);

  box-shadow:
    var(--digital-shadow-sm),
    var(--digital-shadow-md),
    var(--digital-shadow-lg);

  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.article-container[data-article-theme="digital"]:hover {
  box-shadow:
    var(--digital-shadow-sm),
    var(--digital-shadow-md),
    var(--digital-shadow-hover);
  transform: translateY(-2px);
}

/* DIGITAL Headings */
.article-container[data-article-theme="digital"] h1,
.article-container[data-article-theme="digital"] h2,
.article-container[data-article-theme="digital"] h3,
.article-container[data-article-theme="digital"] h4,
.article-container[data-article-theme="digital"] h5,
.article-container[data-article-theme="digital"] h6 {
  font-family: var(--digital-sans, "Inter", "Segoe UI", sans-serif);
}

:root {
  --digital-sans: "Inter", "Segoe UI", sans-serif;
}

/* ------------------------------------------------------------
   THEME: OMINOUS
   ------------------------------------------------------------ */

.article-container[data-article-theme="ominous"] {
  --delta-color-bg: #dddfd9;
  --delta-color-border: #000;

  background: var(--delta-color-bg);
  border-left-color: var(--delta-color-border);
}

/* ------------------------------------------------------------
   THEME: NEUTRAL
   ------------------------------------------------------------ */

.article-container[data-article-theme="neutral"] {
  --delta-color-bg: #f8f8f8;
  --delta-color-border: #ccc;

  background: var(--delta-color-bg);
  border-left-color: var(--delta-color-border);
}

/* -------------------------------------------------------
   ARTICLE THEMES
-------------------------------------------------------- */

/* DockBlue Theme (inlet water) */
.article-container.article-dockblue {
  --article-border-color: var(--dockblue-500);
  --article-border-width: 3px;
  --article-bg: var(--dockblue-50);

  --article-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --article-shadow-md: 0 3px 6px rgba(0, 0, 0, 0.1);
  --article-shadow-lg: 0 8px 16px rgba(42, 111, 187, 0.15);

  background: var(--article-bg);
  border: var(--article-border-width) solid var(--article-border-color);
  border-radius: var(--radius-md);
  padding: var(--delta-space-5);

  box-shadow:
    var(--article-shadow-sm), var(--article-shadow-md), var(--article-shadow-lg);
}

.article-container.article-dockblue:hover {
  box-shadow:
    var(--article-shadow-sm),
    var(--article-shadow-md),
    0 12px 24px rgba(42, 111, 187, 0.22);
  transform: translateY(-2px);
  transition:
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

/* Harborbluee Theme (deep harbor water) */
.article-container.article-harborbluee {
  --article-border-color: var(--harborbluee-500);
  --article-border-width: 3px;
  --article-bg: var(--harborbluee-50);

  --article-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --article-shadow-md: 0 3px 6px rgba(0, 0, 0, 0.09);
  --article-shadow-lg: 0 8px 16px rgba(31, 95, 163, 0.18);

  background: var(--article-bg);
  border: var(--article-border-width) solid var(--article-border-color);
  border-radius: var(--radius-md);
  padding: var(--delta-space-5);

  box-shadow:
    var(--article-shadow-sm), var(--article-shadow-md), var(--article-shadow-lg);
}

.article-container.article-harborbluee:hover {
  box-shadow:
    var(--article-shadow-sm),
    var(--article-shadow-md),
    0 12px 24px rgba(31, 95, 163, 0.26);
  transform: translateY(-2px);
  transition:
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

/* HarborSky Theme (future option) */
.article-container.article-harborsky {
  --article-border-color: var(--harborbluee-300);
  --article-border-width: 2px;
  --article-bg: var(--neutral-50);

  background: var(--article-bg);
  border: var(--article-border-width) solid var(--article-border-color);
  border-radius: var(--radius-md);
  padding: var(--delta-space-5);
}

/* ------------------------------------------------------------
   HARBOR.CSS THEMES — PORTED TO DELTA
   ------------------------------------------------------------ */

/* Border-only themes */
.article-container.article-softblue {
  --article-border-color: #2a6f97;
}

.article-container.article-gold {
  --article-border-color: #c9a227;
}

.article-container.article-green {
  --article-border-color: #0a281b;
  --article-border-width: 2px;
}

.article-container.article-red {
  --article-border-color: #8b0000;
  --article-border-width: 2px;
}

/* Full themes */
.article-container.article-preeminent {
  --article-border-color: #c9a227;
  --article-bg: #f7f2dd;
}

.article-container.article-parchment {
  --article-border-color: #e8dcc7;
  --article-border-width: 3px;
  --article-bg: #fdf8f1;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 2px 4px rgba(0, 0, 0, 0.04);
}

.article-container.article-escha {
  --article-border-color: #d5802f;
  --article-border-width: 1px;
  --article-bg: #ede8da;
}

.article-container.article-gray {
  --article-border-color: black;
  --article-border-width: 1px;
  --article-bg: #f1f1f1;
}

.article-container.article-ominous {
  --article-border-color: black;
  --article-border-width: 2px;
  --article-bg: #dddfd9;
}

.article-container.article-test {
  --article-border-color: #1f5fa3;
  --article-border-width: 2px;
  --article-bg: #f5f8fc;
}

.article-container.article-test {
}

.article-container.article-dockblue {
  --article-border-color: #2a6fbb;
  --article-border-width: 3px;
  --article-bg: #f4f7fa;
}

.article-container.article-wtl {
  --article-border-color: rgb(125, 247, 226);
  --article-bg: black;
  --article-border-width: 4px;
  --article-color: white;
}

.article-container.article-antimatter {
  --article-border-color: #81c1d2;
  --article-bg: black;
  --article-border-width: 4px;
  --article-color: white;
}

.article-container.article-gold-black {
  --article-border-color: #c9a227;
  --article-bg: #f4f7fa;
  --article-border-width: 2px;
}

/* Full gold theme */
.article-container.article-gold-theme {
  --article-border-color: #c9a227;
  --article-bg: #fffdf5;
}

.article-container.article-gold-theme h1,
.article-container.article-gold-theme h2,
.article-container.article-gold-theme h3 {
  color: #c9a227;
}

.article-container.article-gold-theme hr {
  border-color: #c9a227;
}

.article-container.article-gold-theme strong {
  color: #b8860b;
}

.article-container.article-gold-theme a {
  color: #c9a227;
}

.article-container.article-gold-theme a:hover {
  color: #d4af37;
}

/* ================================
   VERSUS–DELTA THEME
   ================================ */

[data-article-theme="versus"] {
  --article-bg: #f5ecd6;
  --article-background: #f5ecd6;

  --article-text: #3b2f1f;
  --article-heading: #660000;

  --blockquote-border-color: #660000;
  --hr-color: #660000;

  --article-border-color: #660000;
  --article-border-width: 4px;
  --article-border: 4px solid #660000;
}

.article-container[data-article-theme="versus"] {
  background: var(--article-bg);
  color: var(--article-text);
  border-left: var(--article-border-width) solid var(--article-border-color);
  padding: var(--delta-article-padding, 2rem);
  border-radius: var(--delta-article-radius, 6px);
  box-shadow: var(--delta-article-shadow, 0 1px 3px rgba(0,0,0,0.08));
  max-width: var(--delta-article-max-width, 860px);
  margin: 0 auto;
}

[data-article-theme="versus"] .article-container h1,
[data-article-theme="versus"] .article-container h2,
[data-article-theme="versus"] .article-container h3,
[data-article-theme="versus"] .article-container h4,
[data-article-theme="versus"] .article-container h5,
[data-article-theme="versus"] .article-container h6 {
  color: var(--article-heading);
}

.article-container[data-article-theme="versus"] {
  border-left: var(--article-border-width) solid var(--article-border-color);
}

/* --------------------------------------------------------------
   BETA THEME: HarborskyBeta
   Clean Beta geometry + HarborSky palette
-------------------------------------------------------------- */

.article-container.article-harborskybeta {
  /* Surface */
  background: var(--harborsky-50);
  color: var(--harborsky-900);

  /* Beta geometry */
  padding: 2rem;
  border-left: 4px solid var(--harborsky-500);
  border-radius: 6px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}

/* Links */
.article-container.article-harborskybeta a {
  color: var(--harborsky-500);
}

.article-container.article-harborskybeta a:hover {
  color: var(--harborsky-700);
}

/* Cards inside article */
.article-container.article-harborskybeta .card {
  background: var(--harborsky-100);
  border-left: 3px solid var(--harborsky-300);
  padding: 1rem;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* ================================
   PARCHMENT–DELTA THEME
   ================================ */

[data-article-theme="parchment"] {
  --article-bg: #f7f2e7;
  --article-text: #3b2f1f;
  --article-heading: #2a241b;
  --blockquote-border-color: #c2a878;
  --hr-color: #c2a878;
}

[data-article-theme="parchment"] .article-container {
  background: var(--article-bg);
  color: var(--article-text);
}

[data-article-theme="parchment"] .article-container h1,
[data-article-theme="parchment"] .article-container h2,
[data-article-theme="parchment"] .article-container h3,
[data-article-theme="parchment"] .article-container h4,
[data-article-theme="parchment"] .article-container h5,
[data-article-theme="parchment"] .article-container h6 {
  color: var(--article-heading);
}

/* ================================
   HARBORSKY–DELTA (Enhanced)
   ================================ */

[data-article-theme="harborsky"] {
  --article-bg: linear-gradient(
    to bottom,
    #f7fbff 0%,
    #eef5fa 40%,
    #e3eef7 100%
  );
  --article-text: #1f2a33;
  --article-heading: #0f3a52;
  --blockquote-border-color: #5aa7d8;
  --hr-color: #5aa7d8;
  --delta-border-color: #5aa7d8;
}

article.article-container[data-article-theme="harborsky"] {
  background: var(--article-bg);
  color: var(--article-text);
  border-left: 4px solid var(--delta-border-color);
  padding-left: 1.5rem;
}

article.article-container[data-article-theme="harborsky"] h1,
article.article-container[data-article-theme="harborsky"] h2,
article.article-container[data-article-theme="harborsky"] h3,
article.article-container[data-article-theme="harborsky"] h4,
article.article-container[data-article-theme="harborsky"] h5,
article.article-container[data-article-theme="harborsky"] h6 {
  color: var(--article-heading);
}

/* ================================
   THEODOCK–DELTA THEME
   ================================ */

[data-article-theme="theodock"] {
  --article-bg: #fdfdfd;
  --article-text: #222;
  --article-heading: #111;
  --blockquote-border-color: #444;
  --hr-color: #444;
}

[data-article-theme="theodock"] .article-container {
  background: var(--article-bg);
  color: var(--article-text);
}

[data-article-theme="theodock"] .article-container h1,
[data-article-theme="theodock"] .article-container h2,
[data-article-theme="theodock"] .article-container h3,
[data-article-theme="theodock"] .article-container h4,
[data-article-theme="theodock"] .article-container h5,
[data-article-theme="theodock"] .article-container h6 {
  color: var(--article-heading);
}

[data-article-theme="theodock"] {
  --article-bg: linear-gradient(
    to bottom,
    #f8f9fb 0%,
    #e6e9ef 35%,
    #d4d8e0 100%
  );
  --delta-border-color: #444;
}

/* ================================
   CHRONICLE THEME VARIABLES
   ================================ */

:root[data-article-theme="chronicle"] {
  --chronicle-base: #F9F1DC;        /* parchment-lite */
  --chronicle-ink: #3A2F28;         /* archival ink */
  --chronicle-accent: #7C5A3A;      /* bronze trim */
  --chronicle-shadow: #2E2A27;      /* deep grounding */
  --chronicle-link: #6B3F2E;        /* thematic link color */
  --chronicle-timeline: #A67C52;    /* warm bronze line */
}

/* /* ============================================================
   THEME: Chronicle
   ============================================================ */

.article-container[data-article-theme="chronicle"] {
  --delta-color-bg: #F9F1DC;        /* parchment-lite */
  --delta-color-fg: #3A2F28;        /* archival ink */
  --delta-color-border: #7C5A3A;    /* bronze trim */
  --delta-color-shadow: #2E2A27;    /* deep grounding */
  --delta-color-link: #6B3F2E;      /* thematic link color */
  --delta-color-timeline: #A67C52;  /* warm bronze timeline */

  background: var(--delta-color-bg);
  color: var(--delta-color-fg);

  /* FULL HEIGHT BORDER — the missing piece */
  border-left: 4px solid var(--delta-color-border);
  padding-left: 1rem; /* matches Theodock geometry */
}

/* ------------------------------------------------------------
   Headings — NO border-left here
   ------------------------------------------------------------ */
.article-container[data-article-theme="chronicle"] h1,
.article-container[data-article-theme="chronicle"] h2,
.article-container[data-article-theme="chronicle"] h3,
.article-container[data-article-theme="chronicle"] h4,
.article-container[data-article-theme="chronicle"] h5,
.article-container[data-article-theme="chronicle"] h6 {
  color: var(--delta-color-shadow);
  padding-left: 0; /* border moved to container */
}

/* ------------------------------------------------------------
   Blockquotes
   ------------------------------------------------------------ */
.article-container[data-article-theme="chronicle"] blockquote {
  border-left: 4px solid var(--delta-color-border);
  background: rgba(0, 0, 0, 0.03);
  color: var(--delta-color-fg);
  padding: 0.75rem 1rem;
}

/* ------------------------------------------------------------
   Links
   ------------------------------------------------------------ */
.article-container[data-article-theme="chronicle"] a {
  color: var(--delta-color-link);
  text-decoration: none;
}

.article-container[data-article-theme="chronicle"] a:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------------
   Divider
   ------------------------------------------------------------ */
.article-container[data-article-theme="chronicle"] hr {
  border: none;
  border-top: 2px solid var(--delta-color-border);
  margin: 2rem 0;
}

/* ------------------------------------------------------------
   Timeline Utility
   ------------------------------------------------------------ */
.article-container[data-article-theme="chronicle"] .chronicle-timeline {
  border-left: 3px solid var(--delta-color-timeline);
  padding-left: 1rem;
  margin: 2rem 0;
}

/* Chronicle Bronze Trim System */
:root {
    --chronicle-bronze: #b08c5a;
}

.chronicle-epoch {
    width: 40%;
    border-bottom: 2px solid var(--chronicle-bronze);
    margin: 1.5rem auto;
    opacity: 0.85;
}

/* Versus Trim System */
:root {
    --versus-trim: #660000;
}

.versus-trim {
    width: 40%;
    border-bottom: 2px solid var(--versus-trim);
    margin: 2rem auto;
    opacity: 0.85;
}

/* Hero Gold Trim System */
:root {
    --herogold-trim: #c9a227;
}

.herogold-trim {
    width: 40%;
    border-bottom: 2px solid var(--herogold-trim);
    margin: 2rem auto;
    opacity: 0.85;
}

/* --------------------------------------------------------------
   TITLE CARD — Classic + Beta + HarborSky
-------------------------------------------------------------- */

.d1-titlecard {
  display: inline-block;
  padding: 1.25rem 1.75rem;
  background: var(--harborsky-100);
  border-left: 4px solid var(--harborsky-500);
  border-radius: 6px;
  box-shadow: var(--theme-shadow-sm);
  text-align: center;
}

.d1-titlecard h2,
.d1-titlecard h3,
.d1-titlecard h4 {
  margin: 0.25rem 0;
  color: var(--harborsky-900);
  text-align: center;
}

/* --------------------------------------------------------------
   TOC CARD — Classic + Beta + HarborSky
-------------------------------------------------------------- */

.d1-toccard {
  background: var(--harborsky-50);
  border-left: 4px solid var(--harborsky-500);
  padding: 1.5rem;
  border-radius: 6px;
  box-shadow: var(--theme-shadow-sm);
}

.d1-toccard ol {
  margin: 0;
  padding-left: 1.25rem;
}

.d1-toccard li {
  margin-bottom: 0.75rem;
}

.d1-toccard a {
  color: var(--harborsky-700);
  font-weight: 600;
}

.d1-toccard a:hover {
  color: var(--harborsky-900);
}

.d1-toccard .author {
  display: block;
  color: var(--harborsky-800);
  font-size: 0.9rem;
  margin-left: 0.25rem;
}

/* -------------------------------------------------------
   ACCENT MODULES
-------------------------------------------------------- */

.delta-accent-blue {
  background: var(--harborbluee-500);
  height: 4px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--delta-space-4);
}

.delta-accent-dock {
  background: var(--dockblue-500);
  height: 4px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--delta-space-4);
}

/* -------------------------------------------------------
   EXPERIMENTAL OVERRIDES
-------------------------------------------------------- */

.delta-soften {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.delta-lift {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* -------------------------------------------------------
   FUTURE MODULES PLACEHOLDER
-------------------------------------------------------- */

.delta-future {
  /* Reserved for Harbor‑Delta Prime expansions */
}

/* Beta Typography Reset for HarborSkyBeta */
.article-harborskybeta,
.article-harborskybeta h1,
.article-harborskybeta h2,
.article-harborskybeta h3,
.article-harborskybeta h4,
.article-harborskybeta h5,
.article-harborskybeta h6 {
  font-family: var(--beta-font, "Segoe UI", "Inter", sans-serif);
}

/* Modern Classic/Beta Title Block */
.hsky-titleblock {
  background: var(--harborsky-50);
  padding: 2rem 1rem;
  text-align: center;
  border-bottom: 4px solid var(--harborsky-500);
  font-family: var(--beta-font, "Segoe UI", "Inter", sans-serif);
}

.hsky-titleblock h2,
.hsky-titleblock h3,
.hsky-titleblock h4 {
  margin-block: 0.25rem;
  color: var(--harborsky-900);
  font-weight: 600;
}

.hsky-titleblock h2 {
  font-size: 2.2rem;
  letter-spacing: 0.5px;
}

.hsky-titleblock h3 {
  font-size: 1.4rem;
  color: var(--harborsky-700);
}

.hsky-titleblock h4 {
  font-size: 1.1rem;
  color: var(--harborsky-800);
}

.hsky-toc-heading {
  text-align: center;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  font-family: var(--beta-font, "Segoe UI", "Inter", sans-serif);
  color: var(--harborsky-800);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.hsky-toccard {
  border: 2px solid var(--harborsky-300);
  background: var(--harborsky-50);
  padding: 1rem 1.25rem;
  border-radius: 6px;
  font-family: var(--beta-font, "Segoe UI", "Inter", sans-serif);
}

.hsky-titleblock h2,
.hsky-titleblock h3,
.hsky-titleblock h4 {
  margin-block: -0.15rem;
}

/* Tighten the 3-line title block */
.article-harborskybeta .hsky-titleopen h2,
.article-harborskybeta .hsky-titleopen h3,
.article-harborskybeta .hsky-titleopen h4 {
  margin-block: 0.15rem;
}

.article-harborskybeta .hsky-titleopen h4 strong {
  margin: 0;
  padding: 0;
}

.article-harborskybeta ol li .author {
  margin-left: 0.35rem;
  color: black;
  font-size: 0.9rem;
}

/* Restore classic left border for Harborsky and Theodock */
[data-article-theme="harborsky"] .article-container,
[data-article-theme="theodock"] .article-container {
  border-left: 6px solid var(--delta-border-color, #5aa7d8);
  padding-left: 1.5rem;
}

[data-article-theme="harborsky"] {
  --delta-border-color: #5aa7d8;
}

[data-article-theme="theodock"] {
  --delta-border-color: #444;
}

article.article-container[data-article-theme="harborsky"],
article.article-container[data-article-theme="theodock"] {
  border-left: 6px solid var(--delta-border-color);
}

[data-article-theme="harborsky"] {
  --delta-border-color: #5aa7d8;
}

[data-article-theme="theodock"] {
  --delta-border-color: #444;
}

article.article-container[data-article-theme="harborsky"],
article.article-container[data-article-theme="theodock"] {
  border-left: 4px solid var(--delta-border-color);
}

.article-container img {
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  border-radius: 4px;
}

[data-article-theme="theodock"] {
  --article-bg: linear-gradient(
    to bottom,
    #f8f9fb 0%,
    #e6e9ef 35%,
    #d4d8e0 100%
  );
  --delta-border-color: #444;
}

[data-article-theme="theodock"] .article-container img {
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  border-radius: 4px;
}

/* ================================
   DOCK–TOP–NAV (Classic Delta)
   ================================ */

.dock-top-nav {
  display: block;
  width: 100%;
  margin-bottom: var(--delta-nav-spacing, 2.5rem);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-family: var(--font-body);
}

:root {
  --delta-nav-spacing: 2.5rem;
}

.dock-top-nav a:hover {
  background-color: var(--accent-soft, #ffffff);
  color: var(--dock-blue);
  text-decoration: underline !important;
}

article.article-container[data-article-theme="theodock"] {
  background: var(--article-bg) !important;
}

article.article-container[data-article-theme="parchment"] {
  background: var(--article-bg) !important;
}

/* --------------------------------------------------
   Delta Typography Utilities
   Optional, modular, design‑system‑pure
-------------------------------------------------- */

.t-xs  { font-size: 0.75rem; }
.t-sm  { font-size: 0.875rem; }
.t-ok  { font-size: 1rem; }
.t-md  { font-size: 1.1rem; }
.t-lg  { font-size: 1.25rem; }
.t-xl  { font-size: 1.5rem; }
.t-xxl { font-size: 2.5rem; }

.t-center { text-align: center; }
.t-right  { text-align: right; }
.t-left   { text-align: left; }

.fw-light  { font-weight: 300; }
.fw-normal { font-weight: 400; }
.fw-bold   { font-weight: 700; }