/* ====================================================================
   TWR Kenya — Golden Jubilee (1976–2026) timeline
   Fonts: Fraunces (display), Archivo (body), JetBrains Mono (data/dial)
   ==================================================================== */

@font-face{font-family:"Fraunces";font-style:normal;font-weight:300 700;font-display:swap;src:url("fonts/fraunces-normal.woff2") format("woff2");}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:400 600;font-display:swap;src:url("fonts/fraunces-italic.woff2") format("woff2");}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/archivo-normal.woff2") format("woff2");}
@font-face{font-family:"Archivo";font-style:italic;font-weight:400 500;font-display:swap;src:url("fonts/archivo-italic.woff2") format("woff2");}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/jbmono.woff2") format("woff2");}

:root{
  /* ---- palette: broadcast night + signal blue (from the TWR mark) ---- */
  --ink:        #0b1524;
  --ink-2:      #12213a;
  --ink-3:      #1a2c4a;
  --paper:      #eef1f4;
  --paper-2:    #ffffff;
  --text:       #eef1f4;
  --text-dim:   #7c8aa0;
  --text-inv:   #101b2d;
  --text-inv-dim: #55617a;
  --accent:     #2FAEE0;
  --accent-hi:  #8FE0F7;
  --onair:      #c1443a;
  --line:       rgba(238,241,244,0.14);

  --display: "Fraunces", ui-serif, Georgia, serif;
  --body: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --container: 920px;
}

:root[data-theme="light"]{
  --ink: #eef1f4; --ink-2:#ffffff; --ink-3:#e4e8ee;
  --text:#101b2d; --text-dim:#55617a;
  --text-inv:#eef1f4; --text-inv-dim:#aab3c4;
  --line: rgba(16,27,45,0.12);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --ink: #eef1f4; --ink-2:#ffffff; --ink-3:#e4e8ee;
    --text:#101b2d; --text-dim:#55617a;
    --text-inv:#eef1f4; --text-inv-dim:#aab3c4;
    --line: rgba(16,27,45,0.12);
  }
}
:root[data-theme="dark"]{
  --ink: #0b1524; --ink-2:#12213a; --ink-3:#1a2c4a;
  --text:#eef1f4; --text-dim:#7c8aa0;
  --text-inv:#101b2d; --text-inv-dim:#55617a;
  --line: rgba(238,241,244,0.14);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{ color:inherit; }
img,svg{ display:block; max-width:100%; }

.wrap{ max-width:var(--container); margin-inline:auto; padding-inline:24px; }

::selection{ background:var(--accent); color:#101b2d; }

:focus-visible{ outline:2px solid var(--accent-hi); outline-offset:3px; border-radius:2px; }

/* ---------------------------------------------------------------- header */
.site-header{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px;
  background:color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:13px; letter-spacing:.06em; text-decoration:none; color:var(--text); }
.brand .dot{ width:8px; height:8px; border-radius:50%; background:var(--onair); box-shadow:0 0 0 3px color-mix(in srgb, var(--onair) 25%, transparent); }
.brand strong{ font-weight:700; }
.jubilee-tag{
  font-family:var(--mono); font-size:12px; color:var(--accent-hi);
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  padding:5px 10px; border-radius:999px; letter-spacing:.04em; white-space:nowrap;
}

/* ---------------------------------------------------------------- hero */
.hero{
  position:relative; overflow:hidden;
  padding:104px 24px 88px;
  border-bottom:1px solid var(--line);
}
#hero-canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.55; }
.hero-inner{
  position:relative; max-width:var(--container); margin-inline:auto;
  text-align:center; display:flex; flex-direction:column; align-items:center;
}
.hero-logo-plate{
  background:var(--paper-2); border-radius:10px;
  padding:14px 22px; margin-bottom:36px;
  box-shadow:0 12px 30px -14px rgba(0,0,0,.5);
}
.hero-logo{ height:44px; width:auto; }

.onair-badge{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--onair); margin-bottom:28px;
}
.onair-badge .dot{ width:7px; height:7px; border-radius:50%; background:var(--onair); flex:none; }
.onair-badge .flicker{ animation: flicker 5s linear infinite; }
@keyframes flicker{
  0%, 91%, 94%, 100%{ opacity:1; }
  92%{ opacity:.35; }
  93%{ opacity:.8; }
}
@media (prefers-reduced-motion: reduce){ .onair-badge .flicker{ animation:none; } }

.hero h1{
  font-family:var(--display); font-weight:600; font-style:normal;
  font-size:clamp(2.6rem, 7vw, 5.2rem);
  line-height:1.02; letter-spacing:-.01em;
  margin:0 0 20px; text-wrap:balance;
  max-width:14ch;
}
.hero h1 em{ font-style:italic; font-weight:400; color:var(--accent-hi); }

.hero p.lede{
  font-size:clamp(1.05rem,2vw,1.3rem); color:var(--text-dim);
  max-width:46ch; margin:0 0 44px;
}
.stat-inline{
  font-family:var(--mono); color:var(--accent-hi); font-weight:700;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

.scroll-cue{
  margin-top:12px; display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-dim); text-decoration:none;
}
.scroll-cue svg{ animation: bob 1.8s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(5px);} }
@media (prefers-reduced-motion: reduce){ .scroll-cue svg{ animation:none; } }

/* ---------------------------------------------------------------- timeline: a running log, not a card grid */
.timeline{ position:relative; padding:88px 24px 20px; }
.timeline-head{ max-width:var(--container); margin:0 auto 64px; text-align:left; }
.timeline-head .eyebrow{ font-family:var(--mono); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; }
.timeline-head h2{ font-family:var(--display); font-weight:600; font-size:clamp(1.8rem,4.4vw,2.7rem); margin:0; text-wrap:balance; max-width:20ch; }
.timeline-caveat{
  font-style:italic; color:var(--text-dim); font-size:.9rem;
  margin:18px 0 0; max-width:52ch;
}

/* .log stays the same width as the rest of the page (--container) so entry text
   keeps the exact alignment it already has with the heading above it. The decade
   numeral is pulled OUT into the true page margin on wide viewports instead of
   living inside this box — see the min-width:1300px tier below. */
.log{ max-width:var(--container); margin:0 auto; }

.entry{
  position:relative;
  padding:40px 0; border-top:1px solid var(--line);
  opacity:0; transform:translateY(16px);
  transition:opacity .6s ease, transform .6s ease;
}
.entry.in-view{ opacity:1; transform:translateY(0); }
.log .entry:last-child{ border-bottom:1px solid var(--line); }

.entry-year{
  font-family:var(--display); font-weight:700; font-size:clamp(2rem,5vw,2.6rem);
  color:var(--accent-hi); line-height:1; letter-spacing:-.01em;
  margin:0 0 14px;
}
.entry-year span{ font-style:italic; font-weight:400; }

/* true marginalia: only once the gutter outside .log is reliably wide enough
   (>=190px at 1300px) to hold the numeral without crowding the viewport edge */
@media (min-width:1300px){
  .entry-year{
    position:absolute; top:40px; right:calc(100% + 48px);
    margin:0; text-align:right; white-space:nowrap;
  }
}
@media (min-width:1600px){ .entry-year{ right:calc(100% + 96px); } }
@media (min-width:1920px){ .entry-year{ right:calc(100% + 152px); } }

/* photo placeholder — mirrors the year numeral, but in the right margin */
.entry-photo{ margin:24px 0 0; max-width:160px; }
.entry-photo-frame{
  aspect-ratio:3/4; border-radius:3px;
  border:1px dashed color-mix(in srgb, var(--accent) 35%, var(--line));
  background:color-mix(in srgb, var(--ink-2) 60%, transparent);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-dim);
}
.entry-photo figcaption{
  margin-top:8px; font-family:var(--mono); font-size:11px; line-height:1.5;
  color:var(--text-dim); letter-spacing:.02em;
}
.entry-photo figcaption em{ font-style:italic; }

@media (min-width:1300px){
  .entry-photo{
    position:absolute; top:40px; left:calc(100% + 48px);
    margin:0; width:130px;
  }
}
@media (min-width:1600px){ .entry-photo{ left:calc(100% + 96px); width:160px; } }
@media (min-width:1920px){ .entry-photo{ left:calc(100% + 152px); width:190px; } }

/* the photo frame can be taller than an entry's collapsed content (before
   "Read the full story" is opened) — floor the entry height so it never
   overlaps the next one */
@media (min-width:1300px){ .entry{ min-height:290px; } }
@media (min-width:1600px){ .entry{ min-height:330px; } }
@media (min-width:1920px){ .entry{ min-height:370px; } }

.entry-range{
  font-family:var(--mono); font-size:12.5px; color:var(--text-dim); letter-spacing:.04em;
  margin:0 0 10px;
}
.entry-body h3{
  font-family:var(--display); font-style:italic; font-weight:500; font-size:1.35rem;
  margin:0 0 12px; color:var(--text);
}
.entry-body p{ max-width:60ch; color:var(--text-dim); font-size:1rem; margin:0; }
.entry-body p b{ color:var(--text); font-weight:600; }

.entry-more{ margin-top:18px; }
.entry-more summary{
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--accent-hi); font-weight:700; user-select:none;
}
.entry-more summary::-webkit-details-marker{ display:none; }
.entry-more summary::marker{ content:""; }
.entry-more summary::after{
  content:"+"; font-size:15px; line-height:1; font-weight:400;
  transition:transform .25s ease;
}
.entry-more[open] summary::after{ transform:rotate(45deg); }
.entry-more-body{
  margin-top:16px; display:flex; flex-direction:column; gap:14px; max-width:60ch;
  animation:reveal-more .4s ease;
}
.entry-more-body p{ color:var(--text-dim); font-size:.98rem; margin:0; }
.entry-more-body p b{ color:var(--text); font-weight:600; }
@keyframes reveal-more{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){ .entry-more-body{ animation:none; } }

@media (max-width:640px){
  .entry-year{ font-size:1.9rem; }
}

/* ---------------------------------------------------------------- closing */
.closing{
  border-top:1px solid var(--line);
  padding:96px 24px; text-align:center;
}
.closing .eyebrow{ font-family:var(--mono); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:18px; }
.closing h2{
  font-family:var(--display); font-weight:600; font-size:clamp(2rem,5vw,3.2rem);
  max-width:18ch; margin:0 auto 22px; text-wrap:balance;
}
.closing h2 em{ font-style:italic; font-weight:400; color:var(--accent-hi); }
.closing p{ max-width:56ch; margin:0 auto 40px; color:var(--text-dim); font-size:1.05rem; }

.text-link{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:14px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--accent-hi); text-decoration:none; font-weight:700;
  padding-bottom:3px; border-bottom:1px solid color-mix(in srgb, var(--accent) 50%, transparent);
}
.text-link svg{ transition:transform .25s ease; }
.text-link:hover svg{ transform:translate(2px,-2px); }

/* ---------------------------------------------------------------- footer */
.site-footer{
  border-top:1px solid var(--line); padding:36px 24px;
  display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:12px; color:var(--text-dim);
}
.site-footer a{ text-decoration:none; }
.site-footer a:hover{ color:var(--accent-hi); }