:root{
    --card-accent-lite: #EEF1F4;
    --timeline-body-bg: #F7F7F4;
    --timeline-title-text: #333844;
    --header-offset: 96px;
    --line-top-gap: 120px;
    --line-bottom-gap: 140px;
    --line-dark: #4F5867;
    --line-light: #AEB5BE;
    --line-mid: 50%;
    --line-x: 50%;
    --line-pad: 28px;
    --clock-r: 21px;

    /* TEXT COLUMN WIDTH CLAMP */
    --text-min: 360px;
    --text-ideal: 28vw;
    --text-max: 520px;

    /* legacy */
    --text-col: 44%;
    --time-col: 56%;
  }

  body,
  button,
  input,
  select,
  textarea,
  .btn,
  .card,
  .card-body,
  .card-title,
  .card-subtitle,
  .card-text,
  .blockquote-verse,
  .toc-top-list,
  .toc-sub,
  .back-to-toc,
  .timeline-wrap,
  .timeline-wrap *,
  .twocol,
  .twocol * {
    font-family: var(--fs-font-base, "Josefin Sans", Arial, Helvetica, sans-serif) !important;
  }

  /* ===== Global guards for small screens ===== */
  *, *::before, *::after { box-sizing: border-box; }
  html, body { max-width: 100%; }
  img, video, svg, canvas { max-width: 100%; height: auto; display: block; }

  .timeline-page {
    overflow-x: hidden;
  }

  .video-header,
  .image-header,
  .header-transparent-overlay,
  .timeline-wrap,
  .twocol { width: 100%; max-width: 100%; }

  .twocol, .timeline-wrap { overflow-x: hidden; }

  h1,h2,h3,h4,h5,h6 { scroll-margin-top: calc(var(--header-offset) + 12px); }

  /* page gutters */
  .container-fluid.timeline-page{ padding-left:0; padding-right:0; }
  .container-fluid.timeline-page,
  .container-fluid.timeline-page .container,
  .container-fluid.timeline-page .row { margin-right: 0 !important; }
  .container-fluid.timeline-page [class*="col-"] { padding-right: 0 !important; }
  .container-fluid.timeline-page main,
  .container-fluid.timeline-page .content,
  .container-fluid.timeline-page .page-content,
  .container-fluid.timeline-page .wrap { padding-left: 0 !important; margin-left: 0 !important; }

  /* ====== TWO-COLUMN LAYOUT (desktop) ====== */
  /* LTR: Text (aside) LEFT, Timeline (main) RIGHT */
  .twocol{
    display: grid;
    /* text column first, timeline column second */
    grid-template-columns:
      clamp(var(--text-min), var(--text-ideal), var(--text-max))
      minmax(var(--timeline-min, 760px), 1fr);
    grid-template-areas: "text timeline";
    gap: 24px;
    width: 100%;
    max-width: none;
    margin: 0;
    padding-top: 2.25rem;
    padding-inline: clamp(8px, 1.2vw, 14px);
  }

  /* Make sure a long paragraph/image can shrink inside its column */
  .twocol > aside,
  .twocol > main { min-width: 0; }

  .twocol > aside{ grid-area: text; }
  .twocol > main { grid-area: timeline; }


  /* ====== TEXT COLUMN STYLES ====== */
  html { scroll-behavior: smooth; }
  .card-text h3, .card-text h4 { color:#6c757d; font-weight:600; }
  .card-subtitle { color:#6c757d; }

  .h-heading-with-back { display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; }
  .back-to-toc{ font-size:.9rem; opacity:.75; text-decoration:none; }
  .back-to-toc:hover{ opacity:1; text-decoration:underline; }

  .toc-top h5 { margin: 1rem 0 .5rem; }
  .toc-top-list { list-style:none; padding-left:0; margin:0; columns:1 !important; }
  .toc-top-list li { margin:.25rem 0; }
  .toc-top-list a { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-decoration:none; }
  .toc-top-list a:hover { text-decoration:underline; }
  .toc-sub { list-style:none; margin:.15rem 0 .35rem 1rem; padding-left:0; border-left:1px dashed rgba(0,0,0,.15); }
  .toc-sub li { margin:.2rem 0; }
  .toc-sub a { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.95rem; opacity:.95; }
  .toc-sub-li { margin: .15rem 0 .35rem 1rem; padding-left: 1rem; border-left: 1px dashed rgba(0,0,0,.15); }

  .card-text .h4-row{ display:flex; align-items:baseline; gap:.5rem; margin-left:1rem; }
  .card-text .h4-body{ margin-left:1.5rem; padding-left:1rem; border-left:1px dashed rgba(0,0,0,.15); }

  /* ---------- Verse spacing rules (match other page) ---------- */
  .blockquote-verse p { margin: 0; }
  .verse-ref { margin-top: 0; margin-bottom: 1rem; }
  .verse-ref.small { font-size: .925rem; color: #6c757d; }

  /* robust wrapping */
  .timeline-wrap .prose,
  .timeline-wrap .t-body,
  .timeline-wrap .t-head,
  .timeline-wrap .t-row,
  .timeline-wrap .t-row > *{
    min-width: 0;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: anywhere;
  }

  aside .card-text,
  aside .card-text *{ overflow-wrap: break-word; }

  /* Make cards in the left column hug the grid track */
  aside,
  aside .card,
  aside .card-body {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  /* keep headings/text readable width */
  aside .card { width: 100%; }

  /* ====== TIMELINE ====== */
  .timeline-wrap{
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0;
    padding-top: var(--line-top-gap);
    padding-bottom: var(--line-bottom-gap);
    overflow-x: hidden;
  }

  /* the vertical line */
  .timeline-wrap::before{
    content:"";
    position:absolute;
    top:0; bottom:0;
    left: var(--line-x);
    width: 6px; margin-left: -3px;
    background:
      linear-gradient(
        to bottom,
        var(--line-light) 0%,
        var(--line-light) var(--line-mid),
        var(--line-dark)  var(--line-mid),
        var(--line-dark) 100%
      );
    border-radius: 3px;
    z-index: 0;
  }

  /* alternating containers */
  .t-item{
    position: relative;
    width: 50%;
    padding: 0 var(--line-pad);
    margin: 56px 0;
    z-index: 1;
    box-sizing: border-box;
    perspective: 900px;
    perspective-origin: 50% 50%;
  }
  .t-item.left  { margin-left: 0; }
  .t-item.right { margin-left: 50%; }

  .t-head{ position: relative; }

  /* Anchor target for the start of the timeline */
  .anchor-target{
    height: 0;
    margin: 0;
    padding: 0;
    scroll-margin-top: calc(var(--header-offset) + 8px);
  }

  /* clock marker */
  .t-dot{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: calc(var(--clock-r) * 2);
    height: calc(var(--clock-r) * 2);
    background:
      radial-gradient(circle at center,
        #fff 0 10px,
        var(--line-dark) 10px 12px,
        #fff 12px 16px,
        var(--line-light) 16px 19px,
        transparent 19px
      );
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0,0,0,.14);
    color: var(--line-dark);
    display: grid; place-items: center;
    z-index: 3;
  }
  .t-item.left  .t-dot { left: calc(100% + var(--line-pad) - var(--clock-r)); }
  .t-item.right .t-dot { left: calc(-1 * var(--line-pad) - var(--clock-r)); }
  .t-dot svg{ width: 20px; height: 20px; }

  /* card */
  .t-card{
    background:#fff;
    border-radius:20px;
    box-shadow: 0 10px 32px rgba(0,0,0,.14);
    overflow: visible;
    transform: rotateX(-80deg);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    opacity: 0;
    transition: transform .7s cubic-bezier(.2,.7,.2,1), opacity .45s ease-out;
    max-width: 100%;
    box-sizing: border-box;
  }
  .t-item.is-visible .t-card{ transform: rotateX(0deg); opacity:1; }

  /* header bands */
  .t-head{
    background: var(--card-accent, #0e5f20);
    color:#fff;
    padding:.8rem 1.2rem 0;
    border-top-left-radius:20px;
    border-top-right-radius:20px;
    position: relative;
  }

  .t-head .dates{
    opacity:.95;
    font-size:.95rem;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:.5rem;
    color:#fff;
  }

  .t-title{
    display:block;
    margin:.6rem -1.2rem 0;
    padding:.7rem 1.2rem;
    background: var(--card-accent-lite, #EEF1F4);
    color: var(--timeline-title-text, #333844);
    font-size:1.45rem;
    font-weight:600;
    line-height:1.25;
    border-top:1px solid rgba(255,255,255,.18);
    border-bottom:1px solid rgba(0,0,0,.06);
  }

  .t-body{
    padding: 1rem 1.2rem;
    background: var(--timeline-body-bg, #F7F7F4);
    border-bottom-left-radius:20px; border-bottom-right-radius:20px;
    max-width: 100%;
  }

  .t-img-big img{
    width:100%;
    display:block;
    border-bottom-left-radius:20px;
    border-bottom-right-radius:20px;
  }

  /* pointer */
  .t-item.left  .t-pointer{ right: calc(-1 * (var(--line-pad) - var(--clock-r))); border-left-color: var(--card-accent, #0e5f20); }
  .t-item.right .t-pointer{ left:  calc(-1 * (var(--line-pad) - var(--clock-r))); border-right-color: var(--card-accent, #0e5f20); }

  /* small image layout */
  .t-row{ display:grid; grid-template-columns: 240px 1fr; gap:1rem; align-items:start; }
  .t-img-small img{ width:100%; border-radius:10px; display:block; }

  .prose, .t-body, .t-head, .t-row, .t-row > * { min-width: 0; max-width: 100%; word-wrap: break-word; overflow-wrap: anywhere; }
  .t-item.is-active .t-head{ filter: brightness(1.06); }

  /* ========== RESPONSIVE ========== */
  @media (max-width: 992px){
    .twocol{
      grid-template-columns: 1fr;
      grid-template-areas: "text" "timeline"; /* LTR stack order preserved */
      padding-top: 1.5rem;
    }

    :root{
      --line-x: 16px;
      --line-nudge: 15px;
      --clock-nudge: -50px;
    }

    .timeline-wrap::before{ left: calc(var(--line-x) + var(--line-nudge)) !important; }

    .t-item,
    .t-item.left,
    .t-item.right{
      width: 100% !important;
      margin-left: 0 !important;
      padding-left: calc(var(--line-pad) + var(--line-x) + var(--clock-r)) !important;
      padding-right: var(--line-pad) !important;
    }

    .t-item .t-dot{
      left: calc(var(--line-x) + var(--clock-nudge)) !important;
      transform: translate(-50%, -50%) !important;
    }

    .t-row { grid-template-columns: 1fr; }
  }

  @media (max-width: 576px){
    .twocol{ grid-template-columns: 1fr; }

    .twocol > aside{
      justify-self: center;
      max-width: clamp(260px, 88vw, 520px);
      width: 100%;
      min-width: 0;
      margin-inline: auto;
    }

    .t-item,
    .t-item.left,
    .t-item.right{
      width: clamp(260px, 92vw, 520px);
      margin: 16px auto !important;
    }

    :root{
      --line-x: 14px;
      --line-nudge: 0px;
      --clock-nudge: 0px;
    }

    .timeline-wrap::before{ left: var(--line-x) !important; }
    .t-item .t-dot{ left: var(--line-x) !important; transform: translate(-50%, -50%) !important; }
  }

  /* Ultra-safe mobile fallback */
  @media (max-width: 420px) {
    .twocol > aside{ width: clamp(280px, 88vw, 520px); margin-inline: auto; }

    .timeline-wrap { padding-top: 20px; padding-bottom: 24px; overflow-x: hidden; }
    .timeline-wrap::before { display: none !important; }
    .t-dot, .t-pointer { display: none !important; }

    .t-item,
    .t-item.left,
    .t-item.right{
      width: clamp(260px, 92vw, 520px);
      margin: 16px auto !important;
    }

    .t-card { opacity: 1 !important; transform: none !important; box-shadow: 0 6px 18px rgba(0,0,0,.1); }
    .t-row { grid-template-columns: 1fr; }
    .t-img-small img, .t-img-big img { max-width: 100%; height: auto; display: block; }

    .t-head .dates { font-size: .95rem; }
    .t-title { font-size: 1.25rem; }
    .t-body { padding: .9rem 1rem; }
  }

  /* Left column sizing guards */
  aside,
  aside .card,
  aside .card-body,
  aside .card-text{ width: 100% !important; max-width: none !important; }
  aside .card-text,
  aside .card-text *{
    writing-mode: horizontal-tb !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  /* Secondary title bar (light band) */
  .t-title{
    background: var(--card-accent-lite, #EEF1F4);
    border-bottom: 1px solid rgba(0,0,0,.05);
  }
  @supports (color: color-mix(in oklab, black, white)){
    .t-title{ background: color-mix(in oklab, var(--card-accent, #687280) 14%, white); }
  }
  .t-item.is-active .t-title{
    background: var(--card-accent-lite, #EEF1F4) !important;
  }
  @supports (color: color-mix(in oklab, black, white)){
    .t-item.is-active .t-title{
      background: color-mix(in oklab, var(--card-accent, #687280) 14%, white) !important;
    }
  }
  @media (min-width: 1200px){ .t-item{ margin: 48px 0; } }

  /* =====================  RTL — text-only overrides  ===================== */
  /* Keep columns where they are; only flip reading direction & alignment.  */
  /* Put this block at the very end of the <style> so it wins the cascade.  */

  :root { --timeline-min: 800px; }

  /* 1) Text column (aside): headings, paragraphs, lists, TOC */
  [dir="rtl"] aside .card,
  [dir="rtl"] aside .card-body,
  [dir="rtl"] aside .card-title,
  [dir="rtl"] aside .card-subtitle,
  [dir="rtl"] aside .card-text,
  [dir="rtl"] aside .card-text p,
  [dir="rtl"] aside .card-text li{
    direction: rtl;
    text-align: right;
    unicode-bidi: plaintext;
  }

  /* TOC alignment */
  [dir="rtl"] #toc,
  [dir="rtl"] #toc .card-body,
  [dir="rtl"] #toc h5,
  [dir="rtl"] .toc-top-list,
  [dir="rtl"] .toc-top-list a{
    text-align: right;
  }

  /* TOC indents/borders flipped to the right side */
  [dir="rtl"] .toc-sub{
    border-left: 0;  border-right: 1px dashed rgba(0,0,0,.15);
    padding-left: 0; padding-right: 1rem;
    margin-left: 0;  margin-right: 1rem;
  }
  [dir="rtl"] .toc-sub-li{
    border-left: 0;  border-right: 1px dashed rgba(0,0,0,.15);
    padding-left: 0; padding-right: 1rem;
    margin-left: 0;  margin-right: 1rem;
  }

  /* H4 section indents inside the text column */
  [dir="rtl"] .card-text .h4-row{  margin-left: 0;  margin-right: 1rem; }
  [dir="rtl"] .card-text .h4-body{
    margin-left: 0;   margin-right: 1.5rem;
    padding-left: 0;  padding-right: 1rem;
    border-left: 0;   border-right: 1px dashed rgba(0,0,0,.15);
  }


  /* 2) Timeline: make the textual content read RTL too (UI chrome unchanged) */
  [dir="rtl"] .timeline-wrap .t-head .dates,
  [dir="rtl"] .timeline-wrap .t-title,
  [dir="rtl"] .timeline-wrap .t-body,
  [dir="rtl"] .timeline-wrap .prose{
    direction: rtl;
    text-align: right;
    unicode-bidi: plaintext;
  }

  /* Keep alternation & column positions exactly as in LTR — no margins flipped.
    (We intentionally DO NOT touch .twocol grid or .t-item.left/right margins.) */

  /* 3) Small screens: if your mobile rule centers the aside,
        keep it right-aligned when in RTL */
  @media (max-width: 576px){
    [dir="rtl"] .twocol > aside{ justify-self: end; }
  }

  /* === Desktop alternation around the line (keeps LTR intact, fixes RTL) === */
  @media (min-width: 992px){
    /* Always alternate: left half vs right half of the timeline column */
    .timeline-wrap .t-item{
      width: 50% !important;
    }

    /* Left items live on the left half */
    .timeline-wrap .t-item.left{
      margin-left: 0 !important;
    }

    /* Right items live on the right half */
    .timeline-wrap .t-item.right{
      margin-left: 50% !important;
    }

    /* Keep the clock dots snapped to the line correctly on both sides */
    .timeline-wrap .t-item.left  .t-dot{
      left: calc(100% + var(--line-pad) - var(--clock-r)) !important;
    }
    .timeline-wrap .t-item.right .t-dot{
      left: calc(-1 * var(--line-pad) - var(--clock-r)) !important;
    }
  }

  /* When the page is desktop, but still not wide enough for a comfy 2-up timeline */
  @media (min-width: 992px) and (max-width: 1240px){
    .timeline-wrap .t-item,
    .timeline-wrap .t-item.left,
    .timeline-wrap .t-item.right{
      width: 100% !important;
      margin-left: 0 !important;
    }
    .timeline-wrap .t-item .t-dot{
      left: calc(-1 * var(--line-pad) - var(--clock-r)) !important; /* keep dot on the line */
    }
  }

  /* === Flip columns when <html dir="rtl"> =============================== */
  /* Timeline (main) goes LEFT, Text (aside) goes RIGHT */
  html[dir="rtl"] .twocol{
    grid-template-columns: minmax(var(--timeline-min, 720px), 1fr)
                          clamp(var(--text-min), var(--text-ideal), var(--text-max)) !important;
    grid-template-areas: "timeline text" !important;
  }

  html[dir="rtl"] .twocol > aside {
    grid-area: timeline !important;   /* left column */
    grid-row: 1 !important;
  }

  html[dir="rtl"] .twocol > main{
    grid-area: text !important;       /* right column */
    grid-row: 1 !important;
    justify-self: end;                /* hug the right edge of its track */
  }


  /* Keep global FaithSets header fixed on this timeline page */
  .site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1200 !important;
  }

  .site-header.hidden {
    transform: translateY(-100%) !important;
  }

  .site-header .navbar {
    position: static !important;
    top: auto !important;
  }