/* ===========================================================
   Vertical “Columns by Year” Timeline
   - Left sticky sidebar
   - Vertical stack of year panels
   - Right sticky year scale with ticks/labels
   =========================================================== */

:root{
  /* --vtl-bg: #0e1218; */
  --vtl-bg: #EBEBEB
  --vtl-surface: #151a22;
  --vtl-ink: #0e1218;
  --vtl-muted: #aeb7b6;
  --vtl-accent: #e84d4f; /* headline accent (like red column) */
  --vtl-line: #2a3140;

  --vtl-gutter-x: 28px;
  --vtl-sidebar-w: 305px;
  --vtl-scale-w: 86px;

  --vtl-radius: 12px;
  --vtl-shadow: 0 22px 44px rgba(0,0,0,.24), 0 10px 20px rgba(0,0,0,.18);

  --vtl-head-size: 34px;
}

.vtl{
  background: var(--vtl-bg);
  color: var(--vtl-ink);
  display: grid;
  grid-template-columns: var(--vtl-sidebar-w) var(--vtl-gutter-x) 1fr var(--vtl-gutter-x) var(--vtl-scale-w);
  column-gap: 0;
  min-height: 100vh;
  padding: 24px 16px 80px;
}

/* ---------- Left sidebar ---------- */
.vtl-sidebar{
  grid-column: 1 / 2;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  padding: 100px 12px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-right: 1px solid var(--vtl-line);
  align-items: center;
  background-color: rgb(235, 232, 232);
  border-radius: 8px;
  
}

.vtl-sidebar h1{
  margin: 0;
  line-height: 1.05;
  font-size: clamp(28px, 3.6vw, 40px);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.vtl-meta{
  display: grid;
  gap: 6px;
  margin-top: 8px;
}
.vtl-meta a{
  color: var(--vtl-muted);
  text-decoration: none;
  font-size: 14px;
}
.vtl-meta a:hover{ color: #fff; }

/* ---------- Middle track ---------- */
.vtl-track{
  display: grid;
  grid-column: 3 / 4;
  position: relative;
  gap: 10px;


}

/* faint vertical guide */
.vtl-track::before{
  content:"";
  position: absolute;
  left: -16px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--vtl-line);
  opacity: .8;
}

/* Year panel */
.vtl-year{
  position: relative;
  background: var(--vtl-surface);
  border-radius: var(--vtl-radius);
  box-shadow: var(--vtl-shadow);
  margin: 24px 0;
  overflow: clip;
  transition: transform .35s ease, box-shadow .35s ease;
  border: 1px solid black;
}

/* accent spine (left edge)  */
.vtl-year::before{
  content:"";
  position: absolute;
  inset: 0 auto 0 0;
  width: 12px;
  background: var(--vtl-accent);
}

.vtl-year:hover{
  transform: translateY(-2px);
  box-shadow: 0 28px 54px rgba(0,0,0,.3), 0 10px 22px rgba(0,0,0,.18);
}

/* Header line with year + event title */
.vtl-head{
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  gap: 16px;
  padding: 18px 18px 14px 18px;
  border-bottom: 1px solid var(--vtl-line);
  background: linear-gradient(0deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}

.vtl-yearnum{
  font-weight: 800;
  font-size: var(--vtl-head-size);
  letter-spacing: .5px;
  color: #0d1117;
  padding-left: 15px;
}

.vtl-title{
  font-size: clamp(16px, 2vw, 20px);
  text-transform: uppercase;
  letter-spacing: .4px;
  color:#92062B;
  font-weight: bolder;
}

/* Body */
.vtl-body{
  padding: 16px 18px 18px 18px;
  color: var(--vtl-ink);
  display: flex;
  gap: 15px;
}
.vtl-body p{
  margin: 0 0 10px;
  color: var(--vtl-ink);
  opacity: .9;
  font-size: 18px;
  line-height: 30px;
  padding-left: 15px;
}

/* Gallery inside panel */
.vtl-gallery figure{
  margin: 0;
  background: #0d1117;
  border-radius: 10px;
  overflow: hidden;
}
.vtl-gallery img{
  width: 300px;
  height: 230px;
  object-fit: cover;
  /* display: block; */
}


/* ---------- Right vertical scale ---------- */
.vtl-scale{
  grid-column: 5 / 6;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  border-left: 1px solid var(--vtl-line);
  padding-left: 12px;

  display: grid;
  grid-template-rows: 1fr;
}

.vtl-scale .ruler{
  position: relative;
  width: 100%;
  height: 100%;
}

/* ticks are positioned by JS */
.vtl-scale .tick{
  position: absolute;
  left: 0;
  width: 14px;
  height: 1px;
  background: var(--vtl-line);
  transform: translateY(-.5px);
}
.vtl-scale .tick.major{
  width: 22px;
  background: #fff;
}

.vtl-scale .label{
  position: absolute;
  left: 28px;
  transform: translateY(-50%);
  color: var(--vtl-muted);
  font-size: 15px;
  letter-spacing: .3px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  color: #0d1117;
}
.vtl-scale .label.active{
  color: red;
  font-weight: 700;
}



/* ===========================================================
   MOBILE TWEAKS (keeps desktop exactly as-is)
   =========================================================== */

/* Tablets & small laptops */
@media (max-width: 860px){
  /* Keep sidebar visible but slimmer, balance with scale */
  :root{
    --vtl-sidebar-w: 140px;   /* was 305px */
    --vtl-scale-w: 66px;      /* a bit slimmer */
    --vtl-gutter-x: 14px;     /* tighter gutters */
  }
  .vtl{
    grid-template-columns: var(--vtl-sidebar-w) var(--vtl-gutter-x) 1fr var(--vtl-gutter-x) var(--vtl-scale-w);
  }

  .vtl-sidebar{
    padding: 60px 6px;
  }
  .vtl-sidebar h1{
    font-size: 18px;          /* smaller title */
    line-height: 1.1;
  }
  .vtl-meta{
    gap: 4px;
  }
  .vtl-meta a{
    font-size: 12px;          /* smaller links */
  }

  /* Scale: slimmer ticks + smaller labels */
  .vtl-scale{ z-index: 5; }   /* stay above footer */
  .vtl-scale .tick{ width: 10px; }
  .vtl-scale .tick.major{ width: 16px; }
  .vtl-scale .label{ left: 22px; font-size: 11px; }

  /* Panel header: compress a touch */
  .vtl-head{
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 14px 14px 12px;
  }
  .vtl-yearnum{ font-size: 26px; }
  .vtl-title{ font-size: 16px; padding-left: 15px;}

  /* Stack text above image */
  .vtl-body{
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
  }
  .vtl-body p{
    font-size: 16px;
    line-height: 28px;
  }

  /* Image: fluid & smaller than desktop */
  .vtl-gallery{
    align-self: flex-start;
    width: 100%;
  }
  .vtl-gallery img{
    /* about half the visual footprint of desktop, with sensible bounds */
    width: clamp(80px, 100%, 520px);
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    object-fit: cover;
  }

  /* Guide line alignment when layout tightens */
  .vtl-track::before{ left: -12px; }
}

/* Phones (≤480px): extra compact */
@media (max-width: 550px){
  :root{
    --vtl-sidebar-w: 100px;   /* sidebar still visible, narrower */
    --vtl-scale-w: 50px;      /* narrow scale */
    --vtl-gutter-x: 12px;
  }
  .vtl{
    grid-template-columns: var(--vtl-sidebar-w) var(--vtl-gutter-x) 1fr var(--vtl-gutter-x) var(--vtl-scale-w);
  }

  .vtl-sidebar h1{ font-size: 12px; }
  .vtl-meta{ display: none; }  /* hide meta links to free space */

  .vtl-scale .label{ left: 16px; font-size: 10px; }
  .vtl-scale .tick{ width: 8px; }
  .vtl-scale .tick.major{ width: 12px; }

  .vtl-year{ margin: 16px 0; }
  .vtl-body p{ font-size: 15px; line-height: 26px; }

  /* Image ~half size of desktop, but never teeny */
  .vtl-gallery img{
    width: clamp(160px, 100%, 280px);
  }
}

/* ===== Scroll helper cue (updated) ===== */
.scroll-cue{
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(16px, 2.5vw, 28px));
  transform: translateX(-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 2px solid black;
  background: #00E399;
  color: black;
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
  cursor: pointer;
  z-index: 9999; /* keep above everything on mobile */
  transition: opacity .25s ease, transform .25s ease, background .2s ease, border-color .2s ease;
}
.scroll-cue:hover{
  background: red;
  border-color: black;
}
.scroll-cue--hide{
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(8px);
}

/* gentle nudge animation */
.scroll-cue__icon{
  display: grid;
  place-items: center;
  animation: cueNudge 1.5s ease-in-out infinite;
}
@keyframes cueNudge{
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce){
  .scroll-cue__icon{ animation: none; }
}

@media (max-width: 480px){
  .scroll-cue{
    width: 42px;
    height: 42px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  }
}