/* Rental cottage landing page
   Scandinavian Calm: light, airy, photo-led, single accent color.
   All visual decisions are tokenized below — retheme by editing :root only. */

/* ---------------------------------------------------------------
   Tokens
   --------------------------------------------------------------- */

:root {
  /* Color */
  --paper: #fbfaf8;
  --ink: #1c1b19;
  --ink-soft: #6f6b64;
  --line: #e4e1db;
  --accent: #2f4739;
  --accent-soft: #f0f2ef;
  --surface: #ffffff;
  --on-accent: #ffffff;

  /* Type */
  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: clamp(1.0625rem, 0.4vw + 1rem, 1.1875rem);
  --text-h3: clamp(1.25rem, 0.6vw + 1.1rem, 1.5rem);
  --text-h2: clamp(1.75rem, 2vw + 1.3rem, 2.75rem);
  --text-h1: clamp(2.75rem, 6vw + 1.2rem, 5.5rem);

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  --section-y: clamp(var(--space-6), 8vw, var(--space-8));

  /* Layout */
  --measure: 1200px;
  --measure-prose: 680px;
  --gutter: clamp(var(--space-4), 5vw, var(--space-6));
  --radius: 4px;
  --radius-lg: 6px;
  --tap: 44px;
}

/* ---------------------------------------------------------------
   Base
   --------------------------------------------------------------- */

.sprite {
  display: none;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  background: var(--line);
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: var(--text-h1);
}

h2 {
  font-size: var(--text-h2);
}

h3 {
  font-size: var(--text-h3);
}

p {
  margin: 0;
  text-wrap: pretty;
}

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

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

/* The ring takes the colour of the text it surrounds. A fixed accent ring
   vanished on the accent buttons themselves and on the dark photo viewer
   and closing panel, where it sat at 1.0 to 1.9 against the background. */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

/* ---------------------------------------------------------------
   Skip link
   --------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: 0;
  z-index: 40;
  padding: 0.75rem 1.25rem;
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--text-sm);
  text-decoration: none;
  border-radius: 0 0 var(--radius) var(--radius);
  transform: translateY(-110%);
  transition: transform 0.2s ease;
}

.skip-link:focus-visible {
  transform: translateY(0);
  outline-offset: -4px;
}

/* Visible to assistive tech, removed from the visual layout. Used for the
   "(opens in new tab)" warning on the booking links, which should not be
   spelled out for sighted users on every button. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

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

.shell {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-y);
}

.prose {
  max-width: var(--measure-prose);
}

.eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--space-3);
}

.lede {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Section heading: label above, optional intro to the right */
.section-head {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  align-items: start;
}

@media (min-width: 900px) {
  .section-head {
    /* 26ch left the intro as a narrow ribbon beside a large heading. The
       columns align at the top, so the eyebrow and the first line of the
       intro share an edge instead of drifting apart. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 40ch);
    gap: var(--space-7);
  }
}

/* A head with nothing beside the heading has no second column to align
   against, so it must not keep the two-column split. */
.section-head--single {
  grid-template-columns: minmax(0, 1fr);
}

/* ---------------------------------------------------------------
   Buttons
   --------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: 0.875rem 1.75rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn:hover {
  background: var(--ink);
  border-color: var(--ink);
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}

.site-header.is-stuck {
  border-bottom-color: var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 68px;
}

.wordmark {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}

.header-cta {
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgb(47 71 57 / 0.35);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}

.header-cta:hover {
  border-bottom-color: var(--accent);
}

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

.hero {
  position: relative;
  isolation: isolate;
  margin-top: calc(var(--space-7) * -1);
  min-height: min(88vh, 760px);
  min-height: min(88svh, 760px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--line);
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}


.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Bottom-weighted so the title and booking panel stay legible over a
     bright photograph, with the top left clear to show the photo. The
     heavy band is held to 46% because all hero copy sits in the lower
     part of the frame; fading earlier dropped the title below 4.5:1
     against a blown-out sky. */
  background: linear-gradient(
    to top,
    rgb(14 16 18 / 0.76) 0%,
    rgb(14 16 18 / 0.68) 46%,
    rgb(14 16 18 / 0.3) 68%,
    rgb(14 16 18 / 0.16) 100%
  );
}

.hero__inner {
  position: relative;
  width: 100%;
  padding-block: var(--space-7);
  color: var(--on-accent);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--ink);
}

.brand__mark {
  flex: none;
  height: 38px;
  width: auto;
  fill: var(--accent);
}

.brand--footer .brand__mark {
  height: 52px;
}

.hero__title {
  color: var(--on-accent);
  text-shadow: 0 1px 30px rgb(20 18 15 / 0.28);
}

.hero__location {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.86);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: rgb(255 255 255 / 0.88);
}

.hero__meta li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.hero__meta li + li::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

@media (max-width: 639px) {
  .brand__mark {
    height: 30px;
  }

  .hero__meta li + li::before {
    display: none;
  }

  .hero__meta {
    gap: var(--space-1) var(--space-4);
  }
}

.hero__booking {
  margin-top: var(--space-6);
}

/* ---------------------------------------------------------------
   Booking panel
   --------------------------------------------------------------- */

.booking {
  display: grid;
  gap: var(--space-5);
  padding: clamp(var(--space-4), 3vw, var(--space-5));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.booking--overlay {
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(10px);
  border-color: rgb(255 255 255 / 0.5);
  max-width: 640px;
  /* The hero sets white text for the photo; this panel sits on a light
     surface, so it has to hand the colour back. */
  color: var(--ink);
}

.booking__facts {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  margin: 0;
}

.booking__facts > div {
  display: grid;
  gap: 2px;
}

.booking__facts dt {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.booking__facts dd {
  margin: 0;
  font-size: var(--text-lg);
  font-family: var(--font-display);
  line-height: 1.2;
}

.booking__action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.booking__note {
  font-size: var(--text-xs);
  color: var(--ink-soft);
  max-width: 32ch;
}

/* The hero booking panel is redundant on phones: the sticky header keeps a
   Book link and the closing CTA repeats the panel further down. */
@media (max-width: 899px) {
  .hero__booking {
    display: none;
  }
}

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

/* Fixed column counts rather than auto-fill: the eighteen tiles divide
   evenly by one, two and three, so the last row is always full and no
   tile is ever stretched to fill leftover space. */
.gallery {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 480px) {
  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 720px) {
  .gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Tiles are buttons so they are keyboard reachable and announce as such. */
.gallery__tile {
  margin: 0;
  position: relative;
  aspect-ratio: 4 / 3;
}

.gallery__open {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
  isolation: isolate;
}

.gallery__open img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}

@media (hover: hover) {
  .gallery__open:hover img {
    transform: scale(1.03);
  }
}

/* Keyboard focus gets the same affordance as hover. */
.gallery__open:focus-visible img {
  transform: scale(1.03);
}

/* Zoom affordance: a small framed glass at top-right. */
.gallery__zoom {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgb(20 18 15 / 0.42);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.gallery__zoom::before,
.gallery__zoom::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  background: #fff;
  border-radius: 1px;
  transform: translate(-50%, -50%);
}

.gallery__zoom::before {
  width: 11px;
  height: 1.5px;
}

.gallery__zoom::after {
  width: 1.5px;
  height: 11px;
}

@media (hover: hover) {
  .gallery__open:hover .gallery__zoom,
  .gallery__more:hover .gallery__zoom {
    opacity: 1;
  }
}

.gallery__open:focus-visible .gallery__zoom,
.gallery__more:focus-visible .gallery__zoom {
  opacity: 1;
}

/* Focus lands on the button; keep the tile readable. */
/* Seventeen photos plus the closing tile make eighteen, so every column
   count lands on full rows. */
/* Seventeen photos plus the closing tile make eighteen, so every column
   count lands on full rows. The closing tile is a real photo, the first
   one not already shown, so the grid reads as photographs throughout. */
.gallery__tile--more {
  border-radius: var(--radius);
  overflow: hidden;
}

.gallery__more {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
  isolation: isolate;
}

.gallery__more img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* Dark enough at the top too, so the white label keeps its contrast over
   the brightest photo. */
.gallery__more-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgb(20 18 15 / 0.78),
    rgb(20 18 15 / 0.55)
  );
}

.gallery__more-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-4);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 500;
  text-align: center;
}

.gallery__more-count {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.1;
}

@media (hover: hover) {
  .gallery__more:hover img {
    transform: scale(1.03);
  }
}

.gallery__more:focus-visible img {
  transform: scale(1.03);
}

/* ---------------------------------------------------------------
   Amenities
   --------------------------------------------------------------- */

.amenities {
  display: grid;
  gap: var(--space-5);
}

.spec-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0 var(--space-7);
  margin: 0;
}

.spec-list > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--line);
}

.spec-list dt {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

.spec-icon {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}

.spec-list dd {
  margin: 0;
  text-align: right;
  font-size: var(--text-sm);
  font-weight: 500;
}

/* ---------------------------------------------------------------
   Local guide
   --------------------------------------------------------------- */

.guide {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 720px) {
  .guide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1040px) {
  .guide {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.guide h3 {
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.guide p {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--ink-soft);
  line-height: 1.6;
}

/* ---------------------------------------------------------------
   House rules
   --------------------------------------------------------------- */

.rules {
  background: var(--accent-soft);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-5), 4vw, var(--space-6));
}

.rules ul {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

@media (min-width: 720px) {
  .rules ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) var(--space-6);
  }
}

.rules li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink);
}

.rules li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 0.7em;
  border-radius: 50%;
  background: rgb(47 71 57 / 0.55);
  background: color-mix(in srgb, var(--accent) 55%, transparent);
}

/* ---------------------------------------------------------------
   FAQ
   --------------------------------------------------------------- */

.faq {
  max-width: var(--measure-prose);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--tap);
  padding-block: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: 1.25;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 1px solid var(--ink-soft);
  border-bottom: 1px solid var(--ink-soft);
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.25s ease;
}

.faq details[open] summary::after {
  transform: rotate(225deg) translateY(-3px);
}

.faq details p {
  padding-bottom: var(--space-5);
  color: var(--ink-soft);
  max-width: 60ch;
}

/* ---------------------------------------------------------------
   Final CTA
   --------------------------------------------------------------- */

.final-cta {
  background: var(--accent);
  color: var(--on-accent);
}

.final-cta .eyebrow {
  color: rgb(255 255 255 / 0.72);
}

.final-cta .lede {
  color: rgb(255 255 255 / 0.82);
  max-width: 48ch;
}

.final-cta .booking {
  background: transparent;
  border-color: rgb(255 255 255 / 0.28);
}

.final-cta .booking__facts dt,
.final-cta .booking__note {
  color: rgb(255 255 255 / 0.72);
}

.final-cta .btn {
  background: var(--on-accent);
  border-color: var(--on-accent);
  color: var(--accent);
}

.final-cta .btn:hover {
  background: transparent;
  color: var(--on-accent);
}

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

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: var(--space-6);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

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

/* Sizing comes from the dynamic viewport, not percentages, so rotating a
   phone resizes the viewer to the landscape screen instead of the portrait
   one. The vh/vw declarations are the fallback for older Safari. */
.lightbox {
  width: 100vw;
  height: 100vh;
  width: 100dvw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgb(16 15 13 / 0.94);
  color: #fff;
  overflow: hidden;
  overscroll-behavior: contain;
  /* Stops the double-tap browser zoom from fighting the viewer's own
     full-screen sizing, which is what makes the photo look stuck. */
  touch-action: manipulation;
}

.lightbox::backdrop {
  background: rgb(16 15 13 / 0.94);
}

.lightbox__frame {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100%;
  width: 100%;
}

.lightbox__img {
  grid-row: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: none;
  padding: clamp(var(--space-4), 4vw, var(--space-7));
  /* Guard against the caption overlapping the very bottom of the image. */
  padding-bottom: calc(clamp(var(--space-4), 4vw, var(--space-7)) + 40px);
}

.lightbox__meta {
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) clamp(var(--space-4), 4vw, var(--space-7));
  padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
  border-top: 1px solid rgb(255 255 255 / 0.14);
  font-size: var(--text-sm);
}

.lightbox__caption {
  color: rgb(255 255 255 / 0.86);
}

.lightbox__count {
  color: rgb(255 255 255 / 0.55);
  font-variant-numeric: tabular-nums;
}

/* Controls: 44px targets, glass circles so they work over any photo. */
.lightbox__btn {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(20 18 15 / 0.5);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.lightbox__btn:hover {
  background: rgb(20 18 15 / 0.78);
}

.lightbox__close {
  top: var(--space-3);
  right: var(--space-3);
}

/* Chevron made from a rotated square border, so no icon font or SVG file. */
.lightbox__prev span,
.lightbox__next span {
  width: 11px;
  height: 11px;
  border-top: 1.5px solid #fff;
  border-right: 1.5px solid #fff;
}

.lightbox__prev {
  top: 50%;
  left: var(--space-3);
  transform: translateY(-50%);
}

.lightbox__prev span {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.lightbox__next {
  top: 50%;
  right: var(--space-3);
  transform: translateY(-50%);
}

.lightbox__next span {
  transform: rotate(45deg) translate(-2px, -2px);
}

/* Close glyph: two crossing bars. */
.lightbox__close span::before,
.lightbox__close span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 15px;
  height: 1.5px;
  background: #fff;
}

.lightbox__close span {
  position: relative;
  display: block;
  width: 15px;
  height: 1.5px;
}

.lightbox__close span::before {
  transform: rotate(45deg);
}

.lightbox__close span::after {
  transform: rotate(-45deg);
}

@media (max-width: 639px) {
  .lightbox__prev,
  .lightbox__next {
    top: auto;
    bottom: calc(var(--space-6) + var(--space-5));
    transform: none;
  }

  .lightbox__prev {
    left: var(--gutter);
  }

  .lightbox__next {
    right: var(--gutter);
  }
}

/* Landscape phones: the screen is wide but short, so trim the frame
   padding and the caption bar to keep the photo as large as possible. */
@media (orientation: landscape) and (max-height: 560px) {
  .lightbox__img {
    padding: var(--space-3);
    padding-bottom: calc(var(--space-3) + var(--space-5));
  }

  .lightbox__meta {
    padding: var(--space-2) clamp(var(--space-3), 3vw, var(--space-5));
    font-size: var(--text-xs);
  }
}

/* ---------------------------------------------------------------
   Motion preferences
   --------------------------------------------------------------- */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .gallery__open:hover img {
    transform: none;
  }

}

@media print {
  .site-header,
  .hero__scrim {
    display: none;
  }

  body {
    background: #fff;
  }
}