:root {
  --bg: #0f1016;
  --bg-2: #171824;
  --panel: rgba(24, 26, 37, 0.78);
  --panel-solid: #181a25;
  --text: #f4f2fb;
  --muted: #b3b0c2;
  --line: rgba(214, 208, 239, 0.12);
  --accent: #b38cff;
  --accent-2: #93a1cc;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  --peach: #ffd7c3;
  --lavender: #e2d6ff;
  --peach-line: rgba(255, 215, 195, 0.5); /* --peach at 50% */
  --border-gradient: linear-gradient(135deg, #b38cff 0%, #d8d5df 52%, #ffd7c3 100%);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Inter, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(179, 140, 255, 0.16), transparent 28%),
    radial-gradient(circle at top right, rgba(147, 161, 204, 0.14), transparent 24%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }

/* Phone-width column on every screen, centred on desktop (like Instagram).
   Layout rules below use container queries on this column, not the window. */
.site-shell {
  width: min(480px, calc(100% - 20px));
  container-type: inline-size;
  margin: 0 auto;
  padding: 24px 0 40px;
  position: relative;
  z-index: 1;
}

.footer,
.hero,
.card,
.project-tile {
  backdrop-filter: blur(18px);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 16px 62px 16px 18px;
}

/* Hamburger menu: follows the visitor at the bottom of the screen, then comes to
   rest just above the footer links so it never covers them.
   Desktop: it sits beside the content column, just outside its right edge. */
.site-menu {
  position: sticky;
  bottom: 16px;
  z-index: 30;
  width: fit-content;
  margin: -44px -60px 0 auto;
}

.site-menu__toggle {
  list-style: none;
  display: grid;
  place-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--panel-solid), var(--panel-solid)) padding-box,
    var(--border-gradient) border-box;
}

.site-menu__toggle::-webkit-details-marker { display: none; }

.site-menu__toggle span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform .2s ease, opacity .2s ease;
}

/* Lines turn into an X while the menu is open */
.site-menu[open] .site-menu__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-menu[open] .site-menu__toggle span:nth-child(2) { opacity: 0; }
.site-menu[open] .site-menu__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-menu__panel {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  display: grid;
  min-width: 200px;
  padding: 8px;
  border: 1px solid var(--accent);
  border-radius: 20px;
  background: var(--panel-solid);
  box-shadow: var(--shadow);
}

.site-menu__panel a {
  padding: 10px 14px;
  border-radius: 12px;
  color: var(--muted);
  font-weight: 600;
}

.site-menu__panel a:hover { color: var(--text); background: rgba(255,255,255,0.05); }

.site-menu__panel a[aria-current="page"] { color: var(--peach); }

/* Flower beside the current page's name in the menu */
.site-menu__panel a[aria-current="page"]::after {
  content: "";
  display: inline-block;
  width: 13.5px;
  height: 13.5px;
  margin-left: 8px;
  vertical-align: -2px;
  background: url("assets/flower.svg") center / contain no-repeat;
}

.brand {
  font-family: Manrope, sans-serif;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.08;
  /* The name fades from peach to purple */
  background: linear-gradient(90deg, var(--peach), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nav {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
  color: var(--muted);
}

.nav a:hover,
.footer {
  margin-top: 40px;
  padding: 24px 0 8px;
  border-top: 1px solid var(--line);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 0;
  color: var(--accent);
  font-size: 0.82rem;
}

.footer__links a[aria-current="page"] { color: var(--peach); }

/* Bar separator between footer links */
.footer__links a + a::before {
  content: "|";
  display: inline-block;
  margin: 0 14px;
  color: var(--muted);
}

.footer__links a:hover { color: var(--peach); }

.footer__logo {
  display: block;
  margin: 20px auto 0;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), #8f74e8);
  color: #16151d;
  font-weight: 700;
  border: 1px solid transparent;
  box-shadow: 0 14px 28px rgba(125, 76, 207, 0.25);
}

.button--ghost {
  background:
    linear-gradient(var(--panel-solid), var(--panel-solid)) padding-box,
    var(--border-gradient) border-box;
  color: var(--text);
  border: 2px solid transparent;
  padding: 13px 19px; /* 1px more than .button so the thinner outline keeps the same button size */
  box-shadow: none;
  font-weight: 400;
  letter-spacing: 0.06em;
}

.button--wide {
  min-width: min(320px, 100%);
}

main { padding: 24px 0; }

.card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.hero {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: 22px;
  padding: 34px;
}

.hero--simple {
  grid-template-columns: 1fr;
}

.hero--plain {
  border: 1px solid var(--line);
  background: var(--panel);
}

.hero--center {
  text-align: center;
  justify-items: center;
}

.hero h1,
.section-heading h2,
.feature h2,
.project-tile h3,
.page-hero h1 {
  margin: 0;
  font-family: Manrope, sans-serif;
  font-weight: 800;
  line-height: 1.08;
}

.hero h1 {
  font-size: clamp(3rem, 7vw, 5.5rem);
  max-width: 10ch;
}

.hero--center h1 {
  max-width: none;
  color: var(--peach);
}

.profile-bubble {
  width: 170px;
  height: 170px;
  margin: 0 auto 22px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid transparent;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  background:
    linear-gradient(var(--panel-solid), var(--panel-solid)) padding-box,
    var(--border-gradient) border-box;
}

.profile-bubble--large {
  width: 184px;
  height: 184px;
}

.profile-bubble--resume {
  margin: 0 auto 32px;
}

.eyebrow.profile-tagline {
  margin: 0 0 24px;
  color: var(--lavender);
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0.12em;
  /* Shrinks with the column so the line never wraps (text is ~51em wide) */
  font-size: min(0.76rem, calc((100cqw - 8px) / 51));
}

/* Resume page: even 24px gaps between photo, name and Hello card */
.topbar.topbar--resume {
  justify-content: center;
  padding: 0 18px;
  margin-bottom: 18px;
}

/* Outline flower to the right of the name on every page; absolute so the name stays centred */
.topbar .brand { position: relative; }

.topbar .brand::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 4px);
  width: 16px;
  height: 16px;
  margin-top: -12px;
  background: url("assets/flower-outline.svg") center / contain no-repeat;
}

.main--resume { padding-top: 0; }

/* Inner pages: same space below the name as above it (39px each) */
.topbar + main { padding-top: 7px; }

.main--resume > .page-hero:first-child { margin-top: 0; }

/* Home page buttons sit first, right under the tagline, above the Hello card */
.main--resume > .section--home-links { padding: 0 0 8px; }

/* Home page buttons: a flower appears on each side on hover; they spin in opposite directions on click (see home.js) */
.main--resume .link-stack .button { position: relative; }

.main--resume .link-stack .button::before,
.main--resume .link-stack .button::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 15px;
  height: 15px;
  margin-top: -7.5px;
  background: url("assets/flower.svg") center / contain no-repeat;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.main--resume .link-stack .button::before { right: calc(100% + 14px); }
.main--resume .link-stack .button::after { left: calc(100% + 14px); }

.main--resume .link-stack .button:hover::before,
.main--resume .link-stack .button:hover::after,
.main--resume .link-stack .button:focus-visible::before,
.main--resume .link-stack .button:focus-visible::after,
.main--resume .link-stack .button.is-spinning::before,
.main--resume .link-stack .button.is-spinning::after {
  opacity: 1;
  transform: scale(1);
}

.main--resume .link-stack .button.is-spinning::before { animation: flower-spin 0.6s ease-in-out reverse; }
.main--resume .link-stack .button.is-spinning::after { animation: flower-spin 0.6s ease-in-out; }

@keyframes flower-spin {
  from { transform: rotate(0deg) scale(1); }
  to { transform: rotate(360deg) scale(1); }
}

/* Home buttons invert to a gradient fill: on hover (mouse), while tapped (touch), and while the flowers spin.
   Hover is limited to mouse devices so a tapped button doesn't stay inverted on phones. */
.main--resume .link-stack .button.is-spinning {
  background: var(--border-gradient) border-box;
  color: #16151d;
}

@media (hover: hover) {
  .main--resume .link-stack .button:hover {
    background: var(--border-gradient) border-box;
    color: #16151d;
  }
}

@media (hover: none) {
  .main--resume .link-stack .button:active {
    background: var(--border-gradient) border-box;
    color: #16151d;
  }
}

@media (prefers-reduced-motion: reduce) {
  .main--resume .link-stack .button::before,
  .main--resume .link-stack .button::after { transition: none; }
}

/* Even 24px gap between the Hello card and Present Interests */
.main--resume > .page-hero + .details-grid { margin-top: 24px; }

/* Home page: Hello card uses the same purple tint as Present Interests */
.main--resume > .page-hero {
  background: linear-gradient(145deg, rgba(179,140,255,0.18), rgba(147,161,204,0.10));
}

/* Home page: Hello text and Present Interests share one size */
.main--resume .page-hero .lede,
.main--resume .list-card ul {
  font-size: 14px;
  line-height: 1.7;
}

.profile-bubble img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Crop to match LinkedIn: head and shoulders, face slightly left of centre */
  transform-origin: 68% 42%;
  transform: scale(2);
}

.eyebrow,
.section-label {
  margin: 0 0 14px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.76rem;
  color: var(--accent-2);
  font-weight: 700;
}

.lede,
.feature p,
.project-tile p,
.page-copy p,
.stat strong,
.footer p { color: var(--muted); }

.lede { font-size: 1.08rem; max-width: 58ch; line-height: 1.7; }

.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

.hero__stats {
  display: grid;
  gap: 14px;
}

.stat {
  padding: 18px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
}

.stat span {
  display: block;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-2);
  margin-bottom: 8px;
}

.stat strong { display: block; font-size: 1rem; line-height: 1.5; }

.grid,
.cards {
  display: grid;
  gap: 18px;
}

.cards--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.link-stack {
  display: grid;
  gap: 12px;
  justify-items: center;
}

.section-heading--center {
  text-align: center;
  margin-bottom: 10px;
}

.section-heading--center .section-label {
  margin-bottom: 8px;
}

.cards--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--intro { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; }

.feature {
  padding: 28px;
  min-height: 220px;
}

.feature--dark {
  background: linear-gradient(145deg, rgba(179,140,255,0.18), rgba(147,161,204,0.10));
  color: #fff;
}

.feature--dark p,
.feature--dark .section-label { color: rgba(255,255,255,0.72); }

.section { padding: 26px 0 8px; }

.section-heading { margin-bottom: 16px; }

.section-heading h2,
.page-hero h1,
.feature h2 { font-size: clamp(2rem, 4vw, 3.2rem); }

.cards--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.project-tile {
  padding: 24px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
}

.project-tile--centered { text-align: center; }

.project-tile__soon { margin: 0; font-size: 14px; }

.project-tile__desc { margin: 0 0 18px; line-height: 1.7; }

/* Project names stand out from the description text, like the client names on the Design page */
.project-tile__desc strong { color: var(--text); font-weight: 700; }

/* No trailing gap when a label is the only thing in its card */
.eyebrow:last-child,
.project-tile__tag:last-child { margin-bottom: 0; }

.project-tile__tag {
  display: inline-flex;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(179,140,255,0.16);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 14px;
}

.page-hero {
  padding: 34px;
  margin-top: 16px;
}

.page-hero--centered {
  border: 1px solid var(--line);
  background: var(--panel);
}

.page-hero .lede { max-width: 62ch; }

.page-hero + .cards { margin-top: 18px; }

.page-hero--centered {
  text-align: center;
}

.page-hero--centered .lede {
  margin-left: auto;
  margin-right: auto;
}

.intro-points {
  width: min(100%, 700px);
  margin: 22px auto 0;
  padding-left: 20px;
  text-align: left;
  color: var(--muted);
  line-height: 1.8;
}

.hero--center .lede {
  margin-left: auto;
  margin-right: auto;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.screenshots-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.screenshot-card {
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.screenshot-card img {
  display: block;
  width: 100%;
  height: auto;
}

.screenshot-card figcaption {
  padding: 12px 14px 14px;
  font-size: 0.88rem;
  color: var(--muted);
}

.gallery figure {
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1.08;
  object-fit: cover;
}

/* Photo work: transparent square box, each photo scaled down to fit inside it */
.gallery--photo figure {
  background: transparent;
  box-shadow: none;
}

.gallery--photo img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 28px;
}

/* Centre any leftover photos on the last row */
.gallery.gallery--photo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.gallery--photo figure { width: calc((100% - 48px) / 4); }

@container (max-width: 1024px) {
  .gallery--photo figure { width: calc((100% - 16px) / 2); }
}

@container (max-width: 760px) {
  .gallery--photo figure { width: 100%; }
  /* Phones: keep the square box, with a slimmer inset */
  .gallery--photo img { padding: 16px; }
}

/* Design page: one card per client, matching the original site's order */
.design-client {
  margin-top: 18px;
  padding: 34px;
  text-align: center;
}

.design-client__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  padding: 16px 24px;
  border-radius: 18px;
  /* White tile with the same gradient ring as the profile photo */
  border: 4px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--border-gradient) border-box;
}

.design-client__logo img {
  display: block;
  max-width: min(100%, 480px);
  max-height: 90px;
  width: auto;
  height: auto;
}

.design-client > .section-label {
  text-align: center;
  color: var(--muted);
}

/* Single-brand logos: same-size white square */
.design-client__logo--square {
  width: 128px;
  height: 128px;
  padding: 18px;
}

.design-client__logo--square img {
  max-width: 100%;
  max-height: 100%;
}

.design-client__desc {
  max-width: 62ch;
  margin: 0 auto 24px;
  color: var(--muted);
  line-height: 1.7;
}

/* Client and business names stand out from the description text */
.design-client__desc strong {
  color: var(--text);
  font-weight: 700;
}

.design-client__desc a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Each design piece sits whole on a white square, one per row */
.gallery.gallery--design {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.gallery--design figure {
  flex: none;
  width: min(520px, 100%);
  border: 0;
  background: none;
  box-shadow: none;
}

.design-tile {
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  aspect-ratio: 1 / 1;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
}

/* Each piece keeps its own shape inside the square, with a thin black outline */
.gallery--design img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  border: 2px solid #000;
}

.gallery--design figcaption { text-align: center; }

.gallery figcaption {
  padding: 12px 14px 14px;
  font-size: 0.88rem;
  color: var(--muted);
}

.details-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 18px;
  margin-top: 18px;
}

.details-grid--single {
  grid-template-columns: 1fr;
}

.list-card {
  padding: 24px;
}

.list-card ul {
  margin: 14px 0 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.8;
}

.section--social {
  display: block;
}

@container (max-width: 1024px) {
  .hero,
  .grid--intro,
  .cards--four,
  .cards--two,
  .cards--three,
  .gallery,
  .details-grid { grid-template-columns: 1fr 1fr; }
}

@container (max-width: 760px) {
  .topbar,
  .footer,
  .hero,
  .page-hero { padding: 18px; }
  .topbar { position: static; flex-wrap: wrap; justify-content: center; }
  .nav { width: 100%; order: 3; justify-content: center; }
  .hero,
  .grid--intro,
  .cards--four,
  .cards--two,
  .cards--three,
  .gallery,
  .details-grid { grid-template-columns: 1fr; }
  .hero h1 { max-width: 100%; }
}

/* Contact page: stacked cards matching the home page's Present Interests */
.about-cards {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

.about-card p:not(.section-label),
.about-card ul {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}

.about-card ul { margin: 0; }

.about-card a {
  color: var(--accent);
}

.about-card a:hover { color: var(--peach); }

/* Soft peach outline on every card and photo tile (gradient outlines are left alone) */
.card,
.gallery--photo figure { border-color: var(--peach-line); }

@container (max-width: 480px) {
  /* Keep all five footer links on one line on phones (shrinks with the column) */
  .footer__links { font-size: min(0.78rem, calc((100cqw - 48px) / 25)); flex-wrap: nowrap; white-space: nowrap; }
  .footer__links a + a::before { margin: 0 6px; }
}

/* Short pages: fill the screen so the footer links sit near the bottom of the phone */
.site-shell--fill {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.site-shell--fill > main { flex: 1 0 auto; }

/* Phones: no room beside the column, so the menu sits inside it on its own row */
@media (max-width: 760px) {
  .site-menu { margin: 24px 0 0 auto; }

  .site-menu + .footer { margin-top: 16px; }
}

/* Hobby projects: AI game and 3D Notebook, with the start screen large and the other screens as small shots below */
.game-shots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.game-shots figure {
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
}

.game-shots figure:first-child {
  grid-column: 1 / -1;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.game-shots img {
  display: block;
  width: 100%;
  aspect-ratio: 2720 / 1483;
  object-fit: cover;
}

/* 3D Notebook screenshots are wider than the game's; the large one shows in full */
.game-shots--notebook img { aspect-ratio: 2 / 1; object-position: top left; }
.game-shots--notebook figure:first-child img { aspect-ratio: auto; }

/* Images that open in the full-screen viewer (lightbox.js) */
.is-zoomable {
  cursor: zoom-in;
  transition: opacity 0.2s ease;
}

.is-zoomable:hover { opacity: 0.88; }

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

.has-lightbox { overflow: hidden; }

.lightbox {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--text);
  background: var(--bg);
  outline: none;
}

.lightbox::backdrop { background: var(--bg); }

/* One photo per screen; swipe or scroll sideways to move between them */
.lightbox__track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.lightbox__track::-webkit-scrollbar { display: none; }

.lightbox__slide {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 64px 16px 56px;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

/* Images grow to fill the screen, but stop at the size they'd be on a 15-inch laptop
   (about 1440 x 900) so small originals don't get stretched blurry on big monitors */
.lightbox__slide img {
  display: block;
  flex: 1 1 0;
  width: 100%;
  min-height: 0;
  max-width: 1296px;
  max-height: 780px;
  object-fit: contain;
}

/* Wider screens: keep the photo clear of the side arrows */
@media (min-width: 761px) {
  .lightbox__slide { padding-left: 72px; padding-right: 72px; }
}

.lightbox__slide figcaption {
  font-size: 0.88rem;
  color: var(--muted);
  text-align: center;
}

.lightbox__count {
  position: absolute;
  top: 22px;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
  font-size: 0.88rem;
  color: var(--muted);
}

.lightbox__close,
.lightbox__arrow {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  background: rgba(24, 26, 37, 0.8);
  font: 400 28px/1 Inter, sans-serif;
  cursor: pointer;
}

.lightbox__close:hover,
.lightbox__arrow:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }

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

.lightbox__close { top: 12px; right: 12px; }

.lightbox__arrow { top: 50%; transform: translateY(-50%); }
.lightbox__arrow--prev { left: 12px; }
.lightbox__arrow--next { right: 12px; }
.lightbox__arrow:disabled { opacity: 0.3; cursor: default; }
.lightbox__arrow[hidden] { display: none; }

/* Phones: swiping does the work, so the arrows move out of the way to the bottom corners */
@media (max-width: 760px) {
  .lightbox__arrow { top: auto; bottom: 10px; transform: none; }
}

/* Discourage saving images (protect-images.js blocks the right-click menu and dragging) */
img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none; /* no "Save Image" on a long press on iPhone */
}