:root{
    --navy-deep:#001d3d;
    --navy-mid:#003566;
    --panel-blue:#00152c;
    --gold-dark:#cca000;
    --yellow:#FFC72C;
    --paper:#ebebeb;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:#000a16;
    font-family:"Barlow","Segoe UI",Verdana,sans-serif;
    color:var(--paper);
  }

  .site-header{
    width:100%;
    background:var(--navy-deep);
  }

  .banner{
    display:block;
    width:100%;
    height:auto;
  }

  .menu-bar{
    position:relative;
    background:var(--navy-deep);
    min-height:90px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding:0 24px;
    border-bottom:3px solid var(--gold-dark);
  }

  .logo{
    position:absolute;
    left:198px;
    top:-52px;
    width:310px;
    height:auto;
    z-index:2;
  }

  .main-menu{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    list-style:none;
    margin:0;
    padding:0;
  }
  .main-menu a{
    display:block;
    text-decoration:none;
    color:var(--paper);
    font-size:17px;
    font-weight:bold;
    letter-spacing:0.4px;
    padding:7px 13px;
    border:2px solid var(--yellow);
    border-radius:6px;
  }
  .main-menu a:hover,
  .main-menu a:focus-visible{
    background:var(--yellow);
    color:var(--navy-deep);
  }

  .sub-bar{
    background:var(--navy-mid);
    padding:0 24px;
  }
  .sub-menu{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:28px;
    list-style:none;
    margin:0 auto;
    padding:7px 0;
    max-width:1200px;
  }
  .sub-menu a{
    text-decoration:none;
    color:var(--yellow);
    font-size:14px;
    letter-spacing:0.6px;
    text-transform:uppercase;
  }
  .sub-menu a:hover,
  .sub-menu a:focus-visible{
    color:var(--paper);
  }

  /* picture tiles in the sub bar */
  .sub-tiles{
    gap:12px;
    padding:10px 0;
    max-width:1400px;
  }
  .sub-tiles li{
    flex:0 0 auto;
    width:84px;
  }
  .sub-tiles a{
    position:relative;
    display:block;
    overflow:hidden;
    border-radius:8px;
    transition:transform 0.18s ease;
  }
  .sub-tiles img{
    display:block;
    width:100%;
    height:auto;
  }
  .sub-tiles a::after{
    content:"";
    position:absolute;
    top:0;
    left:-130%;
    width:60%;
    height:100%;
    background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0) 100%);
    transform:skewX(-18deg);
  }
  .sub-tiles a:hover,
  .sub-tiles a:focus-visible{
    transform:translateY(-5px);
  }
  .sub-tiles a:hover::after,
  .sub-tiles a:focus-visible::after{
    animation:tile-shine 0.65s ease-out;
  }
  @keyframes tile-shine{
    from{ left:-130%; }
    to{ left:130%; }
  }
  @media (prefers-reduced-motion:reduce){
    .sub-tiles a{ transition:none; }
    .sub-tiles a:hover::after{ animation:none; }
  }
  @media (max-width:760px){
    .sub-tiles{
      gap:7px;
      padding:10px 0;
      justify-content:center;
    }
  }

  a:focus-visible{outline:3px solid var(--yellow);outline-offset:2px;}

  @media (max-width:760px){
    .menu-bar{
      flex-direction:column;
      align-items:flex-start;
      justify-content:flex-end;
      padding:124px 16px 16px;
      min-height:0;
    }
    .logo{width:168px;left:16px;top:8px;}
    .main-menu{gap:12px;}
    .main-menu a{font-size:15px;padding:6px 10px;}
    .sub-menu{
      gap:8px 14px;
      justify-content:center;
      padding:8px 10px;
    }
    .sub-menu a{
      font-size:12px;
      letter-spacing:0.3px;
    }
  }

  .page{
    max-width:1000px;
    margin:0 auto;
    padding:18px 24px 64px;
  }
  .page h1{
    margin:0 0 20px;
    font-size:34px;
    color:var(--yellow);
    letter-spacing:0.5px;
  }
  .era{
    margin:0 0 40px;
  }
  .era-head{
    margin:0 0 16px;
    padding-bottom:8px;
    border-bottom:2px solid var(--gold-dark);
    font-family:"Oswald","Barlow",sans-serif;
    font-weight:600;
    font-size:26px;
    color:var(--yellow);
    letter-spacing:0.5px;
  }
  .page-intro{
    margin:0 0 26px;
    text-align:center;
    font-family:"Oswald","Barlow",sans-serif;
    font-weight:600;
    font-size:24px;
    line-height:1.4;
    color:var(--yellow);
    letter-spacing:0.5px;
  }
  .video-frame{
    position:relative;
    width:100%;
    padding-top:56.25%;
    background:#000000;
    border:3px solid var(--gold-dark);
  }
  .video-frame iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border:0;
  }

  @media (max-width:760px){
    .page{padding:24px 16px 48px;}
    .page h1{font-size:26px;}
    .page-intro{font-size:19px;}
    .era-head{font-size:21px;}
  }

  .video-next{
    margin-top:28px;
  }

  .store-art{
    display:block;
    width:100%;
    height:auto;
    margin:0 auto 32px;
  }

  .page-wide{
    max-width:1400px;
  }
  .columns{
    display:grid;
    grid-template-columns:1fr 2fr 1fr;
    gap:20px;
    align-items:start;
  }
  .panel{
    background:var(--panel-blue);
    border:1px solid var(--gold-dark);
  }
  .panel-head{
    margin:0;
    padding:12px 16px;
    font-size:16px;
    letter-spacing:0.6px;
    text-transform:uppercase;
    color:var(--yellow);
    background:var(--navy-deep);
    border-bottom:1px solid var(--gold-dark);
  }
  .panel-body{
    padding:16px;
    min-height:340px;
  }

  @media (max-width:900px){
    .columns{
      grid-template-columns:1fr;
    }
    .panel-body{min-height:160px;}
    .col-mid{order:1;}
    .col-left{order:2;}
    .col-right{order:3;}
  }

  .miss-list{
    margin:0;
    padding:0 0 0 24px;
    list-style:decimal;
  }
  .miss-list li{
    color:var(--paper);
    font-size:15px;
    padding:7px 0;
    border-bottom:1px solid rgba(204,160,0,0.35);
  }
  .miss-list li:last-child{
    border-bottom:0;
  }
  .miss-list li::marker{
    color:var(--yellow);
  }

  .menu-right{
    display:flex;
    align-items:center;
    gap:22px;
    margin-left:auto;
  }
  .main-menu a,
  .sub-menu a,
  .panel-head,
  .page h1{
    font-family:"Oswald","Barlow",sans-serif;
    font-weight:600;
  }
  .search{
    display:flex;
    align-items:center;
    border:1px solid var(--gold-dark);
  }
  .search input{
    border:0;
    background:var(--navy-mid);
    color:var(--paper);
    font-family:"Barlow",sans-serif;
    font-size:14px;
    padding:9px 12px;
    width:190px;
  }
  .search input::placeholder{
    color:#9fb4cc;
  }
  .search input:focus{
    outline:2px solid var(--yellow);
    outline-offset:-2px;
  }
  .search button{
    border:0;
    border-left:1px solid var(--gold-dark);
    background:var(--gold-dark);
    color:var(--navy-deep);
    font-family:"Oswald",sans-serif;
    font-weight:600;
    font-size:13px;
    letter-spacing:0.6px;
    text-transform:uppercase;
    padding:10px 14px;
    cursor:pointer;
  }
  .search button:hover{
    background:var(--yellow);
  }

  .sub-bar{
    border-bottom:1px solid var(--gold-dark);
  }
  .page,
  .page-wide{
    border-top:0;
  }
  .panel + .panel{
    border-left:1px solid var(--gold-dark);
  }

  @media (max-width:900px){
    .menu-right{
      margin-left:0;
      flex-direction:column;
      align-items:flex-start;
      gap:14px;
      width:100%;
    }
    .search{width:100%;}
    .search input{flex:1;width:auto;}
    .panel + .panel{border-left:1px solid var(--gold-dark);}
  }

  .announce{
    background:#000a16;
    border-bottom:2px solid var(--gold-dark);
    color:var(--yellow);
    font-family:"Oswald","Barlow",sans-serif;
    font-size:14px;
    letter-spacing:0.6px;
    text-align:center;
    padding:10px 16px;
  }
  .banner{
    border-bottom:5px solid var(--yellow);
  }
  .search{
    border:2px solid var(--yellow);
  }
  .search button{
    background:var(--yellow);
    border-left:0;
    font-size:14px;
    padding:10px 18px;
  }
  .search button:hover{
    background:#ffd75e;
  }

  .main-menu{
    flex-wrap:nowrap;
  }
  .menu-right{
    flex:0 0 auto;
  }
  @media (max-width:1920px){
    .logo{width:270px;left:150px;top:-44px;}
  }
  @media (max-width:1860px){
    .logo{width:215px;left:90px;top:-34px;}
    .main-menu{gap:20px;}
  }
  @media (max-width:1660px){
    .logo{width:170px;left:34px;top:-24px;}
    .main-menu{gap:16px;}
  }
  @media (max-width:1500px){
    .logo{width:155px;left:20px;top:-22px;}
    .main-menu{gap:14px;}
    .main-menu a{font-size:15px;}
  }
  @media (max-width:1580px) and (min-width:761px){
    .menu-bar{
      flex-direction:column;
      align-items:flex-start;
      justify-content:flex-end;
      padding:120px 20px 14px;
      min-height:0;
    }
    .menu-right{margin-left:0;width:100%;}
    .main-menu{flex-wrap:wrap;}
    .logo{top:10px;}
  }

  @media (max-width:760px){
    .main-menu{flex-wrap:wrap;}
    .menu-right{width:100%;}
  }

  /* mobile header: small logo tucked up, search beside it */
  @media (max-width:760px){
    .menu-bar{
      padding:64px 12px 14px;
    }
    .logo{
      width:132px;
      left:10px;
      top:-26px;
    }
    .search{
      position:absolute;
      right:12px;
      top:14px;
      width:calc(100% - 164px);
      border-width:2px;
      border-color:var(--yellow);
    }
    .search input{
      font-size:13px;
      padding:8px 10px;
      min-width:0;
    }
    .search button{
      padding:9px 11px;
      font-size:12px;
      white-space:nowrap;
    }
    .main-menu{
      display:grid;
      grid-template-columns:repeat(5,1fr);
      gap:7px;
      width:100%;
    }
    .main-menu a{
      font-size:13px;
      padding:7px 4px;
      text-align:center;
    }
  }

  .feature-img{
    display:block;
    width:100%;
    height:auto;
    border:1px solid var(--gold-dark);
  }


  .logo{
    filter:
      drop-shadow(2px 2px 0 var(--gold-dark))
      drop-shadow(-2px -2px 0 var(--gold-dark))
      drop-shadow(2px -2px 0 var(--gold-dark))
      drop-shadow(-2px 2px 0 var(--gold-dark));
    animation:logo-wobble 5s ease-in-out infinite;
    transform-origin:50% 50%;
  }
  @keyframes logo-wobble{
    0%, 86%, 100%{ transform:rotate(0deg); }
    89%{ transform:rotate(-2.5deg); }
    92%{ transform:rotate(2.5deg); }
    95%{ transform:rotate(-1.2deg); }
    98%{ transform:rotate(0.6deg); }
  }
  @media (prefers-reduced-motion:reduce){
    .logo{animation:none;}
  }

  .feature{
    display:grid;
    grid-template-columns:55% 1fr;
    gap:18px;
    align-items:start;
  }
  .feature-title{
    margin:0 0 10px;
    font-family:"Oswald","Barlow",sans-serif;
    font-weight:600;
    font-size:24px;
    color:var(--yellow);
    line-height:1.2;
  }
  .feature-blurb{
    margin:0 0 18px;
    font-size:15px;
    line-height:1.7;
    color:var(--paper);
  }
  .feature-btn{
    display:inline-block;
    background:#FFC72C;
    color:#DA291C;
    text-decoration:none;
    font-family:"Oswald","Barlow",sans-serif;
    font-weight:600;
    font-size:18px;
    letter-spacing:0.8px;
    text-transform:uppercase;
    padding:12px 30px;
    border:5px solid #DA291C;
    box-shadow:inset 0 0 0 6px #FFC72C, inset 0 0 0 9px #DA291C;
  }
  .feature-btn:hover,
  .feature-btn:focus-visible{
    background:#DA291C;
    color:#FFC72C;
    border-color:#FFC72C;
    box-shadow:inset 0 0 0 6px #DA291C, inset 0 0 0 9px #FFC72C;
  }

  @media (max-width:900px){
    .feature{grid-template-columns:1fr;}
  }

  .poll-img{
    display:block;
    max-width:100%;
    max-height:500px;
    width:auto;
    height:auto;
    margin:0 auto 12px;
  }
  .poll-quote{
    margin:0 0 16px;
    font-size:21px;
    line-height:1.5;
    text-align:center;
    color:var(--paper);
  }

  .feature-two{
    margin-top:26px;
    padding-top:26px;
    border-top:1px solid rgba(204,160,0,0.45);
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
    align-items:start;
  }
  .feature-two .feature-title{
    font-size:21px;
  }
  .feature-two-img{
    display:block;
    width:100%;
    height:auto;
    margin:0 0 12px;
  }
  .feature-two .feature-blurb{
    margin:0;
  }

  @media (max-width:900px){
    .feature-two{grid-template-columns:1fr;}
  }

  .popup{
    position:fixed;
    inset:0;
    z-index:9000;
    background:rgba(0,8,20,0.88);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
  }
  .popup[hidden]{display:none;}
  .popup-inner{
    position:relative;
    max-width:760px;
    width:100%;
    background:var(--navy-deep);
    border:3px solid var(--yellow);
  }
  .popup-img{
    display:block;
    width:100%;
    height:auto;
  }
  .popup-caption{
    margin:0;
    background:#FFC72C;
    color:#DA291C;
    font-family:"Oswald","Barlow",sans-serif;
    font-weight:600;
    font-size:26px;
    letter-spacing:1px;
    text-transform:uppercase;
    text-align:center;
    padding:14px 16px;
  }
  .popup-close{
    position:absolute;
    top:-3px;
    right:-3px;
    z-index:2;
    background:var(--yellow);
    color:var(--navy-deep);
    border:0;
    width:44px;
    height:44px;
    font-size:30px;
    line-height:1;
    cursor:pointer;
  }
  .popup-close:hover,
  .popup-close:focus-visible{
    background:#ffd75e;
  }

  @media (max-width:700px){
    .popup{padding:14px;}
    .popup-caption{font-size:20px;padding:11px 12px;}
  }

  .panel-wide{
    margin-top:20px;
  }
  .miss-grid{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px 20px;
  }
  .miss-grid li{
    color:var(--paper);
    font-size:15px;
    padding:9px 12px;
    background:var(--navy-deep);
    border:1px solid var(--gold-dark);
  }

  @media (max-width:900px){
    .miss-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:520px){
    .miss-grid{grid-template-columns:1fr;}
  }

  .announce-line{
    display:inline-block;
    opacity:1;
    transition:opacity 0.6s ease;
  }
  .announce-line.is-out{
    opacity:0;
  }
  @media (prefers-reduced-motion:reduce){
    .announce-line{transition:none;}
  }

  .panel-wide .panel-body{
    min-height:0;
  }

  .top-count{
    float:right;
    color:var(--yellow);
    font-weight:600;
  }

  .col-right{
    display:flex;
    flex-direction:column;
    gap:20px;
  }
  .col-right .panel-body{
    min-height:0;
    padding-bottom:24px;
  }
  .miss-list.plain{
    list-style:none;
    padding-left:0;
  }


  .doyou{
    position:absolute;
    top:50%;
    left:540px;
    transform:translateY(-50%) rotate(-5deg);
    font-family:"Oswald","Barlow",sans-serif;
    font-weight:600;
    font-size:34px;
    letter-spacing:0.5px;
    color:var(--yellow);
    white-space:nowrap;
    text-decoration:none;
  }
  .doyou:hover,
  .doyou:focus-visible{
    text-decoration:underline;
  }
  @media (max-width:1920px){ .doyou{ left:450px; } }
  @media (max-width:1860px){ .doyou{ left:335px; } }
  @media (max-width:1780px){ .doyou{ display:none; } }


  .scene-img{
    display:block;
    width:100%;
    height:auto;
    border:3px solid var(--gold-dark);
  }
  .choices{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-top:20px;
  }
  .choice-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--yellow);
    color:#DA291C;
    text-decoration:none;
    text-align:center;
    font-family:"Baloo 2","Barlow",sans-serif;
    font-weight:800;
    font-size:25px;
    letter-spacing:0.3px;
    padding:20px 18px;
    border:3px solid #DA291C;
  }
  .choice-btn:hover,
  .choice-btn:focus-visible{
    background:#DA291C;
    color:#FFC72C;
    border-color:#FFC72C;
  }
  @media (max-width:700px){
    .choices{grid-template-columns:1fr;}
    .choice-btn{font-size:20px;padding:16px;}
  }

  .choices-three{
    grid-template-columns:repeat(3,1fr);
  }
  @media (max-width:900px){
    .choices-three{grid-template-columns:1fr;}
  }

  .story-woodstock .choice-btn{
    background:#8CC63F;
    color:#1B4F8C;
    border-color:#1B4F8C;
  }
  .story-woodstock .choice-btn:hover,
  .story-woodstock .choice-btn:focus-visible{
    background:#1B4F8C;
    color:#8CC63F;
    border-color:#8CC63F;
  }

  .choice-btn.is-todo{
    opacity:0.45;
    cursor:default;
  }
  .story-restart{
    margin:20px 0 0;
    text-align:center;
  }
  .story-restart a{
    color:var(--yellow);
    font-family:"Oswald","Barlow",sans-serif;
    font-size:15px;
    letter-spacing:0.6px;
    text-transform:uppercase;
  }

  .col-left{
    display:flex;
    flex-direction:column;
    gap:20px;
  }
  .col-left .panel-body{
    min-height:0;
    padding-bottom:24px;
  }
  .miss-list.plain a{
    color:var(--paper);
    text-decoration:none;
  }
  .miss-list.plain a:hover,
  .miss-list.plain a:focus-visible{
    color:var(--yellow);
    text-decoration:underline;
  }

  /* menu spreads evenly across the row, search stays at the far right */
  .menu-right{
    flex:1;
    margin-left:660px;
    margin-right:0;
  }
  .main-menu{
    flex:1;
    justify-content:space-between;
    gap:14px;
  }
  @media (max-width:1920px){ .menu-right{ margin-left:570px; } }
  @media (max-width:1860px){ .menu-right{ margin-left:455px; } }
  @media (max-width:1780px){ .menu-right{ margin-left:280px; } }
  @media (max-width:1660px){ .menu-right{ margin-left:190px; } }
  @media (max-width:1580px){
    .menu-right{ margin-left:0; }
    .main-menu{ justify-content:flex-start; gap:16px; }
  }

  /* animated story scene: slow pan across the room, then push into the guard */
  .scene-anim{
    position:relative;
    width:100%;
    aspect-ratio:4/3;
    overflow:hidden;
    background:#000000;
    border:3px solid var(--gold-dark);
  }
  .scene-anim img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .anim-pan{
    animation:scene-pan 9s ease-in-out forwards;
  }
  .anim-zoom{
    opacity:0;
    z-index:2;
    transform-origin:48% 24%;
    animation:scene-appear 1s ease forwards 8.4s,
              scene-zoom 5s ease-in-out forwards 9s;
  }
  @keyframes scene-pan{
    from{ transform:scale(1.3) translateX(-8%); }
    to{ transform:scale(1.3) translateX(8%); }
  }
  @keyframes scene-zoom{
    from{ transform:scale(1); }
    to{ transform:scale(2); }
  }
  @keyframes scene-appear{
    from{ opacity:0; }
    to{ opacity:1; }
  }
  .scene-caption{
    margin:18px 0 0;
    font-family:"Oswald","Barlow",sans-serif;
    font-weight:600;
    font-size:26px;
    letter-spacing:0.6px;
    text-align:center;
    color:var(--yellow);
  }
  .scene-caption-late{
    opacity:0;
    animation:scene-appear 1.2s ease forwards 13.5s;
  }
  @media (prefers-reduced-motion:reduce){
    .anim-pan{ animation:none; }
    .anim-zoom{ animation:none; opacity:1; }
    .scene-caption-late{ animation:none; opacity:1; }
  }

  /* popup sits in the middle of the scene picture, not the whole screen */
  .scene-wrap{
    position:relative;
  }
  .scene-popup{
    position:absolute;
    inset:0;
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(0,8,20,0.55);
    animation:scene-appear 0.4s ease;
  }
  .scene-popup[hidden]{
    display:none;
  }
  .scene-popup .popup-inner{
    max-width:620px;
  }

  /* what do you miss? box */
  .col-mid{
    display:flex;
    flex-direction:column;
    gap:20px;
  }
  .miss-form{
    display:flex;
    border:2px solid var(--yellow);
    margin:0 0 16px;
  }
  .miss-form input{
    flex:1;
    min-width:0;
    border:0;
    background:var(--navy-mid);
    color:var(--paper);
    font-family:"Barlow",sans-serif;
    font-size:15px;
    padding:11px 14px;
  }
  .miss-form input::placeholder{
    color:#9fb4cc;
  }
  .miss-form input:focus{
    outline:2px solid var(--yellow);
    outline-offset:-2px;
  }
  .miss-form button{
    border:0;
    background:var(--yellow);
    color:var(--navy-deep);
    font-family:"Oswald","Barlow",sans-serif;
    font-weight:600;
    font-size:14px;
    letter-spacing:0.6px;
    text-transform:uppercase;
    padding:11px 20px;
    cursor:pointer;
  }
  .miss-form button:hover{
    background:#ffd75e;
  }
  .miss-form[hidden]{
    display:none;
  }
  .miss-name{
    margin-top:10px;
  }
  .miss-feed{
    margin-bottom:16px;
  }
  .miss-feed li{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:6px 12px;
    padding:9px 0;
  }
  .miss-by{
    margin-left:auto;
    color:#9fb4cc;
    font-size:13px;
    white-space:nowrap;
  }
  .miss-when{
    color:#7f93b8;
    font-size:12px;
    margin-left:8px;
  }

  /* pin the miss form to the bottom of its box */
  #what-do-you-miss .panel-body{
    display:flex;
    flex-direction:column;
  }
  #what-do-you-miss #miss-form{
    margin-top:auto;
  }

  /* one button on its own sits centred */
  .choices-one{
    grid-template-columns:auto;
    justify-content:center;
  }
  .choices-one .choice-btn{
    min-width:420px;
    padding-left:44px;
    padding-right:44px;
    white-space:nowrap;
  }
  @media (max-width:700px){
    .choices-one .choice-btn{
      min-width:0;
      white-space:normal;
      padding-left:16px;
      padding-right:16px;
    }
  }
  /* story popup wording in the deep red */
  .scene-popup .popup-caption{
    color:#DA291C;
  }

  /* yellow bar with Ronnie on the end */
  .popup-ron{
    position:relative;
    width:auto;
    max-width:none;
    margin-right:60px;
    background:#F7DE38;
    border:5px solid #DA291C;
    border-radius:14px;
    box-shadow:6px 6px 0 rgba(120,10,10,0.85);
  }
  .popup-ron .popup-caption{
    background:transparent;
    color:#DA291C;
    text-align:center;
    font-size:30px;
    line-height:1.3;
    white-space:nowrap;
    padding:28px 124px 28px 44px;
  }
  .popup-ron .popup-close{
    top:-16px;
    left:-16px;
    right:auto;
    width:36px;
    height:36px;
    font-size:22px;
    border-radius:50%;
    border:3px solid #DA291C;
  }
  .popup-face{
    position:absolute;
    right:-60px;
    top:50%;
    width:170px;
    height:auto;
    display:block;
    transform-origin:50% 50%;
    animation:face-pulse 1.6s ease-in-out infinite;
  }
  .popup-ron.popup-bigface{
    margin-right:80px;
  }
  .popup-ron.popup-bigface .popup-caption{
    padding-left:52px;
    padding-right:164px;
  }
  .popup-bigface .popup-face{
    right:-80px;
    width:230px;
  }
  @keyframes face-pulse{
    0%, 100%{ transform:translateY(-50%) scale(1); }
    50%{ transform:translateY(-50%) scale(1.09); }
  }
  @media (prefers-reduced-motion:reduce){
    .popup-face{ animation:none; transform:translateY(-50%); }
  }
  @media (max-width:700px){
    .popup-ron{
      margin-right:34px;
    }
    .popup-ron .popup-caption{
      font-size:15px;
      padding:18px 84px 18px 28px;
    }
    .popup-face{
      right:-34px;
      width:110px;
    }
    .popup-ron.popup-bigface{
      margin-right:44px;
    }
    .popup-ron.popup-bigface .popup-caption{
      padding-left:32px;
      padding-right:102px;
    }
    .popup-bigface .popup-face{
      right:-44px;
      width:140px;
    }
  }

  /* the identify question popup */
  .choices button.choice-btn{
    width:100%;
    cursor:pointer;
  }
  .ask-options{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    padding:16px;
  }
  .ask-btn{
    display:block;
    background:var(--yellow);
    color:#DA291C;
    text-decoration:none;
    text-align:center;
    font-family:"Baloo 2","Barlow",sans-serif;
    font-weight:800;
    font-size:19px;
    padding:13px 12px;
    border:3px solid #DA291C;
  }
  .ask-btn:hover,
  .ask-btn:focus-visible{
    background:#ffd75e;
  }
  @media (max-width:700px){
    .ask-options{grid-template-columns:1fr;gap:10px;padding:12px;}
    .ask-btn{font-size:16px;padding:11px;}
  }

  /* quick zoom, then zoom into the second picture */
  .anim-first-zoom{
    transform-origin:50% 50%;
    animation:scene-zoom-in 3.6s ease-in forwards;
  }
  @keyframes scene-zoom-in{
    from{ transform:scale(1); }
    to{ transform:scale(1.6); }
  }
  .scene-anim.is-fast .anim-zoom{
    transform-origin:30% 58%;
    animation:scene-appear 0.5s ease forwards 3.4s,
              scene-zoom 3.5s ease-in-out forwards 3.7s;
  }
  @media (prefers-reduced-motion:reduce){
    .anim-first-zoom{ animation:none; }
  }

  /* start close, pull back out */
  .anim-zoomout{
    transform-origin:50% 50%;
    animation:scene-zoom-out 5s ease-out forwards;
  }
  @keyframes scene-zoom-out{
    from{ transform:scale(1.9); }
    to{ transform:scale(1); }
  }
  @media (prefers-reduced-motion:reduce){
    .anim-zoomout{ animation:none; }
  }

  /* chewing: zoom in, then flick between the two mouth shots three times each */
  .scene-anim.is-chew .chew-base{
    transform-origin:50% 45%;
    animation:scene-zoom-in 2s ease-in forwards;
  }
  .chew-a{
    opacity:0;
    z-index:2;
    animation:scene-appear 0.25s ease forwards 2s;
  }
  .chew-b{
    opacity:0;
    z-index:3;
    animation:chew-flick 0.6s linear 2.25s 3 forwards;
  }
  @keyframes chew-flick{
    0%{ opacity:0; }
    49.9%{ opacity:0; }
    50%{ opacity:1; }
    99.9%{ opacity:1; }
    100%{ opacity:0; }
  }
  @media (prefers-reduced-motion:reduce){
    .scene-anim.is-chew .chew-base{ animation:none; }
    .chew-a{ animation:none; opacity:1; }
    .chew-b{ animation:none; }
  }

  /* gazing around: slow drift left to right while breathing in and out */
  .anim-gaze{
    transform-origin:50% 50%;
    animation:scene-gaze 16s ease-in-out infinite;
  }
  @keyframes scene-gaze{
    0%{   transform:scale(1.16) translateX(-4%); }
    25%{  transform:scale(1.26) translateX(1%); }
    50%{  transform:scale(1.14) translateX(5%); }
    75%{  transform:scale(1.24) translateX(-1%); }
    100%{ transform:scale(1.16) translateX(-4%); }
  }
  @media (prefers-reduced-motion:reduce){
    .anim-gaze{ animation:none; }
  }

  /* the trip: picture shakes, drifts side to side and breathes in and out */
  .scene-anim.is-trip{
    animation:trip-shake 0.22s ease-in-out infinite;
  }
  .anim-trip{
    transform-origin:50% 50%;
    animation:trip-drift 7s ease-in-out infinite;
  }
  @keyframes trip-shake{
    0%{   transform:translate(0, 0) rotate(0deg); }
    25%{  transform:translate(-4px, 2px) rotate(-0.4deg); }
    50%{  transform:translate(3px, -3px) rotate(0.4deg); }
    75%{  transform:translate(-2px, -1px) rotate(-0.2deg); }
    100%{ transform:translate(0, 0) rotate(0deg); }
  }
  @keyframes trip-drift{
    0%{   transform:scale(1.18) translateX(-5%); }
    25%{  transform:scale(1.4)  translateX(3%); }
    50%{  transform:scale(1.12) translateX(6%); }
    75%{  transform:scale(1.36) translateX(-3%); }
    100%{ transform:scale(1.18) translateX(-5%); }
  }

  /* things you are carrying, bottom left of the picture */
  .scene-bag{
    position:absolute;
    left:16px;
    bottom:16px;
    z-index:4;
    display:flex;
    gap:8px;
    align-items:flex-end;
    pointer-events:none;
  }
  .scene-bag img{
    width:78px;
    height:auto;
    display:block;
    filter:drop-shadow(0 3px 6px rgba(0,0,0,0.6));
  }
  .pickup-fly{
    position:absolute;
    left:50%;
    top:50%;
    z-index:6;
    width:300px;
    height:auto;
    margin:0;
    opacity:0;
    transform:translate(-50%, -50%) scale(0.4);
    transform-origin:50% 50%;
    transition:opacity 0.45s ease, transform 0.55s ease;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,0.7));
    pointer-events:none;
  }
  .pickup-fly.is-in{
    opacity:1;
    transform:translate(-50%, -50%) scale(1);
  }
  .pickup-fly.is-away{
    left:16px;
    top:auto;
    bottom:16px;
    transform:translate(0, 0) scale(0.26);
    transform-origin:0 100%;
    transition:all 1s ease-in-out;
  }
  @media (max-width:700px){
    .scene-bag img{ width:52px; }
    .pickup-fly{ width:180px; }
  }
  @media (prefers-reduced-motion:reduce){
    .pickup-fly{ transition:none; }
  }

  /* fade to black between scenes */
  .fade-sheet{
    position:absolute;
    inset:0;
    z-index:8;
    background:#000000;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.7s ease;
  }
  .fade-sheet.is-on{
    opacity:1;
  }

  @media (prefers-reduced-motion:reduce){
    .scene-anim.is-trip{ animation:none; }
    .anim-trip{ animation:none; }
  }

  /* third picture in a scene fades in after the second zoom */
  .anim-third{
    opacity:0;
    z-index:3;
    animation:scene-appear 0.7s ease forwards 7.2s;
  }
  @media (prefers-reduced-motion:reduce){
    .anim-third{ animation:none; opacity:1; }
  }

  .popup-inner.popup-plain .popup-caption{
    text-transform:none;
  }

  /* coming soon pages */
  .soon{
    text-align:center;
    padding:20px 0 50px;
  }
  .soon-line{
    font-family:"Oswald","Barlow",sans-serif;
    font-size:24px;
    letter-spacing:0.6px;
    color:var(--yellow);
    margin:0 0 26px;
  }
  .soon-img{
    display:block;
    max-width:100%;
    max-height:420px;
    width:auto;
    margin:0 auto 14px;
    border:3px solid var(--yellow);
  }
  .soon-cap{
    font-size:18px;
    margin:0 0 30px;
    color:var(--paper);
  }
  .soon-back{
    margin:0;
    font-size:15px;
  }

  /* woodstock speech bubbles */
  .story-woodstock .popup-caption{
    background:#8CC63F;
  }
  .story-woodstock .scene-popup .popup-caption{
    color:#1B4F8C;
  }
  .story-woodstock .popup-inner{
    border-color:#8CC63F;
  }
  .story-woodstock .popup-ron{
    background:#8CC63F;
    border-color:#1B4F8C;
  }
  .story-woodstock .popup-ron .popup-caption{
    background:transparent;
  }
  .story-woodstock .popup-close{
    color:#1B4F8C;
    background:#8CC63F;
  }
  .story-woodstock .popup-ron .popup-close{
    border-color:#1B4F8C;
  }

  /* let the Ronnie bar be as wide as its sentence needs */
  .scene-popup .popup-ron{
    max-width:100%;
  }
  .scene-popup .popup-ron .popup-caption{
    font-size:clamp(15px, 2.5vw, 30px);
  }

  /* buttons wait for the popup */
  .choices-late{
    opacity:0;
    animation:scene-appear 0.8s ease forwards;
  }
  @media (prefers-reduced-motion:reduce){
    .choices-late{ animation:none; opacity:1; }
  }

  /* keep plain popup wording clear of the close button */
  .scene-popup .popup-inner .popup-caption{
    padding:20px 56px;
  }
  .scene-popup .popup-ron .popup-caption{
    padding:28px 180px 28px 40px;
  }

  /* terms page */
  .terms-head{
    margin:28px 0 8px;
    font-family:"Oswald","Barlow",sans-serif;
    font-weight:600;
    font-size:20px;
    letter-spacing:0.5px;
    color:var(--yellow);
  }
  .terms-text{
    margin:0 0 14px;
    font-size:16px;
    line-height:1.7;
    max-width:760px;
  }
  .terms-text a{
    color:var(--yellow);
  }

  /* footer */
  .site-footer{
    background:var(--navy-deep);
    border-top:3px solid var(--gold-dark);
    text-align:center;
    padding:34px 20px 0;
  }
  .footer-bar{
    margin:26px -20px 0;
    padding:18px 20px 20px;
    background:#03101F;
    border-top:1px solid var(--gold-dark);
  }
  .footer-ticket{
    display:inline-block;
    margin:0 0 14px;
    padding:8px 24px;
    background:#1B2A6B;
    border:3px solid var(--yellow);
    transform:rotate(-5deg);
    font-family:"Oswald","Barlow",sans-serif;
    font-weight:600;
    font-size:24px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--yellow);
  }
  .footer-small{
    margin:12px 0 0;
    font-size:12px;
    color:#9fb4cc;
  }
  .footer-line{
    margin:0 0 14px;
    font-size:15px;
    color:var(--paper);
  }
  .footer-count{
    margin:-6px 0 0;
    font-size:14px;
    color:var(--yellow);
  }
  .footer-link{
    margin:0;
  }
  .footer-link a{
    color:var(--yellow);
    text-decoration:none;
    font-family:"Oswald","Barlow",sans-serif;
    font-size:14px;
    letter-spacing:0.6px;
    text-transform:uppercase;
  }
  .footer-link a:hover,
  .footer-link a:focus-visible{
    color:var(--paper);
    text-decoration:underline;
  }

  /* stop Chrome painting the filled box white */
  .miss-form input:-webkit-autofill,
  .miss-form input:-webkit-autofill:hover,
  .miss-form input:-webkit-autofill:focus{
    -webkit-text-fill-color:var(--paper);
    -webkit-box-shadow:0 0 0 1000px var(--navy-mid) inset;
    box-shadow:0 0 0 1000px var(--navy-mid) inset;
    caret-color:var(--paper);
  }

  /* the answer box gives the same wobble as the logo */
  #miss-form > .miss-form:first-child{
    transform-origin:50% 50%;
    animation:logo-wobble 5s ease-in-out infinite;
  }
  @media (prefers-reduced-motion:reduce){
    #miss-form > .miss-form:first-child{ animation:none; }
  }

  /* do you miss? vote */
  #poll{
    min-height:240px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .poll-name{
    margin:0 0 14px;
    font-family:"Oswald","Barlow",sans-serif;
    font-weight:600;
    font-size:30px;
    line-height:1.25;
    letter-spacing:0.5px;
    text-align:center;
    color:var(--yellow);
  }
  .poll-buttons{
    display:flex;
    gap:10px;
  }
  .poll-buttons{
    gap:12px;
  }
  .poll-buttons[hidden]{
    display:none;
  }
  .poll-btn{
    flex:1;
    background:var(--yellow);
    color:#DA291C;
    border:3px solid #DA291C;
    font-family:"Baloo 2","Barlow",sans-serif;
    font-weight:800;
    font-size:19px;
    letter-spacing:0.5px;
    padding:14px;
    cursor:pointer;
  }
  /* Yes button in Blockbuster blue, No stays McDonald's red */
  .poll-buttons .poll-btn:first-child{
    color:#1B4F8C;
    border-color:#1B4F8C;
  }
  /* hover flips the colours round */
  @media (hover:hover){
    .poll-buttons .poll-btn:first-child:hover,
    .poll-buttons .poll-btn:first-child:focus-visible{
      background:#1B4F8C;
      color:var(--yellow);
      border-color:var(--yellow);
    }
    .poll-buttons .poll-btn:last-child:hover,
    .poll-buttons .poll-btn:last-child:focus-visible{
      background:#DA291C;
      color:var(--yellow);
      border-color:var(--yellow);
    }
  }
  .poll-next{
    display:flex;
    justify-content:center;
  }
  .poll-next .poll-btn{
    flex:0 0 auto;
    padding-left:48px;
    padding-right:48px;
    color:#1B4F8C;
    border-color:#1B4F8C;
  }
  @media (hover:hover){
    .poll-next .poll-btn:hover,
    .poll-next .poll-btn:focus-visible{
      background:#1B4F8C;
      color:var(--yellow);
      border-color:var(--yellow);
    }
  }
  .poll-next[hidden]{
    display:none;
  }

  .poll-counts{
    display:flex;
    gap:10px;
    margin-bottom:8px;
  }
  .poll-counts span{
    flex:1;
    background:var(--navy-mid);
    color:var(--paper);
    font-size:15px;
    text-align:center;
    padding:10px;
  }
  .poll-counts b{
    color:var(--yellow);
  }
  .poll-bar{
    height:10px;
    background:var(--navy-mid);
  }
  .poll-bar span{
    display:block;
    height:100%;
    width:0;
    background:var(--yellow);
  }

  /* all-time list */
  .alltime{
    margin:0;
    padding:0 0 0 44px;
    list-style:decimal;
    max-width:700px;
  }
  .alltime li{
    padding:11px 0;
    border-bottom:1px solid rgba(204,160,0,0.35);
  }
  .alltime li::marker{
    color:var(--yellow);
  }
  .alltime-name{
    font-size:17px;
    color:var(--paper);
  }
  .alltime-count{
    float:right;
    font-family:"Oswald","Barlow",sans-serif;
    font-weight:600;
    font-size:17px;
    color:var(--yellow);
  }

  /* contact page */
  .footer-pipe{
    color:#7f93b8;
    margin:0 6px;
  }
  .contact-form{
    max-width:760px;
    margin:0 auto;
  }
  .contact-label{
    display:block;
    margin:18px 0 6px;
    font-family:"Oswald","Barlow",sans-serif;
    font-weight:600;
    font-size:14px;
    letter-spacing:0.6px;
    text-transform:uppercase;
    color:var(--yellow);
  }
  .contact-label span{
    color:#9fb4cc;
    font-weight:400;
    text-transform:none;
    letter-spacing:0;
  }
  .contact-input{
    width:100%;
    border:2px solid var(--yellow);
    background:var(--navy-mid);
    color:var(--paper);
    font-family:"Barlow",sans-serif;
    font-size:15px;
    padding:11px 14px;
  }
  .contact-input::placeholder{
    color:#9fb4cc;
  }
  .contact-input:focus{
    outline:2px solid var(--yellow);
    outline-offset:-4px;
  }
  .contact-area{
    resize:vertical;
    line-height:1.6;
  }
  .contact-btn{
    margin-top:22px;
    border:0;
    background:var(--yellow);
    color:var(--navy-deep);
    font-family:"Oswald","Barlow",sans-serif;
    font-weight:600;
    font-size:15px;
    letter-spacing:0.8px;
    text-transform:uppercase;
    padding:13px 34px;
    cursor:pointer;
  }
  .contact-btn:hover{
    background:#ffd75e;
  }
  .contact-sent,
  .contact-error{
    max-width:760px;
    margin:0 auto;
    font-size:17px;
    color:var(--yellow);
  }

  /* plain lists get a gold bar on the left */
  .miss-list.plain li{
    padding:9px 0 9px 12px;
    margin-bottom:6px;
    border-bottom:0;
    border-left:4px solid var(--yellow);
    border-radius:0;
    background:rgba(0,53,102,0.5);
  }
  .miss-list.plain li:last-child{
    margin-bottom:0;
  }

  /* newly missed is jotted down with gold dots */
  .miss-dots li{
    padding:8px 0;
    margin-bottom:0;
    border-left:0;
    background:none;
    border-bottom:1px solid rgba(204,160,0,0.35);
  }
  .miss-dots li:last-child{
    border-bottom:0;
  }
  .miss-dots li::before{
    content:"\25CF";
    color:var(--yellow);
    font-size:11px;
    margin-right:10px;
    vertical-align:2px;
  }

  /* back in time adventures gets retro squares */
  .miss-squares li{
    padding:8px 0;
    margin-bottom:0;
    border-left:0;
    background:none;
    border-bottom:1px solid rgba(204,160,0,0.35);
  }
  .miss-squares li:last-child{
    border-bottom:0;
  }
  .miss-squares li::before{
    content:"";
    display:inline-block;
    width:8px;
    height:8px;
    background:var(--yellow);
    margin-right:10px;
  }

  /* contact heading lines up with the form */
  .contact-page h1{
    max-width:760px;
    margin-left:auto;
    margin-right:auto;
  }

  /* picture under the contact form */
  .contact-img{
    display:block;
    width:100%;
    max-width:760px;
    height:auto;
    margin:44px auto 0;
  }

  /* contact page runs wider than the standard page */
  .contact-page{
    max-width:820px;
  }

  /* admin */
  .admin{
    display:grid;
    grid-template-columns:220px 1fr;
    gap:24px;
    align-items:start;
  }
  .admin-menu{
    display:flex;
    flex-direction:column;
    background:var(--panel-blue);
    border:1px solid var(--gold-dark);
  }
  .admin-link{
    display:block;
    padding:13px 16px;
    color:var(--paper);
    text-decoration:none;
    font-family:"Oswald","Barlow",sans-serif;
    font-size:14px;
    letter-spacing:0.5px;
    border-bottom:1px solid rgba(204,160,0,0.35);
  }
  .admin-link:last-child{
    border-bottom:0;
  }
  .admin-link:hover{
    color:var(--yellow);
  }
  .admin-link.is-on{
    background:var(--navy-mid);
    color:var(--yellow);
  }
  .admin-out{
    color:#9fb4cc;
  }
  .admin-body h1{
    margin-top:0;
  }
  @media (max-width:760px){
    .admin{grid-template-columns:1fr;}
  }

  /* admin message cards */
  .admin-card{
    background:var(--panel-blue);
    border:1px solid var(--gold-dark);
    padding:16px 18px;
    margin-bottom:14px;
  }
  .admin-card-top{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:12px;
    margin-bottom:10px;
    padding-bottom:8px;
    border-bottom:1px solid rgba(204,160,0,0.35);
  }
  .admin-who{
    font-family:"Oswald","Barlow",sans-serif;
    font-weight:600;
    font-size:17px;
    color:var(--yellow);
  }
  .admin-when{
    font-size:12px;
    color:#9fb4cc;
    white-space:nowrap;
  }
  .admin-msg{
    margin:0 0 12px;
    font-size:15px;
    line-height:1.6;
    color:var(--paper);
  }
  .admin-meta{
    margin:0 0 6px;
    font-size:13px;
    color:#9fb4cc;
  }
  .admin-meta a{
    color:var(--yellow);
  }
  .admin-del{
    margin-top:8px;
    border:2px solid #DA291C;
    background:none;
    color:#ff6b6b;
    font-family:"Oswald","Barlow",sans-serif;
    font-size:12px;
    letter-spacing:0.6px;
    text-transform:uppercase;
    padding:7px 14px;
    cursor:pointer;
  }
  .admin-del:hover{
    background:#DA291C;
    color:var(--paper);
  }

/* ---------- header on laptop screens ----------
   Above 1780 the logo and "Do You?" float over the banner at
   set positions. Below that there is no room for them, so they
   join the row properly instead of leaving a gap behind them. */

@media (max-width:1780px) and (min-width:761px){
  .menu-bar{
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-start;
    gap:16px;
    padding:6px 20px;
    min-height:0;
  }
  .logo{
    position:relative;
    top:auto;
    left:auto;
    width:170px;
    margin-top:-34px;
    margin-bottom:-4px;
    z-index:2;
  }
  .doyou{
    display:block;
    position:static;
    top:auto;
    left:auto;
    transform:rotate(-4deg);
    font-size:26px;
  }
  .menu-right{
    flex:1 1 auto;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:14px;
    width:auto;
    margin-left:auto;
  }
  .main-menu{
    flex-wrap:wrap;
    justify-content:flex-end;
  }
}