/* ==========================================================================
   TINO AFTERMATH — parallax storytelling layout
   Palette: Primary White #FFF (chrome/background), Secondary Black #000
   (text/ink), Tertiary Alert Silver #C7CCD1 (accents only: CTAs, timeline
   nodes, map markers). Story panels stay dark full-bleed photography with
   white overlay text — that's inherent to photojournalism, not a palette
   swap — but every UI control on top of them still reads Black/White/Silver.
   ========================================================================== */

/* -- Alert ticker -------------------------------------------------------- */
.tino-ticker{
  position:sticky; top:0; z-index:60;
  background:var(--c-black);
  color:var(--c-white);
  font-family:var(--font-mono);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  overflow:hidden;
  white-space:nowrap;
  border-bottom:2px solid var(--c-silver);
}
.tino-ticker__track{
  display:inline-block;
  padding-left:100%;
  animation:tino-ticker-scroll 32s linear infinite;
}
.tino-ticker__track span{ padding:0 2.5rem; display:inline-block; }
.tino-ticker__track span::before{ content:"● "; color:var(--c-silver); }
@keyframes tino-ticker-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-100%); } }

/* -- Site header ---------------------------------------------------------- */
.tino-header{
  position:sticky; top:26px; z-index:55;
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem var(--gutter);
  background:var(--c-white);
  border-bottom:1px solid var(--c-hairline);
}
.tino-header__brand{
  font-family:var(--font-display);
  font-size:1.1rem;
  letter-spacing:.02em;
  display:flex; align-items:center; gap:.5rem;
  text-decoration:none;
  color:var(--c-black);
}
.tino-header__brand::before{
  content:"";
  width:.6rem; height:.6rem;
  background:var(--c-silver);
  border:1.5px solid var(--c-black);
  display:inline-block;
}
.tino-header nav ul{ display:flex; gap:1.5rem; list-style:none; margin:0; padding:0; }
.tino-header nav a{ text-decoration:none; font-size:.85rem; letter-spacing:.04em; text-transform:uppercase; color:var(--c-silver-deep); }
.tino-header nav a:hover{ color:var(--c-black); }

/* -- Timeline rail (desktop: fixed left; mobile: horizontal top) --------- */
.tino-rail{
  position:fixed; left:1.25rem; top:50%; transform:translateY(-50%);
  z-index:50;
  display:flex; flex-direction:column; gap:1.75rem;
  list-style:none; margin:0; padding:0;
}
.tino-rail li{ display:flex; align-items:center; gap:.6rem; }
.tino-rail button{
  all:unset; cursor:pointer;
  display:flex; align-items:center; gap:.6rem;
}
.tino-rail .dot{
  width:.65rem; height:.65rem; border-radius:50%;
  background:transparent;
  border:2px solid var(--c-silver-deep);
  transition:background .25s, border-color .25s, transform .25s;
}
.tino-rail .label{
  font-family:var(--font-mono);
  font-size:.65rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--c-silver-deep);
  opacity:0; transform:translateX(-6px);
  transition:opacity .25s, transform .25s;
  white-space:nowrap;
  background:var(--c-white);
  padding:1px 4px;
}
.tino-rail li.is-active .dot{ background:var(--c-silver); border-color:var(--c-black); transform:scale(1.25); }
.tino-rail li.is-active .label{ color:var(--c-black); opacity:1; transform:translateX(0); }
.tino-rail li:hover .label{ opacity:1; transform:translateX(0); }

@media (max-width: 900px){
  .tino-rail{ display:none; } /* replaced by inline progress marker in panels on mobile */
}

/* -- Hero ------------------------------------------------------------------ */
.tino-hero{
  position:relative;
  min-height:88vh;
  display:flex; flex-direction:column; justify-content:center;
  padding:6rem var(--gutter);
  background:
    repeating-linear-gradient(115deg, transparent 0 38px, #f3f3f3 38px 39px),
    var(--tino-hero-image, var(--c-white));
  background-size:cover;
  background-position:center;
}
.tino-hero__eyebrow{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--font-mono);
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--c-white);
  background:var(--c-black);
  padding:.35rem .75rem;
  margin-bottom:1.5rem;
  width:fit-content;
}
.tino-hero__eyebrow::before{ content:""; width:.4rem; height:.4rem; border-radius:50%; background:var(--c-silver); }
.tino-hero h1{
  font-size:clamp(2.4rem, 7vw, 5.2rem);
  color:var(--c-black);
  max-width:16ch;
  margin-bottom:.6rem;
}
.tino-hero h1 em{ font-style:normal; color:var(--c-silver-deep); }
.tino-hero__standfirst{
  max-width:56ch;
  color:#444;
  font-size:1.05rem;
}
.tino-hero__scroll-cue{
  margin-top:2rem;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--c-silver-deep);
  display:flex; align-items:center; gap:.5rem;
}
.tino-hero__scroll-cue::after{
  content:"↓"; display:inline-block; animation:tino-bounce 1.6s ease-in-out infinite; color:var(--c-black);
}
@keyframes tino-bounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(6px); } }

/* -- Story panels (parallax) — full-bleed photography stays dark toned -- */
.tino-story{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  padding:5rem var(--gutter);
  overflow:hidden;
}
.tino-story__bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  background-attachment:fixed; /* core parallax effect */
  will-change:transform;
  z-index:0;
}
@media (max-width: 900px){
  /* background-attachment:fixed is unreliable on mobile Safari; JS fallback applies transform instead */
  .tino-story__bg{ background-attachment:scroll; }
}
.tino-story__overlay{
  position:absolute; inset:0;
  background:linear-gradient(100deg, var(--c-overlay) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.15) 100%);
  z-index:1;
}
.tino-story__card{
  position:relative; z-index:2;
  max-width:640px;
  background:rgba(0,0,0,.6);
  border-left:4px solid var(--c-silver);
  padding:2.25rem;
  backdrop-filter:blur(2px);
}
.tino-story__thumb{
  width:72px; height:72px;
  object-fit:cover;
  border:2px solid var(--c-silver);
  margin-bottom:1rem;
  display:block;
}
.tino-story:nth-child(even) .tino-story__thumb{ margin-left:auto; }
.tino-story__marker{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-mono);
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--c-silver);
  margin-bottom:1rem;
}
.tino-story__marker .num{
  background:var(--c-silver); color:var(--c-black);
  padding:.15rem .5rem; font-weight:700;
}
.tino-story__title{ font-size:clamp(1.6rem, 3.4vw, 2.6rem); color:var(--c-white); margin-bottom:.75rem; }
.tino-story__excerpt{ color:#ececec; font-size:1.02rem; margin-bottom:1.5rem; }
.tino-story__cta{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--c-silver); color:var(--c-black);
  text-decoration:none; font-weight:700; font-size:.85rem;
  letter-spacing:.03em; text-transform:uppercase;
  padding:.85rem 1.4rem;
  transition:transform .15s, box-shadow .15s;
}
.tino-story__cta:hover{ transform:translateY(-2px); box-shadow:0 6px 0 var(--c-white); }
.tino-story__source{
  display:block; margin-top:.75rem;
  font-family:var(--font-mono); font-size:.7rem; color:#bbb;
}

/* Scroll-reveal state, toggled by JS via IntersectionObserver */
.tino-story__card{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.tino-story.is-visible .tino-story__card{ opacity:1; transform:translateY(0); }

/* Alternate card alignment left/right for visual rhythm */
.tino-story:nth-child(even) .tino-story__card{ margin-left:auto; border-left:none; border-right:4px solid var(--c-silver); text-align:right; }
.tino-story:nth-child(even) .tino-story__marker{ flex-direction:row-reverse; }

/* -- Closing / CTA section ----------------------------------------------- */
.tino-closing{
  padding:6rem var(--gutter);
  text-align:center;
  background:var(--c-white);
  border-top:2px solid var(--c-silver);
}
.tino-closing h2{ font-size:clamp(1.8rem,4vw,3rem); color:var(--c-black); max-width:20ch; margin:0 auto .75rem; }
.tino-closing p{ color:var(--c-silver-deep); max-width:50ch; margin:0 auto 2rem; }
.tino-closing .tino-story__cta{ background:var(--c-black); color:var(--c-white); }
.tino-closing .tino-story__cta:hover{ box-shadow:0 6px 0 var(--c-silver); }

/* -- Footer --------------------------------------------------------------- */
.tino-footer{
  padding:2.5rem var(--gutter);
  border-top:1px solid var(--c-hairline);
  font-family:var(--font-mono);
  font-size:.75rem;
  color:var(--c-silver-deep);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
}

/* -- Map markers (if a map block/plugin is added later) ------------------ */
.tino-map-marker{
  width:1.1rem; height:1.1rem; border-radius:50% 50% 50% 0;
  background:var(--c-silver); border:2px solid var(--c-black);
  transform:rotate(-45deg);
}