.gal-scope{
  --gal-navy:#1D4E89;
  --gal-ink:#0F2648;
  --gal-accent:#F18321;
  --gal-line:#ECEBEB;
  --gal-muted:#6C6C6C;
  --gal-tint:#F7F8FA;
}
.gal-scope img{max-width:100%}
.gal-kicker{font-weight:700;text-transform:uppercase;color:var(--gal-accent)}
.gal-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 26px;border:1px solid transparent;border-radius:100px;background-color:var(--gal-accent);color:#fff;font-weight:500;font-size:15px;line-height:1.3;text-decoration:none;white-space:nowrap;transition:background-color .3s,translate .3s,color .3s,border-color .3s}
.gal-btn:hover{background-color:#d9720f;translate:0 -2px}
.gal-btn--ghost{background-color:transparent;border-color:var(--gal-line);color:var(--gal-ink)}
.gal-btn--ghost:hover{background-color:var(--gal-navy);border-color:var(--gal-navy);color:#fff}
/* ── chrome: a slim bar, pinned to the top of the viewport like the home
   page's nav ─────────────────────────────────────────────────────────── */
/* The bar is a direct child of <body>, so sticky positioning pins it for the
   whole page — the home page needs fixed only because its header sits inside the
   hero column, whose height would unpin a sticky bar the moment the hero left.
   Its containing block is the page, so it stays put as the grid scrolls under
   it; it is already opaque white with a hairline, so nothing has to change
   behind it. The lightbox is z-index 80, above this 60, so opening a photo
   still covers the bar. */
.gal-top{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--gal-line);background-color:#fff}
@media (min-width:1025px){.gal-top{gap:22px;padding:16px 60px}}
.gal-brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.gal-brand img{display:block;height:40px;width:auto}
@media (min-width:1025px){.gal-brand img{height:44px}}
.gal-top .gal-btn{height:40px;padding:0 18px;font-size:14px}
@media (min-width:1025px){.gal-top .gal-btn{height:44px;padding:0 24px}}
/* the menu is the site's own header nav, and it is the bar's flexible part: the
   action buttons keep their size and it takes what is left */
.gal-top nav{flex:0 1 auto}
.gal-top .gal-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
/* ── hero ──────────────────────────────────────────────────────────────── */
.gal-hero{display:grid;grid-template-columns:1fr;gap:18px;padding:56px 20px 40px;max-width:1500px;margin:0 auto}
@media (min-width:1025px){.gal-hero{padding:88px 60px 56px;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:40px;align-items:end}}
.gal-h1{margin:10px 0 0;color:var(--gal-navy);font-weight:600}
.gal-h1 em{font-style:normal;color:var(--gal-accent)}
.gal-lead{margin:14px 0 0;max-width:640px;color:var(--gal-muted)}
.gal-stats{display:flex;flex-wrap:wrap;gap:20px 40px;margin:22px 0 0;padding:0;list-style:none;border-top:1px solid var(--gal-line);padding-top:20px}
.gal-stat-value{display:block;color:var(--gal-accent);font-weight:700}
.gal-note{align-self:end;margin:0;padding:20px;border:1px solid var(--gal-line);border-left:3px solid var(--gal-navy);border-radius:20px;background-color:#fff;background-image:linear-gradient(180deg,rgba(29,78,137,.055),rgba(255,255,255,0));color:var(--gal-muted)}
.gal-note strong{display:block;color:var(--gal-navy);font-weight:600}
.gal-note p{margin:8px 0 0}
/* ── the grid ──────────────────────────────────────────────────────────── */
.gal-main{display:block;padding:0 20px 60px;max-width:1500px;margin:0 auto;width:100%}
@media (min-width:1025px){.gal-main{padding:0 60px 90px}}
.gal-grid{display:grid;grid-template-columns:1fr;gap:14px;margin:0}
@media (min-width:768px){.gal-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}}
@media (min-width:1025px){.gal-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}}
.gal-tile{display:flex;flex-direction:column;gap:12px;margin:0;min-width:0}
.gal-shot{position:relative;display:block;overflow:hidden;aspect-ratio:4/3;border:1px solid var(--gal-line);border-radius:20px;background-color:var(--gal-tint)}
@media (min-width:1025px){.gal-shot{border-radius:24px}}
.gal-shot img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.22,1,.36,1)}
.gal-shot:hover img{transform:scale(1.05)}
.gal-shot::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(15,38,72,.06);transition:box-shadow .4s}
.gal-shot:hover::after{box-shadow:inset 0 0 0 1px rgba(241,131,33,.55),0 22px 46px rgba(29,78,137,.14)}
.gal-tile--hero .gal-shot{aspect-ratio:16/10}
.gal-tile--portrait .gal-shot{aspect-ratio:3/4}
.gal-tile--tall .gal-shot{aspect-ratio:3/4}
.gal-tile--band .gal-shot{aspect-ratio:16/9}
@media (min-width:768px){
  .gal-tile--hero{grid-column:span 2}
  .gal-tile--band{grid-column:span 2}
  .gal-tile--hero .gal-shot{aspect-ratio:16/9}
  .gal-tile--band .gal-shot{aspect-ratio:2/1}
}
@media (min-width:1025px){
  .gal-tile--hero .gal-shot{aspect-ratio:16/9}
  .gal-tile--portrait .gal-shot{aspect-ratio:8/9}
  .gal-tile--band{grid-column:span 3}
  .gal-tile--band .gal-shot{aspect-ratio:3/1}
}
.gal-cap{display:flex;flex-direction:column;gap:2px;padding:0 2px}
.gal-cap-title{color:var(--gal-navy);font-weight:600}
.gal-cap-place{color:var(--gal-muted)}
/* ── lightbox: one :target per frame, so it needs no script at all ─────── */
.gal-lightbox{position:fixed;inset:0;z-index:80;display:none;place-items:center;margin:0;padding:clamp(16px,4vw,52px);background-color:rgba(8,16,30,.93)}
.gal-lightbox:target{display:grid}
.gal-lightbox img{width:auto;height:auto;max-width:100%;max-height:84vh;border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.gal-lightbox-close{position:absolute;top:16px;right:18px;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid rgba(255,255,255,.5);border-radius:100px;color:#fff;font-size:22px;line-height:1;text-decoration:none;transition:background-color .3s,color .3s}
.gal-lightbox-close:hover{background-color:#fff;color:var(--gal-ink);border-color:#fff}
body:has(.gal-lightbox:target){overflow:hidden}
/* ── footer ────────────────────────────────────────────────────────────── */
.gal-foot{margin-top:auto;border-radius:28px 28px 0 0;background-color:var(--gal-ink);color:#fff;padding:44px 20px 24px}
@media (min-width:1025px){.gal-foot{border-radius:44px 44px 0 0;padding:60px 60px 26px}}
.gal-foot-inner{display:grid;grid-template-columns:1fr;gap:22px;align-items:center;max-width:1500px;margin:0 auto}
@media (min-width:1025px){.gal-foot-inner{grid-template-columns:minmax(0,1fr) auto}}
.gal-foot-kicker{display:block;color:var(--gal-accent);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.gal-foot p{margin:10px 0 0;max-width:560px;color:rgba(255,255,255,.72)}
.gal-foot-actions{display:flex;flex-wrap:wrap;gap:10px}
.gal-foot-note{max-width:1500px;margin:34px auto 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.6)}
.gal-foot-note a{color:rgba(255,255,255,.85)}
/* ── motion ────────────────────────────────────────────────────────────── */
@keyframes galFadeUp{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
@supports (animation-timeline: view()){
  .gal-reveal{animation:galFadeUp .8s cubic-bezier(.22,1,.36,1) both;animation-timeline:view();animation-range:cover 20% cover 34%}
}
@media (prefers-reduced-motion: reduce){
  .gal-reveal{animation:none}
  .gal-shot img{transition:none}
}

/* ── menu (shared with the other pages) ── */
/* ===== The shared menu: one row of links, the same on every page =====
   Seven items do not fit the bar at every viewport it is shown at — the site's
   own four were already tight on the tablet band. Rather than wrap the bar or
   push it apart, the row is allowed to shrink and scroll sideways, with the
   scrollbar hidden so it reads as a plain menu. The menu appears from the site's
   own `md` breakpoint up, exactly as the home page shows it. */
header nav {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
header nav::-webkit-scrollbar {
  display: none;
}
/* the menu is a row of links, not a scrollable document: keep the scroll a
   sideways nudge and never let it swallow a vertical page scroll */
header nav a {
  scroll-margin: 0;
}
/* The menu item that names the page you are on. The home page has no item of its
   own — every anchor item points into it — so this only ever shows on /api/ and
   /gallery/, where the site's own bar has no such state. */
header nav a[aria-current='page'] {
  color: #26272a;
  font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
  header nav {
    scroll-behavior: auto;
  }
}