/* ————— Juana & Javier — Punta del Este — shared styles ————— */

:root {
  /* Body/heading greens are the retinted values the design tool applied at
     runtime via wedding-tweaks.jsx (defaults), baked in here for fidelity.
     Original prototype defaults: --ink #3a4d3e, --heading #5f7358, --accent-soft #97a08b. */
  --ink: #67795f;
  --muted: #838a78;
  --heading: #67795f;
  --bg: #faf8f2;
  --bg-alt: #f2eee3;
  --accent: #52634a;
  --accent-soft: color-mix(in srgb, var(--accent) 64%, #b9bca8);
  --line: #ddd6c5;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Karla", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

/* ————— language switching ————— */
body.lang-es .en { display: none !important; }
body.lang-en .es { display: none !important; }

/* ————— nav ————— */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 28px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.nav-monogram {
  display: flex;
  align-items: center;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}

.nav-logo {
  height: 34px;
  width: 34px;
  display: block;
  background-color: var(--heading);
  -webkit-mask: url("illustrations/logo.png") center / contain no-repeat;
  mask: url("illustrations/logo.png") center / contain no-repeat;
}

.footer-logo {
  height: 56px;
  width: 56px;
  display: block;
  margin: 0 auto 10px;
  background-color: var(--heading);
  -webkit-mask: url("illustrations/logo.png") center / contain no-repeat;
  mask: url("illustrations/logo.png") center / contain no-repeat;
}

.nav-links {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: center;
}

.nav-links a {
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}

.nav-links a:hover { color: var(--accent); }

.lang-toggle {
  display: flex;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px;
  background: var(--bg);
}

.lang-btn {
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
}

.lang-btn.active {
  background: var(--accent);
  color: var(--bg);
}

/* Mobile nav: no hamburger. Monogram + language toggle stay on the top row;
   the section links drop to a full-width second row you can swipe sideways. */
@media (max-width: 860px) {
  .nav {
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 11px 16px 9px;
  }
  .nav-monogram { order: 1; }
  .lang-toggle  { order: 2; }
  .nav-links {
    order: 3;
    flex-basis: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 22px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* fade the right edge to hint there's more to scroll */
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
    mask-image: linear-gradient(to right, #000 88%, transparent);
    padding-bottom: 1px;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { white-space: nowrap; flex: 0 0 auto; }
}

/* offset anchor jumps so the fixed nav doesn't cover section headings */
.hero, .section, .guide-cta, .blk { scroll-margin-top: 86px; }
@media (max-width: 860px) {
  .hero, .section, .guide-cta, .blk { scroll-margin-top: 104px; }
}

/* ————— hero ————— */
.hero {
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 104px 24px 56px;
}

.pcard {
  display: flex;
  width: 100%;
  max-width: 1040px;
  background: #fbf7ec;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px -30px rgba(44, 42, 37, 0.5);
}

.pc-photo {
  flex: 0 0 46%;
  border-right: 1px solid #d8cfb6;
  padding: 132px 0 116px 22px;
  display: flex;
}

.pc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
  mask-composite: intersect;
}

.pc-body {
  flex: 1;
  position: relative;
  padding: 40px 44px 38px;
}

.pc-stamp {
  position: absolute;
  top: 30px;
  right: 42px;
  width: 82px;
  height: 102px;
}

.pc-stamp img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.pc-letter {
  --lh: 40px;
  margin-top: 92px;
  background-image: linear-gradient(color-mix(in srgb, var(--accent-soft) 42%, transparent) 1px, transparent 1px);
  background-size: 100% var(--lh);
  background-position: 0 calc(var(--lh) - 1px);
}

.pc-letter p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  line-height: var(--lh);
  color: var(--ink);
  margin: 0 0 var(--lh);
}

.pc-letter p.pc-sign {
  font-style: normal;
  font-size: 34px;
  line-height: 1.1;
  color: var(--heading);
  /* the signature is ~one ruled-line tall, so at some widths a rule would slice
     through it. Shrink-wrap it (display:table + margin-left:auto keeps it right-
     aligned) and lay it on a patch of paper so the line ends at the signature
     instead of crossing the glyphs. */
  display: table;
  margin: var(--lh) 0 0 auto;
  background: #fbf7ec;
  padding-left: 10px;
}

/* typewriter reveal — each glyph fades in where it already sits, so the letter
   writes itself out with no layout shift */
.tw-ch { opacity: 0; transition: opacity 80ms linear; }
.tw-ch.on { opacity: 1; }

.tw-caret {
  display: inline-block;
  width: 2px;
  height: 1.02em;
  margin-left: 1px;
  vertical-align: -0.16em;
  background: color-mix(in srgb, var(--ink) 62%, transparent);
  animation: tw-caret-blink 1s steps(1) infinite;
}

@keyframes tw-caret-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .tw-ch { opacity: 1; transition: none; }
  .tw-caret { display: none; }
}

/* Mobile: keep the postcard hero side-by-side (never stack) and shrink the
   whole card uniformly. The hero is a query container and every internal
   metric of the postcard is expressed in cqw (1cqw = 1% of the hero width),
   so the layout stays identical to desktop — just resized to fit the screen. */
@media (max-width: 760px) {
  .hero {
    padding: 116px 14px 28px;
    container-type: inline-size;
    overflow-x: hidden;
  }
  .pcard {
    width: 100%;
    max-width: 100%;
    /* flex-direction stays row — no stacking */
  }
  .pc-photo {
    flex: 0 0 46%;
    padding: 12.7cqw 0 11.15cqw 2.1cqw;
  }
  .pc-body { padding: 3.85cqw 4.23cqw 3.65cqw; }
  .pc-stamp { top: 2.88cqw; right: 4.04cqw; width: 7.88cqw; height: 9.81cqw; }
  .pc-letter { --lh: 3.85cqw; margin-top: 8.85cqw; }
  .pc-letter p { font-size: 1.92cqw; }
  .pc-letter p.pc-sign { font-size: 3.27cqw; }
}

/* ————— sections ————— */
.section {
  padding: 96px 24px;
}

.section.alt { background: var(--bg-alt); }

#boda, #hospedaje, #regalos {
  background: linear-gradient(rgba(250, 248, 242, 0.45), rgba(250, 248, 242, 0.45)), #ece4d3 url("illustrations/linen.png") center / 420px auto;
}

.section-inner {
  max-width: 880px;
  margin: 0 auto;
}

.section-inner.wide { max-width: 1060px; }

.kicker {
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin: 0 0 14px;
}

h2.section-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(34px, 4.5vw, 48px);
  line-height: 1.12;
  margin: 0 0 18px;
  color: var(--heading);
}

.section-lede {
  max-width: 620px;
  color: var(--muted);
  margin: 0 0 48px;
}

/* ————— option cards (transport) ————— */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 48px;
}

.option-card {
  border: 1px solid var(--line);
  background: var(--bg);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.option-card .card-illo {
  display: block;
  width: 100%;
  height: 112px;
  object-fit: contain;
  object-position: center bottom;
  margin-bottom: 14px;
}

.option-card h3 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  margin: 0;
}

.option-card .tag {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

.option-card p {
  margin: 0;
  font-size: 15.5px;
  color: var(--muted);
}

.option-card a { color: var(--accent); }

.option-card a.phone-link { color: var(--accent-soft); }

.info-note {
  margin-top: 30px;
  border: 1px solid var(--line);
  background: var(--bg);
  padding: 20px 26px;
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
}

.info-note .info-tag {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

.info-note p {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
  flex: 1;
  min-width: 240px;
}

/* ————— hotel lists ————— */
.area-label {
  font-family: var(--serif);
  font-style: italic;
  font-size: 26px;
  color: var(--heading);
  margin: 56px 0 8px;
}

.list-rows {
  border-top: 1px solid var(--line);
  margin: 0;
  padding: 0;
  list-style: none;
}

.list-rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 18px 2px;
  border-bottom: 1px solid var(--line);
}

.list-rows .name {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
}

.list-rows .detail {
  font-size: 14px;
  color: var(--muted);
  text-align: right;
}

.list-rows .detail a { color: var(--accent); }

.code-badge {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent-soft);
  border-radius: 999px;
  padding: 3px 12px;
}

/* ————— hotel stamp cards ————— */
.stamp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 40px 28px;
  margin: 36px 0 8px;
}

.stamp-grid--flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.stamp-grid--flex .stamp-card {
  flex: 0 1 calc((100% - 2 * 28px) / 3);
  max-width: 240px;
}

.stamp-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stamp {
  width: 100%;
  max-width: 212px;
  aspect-ratio: 1 / 1;
  background: url("illustrations/stamp-frame-sq-light.png") center / 100% 100% no-repeat;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15.5%;
  box-sizing: border-box;
}

.stamp img {
  max-width: 75%;
  max-height: 75%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.stamp-name {
  font-family: "Petit Formal Script", var(--serif);
  font-size: 25px;
  line-height: 1.15;
  color: var(--heading);
  margin: 14px 0 6px;
}

.stamp-meta {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

.stamp-meta a { color: var(--accent); }

.stamp-book {
  margin: 7px 0 9px;
  font-size: 13px;
  line-height: 1.5;
}

.stamp-book a {
  color: var(--accent);
}

.stamp-code {
  display: inline-block;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent-soft);
  border-radius: 999px;
  padding: 3px 12px;
}

/* ————— the illustrations come alive ————— */
/* Each stamp tells a tiny story. Desktop plays it on hover; on touch devices
   stamps.js toggles `.is-playing` when the stamp is tapped. Some stories (the
   lighthouse beam, the yerba pouring into the mate) are drawn with the stamp's
   ::before / ::after so no extra markup is needed. */
.stamp { position: relative; }

/* clip the section so travelling crabs/fish and the sweeping beam can spill
   beyond their card without ever adding a horizontal scrollbar */
#hospedaje { overflow: clip; }

/* ——— image-driven motions (the <img> itself animates) ——— */
/* A stamp may run two animations at once — e.g. the crab travels (crab-walk)
   while its legs scurry (crab-steps). The second is composited additively so
   the two transforms stack instead of overriding each other. */
.stamp img {
  --stamp-anim: bobwave;
  --stamp-dur: 2.4s;
  --stamp-ease: ease-in-out;
  --stamp-anim2: none;
  --stamp-dur2: 1s;
  --stamp-ease2: linear;
  --stamp-origin: center;
  transform-origin: var(--stamp-origin);
  backface-visibility: hidden;
}

.stamp img[src*="waves"]     { --stamp-anim: bobwave;   --stamp-dur: 2.4s; }
/* the 9s spin promotes the sun to its own GPU layer; some browsers paint a faint
   1px seam along that layer's box edge as it rotates (a thin grey line, usually on
   the right). A 1px transparent border keeps the rotating box edge on fully
   transparent pixels at every angle, so the seam never lands on visible content. */
.stamp img[src*="sun"]       { --stamp-anim: sunspin;   --stamp-dur: 9s;   --stamp-ease: linear; border: 1px solid transparent; }
/* crab and fish run two animations at once (travel + legs/wiggle); `add` lets the
   two transforms stack instead of the second overriding the first. Only these two
   need it — on the croissant it would add the eat keyframes onto --eat's 120% base. */
.stamp img[src*="crab"]      { --stamp-anim: crab-walk; --stamp-dur: 4.4s; --stamp-anim2: crab-steps; --stamp-dur2: 0.26s; --stamp-ease2: ease-in-out; animation-composition: add; }
.stamp img[src*="fish-trio"] { --stamp-anim: fish-swim; --stamp-dur: 5s;   --stamp-anim2: fish-wiggle; --stamp-dur2: 0.62s; --stamp-ease2: ease-in-out; animation-composition: add; }
.stamp img[src*="medialuna"] {
  --stamp-anim: eat; --stamp-dur: 4s;
  --tooth: 10px; /* radius of each rounded tooth-scallop */
  --bite: 6px;   /* scallop centers sit this far left of the eaten edge, so each
                    scoop bites deeper than its radius (depth = tooth + bite) */
  /* Layer 1 (linear): everything right of --eat is gone. Layer 2 (radial tiles):
     a vertical column of circles whose centers sit just left of the eaten edge,
     repeating every 16px → a row of rounded scoops, the "m"-shaped teeth marks of
     a bite. intersect keeps the croissant only where it's left-of-edge AND outside
     every scoop; add lays the scallop column down as the base of the stack. */
  -webkit-mask-image:
    linear-gradient(to right, #000 var(--eat), transparent var(--eat)),
    radial-gradient(circle at calc(var(--eat) - var(--bite)) 50%, transparent var(--tooth), #000 calc(var(--tooth) + 1px));
  mask-image:
    linear-gradient(to right, #000 var(--eat), transparent var(--eat)),
    radial-gradient(circle at calc(var(--eat) - var(--bite)) 50%, transparent var(--tooth), #000 calc(var(--tooth) + 1px));
  -webkit-mask-size: 100% 100%, 100% 16px;
  mask-size: 100% 100%, 100% 16px;
  -webkit-mask-repeat: no-repeat, repeat-y;
  mask-repeat: no-repeat, repeat-y;
  -webkit-mask-composite: destination-in, source-over;
  mask-composite: intersect, add;
}
/* faro, mate & the spritz hold still — their show is on the pseudo-elements below */
.stamp img[src*="faro"]      { --stamp-anim: none; }
.stamp img[src*="mate"]      { --stamp-anim: none; }
.stamp img[src*="aperol"]    { --stamp-anim: none; }

@media (hover: hover) and (min-width: 761px) {
  .stamp-card:hover .stamp img,
  .stamp-card:focus-within .stamp img {
    animation: var(--stamp-anim) var(--stamp-dur) var(--stamp-ease) infinite,
               var(--stamp-anim2) var(--stamp-dur2) var(--stamp-ease2) infinite;
  }
}
.stamp.is-playing img {
  animation: var(--stamp-anim) var(--stamp-dur) var(--stamp-ease) infinite,
             var(--stamp-anim2) var(--stamp-dur2) var(--stamp-ease2) infinite;
}

@keyframes bobwave {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-5px) rotate(-1.5deg); }
}
@keyframes sunspin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* the crab scuttles sideways off the left edge, then walks back in from the right */
@keyframes crab-walk {
  0%   { transform: translateX(0) rotate(0deg); opacity: 1; }
  12%  { transform: translateX(-45%) rotate(5deg); }
  24%  { transform: translateX(-95%) rotate(-5deg); }
  36%  { transform: translateX(-150%) rotate(5deg); }
  46%  { transform: translateX(-230%) rotate(-4deg); opacity: 1; }
  49%  { transform: translateX(-275%) rotate(-4deg); opacity: 0; }
  50%  { transform: translateX(275%) rotate(0deg); opacity: 0; }
  53%  { transform: translateX(230%) rotate(4deg); opacity: 1; }
  64%  { transform: translateX(150%) rotate(-5deg); }
  76%  { transform: translateX(95%) rotate(5deg); }
  88%  { transform: translateX(45%) rotate(-5deg); }
  100% { transform: translateX(0) rotate(0deg); opacity: 1; }
}
/* the fish turn to face right and swim off the right edge, re-entering from the left */
@keyframes fish-swim {
  0%   { transform: translateX(0) rotate(0deg) scaleX(1); opacity: 1; }
  10%  { transform: translateX(12%) rotate(0deg) scaleX(-1); }
  22%  { transform: translateX(80%) rotate(3deg) scaleX(-1); }
  34%  { transform: translateX(150%) rotate(-3deg) scaleX(-1); }
  44%  { transform: translateX(225%) rotate(3deg) scaleX(-1); opacity: 1; }
  48%  { transform: translateX(280%) rotate(0deg) scaleX(-1); opacity: 0; }
  50%  { transform: translateX(-280%) rotate(0deg) scaleX(-1); opacity: 0; }
  54%  { transform: translateX(-225%) rotate(3deg) scaleX(-1); opacity: 1; }
  66%  { transform: translateX(-150%) rotate(-3deg) scaleX(-1); }
  78%  { transform: translateX(-80%) rotate(3deg) scaleX(-1); }
  90%  { transform: translateX(-12%) rotate(-2deg) scaleX(-1); }
  96%  { transform: translateX(0) rotate(0deg) scaleX(1); }
  100% { transform: translateX(0) rotate(0deg) scaleX(1); }
}
/* the crab's legs scurry — fast little steps layered on top of the walk */
@keyframes crab-steps {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-2.5px) rotate(2deg); }
  50%      { transform: translateY(0) rotate(0deg); }
  75%      { transform: translateY(-2.5px) rotate(-2deg); }
}
/* the fish bodies undulate as they swim — a tail-flicking wiggle */
@keyframes fish-wiggle {
  0%, 100% { transform: translateY(0) rotate(0deg) skewX(0deg); }
  25%      { transform: translateY(-2px) rotate(2deg) skewX(-3deg); }
  75%      { transform: translateY(2px) rotate(-2deg) skewX(3deg); }
}
/* the croissant is eaten from the right in chomps; the edge is a scalloped row
   of little arcs (rounded tooth-marks, like a line of m's) — see the mask above */
@property --eat { syntax: "<length-percentage>"; inherits: false; initial-value: 120%; }
@keyframes eat {
  0%, 8% { --eat: 120%; transform: scale(1) rotate(0deg); }
  20%    { --eat: 82%;  transform: scale(0.97) rotate(-2deg); }
  28%    { --eat: 82%;  transform: scale(1) rotate(0deg); }
  40%    { --eat: 54%;  transform: scale(0.97) rotate(2deg); }
  48%    { --eat: 54%;  transform: scale(1) rotate(0deg); }
  60%    { --eat: 26%;  transform: scale(0.96) rotate(-2deg); }
  68%    { --eat: 26%;  transform: scale(1) rotate(0deg); }
  78%    { --eat: -20%; transform: scale(0.96) rotate(1deg); }
  86%    { --eat: -20%; transform: scale(1) rotate(0deg); }
  100%   { --eat: 120%; transform: scale(1) rotate(0deg); }
}

/* ——— pseudo-element stories: lighthouse beam & mate filling with yerba ——— */
.stamp:has(img[src*="faro"]) { z-index: 3; }

.stamp:has(img[src*="faro"])::before,
.stamp:has(img[src*="faro"])::after,
.stamp:has(img[src*="mate"])::before,
.stamp:has(img[src*="mate"])::after,
.stamp:has(img[src*="aperol"])::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
  z-index: 1;
}

/* lighthouse: a soft glow at the lamp + a double beam that sweeps the page */
.stamp:has(img[src*="faro"])::before {
  left: 50%; top: 36%;
  width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,244,201,0.95), rgba(255,244,201,0) 70%);
}
.stamp:has(img[src*="faro"])::after {
  left: 50%; top: 36%;
  width: 460px; height: 460px; margin: -230px 0 0 -230px;
  border-radius: 50%;
  background: conic-gradient(from -15deg,
      rgba(255,240,185,0.72) 0deg,
      rgba(255,240,185,0) 30deg,
      rgba(255,240,185,0) 178deg,
      rgba(255,240,185,0.42) 196deg,
      rgba(255,240,185,0) 222deg,
      rgba(255,240,185,0) 360deg);
  -webkit-mask: radial-gradient(circle, #000 16px, rgba(0,0,0,0.85) 70px, transparent 100%);
          mask: radial-gradient(circle, #000 16px, rgba(0,0,0,0.85) 70px, transparent 100%);
}

/* mate: first a little yerba rains into the mouth (::before), then a stream of
   hot water pours down into the gourd (::after) — the two are timed in sequence */
.stamp:has(img[src*="mate"])::before {
  left: 50%; top: -2%; width: 10%; height: 44%; margin-left: -5%;
  background-image:
    radial-gradient(circle, #5c6b2b 0 1.8px, transparent 2.3px),
    radial-gradient(circle, #7a8a37 0 1.5px, transparent 2px);
  background-size: 16px 21px, 22px 27px;
  background-position: 1px 0, 11px 7px;
  -webkit-mask: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent 100%);
          mask: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent 100%);
}
.stamp:has(img[src*="mate"])::after {
  left: 50%; top: 12%;
  width: 5.5%; height: 32%; margin-left: -2.75%;
  border-radius: 45% 45% 50% 50% / 10% 10% 24% 24%;
  background: repeating-linear-gradient(to bottom,
      rgba(223,240,243,0.92) 0 5px,
      rgba(186,213,221,0.78) 5px 10px);
  transform-origin: center top;
  transform: scaleY(0);
  filter: blur(0.4px);
}

/* spritz: the contents drain while the glass stays — a background-coloured cover
   grows down over the orange from the liquid surface, so only the drink empties */
.stamp:has(img[src*="aperol"])::after {
  left: 50%; top: 37%;
  width: 16%; height: 13%; margin-left: -8%;
  background: var(--bg-alt);
  border-radius: 0 0 45% 45% / 0 0 18% 18%;
  transform-origin: center top;
  transform: scaleY(0);
}

@media (hover: hover) and (min-width: 761px) {
  .stamp-card:hover .stamp:has(img[src*="faro"])::before { opacity: 1; animation: lamp-glow 2.2s ease-in-out infinite; }
  .stamp-card:hover .stamp:has(img[src*="faro"])::after  { opacity: 1; animation: faro-beam 5s linear infinite; }
  .stamp-card:hover .stamp:has(img[src*="mate"])::before { opacity: 1; animation: yerba-fall 4s ease-in-out infinite; }
  .stamp-card:hover .stamp:has(img[src*="mate"])::after  { opacity: 1; animation: mate-water 4s ease-in-out infinite; }
  .stamp-card:hover .stamp:has(img[src*="aperol"])::after { opacity: 1; animation: spritz-drain 3.8s ease-in-out infinite; }
}
.stamp.is-playing:has(img[src*="faro"])::before { opacity: 1; animation: lamp-glow 2.2s ease-in-out infinite; }
.stamp.is-playing:has(img[src*="faro"])::after  { opacity: 1; animation: faro-beam 5s linear infinite; }
.stamp.is-playing:has(img[src*="mate"])::before { opacity: 1; animation: yerba-fall 4s ease-in-out infinite; }
.stamp.is-playing:has(img[src*="mate"])::after  { opacity: 1; animation: mate-water 4s ease-in-out infinite; }
.stamp.is-playing:has(img[src*="aperol"])::after { opacity: 1; animation: spritz-drain 3.8s ease-in-out infinite; }

@keyframes faro-beam {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes lamp-glow {
  0%, 100% { transform: scale(0.82); }
  50%      { transform: scale(1.18); }
}
/* a little yerba falls during the first ~44% of the loop, then clears */
@keyframes yerba-fall {
  0%   { opacity: 0; background-position: 1px -20px, 11px -14px; }
  10%  { opacity: 1; }
  30%  { opacity: 1; }
  44%  { opacity: 0; background-position: 1px 24px, 11px 32px; }
  100% { opacity: 0; background-position: 1px 24px, 11px 32px; }
}
/* then a stream of hot water pours down into the gourd and keeps flowing */
@keyframes mate-water {
  0%, 36% { opacity: 0; transform: scaleY(0); background-position-y: 0; }
  41%     { opacity: 1; transform: scaleY(0.18); }
  54%     { opacity: 1; transform: scaleY(1); }
  86%     { opacity: 1; transform: scaleY(1); }
  100%    { opacity: 0; transform: scaleY(1); background-position-y: 42px; }
}
@keyframes spritz-drain {
  0%, 12% { transform: scaleY(0); }
  68%     { transform: scaleY(1); }
  82%     { transform: scaleY(1); }
  100%    { transform: scaleY(0); }
}

/* ——— the sea: hovering/tapping the Locanda waves stamp sets a whole-page
   wave wash drifting across everything ——— */
.page-waves {
  --wave: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='130'%20height='70'%3E%3Cg%20fill='none'%20stroke='%235b82b3'%20stroke-width='3'%20stroke-linecap='round'%3E%3Cpath%20d='M-10%2020%20q16%20-13%2033%200%20t33%200%20t33%200%20t33%200'/%3E%3Cpath%20d='M-26%2048%20q16%20-13%2033%200%20t33%200%20t33%200%20t33%200'/%3E%3C/g%3E%3C/svg%3E");
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  opacity: 0;
  transition: opacity 0.6s ease;
  background-image: var(--wave), var(--wave);
  background-size: 130px 70px, 208px 112px;
  background-position: 0 0, 0 36px;
  animation: wave-drift 16s linear infinite;
}
@keyframes wave-drift {
  from { background-position: 0 0, 0 36px; }
  to   { background-position: 260px 0, -416px 36px; }
}
@media (hover: hover) and (min-width: 761px) {
  body:has(.stamp-card:hover img[src*="waves"]) .page-waves { opacity: 0.7; }
}
body:has(.stamp.is-playing img[src*="waves"]) .page-waves { opacity: 0.7; }

@media (prefers-reduced-motion: reduce) {
  .stamp img { animation: none !important; }
  .stamp::before, .stamp::after { animation: none !important; opacity: 0 !important; }
  .page-waves { animation: none !important; opacity: 0 !important; }
}

/* ————— the big day ————— */
.venue-illo {
  display: block;
  width: 100%;
  height: auto;
}

.postcard {
  margin: 0 auto;
  width: 100%;
  max-width: 288px;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.day-card {
  text-align: center;
  border: 1px solid var(--line);
  background: var(--bg);
  padding: 22px;
}

.day-card .venue {
  font-family: var(--serif);
  font-size: clamp(32px, 4.5vw, 44px);
  font-weight: 500;
  margin: 0 0 6px;
}

.day-card .venue-place {
  font-size: 13px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 28px;
}

.day-card .day-date {
  font-family: var(--serif);
  font-style: italic;
  font-size: 26px;
  margin: 0 0 26px;
  color: var(--heading);
}

.day-card .soon {
  font-size: 14.5px;
  color: var(--muted);
  margin: 0;
}

/* ————— gifts ————— */
.gift-note {
  max-width: 560px;
  margin: 0 0 48px;
  color: var(--muted);
}

.bank-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 20px;
}

.bank-card {
  border: 1px solid var(--line);
  background: var(--bg);
  padding: 30px 28px;
}

.bank-card h3 {
  font-size: 12.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 20px;
}

.bank-card dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 18px;
  font-size: 14.5px;
}

.bank-card dt { color: var(--muted); }
.bank-card dd { margin: 0; word-break: break-word; }

/* the US card offers two independent transfer methods (wire + Zelle); each gets
   its own titled block, divided so neither reads as part of the other */
.bank-hint {
  margin: -8px 0 22px;
  font-size: 13px;
  font-style: italic;
  color: var(--muted);
}
.bank-method + .bank-method {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.bank-method-title {
  margin: 0 0 12px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ————— guide teaser / cta ————— */
.guide-cta {
  text-align: center;
  padding: 110px 24px;
  background: linear-gradient(rgba(250, 248, 242, 0.45), rgba(250, 248, 242, 0.45)), #ece4d3 url("illustrations/linen.png") center / 420px auto;
  color: var(--ink);
}

.guide-cta .kicker { color: var(--accent-soft); }

.guide-cta h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(34px, 4.5vw, 48px);
  margin: 0 0 16px;
  color: var(--heading);
}

.guide-cta p {
  max-width: 520px;
  margin: 0 auto 36px;
  color: var(--muted);
}

.guide-cta .btn { color: var(--accent); }

.btn {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 36px;
  border: 1px solid currentColor;
  color: inherit;
}

.btn:hover { background: color-mix(in srgb, currentColor 12%, transparent); }

/* guide CTA with journey map — light variant */
.guide-cta--map {
  background: var(--bg);
  color: var(--ink);
  padding: 0 24px 96px;
  margin-top: -48px;
}
.guide-cta--map .kicker { color: var(--accent-soft); margin-bottom: 7px; }
.guide-cta--map h2 { color: var(--heading); }
.guide-cta--map p { color: var(--muted); }
.guide-cta--map .btn { color: var(--accent); }

.cta-map {
  position: relative;
  width: min(1080px, 100%);
  margin: 0 auto 30px;
  /* coral route colour — matches the original baked-in line */
  --route: #e0a585;
  --route-draw: 3.67s;
}
.cta-map-base {
  display: block;
  width: 100%;
  height: auto;
}
.cta-map-route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.route-line {
  fill: none;
  stroke: var(--route);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.route-node {
  fill: var(--bg);
  stroke: var(--route);
  stroke-width: 3.5;
  opacity: 0;
  transform: scale(0);
  transform-origin: center;
  transform-box: fill-box;
}
/* play once the map scrolls into view */
.cta-map.is-drawn .route-line {
  transition: stroke-dashoffset var(--route-draw) ease-in-out;
  stroke-dashoffset: 0;
}
.cta-map.is-drawn .route-node {
  transition: opacity .45s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
  transition-delay: calc(var(--at) * var(--route-draw));
  opacity: 1;
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .route-line { transition: none; stroke-dashoffset: 0; }
  .route-node { transition: none; opacity: 1; transform: scale(1); }
}

/* ————— footer ————— */
.footer {
  text-align: center;
  padding: 72px 24px 60px;
  background: var(--accent);
}

.footer .monogram {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 500;
  color: var(--bg);
  margin: 0 0 8px;
}

.footer .footer-logo { background-color: var(--bg); }

.footer p {
  font-size: 12.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--bg) 78%, var(--accent));
  margin: 0;
}

/* ————— guide page ————— */
.guide-hero {
  padding: 170px 24px 70px;
  text-align: center;
}

.guide-hero h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(44px, 7vw, 76px);
  margin: 0 0 14px;
}

.guide-hero p {
  color: var(--muted);
  max-width: 540px;
  margin: 0 auto;
}

.guide-section { padding: 72px 24px; }
.guide-section.alt { background: var(--bg-alt); }

.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 44px 56px;
  margin-top: 44px;
}

.cat h4 {
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.cat ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.cat li {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.35;
}

.cat li .note {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  margin-left: 8px;
}

.back-link {
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}

/* ————— mobile: one card per row ————— */
@media (max-width: 760px) {
  .section { padding: 68px 18px; }
  .section-lede { margin-bottom: 36px; }

  /* transport options, gifts/bank cards → single column */
  .card-grid { grid-template-columns: 1fr; margin-top: 32px; }
  .bank-grid { grid-template-columns: 1fr; }

  /* hotel stamp cards (both the grid and the flex variant) → single column */
  .stamp-grid,
  .stamp-grid--flex {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 32px;
  }
  .stamp-grid .stamp-card,
  .stamp-grid--flex .stamp-card {
    flex: none;
    width: 100%;
    max-width: 320px;
  }

  .guide-cta { padding: 84px 18px; }
  .guide-cta--map { padding: 0 18px 72px; }
}

/* ═══════════════ tap-to-open letter (envelope animation) ═══════════════ */
/* The hero postcard is a button. Clicking it opens a full-screen overlay
   where a sealed envelope's flap lifts and the letter grows out, readable.
   Built/controlled by hero.js. Falls back gracefully with no JS. */

.pcard { cursor: pointer; }
.pcard:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 4px; }

/* "Open the letter" affordance under the postcard */
.open-letter-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  margin: 20px auto 0;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent-soft);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 150ms ease;
}
.open-letter-hint::before,
.open-letter-hint::after {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.open-letter-hint:hover { color: var(--accent); }
/* Desktop: the postcard itself is the (cursor: pointer) affordance and the
   letter types itself out on load, so the hint is hidden. Mobile keeps it,
   since there the letter only writes itself out once you tap to open it. */
.hero-hint-wrap { width: 100%; text-align: center; display: none; }
@media (max-width: 760px) { .hero-hint-wrap { display: block; } }
body:not(.js) .open-letter-hint { display: none; } /* only show when JS wires it up */

/* overlay + scroll lock */
body.letter-open { overflow: hidden; }
.letter-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 28px 20px;
  background: color-mix(in srgb, var(--bg) 72%, #5a5238);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
}
.letter-overlay.is-visible { opacity: 1; pointer-events: auto; }

.letter-close {
  position: fixed;
  top: 16px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  color: var(--accent);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 212;
  transition: transform 150ms ease, background 150ms ease;
}
.letter-close:hover { transform: rotate(90deg); background: var(--bg); }

.env-stage {
  position: relative;
  width: min(520px, 92vw);
  display: grid;
  place-items: center;
}

/* the sealed envelope (decorative; sits above the letter until opened) */
.env-cover {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(440px, 86vw);
  aspect-ratio: 3 / 2;
  z-index: 4;
  perspective: 900px;
  transition: opacity 500ms ease 220ms, transform 500ms ease 220ms;
}
.env-cover-body {
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, #d8cbac 0%, #c5b694 60%, #bdad8c 100%);
  border: 1px solid #b0a07f;
  box-shadow: 0 26px 60px -28px rgba(44, 42, 37, 0.6);
}
/* faint seams of the back pocket */
.env-cover-body::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom right, transparent calc(50% - 0.6px), rgba(94,82,56,.28) 50%, transparent calc(50% + 0.6px)) no-repeat,
    linear-gradient(to bottom left,  transparent calc(50% - 0.6px), rgba(94,82,56,.28) 50%, transparent calc(50% + 0.6px)) no-repeat;
  background-size: 50% 100%, 50% 100%;
  background-position: left, right;
}
.env-cover-flap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 64%;
  background: linear-gradient(150deg, #e0d3b4 0%, #cdbf9d 100%);
  border: 1px solid #b0a07f;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  transform: rotateX(0deg);
  backface-visibility: hidden;
  z-index: 3;
  transition: transform 700ms cubic-bezier(0.45, 0.05, 0.2, 1);
}
.env-seal {
  position: absolute;
  top: 34%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 62px;
  height: auto;
  z-index: 4;
  transition: opacity 250ms ease;
}

/* the readable letter */
.env-letter {
  position: relative;
  z-index: 6;
  width: min(520px, 92vw);
  max-height: 86vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #fbf7ec;
  border: 1px solid var(--line);
  box-shadow: 0 34px 90px -34px rgba(44, 42, 37, 0.7);
  opacity: 0;
  transform: scale(0.55) translateY(18px);
  transform-origin: center center;
  transition: opacity 550ms ease 280ms, transform 620ms cubic-bezier(0.2, 0.7, 0.3, 1) 280ms;
}
.env-letter .el-photo img {
  display: block;
  width: 100%;
  height: clamp(150px, 30vh, 230px);
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, #000 78%, transparent);
}
.env-letter .el-body {
  position: relative;
  padding: 26px 30px 36px;
}
.env-letter .el-stamp {
  position: absolute;
  top: -34px;
  right: 26px;
  width: 70px;
  height: auto;
}
.env-letter .el-text {
  --lh: 34px;
  margin-top: 30px;
  background-image: linear-gradient(color-mix(in srgb, var(--accent-soft) 38%, transparent) 1px, transparent 1px);
  background-size: 100% var(--lh);
  background-position: 0 calc(var(--lh) - 1px);
}
.env-letter .el-text p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  line-height: var(--lh);
  color: var(--ink);
  margin: 0 0 var(--lh);
}
.env-letter .el-text p.pc-sign {
  font-style: normal;
  font-size: 32px;
  line-height: 1.1;
  color: var(--heading);
  /* same trick as the hero card: sit on a paper patch so a ruled line never
     crosses the signature */
  display: table;
  margin: var(--lh) 0 0 auto;
  background: #fbf7ec;
  padding-left: 10px;
}

/* open state */
.letter-overlay.is-open .env-cover-flap { transform: rotateX(-176deg); }
.letter-overlay.is-open .env-seal { opacity: 0; }
.letter-overlay.is-open .env-cover { opacity: 0; transform: translate(-50%, -50%) scale(1.06); pointer-events: none; }
.letter-overlay.is-open .env-letter { opacity: 1; transform: none; }

/* Mobile: shrink the opened letter just enough that the whole thing reads at a
   glance with no scroll, even on shorter phones (~iPhone SE upward). The photo
   stays viewport-relative so it grows on taller screens; text/padding tighten a
   touch. Tuned so content fits within 92vh from ~667px tall and up. */
@media (max-width: 760px) {
  .env-letter { max-height: 92vh; }
  .env-letter .el-photo img { height: clamp(130px, 21vh, 200px); }
  .env-letter .el-body { padding: 18px 28px 22px; }
  .env-letter .el-stamp { width: 60px; top: -28px; }
  .env-letter .el-text { --lh: 30px; margin-top: 24px; }
  .env-letter .el-text p { font-size: 18px; }
  .env-letter .el-text p.pc-sign { font-size: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  .letter-overlay,
  .env-cover,
  .env-cover-flap,
  .env-letter { transition-duration: 1ms !important; }
  .env-cover { display: none; }
}