/* ---------------------------------------------------------------- fonts */
/* Self-hosted Raleway. Weights: 300 light, 400 regular, 600 semibold, 700 bold. */
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('../fonts/raleway-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('../fonts/raleway-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/raleway-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/raleway-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/raleway-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/raleway-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/raleway-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/raleway-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Self-hosted Zilla Slab and Open Sans — the two faces the legacy sidebar
   used for the brand. Webnode set them on the logo block itself: the block
   carried `zilla-slab logo-28` and the slogan span carried `open-sans
   slogan-15`, which is why the rest of the site is Raleway but these two
   lines are not. Both are used only there, so one weight each is enough.
   The latin-ext subsets carry no glyph either current string needs (every
   accent in "Stáj Václav Kolín" and "Jezdecký oddíl" is latin-1) but are
   shipped because the title is editable and a Czech name can easily contain
   č/ř/š/ž; unicode-range means a browser only fetches them if it needs them. */
@font-face { font-family: 'Zilla Slab'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/zilla-slab-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F; }
@font-face { font-family: 'Zilla Slab'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/zilla-slab-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/open-sans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F; }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/open-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* --------------------------------------------------------------- tokens */
:root {
  --bg-light: #fff;
  --bg-dark: #272727;
  --text: #888;
  --heading: #222;
  --text-on-dark: rgba(255, 255, 255, .9);
  --muted: #c3c3c3;
  --rule: #e6e6e6;
  --rule-dark: rgba(255, 255, 255, .18);

  --sidebar-w: 15.625rem;   /* 250px — fits the 225px logo with breathing room */
  --measure: 62.5rem;       /* 1000px content column */
  --gap: 2.5rem;
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-light);
  color: var(--text);
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.75;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--heading); text-decoration: none; border-bottom: 1px solid var(--rule); }
a:hover { color: var(--text); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--bg-dark); color: #fff; padding: .5rem 1rem;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------ typography */
h1, h2, h3, h4 {
  color: var(--heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.25;
  margin: 0 0 1rem;
}
h1 { font-size: 2.25rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.1875rem; }
p { margin: 0 0 1.25rem; }

.prose { text-align: justify; }
.prose ul, .prose ol { margin: 0 0 1.25rem; padding-left: 1.25rem; }
.prose li { margin-bottom: .35rem; }
.prose img { margin: 1.5rem auto; }
.prose table { border-collapse: collapse; width: 100%; margin: 0 0 1.5rem; }
.prose th, .prose td { border-bottom: 1px solid var(--rule); padding: .5rem .75rem; text-align: left; }

.page-title { margin-bottom: .5rem; }
/* --text (#888) on light bands (event.html.twig): 3.54:1 — short of AA's
   4.5:1, but --text is the site's mandated body-text token and the legacy
   design; --muted (#c3c3c3) here was 1.76:1, far below even the 3:1
   large-text floor (I4). --muted is kept for the dark-band case
   (partials/tile.html.twig, always inside .band--dark): 8.48:1 on #272727. */
.page-date { color: var(--text); font-size: .875rem; display: block; margin-bottom: 2rem; }

/* ---------------------------------------------------------------- bands */
/* Full-bleed alternating sections, as on the legacy site. */
.band { width: 100%; padding: 3.75rem 0; }
.band__inner { max-width: var(--measure); margin: 0 auto; padding: 0 1.5rem; }
.band--light { background: var(--bg-light); color: var(--text); }
.band--dark { background: var(--bg-dark); color: var(--text-on-dark); }
.band--dark h1, .band--dark h2, .band--dark h3, .band--dark h4 { color: #fff; }
.band--dark a { color: #fff; border-bottom-color: var(--rule-dark); }
.band--dark .page-date { color: var(--muted); }
.band--pattern {
  background-color: var(--bg-dark);
  background-image: url('../images/pattern.png');
  background-repeat: repeat;
  background-position: center center;
}

/* --------------------------------------------------------------- layout */
/* Kept out of the tab order by default: below the breakpoint it is restored
   to visible/focusable so keyboard users can reach and toggle it (its focus
   ring lives with the other mobile-nav rules below); above the breakpoint
   .nav-burger is display: none (nothing for it to control), so without this
   a keyboard user could still tab onto it with no visible focus indicator. */
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; visibility: hidden; }
.shell { display: flex; align-items: flex-start; min-height: 100vh; }
/* The column stretches to the full height of the shell and its last band takes
   whatever height the page content left over. Without this the column ended
   where its content ended and the strip below fell through to the white body
   background — on the dark templates (default, listing) that read as the dark
   panel stopping halfway down the page while the sidebar ran on to the footer.
   Growing the band rather than painting .content keeps whatever that band is,
   .band--pattern included. */
.content {
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.content > .band:last-child { flex: 1 0 auto; }

/* ------------------------------------------------- 37.5em and below */
@media (max-width: 37.4375em) {
  .shell { display: block; }
  .band { padding: 2.25rem 0; }
  h1 { font-size: 1.625rem; }
  .prose { text-align: left; }
}

/* -------------------------------------------------------------- top bar */
.topbar {
  background: var(--bg-dark);
  color: var(--text-on-dark);
  font-size: .8125rem;
  line-height: 1.4;
}
.topbar__inner {
  padding: .625rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  align-items: center;
  justify-content: space-between;
}
.topbar a { color: var(--text-on-dark); border-bottom: 0; }
.topbar a:hover { color: #fff; }
.topbar__news { text-transform: uppercase; letter-spacing: .06em; }
.topbar__contact { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }

/* -------------------------------------------------------------- sidebar */
.sidebar {
  flex: 0 0 var(--sidebar-w);
  width: var(--sidebar-w);
  background: var(--bg-light);
  border-right: 1px solid var(--rule);
  align-self: stretch;
}
.sidebar__sticky { position: sticky; top: 0; padding: 1.5rem 1rem 2.5rem; }
.sidebar__logo { display: block; border-bottom: 0; margin-bottom: 1.5rem; text-align: center; }
.sidebar__logo img { display: block; width: 100%; max-width: 14.0625rem; height: auto; margin: 0 auto .75rem; }
/* The brand text is inside the logo link, so it must not inherit the link
   colour or the underline the generic `a` rule applies. */
/* Sizes and weights are the legacy site's own: the logo block was
   `zilla-slab logo-28`, and .logo.logo-28 is 1.075rem below 37.5em and
   1.75rem above it. The slogan was `open-sans slogan-15` = .75rem. Neither
   was uppercased and .claim set letter-spacing: 0. */
.sidebar__title {
  display: block;
  color: var(--heading);
  font-family: 'Zilla Slab', Georgia, serif;
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.3;
}
.sidebar__subtitle {
  display: block;
  margin-top: .25rem;
  color: var(--text);
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  font-size: .75rem;
  font-weight: 400;
}
/* The explicit colours above would otherwise make the brand link the one
   link on the site that ignores hover. */
.sidebar__logo:hover .sidebar__title { color: var(--text); }

.menu { list-style: none; margin: 0; padding: 0; }
.menu__item { margin: 0; }
.menu__link {
  display: block;
  padding: .5rem .25rem;
  color: var(--heading);
  font-size: .875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--rule);
}
.menu__link:hover { color: var(--text); }
.menu__link--active { color: var(--text); }
.menu--sub { margin: 0 0 .5rem .75rem; }
.menu--sub .menu__link {
  font-size: .8125rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  border-bottom: 0;
  padding: .3125rem .25rem;
}

/* ------------------------------------------------------------ hamburger */
/* Visible only below the breakpoint; the checkbox in base.html.twig holds state. */
.nav-burger { display: none; }

/* --------------------------------------------------------------- footer */
.footer {
  background: var(--bg-dark);
  color: var(--text-on-dark);
  font-size: .8125rem;
}
.footer__inner { max-width: var(--measure); margin: 0 auto; padding: 1.5rem; text-align: center; }

/* ------------------------------------------------- 37.5em and below */
@media (max-width: 37.4375em) {
  .sidebar {
    flex: none;
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
  .sidebar__sticky { position: relative; padding: 1rem 1.5rem; }
  /* Left-aligned here, and kept clear of the burger, which is absolutely
     positioned at right: 1.5rem with a 2rem width. */
  .sidebar__logo { text-align: left; padding-right: 3.75rem; }
  /* 5rem rather than the 7.5rem this used to be: the badge is the tallest
     thing in the mobile header, and at 120px it pushed the first heading
     most of a screen down. The mark still reads clearly at 80px — below
     about 64px the circular lettering starts to fill in. */
  .sidebar__logo img { max-width: 5rem; margin: 0 0 .5rem; }
  /* .logo.logo-28 on the legacy site: 1.075rem below this breakpoint. */
  .sidebar__title { font-size: 1.075rem; }

  .nav-toggle { visibility: visible; }

  .nav-burger {
    display: block;
    position: absolute;
    top: 3.25rem;
    right: 1.5rem;
    width: 2rem;
    padding: .375rem 0;
    cursor: pointer;
  }
  .nav-burger span {
    display: block;
    height: 2px;
    margin: .3125rem 0;
    background: var(--heading);
  }
  #nav-toggle:focus ~ .shell .nav-burger { outline: 2px solid var(--heading); outline-offset: 2px; }

  .menu { display: none; }
  #nav-toggle:checked ~ .shell .menu { display: block; }

  .topbar__inner { justify-content: center; text-align: center; }
}

/* -------------------------------------------------------------- articles */
.article .prose > p:first-child { margin-top: 0; }

.back-link { margin-top: 2.5rem; font-size: .875rem; }

.horse { display: flex; flex-wrap: wrap; gap: var(--gap); align-items: flex-start; }
.horse__body { flex: 1 1 22rem; min-width: 0; }
.horse__info { flex: 0 1 20rem; }
.horse__info h2 { font-size: 1.125rem; }

.info-table { border-collapse: collapse; width: 100%; }
.info-table th,
.info-table td {
  border-bottom: 1px solid var(--rule);
  padding: .5rem .25rem;
  text-align: left;
  vertical-align: top;
  font-size: .9375rem;
}
.info-table th {
  color: var(--heading);
  font-weight: 600;
  white-space: nowrap;
  width: 45%;
}

@media (max-width: 37.4375em) {
  .horse { display: block; }
  .horse__info { margin-top: 2rem; }
}

/* ----------------------------------------------------------------- tiles */
.tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
.tile { margin: 0; }
.tile a { display: block; border-bottom: 0; color: inherit; }

.tile__media {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, .06);
  aspect-ratio: 1 / 1;
}
.tile__img { width: 100%; height: 100%; object-fit: cover; }
.tile__media--empty { display: block; width: 100%; height: 100%; }

.tile__body { padding: .75rem 0 0; }
.tile__title {
  margin: .25rem 0 0;
  font-size: 1rem;
  color: #fff;
}
.tile .page-date { margin: 0; }

@media (max-width: 56.25em) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 37.4375em) {
  .tiles { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------- tile groups */
.tiles-group + .tiles-group { margin-top: var(--gap); }
.tiles-group__title { margin: 0 0 1.25rem; font-size: 1.25rem; }

/* -------------------------------------------------------------- galleries */
/* The aspect-ratio lives on the link, not on the figure, so that a figure can
   also hold a caption without the frame squeezing the photo to make room. */
.gallery { display: grid; gap: .75rem; margin: 2rem 0; }
.gallery__item { margin: 0; }
.gallery__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery a { border-bottom: 0; display: block; }
.gallery__caption {
  margin-top: .5rem;
  font-size: .8125rem;
  line-height: 1.4;
  text-align: center;
}

/* Home: one photo at a time, as the legacy slideshow showed them. The track
   does the work — scroll-snap makes it swipeable and arrow-key scrollable on
   its own, so this is a working carousel before js/gallery.js loads and still
   one if it never does. The photos are mixed portrait and landscape, hence
   `contain` in a fixed frame rather than the `cover` the grid variants use. */
.gallery--slideshow { display: block; position: relative; }
.gallery__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.gallery--slideshow .gallery__item {
  flex: 0 0 100%;
  scroll-snap-align: center;
}
.gallery--slideshow .gallery__item > a {
  aspect-ratio: 3 / 2;
  background: #000;
}
.gallery--slideshow .gallery__img { object-fit: contain; }
.gallery--slideshow .gallery__caption { font-size: .9375rem; }
.gallery__track:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Chrome that only makes sense once the script is driving it: the scrollbar
   is the no-JS affordance, so it goes away exactly when the dots arrive. */
.gallery--enhanced .gallery__track { scrollbar-width: none; }
.gallery--enhanced .gallery__track::-webkit-scrollbar { display: none; }
.gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}
.gallery__nav:hover, .gallery__nav:focus-visible { background: rgba(0, 0, 0, .8); }
.gallery__nav--prev { left: .75rem; }
.gallery__nav--next { right: .75rem; }
.gallery__dots {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: .75rem;
}
.gallery__dot {
  width: .5rem;
  height: .5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--muted);
  opacity: .45;
  cursor: pointer;
}
.gallery__dot--active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .gallery__track { scroll-behavior: auto; }
}

/* Feed: a tall single column, as the legacy photoFeed rendered. */
.gallery--photoFeed { grid-template-columns: repeat(var(--gallery-columns, 2), minmax(0, 1fr)); }
.gallery--photoFeed .gallery__item > a { aspect-ratio: 1 / 1; }

/* Horizontal feed: one scrollable row. */
.gallery--horizontalFeed {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.gallery--horizontalFeed .gallery__item {
  flex: 0 0 16rem;
  scroll-snap-align: start;
}
.gallery--horizontalFeed .gallery__item > a { aspect-ratio: 4 / 3; }

.gallery--grid { grid-template-columns: repeat(var(--gallery-columns, 3), minmax(0, 1fr)); }
.gallery--grid .gallery__item > a { aspect-ratio: 1 / 1; }

/* A horse's photographs share the row with the pedigree table, so the column
   they sit in is roughly half the page — three across would make each photo a
   thumbnail. The first one leads at full width; the rest pair off under it. */
.horse__body .gallery--grid {
  grid-template-columns: repeat(var(--gallery-columns, 2), minmax(0, 1fr));
  margin-top: 0;
}
.horse__body .gallery--grid .gallery__item:first-child { grid-column: 1 / -1; }
.horse__body .gallery--grid .gallery__item:first-child > a { aspect-ratio: 3 / 2; }

/* A whole album may carry one video alongside its photographs (Grav renders
   ![](clip.mp4) as a <video>). It sits in the same column as the gallery and
   never overflows it. */
.album__video {
  display: block;
  width: 100%;
  margin-top: 1.5rem;
  background: #000;
}

@media (max-width: 37.4375em) {
  .gallery--photoFeed,
  .gallery--grid,
  .horse__body .gallery--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery__nav { width: 2.25rem; height: 2.25rem; font-size: 1.35rem; }
  .gallery--horizontalFeed .gallery__item { flex-basis: 11rem; }
}

/* ------------------------------------------------------------- lightbox */
/* Built by js/gallery.js on the first click. Without the script every photo
   is still a plain link to the image, which is the whole fallback. */
.is-lightbox-open { overflow: hidden; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 3.5rem 1rem 2.5rem;
  background: rgba(0, 0, 0, .95);
}
.lightbox[hidden] { display: none; }

.lightbox__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  min-width: 0;
  max-height: 100%;
}
.lightbox__img {
  max-width: 100%;
  max-height: calc(100vh - 11rem);
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.lightbox__caption {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .75rem;
  color: rgba(255, 255, 255, .9);
  font-size: .9375rem;
  text-align: center;
}
.lightbox__count { color: var(--muted); font-size: .8125rem; }

.lightbox__close,
.lightbox__nav {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  line-height: 1;
  cursor: pointer;
}
.lightbox__close:hover, .lightbox__close:focus-visible,
.lightbox__nav:hover, .lightbox__nav:focus-visible { background: rgba(255, 255, 255, .28); }
.lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.125rem;
}
.lightbox__nav { width: 3rem; height: 3rem; font-size: 2rem; }
.lightbox__nav[hidden] { display: none; }

@media (max-width: 37.4375em) {
  .lightbox { padding: 3.25rem .5rem 1.5rem; gap: .25rem; }
  .lightbox__nav { width: 2.25rem; height: 2.25rem; font-size: 1.5rem; }
  .lightbox__img { max-height: calc(100vh - 10rem); }
}