/* Intermission screens: unframed artwork, warm instruction-paper, pixel headings. */
#story-dialog,#story-dialog.is-introduction{
  --screen-ink:#111b42;--screen-paper:#f3e6bf;--screen-blue:#193caa;--screen-cyan:#83ded4;
  width:min(820px,calc(100% - 40px));max-width:820px;
  max-height:calc(100dvh - 48px);padding:0;
  color:var(--screen-ink);background:var(--screen-paper);
  border:2px solid #6682df;box-shadow:8px 8px 0 #050b24;
  overflow:hidden;border-radius:0;
}
#story-dialog[open]{display:grid;grid-template-rows:48px minmax(0,1fr) 64px}
#story-dialog::backdrop{background:#03081be6;backdrop-filter:blur(3px)}
#story-dialog .dialog-top{
  position:relative;top:auto;min-height:0;padding:0 65px 0 23px;
  display:flex;align-items:center;border:0;background:#0b1541;
  font:11px/1.5 var(--mono);letter-spacing:1px;color:#b8c9f5;
}
#story-dialog .close{top:1px;right:7px;color:#d5e3f9;border-radius:0}
#story-dialog .close:hover{background:#294574;color:#fff}
#story-dialog .close:focus-visible{outline-color:var(--screen-cyan)}
#story-dialog .dialog-inner,#story-dialog.is-introduction .dialog-inner,#story-dialog[data-story=outside] .dialog-inner{
  display:grid;grid-template-columns:35% minmax(0,1fr);padding:0;overflow-y:auto;
  overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#7c8d9f var(--screen-paper);
}
#story-dialog .story-visual{
  position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;
  min-height:340px;padding:30px;overflow:hidden;background:var(--screen-blue);
}
#story-dialog .story-route{position:absolute;inset:0;width:100%;height:100%;color:#f4db86;z-index:-1;pointer-events:none}
#story-dialog .story-route>path{stroke:#4f6cce;stroke-width:3;stroke-linejoin:miter}
#story-dialog .story-route .route-ghost path{stroke:none}
#story-dialog .story-route g{opacity:.8}
#story-dialog .profile-reveal{display:block;margin:0;padding:0;border:0;background:none}
#story-dialog .profile-reveal .profile-crop{width:190px;max-width:100%;box-shadow:none}
#story-dialog .brand-art,#story-dialog[data-story=outside] .brand-art{
  display:flex;flex-direction:row;align-items:center;justify-content:center;
  min-height:0;height:auto;padding:0;margin:0;border:0;background:none;
}
#story-dialog .brand-art img,#story-dialog[data-story=outside] .brand-art img{
  max-width:190px;max-height:170px;width:100%;height:auto;object-fit:contain;border-radius:0;
}
#story-dialog .brand-art[data-brand=story] img{width:150px;max-height:180px}
#story-dialog .brand-art[data-brand=work] img{width:190px;max-width:100%;filter:brightness(1.3)}
#story-dialog .brand-art[data-brand=now] img{width:140px;max-width:100%;border-radius:24px}
#story-dialog .story-copy{min-width:0;padding:38px 34px 35px;display:flex;flex-direction:column;justify-content:center}
#story-dialog h2,#story-dialog.is-introduction h2,#story-dialog[data-story=outside] h2{
  font:700 28px/1.25 'Silkscreen',monospace;
  letter-spacing:-1px;text-wrap:balance;overflow-wrap:normal;
  color:var(--screen-ink);margin:0 0 24px;text-shadow:none;
}
#story-dialog .dialog-inner p:not(.dialog-help):not(#dialog-detail){font:400 14px/1.9 var(--mono);color:#202c4d;margin:0;max-width:43ch}
#story-dialog #dialog-detail{font:400 12px/1.85 var(--mono);color:#4f5a6c;margin:20px 0 0;max-width:43ch}
#story-dialog .story-link{
  display:inline-flex;align-items:center;justify-content:flex-start;gap:14px;
  min-height:44px;margin:24px 0 0;padding:0;
  font:700 12px/1.6 var(--mono);letter-spacing:0;
  color:#19489c;background:none;border:0;
  text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px;
}
#story-dialog .story-link:after{font-size:19px;line-height:1}
#story-dialog .story-link:hover{color:#0c2466}
#story-dialog .story-link:focus-visible{outline-color:#193caa}
#story-dialog .story-chapters{margin:-11px 0 26px;gap:18px;border-bottom:1px solid #14234b35}
#story-dialog .story-chapters button{
  flex:none;min-width:0;min-height:44px;padding:0 1px;
  font:700 11px var(--mono);letter-spacing:0;color:#5b6371;background:none;
}
#story-dialog .story-chapters button[aria-pressed=true]{color:#152858;border-bottom-color:#193caa;background:none}
#story-dialog .story-chapters button:hover{color:#152858}
#story-dialog .story-chapters button:focus-visible{outline-color:#193caa}
#story-dialog .stats-caption{font:400 10px/1.8 var(--mono);letter-spacing:0;color:#596070;margin-top:25px}
#story-dialog .story-stats{display:grid;grid-template-columns:repeat(2,1fr);border:0;margin:13px 0 0;gap:16px}
#story-dialog .story-stats>div,#story-dialog[data-story=outside] .story-stats>div{padding:0;gap:7px;align-items:flex-start;text-align:left;border:0}
#story-dialog .story-stats>div+div{padding:0;border:0}
#story-dialog .story-stats strong,#story-dialog[data-story=outside] .story-stats strong{font:700 22px/1.3 'Silkscreen',monospace;letter-spacing:-1px;color:#1b3a94}
#story-dialog .story-stats span{font:400 10px/1.6 var(--mono);color:#5a6373;letter-spacing:0}
#story-dialog .story-stats:has(>div:only-child){grid-template-columns:1fr}
#story-dialog .story-stats>div:only-child{flex-direction:row;align-items:center;gap:18px}
#story-dialog .story-stats>div:only-child strong,#story-dialog[data-story=outside] .story-stats>div:only-child strong{font:700 42px/1 'Silkscreen',monospace}
#story-dialog .dialog-bottom{
  padding:8px 17px;min-height:0;display:flex;align-items:center;justify-content:flex-end;
  border:0;background:#0b1541;
}
#story-dialog .story-return{
  display:flex;align-items:center;justify-content:center;gap:12px;
  min-height:44px;padding:10px 18px;
  font:400 12px/1.5 'Silkscreen',monospace;letter-spacing:0;
  background:var(--screen-cyan);border:0;color:#0b2545;box-shadow:3px 3px 0 #05102e;
}
#story-dialog .story-return:hover{background:#b5f5df;color:#091b3b}
#story-dialog .return-arrow{font:20px/1 var(--mono);color:inherit}
#story-dialog .story-return:focus-visible{outline-color:var(--screen-paper)}
@media(max-width:600px){
  #story-dialog,#story-dialog.is-introduction{width:calc(100% - 24px);max-height:calc(100dvh - 28px)}
  #story-dialog[open]{grid-template-rows:44px minmax(0,1fr) 62px}
  #story-dialog .dialog-top{font-size:10px;min-height:0;padding-left:20px}
  #story-dialog .close{top:-1px;right:5px}
  #story-dialog .dialog-inner,#story-dialog.is-introduction .dialog-inner,#story-dialog[data-story=outside] .dialog-inner{display:block;padding:0}
  #story-dialog .story-visual{min-height:0;height:154px;padding:22px;justify-content:flex-start}
  #story-dialog .story-route{left:145px;right:-20px;top:0;width:calc(100% - 120px);height:100%;opacity:.85}
  #story-dialog .profile-reveal .profile-crop{width:112px}
  #story-dialog .brand-art img,#story-dialog[data-story=outside] .brand-art img{max-width:142px;max-height:105px}
  #story-dialog .brand-art[data-brand=story] img{width:90px;max-height:112px}
  #story-dialog .brand-art[data-brand=now] img{width:96px;border-radius:18px}
  #story-dialog .story-copy{padding:27px 25px 25px}
  #story-dialog h2,#story-dialog.is-introduction h2,#story-dialog[data-story=outside] h2{font-size:25px;margin:0 0 22px;letter-spacing:-1px}
  #story-dialog .dialog-inner p:not(.dialog-help):not(#dialog-detail){font-size:13px;line-height:1.85}
  #story-dialog .dialog-bottom{padding:8px 13px}
  #story-dialog .story-return{font-size:11px;min-height:44px}
  #story-dialog .story-chapters{margin-top:-10px}
}
@media(max-width:360px){
  #story-dialog .story-visual{height:132px;padding:18px 22px}
  #story-dialog .profile-reveal .profile-crop{width:96px}
  #story-dialog .brand-art img,#story-dialog[data-story=outside] .brand-art img{max-height:88px;max-width:128px}
  #story-dialog .story-copy{padding:24px 22px}
  #story-dialog h2,#story-dialog.is-introduction h2,#story-dialog[data-story=outside] h2{font-size:22px}
  #story-dialog .story-stats strong,#story-dialog[data-story=outside] .story-stats strong{font-size:20px}
}
@media(max-height:500px) and (min-width:601px){
  #story-dialog,#story-dialog.is-introduction{max-height:calc(100dvh - 24px);max-width:760px}
  #story-dialog[open]{grid-template-rows:44px minmax(0,1fr) 60px}
  #story-dialog .dialog-inner,#story-dialog.is-introduction .dialog-inner,#story-dialog[data-story=outside] .dialog-inner{display:grid;padding:0}
  #story-dialog .story-visual{min-height:290px;padding:25px}
  #story-dialog .story-copy{padding:26px 30px}
}