/* Picnic Club — site styles. Mobile first. One light theme (the brand is ivory and gold). */

@font-face { font-family: "Gilda Display"; src: url("/assets/fonts/gilda-display-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } /* OFL; chosen 3 Oct 2026 over Italiana, which read too thin */
@font-face { font-family: "Cormorant Garamond"; src: url("/assets/fonts/cormorant-garamond-italic.woff2") format("woff2"); font-weight: 300 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/assets/fonts/jost.woff2") format("woff2"); font-weight: 300 500; font-style: normal; font-display: swap; }

:root {
  --ivory: #FAF6EF;
  --cream: #F2EBDF;
  --sand: #E4D8C6;
  --gold: #C6A76A;
  --gold-deep: #7E6331;
  --olive: #2E3326;
  --olive-soft: #575B4C;
  --on-dark: #F5EFE4;
  --on-dark-soft: #C2BDAF;
  --white: #FFFFFF;
  --veil: rgba(22, 24, 18, 0.5);

  --font-display: "Gilda Display", "Cormorant Garamond", Georgia, serif;
  --font-accent: "Cormorant Garamond", Georgia, serif;
  --font-text: "Jost", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(1rem, 4.5vw, 3.5rem);
  --max: 1280px;
  --head-h: 70px; /* the bar, its content centred: 18 px above and below the logo */
  --space: clamp(4.5rem, 10vw, 9rem);
}
@media (min-width: 1200px) { :root { --head-h: 92px; } }

/* ---------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 1rem); }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--olive);
  font: 350 1.0625rem/1.75 var(--font-text); /* Jost is variable: 350 still reads light, and holds up on a phone in the sun */
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; height: auto; }
picture { display: block; }
figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 500; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
::selection { background: var(--sand); color: var(--olive); }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.narrow { max-width: 46rem; padding-block: var(--space); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--olive); color: var(--on-dark); padding: 0.8rem 1.2rem; }
.skip-link:focus { top: 1rem; }
.small { font-size: 0.875rem; line-height: 1.6; color: var(--olive-soft); }

/* ---------------------------------------------------------------- type */

.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.035em;
  line-height: 1.14;
  margin: 0 0 0.7em;
  text-wrap: balance;
}
h1.display { font-size: clamp(2.3rem, 1.6rem + 3.6vw, 4.6rem); } /* Gilda is wider than Italiana: about 10% smaller */
.display { overflow-wrap: break-word; } /* a word longer than the screen breaks rather than pushing the page sideways */
/* «CANCELLATIONS», «CANCELAMENTOS»: on a small phone the legal titles shrink until their longest word fits */
.page-head--legal h1.display { font-size: min(clamp(2.3rem, 1.6rem + 3.6vw, 4.6rem), 9vw); }
h2.display { font-size: clamp(1.8rem, 1.35rem + 2.1vw, 2.85rem); }
h3.display { font-size: clamp(1.25rem, 1.08rem + 0.7vw, 1.6rem); letter-spacing: 0.05em; }
.eyebrow {
  font: 400 0.75rem/1.5 var(--font-text);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--olive-soft);
  margin: 0 0 1.4rem;
}
.eyebrow--light { color: var(--white); }
.lead { font: italic 300 clamp(1.4rem, 1.15rem + 1vw, 1.95rem)/1.45 var(--font-accent); margin: 0 0 1.2em; text-wrap: pretty; }
.lead--small { font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.6rem); }
.prose { max-width: 62ch; }
.prose p { text-wrap: pretty; }

/* links and buttons */
.link-arrow {
  display: inline-block;
  padding-block: 0.95rem;
  font: 400 0.78rem/1.3 var(--font-text);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.55em;
}
.link-arrow--small { font-size: 0.72rem; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0.9rem 1.7rem;
  font: 500 0.76rem/1.2 var(--font-text);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  background: var(--ivory);
  color: var(--olive);
  border: 1px solid var(--ivory);
  cursor: pointer;
}
.button--gold { background: var(--gold); border-color: var(--gold); color: var(--olive); }
.button--dark { background: var(--olive); border-color: var(--olive); color: var(--on-dark); }
.button--outline { background: transparent; border-color: var(--olive); color: var(--olive); }
.button--ghost { background: transparent; border-color: rgba(255, 255, 255, 0.78); color: var(--white); }
@media (hover: hover) {
  .button:hover { background: var(--cream); border-color: var(--cream); }
  .button--gold:hover { background: #D2B77F; border-color: #D2B77F; }
  .button--dark:hover { background: #3C4232; border-color: #3C4232; }
  .button--outline:hover { background: var(--olive); color: var(--on-dark); }
  .button--ghost:hover { background: var(--white); border-color: var(--white); color: var(--olive); }
  .link-arrow:hover { text-decoration-thickness: 2px; }
}

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

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--head-h);
  background: var(--ivory);
  color: var(--olive);
  border-bottom: 1px solid var(--sand);
}
.site-header__inner {
  height: 100%;
  width: min(100% - 2 * var(--gutter), var(--max)); /* the same edges as the content below */
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); /* equal sides: the logo stays in the middle */
  align-items: center;
  gap: 1rem;
}
.nav { display: none; }
.brand { display: grid; justify-self: center; grid-column: 2; }
.brand img { grid-area: 1 / 1; height: 34px; width: auto; }
.brand__white { visibility: hidden; }
.menu-button {
  grid-column: 3;
  justify-self: end;
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-right: -8px;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}
.menu-button__lines, .menu-button__lines::before, .menu-button__lines::after {
  display: block;
  width: 26px;
  height: 1px;
  background: currentColor;
}
.menu-button__lines { position: relative; }
.menu-button__lines::before, .menu-button__lines::after { content: ""; position: absolute; left: 0; }
.menu-button__lines::before { top: -8px; }
.menu-button__lines::after { top: 8px; }

@media (min-width: 1200px) {
  .nav { display: flex; align-items: center; gap: clamp(1.1rem, 1.9vw, 2.3rem); }
  .nav--left { justify-content: flex-start; }
  .nav--right { justify-content: flex-end; }
  .nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font: 400 0.72rem/1 var(--font-text);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
  }
  .nav a[aria-current] { text-decoration: underline; text-underline-offset: 0.9em; } /* the page you are on; «Experiences» on any of its pages */
  .nav .nav__cta { border: 1px solid currentColor; padding: 0 1.1rem; }
  .nav .nav__cta[aria-current="page"] { text-decoration: none; background: var(--olive); border-color: var(--olive); color: var(--on-dark); } /* on its own page: filled, not underlined */
  .brand img { height: 44px; }
  .menu-button { display: none; }
}
/* «Experiences»: a panel with the four experiences under the header (≥1200px, where the nav shows) */
@media (min-width: 1200px) {
  .nav--left { align-self: stretch; }
  .nav__drop { display: flex; align-items: center; align-self: stretch; } /* full header height: the pointer can travel down to the panel */
  .nav .nav__drop-link { gap: 0.5rem; }
  .nav__chevron { width: 6px; height: 6px; margin-top: -3px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }
  .nav__panel {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--ivory); color: var(--olive);
    border-top: 1px solid var(--sand); border-bottom: 1px solid var(--sand);
    box-shadow: 0 24px 40px -28px rgba(46, 51, 38, 0.35);
    visibility: hidden; opacity: 0;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
  }
  .nav__drop:is(:hover, :focus-within):not([data-closed]) .nav__panel { visibility: visible; opacity: 1; transition: opacity 0.25s ease 0.06s, visibility 0s; }
  .nav__drop:is(:hover, :focus-within):not([data-closed]) .nav__chevron { transform: rotate(-135deg); margin-top: 3px; }
  .nav__panel-inner { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; padding-block: 2rem 1.6rem; display: grid; gap: 1.2rem; }
  .nav__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem; }
  .nav .nav__card { display: grid; gap: 0.35rem; align-content: start; min-height: 0; text-decoration: none; letter-spacing: normal; text-transform: none; white-space: normal; }
  .nav__card-media { display: block; aspect-ratio: 3 / 2; overflow: hidden; margin-bottom: 0.6rem; }
  .nav__card-media picture, .nav__card-media img { width: 100%; height: 100%; }
  .nav__card-media img { object-fit: cover; }
  .nav__card-name { font: 400 1.15rem/1.2 var(--font-display); letter-spacing: 0.05em; text-transform: uppercase; }
  .nav__card-line { font: italic 300 1.05rem/1.4 var(--font-accent); color: var(--olive-soft); text-wrap: balance; }
  .nav .nav__card[aria-current] { text-decoration: none; } /* the bar marks where you are; an underlined card looked like a stuck hover */
  .nav .nav__all { justify-self: end; min-height: 0; font-size: 0.72rem; }
  /* over the cover film: the header turns solid while the panel is open, so both read */
  html[data-hero="on"][data-scrolled="no"] .site-header:has(.nav__drop:is(:hover, :focus-within):not([data-closed])) { background: var(--ivory); color: var(--olive); border-bottom-color: var(--sand); }
  html[data-hero="on"][data-scrolled="no"] .site-header:has(.nav__drop:is(:hover, :focus-within):not([data-closed]))::before { opacity: 0; }
  html[data-hero="on"][data-scrolled="no"] .site-header:has(.nav__drop:is(:hover, :focus-within):not([data-closed])) .brand__gold { visibility: visible; }
  html[data-hero="on"][data-scrolled="no"] .site-header:has(.nav__drop:is(:hover, :focus-within):not([data-closed])) .brand__white { visibility: hidden; }
}
@media (min-width: 1200px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
  .nav__card-media img { transition: transform 1.2s cubic-bezier(0.2, 0.6, 0.2, 1); }
  .nav__card:hover .nav__card-media img { transform: scale(1.04); }
}
@media (min-width: 1200px) and (hover: hover) {
  .nav .nav__card:hover { text-decoration: none; }
  .nav .nav__card:hover .nav__card-name { text-decoration: underline; text-underline-offset: 0.3em; }
}
@media (min-width: 1200px) and (hover: hover) {
  .nav a:hover { text-decoration: underline; text-underline-offset: 0.9em; }
  .nav .nav__cta:hover { text-decoration: none; background: var(--olive); color: var(--on-dark); border-color: var(--olive); }
}

/* Over the home page film: only when the root says so explicitly (no JS = solid header). */
html[data-hero="on"][data-scrolled="no"] .site-header {
  background: transparent;
  color: var(--white);
  border-bottom-color: transparent;
}
/* the shade reaches past the header and fades out, so it never shows an edge */
html[data-hero="on"] .site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 200%;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(22, 24, 18, 0.6), rgba(22, 24, 18, 0.3) 45%, rgba(22, 24, 18, 0));
  opacity: 0;
  pointer-events: none;
}
html[data-hero="on"][data-scrolled="no"] .site-header::before { opacity: 1; }
html[data-hero="on"][data-scrolled="no"] .brand__gold { visibility: hidden; }
html[data-hero="on"][data-scrolled="no"] .brand__white { visibility: visible; }
html[data-hero="on"][data-scrolled="no"] .nav .nav__cta:hover { background: var(--white); color: var(--olive); border-color: var(--white); }
@media (prefers-reduced-motion: no-preference) {
  html.is-ready .site-header { transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease; }
  html.is-ready .site-header::before { transition: opacity 0.5s ease; }
}

/* mobile menu */
.menu {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0 var(--gutter) 2.5rem;
  border: 0;
  background: var(--ivory);
  color: var(--olive);
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  overflow-y: auto;
}
.menu[open] { display: flex; }
.menu::backdrop { background: var(--ivory); }
.menu:focus { outline: none; } /* the menu itself holds the focus when it opens (site.js); its links keep their ring */
.menu__top { width: 100%; height: var(--head-h); display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; flex: none; }
.menu__top .brand img { height: 34px; }
/* the PT/EN switch: top left of the menu, across from the cross; in the full bar it is the last link */
.menu__lang { grid-column: 1; justify-self: start; display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; font: 400 0.75rem/1 var(--font-text); letter-spacing: 0.2em; text-decoration: none; }
.menu__close { grid-column: 3; width: 48px; height: 48px; margin-right: -8px; background: none; border: 0; font: 300 2.2rem/1 var(--font-text); color: inherit; cursor: pointer; }
.menu__nav { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; margin-top: 2vh; }
.menu__nav a { font: 400 clamp(1.7rem, 7vw, 2.4rem)/1.5 var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; padding: 0.15rem 0.5rem; }
.menu__nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.25em; }
/* the four experiences under «Experiences» in the phone menu */
.menu__sub { display: grid; justify-items: center; gap: 0.15rem; margin: -0.2rem 0 0.6rem; }
.menu__nav .menu__sub a { font: 400 0.8rem/1.5 var(--font-text); letter-spacing: 0.18em; color: var(--olive-soft); padding: 0.45rem 0.5rem; }
.menu__contact { font-size: 0.9rem; color: var(--olive-soft); text-align: center; }

/* ---------------------------------------------------------------- page layout */

main { padding-top: var(--head-h); }
main.has-hero { padding-top: 0; }

/* hero (home): the poster gives the box; the film is poured into it */
.hero {
  position: relative;
  display: grid;
  min-height: 100svh;
  color: var(--white);
  isolation: isolate;
  overflow: hidden;
  background: #1D1F18;
}
@media (min-width: 1024px) { .hero { min-height: min(100svh, 62vw); } }
.hero__media, .hero__veil { position: absolute; inset: 0; }
.hero__media picture, .hero__media img, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__video { opacity: 0; }
.hero__video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .hero__video { transition: opacity 0.6s ease; } }
.hero__veil { background: var(--veil); }
.hero__content {
  position: relative;
  align-self: center;
  justify-self: center;
  width: min(100% - 2 * var(--gutter), 60rem);
  padding-block: calc(var(--head-h) + 3rem) 5rem;
  text-align: center;
}
.hero__title { margin-bottom: 0.45em; }
.hero__text { font: italic 300 clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem)/1.4 var(--font-accent); margin: 0 auto 2.4rem; max-width: 34ch; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; }
.hero__actions .button { min-width: 15.5rem; }
/* the round pause/play control of a film: the film's own words stay for screen readers */
.round-pause {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: rgba(22, 24, 18, 0.32);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.6);
  cursor: pointer;
}
.round-pause__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.round-pause__icon { width: 10px; height: 12px; border-inline: 3px solid currentColor; }
.round-pause[data-state="paused"] .round-pause__icon { width: 0; margin-left: 3px; border: 0; border-left: 10px solid currentColor; border-block: 6px solid transparent; }
@media (hover: hover) { .round-pause:hover { background: rgba(255, 255, 255, 0.16); border-color: var(--white); } }
.hero__pause { position: absolute; right: var(--gutter); bottom: 1.25rem; }

/* page hero (inner pages): large text only over the veil */
.page-hero { position: relative; display: grid; min-height: clamp(26rem, 62vw, 40rem); color: var(--white); isolation: isolate; background: #1D1F18; }
.page-hero__media, .page-hero__veil { position: absolute; inset: 0; }
.page-hero__media picture, .page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__veil { background: var(--veil); }
/* a portrait: the shade sits under the words and leaves the face in the light */
.page-hero--portrait .page-hero__veil { background: linear-gradient(to top, rgba(22, 24, 18, 0.8) 0%, rgba(22, 24, 18, 0.62) 42%, rgba(22, 24, 18, 0.28) 72%, rgba(22, 24, 18, 0.2) 100%); }
@media (min-width: 900px) {
  .page-hero--portrait .page-hero__veil { background: linear-gradient(90deg, rgba(22, 24, 18, 0.74) 0%, rgba(22, 24, 18, 0.6) 34%, rgba(22, 24, 18, 0.18) 62%, rgba(22, 24, 18, 0.1) 100%); }
  /* she is on the left: the shade and the words move to the right */
  .page-hero--words-right .page-hero__veil { background: linear-gradient(270deg, rgba(22, 24, 18, 0.74) 0%, rgba(22, 24, 18, 0.6) 34%, rgba(22, 24, 18, 0.18) 62%, rgba(22, 24, 18, 0.1) 100%); }
  .page-hero--words-right .page-hero__content { padding-left: 52%; }
}
/* on a narrow screen the words would cover her: the photograph first, the words below it */
@media (max-width: 899px) {
  .page-hero--portrait { display: block; min-height: 0; background: var(--ivory); color: var(--olive); }
  .page-hero--portrait .page-hero__media { position: relative; inset: auto; aspect-ratio: 4 / 3; }
  .page-hero--portrait .page-hero__veil { display: none; }
  .page-hero--portrait .page-hero__content { padding-block: 2.2rem 0; }
}
.page-hero__content { position: relative; align-self: end; padding-block: 6rem 3.5rem; }
.page-hero__title { margin-bottom: 0.3em; max-width: 18ch; }
.page-hero__lead { font: italic 300 clamp(1.5rem, 1.25rem + 1vw, 2.1rem)/1.4 var(--font-accent); max-width: 32ch; margin: 0; }

.page-head { padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(2rem, 5vw, 3.5rem); }
.page-head__lead { font: italic 300 clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem)/1.5 var(--font-accent); max-width: 40ch; }
.page-head--centre { text-align: center; }
.page-head--centre .page-head__lead { margin-inline: auto; }
.intro-text { padding-block: var(--space) 0; max-width: 52rem; text-align: center; }

/* split: text with a hairline, and pictures */
.split { display: grid; gap: clamp(2.5rem, 7vw, 6rem); align-items: center; padding-block: var(--space); }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .split__text { padding-right: clamp(1.5rem, 4vw, 4rem); border-right: 1px solid var(--sand); }
  .split--reverse { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .split--reverse > :first-child { order: 2; padding-right: 0; border-right: 0; padding-left: clamp(1.5rem, 4vw, 4rem); border-left: 1px solid var(--sand); }
}
.split__text .link-arrow, .split__text .button { margin-top: 1.6rem; }
.single { aspect-ratio: 4 / 5; overflow: hidden; }
.single picture { height: 100%; } /* without it the photo kept its own height and the box only cut its bottom off */
.single img { width: 100%; height: 100%; object-fit: cover; }
/* «How it began»: square and a little narrower; the crop takes the sky off the top (the focus point keeps Ana) */
.single--story { aspect-ratio: 1 / 1; width: min(100%, 32rem); justify-self: center; }

/* collage of three overlapping photographs */
.intro-places { margin: 1.6rem 0 0; font: 400 0.72rem/1.9 var(--font-text); letter-spacing: 0.18em; text-transform: uppercase; color: var(--olive-soft); text-wrap: balance; }
.collage { position: relative; aspect-ratio: 1 / 1.08; }
.collage__item { position: absolute; padding: 7px; background: var(--ivory); }
.collage__item img { width: 100%; height: 100%; object-fit: cover; }
.collage__item picture { height: 100%; }
.collage__item--1 { top: 0; left: 0; width: 58%; height: 66%; }
.collage__item--2 { top: 16%; right: 0; width: 44%; height: 52%; z-index: 1; }
.collage__item--3 { bottom: 0; left: 30%; width: 38%; height: 40%; z-index: 2; }


/* press */
/* the latest article, quoted: Picnic Club's strongest credential, given a section of its own */
.press-feature { padding-block: clamp(3rem, 6vw, 5rem); text-align: center; }
.press-feature__inner { display: grid; justify-items: center; }
.press-feature__inner .eyebrow { margin-bottom: 1.2rem; }
.press-feature__outlet { margin: 0; font: 400 clamp(1.6rem, 1.25rem + 1.3vw, 2.3rem)/1.2 var(--font-display); letter-spacing: 0.04em; }
.press-feature__outlet a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; } /* the outlet's name is the link to the article */
@media (hover: hover) { .press-feature__outlet a:hover { text-decoration-thickness: 2px; } }
.press-feature__date { margin: 0.5rem 0 0.8rem; font: 400 0.76rem/1.5 var(--font-text); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-deep); }
.press-feature__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 2.2rem; margin: 0; }
@media (hover: hover) { .press__item:hover { text-decoration: underline; } }

/* feature: full-bleed photograph with an ivory card (always readable) */
.feature { display: grid; }
.feature__media { aspect-ratio: 4 / 5; overflow: hidden; }
.feature__media img { width: 100%; height: 100%; object-fit: cover; }
.feature__panel {
  position: relative;
  margin: -4rem var(--gutter) 0;
  padding: clamp(1.8rem, 5vw, 3.4rem);
  background: var(--ivory);
}
@media (min-width: 900px) {
  .feature { grid-template: 1fr / 1fr; min-height: clamp(36rem, 62vw, 52rem); }
  .feature__media { grid-area: 1 / 1; aspect-ratio: auto; position: relative; }
  .feature__media picture { position: absolute; inset: 0; }
  .feature__panel { grid-area: 1 / 1; align-self: center; justify-self: end; margin: 4rem calc(var(--gutter) + 2vw); max-width: 31rem; }
}

/* experiences */
.experiences { background: var(--cream); padding-block: var(--space); } /* ivory, cream, ivory down the page, then the dark gallery */
.section-head { display: grid; gap: 1.5rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
@media (min-width: 900px) {
  .section-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: start; }
  .section-head .display { margin: 0; }
  .section-head__text { border-left: 1px solid var(--sand); padding-left: 3rem; }
}
/* on a phone the four cards are a row to swipe, the next one showing at the edge */
.cards { display: grid; gap: 3rem 1.5rem; }
@media (max-width: 639px) {
  .cards {
    display: flex; gap: 14px;
    margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 0.5rem;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .cards::-webkit-scrollbar { display: none; }
  .card { flex: 0 0 78%; scroll-snap-align: start; }
}
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cards > :nth-child(even) { margin-top: 4rem; } }
@media (min-width: 1100px) { .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; } .cards > :nth-child(even) { margin-top: 5.5rem; } }
.card__link { display: block; text-decoration: none; }
.card__media { aspect-ratio: 3 / 4; overflow: hidden; margin-bottom: 1.4rem; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__title { margin-bottom: 0.5rem; }
.card__text { font-size: 1rem; line-height: 1.65; margin-bottom: 1rem; }
.card__more { font: 400 0.74rem/1 var(--font-text); letter-spacing: 0.2em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 0.55em; }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .card__media img { transition: transform 1.4s cubic-bezier(0.2, 0.6, 0.2, 1); }
  .card__link:hover .card__media img { transform: scale(1.04); }
}

/* philosophy */
.philosophy { background: var(--ivory); padding-block: var(--space); text-align: center; }
.philosophy__inner { max-width: 44rem; }
.philosophy__lines { font: italic 300 clamp(1.45rem, 1.2rem + 1vw, 2.05rem)/1.55 var(--font-accent); margin: 0 0 2rem; }
.philosophy__text { max-width: 44ch; margin-inline: auto; }
.philosophy .link-arrow { margin-top: 1.4rem; }

/* gallery: photographs and short films; two columns on a phone, three on a tablet, four after */
.moments { background: var(--olive); color: var(--on-dark); padding-block: clamp(4rem, 8vw, 7rem); }
.moments__head { display: grid; gap: 1.2rem 4rem; margin-bottom: clamp(2.2rem, 4.5vw, 3.6rem); }
@media (min-width: 900px) {
  .moments__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
  .moments__aside { padding-left: 3rem; border-left: 1px solid rgba(245, 239, 228, 0.22); }
}
.moments__head .display { margin: 0; }
.moments__eyebrow { color: var(--gold); }
.moments__aside p { max-width: 46ch; color: var(--on-dark-soft); }
.moments__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2.2rem; margin-top: 0.4rem; }
.moments__actions .link-arrow { color: var(--on-dark); }
.moments__pause {
  display: inline-flex; align-items: center; gap: 0.6rem;
  min-height: 44px; padding: 0;
  background: none; border: 0;
  font: 400 0.72rem/1.3 var(--font-text); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--on-dark-soft);
  cursor: pointer;
}
.moments__pause-icon { width: 9px; height: 11px; border-inline: 3px solid currentColor; }
.moments__pause[data-state="paused"] .moments__pause-icon { width: 0; border: 0; border-left: 9px solid currentColor; border-block: 5.5px solid transparent; }
@media (hover: hover) { .moments__pause:hover { color: var(--on-dark); } }

.moments__wall { columns: 2; column-gap: 10px; }
.moments__col { display: contents; }
.moment { position: relative; aspect-ratio: 4 / 5; margin: 0 0 10px; overflow: hidden; break-inside: avoid; background: #262A1F; }
.moment--film { aspect-ratio: 3 / 4; } /* the films a little taller than the photographs */
.moment picture, .moment img { width: 100%; height: 100%; }
.moment img { object-fit: cover; }
.moment video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.9s ease; }
.moment video.is-playing { opacity: 1; }
@media (max-width: 699px) { .moment[data-extra] { display: none; } } /* a phone shows the first two rows */
@media (min-width: 700px) { .moments__wall { columns: 3; column-gap: 12px; } .moment { margin-bottom: 12px; } }
@media (min-width: 900px) {
  .moments__wall { columns: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
  .moments__col { display: grid; gap: 14px; }
  .moments__col:nth-child(even) { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
  .moment { margin: 0; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .moment img, .moment video { transition: transform 1.6s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.9s ease; }
  .moment:hover img, .moment:hover video { transform: scale(1.035); }
}

.places { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2rem 2.2rem; margin: 0 auto 2rem; max-width: 52rem; }
.places li { font: 400 clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem)/1.5 var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; }
.places-band { padding-block: var(--space); text-align: center; }
.places-band .places { margin-bottom: 1rem; }
.places-band .places li { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem); }

/* reviews */
/* the links come after the reviews on a phone, and beside the title on a wide screen */
.kind-words { display: grid; grid-template-areas: "title" "intro" "list" "links"; padding-block: clamp(3.5rem, 7vw, 6rem); }
@media (min-width: 900px) { .kind-words { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title links" "intro intro" "list list"; align-items: baseline; column-gap: 2rem; } }
.kind-words__title { grid-area: title; margin: 0; }
.kind-words__links { grid-area: links; display: flex; flex-wrap: wrap; gap: 0 2.2rem; margin: 0; }
.kind-words__intro { grid-area: intro; max-width: 80ch; margin: 0.4rem 0 0; font-size: 0.95rem; color: var(--olive-soft); text-wrap: pretty; }
.kind-words__list { grid-area: list; display: grid; margin-top: clamp(1.8rem, 3.5vw, 2.6rem); border-top: 1px solid var(--sand); }
@media (max-width: 899px) { .kind-words__list { border-bottom: 1px solid var(--sand); margin-bottom: 0.8rem; } }
.kind-words__list > li { padding-block: 1.8rem; }
.kind-words__list > li + li { border-top: 1px solid var(--sand); }
@media (min-width: 900px) {
  .kind-words__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kind-words__list > li { padding: 2.2rem clamp(1.5rem, 3vw, 2.6rem) 0; }
  .kind-words__list > li:first-child { padding-left: 0; }
  .kind-words__list > li:last-child { padding-right: 0; }
  .kind-words__list > li + li { border-top: 0; border-left: 1px solid var(--sand); }
}
.quote__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; height: 1.9rem; margin-bottom: 0.6rem; }
.quote__mark { font: italic 400 3.6rem/0.9 var(--font-accent); color: var(--gold); }
.quote .review__example { margin: 0; }
.quote blockquote { margin: 0 0 1.1rem; }
.quote blockquote p { font: italic 300 clamp(1.2rem, 1.1rem + 0.35vw, 1.4rem)/1.5 var(--font-accent); text-wrap: pretty; }
.quote figcaption { display: grid; gap: 0.15rem; font: 400 0.72rem/1.5 var(--font-text); letter-spacing: 0.2em; text-transform: uppercase; color: var(--olive-soft); }
.quote__names { color: var(--olive); }
/* an experience page's review: large and centred on cream, in the same quote style as elsewhere */
.review-feature { background: var(--cream); padding-block: clamp(3.5rem, 7vw, 6rem); text-align: center; }
.review-feature__inner { display: grid; justify-items: center; }
.review-feature__inner > .eyebrow { margin-bottom: 1.4rem; }
.review-feature__quote { margin: 0 0 1.2rem; display: grid; justify-items: center; }
.review-feature__quote .review__example { margin-bottom: 1rem; }
.review-feature__quote .quote__mark { display: block; height: 0.55em; font: italic 400 5rem/0.9 var(--font-accent); color: var(--gold); }
.review-feature__quote blockquote { margin: 0 0 1.3rem; }
.review-feature__quote blockquote p { max-width: 30ch; margin-inline: auto; font: italic 300 clamp(1.6rem, 1.25rem + 1.4vw, 2.4rem)/1.4 var(--font-accent); text-wrap: balance; }
.review-feature__quote figcaption { display: grid; gap: 0.15rem; font: 400 0.72rem/1.5 var(--font-text); letter-spacing: 0.2em; text-transform: uppercase; color: var(--olive-soft); }
.review__example { display: inline-block; margin: 0 0 1.2rem; padding: 0.25rem 0.7rem; border: 1px dashed var(--olive-soft); font: 400 0.68rem/1.4 var(--font-text); letter-spacing: 0.2em; text-transform: uppercase; color: var(--olive-soft); }
/* the reviews page: the same open columns as the home page's «Kind words», in rows of three */
.reviews-list { padding-bottom: var(--space); }
.reviews-wall { display: grid; border-top: 1px solid var(--sand); }
.reviews-wall > li { padding-block: 1.8rem; }
.reviews-wall > li + li { border-top: 1px solid var(--sand); }
@media (min-width: 900px) {
  .reviews-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reviews-wall > li { padding: 2.2rem clamp(1.5rem, 3vw, 2.6rem); }
  .reviews-wall > li + li { border-top: 0; }
  .reviews-wall > li:nth-child(3n + 1) { padding-left: 0; }
  .reviews-wall > li:nth-child(3n) { padding-right: 0; }
  .reviews-wall > li:not(:nth-child(3n + 1)) { border-left: 1px solid var(--sand); }
  .reviews-wall > li:nth-child(n + 4) { border-top: 1px solid var(--sand); }
}

/* instagram strip */
/* Instagram: like the top of a profile. The monogram as its picture, the handle, and a button;
   the whole card is one link, stacked and centred at every width. */
.insta { background: var(--cream); padding-block: clamp(2.4rem, 5vw, 3.4rem); text-align: center; } /* ivory reviews, cream, then the olive footer */
.insta__card { display: inline-grid; justify-items: center; gap: 1rem; color: inherit; text-decoration: none; }
.insta__mark { width: 64px; height: auto; }
.insta__text { display: grid; justify-items: center; gap: 0.3rem; }
.insta .insta__title { margin: 0; }
.insta__handle { font: 400 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.2 var(--font-display); letter-spacing: 0.03em; }
.insta__button {
  display: inline-flex; align-items: center; gap: 0.6rem;
  min-height: 46px; padding: 0 1.4rem;
  border: 1px solid var(--olive);
  font: 500 0.72rem/1 var(--font-text); letter-spacing: 0.2em; text-transform: uppercase;
}
.insta__button .icon { width: 17px; height: 17px; flex: none; }
@media (hover: hover) {
  .insta__card:hover .insta__button { background: var(--olive); color: var(--on-dark); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .insta__button { transition: background-color 0.3s ease, color 0.3s ease; }
  .insta__mark { transition: transform 1.2s cubic-bezier(0.2, 0.6, 0.2, 1); }
  .insta__card:hover .insta__mark { transform: rotate(-6deg) scale(1.04); }
}

/* experience page */
.options { background: var(--cream); padding-block: var(--space); }
.options__list { display: grid; gap: 1.5rem; margin-top: 1rem; }
@media (min-width: 900px) { .options__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.option { background: var(--ivory); padding: clamp(1.6rem, 4vw, 2.6rem); }
.option__name { margin-bottom: 0.8rem; }
.options__note { margin-top: 2rem; }
.included { padding-block: var(--space) 0; }
.ticks { display: grid; gap: 0.2rem 3rem; }
@media (min-width: 720px) { .ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ticks li { display: flex; gap: 1rem; padding-block: 1rem; border-top: 1px solid var(--sand); }
.ticks li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 0.75em; transform: rotate(45deg); background: var(--gold); }
.gallery { padding-block: var(--space); }
.gallery__grid { display: grid; gap: 1rem; }
@media (min-width: 720px) {
  .gallery__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.25rem; }
  .gallery__item--1 { grid-column: span 4; }
  .gallery__item--2 { grid-column: span 2; margin-top: 30%; }
  .gallery__item--3 { grid-column: span 2; }
  .gallery__item--4 { grid-column: span 4; }
  .gallery__item--5 { grid-column: 2 / span 4; }
}
.gallery__item { aspect-ratio: 4 / 5; overflow: hidden; }
@media (min-width: 720px) { .gallery__item--1, .gallery__item--4, .gallery__item--5 { aspect-ratio: 3 / 2; } }
.gallery__item picture, .gallery__item img { width: 100%; height: 100%; object-fit: cover; }
/* «How it works»: steps numbered because they happen in that order */
.steps { padding-block: var(--space) 0; }
.steps > .display { margin-bottom: clamp(2rem, 5vw, 3.4rem); }
.steps__list { display: grid; gap: 2rem 3rem; margin: 0; padding: 0; list-style: none; counter-reset: step; }
@media (min-width: 900px) { .steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.step { counter-increment: step; padding-top: 1.3rem; border-top: 1px solid var(--sand); }
.step::before { content: counter(step, decimal-leading-zero); display: block; margin-bottom: 0.8rem; font: 400 1.9rem/1 var(--font-display); color: var(--gold-deep); }
.step__title { margin: 0 0 0.4rem; font: 400 1.3rem/1.3 var(--font-display); }
.step p { margin: 0; color: var(--olive-soft); }
.extras { display: grid; gap: 2.5rem; padding-bottom: var(--space); }
@media (min-width: 900px) { .extras { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.extras .eyebrow { margin-bottom: 1rem; }
.inline-list { display: flex; flex-wrap: wrap; gap: 0.3rem 0; }
.inline-list li { font: italic 300 1.45rem/1.6 var(--font-accent); }
.inline-list li:not(:last-child)::after { content: "·"; margin: 0 0.7rem; color: var(--gold-deep); font-style: normal; }
.extras__note { margin-top: 0.8rem; color: var(--olive-soft); }

/* our story */
.quote-band { background: var(--cream); padding-block: clamp(2.5rem, 5vw, 4rem); text-align: center; }
.quote-band blockquote { margin: 0 auto 1.6rem; max-width: 30ch; }
.quote-band blockquote p { font: italic 300 clamp(1.8rem, 1.4rem + 2vw, 3rem)/1.35 var(--font-accent); }
.quote-band figcaption { font: 400 0.74rem/1.5 var(--font-text); letter-spacing: 0.22em; text-transform: uppercase; color: var(--olive-soft); }

/* press page */
.press-list { padding-bottom: var(--space); }
.press-entry { padding-block: 2.5rem; border-top: 1px solid var(--sand); max-width: 52rem; }
.press-entry__title { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem); text-transform: none; letter-spacing: 0.01em; }
/* an article with its photograph: the picture beside the text on a wide screen */
.press-entry--image { max-width: none; display: grid; gap: 1.8rem; }
@media (min-width: 900px) { .press-entry--image { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; } }
.press-entry__media { aspect-ratio: 3 / 2; overflow: hidden; }
.press-entry__media picture, .press-entry__media img { width: 100%; height: 100%; }
.press-entry__media img { object-fit: cover; }

/* forms */
/* enquiry page: the film and the ways to talk on one side, the form on the other.
   On a phone: the film, the heading, the form, then the ways to talk. */
.plan { background: var(--ivory); padding-block: 0 var(--space); } /* on a phone the film starts right under the header */
.plan__layout { display: grid; grid-template-areas: "film" "head" "form" "contact"; gap: 2.4rem; }
.plan__aside, .plan__main { display: contents; }
.plan__film { grid-area: film; position: relative; overflow: hidden; aspect-ratio: 4 / 3; margin-inline: calc(-1 * var(--gutter)); background: #262A1F; }
.plan__film picture, .plan__film img { width: 100%; height: 100%; }
.plan__film img, .plan__film video { object-fit: cover; object-position: 50% 62%; }
.plan__film video { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.9s ease; }
.plan__film video.is-playing { opacity: 1; }
.plan__pause { position: absolute; right: 14px; bottom: 14px; }
.plan__head { grid-area: head; }
.plan__head .display { margin-bottom: 0.5em; }
.plan__lead { max-width: 52ch; }
.plan__main .form { grid-area: form; margin-top: 0; }
.plan__contact { grid-area: contact; }
@media (min-width: 1000px) {
  .plan { padding-top: clamp(2.5rem, 6vw, 5.5rem); }
  .plan__layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "aside main"; gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .plan__aside { display: block; grid-area: aside; position: sticky; top: calc(var(--head-h) + 2rem); }
  .plan__main { display: block; grid-area: main; }
  .plan__film { aspect-ratio: 4 / 5; margin-inline: 0; }
  .plan__contact { margin-top: 2rem; }
  .plan__head { margin-bottom: 2.4rem; }
}

.form-section { padding-block: var(--space); background: var(--cream); }
.form-section--top { background: var(--ivory); padding-top: clamp(3rem, 7vw, 6rem); }
.form-layout { display: grid; gap: 3rem; }
@media (min-width: 1000px) { .form-layout { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 5rem; align-items: start; } }
.form-layout__intro h1, .form-layout__intro h2 { margin-bottom: 0.6em; }
/* Between 1000 and ~1300 px the intro column is narrow, and «TESTEMUNHO» in the display face was
   wider than it: it broke as «TESTEMUNH / O». The heading never grows past what fits the column
   (12.5cqi keeps a ten-letter word inside it); elsewhere the size is the usual one. */
.form-layout__intro { container-type: inline-size; }
.form-layout__intro h2.display { font-size: min(clamp(1.8rem, 1.35rem + 2.1vw, 2.85rem), 12.5cqi); }
.contact-card { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--sand); }
.contact-card .button { margin-bottom: 1.4rem; }
.form { display: grid; gap: 1.6rem; }
.form__grid { display: grid; gap: 1.6rem 2rem; }
@media (min-width: 720px) { .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: grid; gap: 0.45rem; align-content: start; }
.field label { font: 400 0.76rem/1.4 var(--font-text); letter-spacing: 0.16em; text-transform: uppercase; }
.field__opt { text-transform: none; letter-spacing: 0.02em; color: var(--olive-soft); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 50px;
  padding: 0.75rem 0.9rem;
  font: 300 1rem/1.5 var(--font-text);
  color: var(--olive);
  background: var(--white);
  border: 1px solid var(--olive-soft);
  border-radius: 0;
  appearance: none;
}
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--olive) 50%), linear-gradient(135deg, var(--olive) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.6rem; }
.field textarea { resize: vertical; min-height: 9rem; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--olive); outline-offset: 1px; }
.field [aria-invalid="true"] { border-color: #8A2E1F; border-width: 2px; }
.field__hint { font-size: 0.85rem; line-height: 1.5; color: var(--olive-soft); margin: 0; }
.field__error, .form .field__error { font-size: 0.9rem; color: #8A2E1F; margin: 0; }
.check { display: flex; gap: 0.8rem; align-items: flex-start; }
.check input { flex: none; width: 22px; height: 22px; margin-top: 0.2rem; accent-color: var(--olive); }
.form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__status:empty { display: none; }
.form__status { padding: 1rem 1.2rem; background: var(--ivory); border-left: 2px solid var(--olive); }
.form .button { justify-self: start; min-width: 14rem; }
.form-done h2 { margin-bottom: 0.5em; }

/* legal */
.legal { max-width: 46rem; padding-bottom: var(--space); }
.legal h2 { font: 400 0.82rem/1.5 var(--font-text); letter-spacing: 0.2em; text-transform: uppercase; margin: 2.8rem 0 1rem; }
.legal h2:first-child { margin-top: 0; }
.legal address { font-style: normal; margin-bottom: 1.1em; }
.rules { margin: 0 0 1.5rem; }
.rules > div { padding-block: 1rem; border-top: 1px solid var(--sand); }
.rules dt { font-weight: 500; }
.rules dd { margin: 0.2rem 0 0; }
.call-note { display: block; font-size: 0.8em; line-height: 1.5; color: var(--olive-soft); }

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

.site-footer { background: var(--olive); color: var(--on-dark); padding-block: clamp(4rem, 8vw, 6rem) 2rem; }
.site-footer a { color: inherit; }
.site-footer__grid { display: grid; gap: 2.8rem; }
@media (min-width: 720px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .site-footer__grid { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); } }
.site-footer__logo { width: 210px; height: auto; margin-bottom: 1.4rem; filter: saturate(0.7); } /* the written logo (the monogram opens the Instagram block above); its gold a little less yellow on the dark green, as Ana asked */
.site-footer__areas { font-size: 0.85rem; letter-spacing: 0.08em; color: #CFC6B5; text-wrap: balance; }
.site-footer__title { font: 400 0.74rem/1.5 var(--font-text); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin: 0 0 1rem; }
.site-footer__col li { padding-block: 0.25rem; font-size: 0.95rem; }
.site-footer__col a { text-decoration: none; }
@media (hover: hover) { .site-footer__col a:hover { text-decoration: underline; } }
.site-footer .call-note { color: #CFC6B5; }
/* contacts with their icons: gold line icons, the words aligned after them */
.site-footer__contact a { display: inline-flex; align-items: center; gap: 0.65rem; }
.site-footer__contact .icon { width: 17px; height: 17px; flex: none; color: var(--gold); }
.site-footer__contact .call-note { display: block; padding-left: calc(17px + 0.65rem); }
.site-footer__legal { margin-top: 3.5rem; padding-top: 1.6rem; border-top: 1px solid rgba(245, 239, 228, 0.2); font-size: 0.82rem; color: #CFC6B5; }

/* ---------------------------------------------------------------- motion */

/* Reveals start from a visible state; JS only adds them when motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
  html.reveal-on [data-reveal]:not(.is-in) { opacity: 0.001; transform: translateY(24px); }
  html.reveal-on [data-reveal] { transition: opacity 1.4s ease, transform 1.4s cubic-bezier(0.2, 0.6, 0.2, 1); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* focus points from content/photos.json */
img[data-img="ana-founder-beach"]{object-position:70% 45%}
img[data-img="ana-white-orchids"]{object-position:38% 40%}
img[data-img="behind-the-scenes"]{object-position:50% 70%}
img[data-img="elopement-at-the-arch"]{object-position:50% 52%}
img[data-img="elopement-ceremony-arch"]{object-position:50% 60%}
img[data-img="elopement-hands"]{object-position:50% 45%}
img[data-img="elopement-heart-arch"]{object-position:50% 60%}
img[data-img="elopement-rings-sand"]{object-position:50% 55%}
img[data-img="elopement-walk"]{object-position:50% 55%}
img[data-img="event-beach-long-table"]{object-position:50% 58%}
img[data-img="event-beach-parasols"]{object-position:50% 55%}
img[data-img="event-beach-stripes"]{object-position:50% 60%}
img[data-img="event-table-details"]{object-position:50% 55%}
img[data-img="picnic-deck-pool"]{object-position:50% 60%}
img[data-img="picnic-poolside-table"]{object-position:50% 55%}
img[data-img="picnic-poolside-toast"]{object-position:50% 55%}
img[data-img="picnic-shoreline-table"]{object-position:50% 85%}
img[data-img="picnic-under-the-tree"]{object-position:50% 66%}
img[data-img="proposal-beach-table"]{object-position:50% 66%}
img[data-img="proposal-beach-table-waves"]{object-position:50% 66%}
img[data-img="proposal-candlelit-night"]{object-position:50% 60%}
img[data-img="proposal-cliff-candles"]{object-position:50% 62%}
img[data-img="proposal-embrace"]{object-position:50% 40%}
img[data-img="proposal-heart-arch-pool"]{object-position:50% 52%}
img[data-img="proposal-one-knee-beach"]{object-position:50% 70%}
img[data-img="proposal-one-knee-petals"]{object-position:50% 60%}
img[data-img="proposal-one-knee-sunset"]{object-position:50% 64%}
img[data-img="proposal-sunset-sails"]{object-position:50% 58%}
img[data-img="proposal-sunset-waiting"]{object-position:50% 62%}
img[data-img="proposal-two-sails-sea"]{object-position:50% 66%}
img[data-img="proposal-white-roses"]{object-position:50% 45%}