/* The banner is followed by the landing copy in the document flow. */
#auth-screen:has(#landing-gallery) {
  position:relative !important; inset:auto !important; height:auto !important; min-height:0;
  overflow:visible !important; z-index:auto !important;
}
#auth-screen > .lg-band:has(#landing-gallery) {
  position:relative !important; inset:auto; height:auto !important;
  padding-bottom:18px; box-sizing:border-box;
}
body:has(#landing-gallery) .ll-tagline {margin-top:12px !important}
body:has(#landing-gallery) h1.ll-tagline {margin-top:4px !important}
#auth-screen .lg-topbar {position:relative; z-index:4}
#auth-screen .lg-band::after {pointer-events:none}
#landing-gallery {
  --eg-gold:#dac18b; --eg-line:#82714f; --eg-muted:#c7bda9;
  position:relative; z-index:2; width:min(810px,calc(100% - 368px)); margin:17px auto 0;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(178px,27%); text-align:left;
  overflow:hidden; isolation:isolate; border:1px solid var(--eg-line); border-radius:14px;
  background:#181712; color:#f8f0da; box-shadow:0 10px 36px #0009,0 0 0 3px #211b13aa;
  box-sizing:border-box;
}
#landing-gallery:focus-visible,#landing-gallery button:focus-visible,#eg-viewer button:focus-visible {
  outline:2px solid #ffe699; outline-offset:-3px;
}
#landing-gallery .eg-stage {
  position:relative; display:block; box-sizing:border-box; width:100%; height:clamp(228px,22vw,323px);
  align-self:center; overflow:hidden; padding:0; border:0; border-radius:0;
  cursor:zoom-in; background:radial-gradient(ellipse at center,#3d382a,#16150f 80%);
  touch-action:pan-y; color:#f5e8c9;
}
.eg-shot {position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  opacity:0; transform:scale(1.035); transition:opacity .65s ease,transform .85s cubic-bezier(.2,.75,.2,1);}
.eg-shot.current {opacity:1; transform:scale(1)}
.eg-enlarge {position:absolute; right:8px; bottom:8px; border:1px solid #bba4769c; border-radius:7px;
  background:#171712d9; width:28px; height:28px; display:grid; place-items:center; font:22px/1 system-ui}
.eg-panel {position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  min-width:0; padding:16px 18px; box-sizing:border-box; border-left:1px solid #7462478c;
  background:radial-gradient(ellipse at top right,#4d4029 0%,transparent 65%),linear-gradient(145deg,#29251c,#171611);}
.eg-panel::after {content:""; position:absolute; top:7px; right:7px; width:14px; height:14px;
  border:solid #ae9566; border-width:1px 1px 0 0; pointer-events:none}
.eg-series {display:flex; gap:7px; align-items:center; font:700 10px/1.25 system-ui,sans-serif;
  letter-spacing:.08em; text-transform:uppercase; color:#dfcd9d;}
.eg-rule {width:14px; height:1px; background:var(--eg-gold)}
.eg-count {font:italic 28px/1 Georgia,serif; color:var(--eg-gold); margin:14px 0 9px}
.eg-count span {font:11px system-ui,sans-serif; color:var(--eg-muted)}
#landing-gallery .eg-title,#eg-viewer h2 {font:bold clamp(19px,1.55vw,25px)/1.12 Georgia,serif;
  margin:0; color:#fff1d2; text-shadow:none; text-wrap:balance}
#landing-gallery .eg-copy {color:#d7cfbd; font:13px/1.42 system-ui,sans-serif; margin:8px 0 13px; text-wrap:pretty}
.eg-controls {display:flex; align-items:center; gap:5px}
#landing-gallery .eg-controls button,#eg-viewer button {
  display:grid; place-items:center; width:36px; height:34px; padding:0; color:#f9efd6;
  border:1px solid #7e704f; border-radius:7px; background:#24221b; cursor:pointer; font:22px/1 system-ui,sans-serif;
}
#landing-gallery .eg-controls button:hover,#eg-viewer button:hover {background:#484031; border-color:#e1ca8c}
#landing-gallery button[data-action=pause] {font-size:14px; border-color:transparent; background:transparent}
.eg-markers {display:flex; align-items:center; gap:0; margin:6px 0 -4px; width:100%}
#landing-gallery .eg-markers button {width:17px; height:21px; padding:0; display:grid; place-items:center; border:0; background:none; cursor:pointer}
.eg-markers button::before {content:""; display:block; width:5px; height:5px; border-radius:8px; background:#827968; transition:width .25s}
.eg-markers button[aria-current=true]::before {background:#f4d78e; width:13px}
#eg-viewer {position:fixed; width:max-content; max-width:96vw; box-sizing:border-box; max-height:96dvh;
  padding:8px; border:1px solid #ad976f; border-radius:12px; background:#1d1a14; color:#fff0cf;
  box-shadow:0 20px 80px #000b; overflow:auto;}
#eg-viewer::backdrop {background:#100e0be8}
#eg-viewer img {display:block; margin:auto; width:auto; max-width:100%; max-height:calc(96dvh - 84px); object-fit:contain; touch-action:pan-y}
#eg-viewer header {display:flex; gap:8px; align-items:center; padding:6px}
#eg-viewer h2 {flex:1; font-size:clamp(16px,2.4vw,24px)}
#eg-viewer button {flex:none}
@media(max-width:920px) {
  #landing-gallery {width:min(700px,calc(100% - 240px)); grid-template-columns:minmax(0,1fr) 165px}
  #auth-screen .lg-band .lg-dl {width:96px; height:96px; box-sizing:border-box; font-size:9px}
  #auth-screen .lg-band .lg-dl {left:9px}
  #auth-screen .lg-dl b {font-size:10px}
  .eg-panel {padding:12px}
}
@media(max-width:700px) {
  #auth-screen > .lg-band:has(#landing-gallery) {display:grid !important; grid-template-columns:1fr 1fr; gap:10px; padding-bottom:12px}
  #auth-screen .lg-band .lg-topbar {grid-column:1/-1; grid-row:1}
  #auth-screen .lg-band .lg-dl {
    position:static !important; grid-row:2; align-self:center; width:auto; min-width:100px; height:48px;
    margin:0; border-radius:12px; padding:4px 10px; overflow:hidden;
  }
  #auth-screen .lg-band .lg-dl {grid-column:1/-1; justify-self:center; flex-direction:row; gap:5px}
  #auth-screen .lg-band .lg-dl .lg-dl-ico {font-size:20px}
  #auth-screen .lg-band .lg-dl small {display:none}
  #landing-gallery {grid-row:3; grid-column:1/-1; width:min(540px,calc(100% - 22px)); margin:0 auto; grid-template-columns:1fr}
  #landing-gallery .eg-stage {height:clamp(185px,54vw,265px)}
  .eg-panel {display:grid; grid-template-columns:1fr auto; align-items:center; gap:3px 9px; border-left:0; border-top:1px solid #7462478c; padding:10px 12px 5px}
  .eg-series {grid-column:1; font-size:9px}
  .eg-count {position:absolute; right:13px; top:9px; font-size:14px; margin:0}
  #landing-gallery .eg-title {grid-column:1; font-size:18px}
  .eg-controls {grid-column:2; grid-row:2/4; align-self:end}
  #landing-gallery .eg-controls button {width:30px; height:30px}
  #landing-gallery .eg-copy {grid-column:1; margin:0; font-size:11px}
  .eg-markers {grid-column:1/-1; justify-content:center; margin:0}
  #auth-screen .lg-topbar:has(#app-landing-tiles.in-bar) {display:flex; flex-wrap:wrap}
  #auth-screen #app-landing-tiles.in-bar {position:static; flex-basis:100%; max-width:100%; box-sizing:border-box}
  #auth-screen #app-landing-tiles.in-bar .app-tiles {padding:0}
}
@media(min-width:701px) {
  #auth-screen .lg-topbar:has(#app-landing-tiles.in-bar) + #landing-gallery {margin-top:95px}
}
@media(prefers-reduced-motion:reduce) {
  #landing-gallery * {transition:none !important; transform:none !important}
}