/* ============================================================
   JDW Timeline Widget
   Vertical gold line with hollow diamond markers; each item has
   a large serif year, a Playfair title, and a body paragraph.
   ============================================================ */

.jdw-tl-section{
  background:#FCFAF5;
  padding:90px 40px;
}

/* ---------- Heading ---------- */
.jdw-tl-head{
  max-width:900px;
  margin:0 auto 60px;
}
.jdw-tl-head.jdw-align-center{ text-align:center; margin-left:auto; margin-right:auto; }
.jdw-tl-head.jdw-align-left  { text-align:left; }
.jdw-tl-head.jdw-align-right { text-align:right; }

.jdw-tl-eyebrow{
  font-family:'Montserrat',sans-serif;
  font-size:11px;
  font-weight:500;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:#A8884C;
  margin:0 0 16px;
}

.jdw-tl-h-title{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(28px,4vw,42px);
  font-weight:500;
  color:#2B2925;
  margin:0 0 14px;
  letter-spacing:.01em;
  line-height:1.2;
}

.jdw-tl-subtitle{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-style:italic;
  font-size:18px;
  font-weight:400;
  color:#6B6660;
  margin:0;
  line-height:1.6;
}

/* ---------- Timeline wrapper (carries the vertical line) ---------- */
.jdw-tl-wrap{
  position:relative;
  max-width:900px;
  margin:0 auto;
  padding-left:80px;
}
.jdw-tl-wrap::before{
  content:'';
  position:absolute;
  left:30px;
  top:0;
  bottom:0;
  width:1px;
  background-color:rgba(168,136,76,.55);
}

/* ---------- Item ---------- */
.jdw-tl-item{
  position:relative;
  padding-bottom:60px;
}
.jdw-tl-item:last-child{
  padding-bottom:0;
}

/* Diamond marker on the line.
   Item is inside the wrap's padding-left:80px.
   The line is at left:30px of the wrap.
   So to align the diamond's centre with the line, the diamond's
   left edge needs to sit at (30 - 80) = -50px from the item, then
   shift back by half its width (handled via margin-left). */
.jdw-tl-item::before{
  content:'';
  position:absolute;
  left:-50px;
  top:28px;
  width:12px;
  height:12px;
  margin-left:-6px;
  background-color:#FCFAF5;
  border:1px solid #A8884C;
  transform:rotate(45deg);
  box-sizing:border-box;
}
.jdw-marker-filled .jdw-tl-item::before{
  background-color:#A8884C;
  border-color:#A8884C;
}

/* ---------- Year ---------- */
.jdw-tl-year{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(32px,3.4vw,40px);
  font-weight:500;
  letter-spacing:.01em;
  color:#8F7140;
  line-height:1;
  margin:0 0 14px;
}

/* ---------- Item title ---------- */
.jdw-tl-title{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(20px,2vw,24px);
  font-weight:500;
  color:#2B2925;
  margin:0 0 12px;
  letter-spacing:.005em;
  line-height:1.3;
}

/* ---------- Item body ---------- */
.jdw-tl-body{
  font-family:'Montserrat',sans-serif;
  font-size:15px;
  font-weight:300;
  color:#6B6660;
  line-height:1.7;
  letter-spacing:.01em;
  margin:0;
  max-width:640px;
}

/* ---------- Reveal animation ---------- */
.jdw-reveal-on .jdw-tl-item{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .9s ease, transform .9s ease;
}
.jdw-reveal-on .jdw-tl-item.jdw-revealed{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .jdw-reveal-on .jdw-tl-item{
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* ---------- Responsive ---------- */
@media (max-width:780px){
  .jdw-tl-section{ padding:70px 24px; }
  .jdw-tl-wrap{ padding-left:50px; }
  .jdw-tl-wrap::before{ left:18px; }
  .jdw-tl-item::before{ left:-32px; top:22px; }
  .jdw-tl-item{ padding-bottom:50px; }
  .jdw-tl-year{ font-size:28px; margin-bottom:10px; }
  .jdw-tl-title{ font-size:19px; }
  .jdw-tl-body{ font-size:14px; }
  .jdw-tl-head{ margin-bottom:42px; }
}

@media (max-width:480px){
  .jdw-tl-wrap{ padding-left:38px; }
  .jdw-tl-wrap::before{ left:12px; }
  .jdw-tl-item::before{ left:-26px; }
  .jdw-tl-year{ font-size:24px; }
  .jdw-tl-title{ font-size:18px; }
}