@charset "utf-8";

/* =========================
ROOT VARIABLES
========================= */
:root{
--accent:#3d5123;
--line:#e2e2e2;
--connector:5rem;
--branch:1.875rem;
--gap:clamp(4rem,8vw,7rem);
--story-axis:1.25rem;
--story-axis-x:calc(var(--connector) / 2);
--story-offset: clamp(2rem, 6vw, 5rem);
--timeline-axis-y:4.35rem;
--node-size:.875rem;
--node-glow:color-mix(in srgb,var(--accent, #3d5123) 30%,transparent);

--timeline-speed:.6s;
--timeline-ease:cubic-bezier(.22,.61,.36,1);
--node-speed:.45s;
--image-fade:.5s;
}

/* =========================
RATIO SYSTEM (RESTORED)
========================= */
.timeline.ratio-16-9{
--timeline-axis-y:4.35rem;
--timeline-track-padding:6rem;
--timeline-node-offset:-.55rem;
--timeline-year-offset:-1.5rem;
}
.timeline.ratio-16-9.horizontal{
--timeline-axis-y:3.75rem;
--timeline-track-padding:6rem;
--timeline-node-offset:-5.75rem;
--timeline-year-offset:-1.5rem;
}

/* =========================
WORDPRESS SAFETY FIXES
========================= */

.timeline{
width:100%;
position:relative;
padding-top:1px;
min-height:1px;
}

.timeline-track{
position:relative;
display:block;
width:100%;
min-height: 2px;
}

.timeline::after{
content:"";
display:block;
clear:both;
}

/* =========================
NAV SAFETY + STYLING
========================= */

/* =========================================
NAV (FINAL CLEAN VERSION)
========================================= */

.editorial-timeline .timeline-nav{
  position:fixed;
  left:30px;
  top:50%;
  transform:translateY(-50%);
  flex-direction:column;
  gap:10px;
  font-size:.9rem;
  z-index:100;
  display:flex;            /* keep layout */
opacity:0;               /* hidden by default */
pointer-events:none;     /* non-interactive */
  transition:opacity .3s ease;
}

.editorial-timeline .timeline-nav.visible{
  opacity:1;
  pointer-events:auto;
}

.editorial-timeline .timeline-nav button{
background:white;
border:none;
padding:6px 10px;
border-radius:6px;
cursor:pointer;
box-shadow:0 2px 6px rgba(0,0,0,.08);
transition:all .2s ease;
}

.editorial-timeline .timeline-nav button:hover{
background:var(--accent);
color:white;
}

.editorial-timeline .timeline-nav button.active-year{
background:var(--accent);
color:#fff;
box-shadow:0 4px 12px rgba(0,0,0,.15);
}

/* horizontal nav */

.editorial-timeline .timeline.horizontal ~ .timeline-nav,
.editorial-timeline:has(.timeline.horizontal) .timeline-nav{
position:relative;
left:auto;
top:auto;
transform:none;
flex-direction:row;
justify-content:center;
align-items:center;
gap:12px;
flex-wrap:wrap;
margin-bottom:2rem;
}

.editorial-timeline .timeline.horizontal ~ .timeline-nav button{
padding:7px 13px;
font-weight:600;
border-radius:10px;
}

/* =========================
LAYOUT CONTROLS (RESTORED)
========================= */

.editorial-timeline .timeline-layout-controls{
display:flex;
justify-content:center;
gap:10px;
margin-bottom:2rem;
}

.editorial-timeline .timeline-layout-controls button{
border:none;
padding:8px 14px;
background:white;
border-radius:6px;
cursor:pointer;
box-shadow:0 2px 6px rgba(0,0,0,.1);
}

.editorial-timeline .timeline-layout-controls button.active{
background:var(--accent);
color:white;
}

/* =========================
SPINE
========================= */

.timeline.editorial::before,
.timeline.story::before{
content:"";
position:absolute;
left:50%;
transform:translateX(-50%);
top:0;
bottom:0;
width:4px;
background:var(--line);
}

/* progress */

.progress{
position:absolute;
left:50%;
transform:translateX(-50%);
top:0;
width:4px;
height:0;
background:var(--accent);
transition:height .45s cubic-bezier(.22,.61,.36,1);
pointer-events:none;
}
/* =========================================
FORCE SPINE ANIMATION (CRITICAL)
========================================= */

.timeline .progress{
  transition: height 0.2s cubic-bezier(.22,.61,.36,1) !important;
  will-change: height;
}
/* =========================================
FIX SPINE LAYERING (CRITICAL)
========================================= */

.timeline.editorial::before,
.timeline.story::before,
.timeline.horizontal::before{
  z-index:1;
}

.timeline .progress{
  background: var(--accent, #3d5123);
  width: 6px; /* 👈 key change */
  z-index: 2;
   /*transition: height 0.15s linear !important;*/
   transition: height 0.2s cubic-bezier(.22,.61,.36,1);
}
/* nodes MUST sit above line */
.timeline .node{
  position: relative;
  z-index: 3;
}

/* year markers above everything */
.timeline .year-marker{
  position: relative;
  z-index: 4;
}


/* =========================
EVENTS (CORE SYSTEM)
========================= */

.event{
display:grid;
grid-template-columns:1fr var(--connector) 1fr;
align-items:center;
margin-bottom:var(--gap);
position:relative;
}

/* node */

.node{
grid-column:2;
grid-row:1;
justify-self:center;
align-self:center;
width:var(--node-size);
height:var(--node-size);
background:var(--accent);
border-radius:50%;
position:relative;
transition:transform .3s ease, box-shadow .3s ease;
}

.node.active{
animation:nodePulse var(--node-speed) var(--timeline-ease);
transform:scale(1.35);
box-shadow:0 0 0 10px var(--node-glow);
}

@keyframes nodePulse{
  0%{
    box-shadow: 0 0 0 0 var(--node-glow);
  }
  60%{
    box-shadow: 0 0 0 14px transparent;
  }
  100%{
    box-shadow: 0 0 0 10px var(--node-glow);
  }
}

/* connector */
.connector{
  position:absolute;
  top:50%;
  height:2px;
  background:var(--accent);
  width:var(--branch);
  z-index:1;

  /* 👇 keep translateY ALWAYS */
  transform:translateY(-50%) scaleX(0);
  transform-origin:left center;

  transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
.event .connector{
  left:50%;
}

/* LEFT SIDE */
.event.left .connector{
  transform:translate(-100%, -50%) scaleX(0);
  transform-origin:right center;
}

/* RIGHT SIDE */
.event.right .connector{
  transform:translate(0, -50%) scaleX(0);
  transform-origin:left center;
}
.event.active .connector{
  transform:translateY(-50%) scaleX(1);
}
.event.left.active .connector{
  transform:translate(-100%, -50%) scaleX(1);
}

.event.right.active .connector{
  transform:translate(0, -50%) scaleX(1);
}
/* =========================
CARDS
========================= */

.card{
width:100%;
max-width:80ch;
background:white;
border-radius:14px;
overflow:hidden;
box-shadow:0 20px 40px rgba(0,0,0,.1);
position:relative;
align-self:center;
grid-row:1;
opacity:0;
transform:translateY(30px);
transition:all var(--timeline-speed) var(--timeline-ease);
z-index:2;
}

.card.visible{
opacity:1;
transform:none;
}

/* inline mode */

.event-inline .card{
background:transparent !important;
box-shadow:none !important;
border-radius:0 !important;
overflow:visible !important;
padding:0 !important;
}

.event-inline .media{
background:transparent !important;
}

/* placement */

.left .card{grid-column:1;justify-self:end;}
.right .card{grid-column:3;justify-self:start;}

/* =========================
HORIZONTAL MODE 
========================= */
/* 🔥 Move Year Nav ABOVE timeline — HORIZONTAL ONLY */

.editorial-timeline:has(.timeline.horizontal){
  display:flex;
  flex-direction:column;
}

.editorial-timeline:has(.timeline.horizontal) .timeline-nav{
  order:-1;
  margin-bottom:1.5rem;
}

.editorial-timeline .timeline.horizontal .date {
  font-size: .8em;
  font-weight: 200;
}
.editorial-timeline .timeline.horizontal h3 {
  font-size: .9em;
  line-height: 1.2em;
  font-weight: 400;
}
.editorial-timeline .timeline.horizontal p {
  font-size: .75em;
  line-height: 1.35em;
}
/* Set max height for the horizontal timeline, keeping dynamic content adjustment */
.timeline.horizontal {
    overflow-x: auto;
    overflow-y: visible;
    position: relative;
    width: 100%;
    display:block;
    scrollbar-width: none; /* Firefox */

}
.timeline.horizontal::before{
content:"";
position:absolute;
top:var(--timeline-axis-y);
left:0;
width: var(--timeline-width);
height:2px;
background:var(--line);
z-index: 1;
}
.timeline.horizontal .timeline-progress-x{
position:absolute;
top:var(--timeline-axis-y);
left:0;
height:4px;
width:0;
background:var(--accent);
pointer-events:none;
transition:width var(--node-speed) var(--timeline-ease);
z-index: 1;
}

.timeline.horizontal .timeline-track{
  display:inline-flex;
  position:relative;
  gap:clamp(2rem,5vw,4rem); /*flex-basis = clamp(minimum width, responsive target, maximum width)*/
  padding-top:5.75rem;
  padding-left: 50vw;
  padding-right: 50vw;
  overflow:visible;
  scroll-snap-type:x proximity;
  scroll-behavior:smooth;
  align-items:flex-start;
  width:max-content;
  z-index: 1;
}
.timeline.horizontal .timeline-track::-webkit-scrollbar{
  display: none;
}
.timeline.horizontal::-webkit-scrollbar{
  display: none; /* Chrome/Safari */
}

.timeline.horizontal .event{
position:relative;
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:flex-start;
flex:0 0 clamp(22rem,26vw,30rem); /*flex-basis = clamp(minimum width, responsive target, maximum width)*/
scroll-snap-align:start;
margin-bottom:0;
max-height: none; /* Allow events to adjust based on content */
overflow: visible; /* Keep content that expands visible */

}
/* decorative layers pushed down */
.timeline.horizontal .event::before,
.timeline.horizontal .event::after{
  z-index: 0 !important;
}
/* Suggestion: Limit use of vertical images in horizontal mode */
.timeline.horizontal .event .media {
    max-height: 38%; /* Ensure images don’t exceed their container’s height */
    width:100%;
    align-items:center;
}

/* hide only vertical-specific elements */

.timeline.horizontal .progress,
.timeline.horizontal .connector{
  display:none;
}

.timeline.horizontal .year-marker{
position:absolute;
   top:var(--timeline-axis-y);
  transform:translate(-50%, calc(-120% + var(--timeline-year-offset)));
  margin:0;
  z-index:6;
  pointer-events:none;
  left:50%;/*JS overrides this*/
}

.timeline.horizontal .year-marker span{
background:white;
padding:6px 14px;
border-radius:6px;
box-shadow:0 2px 6px rgba(0,0,0,.1);
font-size:.85rem;
white-space:nowrap;
}
.timeline.horizontal .year-marker::after{
bottom:-30px;
height:30px;
background:var(--accent);
}

.timeline.horizontal .node{
position:absolute;
  top:var(--timeline-axis-y);
  left:50%;
  transform:translate(-50%, calc(-50% + var(--timeline-node-offset)));
  z-index: 6;
  transform-origin: center;
  will-change: transform;
}
.timeline.horizontal .node.active{
animation:nodePulse var(--node-speed) var(--timeline-ease);
  transform:translate(-50%, calc(-50% + var(--timeline-node-offset))) scale(1.35);
  transform-origin: center;
  box-shadow:0 0 0 10px var(--node-glow);
}
.timeline.horizontal .content {
  padding: 1.3rem 1.4rem 2.5rem 1.6rem;
}
.timeline.horizontal .card{
opacity:1 !important;
transform:none !important;
grid-column:auto !important;
justify-self:unset !important;
padding-bottom:0rem;
margin-bottom: 2rem;
box-shadow: 5px 10px 25px rgba(0,0,0,.1);
z-index: 4;
}
/* Show complete description in Horizontal Mode */
.timeline.horizontal .text{
  display:block;
  -webkit-line-clamp:unset !important;
  line-clamp:unset;
  -webkit-box-orient:unset !important;
  overflow:visible !important;
  max-height:none !important;
  margin-bottom:0;
}
/* Hide the "Read More" button in Horizontal Mode */
.timeline.horizontal .expand-toggle {
    display: none;
}

/* =========================
STORY MODE — STABLE / FINAL
========================= */

/* =========================
BASE EVENT
========================= */

.timeline.story .event{
  display:block;
  position:relative;
  margin:6rem 0;
}

/* Neutralize editorial positioning safely */
.timeline.story .event.left,
.timeline.story .event.right{
  left:auto;
  right:auto;
}

/* =========================
NODE (CENTER LOCK)
========================= */

.timeline.story .node{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  z-index:5;
}

/* =========================
CONNECTOR — FIXED SYSTEM
========================= */

.timeline.story .connector{
  position:absolute;
  left:50%;
  top:50%;
  width:var(--branch);
  height:2px;
  background:var(--accent);

  transform:translateY(-50%) scaleX(0);
  transform-origin:left center;

  transition:transform .4s cubic-bezier(.22,.61,.36,1);
}

.timeline.story .event.active .connector{
  transform:translateY(-50%) scaleX(1);
}

/* LEFT MODE — DO NOT MOVE POSITION */
.timeline.story[data-story-align="left"] .connector{
  left:50%; /* keep anchor */
  transform-origin:right center;
}

/* =========================
CARD POSITION (CENTER-BASED SYSTEM)
========================= */

.timeline.story .card{
  position:relative;
  left:50%;

  width:clamp(320px, 40vw, 640px);
  max-width:640px;

  /* RIGHT SIDE DEFAULT */
  transform:translateX(var(--story-offset));
}

/* LEFT MODE — true mirror */
.timeline.story[data-story-align="left"] .card{
  transform:translateX(calc(-100% - var(--story-offset)));
}

/* =========================
INLINE FIX
========================= */

.timeline.story .event-inline .card{
  width:clamp(320px, 40vw, 640px);
}

/* =========================
YEAR MARKERS
========================= */

.timeline.story .year-marker{
  position:relative;
  left:50%;
  transform:translateX(-50%);
}

/* =========================
ANIMATION CONTROL (SAFE)
========================= */

.timeline.story .event *{
  transition:opacity .3s ease, transform .3s ease;
}
/* =========================================
STORY MODE — FORCE LEFT CONNECTOR BEHAVIOR
========================================= */

.timeline.story[data-story-align="left"] .event .connector{
  left:50%;

  /* override ALL previous transforms */
  transform:translate(-100%, -50%) scaleX(0) !important;
  transform-origin:right center !important;
}

.timeline.story[data-story-align="left"] .event.active .connector{
  transform:translate(-100%, -50%) scaleX(1) !important;
}

/* =========================
MEDIA
========================= */

.media{
background:#e8eef5;
aspect-ratio:var(--timeline-media-ratio,16/9);
overflow:hidden;
display:flex;
flex-direction:column;
}

.media img{
width:100%;
height:100%;
object-fit:cover;
opacity:0;
transition:opacity var(--image-fade) ease;
}

.media img.loaded{opacity:1;}
.media img.graphic{object-fit:contain;}

/* =========================
CONTENT
========================= */

.content{padding:1.3rem 1.4rem 1.6rem;}
.date{font-size:.8rem;color:#666;margin-bottom:.3rem;}
.title{font-size:1rem;margin:.3rem 0;}/*1.3*/
.text{
  font-size:.85rem;
  line-height:1.2;
  max-height:4.5em;
  overflow:hidden;
}
@supports (-webkit-line-clamp: 3){
  .text{
    display:-webkit-box;
    -webkit-line-clamp:3;
    line-clamp:3;
    -webkit-box-orient:vertical;

    max-height:unset; /* disable fallback */
  }
}
.card.expanded .text{
  max-height:none;
}
@supports (-webkit-line-clamp: 3){
  .card.expanded .text{
    -webkit-line-clamp:unset;
    line-clamp:unset;
    display:block;
  }
}

.expand-toggle{
margin-top:.6rem;
font-size:.85rem;
font-weight:600;
color:var(--accent);
cursor:pointer;
}

/* =========================
YEAR MARKERS
========================= */

.year-marker{
display:flex;
justify-content:center;
margin:3rem 0 1rem;
position:relative;
}

.year-marker span{
font-size:1rem;
line-height:1;
padding:10px 20px;
background:white;
border-radius:5px;
box-shadow:0 2px 8px rgba(0,0,0,.08);
}

.year-marker::after{
content:"";
position:absolute;
left:50%;
transform:translateX(-50%);
bottom:-10px;
width:4px;
height:10px;
background:var(--accent);
}

/* =========================
ACCENT OVERRIDE
========================= */

.event .node[style]{
background: var(--accent) !important;
}

.event .node[style].active{
box-shadow: 0 0 0 10px var(--node-glow) !important;
}

/* =========================
EDITORIAL CARD FIX (CRITICAL)
========================= */

.timeline.editorial .event{
  align-items:stretch; /* 🔥 key fix */
}

.timeline.editorial .card{
  display:block;
  position:relative;
}

.timeline.editorial .left .card{
  grid-column:1;
  justify-self:end;
}

.timeline.editorial .right .card{
  grid-column:3;
  justify-self:start;
}
/* =========================
IMAGE VISIBILITY FIX (CRITICAL)
========================= */

.timeline .media img{
  opacity:1 !important;
}
/* =========================================
MOBILE FIX — RESTORE PROTOTYPE BEHAVIOR
========================================= */

@media(max-width:900px){

/* move vertical spine to left */
.timeline.editorial::before,
.timeline.story::before,
.timeline .progress{
  left:22px !important;
  transform:none !important;
}

/* collapse layout to 1 column */
.timeline .event{
  grid-template-columns:48px 1fr !important;
}

/* move node to left column */
.timeline .node{
  grid-column:1 !important;
  justify-self:center !important;
  margin-left:0 !important;
}

/* cards take full width */
.timeline .card{
  grid-column:2 !important;
  justify-self:stretch !important;
  margin-left:6px !important;
  max-width:100% !important;
}
 /* MATCH editorial content scale */
  .timeline.story .content{
    padding:1.6rem 1.6rem 2rem !important;
  }


/* remove connectors */
.timeline .connector{
  display:none !important;
}

/* align year markers left */
.timeline .year-marker{
  justify-content:flex-start !important;
  padding-left:22px !important;
  margin:2rem 0 .5rem !important;
}

.timeline .year-marker::after{
  left:22px !important;
  transform:none !important;
}
.timeline.horizontal .year-marker{
  top:25px !important;
  padding-left:0 !important;
}
.timeline.horizontal .year-marker::after {
    left: 27px !important;
    transform: none !important;
  
}

/* hide nav on mobile */
.editorial-timeline .timeline-nav{
  display:none !important;
}
/* FORCE story to use editorial grid system */
  .timeline.story .event{
    display:grid !important;
    grid-template-columns:48px 1fr !important;
  }

  /* NODE — EXACT editorial positioning */
  .timeline.story .node{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;

    grid-column:1 !important;
    justify-self:center !important;

    width:var(--node-size) !important;
    height:var(--node-size) !important;
  }

  /* CARD — EXACT editorial behavior */
  .timeline.story .card{
    position:relative !important;
    left:auto !important;
    transform:none !important;

    grid-column:2 !important;
    justify-self:stretch !important;

    margin-left:6px !important;
    max-width:80ch !important;
    width:auto !important;
  }

  /* YEAR MARKERS — FIX alignment */
  .timeline.story .year-marker{
    justify-content:flex-start !important;
    padding-left:22px !important;
    margin:2rem 0 .5rem !important;
  }

  /* REMOVE the little "tail" under year markers */
  .timeline.story .year-marker::after{
    display:none !important;
  }

  /* CONNECTORS OFF (clean mobile look) */
  .timeline.story .connector{
    display:none !important;
  }


}