/* ==========================================================================
   Stevee portfolio: dark retro theme
   --------------------------------------------------------------------------
   1. Theme tokens      (change colours/fonts/sizes here)
   2. Base
   3. Header + top nav  (full width, pinned to the top)
   4. Window component  (the boxes with striped title bars)
   5. Buttons, status, tags
   6. Home: hero + status panel
   7. Layout (main + sidebar)
   8. Work cards + grids
   9. Tables (games)
   10. About, guestbook, contact
   11. Sidebar boxes
   12. Work page: pinned header + sidebar, current-section highlight
   13. Lightbox
   14. Footer
   15. Small screens

   Sizes are in rem, so the whole site scales with the root font size.
   The root grows a little on big monitors (see section 2).
   ========================================================================== */

/* 1. Theme tokens ------------------------------------------------------- */
:root {
  --accent: #ffb000;          /* main brand colour (logo, buttons, current page) */

  --bg: #0b0c12;              /* page background */
  --panel: #141625;           /* window body */
  --panel-2: #1d2033;         /* thumbnails, table headers */
  --panel-3: #0e0f17;         /* inset panels (status, contact list), footer */
  --bar-neutral: #262940;     /* title bar of grey windows */
  --line: #2f3350;            /* borders */
  --line-soft: #22253a;       /* row dividers */
  --zebra: #181a2b;           /* alternate table rows */

  --text: #e6e4dc;
  --text-2: #c9c8d6;
  --muted: #9a9cb5;
  --ink: #0e0f17;             /* text on bright title bars */
  --link: #38d6e8;
  --ok: #9be15d;              /* "open for work" */
  --busy: #ff7a3d;            /* "booked up" */

  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --font-pixel: "Silkscreen", var(--font-mono);

  --gap: 1.5rem;
  --max: 100rem;                       /* widest the content gets */
  --pad-x: clamp(16px, 3vw, 48px);     /* space at the left/right screen edges */

  /* Set by JS to the real heights; these are just starting values. */
  --header-h: 4rem;
  --work-head-h: 0px;
}

/* 2. Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 100%; scroll-behavior: smooth; }
@media (min-width: 1440px) { html { font-size: 106.25%; } }  /* 17px */
@media (min-width: 1920px) { html { font-size: 112.5%; } }   /* 18px */
@media (min-width: 2400px) { html { font-size: 125%; } }     /* 20px */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }

a { color: var(--link); }
a:hover { color: var(--accent); }

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

/* Anchor jumps land below the pinned header. */
[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }

h1, h2, h3, p { margin: 0; }

[hidden] { display: none !important; }

/* Centres content at --max width with side padding. */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--pad-x);
}

.container {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--gap) var(--pad-x) 3rem;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.stack { display: flex; flex-direction: column; gap: var(--gap); }

.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 100;
  background: var(--accent);
  color: var(--ink);
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-weight: 600;
}
.skip-link:focus { top: 8px; }

.mono { font-family: var(--font-mono); }
.muted { color: var(--muted); }

.noscript {
  border: 2px solid var(--busy);
  padding: 1rem;
  font-family: var(--font-mono);
}

/* 3. Header + top nav --------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--line);
}

.topnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.topnav__links {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  overflow-x: auto;            /* phones: swipe the links sideways instead of wrapping */
  scrollbar-width: none;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 500;
}
.topnav__links::-webkit-scrollbar { display: none; }

.topnav__brand {
  flex: 0 0 auto;
  font-family: var(--font-pixel);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  margin-right: 1.25rem;
}

.topnav__links a:not(.topnav__brand) {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 4rem;
  padding: 0 1.125rem;
  color: var(--text);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}
.topnav__links a:not(.topnav__brand):hover { background: var(--panel-2); color: var(--text); }
.topnav__links a[aria-current],
.topnav__links a[aria-current]:hover { background: var(--accent); color: var(--ink); }

.topnav__status { flex: 0 0 auto; }

/* 4. Window component --------------------------------------------------- */
/* Set the colour per window with style="--c: #hex". */
.window {
  --c: var(--line);
  border: 2px solid var(--c);
  background: var(--panel);
  min-width: 0;
  transition: box-shadow 200ms ease;
}

.window__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--c);
  color: var(--ink);
  padding: 0.4375rem 0.75rem;
}

.window__close {
  flex: 0 0 auto;
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid currentColor;
}

.window__title {
  font-family: var(--font-pixel);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.4;
}

.window__stripes {
  flex: 1;
  height: 9px;
  opacity: 0.35;
  background: repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 3px);
}

.window__action {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  color: inherit;
  text-transform: uppercase;
  white-space: nowrap;
}
a.window__action:hover { color: inherit; text-decoration: none; }

.window__body { padding: 1.25rem; display: flex; flex-direction: column; gap: 1.25rem; }

.window--neutral { --c: var(--line); }
.window--neutral .window__bar { background: var(--bar-neutral); color: var(--text); }
.window--neutral .window__close { border-color: var(--muted); }
.window--neutral .window__title { font-size: 0.9375rem; }

.section-blurb { font-size: 1rem; color: var(--muted); }

.empty {
  border: 1px dashed var(--line);
  padding: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--muted);
}
.empty code { color: var(--text); }

/* 5. Buttons, status, tags ---------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0 1.5rem;
  border: 2px solid var(--text);
  background: var(--panel);
  color: var(--text);
  box-shadow: 4px 4px 0 var(--line);
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 80ms ease, box-shadow 80ms ease;
}
.btn:hover { color: var(--text); transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--line); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--line); }

/* Primary buttons take the colour of the window they sit in (or --accent). */
.btn--primary {
  --b: var(--c, var(--accent));
  --s: color-mix(in srgb, var(--b) 28%, #000);
  background: var(--b);
  border-color: var(--b);
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--s);
}
.btn--primary:hover { color: var(--ink); box-shadow: 5px 5px 0 var(--s); }
.btn--primary:active { box-shadow: 1px 1px 0 var(--s); }

.btn--small { min-height: 2.875rem; font-size: 0.9375rem; padding: 0 1.125rem; }

@media (prefers-reduced-motion: reduce) { .btn, .window { transition: none; } }

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
}
.status::before { content: ""; width: 0.5625rem; height: 0.5625rem; background: currentColor; }
.status--open { color: var(--ok); }
.status--busy { color: var(--busy); }

.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.8125rem; text-transform: uppercase; }
.tags span { border: 1px solid var(--line); padding: 0.25rem 0.5625rem; }

.swatch { flex: 0 0 auto; width: 0.5625rem; height: 0.5625rem; background: var(--c); }

/* 6. Home: hero + status panel ------------------------------------------ */
.hero {
  padding: 2.5rem;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 2.5rem;
}

.hero__text { flex: 1 1 30rem; min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; }

.hero__logo {
  font-family: var(--font-pixel);
  font-size: clamp(2.75rem, 7vw, 5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 2px;
  color: var(--accent);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.hero__role {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 1.1875rem;
  font-weight: 500;
  text-transform: uppercase;
}

.cursor { display: inline-block; width: 0.6875rem; height: 1.375rem; background: var(--accent); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }

.hero__intro { font-size: 1.125rem; color: var(--text-2); max-width: 38rem; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; padding-top: 0.25rem; }

.status-panel {
  flex: 1 1 20rem;
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--panel-3);
  font-family: var(--font-mono);
  font-size: 0.875rem;
}
.status-panel__row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line-soft);
  text-transform: uppercase;
}
.status-panel__row:last-child { border-bottom: 0; }
.status-panel__row > :first-child { color: var(--muted); }
.status-panel__row > :last-child { text-align: right; text-transform: none; }

/* Page header (work page, 404) */
.page-head { padding: 2rem 2.5rem; }
.page-head__titles { display: flex; flex-direction: column; gap: 0.75rem; }
.page-head__crumbs { font-family: var(--font-mono); font-size: 0.875rem; color: var(--muted); text-transform: uppercase; }
.page-head__title { font-family: var(--font-pixel); font-size: clamp(2.5rem, 5vw, 3.75rem); font-weight: 700; line-height: 1; letter-spacing: 2px; color: var(--accent); }
.page-head__intro { font-size: 1.0625rem; color: var(--text-2); max-width: 44rem; }

/* 7. Layout ------------------------------------------------------------- */
.layout { display: flex; flex-wrap: wrap; gap: var(--gap); align-items: flex-start; }
.layout__main { flex: 999 1 36rem; min-width: 0; display: flex; flex-direction: column; gap: var(--gap); }
.layout__side { flex: 1 1 17rem; min-width: 0; display: flex; flex-direction: column; gap: var(--gap); }

/* 8. Work cards + grids ------------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
  gap: 1.5rem 1.25rem;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--text);
  text-decoration: none;
}
.card:hover { color: var(--text); }

.card__media {
  position: relative;
  display: block;
  aspect-ratio: var(--ratio, 16 / 9);    /* per section: "ratio" in content/sections.js */
  background: var(--panel-2);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color 120ms ease;
}
.card__media img,
.card__media video { width: 100%; height: 100%; object-fit: cover; transition: transform 240ms ease; }
.card:hover .card__media,
.card:focus-visible .card__media { border-color: var(--c); }
.card:hover .card__media img,
.card:hover .card__media video { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .card__media img, .card__media video { transition: none; } }

.card__play {
  position: absolute;
  left: 0.5rem;
  bottom: 0.5rem;
  background: var(--ink);
  color: var(--c);
  font-size: 0.75rem;
  padding: 0.125rem 0.375rem;
  font-family: var(--font-mono);
}

.card__empty,
.thumb__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--muted);
}

.card__title { font-size: 1.0625rem; font-weight: 600; }
.card:hover .card__title { text-decoration: underline; text-decoration-color: var(--c); }

.card__kind {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
}

.group { display: flex; flex-direction: column; gap: 0.875rem; }
.group__head { display: flex; align-items: center; gap: 0.75rem; }
.group__title {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c);
}
.group__head::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* 9. Tables ------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }

.data { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 0.9375rem; }
.data th {
  text-align: left;
  background: var(--panel-2);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  border: 1px solid var(--line);
  padding: 0.5rem 0.75rem;
}
.data td { border: 1px solid #2a2d45; padding: 0.625rem 0.75rem; vertical-align: top; color: var(--text-2); }
.data td strong { color: var(--text); }
.data tbody tr:nth-child(even) { background: var(--zebra); }
.data .col-thumb { width: 9rem; }

.thumb {
  position: relative;
  display: block;
  width: 7.75rem;
  height: 4.375rem;
  background: var(--panel-2);
  border: 1px solid var(--line);
  overflow: hidden;
}
.thumb img, .thumb video { width: 100%; height: 100%; object-fit: cover; }

/* 10. About, guestbook, contact ----------------------------------------- */
.about__top { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; }
.about__avatar { flex: 0 0 auto; width: 8rem; height: 8rem; object-fit: cover; border: 1px solid var(--line); background: var(--panel-2); }
.about__text { flex: 1 1 20rem; min-width: 0; display: flex; flex-direction: column; gap: 0.75rem; color: var(--text-2); }

.skills { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.skills fieldset { margin: 0; border: 1px solid var(--line); padding: 0.5rem 1.125rem 1rem; min-width: 0; }
.skills legend { padding: 0 0.5rem; font-family: var(--font-mono); font-size: 0.875rem; font-weight: 600; text-transform: uppercase; color: var(--c); }
.skills ul { margin: 0; padding-left: 1.25rem; color: var(--text-2); }

.guestbook { display: flex; flex-direction: column; }
.guestbook__entry { padding: 1rem 0; border-bottom: 1px dashed var(--line); }
.guestbook__entry:first-child { padding-top: 0; }
.guestbook__meta { font-family: var(--font-mono); font-size: 0.875rem; color: var(--c); }
.guestbook__meta span { color: var(--muted); }
.guestbook__quote { margin-top: 0.375rem; font-size: 1.25rem; font-style: italic; }
.guestbook__more { font-family: var(--font-mono); font-size: 0.875rem; text-transform: uppercase; }

.contact { flex-direction: row; flex-wrap: wrap; gap: var(--gap); align-items: flex-start; }
.contact__text { flex: 1 1 20rem; min-width: 0; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.contact__heading { font-family: var(--font-pixel); font-size: 1.625rem; line-height: 1.3; color: var(--c); text-transform: uppercase; }
.contact__intro { color: var(--text-2); }

.kv {
  flex: 1 1 21rem;
  min-width: 0;
  margin: 0;
  background: var(--panel-3);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.9375rem;
}
.kv__row { display: flex; gap: 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line-soft); }
.kv__row:last-child { border-bottom: 0; }
.kv dt { width: 6.5rem; flex: 0 0 auto; color: var(--muted); text-transform: uppercase; }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* 11. Sidebar boxes ----------------------------------------------------- */
.side-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; font-size: 1rem; }
.side-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.375rem;
  padding: 0 0.625rem;
  margin-inline: -0.625rem;
  border: 2px solid transparent;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.side-list .swatch { width: 0.6875rem; height: 0.6875rem; }
.side-list .side-list__sub { padding-left: 1.875rem; font-size: 0.9375rem; min-height: 2.125rem; }
.side-list__sub::before { content: "└"; color: var(--muted); }

.cta { border: 2px solid var(--accent); background: var(--panel); padding: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
.cta__title { font-family: var(--font-pixel); font-size: 1.125rem; color: var(--accent); text-transform: uppercase; }
.cta__text { font-size: 0.9375rem; color: var(--text-2); }
.cta__text b { font-family: var(--font-mono); color: var(--text); }

/* 12. Work page --------------------------------------------------------- */
/* Current section: boxed in the sidebar, glowing in the main column. */
.side-list li.is-active {
  border-color: var(--c, var(--accent));
  background: color-mix(in srgb, var(--c, var(--accent)) 14%, transparent);
}
.side-list li.is-active > a { color: var(--text); font-weight: 600; text-decoration: none; }

.window.is-active {
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent),
    0 0 36px -6px color-mix(in srgb, var(--c) 55%, transparent);
}

/* Big enough screens: pin the page header and the section menu, scroll only the work. */
@media (min-width: 900px) and (min-height: 600px) {
  .work-page { gap: 0; }

  .work-head {
    position: sticky;
    top: var(--header-h);
    z-index: 20;
    margin-top: -1rem;
    padding: 1rem 0 var(--gap);
    background: var(--bg);
  }
  .work-head .page-head {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 3rem;
    padding: 1.25rem 2rem;
  }
  .work-head .page-head__titles { gap: 0.5rem; }
  .work-head .page-head__title { font-size: clamp(2.25rem, 3.2vw, 3rem); }
  .work-head .page-head__intro { flex: 1 1 22rem; }

  .layout--work {
    display: grid;
    grid-template-columns: clamp(15rem, 19vw, 20rem) minmax(0, 1fr);
  }
  .layout--work .layout__side {
    position: sticky;
    top: calc(var(--header-h) + var(--work-head-h));
    max-height: calc(100vh - var(--header-h) - var(--work-head-h) - 1rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 8px 8px 0;       /* room for the button shadow */
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
  }
  .layout--work [id] { scroll-margin-top: calc(var(--header-h) + var(--work-head-h) + 0.25rem); }
}

/* 13. Lightbox ---------------------------------------------------------- */
.lightbox {
  --c: var(--accent);
  width: min(1400px, 94vw);
  max-height: 94vh;
  padding: 0;
  border: 2px solid var(--c);
  background: var(--panel);
  color: var(--text);
  overflow: auto;
}
.lightbox::backdrop { background: rgba(5, 6, 10, 0.86); }

.lightbox__count { font-family: var(--font-mono); font-size: 0.875rem; font-weight: 600; }

.lightbox__btn {
  min-width: 2.75rem;
  min-height: 2.125rem;
  border: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font: 600 1rem var(--font-mono);
  cursor: pointer;
}
.lightbox__btn:hover { background: var(--ink); color: var(--c); }

.lightbox__stage { position: relative; background: var(--panel-3); display: flex; align-items: center; justify-content: center; min-height: 240px; }
.lightbox__media { width: 100%; display: flex; justify-content: center; }
.lightbox__media img,
.lightbox__media video { max-height: 72vh; width: auto; max-width: 100%; object-fit: contain; }

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 4rem;
  border: 2px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font: 600 1.5rem var(--font-mono);
  cursor: pointer;
  z-index: 1;
}
.lightbox__nav:hover { border-color: var(--c); color: var(--c); }
.lightbox__nav--prev { left: 10px; }
.lightbox__nav--next { right: 10px; }

.lightbox__info { padding: 1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.lightbox__title { font-size: 1.375rem; font-weight: 600; }
.lightbox__desc { color: var(--text-2); max-width: 48rem; }

/* 14. Footer ------------------------------------------------------------ */
.site-footer {
  border-top: 2px solid var(--line);
  background: var(--panel-3);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding-block: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--muted);
  text-transform: uppercase;
}

/* 15. Small screens ----------------------------------------------------- */
@media (max-width: 760px) {
  .topnav__status { display: none; }   /* still shown in the home page status panel */
}

@media (max-width: 640px) {
  :root { --gap: 1.125rem; }
  .topnav__brand { margin-right: 0.5rem; }
  .topnav__links a:not(.topnav__brand) { min-height: 3.25rem; padding: 0 0.75rem; font-size: 0.875rem; }
  .hero, .page-head { padding: 1.5rem 1.125rem; }
  .window__body { padding: 1rem; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 1rem 0.75rem; }
  .card__title { font-size: 1rem; }
  .lightbox__nav { width: 2.25rem; height: 3.25rem; }
}