/* ==========================================================================
   Jorge & Anna — wedding site
   Values pulled from Figma: Wedding / Website (node 79:700, base width 393px).
   Mobile-first: the 393px artboard is the base layer; wider viewports cap and
   centre the column and scale the display type up gently.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts
   Distrampler is the display face in the Figma file. Drop the webfont files
   into /fonts and the whole site picks them up — the serif stack below is the
   fallback until then.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Distrampler';
  src: url('../fonts/distrampler.woff2') format('woff2'),
       url('../fonts/distrampler.woff')  format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* D-DIN carries the menu navigation. Same deal as Distrampler — drop the
   files into /fonts and it takes over from the fallback stack. */
@font-face {
  font-family: 'D-DIN';
  src: url('../fonts/d-din.woff2') format('woff2'),
       url('../fonts/d-din.woff')  format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'D-DIN';
  src: url('../fonts/d-din-bold.woff2') format('woff2'),
       url('../fonts/d-din-bold.woff')  format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Colour — from the Figma frame + published variables */
  --c-sand:        #F7EADF;              /* hero bg, cards, tab track, chips  */
  --c-clay:        #9B6859;              /* accent headings, primary button   */
  --c-ink:         #000000;              /* display type, body copy           */
  --c-white:       #FFFFFF;
  --c-gray-600:    #383838;              /* Grayscale/Grayscale600            */
  --c-gray-300:    #B0B0B0;              /* Grayscale/Grayscale300            */
  --c-gray-100:    #F4F4F4;              /* Grayscale/Grayscale100            */
  --c-veil:        rgba(255, 255, 255, .5); /* chip bg on sand                */
  --c-disabled-bg: #E4E4E4;
  --c-disabled-fg: #C0C0C0;

  /* Type */
  --font-display: 'Distrampler', 'Playfair Display', Didot, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-nav:     'D-DIN', 'DIN Alternate', 'Inter', sans-serif;

  --c-nav-idle:   #8A8A8A;               /* menu items other than the current */

  /* Neither Distrampler nor D-DIN contains Cyrillic. Rather than let Russian
     fall back to whatever the system happens to offer, Russian names a
     deliberate pair: Playfair for display, Inter for navigation. Both cover
     Cyrillic and both are already loaded, and Latin readers never fetch them.
     The real faces stay first in the stack, so "Jorge & Anna" and the venue
     name keep Distrampler even on the Russian site — only Cyrillic glyphs
     fall through. */

  /* Language switcher — a neutral segmented control in both places: grey
     track, white pill for the selected language, grey for the rest. */
  --c-tab-track:  #F5F5F5;
  --c-tab-idle:   #AEAEAE;
  --shadow-tab:   0 4px 7px -6px rgba(0, 0, 0, .25);

  --fs-hero:    72px;                    /* Jorge / & / Anna                  */
  --fs-section: 40px;                    /* section headings                  */
  --fs-card:    24px;                    /* timeline card titles              */
  --fs-h4:      18px;                    /* Heading/Semibold/H4               */
  --fs-h5:      16px;                    /* Heading/Semibold/H5, body         */
  --fs-sm:      12px;

  --lh-hero: 1.125;                      /* 72px type → 81px block            */
  --lh-h4:   24px;
  --lh-h5:   22px;

  /* Space */
  --gutter:    24px;
  --section-y: 32px;
  --gap-24:    24px;
  --gap-16:    16px;
  --gap-15:    15px;
  --gap-64:    64px;
  --gap-8:      8px;
  --gap-5:      5px;

  /* Room under the last section so the end of the page clears mobile browser
     chrome — the same reasoning as the hero's deep bottom gap. */
  --page-bottom: 64px;

  /* Hero rhythm — eyebrow 19 · 42.5 · names 377 · 42.5 · date 37 · 31 · arrow
     48, then a deep bottom gap so the arrow clears mobile browser chrome. */
  --hero-gap:      42.5px;
  --hero-bottom:  103px;

  /* Photo treatment. Every photograph on the page is fully desaturated and
     dropped to 50% so it sits back into the sand palette — this is the art
     direction, not an accident. Figma's codegen reports the opacity and the
     blend mode but NOT the saturation on the image fill, so read it off the
     rendered node, never off the generated code.
     The map is the one exception: it stays full colour so it reads as a map. */
  --img-opacity:    .5;
  --img-saturation: saturate(0);
  --c-tint-clay:    rgba(155, 104, 89, .5);

  /* Timeline card photo: 313 of 345 wide, text column inset 120 of 345.
     Kept as ratios so the card scales without changing the design. */
  --card-media-w:  90.7246%;
  --card-text-in:  34.7826%;
  --card-fade: linear-gradient(
                 269.3531426296957deg,
                 rgba(247, 234, 223, 0) 1.1643%,
                 rgb(247, 234, 223) 99.777%);

  /* Components */
  --header-h:      72px;
  --control-h:     48px;
  --input-h:       52px;
  --chip-pad:       8px;
  --icon:          32px;
  --r-chip:        24px;
  --r-tab-track:   10px;
  --r-tab:          8px;

  --content-max:  640px;                 /* keeps the column readable ≥640px  */
}

:root:lang(ru) {
  --font-display: 'Distrampler', 'Playfair Display', Georgia, serif;
  --font-nav:     'D-DIN', 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

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

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

body {
  margin: 0;
  background: var(--c-sand);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--fs-h5);
  font-weight: 400;
  line-height: normal;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, figure, fieldset, legend, ol, ul {
  margin: 0; padding: 0; border: 0;
}
ol, ul { list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--c-white);
  color: var(--c-gray-600);
  padding: 12px 16px;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* Links and buttons keep a visible ring. Form fields do not — they signal
   focus with the dark border the design already uses for a filled field, so
   no brown stroke appears around an active input. */
:where(a, button):focus-visible {
  outline: 2px solid var(--c-clay);
  outline-offset: 2px;
}

[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Header — 393×72 (24px sides, 16px top, 24px bottom)
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-white);
  padding-top: env(safe-area-inset-top);
}

.header__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 16px var(--gutter) var(--gutter);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-16);
}

.header__name {
  flex: 1 0 0;
  min-width: 0;
  font-size: var(--fs-h5);
  font-weight: 700;
  line-height: 32px;
  color: var(--c-gray-600);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--gap-16);
  flex-shrink: 0;
}

/* Language switcher — track 140×32, r10, 4px pad; pills 44×24, r8 */
.lang__track {
  display: flex;
  width: 140px;
  height: 32px;
  padding: 4px;
  border-radius: var(--r-tab-track);
  background: var(--c-tab-track);
}

.lang__tab {
  flex: 1 0 0;
  min-width: 0;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
  border: 0;
  border-radius: var(--r-tab);
  background: transparent;
  color: var(--c-tab-idle);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: var(--lh-h5);
  cursor: pointer;
}

.lang__tab.is-active {
  background: var(--c-white);
  color: var(--c-ink);
  font-weight: 900;
}

.menu-btn {
  width: var(--icon);
  height: var(--icon);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Full-screen menu (Figma 103:1622)
   Bar with the name and the close cross, six centred links, and the large
   language switcher held near the bottom.
   -------------------------------------------------------------------------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  padding-top: env(safe-area-inset-top);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.menu__bar {
  flex-shrink: 0;
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 16px var(--gutter) var(--gutter);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-16);
}

/* Links sit in the space between the bar and the switcher */
.menu__nav {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--gap-24);
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--gap-24) var(--gutter);
}

.menu__nav a {
  font-family: var(--font-nav);
  font-size: 32px;
  font-weight: 400;
  line-height: normal;
  color: var(--c-nav-idle);
  text-align: center;
  text-decoration: none;
}

/* The section you are currently in */
.menu__nav a.is-current {
  color: var(--c-ink);
  font-weight: 700;
}

.menu__lang {
  flex-shrink: 0;
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 0 var(--gutter);
  margin-bottom: calc(100px + env(safe-area-inset-bottom));
}

.menu__lang-track {
  display: flex;
  padding: 4px;
  border-radius: var(--r-tab-track);
  background: var(--c-tab-track);
}

.menu__lang-tab {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 52px;
  padding: 6px 0;
  border: 0;
  border-radius: var(--r-tab);
  background: transparent;
  color: var(--c-tab-idle);
  font-weight: 600;
  cursor: pointer;
}

/* Only the menu's selected pill is lifted off the track in the design */
.menu__lang-tab.is-active {
  background: var(--c-white);
  color: var(--c-ink);
  font-weight: 900;
  box-shadow: var(--shadow-tab);
  overflow: clip;
}

.menu__flag      { font-size: 24px; line-height: 22px; }
.menu__lang-name { font-size: var(--fs-sm); line-height: 14px; }

/* While the menu is open the small header pills stand down in favour of the
   large switcher inside it. */
body.menu-open .lang { visibility: hidden; }
body.menu-open       { overflow: hidden; }

/* --------------------------------------------------------------------------
   Hero — full first viewport, sand ground.
   The bottom padding is much deeper than the top: it keeps the scroll arrow
   clear of the browser's own chrome on a phone, where the URL bar eats the
   last stretch of the viewport.
   -------------------------------------------------------------------------- */
.hero {
  background: var(--c-sand);
  padding: var(--section-y) var(--gutter)
           calc(var(--hero-bottom) + env(safe-area-inset-bottom));
  min-height: calc(100svh - var(--header-h));
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__inner {
  width: 100%;
  max-width: var(--content-max);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__eyebrow {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: var(--hero-gap);
  font-size: var(--fs-h5);
  font-weight: 400;
  line-height: normal;
}

/* Names + photo share a stage: photo sits 47px below the names' top edge,
   horizontally centred, multiplying into the sand. The stage carries the
   display size so the photo and the name gap are expressed in em and scale
   with it as one unit — at 72px these resolve to the Figma values exactly. */
.hero__stage {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  font-size: var(--fs-hero);
}

.hero__photo {
  position: absolute;
  top: .5486em;                          /* 39.5 / 72                         */
  left: 50%;
  transform: translateX(-50%);
  width: 4.125em;                        /* 297 / 72                          */
  height: 4.125em;
  max-width: none;
  object-fit: cover;
  object-position: center;
  filter: var(--img-saturation);
  opacity: var(--img-opacity);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.hero__names {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9306em;                          /* 67px at 72px: 148 pitch − 81 block */
  margin: 0;
  font-family: var(--font-display);
  font-size: 1em;
  font-weight: 400;
  line-height: var(--lh-hero);
  text-align: center;
}

.hero__name { display: block; }

.hero__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--hero-gap);
}

.hero__date {
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  line-height: normal;
  text-align: center;
}
.hero__date strong {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
}
.hero__date span { display: block; }

.hero__arrow {
  margin-top: 31px;
  height: 48px;
  width: auto;
}

/* --------------------------------------------------------------------------
   Sections — 32px block padding, 24px inline, 24px internal gap
   -------------------------------------------------------------------------- */
.section {
  padding: var(--section-y) var(--gutter);
}
.section--white { background: var(--c-white); }
.section--sand  { background: var(--c-sand);  }

/* Last section on a page carries the deeper bottom gap */
main > .section:last-child { padding-bottom: var(--page-bottom); }

.section__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap-24);
}

.section__head {
  display: flex;
  align-items: center;
  gap: var(--gap-8);
}
.section__head--top { align-items: flex-start; }

.section__title {
  font-family: var(--font-display);
  font-size: var(--fs-section);
  font-weight: 400;
  line-height: normal;
  color: var(--c-ink);
}
.section__title--clay { color: var(--c-clay); }

.section__body {
  font-size: var(--fs-h5);
  font-weight: 400;
  line-height: normal;
}

/* Icon chip — 32px glyph in 8px padding, fully rounded */
.chip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: var(--chip-pad);
  border-radius: var(--r-chip);
}
.chip--sand { background: var(--c-sand); }
.chip--veil { background: var(--c-veil); }
.chip img {
  width: var(--icon);
  height: var(--icon);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Timeline cards
   -------------------------------------------------------------------------- */
.timeline {
  display: flex;
  flex-direction: column;
  gap: var(--gap-16);
}

/* Photo bleeds in from the right edge; the gradient fades it back into the
   sand toward the left so the copy sits on flat colour. Both the photo width
   and the text inset are ratios of the card, so the balance between copy and
   image holds at any card width. */
.card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--gap-15);
  padding: var(--gap-16) var(--card-text-in) var(--gap-16) var(--gap-16);
  min-height: 124px;
  background: var(--c-sand);
}

.card__media {
  position: absolute;
  inset-block: 0;
  right: 0;
  width: var(--card-media-w);
  pointer-events: none;
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--img-saturation);
  opacity: var(--img-opacity);
  mix-blend-mode: darken;
}

.card__media--bottom img { object-position: bottom; }

.card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--card-fade);
}

.card__heading {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--gap-5);
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--fs-card);
  font-weight: 400;
  line-height: normal;
}

.card__time {
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: normal;
}

.card__text {
  position: relative;
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: normal;
}

/* --------------------------------------------------------------------------
   Full-width section images (Things to do, Where to stay)
   -------------------------------------------------------------------------- */
.section__media {
  position: relative;
  width: 100%;
}

.section__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--img-saturation);
  opacity: var(--img-opacity);
}

.section__media--wide { aspect-ratio: 3000 / 2000; }
.section__media--stay { aspect-ratio: 740 / 493; }

/* Clay wash over the desaturated skyline — the two together give the
   clay-toned duotone the design calls for. */
.section__media--tint::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-tint-clay);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Location
   -------------------------------------------------------------------------- */
.venue__address {
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  line-height: normal;
}
.venue__address strong {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
}
.venue__address span { display: block; }

.map {
  width: 100%;
  height: 231px;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Buttons — 48px tall, square, Inter Semi Bold 18/24
   -------------------------------------------------------------------------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--control-h);
  padding: 12px var(--gutter);
  border: 0;
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--lh-h4);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.btn--black { background: var(--c-ink);  color: var(--c-white); }
.btn--clay  { background: var(--c-clay); color: var(--c-white); }

.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--c-disabled-bg);
  color: var(--c-disabled-fg);
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   RSVP form
   -------------------------------------------------------------------------- */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--gap-16);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--gap-8);
  border: 0;
}

.field__label {
  font-size: var(--fs-h5);
  font-weight: 600;
  line-height: var(--lh-h5);
  color: var(--c-gray-600);
}

.input {
  width: 100%;
  height: var(--input-h);
  padding: 0 var(--gap-16);
  border: 2px solid var(--c-gray-100);
  border-radius: 0;
  background: var(--c-white);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--lh-h4);
  color: var(--c-gray-600);
  appearance: none;
}

.input::placeholder { color: var(--c-gray-300); opacity: 1; }

/* Filled inputs take the dark border shown in the Figma filled-state frame.
   Scoped to input/textarea — a <select> never matches :placeholder-shown, so
   an unscoped rule would darken the guest field before anything is chosen. */
input.input:not(:placeholder-shown),
textarea.input:not(:placeholder-shown),
.input:focus {
  border-color: var(--c-gray-600);
}

.input:focus { outline: none; }
.input--area {
  height: 162px;
  padding: 14px var(--gap-16);
  line-height: var(--lh-h4);
  resize: vertical;
}

/* Select keeps the designed chevron rather than the platform arrow */
.select { position: relative; }
.select .input { padding-right: 52px; }
.select__icon {
  position: absolute;
  top: 50%;
  right: var(--gap-16);
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  pointer-events: none;
}
.select select:invalid { color: var(--c-gray-300); }
.select select:valid    { border-color: var(--c-gray-600); }

/* Attend choice — two equal boxes, selected one goes dark */
.field--choice { min-width: 0; }

.choice {
  display: flex;
  gap: var(--gap-8);
}

.choice__option {
  flex: 1 0 0;
  min-width: 0;
}

.choice__option input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.choice__box {
  display: flex;
  align-items: center;
  height: var(--input-h);
  padding: 0 var(--gap-16);
  border: 2px solid var(--c-gray-100);
  background: var(--c-white);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--lh-h4);
  color: var(--c-gray-300);
  cursor: pointer;
}

.choice__option input:checked + .choice__box {
  border-color: var(--c-gray-600);
  color: var(--c-gray-600);
}

.choice__option input:focus-visible + .choice__box {
  border-color: var(--c-gray-600);
}

.form__status {
  font-size: var(--fs-h5);
  font-weight: 600;
  line-height: var(--lh-h5);
  color: var(--c-clay);
}
.form__status:empty { display: none; }

/* --------------------------------------------------------------------------
   Wider viewports — the mobile artboard is the source of truth, so only the
   column width and the display type change.
   -------------------------------------------------------------------------- */
@media (min-width: 700px) {
  :root {
    /* Bounded by height as well as width, so the date and the scroll arrow
       stay inside the first viewport on short laptop screens. */
    --fs-hero:    clamp(52px, min(9vw, 7.5vh), 96px);
    --fs-section: 48px;
    --fs-card:    28px;
  }
  .map { height: 300px; }
}

@media (min-width: 1024px) {
  :root { --section-y: 64px; }
}

/* --------------------------------------------------------------------------
   Standalone pages (Things to do, Location)
   Sand intro, then a white panel holding the plan switcher and the day cards.
   The day photos run at full colour — unlike the ones on the home page, the
   design does not dim these.
   -------------------------------------------------------------------------- */
.header__home { text-decoration: none; }

.page-intro { padding-block: 40px; }
.trip__plans { padding-top: var(--gap-24); }

.page-intro .section__inner { gap: var(--gap-16); }

.page-intro__title {
  white-space: pre-line;                 /* breaks come from the copy         */
  font-family: var(--font-display);
  font-size: var(--fs-section);
  font-weight: 400;
  line-height: normal;
  color: var(--c-ink);
}

.page-intro__lead {
  white-space: pre-line;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
}

/* Plan switcher — the segmented control again, at 40px */
.plan__track {
  display: flex;
  height: 40px;
  padding: 4px;
  border-radius: var(--r-tab-track);
  background: var(--c-tab-track);
}

.plan__tab {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
  border: 0;
  border-radius: var(--r-tab);
  background: transparent;
  color: var(--c-tab-idle);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: var(--lh-h5);
  cursor: pointer;
}

.plan__tab.is-active {
  background: var(--c-white);
  color: var(--c-ink);
  font-weight: 900;
  box-shadow: var(--shadow-tab);
}

/* Day cards */
.days {
  display: flex;
  flex-direction: column;
  gap: var(--gap-64);
}

.day {
  display: flex;
  flex-direction: column;
  gap: var(--gap-24);
}

.day__photo {
  width: 100%;
  /* height:auto is required: the width/height attributes act as presentational
     hints, and aspect-ratio is ignored while both dimensions are set. */
  height: auto;
  aspect-ratio: 3000 / 2000;
  object-fit: cover;
}

.day__body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-16);
}

.day__title {
  font-family: var(--font-display);
  font-size: var(--fs-section);
  font-weight: 400;
  line-height: normal;
  color: var(--c-clay);
}

.day__plan {
  list-style: decimal;
  padding-left: 21px;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
}

.day__plan b { font-weight: 700; }

/* --------------------------------------------------------------------------
   Location page (Figma 108:2381)
   Venue details, then the hotel gallery. These photos run at full colour —
   the design does not dim them the way the home page does.
   -------------------------------------------------------------------------- */
.location .section__inner { gap: var(--gap-64); }

.venue {
  display: flex;
  flex-direction: column;
  gap: var(--gap-24);
}

.venue__note {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  line-height: normal;
}

.gallery {
  display: flex;
  flex-direction: column;
  gap: var(--gap-8);
}

.gallery__title {
  font-family: var(--font-display);
  font-size: var(--fs-section);
  font-weight: 400;
  line-height: normal;
  color: var(--c-clay);
}

.gallery img {
  width: 100%;
  /* height:auto so the width/height attributes cannot override aspect-ratio */
  height: auto;
  aspect-ratio: 345 / 230;
  object-fit: cover;
}