/* ================================================
   DOCK DESIGN SYSTEM
   A harbor of utilities, components, and themes
   ================================================
   ORDER:
   1. Root variables (tokens)
   2. Global element styles
   3. Layout primitives
   4. Core components
   5. Thematic accents (Ichthus, Greek, etc.)
   6. Utilities (spacing, typography, color, floats, nudges)
   7. Media queries
   --------------------------------------------- */


/* ================================================
   1. ROOT VARIABLES — TOKENS & SCALES
   These are the shared “tides” of spacing, type,
   and color that everything else draws from.
   ================================================ */

:root {
  /* Spacing scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;

  /* Article typography system */
  --article-font: Georgia, serif;
  --article-size: 16px;
  --article-lineheight: 1.28;
  --article-margin-top: 10px;
  --article-margin-bottom: 5px;
  --article-margin-left: 0px;

  /* Ichthus theme colors */
  --ich-maroon: #660000;
  --ich-maroon-dark: #3d0000;
  --ich-gold: #b8860b;
  --ich-gold-light: #d4a63f;
  --ich-parchment: #f5ecd6;
  --ich-ink: #000000;
}


/* ================================================
   2. GLOBAL ELEMENT STYLES
   Baseline behavior for text, images, and tables.
   The dock’s waterline.
   ================================================ */

/* Global paragraph margins */
p {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

/* Global image styling */
img {
  border-radius: 10px;   /* globally rounded corners */
  height: auto;          /* keep aspect ratio */
  max-width: 100%;       /* responsive scaling */
}

/* Superscript alignment */
sup {
  line-height: 100%;
}


/* ================================================
   3. LAYOUT PRIMITIVES
   Flex helpers, width constraints, and modules.
   These shape the harbor’s piers and channels.
   ================================================ */

.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.flex-row    { flex-direction: row; }
.flex-center { justify-content: center; align-items: center; }

.w-100 { width: 100%; }
.w-50  { width: 50%; }
.w-auto { width: auto; }

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* Dock width wrapper for content */
.dock-width {
  width: 80%;
  max-width: 800px;
  margin-inline: auto;
}

/* Generic module container */
.module {
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 1.5em;
  margin-bottom: 2em;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.module h2 {
  font-size: 1.5em;
  margin-bottom: 0.5em;
  color: #0066cc;
}

.module ul {
  list-style-type: disc;
  padding-left: 1.5em;
}

.module li {
  margin-bottom: 0.5em;
}

/* Centering helper (flex-based) */
.center-block {
  display: flex;
  justify-content: center;
}


/* ================================================
   4. CORE COMPONENTS
   Reusable semantic blocks: articles, resources,
   term cards, cross-links, sidebars, video shells.
   ================================================ */

/* ---------- Resource Blocks ---------- */

.resource-block {
  padding: 1rem;
  margin-bottom: 0.2rem;
  background-color: #f9f9fc;
  border-radius: 4px;
  --p-spacing: 0.75em;
  --p-line-height: 1.35;
}

.resource-block h4 {
  margin-top: var(--h4-margin-top, 0);
  color: var(--accent-title-color, #333);
}

.resource-block p {
  margin-top: 0;
  margin-bottom: var(--p-spacing, 1em);
  line-height: var(--p-line-height, 1.5);
}

.resource-block-border {
  border: 2px solid #ccc;
  border-radius: 6px;
  padding: 1em;
  margin-top: 0.5em;
  margin-bottom: 0.25em;
  background-color: #f9f9f9;
}


/* ---------- Term Blocks (Theoglossary entries) ---------- */

.term-block {
  background-color: #f9f9fc;
  border: 2px solid currentColor; /* accent-driven */
  border-radius: 8px;
  padding: 1em 1.5em 0.75em;
  margin: 2em auto 0.5em;
  max-width: 800px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  font-family: 'Segoe UI', sans-serif;
}

/* Term title (generic) */
.term-title {
  font-size: 1.8em;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 0.5em;
  text-align: center;
}

/* Language-specific term headings */
.latin-term {
  font-family: "Garamond", "Georgia", "Times New Roman", serif;
  font-size: 1.6em;
  font-weight: bold;
  color: #4a2f1f;
  margin-bottom: 0.5em;
}

.hebrew-term {
  font-family: "SBL Hebrew", "Ezra SIL", "David", "Times New Roman", serif;
  font-size: 1.6em;
  font-weight: bold;
  color: #556B2F;
  margin-bottom: 0.5em;
  direction: ltr;
}

.greek-term {
  font-family: "Gentium Plus", "Palatino Linotype", "Georgia", "Times New Roman", serif;
  font-size: 1.6em;
  font-weight: bold;
  color: #71706E;
  margin-bottom: 0.5em;
}

/* English term heading */
.english-term {
  font-family: "Arial", "Helvetica", sans-serif;
  font-size: 1.6em;
  font-weight: bold;
  color: #000080;
  margin-bottom: 0.5em;
}

/* Historical notes text */
.historical-note {
  font-size: 0.95em;
  line-height: 1.4;
  color: #444;
  margin: 0.5em 0;
}

/* Unified accent scaffolding for term blocks */
.accent-greek {
  border-color: #71706E;
  color: #71706E;
  --accent-title-color: #71706E;
}

.accent-hebrew {
  border-color: #556B2F;
  color: #556B2F;
  --accent-title-color: #556B2F;
}

.accent-latin {
  border-color: #B8860B;
  color: #B8860B;
  --accent-title-color: #B8860B;
}

/* Accent: English */
.accent-english {
  border-color: #000080;
  color: #000080;
  background-color: #f9f9ff;
  --accent-title-color: #000080;
}


/* ---------- Framed language labels ---------- */

.hebrew-framed {
  display: inline-block;
  background-color: #ffffff;
  border: 2px solid #556B2F;
  border-radius: 8px;
  padding: 0px 10px 0px 6px;
}

.hebrew-framed h3 {
  margin: 0;
  color: #556B2F;
}

.greek-framed {
  display: inline-block;
  background-color: #ffffff;
  border: 2px solid #1E90FF;
  border-radius: 8px;
  padding: 0px 10px 0px 6px;
}

.greek-framed h3 {
  margin: 0;
  color: #1E90FF;
}

.latin-framed {
  display: inline-block;
  background-color: #ffffff;
  border: 2px solid #DAA520;
  border-radius: 8px;
  padding: 0px 10px 0px 6px;
}

.latin-framed h3 {
  margin: 0;
  color: #DAA520;
}


/* ---------- Cross-Link Dock Component ---------- */

.cross-links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-top: var(--space-sm);
  margin-bottom: var(--space-xs);
  padding: 0.25em 0.5em;
  background-color: #fdfdf6;
  border: 1px solid #ddd;
  border-radius: 6px;
}

.cross-links a {
  color: currentColor;
  text-decoration: none;
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.cross-links a:hover {
  background-color: var(--accent-soft);
  color: var(--accent-strong);
  text-decoration: underline;
}


/* ---------- Sidebar (article-style context) ---------- */

.sidebar {
  --article-font: Georgia, serif;
  --article-size: 14px;
  --article-lineheight: 1.4;
  --article-margin-top: 6px;
  --article-margin-bottom: 6px;
  --article-margin-left: 10px;

  background-color: #f4f7fa;
  border-left: 4px solid #2a6fbb;
  padding: 1em;
  max-width: 500px;
}

.sidebar-paragraph {
  font-family: var(--article-font);
  font-size: var(--article-size);
  line-height: var(--article-lineheight);
  margin-top: var(--article-margin-top);
  margin-bottom: var(--article-margin-bottom);
  margin-left: var(--article-margin-left, 0);
  text-align: left;
}

.sidebar-title {
  font-family: var(--article-font);
  font-size: calc(var(--article-size) * 1.2);
  margin-bottom: var(--article-margin-bottom);
  margin-left: var(--article-margin-left, 0);
  color: #2a6fbb;
}


/* ---------- Article Container & Intro ---------- */

.article-container {
  --article-font: Georgia, serif;
  --article-size: 16px;
  --article-lineheight: 1.5;
  --article-margin-top: 12px;
  --article-margin-bottom: 10px;
  --article-margin-left: 0;

  background-color: #ffffff;
  padding: 1.5em;
  border: 1px solid #ddd;
  border-radius: 6px;
  max-width: 700px;
  margin: 0 auto;
}

.article-title {
  font-family: var(--article-font);
  font-size: calc(var(--article-size) * 1.2);
  margin-bottom: var(--article-margin-bottom);
  text-align: center;
  color: #000;
}

.article-intro {
  max-width: 800px;
  margin: 2em auto;
  padding: 0 1em;
  line-height: 1.6;
}

.article-meta {
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 1rem;
}

.article-img-left {
  float: left;
  margin: 0 1rem 1rem 0;
  display: inline;
  vertical-align: top;
}

.article-wrap::after {
  content: "";
  display: table;
  clear: both;
}

.article-paragraph {
  font-family: var(--article-font);
  font-size: var(--article-size);
  line-height: var(--article-lineheight);
  margin-top: var(--article-margin-top);
  margin-bottom: var(--article-margin-bottom);
  margin-left: var(--article-margin-left, 0);
  text-align: left;
}

.article-paragraph-center {
  text-align: center;
}

.article-author {
  font-style: normal;
  color: var(--text-muted, #666);
}

.article-text {
  margin-top: 0;
  line-height: 1.3;
}


/* ---------- Scripture Popovers & Blockquotes ---------- */

.scripture-pop {
  position: relative;
  display: inline-block;
  cursor: pointer;
  color: var(--ich-gold);
  font-weight: 600;
}

.scripture-pop:hover .scripture-box {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.scripture-box {
  position: absolute;
  left: 50%;
  top: 1.6em;
  transform: translateX(-50%) translateY(6px);
  background: var(--ich-parchment) url('/Images/parchment.jpg') repeat;
  border: 2px solid rgba(120, 70, 40, 0.45);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  width: 260px;
  box-shadow:
    0 2px 6px rgba(0,0,0,0.15),
    inset 0 0 12px rgba(0,0,0,0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 20;
}

/* Shared scripture blockquote */
.blockquote-scripture {
  font-style: italic;
  padding: 8px 12px;
  margin: 1em 0;
  border-left: 3px solid currentColor;
  color: #000;
  background-color: #fdfdf6;
}


/* ---------- Video Link Enhancements ---------- */

.video-fallback {
  text-align: center;
  padding: 1rem;
  background: var(--bg-soft);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  box-shadow: var(--shadow-sm);
  max-width: 600px;
  margin: 0 auto;
}

.video-thumb {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  margin-bottom: 0.5rem;
}

.lyric-snippet {
  text-align: center;
  display: block;
  margin-bottom: 0.5rem;
  margin: 0;
}

.video-link {
  display: inline-block;
}


/* ---------- Misc Components ---------- */

.source-ref {
  font-size: 14px;
  font-style: normal;
  opacity: 0.85;
}

.source-ref-c {
  font-size: 14px;
  font-style: normal;
  opacity: 0.85;
  text-align: center;
}


/* ================================================
   5. THEMATIC ACCENTS
   These are the lanterns hung on the dock posts.
   They color components without changing structure.
   ================================================ */

/* Body-level Ichthus accent */
body.accent-ichthus {
  color: var(--ich-ink);
  font-weight: 400;
}

/* The dock gets the parchment */
#ichthus .resource-block {
  background: var(--ich-parchment) url('/Images/parchment.jpg') repeat;
  border: 3px solid rgba(120, 70, 40, 0.45);
  border-radius: 18px;
  padding: 2rem;
  box-shadow:
    0 2px 6px rgba(0,0,0,0.15),
    inset 0 0 12px rgba(0,0,0,0.12);
}

body.accent-ichthus h1,
body.accent-ichthus h2,
body.accent-ichthus h3,
body.accent-ichthus h4 {
  color: var(--ich-maroon);
}

body.accent-ichthus a {
  color: var(--ich-gold);
}

body.accent-ichthus a:hover {
  color: var(--ich-gold-light);
}

/* Ichthus tables */
.ichthus-table {
  border-spacing: 0 16px;
}

body.accent-ichthus table {
  border-collapse: separate;
  border-spacing: 20px;
  margin: 0 auto;
  color: var(--ich-ink);
}

body.accent-ichthus th {
  background: var(--ich-gold);
  color: var(--ich-ink);
  padding: 10px 16px;
  border: 2px solid var(--ich-maroon-dark);
  border-radius: 6px;
}

body.accent-ichthus td {
  background: #fff;
  border: 1px solid var(--ich-maroon);
  padding: 10px 14px;
  border-radius: 4px;
}

/* Ichthus-themed images */
body.accent-ichthus img {
  border: 3px solid var(--ich-maroon-dark);
  border-radius: 8px;
  padding: 4px;
  background: var(--ich-parchment);
  display: block;
  margin: 0 auto;
}

/* Body-level Ichthus font size */
body.ichthus {
  font-size: 1.1875rem; /* 19px */
}

/* Ichthus utilities */
.text-ich-maroon { color: var(--ich-maroon); }
.text-ich-gold   { color: var(--ich-gold); }
.bg-ich-parchment { background: var(--ich-parchment); }
.bg-ich-gold      { background: var(--ich-gold); }
.border-ich       { border: 2px solid var(--ich-maroon-dark); }

/* Ichthus theme wrapper */
.theme-ichthus {
  --accent-bg: #fdf8e7;
  --accent-border: #d8c9a3;
  --accent-text: #3a2f1b;
}

.theme-ichthus .resource-block {
  background: var(--accent-bg);
  border: 1px solid var(--accent-border);
  color: var(--accent-text);
}

/* Oracle accent theme */
.accent-oracle {
  --accent-bg: #2E0854;
  --accent-text: #FFD700;
  --accent-border: #8B008B;
  --accent-shadow: 0 0 0.5em #FFD70088;
  --accent-font-weight: 600;
  --accent-letter-spacing: 0.03em;
  --accent-font-style: italic;
}


/* ================================================
   6. UTILITIES
   Small, composable tools: spacing, type, color,
   floats, nudges. These override components when
   both are present — the last word of layout.
   ================================================ */

/* ---------- Spacing: Margin (top/bottom) ---------- */

/* Top margin */
.mt-0  { margin-top: 0; }
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

/* Bottom margin (positive) */
.mb-0  { margin-bottom: 0; }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

/* Bottom margin (negative — use sparingly) */
.mb--1 { margin-bottom: -0.5rem; }
.mb--2 { margin-bottom: -1rem; }
.mb--3 { margin-bottom: -1.5rem; }
.mb--4 { margin-bottom: -2rem; }

/* Tight spacing helpers */
.mb-tight { margin-bottom: 0.25rem; }
.mt-tight { margin-top: 0.25rem; }
.mt-xtight {margin-top:-0.25rem;}

/* Legacy direct value helper */
.mb-4 { margin-bottom: 2rem; }


/* ---------- Spacing: Padding (top/bottom) ---------- */

.pt-xs  { padding-top: 0.25rem; }
.pt-sm  { padding-top: 0.5rem; }
.pt-md  { padding-top: 1rem; }
.pt-md2 { padding-top: 1.5rem; }
.pt-lg  { padding-top: 2rem; }

.pb-xs  { padding-bottom: 0.25rem; }
.pb-sm  { padding-bottom: 0.5rem; }
.pb-md  { padding-bottom: 1rem; }
.pb-lg  { padding-bottom: 2rem; }


/* ---------- Spacing: Phantom Nudges (block-level) ---------- */
/* Phantom elements that pull content upward slightly. */

.nudge-up-xs { display: block; margin-bottom: -0.25rem; }
.nudge-up-sm { display: block; margin-bottom: -0.5rem; }
.nudge-up-md { display: block; margin-bottom: -1rem; }
.nudge-up-lg { display: block; margin-bottom: -1.5rem; }
.nudge-up-xl { display: block; margin-bottom: -2rem; }


/* ---------- Spacing: Horizontal margin ---------- */

.mr-1 { margin-right: 4px; }
.mr-2 { margin-right: 8px; }
.mr-3 { margin-right: 12px; }

.mr-xs { margin-right: var(--space-xs); }
.mr-sm { margin-right: var(--space-sm); }
.mr-md { margin-right: var(--space-md); }
.mr-lg { margin-right: var(--space-lg); }
.mr-xl { margin-right: var(--space-xl); }

.flush-left {
  margin-left: 0rem;
}


/* ---------- Typography Utilities ---------- */

.text-xs   { font-size: 0.75rem; }
.text-sm   { font-size: 0.875rem; }
.text-md   { font-size: 1rem; }
.text-lg   { font-size: 1.25rem; }
.text-xl   { font-size: 1.5rem; }

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

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


/* ---------- Color Utilities ---------- */

.text-muted  { color: #666; }
.text-soft   { color: rgba(0,0,0,0.6); }
.text-quiet  { color: rgba(0,0,0,0.45); }
.text-black  { color: #000; }
.text-accent { color: #3366cc; }

.bg-soft   { background-color: #f7f7f7; }
.bg-quiet  { background-color: #eee; }
.bg-accent { background-color: #e5ecff; }


/* ---------- Resonance (Opacity) ---------- */

.resonance-soft  { opacity: 0.85; }
.resonance-quiet { opacity: 0.65; }
.resonance-bold  { opacity: 1; }

.hover-glow:hover {
  transition: 0.2s ease;
  opacity: 1;
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.15));
}


/* ---------- Gap Utilities (for flex/grid) ---------- */

.gap-xs { gap: 0.25rem; }
.gap-sm { gap: 0.5rem; }
.gap-md { gap: 1rem; }
.gap-lg { gap: 2rem; }


/* ---------- Float & Image Utilities ---------- */
/* These steer images through the text flow. */

.float-left  { float: left; }
.float-right { float: right; }
.float-none  { float: none; }

/* Classic float variants with built-in margins */
.img-left {
  float: left;
  margin: 0 12px 12px 0; /* breathing room on right & bottom */
}

.img-right {
  float: right;
  margin: 0 0 12px 12px; /* breathing room on left & bottom */
}

/* More atomic float helper */
.img-float-left {
  float: left;
  display: inline;
  vertical-align: top;
  margin-right: 1rem;
}

/* Padding utilities for images */
.img-pad {
  margin-right: 1rem;
  margin-bottom: 1rem;
}

.img-align-top {
  vertical-align: top;
}


/* ---------- Micro-Nudges (positional) ---------- */
/* Subtle pixel-level adjustments for inline/text elements. */

.nudge-up-1   { position: relative; top: -1px; }
.nudge-up-2   { position: relative; top: -2px; }
.nudge-up-3   { position: relative; top: -3px; }
.nudge-up-4   { position: relative; top: -4px; }

.nudge-down-1 { position: relative; bottom: -1px; }
.nudge-down-2 { position: relative; bottom: -2px; }
.nudge-down-3 { position: relative; bottom: -3px; }

/* Heading margin nudges (consumed by components that use --h3-margin-top / --h4-margin-top) */
.h4-nudge      { --h4-margin-top: 0em; }
.h4-nudge-1    { --h4-margin-top: 0.2em; }
.h4-nudge-1x   { --h4-margin-top: 0.3em; }
.h4-nudge-1x2  { --h4-margin-top: 0.4em; }
.h4-nudge-2    { --h4-margin-top: 0.5em; }
.h4-nudge-3    { --h4-margin-top: 0.6em; }

.h3-nudge-1 { --h3-margin-top: 0.25rem; }
.h3-nudge-2 { --h3-margin-top: 0.5rem; }
.h3-nudge-3 { --h3-margin-top: 0.75rem; }


/* ---------- Slip Helpers ---------- */

.slip {
  padding: 0.75rem 1rem;
  border-radius: 4px;
}

.slip-soft {
  background-color: #f9f9f9;
}

.slip-accent {
  background-color: #eef3ff;
  border-left: 3px solid #3366cc;
}


/* ---------- Dividers & Rules ---------- */

.divider {
  border-bottom: 1px solid #ccc;
  margin: 1rem 0;
}

.dash-divider {
  display: inline-block;
  margin-bottom: -1em;
}

.dash-wrap {
  text-align: center;
}

.half-hr {
  width: 50%;
  margin: 0 auto;
  border: 1px solid #000;
}

.rule-soft {
  border-bottom: 1px solid rgba(0,0,0,0.15);
  margin: 0.75rem 0;
}

.rule-tight {
  border-bottom: 1px solid rgba(0,0,0,0.2);
  margin: 0.25rem 0;
}


/* ================================================
   7. MEDIA QUERIES
   Responsive refinements: how the dock behaves
   as the viewport narrows.
   ================================================ */

@media (max-width: 600px) {
  .collapse-float {
    float: none;
    display: block;
    margin: 0 auto 16px;
  }
}

/* Headings softened */
h1, h2 {
  font-size: 1.5em;
  font-weight: 500;
  margin-bottom: 0.5em;
  color: #2c3e50;
}

/* Title Tamer class for optional overrides */
.title-tamer {
  font-size: 16px;
  font-weight: 500;
  margin: 0.5em 0;
  line-height: 1.4;
}

/* Centered table with left-aligned text */
table {
  border-collapse: collapse;
  width: auto;
  margin: 1em auto;
  text-align: left;
}

/* Table cells */
th, td {
  border: 1px solid #ccc;
  padding: 0.5em;
  text-align: left;
}

/* Table header styling */
th {
  background-color: #e0e0e0;
  font-weight: bold;
}

/* Notes and footers */
.note {
  font-style: italic;
  color: #555;
  margin-top: 1em;
}

/* Emoji nudge for inline icons */
.emoji-nudge {
  display: inline-block;
  vertical-align: baseline;
  position: relative;
  top: 4px;
  width: 36px;
  height: 36px;
}

.emoji-nudge img {
  width: 100%;
  height: auto;
  display: block;
}
.centered {
  width: 88%;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

/* Centered article lists */
 .centered ul { display: inline-block; margin: 0 auto; padding-left: 1.2em; text-align: left; }

/* Cross-link dock (quadrodock) */
.cross-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75em;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  padding: 0.75em;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #fdfdf6; /* parchment tone */
}

/* Link styling */
.cross-links a {
  text-decoration: none;
  padding: 0.25em 0.5em;
  border-radius: 4px;
  color: currentColor;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.cross-links a:hover {
  background-color: var(--accent-soft);
  color: var(--accent-strong);
}

/* Doctrinal brown accent for article docks */
.accent-article {
  --accent-strong: #5a3b1e;   /* deep brown */
  --accent-soft:   #f3e9d9;   /* parchment wash */
  --accent-border: #8a5c32;   /* warm medium brown */
}

/* Outer dock container */
.dock-container {
  width: 88%;
  max-width: 800px;
  margin: 0 auto;
  padding: 1em;
  border-radius: 6px;
  background-color: var(--accent-soft, #fdfdf6);
  border: 2px solid var(--accent-border, #ccc);
}

.dock-container.accent-article {
  border-color: var(--accent-border);
  background-color: var(--accent-soft);
}

/* Cross-link flex dock */
.cross-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75em;
  margin: 0.5em 0;
}

.cross-links a {
  text-decoration: none;
  padding: 0.25em 0.5em;
  border-radius: 4px;
  color: var(--accent-strong, #333);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.cross-links a:hover {
  background-color: var(--accent-border, #ddd);
  color: #fff;
}

.spacer-1em {
  height: 1em;
}

/* Harmonized Article Headings (Reformation Brown) */
.article h1,
.article h2,
.article h3 {
  color: var(--accent-strong, #5a3b1e);
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

/* H1: subtle bottom border */
.article h1 {
  border-bottom: 2px solid var(--accent-border, #8a5c32);
  padding-bottom: 0.25em;
}

/* H2: left border ribbon */
.article h2 {
  border-left: 4px solid var(--accent-border, #8a5c32);
  padding-left: 0.5em;
}

/* H3: left border ribbon */
.article h3 {
  border-left: 2px solid var(--accent-border, #8a5c32);
  padding-left: 0.5em;
}