:root{
  --bg1:#084887;
  --bg2:#4b4b7e;
  --bar:#fbf8ef;
  --bar-line:#9c8f68;
  --ink:#0b2a4a;
  --gold:#d3a94f;
  --gold-dark:#a97c2f;
  --caret:#f2c14e;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
button{font:inherit;color:inherit;}
body{
  background:#05213d;
  font-family:'Inter', system-ui, sans-serif;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 14px;
}
.frame{ width:100%; max-width:900px; container-type: inline-size; }
.credit{
  text-align:center; font-size:11px; color:#7b93ad;
  margin:12px 0 0; font-family:'Inter',sans-serif;
}

.stage{
  position:relative;
  width:100%;
  aspect-ratio: 525 / 250;
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.45);
  background:
    radial-gradient(120% 140% at 78% -20%, var(--bg2) 0%, transparent 55%),
    var(--bg1);
  --u: calc(100cqw / 525);
}

/* ===== Real WaMu "wheat" W logo mark — traced from the source .fla vector data ===== */
.watermark{
  position:absolute;
  display:block;
  left:calc(var(--u) * 180); top:calc(var(--u) * 22);
  width:calc(var(--u) * 184.4);
  height:calc(var(--u) * 171.9);
  opacity:.035;
  pointer-events:none;
  user-select:none;
}

/* ===== Main content area (0 to 211) ===== */
.content-area{
  position:absolute;
  left:0; top:0; right:0;
  height:calc(var(--u) * 211);
  overflow:hidden;
}

/* Giant transparent year-number reel — separate, slow-moving background ghost */
.digit-viewport{
  position:absolute;
  left:0; top:0;
  width:calc(var(--u) * 525);
  height:calc(var(--u) * 211);
  overflow:hidden;
}
.digit-track{
  position:absolute; top:0; left:0; height:100%;
  will-change:transform;
}
.digit-slide{
  position:absolute; top:calc(var(--u) * 30);
  width:calc(var(--u) * 427.25);
  height:calc(var(--u) * 158.65);
  display:flex; align-items:flex-start;
}
.digit-slide span{
  font-family:'Fraunces', serif;
  font-weight:700;
  font-size:calc(var(--u) * 142);
  line-height:1;
  color:#ffffff;
  opacity:.121;
  letter-spacing:-.03em;
  white-space:nowrap;
}

/* Photo + caption filmstrip: real per-year layout, medium easing */
.film-viewport{
  position:absolute; left:0; top:0;
  width:calc(var(--u) * 525); height:calc(var(--u) * 211);
  overflow:hidden;
}
.film-track{
  position:absolute; top:0; left:0; height:100%;
  will-change:transform;
}
.film-slide{
  position:absolute; top:0;
  width:calc(var(--u) * 427.25); height:100%;
}

.film-slide .photo-wrap{
  position:absolute;
  left:calc(var(--u) * 20); top:calc(var(--u) * 44);
  width:calc(var(--u) * 125); height:calc(var(--u) * 125);
}
.film-slide .photo{
  width:100%; height:100%;
  border-radius:calc(var(--u) * 2);
  background:#fbf8ef;
  padding:calc(var(--u) * 4);
  box-shadow:0 calc(var(--u) * 6) calc(var(--u) * 16) rgba(0,0,0,.45);
}
.film-slide .photo img{
  width:100%; height:100%; object-fit:cover; display:block;
  border-radius:calc(var(--u) * 1);
  filter:sepia(.15) contrast(1.02);
}
.film-slide .photo.empty{
  display:flex; align-items:center; justify-content:center;
  padding:calc(var(--u) * 18);
}
.film-slide .photo.empty img{ width:70%; height:70%; opacity:.9; display:block; }

/* Small crisp year number — sits above the photo, with clear breathing room
   before the image starts (not overlapping it) */
.film-slide .year-stamp{
  position:absolute;
  left:calc(var(--u) * 20); top:calc(var(--u) * 6);
  width:calc(var(--u) * 125);
  text-align:right;
  font-family:'Fraunces', serif;
  font-weight:700;
  font-size:calc(var(--u) * 26);
  line-height:1.1;
  color:#ffffff;
  text-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(0,0,0,.35);
  letter-spacing:-.01em;
  pointer-events:none;
}

.film-slide .copy{
  position:absolute;
  left:calc(var(--u) * 157); top:calc(var(--u) * 44);
  width:calc(var(--u) * 230);
}
.film-slide .copy .title{
  font-family:'Fraunces', serif;
  font-weight:700;
  font-size:calc(var(--u) * 17);
  color:var(--gold);
  margin:0 0 calc(var(--u) * 8);
  line-height:1.2;
}
.film-slide .copy .body{
  font-family:'Source Serif 4', serif;
  font-size:calc(var(--u) * 10.5);
  line-height:1.48;
  color:#f4ecd8;
  margin:0;
}

/* ===== Bottom control bar (211 to 250) ===== */
.control-bar{
  position:absolute; left:0; right:0; bottom:0;
  height:calc(var(--u) * 39);
  background:rgba(251,248,239,0.25);
  border-top:calc(var(--u) * 1) solid var(--bar-line);
}
.nav-btn{
  position:absolute; top:calc(var(--u) * -31);
  width:calc(var(--u) * 20); height:calc(var(--u) * 20);
  border-radius:50%;
  border:calc(var(--u) * 1.4) solid var(--gold-dark);
  background:var(--bg1);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  padding:0;
  box-shadow:0 calc(var(--u) * 2) calc(var(--u) * 6) rgba(0,0,0,.4);
}
.nav-btn:hover{ background:var(--bg2); }
.nav-btn:focus-visible{ outline:2px solid var(--caret); outline-offset:2px; }
.nav-btn.prev{ left:calc(var(--u) * 20); }
.nav-btn.next{ left:calc(var(--u) * 44); }
.nav-btn svg{ width:calc(var(--u) * 7); height:calc(var(--u) * 12); display:block; overflow:visible; }
/* nudge to compensate for triangle-icon optical centroid vs geometric box center */
.nav-btn.prev svg{ transform: translateX(calc(var(--u) * -0.6)); }
.nav-btn.next svg{ transform: translateX(calc(var(--u) * 0.6)); }

.tic-row{ position:absolute; left:0; top:0; width:100%; height:100%; }
.tic{
  position:absolute; top:0;
  transform:translateX(-50%);
  width:calc(var(--u) * 16); height:100%;
  background:none; border:none; cursor:pointer; padding:0;
  display:flex; flex-direction:column; align-items:center;
}
.tic .mark{
  width:calc(var(--u) * 1.8); height:calc(var(--u) * 10);
  background:var(--caret); margin-top:0;
}
.tic .lbl{
  position:absolute; top:calc(var(--u) * -12);
  font-family:'Inter',sans-serif;
  font-size:calc(var(--u) * 8.5);
  color:#fff9ea; opacity:0; white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
  transition:opacity .15s; pointer-events:none;
}
.tic:hover .lbl, .tic:focus-visible .lbl{ opacity:1; }
.tic:hover .mark{ background:var(--gold-dark); }
.tic.active .mark{ background:var(--gold-dark); height:calc(var(--u) * 14); }

.pointer-caret{
  position:absolute; top:calc(var(--u) * -6.5); left:0;
  width:0; height:0; will-change:transform; pointer-events:none;
}
.pointer-caret svg{
  display:block; position:absolute;
  left:calc(var(--u) * -6.575); top:0;
  width:calc(var(--u) * 13.15); height:calc(var(--u) * 6.55);
  overflow:visible;
}

/* ===== Decade ruler: white gridlines + centered decade labels ===== */
.decade-row{ position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; }
.decade{
  position:absolute; top:0; bottom:0;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center;
}
.decade .gridline{
  width:calc(var(--u) * 1);
  height:calc(var(--u) * 26);
  background:rgba(255,255,255,.55);
}
.decade .dlabel{
  margin-top:auto;
  margin-bottom:calc(var(--u) * 3);
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:calc(var(--u) * 8);
  letter-spacing:.02em;
  color:rgba(255,255,255,.8);
  white-space:nowrap;
}

/* ===== Intro splash title, from the source .fla, fades on first interaction ===== */
.intro-title{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  background:
    linear-gradient(180deg, rgba(5,33,61,.55), rgba(5,33,61,.72));
  transition:opacity .6s ease;
  pointer-events:none;
}
.intro-title span{
  font-family:'Fraunces', serif;
  font-weight:700;
  font-size:calc(var(--u) * 34);
  color:#ffffff;
  text-shadow:0 calc(var(--u) * 3) calc(var(--u) * 12) rgba(0,0,0,.5);
  padding:0 calc(var(--u) * 20);
}
.intro-title.hidden{ opacity:0; }

.stage:focus{ outline:none; }