/* Steelfish: "Steelfish" = the wordmark (bold, unscaled); "Steelfish UI" = menu/labels (scaled up 20% like on areferences). */
@font-face { font-family: "Steelfish"; font-weight: 700; font-display: block;
  src: url("fonts/steelfish-bold.woff2") format("woff2"); }
@font-face { font-family: "Steelfish UI"; font-weight: 400; font-display: block; size-adjust: 120%;
  src: url("fonts/steelfish.woff2") format("woff2"); }
@font-face { font-family: "Steelfish UI"; font-weight: 700; font-display: block; size-adjust: 120%;
  src: url("fonts/steelfish-bold.woff2") format("woff2"); }
/* Barlow Condensed (SIL OFL): the readable face for paragraphs. */
@font-face { font-family: "Barlow Condensed"; font-weight: 400; font-display: swap;
  src: url("fonts/barlow-condensed-400.woff2") format("woff2"); }
/* Light Italic: the picture captions. */
@font-face { font-family: "Barlow Condensed"; font-weight: 300; font-style: italic; font-display: swap;
  src: url("fonts/barlow-condensed-300-italic.woff2") format("woff2"); }

:root {
  color-scheme: only light;
  --bg: #ffffff;
  --bg-soft: #f4f4f5;
  --text: #17171a;
  --text-muted: #6c6c75;
  --text-faint: #a4a4ad;
  --border: rgba(0, 0, 0, 0.08);
  --accent: #000000;

  --radius: 4px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* The admin can change many of the values below (app.js sets --hh, --fh, --bg, --radius, --c-menu ... on :root); without it, the defaults here are what you see.
     Text styles: --c-<kind> colour, --h-<kind> hover colour, --k-<kind> size factor, --f-<kind> font, --w-<kind> weight, --tt-<kind> capitals, --s-<kind> letter-spacing; kinds: brand, menu, lead, body, heading, list, buttons, footer, caption. */
  --header-height: var(--hh, 88px);
  --footer-height: var(--fh, 48px);   /* 76px on phones (two lines) */
  --photo-side: clamp(8px, 3.6vw, 96px);   /* left/right margin of the pictures only: wide on big screens (~92px at 2560px, ~69px at 1920px), shrinking with the window */
  --photo-top: clamp(var(--space-4), 1vw, var(--space-6));   /* gap between the header bar and the first row of pictures (and the About text): 24px from ~2400px up, 19px at 1920px, 16px under ~1600px */
  --main-top: var(--space-4);   /* page padding under the header; the gallery adds the rest of its top gap on its own (see .gallery) */
  --edge: 24px;   /* left/right margin of the texts (wordmark, menu, footer) ~ the gap above the wordmark */
  --gap: calc(clamp(16px, 2.8vw, 40px) * var(--gap-scale, 1));   /* --gap-scale: set by app.js when the admin changed the spacing (Layout page) */
  --side: var(--edge);   /* left/right margin of the page content: same as the header/footer texts */
  --cols: 4;
  --font: "Steelfish UI", "Arial Narrow", Impact, sans-serif;
  --font-brand: "Steelfish", Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Narrow", sans-serif;
  --font-readable: "Barlow Condensed", "Arial Narrow", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--footer-space, var(--footer-height));   /* --footer-space: the real height of the bottom line, measured by app.js (it grows when the buttons wrap) */
}
button { font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
.bg-anim body, .bg-anim .header, .bg-anim .footer { transition: background-color 0.4s; }   /* the page colour fades when the home page has its own (Design > Home); app.js sets .bg-anim once the first page is drawn, so nothing fades while loading */

/* ---------- header: wordmark left, category menu right ---------- */
.header {
  position: sticky; top: 0; z-index: 20;
  height: var(--header-height);
  padding: 0 var(--edge);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  background: var(--hbg, var(--bg));   /* fully opaque, like the footer */
  box-shadow: 0 1px 0 var(--hline, transparent);   /* the line under the header (Header page); a shadow, so it never changes the layout */
}
/* Wordmark: same recipe as the aREFERENCEs wordmark of the site - Steelfish Bold, letter-spacing .01em,
   57px (= the size fitted to a 270px sidebar), cursor 1cap tall, .03em after the text. The cursor is a touch thinner than the bold stems
   (.07em instead of .083em) and 20% see-through (opacity .8). */
.brand {
  --brand-size: min(57px, 13vw);
  --cur: var(--cursor, var(--c-brand, var(--accent)));   /* cursor colour: its own setting, else the colour of the name */
  display: inline-block; white-space: nowrap;
  font-family: var(--f-brand, var(--font-brand)); font-size: calc(var(--brand-size) * var(--k-brand, 1)); font-weight: var(--w-brand, 700);
  letter-spacing: var(--s-brand, 0.01em); line-height: 1; color: var(--c-brand, var(--text)); text-transform: var(--tt-brand, uppercase);
  cursor: pointer; user-select: none;
}
.brand .a { color: var(--c-brand, var(--accent)); }
.brand .cursor {
  display: inline-block; vertical-align: baseline;
  width: 0.07em; height: 0.72em; height: 1cap; margin-left: 0.03em;
  background: var(--cur); opacity: 0.8;   /* the blink animation only goes 0.8 -> 0 -> 0.8: its keyframes start from this value */
  /* as tall as the letters' ink, not just the flat capitals: the round letters (C, S, O) overshoot the cap line and the baseline by 0.0096em, the cursor is painted that much beyond its box (a shadow changes nothing in the layout, a taller box moved the line) */
  box-shadow: 0 -0.0096em 0 var(--cur), 0 0.0096em 0 var(--cur);
}
.brand .cursor.blinking { animation: blink 0.8s step-end infinite; }
.brand .cursor.hidden { visibility: hidden; }
@keyframes blink { 50% { opacity: 0; } }

.nav { display: flex; gap: var(--nav-gap, var(--space-6)); list-style: none; transform-origin: center; transition: transform 0.8s cubic-bezier(0.22, 0.7, 0.2, 1); }
.nav.no-anim { transition: none; }
.nav button {
  position: relative;
  padding: var(--space-2) 0;
  font-size: calc(1.2rem * var(--k-menu, 1)); font-family: var(--f-menu, inherit); font-weight: var(--w-menu, inherit);
  text-transform: var(--tt-menu, uppercase); letter-spacing: var(--s-menu, inherit);
  color: var(--c-menu, var(--text-muted));
  transition: color 0.2s;
}
.nav button::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2px;
  background: var(--h-menu, var(--text)); transition: right 0.25s;   /* the underline grows from the left by its `right` edge, not a transform: on the home page the menu is scaled up, and in Safari a transition on a transform inside it makes the whole menu a layer drawn small then enlarged (blurry on hover) */
}
.nav button:hover { color: var(--h-menu, var(--text)); }
.nav button.on { color: var(--h-menu, var(--text)); }
.nav button.on::after, .nav button:hover::after { right: 0; }
.nav .nav-about { margin-left: var(--space-4); }
.nav .nav-about button { color: var(--c-menu, var(--text-faint)); }
.nav .nav-about button:hover, .nav .nav-about button.on { color: var(--h-menu, var(--text-muted)); }

/* ---------- masonry grid: images keep their own ratio ---------- */
.main { padding: var(--main-top) var(--side) var(--space-8); overflow-x: clip; }   /* the page slides sideways inside #stage (app.js): whatever leaves the window is cut, it never adds a horizontal scrollbar */
.gallery { margin: max(0px, calc(var(--photo-top) - var(--main-top))) calc(var(--photo-side) - var(--side)) 0; }   /* pictures sit further from the page edges than the texts, and a bit further under the header too (the footer bar stays fixed on top, full width) */
.tile {
  position: relative;
  break-inside: avoid;
  margin-bottom: var(--gap);
  aspect-ratio: var(--ar);
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-soft);
  cursor: zoom-in;
}
.tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transition: opacity 0.5s, transform 0.6s;
}
.tile img.loaded { opacity: 1; }
.tile:hover img { transform: scale(1.03); }
.tile.edge { box-shadow: 0 0 0 var(--edge-w, 1px) var(--edge-c, #e4e4e7); }   /* a picture with white edges: set by app.js; a shadow, so it never moves the layout */
.tile.hidden, .cell.hidden { display: none; }
/* A section with its captions under the pictures (admin: "Captions under the pictures"; Professional Work by default): a grid instead of columns. A cell spans two rows (the picture,
   the caption) of the grid it sits in (subgrid), so the captions of a row line up whatever the height of the pictures: they start under the tallest picture of the row. */
.gallery.rows { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gap); }
.gallery.rows .gallery-break { grid-column: 1 / -1; height: 0; }
.cell { display: grid; grid-row: span 2; grid-template-rows: subgrid; min-width: 0; }
.cell .tile { margin-bottom: 0; align-self: start; }
.tcap {
  align-self: start; margin-bottom: var(--gap); white-space: pre-line;   /* the gap under the caption row is the gap between two rows of pictures */
  font-family: var(--f-caption, var(--font-readable)); font-weight: var(--w-caption, 300); font-style: italic; font-size: calc(1.1rem * var(--k-caption, 1)); line-height: 1.3;
  text-transform: var(--tt-caption, none); letter-spacing: var(--s-caption, 0.01em); color: var(--c-caption, var(--text-muted));
}
.tcap:not(:empty) { padding-top: var(--space-3); }
/* A section without captions: blocks (pictures, videos) of columns of pictures of their own height, dealt out by app.js (layoutGallery) so that the order is left to right, then row by row */
.mblock { display: flex; gap: var(--gap); align-items: flex-start; }
.mcol { flex: 1 1 0; min-width: 0; }
.tile.link { cursor: pointer; }   /* clicking opens the picture's link instead of the big view */
.tile.pending, .cell.pending { opacity: 0; }   /* hidden until the visible pictures are loaded, then everything appears together */
.tile.enter, .cell.enter { animation: rise 0.5s both; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }

/* ---------- footer ---------- */
.footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  min-height: var(--footer-height);
  padding: 0 var(--edge);
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  background: var(--fbg, var(--bg));
  border-top: 1px solid var(--fline, var(--border));
  color: var(--text-faint); font-size: 0.96rem; line-height: 1; white-space: nowrap;
}
.footer.center { justify-content: center; gap: var(--space-6); }   /* Footer page: everything in the middle */
.footer.center .social { justify-content: center; }
.footer .copy {
  color: var(--c-footer, var(--text-faint)); font-size: calc(0.96rem * var(--k-footer, 1)); font-family: var(--f-footer, inherit); font-weight: var(--w-footer, inherit);
  text-transform: var(--tt-footer, none); letter-spacing: var(--s-footer, inherit);
}
.footer .social { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2) var(--space-4); min-width: 0; }
/* The buttons of the bottom line and of "Elsewhere" on the About page: the same look */
.footer .social a, .about-block.inline a {
  font-size: calc(1.08rem * var(--k-buttons, 1)); font-family: var(--f-buttons, inherit); font-weight: var(--w-buttons, inherit);
  text-transform: var(--tt-buttons, uppercase); letter-spacing: var(--s-buttons, inherit);
  text-decoration: none; color: var(--c-buttons, var(--text));
}
.footer .social a:hover, .about-block.inline a:hover { color: var(--h-buttons, var(--accent)); text-decoration: underline; text-underline-offset: 4px; }
/* Footer page > Buttons: outlined or filled instead of plain text (these rules come after the plain ones on purpose) */
.look-outline a, .look-filled a { padding: 0.5em 0.9em; border-radius: var(--radius); line-height: 1.1; }
.footer .look-outline a, .about-block .look-outline a { border: 1px solid currentColor; }
.footer .look-filled a, .about-block .look-filled a { background: var(--c-buttons, var(--text)); color: var(--bg); }
.footer .look-filled a:hover, .about-block .look-filled a:hover { background: var(--h-buttons, var(--accent)); color: var(--bg); }
.footer .look-outline a:hover, .footer .look-filled a:hover, .about-block .look-outline a:hover, .about-block .look-filled a:hover { text-decoration: none; }

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: var(--bg);   /* plain, fully opaque white */
  display: flex; align-items: center; flex-direction: column; gap: var(--lb-gap, var(--space-3));   /* --lb-top / --lb-side / --lb-bottom / --lb-gap: the margins set in the admin (Design > Big view), computer and phone each their own */
  padding: var(--lb-top, var(--space-8)) var(--lb-side, calc(var(--side) + 60px)) var(--lb-bottom, var(--space-6));
  opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s;
}
/* The stage always takes the room above the caption, loaded or not: the caption never jumps to the middle while the picture is still loading. */
.lightbox #lbStage { flex: 1 1 0; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: 100%; max-height: 100%;
  border-radius: var(--radius); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.14);
}
.lightbox img.edge { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.14), 0 0 0 var(--edge-w, 1px) var(--edge-c, #e4e4e7); }
/* The caption row is locked: always the same height (room for --cap-lines caption lines, a longer caption is cut) and always the same width (from the arrows' left edge to their right edge), whatever the picture or its caption.
   Its height decides how much room the picture gets, so a row that grew or shrank with the caption made the pictures jump a few pixels while skipping.
   The caption is centered in the window; the counter stays on the right edge, aligned with the arrows and the close button. */
.lightbox { --cap-lines: 2; --cap-lh: calc(1.3 * 1.2rem * var(--k-caption, 1)); --cap-h: calc(var(--cap-lines) * var(--cap-lh)); --lb-chrome: calc(var(--lb-top, 32px) + var(--lb-bottom, 24px) + var(--lb-gap, 12px) + var(--cap-h)); }   /* --lb-chrome: what the picture's room is short of the window's height (the videos' size follows it) */
.lightbox .cap {
  flex: none; align-self: stretch; margin-inline: calc(var(--side) - var(--lb-side, calc(var(--side) + 60px))); height: var(--cap-h);   /* the row reaches --side on both sides, whatever the side margin of the picture */
  display: grid; grid-template-columns: 1fr minmax(0, 46rem) 1fr; grid-template-areas: ". c k"; align-items: baseline; align-content: start; column-gap: var(--space-6);
  font-size: 1rem; text-transform: uppercase; color: var(--text-muted);
}
.lightbox .cap b { color: var(--accent); font-weight: 600; }
.lightbox .cap-text { grid-area: c; white-space: pre-line; text-align: center; font-family: var(--f-caption, var(--font-readable)); font-weight: var(--w-caption, 300); font-style: italic; font-size: calc(1.2rem * var(--k-caption, 1)); line-height: 1.3; max-height: calc(var(--cap-lines) * var(--cap-lh)); overflow: hidden; text-transform: var(--tt-caption, none); letter-spacing: var(--s-caption, 0.01em); color: var(--c-caption, var(--text-muted)); }
.lightbox .cap-count { grid-area: k; justify-self: end; text-align: right; white-space: nowrap; }
@media (min-width: 701px) {   /* Design > Big view > Text (computer): the caption left / center / right, the counter left / right. Centered = both side columns equal, so it is exactly in the middle; left or right = it takes the room the counter leaves. */
  .lightbox[data-count="left"] .cap { grid-template-areas: "k c ."; }
  .lightbox[data-count="left"] .cap-count { justify-self: start; text-align: left; }
  .lightbox[data-cap="left"] .cap, .lightbox[data-cap="right"] .cap { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "c k"; }
  .lightbox[data-cap="left"][data-count="left"] .cap, .lightbox[data-cap="right"][data-count="left"] .cap { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "k c"; }
  .lightbox[data-cap="left"] .cap-text, .lightbox[data-cap="right"] .cap-text { max-width: 46rem; }
  .lightbox[data-cap="left"] .cap-text { justify-self: start; text-align: left; }
  .lightbox[data-cap="right"] .cap-text { justify-self: end; text-align: right; }
}
.lb-btn {
  position: absolute; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--border); background: var(--bg);
  transition: background 0.2s, color 0.2s;
}
.lb-btn:hover { background: var(--text); color: var(--bg); }
.lb-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lb-prev { left: var(--side); top: 50%; transform: translateY(-50%); }
.lb-next { right: var(--side); top: 50%; transform: translateY(-50%); }
.lb-close { right: var(--side); top: var(--space-4); }


/* ---------- about: a page, like the other menu entries - text only, same margins as the gallery ---------- */
.page { animation: rise 0.5s both; }
[hidden] { display: none !important; }
/* the block is centered: horizontally in the window, and vertically in the room between the header and the footer (min-height = that room; a long text just makes the page scroll).
   .main has 16px above and 32px below: the top margin makes both sides 32px, so the middle of the box is the middle of the room. */
.about-page {
  margin: calc(var(--about-top, var(--space-8)) - var(--main-top)) 0 0;   /* --about-top: the distance under the header, set by app.js (admin > Design > About: Text distance from the header, or the banner's own Space under the header) */
  min-height: calc(100vh - var(--header-height) - var(--footer-space, var(--footer-height)) - var(--about-top, var(--space-8)) - var(--space-8));   /* the room starts --about-top under the header: centered text is centered in what is left */
  display: flex; flex-direction: column; justify-content: var(--about-v, center); align-items: var(--about-ai, center);   /* banner, portrait and text are each centered; all the text is center-aligned */
  text-align: var(--about-ta, center);   /* About page > Display: --about-v / --about-ai / --about-ta / --about-jc / --about-w are set by app.js */
}
.about-page.has-banner { justify-content: flex-start; }   /* with a banner the page starts right under the header, so its distance to the header is exactly --about-top */
.about-text { width: fit-content; max-width: min(var(--about-w, 54rem), 100%); }   /* as wide as its text (54rem at most), so what you see is what is centered */

/* Banner (set in the admin): under the header, above the text. Width: the text's width / the pictures' width / the whole window. Height: % of the window's height. */
.about-banner { --ban-h: 35; --ban-focus: 50%; height: calc(var(--ban-h) * 1vh); margin-bottom: var(--space-8); border-radius: var(--radius); overflow: hidden; background: var(--bg-soft); }
.about-banner img { width: 100%; height: 100%; object-fit: cover; object-position: var(--ban-fx, 50%) var(--ban-focus); transform: scale(var(--ban-z, 1)); transform-origin: var(--ban-fx, 50%) var(--ban-focus); display: block; opacity: 0; transition: opacity 0.5s; }   /* --ban-z: zoom, --ban-fx / --ban-focus: the part that stays in view */
.about-banner img.loaded { opacity: 1; }
.about-banner.ban-text { width: min(var(--about-w, 54rem), 100%); }
.about-banner.ban-page { align-self: stretch; margin-inline: calc(var(--photo-side) - var(--side)); }   /* same left/right edges as the picture grids */
.about-banner.ban-full { align-self: stretch; margin-inline: calc(var(--side) * -1); border-radius: 0; }   /* edge to edge: cancels the page's side padding */

/* Small portrait above the text */
.about-portrait { width: var(--por-w, 96px); aspect-ratio: var(--por-ar, 4 / 5); object-fit: cover; border-radius: var(--por-r, var(--radius)); background: var(--bg-soft); margin-bottom: var(--space-6); display: block; }   /* Portrait: --por-* come from the admin (size, shape) */
.about-text .lead {
  font-family: var(--f-lead, var(--font-readable)); font-weight: var(--w-lead, 400); font-size: calc(2rem * var(--k-lead, 1)); line-height: 1.35;
  text-transform: var(--tt-lead, none); letter-spacing: var(--s-lead, inherit); color: var(--c-lead, var(--text));
}
.about-text p + p { margin-top: var(--space-4); }
.about-text p:not(.lead) {
  font-family: var(--f-body, var(--font-readable)); font-weight: var(--w-body, 400); font-size: calc(1.3rem * var(--k-body, 1)); line-height: 1.55;
  text-transform: var(--tt-body, none); letter-spacing: var(--s-body, inherit); color: var(--c-body, var(--text-muted));
}
.about-text p { white-space: pre-line; }   /* a line break typed in the admin stays a line break */
.about-text .lead + p { margin-top: var(--space-6); }
.about-block { margin-top: var(--space-12); display: flex; flex-direction: column; align-items: var(--about-ai, center); gap: var(--space-2); }
.about-block h3 {
  font-size: calc(1.05rem * var(--k-heading, 1)); font-family: var(--f-heading, inherit); font-weight: var(--w-heading, 400);
  text-transform: var(--tt-heading, uppercase); letter-spacing: var(--s-heading, inherit); color: var(--c-heading, var(--text-faint));
}
.about-block ul { list-style: none; display: flex; flex-direction: column; align-items: var(--about-ai, center); gap: var(--space-1); }
.about-block:not(.inline) ul {
  font-size: calc(1.35rem * var(--k-list, 1)); font-family: var(--f-list, inherit); font-weight: var(--w-list, inherit);
  text-transform: var(--tt-list, uppercase); letter-spacing: var(--s-list, inherit); color: var(--c-list, inherit);
}
.about-block a { text-decoration: none; }
.about-block:not(.inline) a:hover { color: var(--h-list, var(--text-muted)); }
/* "Elsewhere": the same row of buttons as the bottom line of the site (same look, same order; the button rules are with the footer's) */
.about-block.inline ul { flex-direction: row; flex-wrap: wrap; justify-content: var(--about-jc, center); gap: var(--space-1) var(--space-4); }

/* ---------- smaller screens ---------- */
@media (max-width: 1200px) { :root { --cols: 3; } }
@media (max-width: 1000px) { :root { --cols: 2; } }
@media (max-width: 700px) {
  :root { --cols: 2; --gap: calc(8px * var(--gap-scale, 1)); --side: var(--space-4); --edge: var(--space-4); --photo-side: 8px; --photo-top: 8px; --main-top: var(--space-2); --header-height: auto; --footer-height: 76px; }
  .header { flex-direction: column; align-items: flex-start; gap: var(--space-1); padding: var(--space-3) var(--space-4) var(--space-2); }
  .nav { gap: var(--space-1) var(--space-4); flex-wrap: wrap; width: 100%; }
  .nav .nav-about { margin-left: 0; }
  .about-page { margin-top: 0; }   /* phones: the text starts right under the header, no centering */
  .about-text .lead { font-size: calc(1.6rem * var(--k-lead, 1)); }
  .nav button { white-space: nowrap; font-size: calc(1.05rem * var(--k-menu, 1)); padding: var(--space-1) 0; }
  .main { padding: var(--main-top) var(--space-4) var(--space-6); }
  .footer { padding: 0 var(--space-4); flex-direction: column-reverse; justify-content: center; align-items: stretch; gap: var(--space-2); }   /* the links on top, the copyright under them */
  .footer .social { justify-content: space-between; }
  .lightbox { padding: var(--lb-top, var(--space-8)) var(--lb-side, var(--space-2)) var(--lb-bottom, var(--space-4)); }
  /* phones: the caption sits above the counter, centered between the two 44px arrows that are on the bottom corners; same fixed height as on a big screen (three caption lines, narrower here, + the counter) */
  .lightbox { --cap-lines: 3; --cap-h: calc(var(--cap-lines) * var(--cap-lh) + 1.6rem + 8px); --lb-chrome: calc(var(--lb-top, 32px) + var(--lb-bottom, 16px) + var(--lb-gap, 12px) + var(--cap-h)); }
  .lightbox .cap { margin-inline: 0; padding: 0 60px 8px; grid-template-columns: minmax(0, 1fr); grid-template-areas: none; grid-template-rows: 1fr auto; row-gap: 2px; align-items: start; }
  .lightbox .cap-text { grid-column: 1; grid-row: 1; }
  .lightbox .cap-count { grid-column: 1; grid-row: 2; justify-self: center; text-align: center; }
  .lightbox[data-cap="left"] .cap-text { text-align: left; }   /* Design > Big view > Text (phone): the caption and the counter, each left / center / right */
  .lightbox[data-cap="right"] .cap-text { text-align: right; }
  .lightbox[data-count="left"] .cap-count { justify-self: start; text-align: left; }
  .lightbox[data-count="right"] .cap-count { justify-self: end; text-align: right; }
  .lb-prev { left: var(--space-2); top: auto; bottom: var(--space-4); transform: none; }
  .lb-next { right: var(--space-2); top: auto; bottom: var(--space-4); transform: none; }
}

/* ---------- keyboard focus, videos ---------- */
.tile:focus-visible, .nav button:focus-visible, .lb-btn:focus-visible, .brand:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
/* Play button of the videos (Layout page: show / size / colours). The circle is ::after, the triangle ::before (a mask, so it can have any colour). */
.tile.video::after, .tile.video::before {
  content: ""; position: absolute; left: 50%; top: 50%; display: var(--play-display, block); pointer-events: none; transition: transform 0.25s;
}
.tile.video::after {
  width: var(--play-size, 56px); height: var(--play-size, 56px); margin: calc(var(--play-size, 56px) / -2) 0 0 calc(var(--play-size, 56px) / -2);
  border-radius: 50%; background: var(--play-bg, rgba(255, 255, 255, 0.9)); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
.tile.video::before {
  z-index: 1; width: calc(var(--play-size, 56px) / 2); height: calc(var(--play-size, 56px) / 2); transform: translate(-50%, -50%);
  background: var(--play-fg, #17171a);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tile.video:hover::after { transform: scale(1.08); }
.tile.video:hover::before { transform: translate(-50%, -50%) scale(1.08); }
.lightbox .frame { width: min(100%, calc((100vh - var(--lb-chrome) - 16px) * var(--vr, 1.7778))); aspect-ratio: var(--vr, 1.7778); border: 0; border-radius: var(--radius); background: #000; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.14); }   /* --vr: the video's shape (width / height), set by app.js */
.empty { padding: var(--space-12) 0; color: var(--text-faint); font-size: 1.3rem; text-transform: uppercase; }


/* Preview inside the admin's Design page: nothing moves, so that every change shows at once */
html.preview *, html.preview ::before, html.preview ::after { animation: none !important; transition: none !important; }