/* ==================================================================
   Conference of Champions XXV
   Colors pulled from the save-the-date invite. Swap these tokens
   when the official brand colors arrive.
   ================================================================== */
:root{
  --bg:#0b0a1a;          /* deep navy-black */
  --bg-2:#141230;
  --surface:rgba(20,18,44,.82);
  --line:rgba(255,255,255,.12);
  --ink:#f4f1f8;
  --muted:rgba(244,241,248,.68);
  --magenta:#e5306b;
  --coral:#ff6b4a;
  --raspberry:#b3245a;
  --glow-blue:#3346c8;

  --display:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mark:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif; 

  --header-h:72px;
  --radius:4px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  overflow-x:hidden;overflow-x:clip;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--ink);}
h1,h2,h3{font-family:var(--display);font-weight:600;margin:0;line-height:1.15;}
p{margin:0;}
figure{margin:0;}
address{font-style:normal;}

.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.muted{color:var(--muted);}

.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--bg);padding:10px 16px;font-weight:600;}
.skip-link:focus{top:12px;}

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

/* ---------- Background ---------- */
.bg-network{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.22;transition:opacity .6s ease;}
/* Full strength only while the Event hero is on screen; faded behind reading content */
body.at-hero .bg-network{opacity:1;}
.bg-glow{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(60% 40% at 50% 62%, rgba(51,70,200,.35), transparent 70%),
    radial-gradient(50% 35% at 85% 30%, rgba(229,48,107,.14), transparent 70%),
    linear-gradient(180deg, #0b0a1a 0%, #100d24 55%, #0b0a1a 100%);
}

/* ---------- Header + tabs ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(11,10,26,.78);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:var(--header-h);}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none;}
.brand-mark{
  font-family:var(--mark);font-weight:700;font-size:26px;letter-spacing:.02em;line-height:1;
  color:transparent;-webkit-text-stroke:1.2px var(--ink);
}
.brand-text{font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;line-height:1.3;color:var(--muted);}

.tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;}
.tabs::-webkit-scrollbar{display:none;}
.tab{
  position:relative;flex:none;
  font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;
  padding:24px 14px;
  transition:color .2s ease;
}
.tab::after{
  content:"";position:absolute;left:14px;right:14px;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--magenta),var(--coral));
  transform:scaleX(0);transition:transform .25s ease;
}
.tab:hover{color:var(--ink);}
.tab[aria-selected="true"]{color:var(--ink);}
.tab[aria-selected="true"]::after{transform:scaleX(1);}

/* ---------- Hamburger (tablet + phone) ---------- */
.nav-toggle{
  display:none;position:relative;width:44px;height:44px;margin-right:-10px;
  background:none;border:0;padding:0;cursor:pointer;color:var(--ink);
}
.nav-toggle span{
  position:absolute;left:11px;width:22px;height:2px;border-radius:2px;background:currentColor;
  transition:transform .25s ease,opacity .2s ease,top .25s ease;
}
.nav-toggle span:nth-child(1){top:15px;}
.nav-toggle span:nth-child(2){top:21px;}
.nav-toggle span:nth-child(3){top:27px;}
.nav-open .nav-toggle span:nth-child(1){top:21px;transform:rotate(45deg);}
.nav-open .nav-toggle span:nth-child(2){opacity:0;}
.nav-open .nav-toggle span:nth-child(3){top:21px;transform:rotate(-45deg);}

@media (max-width:860px){
  :root{--header-h:64px;}
  .nav-toggle{display:block;}
  .tabs{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;overflow:visible;
    padding:8px 0 20px;
    background:rgba(11,10,26,.97);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    box-shadow:0 24px 40px rgba(0,0,0,.45);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .2s ease,transform .25s ease,visibility 0s linear .25s;
  }
  .nav-open .tabs{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .25s ease;}
  .tab{padding:15px 24px;font-size:14px;letter-spacing:.16em;}
  .tab::after{left:24px;right:auto;width:28px;bottom:8px;transform-origin:left;}
}

/* ---------- Panels ----------
   Without JS every panel shows (so nothing is ever hidden by accident).
   With JS, only the active panel shows. */
.js .panel{display:none;}
.js .panel.is-active{display:block;animation:panelIn .5s cubic-bezier(.16,1,.3,1);}
@keyframes panelIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

.block{padding:clamp(56px,8vw,96px) 0 0;}
.block-first{padding-top:clamp(48px,7vw,80px);}
main{padding-bottom:clamp(64px,9vw,112px);}

.eyebrow{
  font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--coral);margin-bottom:12px;
}
.section-head{margin-bottom:36px;max-width:760px;}
.section-head h2{font-size:clamp(28px,3.6vw,44px);letter-spacing:.01em;}
.section-head--sub{margin:64px 0 24px;}
.section-head--sub h2{font-size:clamp(22px,2.6vw,30px);}
.lead{color:var(--muted);font-size:17px;margin-top:16px;}

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}

.btn{
  display:inline-block;margin-top:24px;
  font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);
  padding:14px 26px;border-radius:999px;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}
.btn-outline{border:1px solid rgba(255,255,255,.45);}
.btn-outline:hover{background:var(--ink);color:var(--bg);border-color:var(--ink);}

/* ---------- Hero ----------
   Everything from the logo to the countdown fits in one screen.
   Sizes use min(vw, vh) so short laptop screens scale down too. */
.hero{
  height:calc(100vh - var(--header-h));
  height:calc(100svh - var(--header-h));
  min-height:500px;
  display:flex;align-items:center;
  padding:clamp(12px,2vh,32px) 0;
  text-align:center;line-height:1.4;
}
.hero-inner{display:flex;flex-direction:column;align-items:center;width:100%;}

.company-logo{width:auto;height:clamp(34px,6vh,64px);margin-bottom:clamp(10px,2vh,24px);}

/* Official CoC27 logo (white copy of COC27_Logo_B_Black.svg) */
.coc-logo{margin:0;line-height:0;}
.coc-logo img{
  height:auto;width:min(88vw,max(280px,50vh),600px);
  filter:drop-shadow(0 0 12px rgba(160,170,255,.45));
}

.hero-tagline{
  font-family:var(--display);font-weight:400;
  font-size:max(20px,min(4.2vw,4.4vh,44px));letter-spacing:.28em;line-height:1.3;text-transform:uppercase;
  margin:clamp(14px,4vh,48px) 0 clamp(12px,3vh,32px);padding-left:.28em;
  text-shadow:0 0 22px rgba(130,150,255,.55);
}

.hero-kicker{font-family:var(--display);font-weight:600;text-transform:uppercase;color:var(--ink);letter-spacing:.2em;font-size:max(12px,min(1.6vw,2vh,17px));margin-bottom:4px;}
.hero-date{font-family:var(--display);font-weight:700;font-size:max(32px,min(7vw,7vh,68px));letter-spacing:.04em;line-height:1.05;text-shadow:0 0 24px rgba(255,255,255,.35);}
.hero-venue{font-family:var(--display);font-size:max(14px,min(1.9vw,2.3vh,20px));font-weight:600;letter-spacing:.2em;text-transform:uppercase;margin-top:4px;}

.hero-actions{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.8vh,18px);margin-top:clamp(12px,3vh,32px);}
.reg-badge{
  width:clamp(92px,12vh,124px);height:clamp(92px,12vh,124px);padding:8px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:var(--raspberry);
  font-family:var(--display);font-size:clamp(9px,1.15vh,11px);font-weight:700;letter-spacing:.05em;text-transform:uppercase;line-height:1.6;
  box-shadow:0 0 0 0 rgba(179,36,90,.6);
  animation:pulse 2.8s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(229,48,107,.5);}
  70%{box-shadow:0 0 0 18px rgba(229,48,107,0);}
  100%{box-shadow:0 0 0 0 rgba(229,48,107,0);}
}
.countdown{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);}
.countdown strong{color:var(--coral);font-size:14px;}

/* Phones: let the hero grow if the content needs more room than the screen */
@media (max-width:600px){ .hero{height:auto;min-height:calc(100svh - var(--header-h));} }

/* ---------- At a glance ---------- */
.glance-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.glance-grid--two{grid-template-columns:repeat(2,1fr);}
.glance-card{padding:28px;}
.glance-label{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--coral);margin-bottom:10px;}
.glance-card h3{font-size:24px;margin-bottom:8px;}
.glance-card p:last-child{color:var(--muted);font-size:15px;}
.glance-card a{color:var(--ink);font-weight:600;}
@media (max-width:860px){ .glance-grid,.glance-grid--two{grid-template-columns:1fr;} }

/* ---------- Venue ---------- */
.venue{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(28px,5vw,64px);align-items:center;}
.venue-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);}
.venue-copy h3{font-size:clamp(26px,3vw,36px);margin-bottom:16px;}
.venue-copy address{font-size:18px;line-height:1.6;margin-bottom:16px;}
.venue-copy a:not(.btn){color:var(--ink);font-weight:600;}
.venue-strip{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px;}
.venue-strip img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius);}
@media (max-width:860px){
  .venue{grid-template-columns:1fr;}
  .venue-strip{grid-template-columns:1fr;}
}

/* ---------- Agenda ---------- */
.agenda-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.agenda-day{padding:32px;}
.agenda-num{font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--coral);margin-bottom:10px;}
.agenda-day h3{font-size:24px;margin-bottom:10px;}
@media (max-width:700px){ .agenda-grid{grid-template-columns:1fr;} }

/* ---------- Keynote teaser (event tab) ---------- */
.keynote-teaser{display:grid;grid-template-columns:220px 1fr;gap:clamp(24px,4vw,48px);align-items:center;padding:clamp(24px,4vw,40px);}
.keynote-teaser img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;}
.keynote-teaser h2{font-size:clamp(28px,3.4vw,40px);margin-bottom:12px;}
.keynote-teaser .muted{max-width:56ch;}
@media (max-width:640px){
  .keynote-teaser{grid-template-columns:1fr;text-align:center;}
  .keynote-teaser img{max-width:180px;margin:0 auto;}
}

/* ---------- Gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;grid-auto-flow:dense;gap:12px;}
.gallery figure{overflow:hidden;border-radius:var(--radius);}
.gallery img{width:100%;height:100%;object-fit:cover;}
.gallery figure:hover img{--zoom:1.04;}
.gallery .g-wide{grid-column:span 2;grid-row:span 2;}
.gallery .g-tall{grid-row:span 2;}
.gallery .g-span2{grid-column:span 2;}
@media (max-width:860px){ .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px;} }

/* ---------- Speakers ---------- */
.keynote{display:grid;grid-template-columns:minmax(220px,360px) 1fr;gap:clamp(24px,4vw,56px);padding:clamp(24px,4vw,48px);margin-bottom:56px;align-items:start;
  background:linear-gradient(135deg,rgba(229,48,107,.14),rgba(51,70,200,.12));}
.keynote img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius);}
.keynote-badge{
  display:inline-block;margin-bottom:14px;
  font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  padding:6px 14px;border-radius:999px;background:var(--raspberry);
}
.keynote h3{font-size:clamp(30px,3.8vw,46px);}
.keynote-role{color:var(--coral);font-weight:600;margin:8px 0 20px;}
.keynote-copy p + p{margin-top:14px;}
.keynote-copy p:not(.keynote-role):not(.keynote-badge){color:var(--muted);}
@media (max-width:760px){ .keynote{grid-template-columns:1fr;} .keynote img{max-width:320px;} }

.speaker-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,32px);}
.speaker img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius);margin-bottom:14px;filter:saturate(.92);transition:filter .3s ease,transform .3s ease;}
.speaker:hover img{filter:saturate(1.05);transform:translateY(-3px);}
.speaker h3{font-size:18px;margin-bottom:4px;}
.speaker p{font-size:14px;color:var(--muted);line-height:1.45;text-wrap:pretty;}
@media (max-width:960px){ .speaker-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:640px){ .speaker-grid{grid-template-columns:repeat(2,1fr);} .speaker h3{font-size:16px;} .speaker p{font-size:13px;} }

/* ---------- Parking / hotel ---------- */
.lot-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.lot{padding:28px;}
.lot h3{font-size:24px;margin-bottom:8px;}
.lot address{color:var(--muted);}
.lot-pending{border-style:dashed;border-color:rgba(255,255,255,.28);}
@media (max-width:760px){ .lot-grid{grid-template-columns:1fr;} }

/* ---------- Awards ---------- */
.award-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.award{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:18px;
  padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  transition:border-color .25s ease,background-color .25s ease;
}
.award::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--magenta),var(--coral));}
.award:hover{border-color:rgba(255,107,74,.5);background:rgba(30,27,62,.9);}
.award-num{font-family:var(--display);font-size:28px;font-weight:700;line-height:1;color:transparent;-webkit-text-stroke:1px var(--coral);flex:none;min-width:40px;}
.award h3{font-size:18px;}
@media (max-width:960px){ .award-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .award-grid{grid-template-columns:1fr;} }

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line);padding:56px 0 40px;text-align:center;background:rgba(11,10,26,.7);}
.footer-contact{font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:2;}
.footer-contact a{color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4);overflow-wrap:anywhere;}
@media (max-width:600px){ .footer-contact{font-size:12px;letter-spacing:.06em;} }
.footer-contact a:hover{border-bottom-color:var(--coral);}
.footer-mission{width:min(560px,100%);height:auto;margin:40px auto 0;}
.footer-logo{width:auto;height:44px;margin:32px auto 0;opacity:.9;}
.footer-legal{margin-top:28px;font-size:12px;color:var(--muted);}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none !important;transition:none !important;}
}
.glance-grid--after{margin-top:20px;}

/* ---------- Section bands ----------
   Break up the fixed network background as you scroll:
   solid bands and a full-bleed gradient band cover it. */
.band{margin-top:clamp(56px,8vw,96px);padding-bottom:clamp(56px,8vw,96px);position:relative;}
.band--alt{
  background:#100e26;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.band--accent{
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(229,48,107,.55), transparent 60%),
    radial-gradient(70% 120% at 100% 100%, rgba(51,70,200,.6), transparent 60%),
    linear-gradient(120deg,#5a1236 0%,#2a1650 55%,#16205e 100%);
}
.band--accent .keynote-teaser{padding:0;}
.band--accent .keynote-teaser img{box-shadow:0 0 0 6px rgba(255,255,255,.12),0 18px 50px rgba(0,0,0,.4);}
.band--accent .muted{color:rgba(255,255,255,.82);}
.band--accent .btn-outline{border-color:rgba(255,255,255,.7);}
.keynote-teaser .keynote-badge{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);}
/* The block after a band supplies its own top padding */
.band + .block{padding-top:clamp(56px,8vw,96px);}

/* ---------- Parallax ----------
   Driven by js/main.js (transform only, rAF-throttled). Disabled for
   prefers-reduced-motion, where these rules simply leave things still. */
.venue-photo,.venue-strip figure{overflow:hidden;border-radius:var(--radius);}
[data-parallax-img]{
  --py:0px;--zoom:1;
  transform:translate3d(0,var(--py),0) scale(calc(1.14 * var(--zoom)));
  transition:transform .7s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}
/* Parallax updates every frame, so only the hover zoom should ease */
.px-live [data-parallax-img]{transition:none;}
.gallery figure:hover [data-parallax-img]{transition:transform .7s cubic-bezier(.16,1,.3,1);}

[data-parallax-hero]{will-change:transform,opacity;}

.band--accent{overflow:hidden;}
.band--accent .wrap{position:relative;z-index:1;}
.band-mark{
  position:absolute;right:-2vw;top:50%;margin-top:-.5em;z-index:0;
  font-family:var(--mark);font-weight:700;font-size:clamp(200px,30vw,440px);line-height:1;letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.14);
  pointer-events:none;user-select:none;will-change:transform;
}
@media (prefers-reduced-motion:reduce){ [data-parallax-img]{transform:scale(1.04);} }

/* ---------- Schedule tab ---------- */
.sched-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;}
.sched-day{padding:0;overflow:hidden;}
.sched-day-head{padding:28px 32px 22px;border-bottom:1px solid var(--line);}
.sched-day-head h3{font-size:24px;}
.sched-list{list-style:none;margin:0;padding:8px 32px 24px;}
.sched-item{display:grid;grid-template-columns:92px 1fr;gap:18px;padding:18px 0;border-bottom:1px solid var(--line);}
.sched-item:last-child{border-bottom:0;}
.sched-item time{font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--coral);padding-top:3px;white-space:nowrap;}
.sched-item h4{font-family:var(--display);font-size:17px;font-weight:600;margin:0 0 4px;}
.sched-item p{font-size:14px;color:var(--muted);}
.sched-pending{margin-top:16px;padding:22px;border:1px dashed rgba(255,255,255,.28);border-radius:var(--radius);color:var(--muted);text-align:center;}
@media (max-width:760px){
  .sched-grid{grid-template-columns:1fr;}
  .sched-day-head{padding:24px 22px 18px;}
  .sched-list{padding:8px 22px 20px;}
  .sched-item{grid-template-columns:78px 1fr;gap:12px;}
}

/* ---------- Gallery lightbox ---------- */
[data-lightbox] figure{cursor:zoom-in;}
[data-lightbox] figure:focus-visible{outline:2px solid var(--coral);outline-offset:3px;}
.lb{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  background:rgba(8,7,20,.94);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s;
}
.lb.is-open{opacity:1;visibility:visible;transition:opacity .25s ease;}
.lb-figure{margin:0;max-width:min(92vw,1600px);text-align:center;}
.lb-img{max-width:100%;max-height:80vh;width:auto;height:auto;margin:0 auto;border-radius:var(--radius);box-shadow:0 20px 60px rgba(0,0,0,.55);}
.lb-cap{margin-top:14px;font-size:14px;color:var(--muted);}
.lb-count{font-family:var(--display);font-weight:600;letter-spacing:.14em;color:var(--coral);}
.lb-btn{
  position:absolute;width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.3);color:#fff;
  font-size:24px;line-height:1;cursor:pointer;padding:0;
  transition:background-color .15s ease,border-color .15s ease;
}
.lb-btn:hover{background:var(--raspberry);border-color:var(--raspberry);}
.lb-prev{left:20px;top:50%;margin-top:-24px;}
.lb-next{right:20px;top:50%;margin-top:-24px;}
.lb-close{right:20px;top:20px;}
@media (max-width:700px){
  .lb-prev,.lb-next{top:auto;bottom:20px;margin-top:0;}
  .lb-prev{left:calc(50% - 60px);} .lb-next{right:calc(50% - 60px);}
  .lb-img{max-height:70vh;}
}
body.lb-lock{overflow:hidden;}