/* Shared chrome: skip link, header, nav, drawer, footer. Ported verbatim from the index page (skip link from the gallery page). */
.nav img,.drawer img,.foot img{max-width:100%;display:block}
.nav a,.drawer a,.foot a{color:inherit;text-decoration:none}
.nav .wrap,.drawer .wrap,.foot .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--margin)}

.nav .btn,.drawer .btn,.foot .btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sans);
  font-size:16px;font-weight:600;height:56px;padding:0 34px;border-radius:var(--r-pill);border:0;
  cursor:pointer;background:var(--cyan);color:var(--on-cyan);
  transition:background var(--t-fast) var(--e),transform 140ms var(--e)}
.nav .btn:hover,.drawer .btn:hover,.foot .btn:hover{background:var(--cyan-pale)}
.nav .btn:active,.drawer .btn:active,.foot .btn:active{transform:translateY(1px)}
.nav .btn:focus-visible,.drawer .btn:focus-visible,.foot .btn:focus-visible{outline:2px solid var(--cyan-pale);outline-offset:4px}
.nav{position:absolute;top:0;left:0;right:0;z-index:20}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:86px;gap:24px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:42px;width:42px}
.brand .a{display:block;font-size:15px;font-weight:600;letter-spacing:.18em;line-height:1.1}
.brand .b{display:block;font-size:9px;font-weight:500;letter-spacing:.3em;color:var(--cyan-deep)}
.nav-links{display:flex;gap:32px;align-items:center}
.nav-links a{font-size:15px;font-weight:500;color:var(--muted);transition:color var(--t-fast) var(--e)}
.nav-links a:hover{color:var(--ink)}
.nav .btn{height:46px;font-size:14.5px;padding:0 22px;letter-spacing:-.005em}
.burger{display:none;width:46px;height:46px;background:transparent;border:0;cursor:pointer;
  align-items:center;justify-content:center}
.drawer{position:fixed;inset:0;z-index:60;background:var(--deep);display:none;flex-direction:column;
  padding:24px var(--margin) calc(32px + env(safe-area-inset-bottom,0px))}
.drawer:popover-open{display:flex}
.drawer .top{display:flex;align-items:center;justify-content:space-between;height:62px}
.drawer nav{margin-top:40px;display:flex;flex-direction:column;gap:6px}
.drawer nav a{font-size:30px;font-weight:800;letter-spacing:-.02em;padding:12px 0}
.drawer .btn{margin-top:auto;width:100%}
@media (max-width:1024px){.nav-links{display:none}.burger{display:flex}}
.foot{background:var(--base);padding:var(--s9) 0 var(--s7)}
.foot-in{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:var(--s7)}
.foot h4{margin:0 0 14px;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--cyan-deep)}
.foot a.f{display:block;font-size:15px;color:var(--muted);line-height:2.1}
.foot a.f:hover{color:var(--cyan)}
.foot .base-row{margin-top:var(--s8);display:flex;justify-content:space-between;gap:20px;
  flex-wrap:wrap;font-size:14px;color:var(--dim)}
@media (max-width:860px){.foot-in{grid-template-columns:1fr 1fr;gap:var(--s6)}}
@media (max-width:520px){.foot-in{grid-template-columns:1fr}}
@media (max-width:1024px){
  .nav .btn{display:none}
  .brand .a{font-size:14px;letter-spacing:.16em}
  .brand .b{font-size:8.5px;letter-spacing:.26em}
  .brand img{height:36px;width:36px}}
.nav a[href*="sopros"],.nav-links a[href*="sopros"]{display:inline-flex;align-items:center;gap:7px}
.nav-cube{width:18px;height:18px;flex:none;display:inline-block;vertical-align:-3px;
  filter:drop-shadow(0 0 7px rgba(186,168,228,.6))}
.nav a[href*="lumen"],.nav-links a[href*="lumen"]{color:#EBC98A!important;
  text-shadow:0 0 10px rgba(212,162,76,.6),0 0 26px rgba(212,162,76,.32);transition:text-shadow .25s}
.nav a[href*="lumen"]:hover,.nav-links a[href*="lumen"]:hover{
  text-shadow:0 0 14px rgba(212,162,76,.85),0 0 36px rgba(212,162,76,.45)}
.brand svg,.brand img{width:46px!important;height:46px!important}
.brand b,.brand .a{font-size:18px!important;letter-spacing:.26em!important}
.brand span,.brand .b{font-size:10.5px!important;letter-spacing:.34em!important;margin-top:5px!important}
.brand{gap:14px!important}
@media (max-width:820px){
  .brand svg,.brand img{width:38px!important;height:38px!important}
  .brand b,.brand .a{font-size:15px!important;letter-spacing:.2em!important}
  .brand span,.brand .b{font-size:8.5px!important;letter-spacing:.28em!important}}
.skip{position:absolute;left:-9999px}
.skip:focus{left:24px;top:24px;z-index:99;background:var(--cyan);color:#04121F;padding:10px 16px;border-radius:999px}
/* popover drawer: reset the user agent popover box so the drawer keeps its design */
.drawer{inset:0;width:auto;height:auto;margin:0;border:0;color:var(--ink);overflow:auto}
.drawer::backdrop{background:transparent}
/* stacking guarantee: main is its own stacking context, so no page block, whatever its
   z-index, can paint over the site header (z-index 20) or swallow its clicks. This replaces
   the pointer-events bandage the gallery carried. */
main{isolation:isolate}
/* focus containment for the open drawer, no JavaScript: while the popover is open the page
   behind it is visibility:hidden, which removes it from the tab order and the accessibility
   tree. The drawer covers the viewport, so nothing visible changes. */
body:has(#drawer:popover-open) main,body:has(#drawer:popover-open) footer,body:has(#drawer:popover-open) .skip{visibility:hidden}