:root{
  --navy:#0A1524;
  --navy-2:#122736;
  --navy-3:#1C3547;
  --blue:#21409A;
  --sky:#91D8F7;
  --green:#A8CF45;
  --yellow:#FFF212;
  --purple:#993EDA;
  --red:#800D24;
  --paper:#F9FAFB;
  --soft:#F2F6F8;
  --line:#D2DEE5;
  --muted:#698AA1;
  --white:#FFFFFF;
  --ink:#0A1524;
  --shadow:0 24px 70px rgba(10,21,36,.14);
  --radius-xl:32px;
  --radius-lg:24px;
  --radius-md:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  overflow-x:hidden;
}
button,select{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit}
button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
body.modal-open{overflow:hidden}

/* Top navigation */

/* Overall layout */
.layout{
  display:grid;
  grid-template-columns:340px minmax(0,1fr);
  min-height:100vh;
  padding-top:76px;
}
.sidebar{
  position:fixed;
  top:76px;left:0;bottom:0;
  width:340px;
  z-index:30;
  padding:30px 24px;
  background:var(--navy);
  color:#fff;
  border-right:1px solid rgba(255,255,255,.08);
  overflow:auto;
}
.sidebar::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:160px;
  pointer-events:none;
  background:linear-gradient(transparent,rgba(33,64,154,.18));
}

.selector-label{
  display:block;
  margin-bottom:8px;
  color:#BACBD6;
  font-size:12px;
  font-weight:700;
}
.select-wrap{position:relative}
.select-wrap::after{
  content:"⌄";
  position:absolute;right:14px;top:50%;
  transform:translateY(-54%);
  pointer-events:none;
  color:var(--sky);font-size:18px;
}
select{
  width:100%;
  appearance:none;
  border:1px solid rgba(255,255,255,.15);
  border-radius:14px;
  background:var(--navy-2);
  color:#fff;
  padding:13px 42px 13px 14px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}



main{grid-column:2;min-width:0}

/* Hero */
.intro{
  min-height:74vh;
  display:flex;
  align-items:flex-end;
  padding:90px clamp(34px,7vw,110px) 72px;
  background:
    radial-gradient(circle at 80% 24%,rgba(145,216,247,.24),transparent 25%),
    radial-gradient(circle at 93% 74%,rgba(168,207,69,.13),transparent 22%),
    linear-gradient(180deg,#F9FAFB 0%,#F2F6F8 100%);
  border-bottom:1px solid var(--line);
}
.intro-inner{max-width:970px}
.eyebrow{
  margin:0 0 14px;
  color:var(--blue);
  font-size:11px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.intro h2{
  margin:0;
  max-width:900px;
  font-size:clamp(52px,7.4vw,108px);
  line-height:.88;
  letter-spacing:-.065em;
  font-weight:900;
}
.intro h2 .accent{
  display:inline-block;
  position:relative;
  z-index:1;
}
.intro h2 .accent::after{
  content:"";
  position:absolute;
  left:-1%;right:-2%;bottom:.05em;
  height:.2em;
  background:var(--yellow);
  z-index:-1;
  transform:rotate(-1deg);
}
.intro p{
  max-width:690px;
  margin:28px 0 0;
  color:#4E6F87;
  font-size:17px;
  line-height:1.6;
}

/* Desktop timeline */
.timeline-section{
  position:relative;
  height:430vh;
  background:var(--paper);
}
.sticky{
  position:sticky;
  top:76px;
  height:calc(100vh - 76px);
  overflow:hidden;
  display:flex;
  align-items:center;
}
.viewport{width:100%;overflow:visible}
.timeline-track{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:150px;
  width:max-content;
  padding:100px 18vw 130px 10vw;
  will-change:transform;
}
.timeline-track::before{
  content:"";
  position:absolute;
  left:0;right:0;
  top:220px;
  height:2px;
  background:linear-gradient(90deg,#CCD9E1 0%,#91D8F7 44%,#21409A 100%);
}
.timeline-track::after{
  content:"";
  position:absolute;
  left:0;top:215px;
  width:100%;height:12px;
  background:repeating-linear-gradient(90deg,transparent 0 48px,rgba(33,64,154,.09) 48px 49px);
  pointer-events:none;
}
.event{
  width:280px;
  flex:none;
  position:relative;
  z-index:2;
}
.event-header{
  width:100%;
  border:0;
  padding:0;
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
}
.event-card-top{
  min-height:116px;
  padding:18px;
  border-radius:18px;
  border:1px solid #DBE5EA;
  background:#fff;
  box-shadow:0 8px 24px rgba(10,21,36,.045);
  transition:.22s ease;
}
.event:hover .event-card-top,.event.active .event-card-top{
  transform:translateY(-5px);
  border-color:rgba(33,64,154,.28);
  box-shadow:0 18px 38px rgba(10,21,36,.10);
}
.event-date{
  display:inline-flex;
  padding:5px 8px;
  border-radius:999px;
  background:rgba(145,216,247,.22);
  color:var(--blue);
  font-size:11px;
  font-weight:900;
}
.event-title{
  display:block;
  margin-top:11px;
  font-size:21px;
  font-weight:900;
  line-height:1.08;
  letter-spacing:-.035em;
}
.node-wrap{
  height:82px;
  display:flex;
  align-items:center;
  padding-left:18px;
}
.node{
  position:relative;
  width:18px;height:18px;
  border-radius:50%;
  background:#fff;
  border:4px solid var(--blue);
  box-shadow:0 0 0 6px var(--paper);
  transition:.2s ease;
}
.node::after{
  content:"";
  position:absolute;
  inset:50% auto auto 50%;
  width:38px;height:38px;border-radius:50%;
  transform:translate(-50%,-50%) scale(.4);
  border:1px solid rgba(33,64,154,.18);
  opacity:0;
  transition:.22s ease;
}
.event:hover .node,.event.active .node{
  width:24px;height:24px;
  background:var(--yellow);
  border-color:var(--navy);
}
.event:hover .node::after,.event.active .node::after{
  opacity:1;transform:translate(-50%,-50%) scale(1);
}
.event-foot{
  display:flex;
  gap:8px;
  align-items:center;
  padding-left:18px;
  color:#698AA1;
  font-size:11px;
  font-weight:750;
}
.event-foot span:first-child{
  width:7px;height:7px;border-radius:50%;background:var(--green)
}
.timeline-instruction{
  position:absolute;
  left:clamp(28px,7vw,110px);
  bottom:32px;
  display:flex;align-items:center;gap:9px;
  padding:9px 12px;
  border-radius:999px;
  background:rgba(10,21,36,.92);
  color:#ECF1F4;
  box-shadow:0 10px 28px rgba(10,21,36,.15);
  font-size:11px;font-weight:750;
}
.timeline-instruction::before{
  content:"→";
  display:grid;place-items:center;
  width:22px;height:22px;border-radius:50%;
  background:var(--yellow);
  color:var(--navy);
  font-weight:900;
}

/* Outro */

/* Aggregation modal */
.archive-overlay{
  position:fixed;
  inset:0;
  z-index:100;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(10,21,36,.72);
  backdrop-filter:blur(14px);
}
.archive-overlay.open{display:flex}
.archive-modal{
  width:min(1380px,97vw);
  height:min(900px,94vh);
  display:grid;
  grid-template-rows:auto 1fr;
  overflow:hidden;
  border-radius:30px;
  background:var(--paper);
  box-shadow:0 34px 100px rgba(0,0,0,.32);
  border:1px solid rgba(255,255,255,.18);
}
.archive-header{
  position:relative;
  padding:32px 86px 28px 36px;
  color:#fff;
  background:
    radial-gradient(circle at 86% 15%,rgba(145,216,247,.35),transparent 24%),
    linear-gradient(120deg,var(--navy) 0%,var(--navy-2) 72%,#21409A 135%);
}
.archive-header::after{
  content:"";
  position:absolute;
  left:36px;bottom:0;
  width:84px;height:4px;
  background:var(--yellow);
}
.archive-kicker{
  margin:0 0 10px;
  color:var(--sky);
  font-size:11px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.archive-date{
  display:inline-flex;
  padding:6px 9px;
  border-radius:999px;
  background:var(--yellow);
  color:var(--navy);
  font-size:11px;
  font-weight:900;
}
.archive-header h2{
  margin:12px 0 12px;
  font-size:clamp(30px,4vw,55px);
  line-height:.95;
  letter-spacing:-.05em;
}
.archive-description{
  max-width:850px;
  margin:0;
  color:#CCD9E1;
  font-size:14px;
  line-height:1.55;
}
.archive-close{
  position:absolute;
  top:24px;right:24px;
  width:44px;height:44px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.17);
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:23px;
  cursor:pointer;
  transition:.18s ease;
}
.archive-close:hover{background:#fff;color:var(--navy);transform:rotate(4deg)}
.archive-body{
  overflow:auto;
  padding:30px 36px 42px;
}
.archive-section+.archive-section{margin-top:36px}
.archive-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:15px;
}
.archive-section-head h3{
  margin:0;
  font-size:22px;
  letter-spacing:-.035em;
}

.archive-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.archive-tile{
  position:relative;
  min-height:168px;
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:18px;
  border-radius:20px;
  border:1px solid #DBE5EA;
  text-decoration:none;
  background:#fff;
  color:var(--navy);
  transition:.2s ease;
  overflow:hidden;
}
.archive-tile::after{
  content:"";
  position:absolute;
  right:-30px;bottom:-30px;
  width:90px;height:90px;border-radius:50%;
  background:var(--sky);
  opacity:.1;
}
.archive-tile.internal{
  border-color:rgba(33,64,154,.18);
  background:linear-gradient(145deg,rgba(145,216,247,.18),#fff 56%);
}
.archive-tile.external{
  background:linear-gradient(145deg,rgba(242,246,248,.7),#fff 56%);
}
.archive-tile:hover{
  transform:translateY(-4px);
  border-color:rgba(33,64,154,.35);
  box-shadow:0 16px 35px rgba(10,21,36,.10);
}
.tile-top{
  display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
}
.tile-icon{
  width:40px;height:40px;
  display:grid;place-items:center;
  border-radius:12px;
  background:var(--navy);
  color:#fff;
  font-size:15px;font-weight:900;
}
.internal .tile-icon{background:var(--blue)}

.tile-type{
  display:block;
  margin-bottom:6px;
  color:#698AA1;
  font-size:10px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.tile-title{
  display:block;
  max-width:90%;
  font-size:16px;
  line-height:1.25;
  font-weight:900;
  letter-spacing:-.025em;
}
.tile-action{
  position:relative;z-index:1;
  color:var(--blue);
  font-size:11px;
  font-weight:900;
}

/* Mobile / tablet */

@media(max-width:1100px){
  .layout{grid-template-columns:292px minmax(0,1fr)}
  .sidebar{width:292px}
  
  .archive-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:820px), (max-height:500px) and (pointer:coarse){
  
  
  
  

  .layout{
    display:block;
    padding-top:62px;
  }
  .sidebar{
    position:sticky;
    top:62px;
    width:auto;
    height:auto;
    bottom:auto;
    padding:10px 14px;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.1);
    overflow:visible;
    z-index:45;
  }
  .sidebar::after{display:none}
  .sidebar-inner{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    gap:10px;
    align-items:end;
  }
  .selector-label{font-size:10px;margin-bottom:5px}
  select{height:42px;padding:9px 36px 9px 11px;font-size:11px}
  
  

  main{padding:0}
  .intro{
    min-height:62vh;
    padding:70px 20px 44px;
    align-items:flex-end;
  }
  .intro h2{
    font-size:clamp(46px,15vw,70px);
    line-height:.9;
  }
  .intro p{font-size:15px;margin-top:22px}
  
  

  /* Mobile becomes swipe-first instead of scroll-jacking */
  .timeline-section{
    height:auto;
    padding:46px 0 56px;
    overflow:hidden;
    background:var(--paper);
  }
  .sticky{
    position:relative;
    top:auto;
    height:auto;
    display:block;
    overflow:visible;
  }
  .viewport{
    overflow-x:auto;
    overflow-y:visible;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    padding:6px 0 24px;
  }
  .viewport::-webkit-scrollbar{display:none}
  .timeline-track{
    transform:none!important;
    gap:18px;
    padding:16px 20px 30px;
    width:max-content;
  }
  .timeline-track::before{
    top:168px;
    left:20px;right:20px;
  }
  .timeline-track::after{display:none}
  .event{
    width:min(78vw,300px);
    scroll-snap-align:center;
  }
  .event-card-top{
    min-height:112px;
    padding:16px;
  }
  .event-title{font-size:20px}
  .node-wrap{height:78px;padding-left:16px}
  .event-foot{padding-left:16px}
  .timeline-instruction{
    position:relative;
    left:auto;bottom:auto;
    margin:0 20px;
    width:max-content;
  }
  .timeline-instruction::before{content:"↔"}

  
  
  

  /* Modal behaves as a phone-native bottom sheet */
  .archive-overlay{
    align-items:flex-end;
    padding:0;
    background:rgba(10,21,36,.72);
  }
  .archive-modal{
    width:100%;
    height:92dvh;
    border-radius:26px 26px 0 0;
    grid-template-rows:auto 1fr;
    animation:sheetUp .28s cubic-bezier(.22,.8,.2,1);
  }
  @keyframes sheetUp{
    from{transform:translateY(22px);opacity:.75}
    to{transform:translateY(0);opacity:1}
  }
  .archive-header{
    padding:26px 58px 22px 20px;
  }
  .archive-header::before{
    content:"";
    position:absolute;
    top:9px;left:50%;
    transform:translateX(-50%);
    width:44px;height:4px;border-radius:999px;
    background:rgba(255,255,255,.3);
  }
  .archive-header::after{left:20px;width:64px}
  .archive-header h2{font-size:32px;margin-top:10px}
  .archive-description{font-size:13px}
  .archive-close{top:20px;right:16px;width:38px;height:38px}
  .archive-body{padding:22px 16px 32px}
  .archive-section+.archive-section{margin-top:28px}
  .archive-section-head{
    display:block;
    margin-bottom:11px;
  }
  .archive-section-head h3{font-size:19px}
  
  .archive-grid{
    grid-template-columns:1fr;
    gap:10px;
  }
  .archive-tile{
    min-height:132px;
    border-radius:17px;
    padding:15px;
  }
  .tile-title{max-width:100%;font-size:15px}
}

@media(max-width:420px){
  .sidebar-inner{grid-template-columns:1fr}
  .intro{min-height:58vh;padding-top:58px}
  .intro h2{font-size:clamp(42px,14vw,58px)}
  .intro p{font-size:14px}
  .event{width:82vw}
  .archive-modal{height:94dvh}
}

/* Respect reduced motion */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* Attached Infocom header */

.site-header,.site-header * { box-sizing:border-box; }
.site-header { background:#0a1524; color:#fff; position:sticky; top:0; z-index:18000; box-shadow:0 2px 8px rgba(0,0,0,.35); }
.header-top { max-width:1200px; margin:0 auto; padding:0 15px; height:60px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.header-logo { text-decoration:none; flex-shrink:0; }
.header-logo img { width:110px; height:auto; display:block; }
.project-language {
  position:fixed;
  top:calc(var(--site-header-height) + 18px);
  right:18px;
  z-index:17000;
  display:flex;
  gap:6px;
  padding:5px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:8px;
  background:rgba(20,42,56,.92);
  backdrop-filter:blur(12px);
  box-shadow:0 5px 24px rgba(0,0,0,.2);
}
.project-language button {
  border:1px solid rgba(255,255,255,.35);
  background:transparent;
  color:#fff;
  padding:5px 10px;
  border-radius:4px;
  font-size:13px;
  font-weight:700;
}
.project-language button.is-active {
  background:#91D8F7;
  border-color:#91D8F7;
  color:#0a1524;
}
/* Attached Infocom footer */

.infocom-footer,.infocom-footer * { box-sizing:border-box; }
.infocom-footer { background:var(--infocom-white); border-top:1px solid var(--infocom-border); color:var(--infocom-mid); font-family:"Noto Sans Armenian",Arial,sans-serif; }
.footer-main { max-width:1200px; margin:0 auto; padding:56px 32px 48px; display:grid; grid-template-columns:280px 1fr 260px; gap:48px; }
.footer-brand img { width:130px; height:auto; display:block; }
.footer-nav { display:flex; flex-direction:column; gap:14px; padding-top:4px; }
.footer-nav a { font-size:14.5px; color:var(--infocom-mid); text-decoration:none; transition:color .2s; width:fit-content; }
.footer-nav a:hover { color:var(--infocom-dark); }
.footer-contact { display:flex; flex-direction:column; gap:12px; padding-top:4px; }
.contact-item { display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--infocom-mid); line-height:1.4; }
.contact-item a { color:var(--infocom-mid); text-decoration:none; }
.social-section { margin-top:20px; }.social-label { font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--infocom-muted); margin-bottom:12px; }
.social-icons { display:flex; gap:14px; flex-wrap:wrap; }.social-icon { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; border:1.5px solid var(--infocom-border); color:var(--infocom-mid); text-decoration:none; transition:border-color .2s,color .2s,transform .15s; font-weight:700; }
.social-icon:hover { border-color:var(--infocom-dark); color:var(--infocom-dark); transform:translateY(-2px); }
.footer-bottom { border-top:1px solid var(--infocom-border); max-width:1200px; margin:0 auto; padding:20px 32px; display:flex; align-items:center; justify-content:space-between; }
.footer-copy { font-size:13px; color:var(--infocom-muted); }

/* Integrated Infocom shell */
:root{
  --site-header-height:60px;
  --infocom-dark:#1a1f2e;
  --infocom-mid:#3a4155;
  --infocom-muted:#6b7280;
  --infocom-white:#fff;
  --infocom-border:#e2e4e9;
}
html,body{font-family:"Noto Sans Armenian",Inter,Arial,sans-serif}
.site-header{
  position:sticky!important;
  top:0!important;
  z-index:18000!important;
}
.header-top{height:60px!important}
.header-logo{display:flex;align-items:center;text-decoration:none}

.project-language{
  position:fixed;
  top:74px;
  right:18px;
  z-index:17000;
  display:flex;
  gap:6px;
  padding:5px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:8px;
  background:rgba(20,42,56,.92);
  backdrop-filter:blur(12px);
  box-shadow:0 5px 24px rgba(0,0,0,.2);
}
.project-language button{
  border:1px solid rgba(255,255,255,.35);
  background:transparent;
  color:#fff;
  padding:5px 10px;
  border-radius:4px;
  font-size:13px;
  font-weight:700;
}
.project-language button.is-active{
  background:#91D8F7;
  border-color:#91D8F7;
  color:#0a1524;
}

/* Remove spacing that belonged to the previous custom header */
.layout{padding-top:0!important}
.sidebar{top:60px!important}
.sticky{top:60px!important;height:calc(100vh - 60px)!important}

/* Footer from attached Infocom project */
.infocom-footer{position:relative;z-index:5}
.footer-brand{display:flex;align-items:flex-start}

@media(max-width:900px){
  .footer-main{grid-template-columns:1fr 1fr;gap:36px}
  .footer-brand{grid-column:1/-1}
}
@media (max-width:820px), (max-height:500px) and (pointer:coarse){
  .project-language{top:70px;right:10px}
  .sidebar{top:60px!important}
  .sticky{top:auto!important;height:auto!important}
}
@media(max-width:560px){
  .footer-main{grid-template-columns:1fr;padding:40px 20px 32px}
  .footer-bottom{flex-direction:column;gap:12px;padding:16px 20px}
}

/* ══════════════ FIXES · timeline cards + header language ══════════════ */

/* The card wrapper is a span in the markup; make it a real card box.
   This prevents the rounded background from fragmenting around wrapped text. */
.event-card-top{
  display:flex !important;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  width:100%;
  min-height:116px;
  overflow:hidden;
}

/* Make the button/card geometry predictable at every zoom level. */
.event-header{
  display:block;
  width:100%;
}
.event-title{
  width:100%;
  overflow-wrap:anywhere;
}
.event-date{
  flex:none;
}

/* Keep every point centred under its own card. */
.node-wrap{
  width:100%;
  padding-left:0 !important;
  justify-content:center;
}
.event-foot{
  width:100%;
  padding-left:0 !important;
  justify-content:center;
  text-align:center;
}

/* Language selector now lives inside the Infocom header. */
.site-header .header-top{
  position:relative;
}
.site-header .project-language{
  position:static !important;
  top:auto !important;
  right:auto !important;
  z-index:auto !important;
  margin-left:auto;
  flex:none;
  display:flex;
  gap:6px;
  padding:4px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:8px;
  background:rgba(255,255,255,.06);
  backdrop-filter:none;
  box-shadow:none;
}
.site-header .project-language button{
  min-width:42px;
  border:1px solid rgba(255,255,255,.28);
  background:transparent;
  color:#fff;
  padding:5px 9px;
  border-radius:5px;
  font-size:13px;
  line-height:1.2;
  font-weight:800;
}
.site-header .project-language button.is-active{
  background:#91D8F7;
  border-color:#91D8F7;
  color:#0A1524;
}

/* The archive always sits above the sticky site header. */
.archive-overlay{
  z-index:30000 !important;
}

@media (max-width:820px), (max-height:500px) and (pointer:coarse){
  .site-header .project-language{
    position:static !important;
    margin-left:auto;
  }
  .site-header .project-language button{
    min-width:38px;
    padding:5px 7px;
    font-size:12px;
  }
  .event-card-top{
    min-height:112px;
  }
}

@media(max-width:420px){
  .header-top{
    padding-left:14px !important;
    padding-right:10px !important;
  }
  
  .site-header .project-language{
    gap:4px;
    padding:3px;
  }
  .site-header .project-language button{
    min-width:34px;
    padding:4px 6px;
    font-size:11px;
  }
}

/* ══════════════ FIX · footer must not sit underneath fixed sidebar ══════════════ */

/* Desktop sidebar = 340px */
.infocom-footer{
  margin-left:340px;
  width:calc(100% - 340px);
}

/* Keep the footer's own content centered within the remaining page width. */
.infocom-footer .footer-main,
.infocom-footer .footer-bottom{
  max-width:1200px;
}

/* Medium desktop/tablet sidebar = 292px */
@media(max-width:1100px) and (min-width:821px){
  .infocom-footer{
    margin-left:292px;
    width:calc(100% - 292px);
  }
}

/* Mobile sidebar is no longer fixed as a left column, so footer returns full-width. */
@media (max-width:820px), (max-height:500px) and (pointer:coarse){
  .infocom-footer{
    margin-left:0;
    width:100%;
  }
}


/* ══════════════ Sidebar: election selector + its description (phones: selector only) ══════════════ */
@media (max-width:820px), (max-height:500px) and (pointer:coarse){
  .sidebar-inner{grid-template-columns:1fr}
}

/* Archive pop-up: an empty section is hidden, and leaves no gap above the next one */
.archive-section[hidden]{display:none}
.archive-section[hidden]+.archive-section{margin-top:0}


/* ══════════════ TIMELINE LINE · runs through the points on every screen ══════════════
   Cards in a row share one height, so all points sit on one level; app.js measures
   that level (--line-y) and the line and its tick marks are drawn there. */
.timeline-track{align-items:stretch}
.event{display:flex;flex-direction:column}
.event-header{flex:1 1 auto;display:flex;flex-direction:column}
.event-card-top{flex:1 1 auto}
.timeline-track::before{top:calc(var(--line-y, 221px) - 1px)}
.timeline-track::after{top:calc(var(--line-y, 221px) - 6px)}
.timeline-nav{display:none}

.archive-modal:focus{outline:none}

/* ══════════════ PHONES (and phones held sideways) ══════════════ */
@media (max-width:820px), (max-height:500px) and (pointer:coarse){

  /* No full-screen minimum height: the page is as long as its content */
  .layout{min-height:0}

  /* Sticky election bar: one compact row; 16px text so iPhones don't zoom in */
  .sidebar{padding:8px 14px}
  .selector-label{
    position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
  }
  select{height:44px;font-size:16px;padding:9px 40px 9px 12px;border-radius:12px}

  /* Hero: as tall as its text, so the timeline starts sooner */
  .intro{min-height:0;align-items:flex-start;padding:34px 20px 30px}
  .intro p{margin-top:16px}

  /* Timeline: less empty space, card in the middle highlighted (app.js) */
  .timeline-section{padding:22px 0 28px}
  .viewport{padding:4px 0 6px;scroll-padding-inline:20px}
  .timeline-track{padding:12px 20px 18px}
  .event.active .event-card-top{border-color:rgba(33,64,154,.35);box-shadow:0 14px 30px rgba(10,21,36,.10)}

  /* Previous / next with the position, e.g.  ‹  3 / 6  › */
  .timeline-nav{
    display:flex;align-items:center;justify-content:center;gap:14px;
    margin:2px 20px 14px;
  }
  .timeline-step{
    width:44px;height:44px;border-radius:50%;
    border:1px solid #DBE5EA;background:#fff;color:var(--blue);
    font-size:26px;line-height:1;cursor:pointer;
    box-shadow:0 4px 14px rgba(10,21,36,.06);
  }
  .timeline-step:disabled{opacity:.35;cursor:default}
  .timeline-count{min-width:54px;text-align:center;color:var(--muted);font-size:13px;font-weight:800}
  .timeline-instruction{
    margin:0 auto;max-width:calc(100% - 40px);width:fit-content;
    white-space:normal;line-height:1.35;text-align:left;
  }

  /* Archive sheet: compact header, list-like items, smooth scrolling */
  .archive-modal{height:90dvh;max-height:calc(100dvh - 24px)}
  .archive-header{padding:24px 60px 18px 18px}
  .archive-kicker{display:none}
  .archive-header h2{font-size:clamp(24px,7vw,30px);margin:10px 0 8px}
  .archive-description{font-size:13px;line-height:1.5}
  .archive-close{top:16px;right:14px;width:44px;height:44px}
  .archive-body{
    padding:18px 14px calc(26px + env(safe-area-inset-bottom));
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .archive-section-head{margin-bottom:10px}
  .archive-section-head h3{font-size:17px}
  .archive-grid{gap:8px}
  .archive-tile{
    min-height:0;
    display:grid;
    grid-template-columns:40px minmax(0,1fr);
    grid-template-areas:"icon text" "icon action";
    column-gap:13px;row-gap:6px;
    align-items:start;
    padding:14px;
    border-radius:16px;
  }
  .archive-tile::after{width:60px;height:60px;right:-22px;bottom:-22px}
  .archive-tile:hover{transform:none}
  .archive-tile .tile-top{grid-area:icon}
  .archive-tile > span:nth-child(2){grid-area:text}
  .archive-tile .tile-action{grid-area:action}
  .tile-type{margin-bottom:3px}
  .tile-title{font-size:15px}

  /* Finger-sized language buttons */
  .site-header .project-language button{min-width:44px;min-height:36px;font-size:13px}
}

/* Phones held sideways: the election bar scrolls away instead of staying fixed */
@media (max-height:500px) and (pointer:coarse){
  .sidebar{position:relative;top:auto!important}
  .archive-modal{height:calc(100dvh - 16px)}
}


/* ══════════════ SIDEBAR · list of elections (desktop) ══════════════ */
.mobile-picker{display:none}
.list-label{margin:0 0 10px}
.election-list{display:flex;flex-direction:column;gap:2px}
.el-item{
  border-left:2px solid rgba(255,255,255,.12);
  transition:background .18s ease,border-color .18s ease;
}
.el-item.is-active{
  border-left-color:var(--yellow);
  background:rgba(255,255,255,.055);
  border-radius:0 14px 14px 0;
}
.el-main{
  display:block;width:100%;
  padding:10px 12px 10px 14px;
  border:0;background:none;color:inherit;
  text-align:left;cursor:pointer;
}
.el-date{display:block;color:var(--sky);font-size:11px;font-weight:800}
.el-title{display:block;margin-top:2px;color:#E6EDF2;font-size:14px;font-weight:800;line-height:1.25}
.el-count{display:block;margin-top:3px;color:#698AA1;font-size:11px;font-weight:700}
.el-main:hover .el-title{color:var(--sky)}
.el-item.is-active .el-title{color:#fff}
.el-more{display:none;padding:0 12px 14px 14px}
.el-item.is-active .el-more{display:block}
.el-more p{margin:0;color:#BACBD6;font-size:13px;line-height:1.55}
.el-open{
  margin-top:12px;padding:8px 13px;
  border:0;border-radius:999px;
  background:var(--yellow);color:var(--navy);
  font-size:12px;font-weight:900;cursor:pointer;
}
.el-open:hover{filter:brightness(.94)}
.el-error{margin:0;color:#BACBD6;font-size:13px;line-height:1.55}

/* Totals: elections · years · materials (calculated from data.json) */
.glance{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
  margin-top:22px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.1);
}
.glance:empty{display:none}
.glance b{display:block;color:#fff;font-size:19px;font-weight:900;letter-spacing:-.02em}
.glance span{color:#698AA1;font-size:11px;font-weight:700}

/* Phones: the dropdown instead of the list */
@media (max-width:820px), (max-height:500px) and (pointer:coarse){
  .mobile-picker{display:block}
  .list-label,.election-list,.glance{display:none}
}

/* ══════════════ SIDEBAR · grouped by year (more than 10 elections) ══════════════ */
.el-year + .el-year{margin-top:2px}
.el-year-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;padding:9px 12px 9px 14px;
  border:0;border-left:2px solid rgba(255,255,255,.12);
  background:none;color:#E6EDF2;
  font-size:13px;font-weight:800;text-align:left;cursor:pointer;
}
.el-year-head:hover{color:var(--sky)}
.el-year.is-open .el-year-head{color:#fff}
.el-year-chevron{color:#698AA1;font-size:18px;line-height:1;transition:transform .18s ease}
.el-year.is-open .el-year-chevron{transform:rotate(90deg);color:var(--sky)}
.el-year-items{display:none;padding:2px 0 6px 10px}
.el-year.is-open .el-year-items{display:flex;flex-direction:column;gap:2px}


/* ══════════════ ARCHIVE POP-UP BELOW THE HEADER ══════════════
   The overlay starts under the 60px site header, so the logo and the language
   switcher stay visible and usable while an election's archive is open. */
.archive-overlay{inset:60px 0 0 0 !important}
.archive-modal{height:min(900px, calc(100dvh - 60px - 36px))}

@media (max-width:820px), (max-height:500px) and (pointer:coarse){
  /* bottom sheet: up to just below the header, with a small gap so it still reads as a sheet */
  .archive-modal{height:calc(100dvh - 60px - 14px);max-height:calc(100dvh - 60px - 14px)}
}
@media (max-height:500px) and (pointer:coarse){
  .archive-modal{height:calc(100dvh - 60px - 6px);max-height:calc(100dvh - 60px - 6px)}
}

/* ══════════════ ARMENIAN HERO TITLE · always fits its area ══════════════
   Armenian words are long: "ընտրությունները՝" is about 8.4 times the font size wide,
   and words never break, so at the normal hero size it was wider than phones and
   1024px laptops (the page then zoomed out or scrolled sideways). In Armenian the
   font size is capped at 1/8.7 of the hero's own width (cqi = container width). */
.intro{container-type:inline-size}
html[lang="hy"] .intro h2{font-size:min(clamp(52px,7.4vw,108px), 11.5cqi)}
@media (max-width:820px), (max-height:500px) and (pointer:coarse){
  html[lang="hy"] .intro h2{font-size:min(clamp(46px,15vw,70px), 11.5cqi)}
}
@media (max-width:420px){
  html[lang="hy"] .intro h2{font-size:min(clamp(42px,14vw,58px), 11.5cqi)}
}

/* ══════════════ FOOTER · layout follows the footer's own width ══════════════
   Beside the sidebar the footer is narrower than the screen, so screen-width rules
   picked three columns where they didn't fit (sideways scroll at 1024px and 1101px).
   Two columns below 840px of footer width, one column below 560px. */
.infocom-footer{container-type:inline-size}
@container (max-width:840px){
  .footer-main{grid-template-columns:1fr 1fr;gap:36px}
  .footer-brand{grid-column:1/-1}
}
@container (max-width:560px){
  .footer-main{grid-template-columns:1fr;padding:40px 20px 32px}
}


/* ══════════════ HEADER · live elections app button (opens in a new tab) ══════════════ */
.site-header .live-app-btn{
  margin-left:auto;                       /* button + language switcher sit together on the right */
  display:inline-flex;align-items:center;gap:8px;
  height:36px;padding:0 14px 0 12px;
  border-radius:999px;
  background:var(--yellow);color:var(--navy);
  font-size:13px;font-weight:900;line-height:1;white-space:nowrap;
  text-decoration:none;
  box-shadow:0 4px 14px rgba(255,242,18,.18);
  transform-origin:50% 60%;
  animation:liveShake 4s linear 2s infinite;
}
.site-header .live-app-btn + .project-language{margin-left:0}
.site-header .live-app-btn:hover,
.site-header .live-app-btn:focus-visible{
  animation-play-state:paused;
  filter:brightness(.95);
  outline:2px solid #fff;outline-offset:2px;
}
.live-dot{
  position:relative;flex:none;
  width:8px;height:8px;border-radius:50%;background:#E5322D;
}
.live-dot::after{                          /* soft pulse around the dot */
  content:"";position:absolute;inset:-4px;border-radius:50%;
  background:rgba(229,50,45,.35);
  animation:livePulse 1.6s ease-out infinite;
}
.live-arrow{font-size:12px;opacity:.75}
.live-short{display:none}

/* A short, quick buzz at the start of every 4-second cycle, then still */
@keyframes liveShake{
  0%,20%,100%{transform:rotate(0)}
  2%{transform:rotate(-2deg)}
  4%{transform:rotate(2deg)}
  6%{transform:rotate(-2deg)}
  8%{transform:rotate(2deg)}
  10%{transform:rotate(-2deg)}
  12%{transform:rotate(2deg)}
  14%{transform:rotate(-1.5deg)}
  16%{transform:rotate(1.5deg)}
  18%{transform:rotate(-1deg)}
}
@keyframes livePulse{
  0%{transform:scale(.6);opacity:1}
  100%{transform:scale(1.8);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .site-header .live-app-btn,.live-dot::after{animation:none}
}

/* Narrow screens: short label; the full name stays in the tooltip and for screen readers.
   640px: below that, the full Armenian name doesn't fit beside the logo and language switcher. */
@media (max-width:640px){
  .live-full,.live-arrow{display:none}
  .live-short{display:inline}
  .site-header .live-app-btn{height:32px;padding:0 11px 0 10px;gap:7px;font-size:12px}
}
@media (pointer:coarse){
  .site-header .live-app-btn{min-height:40px}
}

/* Very small phones (up to 380px): compact button and slightly smaller logo, so the header fits down to 320px */
@media (max-width:380px){
  .site-header .header-top{gap:10px}
  .site-header .live-app-btn{padding:0 9px 0 8px;gap:5px;font-size:11px}
  .site-header .header-logo img{width:92px}
}