/* ============================================================
   FLOREO — public site
   Warm minimalism: one accent, a lot of air, photography first.
   ============================================================ */

:root {
  /* The FLOREO brand palette. These seven are the whole scheme and the only ones
     the admin writes to (Site settings → Colour scheme); everything below is mixed
     from them, so changing the seven restyles the site. */
  --ivory:     #f4f0e8;   /* Warm Ivory   — page ground, cards, header when scrolled */
  --sand:      #ddd4c5;   /* Soft Sand    — rules, quiet fills, muted labels */
  --espresso:  #302a26;   /* Deep Espresso— headings, body ink, footer, primary button */
  --olive:     #737866;   /* Muted Olive  — section colour */
  --champagne: #c6a77b;   /* Champagne    — gold accent: dividers, ornaments, outlines */
  --plum:      #49363e;   /* Deep Plum    — section colour */
  --rose:      #b79b96;   /* Dusty Rose   — section colour */

  /* derived surfaces */
  --ivory-warm: color-mix(in srgb, var(--ivory) 80%, var(--sand));
  --ivory-lite: color-mix(in srgb, var(--ivory) 45%, #fff);
  --sand-lt:    color-mix(in srgb, var(--sand) 55%, var(--ivory));

  --bg:        var(--ivory);
  --bg-alt:    var(--ivory-warm);
  --surface:   var(--ivory-lite);
  --ink:       var(--espresso);
  --ink-soft:  color-mix(in srgb, var(--espresso) 82%, var(--sand));
  --muted:     color-mix(in srgb, var(--espresso) 65%, var(--sand));
  --line:      var(--sand);
  --hairline:  var(--sand-lt);

  /* Champagne is decoration — rules, gems, outlines, ornaments. It sits at about
     2:1 on ivory, so it must never carry text on a light ground; --link does that. */
  --accent:    var(--champagne);
  --accent-in: var(--ivory);
  --link:      var(--espresso);
  --link-hover: var(--plum);

  /* header: an espresso wash over the hero, an ivory tint once scrolled */
  --scrim:     var(--espresso);
  --header-bg: linear-gradient(180deg,
                 color-mix(in srgb, var(--scrim) 34%, transparent),
                 color-mix(in srgb, var(--scrim) 6%, transparent));
  --header-fg: var(--ivory);

  /* type */
  --display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --body:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);
  --step-0:  clamp(0.95rem, 0.91rem + 0.2vw, 1.05rem);
  --step-1:  clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --step-2:  clamp(1.6rem, 1.35rem + 1.2vw, 2.4rem);
  --step-3:  clamp(2.2rem, 1.6rem + 3vw, 4rem);
  --step-4:  clamp(3rem, 1.9rem + 5.4vw, 6.5rem);

  /* space */
  --gutter:  clamp(1.25rem, 5vw, 4rem);
  --section: clamp(4rem, 9vw, 9rem);
  --max:     1280px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --header-h: 76px;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: 0.75rem 1.25rem;
}
.skip:focus { left: 0; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------------------------------------------------------- header */

.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  /* solid tone first so the bar is never fully transparent behind light text */
  background-color: color-mix(in srgb, var(--scrim) 22%, transparent);
  background-image: var(--header-bg);
  color: var(--header-fg);
  backdrop-filter: saturate(1.2) blur(6px);
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease), color 0.4s var(--ease);
}
.header__inner {
  max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter);
  height: var(--header-h);
  display: flex; align-items: center; gap: 2rem;
}
.header--solid {
  --header-fg: var(--ink);
  background-color: color-mix(in srgb, var(--ivory) 92%, transparent);
  background-image: none;
  backdrop-filter: saturate(1.15) blur(14px);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--scrim) 10%, transparent);
}

.brand { margin-right: auto; display: flex; flex-direction: column; line-height: 1; }
.brand__mark {
  font-family: var(--display); font-size: 1.5rem; letter-spacing: 0.22em;
  text-indent: 0.22em;
}
.brand__tag {
  font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--muted); margin-top: 0.4rem; text-indent: 0.3em;
}

.nav { display: flex; gap: clamp(1rem, 2.2vw, 2.2rem); }
.nav a {
  font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase;
  color: currentColor; opacity: 0.82; padding-block: 0.5rem; position: relative;
  transition: opacity 0.25s var(--ease);
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease);
}
.nav a:hover::after, .nav a[aria-current='page']::after { transform: scaleX(1); }
.nav a:hover, .nav a[aria-current='page'] { opacity: 1; }
.header--solid .nav a[aria-current='page'] { color: var(--link); }

.header__right { display: flex; align-items: center; gap: 1.25rem; }

.langs { display: flex; gap: 0.15rem; align-items: center; }
.langs button {
  font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: currentColor; opacity: 0.7; padding: 0.35rem 0.45rem;
  transition: opacity 0.25s var(--ease), color 0.25s var(--ease);
}
.langs button:hover { opacity: 1; }
.langs button[aria-pressed='true'] { opacity: 1; font-weight: 500; }
.header--solid .langs button[aria-pressed='true'] { color: var(--link); }

.burger { display: none; width: 30px; height: 30px; position: relative; color: currentColor; }
.burger span {
  position: absolute; left: 4px; right: 4px; height: 1px; background: currentColor;
  transition: transform 0.35s var(--ease), opacity 0.2s;
}
.burger span:nth-child(1) { top: 12px; }
.burger span:nth-child(2) { top: 18px; }
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

/* ---------------------------------------------------------- hero */

.hero {
  position: relative; min-height: 100svh;
  display: grid; place-items: center; text-align: center;
  padding: calc(var(--header-h) + 3rem) var(--gutter) 5rem;
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; background: var(--espresso); }
.hero__bg img,
.hero__bg video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--scrim) 34%, transparent) 0%, color-mix(in srgb, var(--scrim) 10%, transparent) 48%, color-mix(in srgb, var(--scrim) 44%, transparent) 100%);
}
.hero__inner { position: relative; color: var(--ivory); max-width: 46rem; }
.hero__title {
  font-size: var(--step-4); letter-spacing: 0.12em; text-indent: 0.12em;
  text-shadow: 0 2px 50px color-mix(in srgb, var(--scrim) 40%, transparent);
}
.hero__sub {
  margin: 1.75rem auto 0; max-width: 34rem;
  font-size: var(--step-0); font-weight: 300; letter-spacing: 0.14em;
  text-transform: uppercase; opacity: 0.94;
}
.hero__scroll {
  position: absolute; bottom: 2.25rem; left: 50%; transform: translateX(-50%);
  color: var(--ivory); font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem; opacity: 0.85;
}
.hero__scroll::after {
  content: ''; width: 1px; height: 46px;
  background: linear-gradient(180deg, var(--ivory), transparent);
  animation: drift 2.4s var(--ease) infinite;
}
@keyframes drift { 0%,100% { opacity: 0.3; transform: scaleY(0.6); } 50% { opacity: 1; transform: scaleY(1); } }

/* page header for inner pages */
.phead {
  padding: calc(var(--header-h) + clamp(3.5rem, 8vw, 7rem)) 0 clamp(2rem, 4vw, 3.5rem);
  text-align: center;
}
.phead__eyebrow {
  font-size: 0.66rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 1.25rem;
}
.phead__title { font-size: var(--step-3); }
.phead__rule { width: 46px; height: 1px; background: var(--line); margin: 2rem auto 0; }

/* ---------------------------------------------------------- sections */

.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.section--alt { background: var(--bg-alt); }

.shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.shead__title { font-size: var(--step-2); }
.shead__link { font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.shead__link:hover { color: var(--accent); }

/* Editorial text. The copy is written as many short paragraphs, so the rhythm is
   tightened and the opening lines are set as a standfirst to give the block a shape. */
.prose { max-width: 40rem; margin-inline: auto; }
.prose p {
  margin: 0 0 1.05rem; color: var(--ink-soft);
  text-wrap: pretty; hyphens: auto;
}
.prose p:first-of-type {
  font-family: var(--display); font-size: var(--step-2); line-height: 1.25;
  letter-spacing: -0.01em; color: var(--ink); margin-bottom: 1.5rem;
}
.prose p:nth-of-type(2) {
  font-size: var(--step-1); line-height: 1.6; color: var(--ink);
  margin-bottom: 2rem; padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}
/* a short paragraph that follows a long one reads as a beat, not a new block */
.prose p + p { margin-top: -0.15rem; }
.prose p:last-child { margin-bottom: 0; }
.prose a { color: var(--link); text-decoration: underline; text-underline-offset: 0.2em; }

/* ---------------------------------------------------------- grids */

.grid { display: grid; gap: clamp(1rem, 2vw, 1.75rem); }
.grid--albums { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.grid--photos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }

.card { display: block; }
.card__frame {
  position: relative; overflow: hidden; background: var(--bg-alt);
  aspect-ratio: 4 / 5;
}
.card__frame img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease), opacity 0.6s var(--ease);
}
.card:hover .card__frame img { transform: scale(1.045); }
.card__frame::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--scrim) 20%, transparent));
  opacity: 0; transition: opacity 0.4s var(--ease);
}
.card:hover .card__frame::after { opacity: 1; }
.card__meta { padding-top: 1rem; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.card__title { font-family: var(--display); font-size: var(--step-1); line-height: 1.2; }
.card__count { font-size: 0.68rem; letter-spacing: 0.16em; color: var(--muted); }

/* photo tile */
.tile { position: relative; overflow: hidden; background: var(--sand-lt); aspect-ratio: 1 / 1; cursor: zoom-in; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.tile:hover img { transform: scale(1.05); }

/* lazy images fade in once decoded */
img[data-lazy] { opacity: 0; transition: opacity 0.6s var(--ease); }
img[data-lazy='in'] { opacity: 1; }

/* ---------------------------------------------------------- contacts */

.contact { display: grid; gap: clamp(2rem, 5vw, 4rem); }
/* Without a map alongside it the list would sit in a lonely narrow column, so the
   items spread across the measure instead. */
.contact__list {
  display: grid; gap: 2.25rem clamp(2rem, 6vw, 5rem); align-content: start;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  justify-content: center; text-align: center;
}
.contact__item { display: grid; gap: 0.5rem; }
.contact__label { font-size: 0.64rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); }
.contact__value { font-family: var(--display); font-size: var(--step-1); }
.contact__value a:hover { color: var(--accent); }
.contact__value .sep { color: var(--line); margin-inline: 0.6em; }

/* ---------------------------------------------------------- back link */

.back {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.back::before { content: '\2190'; }
.back:hover { color: var(--accent); }

.empty { text-align: center; color: var(--muted); padding-block: 4rem; }

/* ---------------------------------------------------------- footer */

.footer { background: var(--espresso); color: color-mix(in srgb, var(--ivory) 92%, var(--sand)); margin-top: auto; }
.footer__inner {
  max-width: var(--max); margin-inline: auto; padding: clamp(3rem, 6vw, 5rem) var(--gutter) clamp(2rem, 4vw, 3rem);
  display: grid; gap: 2.5rem; grid-template-columns: 1fr;
}
@media (min-width: 760px) { .footer__inner { grid-template-columns: 1.2fr 1fr 1fr; } }
.footer__brand { font-family: var(--display); font-size: 1.5rem; letter-spacing: 0.22em; }
.footer__tag {
  font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ivory) 55%, transparent); margin: 0.75rem 0 0;
}
.footer__col a { transition: color 0.25s var(--ease); }
.footer__col a:hover { color: var(--rose); }
.footer__col--end { justify-self: start; }
@media (min-width: 760px) { .footer__col--end { justify-self: end; text-align: right; } }
.footer__nav { display: grid; gap: 0.6rem; font-size: var(--step--1); }
.footer__row { display: grid; gap: 0.3rem; margin-bottom: 1.25rem; }
.footer__row span {
  font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ivory) 50%, transparent);
}
.footer__base {
  border-top: 1px solid color-mix(in srgb, var(--ivory) 14%, transparent);
  padding: 1.5rem var(--gutter); text-align: center;
  font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ivory) 45%, transparent);
}

/* ---------------------------------------------------------- lightbox */

.lb {
  position: fixed; inset: 0; z-index: 300;
  background: color-mix(in srgb, var(--espresso) 94%, transparent);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  animation: fade 0.3s var(--ease);
}
.lb[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } }
.lb__figure { margin: 0; display: grid; justify-items: center; gap: 1rem; min-width: 0; }
.lb__figure img {
  max-width: 100%; max-height: 82svh; object-fit: contain;
  box-shadow: 0 30px 90px rgba(0,0,0,0.5);
}
.lb__count { font-size: 0.68rem; letter-spacing: 0.2em; color: color-mix(in srgb, var(--ivory) 62%, var(--sand)); }
.lb__nav, .lb__close { color: #fff; opacity: 0.6; transition: opacity 0.25s var(--ease); }
.lb__nav:hover, .lb__close:hover { opacity: 1; }
.lb__nav { font-size: 3rem; line-height: 1; padding: 1rem; }
.lb__close { position: absolute; top: 1rem; right: 1.5rem; font-size: 2.25rem; line-height: 1; }

/* ---------------------------------------------------------- reveal */

[data-reveal] { opacity: 0; transform: translateY(18px); }
[data-reveal='in'] { opacity: 1; transform: none; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal='in'] { opacity: 1; transform: none; transition: none; }
  .hero__scroll::after { animation: none; }
}

/* ---------------------------------------------------------- mobile nav */

@media (max-width: 860px) {
  .burger { display: block; }
  .brand__tag { display: none; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    background: color-mix(in srgb, var(--ivory) 98%, transparent);
    color: var(--ink);
    backdrop-filter: blur(12px);
    flex-direction: column; gap: 0; padding: 1rem var(--gutter) 2rem;
    border-bottom: 1px solid var(--line);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  }
  .nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav a { padding-block: 0.9rem; border-bottom: 1px solid var(--line); font-size: 0.8rem; }
  .nav a:last-child { border-bottom: 0; }
}

/* ---------------------------------------------------------- brand elements
   Buttons, rules and ornaments taken from the FLOREO brand board. */

.btn {
  display: inline-block; padding: 0.95rem 2rem;
  font-family: var(--body); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; text-indent: 0.2em;
  border: 1px solid transparent; cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.btn--primary { background: var(--espresso); color: var(--ivory); }
.btn--primary:hover { background: var(--champagne); color: var(--espresso); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--champagne); }
.btn--secondary:hover { background: var(--champagne); color: var(--espresso); }
/* on the dark section blocks */
.btn--onDark { background: transparent; color: var(--ivory); border-color: var(--champagne); }
.btn--onDark:hover { background: var(--champagne); color: var(--espresso); }

/* hairline with a centred lozenge */
.rule {
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
  color: var(--champagne);
}
.rule::before, .rule::after {
  content: ''; height: 1px; background: currentColor; flex: 1 1 auto; max-width: 5.5rem; opacity: 0.7;
}
.rule__gem {
  width: 7px; height: 7px; flex: none; background: currentColor;
  transform: rotate(45deg);
}
.rule--tight::before, .rule--tight::after { max-width: 2.25rem; }


/* ---------------------------------------------------------- home blocks */

.blocks-section { padding-block: 0; }
.blocks {
  display: grid; grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) { .blocks { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .blocks { grid-template-columns: 1fr; } }

.block {
  display: grid; justify-items: center; text-align: center; gap: 0.9rem;
  padding: clamp(2.5rem, 4vw, 3.75rem) clamp(1.25rem, 2.5vw, 2rem);
}
.block .sprig { width: 42px; height: auto; color: var(--champagne); }
.block__title {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.4rem, 1.1rem + 0.9vw, 1.9rem);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.block__text { margin: 0; max-width: 17rem; font-size: 0.88rem; line-height: 1.7; }
.block .rule { width: 100%; max-width: 8rem; }
.block .btn { margin-top: 0.6rem; }

.block--ivory { background: var(--ivory-warm); color: var(--espresso); }
/* Muted olive is light enough that ivory text lands at 4.01:1. White reaches 4.56:1,
   so the board's background colour is kept exactly and only the text is lifted. */
.block--olive { background: var(--olive);      color: #fff; }
.block--rose  { background: var(--rose);       color: var(--espresso); }
.block--plum  { background: var(--plum);       color: var(--ivory); }
/* on the rose block the gold rule washes out, so it borrows the ink instead */
.block--rose .sprig, .block--rose .rule { color: color-mix(in srgb, var(--espresso) 55%, var(--rose)); }


/* footer studio line */
.footer__studio {
  font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; line-height: 2;
  color: color-mix(in srgb, var(--ivory) 70%, var(--sand));
}

/* ---------------------------------------------------------- hero video */

/* "contain" keeps a portrait clip at its own proportions instead of blowing it up
   to fill a landscape hero, which is what makes an upscaled video look soft. */
.hero__bg--contain video { object-fit: contain; background: var(--espresso); }

.hero__sound {
  position: absolute; right: clamp(1rem, 4vw, 3rem); bottom: clamp(1rem, 4vw, 3rem);
  z-index: 3; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--champagne) 80%, transparent);
  background: color-mix(in srgb, var(--espresso) 55%, transparent);
  color: var(--ivory); backdrop-filter: blur(6px);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.hero__sound:hover { background: var(--champagne); color: var(--espresso); border-color: var(--champagne); }
.hero__sound svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.hero__sound[aria-pressed='true'] { border-color: var(--champagne); }

/* ---------------------------------------------------------- partners */

.partners {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}
.partner { display: grid; }
.partner__link { display: grid; gap: inherit; }
.partner__logo {
  display: grid; place-items: center;
  aspect-ratio: 3 / 2; padding: 1.5rem;
  background: var(--surface); border: 1px solid var(--line);
}
.partner__logo img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain;
  /* logos come in many colours; muted by default, true colour on hover */
  filter: grayscale(1); opacity: 0.75;
  transition: filter 0.4s var(--ease), opacity 0.4s var(--ease);
}
.partner__link:hover .partner__logo img { filter: grayscale(0); opacity: 1; }
.partner__logo--empty { background: var(--bg-alt); }
.partner__name {
  margin-top: 0.9rem; text-align: center;
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
}
.partner__link:hover .partner__name { color: var(--ink); }

/* ---------------------------------------------------------- touch targets

   A fingertip needs roughly 44px to hit reliably; a mouse pointer does not.
   Keyed on the input device rather than the screen width, so a touchscreen
   laptop gets the larger targets too, and the desktop design stays compact. */

@media (pointer: coarse) {
  .langs button {
    min-width: 44px; min-height: 44px;
    display: inline-grid; place-items: center;
  }
  /* no negative margin here: it pushed part of the button off the screen edge */
  .burger { width: 44px; height: 44px; }
  .burger span { left: 11px; right: 11px; }
  .burger span:nth-child(1) { top: 19px; }
  .burger span:nth-child(2) { top: 25px; }
  .burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
  .burger[aria-expanded='true'] span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

  .nav a { padding-block: 1rem; }
  .lb__close, .lb__nav button { min-width: 48px; min-height: 48px; }
  .footer__col a, .contact__value a { padding-block: 0.35rem; }
}

/* Belt and braces for tap targets. The rule above keys on the pointer type, which is
   the correct signal but not always reported honestly. Below 860px the menu button is
   already showing, so the screen is small by definition — size the controls for a
   finger there too, whatever the browser claims about the pointer. */
@media (max-width: 860px) {
  .lb__nav, .lb__close { min-width: 48px; min-height: 48px; }
  .langs button { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; }
  .burger { width: 44px; height: 44px; }
  .burger span { left: 11px; right: 11px; }
  .burger span:nth-child(1) { top: 19px; }
  .burger span:nth-child(2) { top: 25px; }
  .nav a { padding-block: 1rem; }
}

/* ---------------------------------------------------------- phone layout */

@media (max-width: 560px) {
  /* Enlarging the language buttons to 44px made the header row wider than a phone
     screen, which pushed the menu button off the edge. Tighten the gaps to fit. */
  .header__inner { gap: 0.75rem; }
  .header__right { gap: 0.4rem; }
  .langs { gap: 0; }
  .langs button { min-width: 40px; }

  /* One photo per row turns a 246-picture album into an 88,000px scroll.
     Two columns halve it and match how phone galleries normally read. */
  .grid--photos { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }

  /* the hero should not need a full swipe before the first section shows */
  .hero { min-height: 88svh; }

  /* section rhythm tightens up, or the page is mostly empty space */
  .section { padding-block: clamp(3rem, 12vw, 4.5rem); }
  .block { padding: 2.75rem 1.5rem; }
}

/* Only the narrowest phones (320-360px). At 375px the header fits at full size,
   verified by measurement, so the common iPhone widths keep the larger buttons. The wordmark, three language buttons and
   the menu button together need more room than the screen has, so the type tightens
   rather than letting the menu button run off the edge. */
@media (max-width: 360px) {
  .header__inner { gap: 0.5rem; }
  .brand__mark { font-size: 1.25rem; letter-spacing: 0.16em; text-indent: 0.16em; }
  .langs button { min-width: 34px; padding-inline: 0.25rem; }
}


/* ---------------------------------------------------------- lightbox on phones

   The lightbox is a three-column grid: arrow, photo, arrow. On a 320px screen the
   arrows left the photo only 166px — a third of the screen. Here they lift out of
   the flow and sit on top of the picture, which then gets the full width. */

@media (max-width: 700px) {
  .lb { grid-template-columns: 1fr; padding: 0.75rem; }

  .lb__nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    font-size: 2.25rem; line-height: 1; padding: 0.35rem 0.6rem;
    opacity: 0.85; border-radius: 999px;
    background: color-mix(in srgb, var(--espresso) 50%, transparent);
    backdrop-filter: blur(4px);
  }
  .lb__nav--prev { left: 0.35rem; }
  .lb__nav--next { right: 0.35rem; }

  .lb__close {
    top: 0.5rem; right: 0.75rem;
    background: color-mix(in srgb, var(--espresso) 50%, transparent);
    border-radius: 999px; padding: 0 0.6rem; backdrop-filter: blur(4px);
  }

  .lb__figure { width: 100%; }
  .lb__figure img { max-height: 74svh; }
}