/* mariaymar.com — one stylesheet for all sixteen pages.
 *
 * The palette and the two typefaces are the live WordPress site's own, read
 * off its computed styles rather than chosen fresh: the site keeps its
 * appearance across the migration. Twenty Twenty-Four's defaults, in other
 * words, minus the 300 KB of block-editor CSS that came with them.
 *
 * Light only, deliberately. The original has no dark variant, and inventing
 * one would be a redesign smuggled in with a hosting move. */

:root {
  --base: #f9f9f9;        /* page ground */
  --base-2: #ffffff;      /* cards, gallery cells */
  --contrast: #111111;    /* headings */
  --contrast-2: #636363;  /* secondary text, captions */
  --contrast-3: #a4a4a4;  /* hairlines */
  --accent: #cfcabe;      /* rules */
  --accent-2: #c2a990;    /* links */
  --accent-3: #d8613c;    /* link hover, stars */

  /* Body copy is capped at a readable measure; photographs reach past it and
   * the grids wider still. Measured, not guessed: at 39rem the longest
   * article runs to 72 characters a line on average and 78 at the widest,
   * inside the 60-80 band. */
  --measure: 39rem;
  --figure: 52rem;
  --wide: 64rem;

  /* The header is its own, wider container — the WordPress original put it in
   * an `alignwide` block rather than the content column, and 72rem is that
   * block's 1280px. Seven nav items need 688px and the brand block about
   * 340px, so this leaves room to spare on one line.
   *
   * Not wider: at 80rem the header measured exactly a 1440px viewport, so it
   * stopped centring and ran edge to edge while the content below stayed
   * inset — the header looked misaligned rather than wide. */
  --header-width: 72rem;
}

/* Inter for body copy, Cardo for headings — the theme's pairing, self-hosted.
 *
 * Both are the `latin` subset from Google Fonts, not the theme's own files:
 * the theme ships Inter with every subset it has (327 KB) where the latin one
 * is 48 KB, and all but three characters this site renders fall inside it.
 * The exceptions are two arrow glyphs and one emoji, which fall back to a
 * system face — imperceptible for an arrow, and emoji always do.
 *
 * Self-hosted rather than linked: this site carries an Impressum, and
 * hotlinking Google Fonts from one is a documented legal risk. These are the
 * only font requests the pages make, and they go to the same origin. */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-var.woff2") format("woff2");
}

@font-face {
  font-family: Cardo;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/cardo-latin-400.woff2") format("woff2");
}

/* Border-box everywhere. Without it `max-width` sizes the *content* box, so
 * .wrap came out 45px wider than the value it was given and --header-width of
 * 80rem exceeded a 1440px viewport — which is why the header sat edge to edge
 * with no centring at all. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 112.5 % rather than a hard 18px, so a reader who has raised their browser's
 * default keeps the increase instead of having it overridden. At the usual
 * 16px default this computes to exactly 18px. */
html {
  font-size: 112.5%;
  -webkit-text-size-adjust: 100%;
}

/* Column layout so the footer sits at the bottom of the viewport on short
 * pages — the Impressum is four lines and would otherwise leave the footer
 * floating in the middle of the screen with empty page below it.
 *
 * `svh` before `vh`: on mobile browsers `100vh` is the height with the URL bar
 * hidden, so it overflows by the bar's height until you scroll. Browsers
 * without `svh` fall back to the `vh` line above. */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--base);
  color: var(--contrast-2);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

/* Takes the slack, so the footer is pushed down rather than centred.
 *
 * `width: 100%` is not redundant. A flex item normally stretches across the
 * cross axis, but that stretch is cancelled the moment a cross-axis margin is
 * `auto` — and .wrap centres itself with `margin: 0 auto`. Main therefore
 * collapsed to fit-content (747px of a 1440px viewport) the instant body
 * became a flex column. Stating the width restores the stretch; the auto
 * margins still centre it once max-width bites. */
main {
  flex: 1 0 auto;
  width: 100%;
}

.site-header,
.site-footer,
.hero {
  flex: none;
}

/* Skip link: visible only once it has focus. */
.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  padding: 0.5rem 0.9rem;
  background: var(--base-2);
  color: var(--contrast);
  border: 2px solid var(--accent-3);
}

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

/* --- Layout ------------------------------------------------------------- */

.wrap {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Constraining the children rather than the container is what lets prose,
 * photographs and grids share one column without a wrapper element around
 * every paragraph. The blocks are centred in the wrap, each at its own width:
 * prose narrowest, photographs wider, the grids widest. */
main.wrap > * {
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}

/* The h1 is exempt from the measure: it is set large, and a heading broken
 * over three lines in a narrow column reads worse than one that uses the
 * width it has. Centred, so it reads as a title over the column rather than
 * as a long first line of it. */
main.wrap > h1 {
  max-width: none;
  text-align: center;
}

main.wrap > .photo,
main.wrap > .photo-pair,
main.wrap > .photo-grid {
  max-width: var(--figure);
}

/* The offer reaches the same width as the photographs. At the measure it was
 * a box set into the column, which is the shape of a display advertisement;
 * at the figure width it is a band the page runs through. On the four pages
 * where it sits at the foot it now lines up with the photo pair above it. */
main.wrap > .offer {
  max-width: var(--figure);
}

main.wrap > .gallery,
main.wrap > .reviews {
  max-width: var(--wide);
}


main.narrow > * {
  max-width: var(--measure);
}

main.wrap {
  padding-top: 2.5rem;
  padding-bottom: 4rem;
}

/* --- Typography --------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: Cardo, Georgia, "Times New Roman", serif;
  font-weight: 400;
  color: var(--contrast);
  line-height: 1.2;
}

h1 {
  font-size: clamp(2rem, 1.5rem + 2vw, 2.9rem);
  margin: 0 0 1.5rem;
}

h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  margin: 2.75rem 0 0.9rem;
}

h3 {
  font-size: 1.35rem;
  margin: 2rem 0 0.7rem;
}

h4 {
  font-size: 1.12rem;
  margin: 1.6rem 0 0.5rem;
}

p, ul, ol {
  margin: 0 0 1.1rem;
}

ul, ol {
  padding-left: 1.3rem;
}

li {
  margin-bottom: 0.4rem;
}

.lead {
  font-size: 1.15rem;
  color: var(--contrast);
}

.address {
  color: var(--contrast);
}

/* The Spanish registration number is 53 characters without a single space in
 * it. Left alone, that one token is wider than a phone screen and drags the
 * whole page sideways, so it is allowed to break anywhere. */
.regnum {
  overflow-wrap: anywhere;
}

/* Label above a list — "Badezimmer", "Zahlungsplan". These are paragraphs and
 * not headings on purpose: that is what the WordPress original uses, and
 * promoting them would put fourteen new entries into the document outline. */
.group {
  margin-bottom: 0.3rem;
  color: var(--contrast);
  font-weight: 600;
}

.group + ul {
  margin-top: 0;
}

/* The amenity list on the apartment page: ten short groups that are a
 * reference table rather than prose. Set in two columns across the gallery's
 * width, because a single column of forty one-word items ran longer than
 * everything else on the page and was mostly whitespace to its right.
 *
 * `break-inside: avoid` on the group keeps a heading and its list together —
 * the wrapper exists for exactly this, since a bare `p` + `ul` pair has
 * nothing a column break can be told to respect.
 *
 * Two columns and not `auto-fit`: at three, the longest group name wraps.
 *
 * The breakpoint is in px, not rem: font-relative units in a media query are
 * measured against the browser's default size and not this document's 18px,
 * so `40rem` here would silently mean 640px anyway. Below it the list is one
 * column, because two columns of a bulleted list on a phone would be about
 * four characters wide.
 *
 * At 640px one item does wrap to a second line — "Parkmöglichkeiten auf der
 * Straße", the longest of the forty. Measured, and kept: halving a block that
 * is otherwise 1650px tall is worth one wrapped line in a reference list. */
.amenities {
  column-gap: 3rem;
}

@media (min-width: 640px) {
  .amenities {
    columns: 2;
  }
}

.amenities .group {
  break-inside: avoid;
  break-after: avoid;
}

.amenities ul {
  break-inside: avoid;
  margin-bottom: 1.4rem;
}

/* A column starts flush with its neighbour, so the first group in it must not
 * carry the top margin that separates it from the group above. */
.amenities > :first-child {
  margin-top: 0;
}

/* Callout — the arrival page's "Achtung" block. A guest who misses it drives
 * to the wrong place, so it gets a coloured edge and a tinted ground rather
 * than being a heading like any other. */
.callout {
  margin: 2rem auto;
  padding: 1.25rem 1.5rem 0.4rem;
  background: var(--base-2);
  border-left: 4px solid var(--accent-3);
  border-radius: 2px;
}

.callout > h3 {
  margin-top: 0;
  color: var(--accent-3);
}

a {
  color: var(--accent-3);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--contrast);
}

/* --- Header ------------------------------------------------------------- */

.site-header {
  background: var(--base-2);
  border-bottom: 1px solid var(--accent);
}

.site-header .wrap {
  max-width: var(--header-width);
  padding-top: 1.5rem;
  padding-bottom: 1.25rem;
}

/* Two columns — brand and claim left, navigation right, as the WordPress
 * original had it. Below the breakpoint the two stack, which is the only
 * thing that fits seven nav items on a phone.
 *
 * The breakpoint is derived, not picked: the nav needs 688px for its seven
 * items and the brand line "Casa Maria y Mar, La Gomera" needs about 340px,
 * which with the gap is 1064px of content — 70rem of viewport once the wrap
 * padding is added. Choosing a rounder number lower down only produced a nav
 * that wrapped onto a second line, which is what stacking already does, but
 * worse. Above the breakpoint the header container (--header-width) is what
 * keeps it on one line.
 *
 * `flex: none` on the nav is what makes that hold: without it the brand block
 * grows to fit its two-line claim and squeezes the nav into wrapping. The
 * claim is the part that should give way, so it is the part allowed to.
 *
 * `flex-end` rather than `center`: the brand block is two lines and the nav
 * one, so centring would leave the nav floating between them instead of
 * sitting on the claim's baseline. */
@media (min-width: 70rem) {
  .site-header .wrap {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2.25rem;
  }

  .brand-block {
    min-width: 0;
  }

  .site-header .tagline {
    margin-bottom: 0;
  }

  .site-header nav {
    flex: none;
  }

  .site-header nav ul {
    justify-content: flex-end;
  }
}

.brand {
  margin: 0;
  font-family: Cardo, Georgia, serif;
  font-size: 1.6rem;
  line-height: 1.2;
}

.brand a {
  color: var(--contrast);
  text-decoration: none;
}

.tagline {
  margin: 0.35rem 0 1.1rem;
  font-size: 0.92rem;
  color: var(--contrast-2);
}

.site-header nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header nav a {
  color: var(--contrast);
  text-decoration: none;
  font-size: 0.95rem;
}

.site-header nav a:hover,
.site-header nav [aria-current="page"] {
  color: var(--accent-3);
}

.site-header nav [aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* The language switch is the last nav item, set apart by a rule rather than
 * by distance so it reads as a switch and not as a seventh page. Its label is
 * a two-letter code, so the accessible name comes from aria-label on the link
 * — "EN" on its own tells a screen-reader user nothing. */
.nav-lang {
  padding-left: 1.4rem;
  border-left: 1px solid var(--accent);
}

.nav-lang a {
  color: var(--accent-3);
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* --- Call to action ----------------------------------------------------- */

/* The offer card supplies all the spacing around both of its columns, so
 * these two only have to shed the margins a ul and a p carry by default.
 * Neither ever stands on its own: nothing renders a .cta or a .badge outside
 * .offer. */
.cta {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* The two platform routes are set smaller than the direct one. They are the
 * alternatives, not the offer, and before this all three lines were within
 * half a point of each other, which made the order the only thing
 * distinguishing them.
 *
 * 0.88rem is 15.8px at the site's base — below the note under the direct
 * route, which is where these belong, and still above the size at which a
 * link stops being comfortable to read. */
.cta li {
  margin-bottom: 0.55rem;
  font-size: 0.88rem;
}

.cta-note {
  color: var(--contrast-2);
  font-size: 0.9rem;
}

/* Direct booking is the one option that costs the guest nothing extra and the
 * hosts no commission, and it used to be the last and quietest of three. It
 * gets the weight now: its own line for the note, a slightly larger link, and
 * a rule under it separating it from the two platforms rather than a box or a
 * button — the page has no buttons anywhere else, and inventing one here would
 * read as an advertisement in the middle of the owners' own words. */
.cta-direct {
  padding-bottom: 0.75rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid var(--accent);
}

/* Cardo, the heading face, on the one route that leads to the owners rather
 * than to a platform: the two booking sites get the body face, this one is
 * set in the type the page uses for its own voice. Larger than the body size
 * because Cardo runs optically smaller than Inter at the same value.
 *
 * Colour is the site's own link colour, deliberately not overridden: the warm
 * orange is what every other link on the page does, and a booking link that
 * invented its own would look like something bought. */
.cta-direct a {
  font-family: Cardo, Georgia, serif;
  font-size: 1.45rem;
}

.cta-direct .cta-note {
  display: block;
  margin-top: 0.1rem;
}

.jump {
  font-size: 0.98rem;
}

.jump a::before {
  content: "\27F6";
  margin-right: 0.5rem;
  color: var(--accent-2);
}

/* --- Hero --------------------------------------------------------------- */

/* Sits between the header and main. It carries the `wrap` class, so its width
 * is the same container as main's by construction — not two values that
 * happen to agree until one of them is edited. */
.hero {
  /* `width: 100%` for the same reason main needs it: as a flex item of the
   * body column, `margin: 0 auto` from .wrap cancels the cross-axis stretch,
   * and the box collapses to fit-content — which here is the intrinsic width
   * of the photograph rather than the width of the column. */
  width: 100%;
  padding-top: 1.75rem;
}

.hero .photo {
  margin: 0;
}

/* 2:1. The source photograph is 3:2, so the crop is vertical and centred —
 * object-fit keeps it from being squashed. */
.hero img {
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

/* --- Photos ------------------------------------------------------------- */

.photo {
  margin: 1.75rem auto;
}

.photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

.photo figcaption {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--contrast-2);
}

.photo-pair,
.photo-grid {
  display: grid;
  gap: 1.25rem;
  margin: 1.75rem auto;
}

.photo-pair {
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.photo-grid {
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.photo-pair .photo,
.photo-grid .photo {
  margin: 0;
}

/* --- Gallery ------------------------------------------------------------ */

/* Everything that belongs to a block wider than the text column, and would
 * otherwise sit indented against it: main caps its children at the text
 * measure and centres them, and the wide blocks are the exceptions.
 *
 * The reviews section solves this by carrying its own heading inside the wide
 * element. The gallery and the amenity list have no such wrapper to put a
 * heading in — a heading inside .amenities would be swept into a column — so
 * the frames are widened one by one instead. The "all pictures" link keeps
 * .jump for its arrow; only this instance of .jump is widened, not the one on
 * the arrival page. */
main.wrap > .gallery-heading,
main.wrap > .gallery-link,
main.wrap > .amenities-heading,
main.wrap > .amenities {
  max-width: var(--wide);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 1.1rem;
  margin: 2rem auto 3rem;
  padding: 0;
  list-style: none;
}

.gallery li {
  margin: 0;
}

.gallery a {
  display: block;
}

.gallery img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 2px;
  background: var(--accent);
}

.gallery span {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: var(--contrast-2);
}

/* --- Reviews ------------------------------------------------------------ */

.reviews {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--accent);
}

/* Multi-column rather than a grid.
 *
 * The reviews run from 29 to 987 characters. In a grid every row is as tall as
 * its tallest cell, so one long review leaves two card-sized holes beside it —
 * with this spread of lengths the page ends up more gap than content.
 * Multi-column packs them instead.
 *
 * The trade is that the visual order becomes column-major while the DOM stays
 * newest-first. For a set of independent, unranked quotations that is a fair
 * price; it would not be for anything where "next" means something. */
/* --- The offer: booking routes and the badge beside them ---------------- */

/* Findings 11 and 17 of the 2026-08 review. The routes now end four pages that
 * used to stop without one, and three links loose at the foot of an article
 * read as leftovers rather than as an offer. The rating stands beside them
 * because it is the strongest argument for taking one of them, and it used to
 * be three screens further down.
 *
 * A plate, not a card. The first version had a border and a rounded corner at
 * the width of the text column, and that is the shape of a text advertisement
 * — a reader recognised it as one before reading a word of it. The ground
 * still sets the block apart from the prose; what is gone is the outline
 * around it, the corner radius, and the arrows that made every line read as
 * "click here".
 *
 * Two columns where there is room for both, stacked below. The routes are
 * first in the source, so the stacked order is act-then-reason rather than a
 * large rating pushing the links off a phone screen. */
.offer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.5rem 2.5rem;
  margin: 0 0 2rem;
  padding: 1.75rem clamp(1.25rem, 4vw, 2rem);
  background: var(--base-2);
}

/* The two columns share the plate's extra width rather than leaving it all to
 * the routes. Before this the rule under the direct route ran 549px under two
 * short lines, and the badge's sentence broke over three. */
.offer .cta {
  flex: 1 1 20rem;
}

/* In the reviews block the badge had the whole measure and was centred
 * artwork. Beside the links it is a narrow column, so it gives back some of
 * the size the rating carried there — enough to stay the loudest number on the
 * page without crowding what it stands next to. */
.offer .badge {
  flex: 0 1 19rem;
  /* Auto margins only get free space that flexing left over. Beside the links
   * the routes column has already grown into it, so this changes nothing; once
   * the two stack, the badge is alone on its line and centres itself in it
   * rather than sitting 15rem wide against the left edge. */
  margin-inline: auto;
}

.offer .badge-rating {
  font-size: 2.4rem;
}

/* --- Guest-favourite badge --------------------------------------------- */

.badge {
  margin: 0;
  text-align: center;
}

.badge a {
  display: inline-block;
  color: var(--contrast);
  text-decoration: none;
}

.badge a:hover .badge-title {
  color: var(--accent-3);
}

.badge-score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.badge-rating {
  font-family: Cardo, Georgia, serif;
  font-size: 3rem;
  line-height: 1;
  letter-spacing: -0.01em;
}

.badge-laurel {
  display: block;
  color: var(--contrast);
}

/* One branch drawn, mirrored for the other side. */
.badge-laurel-right {
  transform: scaleX(-1);
}

.badge-title {
  display: block;
  margin-top: 0.5rem;
  font-size: 1.05rem;
}

.badge-text {
  display: block;
  margin-top: 0.25rem;
  color: var(--contrast-2);
  font-size: 0.9rem;
  line-height: 1.45;
}

.review-list {
  columns: 19rem 3;
  column-gap: 1.25rem;
  margin: 1.75rem 0 1.25rem;
  padding: 0;
  list-style: none;
}

.review {
  /* A card must not be split across a column boundary. */
  break-inside: avoid;
  margin: 0 0 1.25rem;
  padding: 1.1rem 1.25rem 1rem;
  background: var(--base-2);
  border: 1px solid var(--accent);
  border-radius: 3px;
}

.review p {
  margin: 0 0 0.7rem;
  font-size: 0.95rem;
}

.review-text p:last-child {
  margin-bottom: 0;
}

.review-by {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.9rem 0 0 !important;
  font-size: 0.88rem;
  color: var(--contrast-2);
}

/* Size and shape of the disc in front of a reviewer's name. Separate from the
 * rule below because it once had a second user: reviewer photographs, dropped
 * on 2026-08-27 (docs/DECISIONS.md). */
.review-photo {
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
}

/* Every reviewer now gets their initial. */
.review-monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-2);
  color: var(--base-2);
  font-family: Cardo, Georgia, serif;
  font-size: 1rem;
  line-height: 1;
}

.review-by time {
  color: var(--contrast-3);
}

/* Its own line under the name: run inline it read as part of the date. */
.review-translated {
  display: block;
  margin-top: 0.15rem;
  color: var(--contrast-3);
  font-size: 0.8rem;
}

.stars {
  display: inline-flex;
  gap: 1px;
  margin-bottom: 0.6rem;
}

.stars svg.on {
  fill: var(--accent-3);
}

.stars svg.off {
  fill: var(--contrast-3);
}

.reviews-note {
  font-size: 0.85rem;
  color: var(--contrast-2);
}

/* --- Lightbox ----------------------------------------------------------- */

/* Native <dialog>: it supplies the top layer, the backdrop, focus trapping and
 * Esc-to-close. Without JavaScript the dialog is never opened and the gallery
 * thumbnails stay what they already are — links to the full-size photograph. */
.lightbox {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}

.lightbox::backdrop {
  background: rgb(17 17 17 / 92%);
}

.lightbox-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  height: 100%;
  margin: 0;
  /* Tight: the arrows sit over the photograph's edges rather than in reserved
   * gutters, so the picture gets the viewport instead of the leftovers. */
  padding: 1rem 1rem 0.75rem;
}

/* `width: 100%` and not just `max-width`: without it the image renders at its
 * intrinsic size and stops there, so a 2560px photograph in a 1400px window
 * was fine but a 1024px one left half the screen empty. With both dimensions
 * at 100% and `object-fit: contain`, it grows to whichever edge it meets
 * first and keeps its proportions. */
.lightbox-img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  border-radius: 2px;
}

.lightbox figcaption {
  flex: none;
  color: #f4f2ef;
  font-size: 0.95rem;
  text-align: center;
  text-shadow: 0 1px 3px rgb(0 0 0 / 60%);
}

.lightbox-count {
  margin-left: 0.6rem;
  opacity: 0.65;
  font-variant-numeric: tabular-nums;
}

.lightbox button {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #f4f2ef;
  background: rgb(0 0 0 / 35%);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.lightbox button:hover {
  background: rgb(0 0 0 / 65%);
}

.lightbox-close {
  top: 0.9rem;
  right: 0.9rem;
  width: 2.6rem;
  height: 2.6rem;
  font-size: 1.7rem;
  line-height: 1;
}

.lightbox-prev,
.lightbox-next {
  top: 50%;
  width: 3.2rem;
  height: 3.2rem;
  transform: translateY(-50%);
}

.lightbox-prev {
  left: 0.9rem;
}

.lightbox-next {
  right: 0.9rem;
}

/* On a phone the side buttons would sit on top of the photograph, so they
 * move to the bottom corners where thumbs already are. */
@media (max-width: 34rem) {
  .lightbox-figure {
    padding: 3.5rem 1rem 5.5rem;
  }

  .lightbox-prev,
  .lightbox-next {
    top: auto;
    bottom: 1rem;
    transform: none;
  }
}

/* --- Footer ------------------------------------------------------------- */

.site-footer {
  background: var(--base-2);
  border-top: 1px solid var(--accent);
  padding: 2.5rem 0 2rem;
  font-size: 0.92rem;
}

.site-footer .cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.75rem;
}

.site-footer h2 {
  margin: 0 0 0.6rem;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--contrast-2);
}

.site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer li {
  margin-bottom: 0.35rem;
}

/* --- Print -------------------------------------------------------------- */

@media print {
  .site-header nav,
  .lang,
  .cta,
  .gallery,
  .reviews {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}