:root{
    --bg:#f7f4e9;
    --ink:#151515;
    --muted:#6b6b6b;
    --coke:#e21b22; 
    --shadow:0 10px 30px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:"Archivo Narrow",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    line-height:1.35;
}

.wrap{ width:min(1100px,92vw); margin:2rem auto 4rem }

.site-header{
    display:flex; align-items:center; justify-content:space-between;
    gap:1rem; padding:.75rem 1rem; border-bottom:1px solid var(--line);
    position:sticky; top:0; background:var(--bg); z-index:10;
}
.brand img{ height:28px; display:block }
.site-nav a{
    color:#8c8c8c; text-decoration:none; margin-left:1rem; font-weight:600;
    letter-spacing:.02em;
}
.site-nav a.is-active, .site-nav a:hover{ color:var(--ink) }

.page-title{
    font-family: "Varela Round", sans-serif;
    font-style: uppercase;
    margin:1.25rem 0 2rem;
    font-size: clamp(1.8rem, 1.2rem + 2.5vw, 3rem);
    color:var(--coke);
    letter-spacing:.02em;
}

.timeline{
    position:relative;
    padding:2rem 0 1rem;
}


.timeline::before{
    content:"";
    position:fixed; 
    top:0; bottom:0;
    left:50%;
    transform:translateX(-50%);
    width:4px;
    background:linear-gradient(var(--coke), var(--coke));
    opacity:.25;
    pointer-events:none;
}

.timeline-item{
    position:relative;
    display:grid;
    grid-template-columns: 1fr;
    gap:.9rem;
    padding:2.25rem 0;
    text-align:center;
}

.timeline-item .node{
    position:absolute;
    top:1.2rem;
    left:50%;
    transform:translate(-50%,-50%);
    width:14px; height:14px; border-radius:50%;
    background:var(--coke);
    box-shadow:0 0 0 6px rgba(226,27,34,.18);
}

.timeline-item .year{
    position:absolute;
    top:0; left:50%;
    transform:translate(-50%,-120%);
    color:#b23;
    font-weight:700;
    letter-spacing:.02em;
}

.media{
    margin:0 auto;
    border:10px solid var(--coke);
    border-radius:18px;
    width:min(560px, 86vw);
    box-shadow:var(--shadow);
    background:#fff;
}
.media img{ display:block; width:100%; height:auto }

.content{
    margin:0 auto;
    width:min(660px, 88vw);
    padding:.25rem .75rem 0;
    color:#222;
}
.event{
    margin:.25rem 0 .5rem;
    font-size: clamp(1.3rem, 1rem + 1vw, 1.6rem);
    color:var(--coke);
}

@media (min-width: 980px){
  .timeline::before{
    position:absolute;
    top:0; bottom:0;
    left:50%;
    transform:translateX(-50%);
    opacity:.35;
}

  .timeline-item{
    grid-template-columns: 1fr 1fr;
    align-items:center;
    text-align:left;
    min-height: 260px;
}

.timeline-item.left .media{ order:1; justify-self:end }
.timeline-item.left .content{ order:2; justify-self:start; padding-left:2rem }

.timeline-item.right .media{ order:2; justify-self:start }
.timeline-item.right .content{ order:1; justify-self:end; padding-right:2rem; text-align:right }

  .timeline-item .year{
    top:50%; transform:translate(-50%,-50%);
    font-size:1.1rem;
    background:var(--bg);
    padding:.2rem .45rem;
    border-radius:6px;
}
.timeline-item .node{
    left:50%; transform:translate(-50%,-50%);
}

  .media{ width:480px }
  .content{ width:520px }
}

.site-footer{
    text-align:center; color:#8c8c8c; padding:2.5rem 1rem;
    border-top:1px solid var(--line);
}