@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600&family=Homemade+Apple&display=swap');
/* Frolicking Nicky motion layer. Everything here is off for visitors who ask for reduced motion. */
@media (prefers-reduced-motion: no-preference) {

  /* 3 · Soft cross-fade between pages (browsers that support it) */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: fn-fade-out .28s ease both; }
  ::view-transition-new(root) { animation: fn-fade-in .38s ease both; }

  /* 1 · Headline reveal: first line, then the red italic line */
  h1 { animation: fn-fade-in .9s ease both; }
  h1 em { animation: fn-fade-in .9s .4s ease both; }
  .fn-kicker, .eyebrow, .fn-lede, .lede, .intro-tags, .fn-breadcrumb { animation: fn-fade-up .7s .15s ease both; }
  .fn-lede, .lede { animation-delay: .55s; }
  .intro-tags { animation-delay: .7s; }


  /* 4 + 5 · Rise in on scroll; photos come into focus */
  .fn-reveal { opacity: 0; transition: opacity .8s ease; transition-delay: var(--fn-d, 0s); }
  .fn-reveal.fn-in { opacity: 1; }
  .fn-focus { filter: blur(10px) saturate(.6); transition: filter 1.1s ease; }
  .fn-focus.fn-in { filter: none; }

  /* 6 · The red note box swings into its tilt */
  .fn-note.fn-swing { opacity: 0; transition: opacity .9s ease; }
  .fn-note.fn-swing.fn-in { opacity: 1; }

  /* 7 · Best-time strip fills in month by month */
  .fn-season.fn-season-wait .fn-season-swatch { scale: 0; opacity: 0; }
  .fn-season.fn-season-go .fn-season-swatch { animation: fn-pop-in .5s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(var(--fn-i) * 70ms); }
  .fn-season.fn-season-go .fn-season-legend, .fn-season.fn-season-go .fn-season-pick { animation: fn-fade-up .6s .9s ease both; }

  /* 8 · Tick pop */
  .fn-pop { animation: fn-tick .5s cubic-bezier(.3,1.6,.5,1); }
  .fn-pop input { animation: fn-tick-box .5s ease; }

  /* 9 · Progress glides; finished sections celebrate */
  .progress-bar { transition: width .6s cubic-bezier(.2,.8,.2,1); }
  .fn-cheer { animation: fn-cheer 1.2s ease; }

  /* 11 · Cards lift, tilt and zoom their photo */
  .fn-card .fn-photo img { transition: scale .8s cubic-bezier(.2,.8,.2,1); }
  .fn-card:hover .fn-photo img { scale: 1.06; }

  /* 12 · Arrows nudge outwards; nav underline draws in */
  .fn-arrow { display: inline-block; transition: translate .3s cubic-bezier(.3,1.6,.5,1); }
  a:hover .fn-arrow, button:hover .fn-arrow, a:focus-visible .fn-arrow { translate: 3px -3px; }
  body .fn-header .fn-nav > a { background-image: linear-gradient(var(--fn-red), var(--fn-red)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 2px; transition: background-size .35s cubic-bezier(.2,.8,.2,1), color .2s; }
  body .fn-header .fn-nav > a:hover, body .fn-header .fn-nav > a:focus-visible { background-size: 100% 2px; }
  .fn-logo em { display: inline-block; transition: rotate .4s cubic-bezier(.3,1.6,.5,1); }
  .fn-logo:hover em { rotate: -6deg; }

  /* 13 · EN | IT: the red marker slides across */
  .fn-lang { position: relative; }
  .fn-lang::after { content: ""; position: absolute; bottom: 4px; height: 2px; width: 20px; background: var(--fn-red); border-radius: 2px; left: 0; transition: left .35s cubic-bezier(.3,1.4,.5,1); }
  .fn-lang:has(> :last-child[aria-current])::after { left: calc(100% - 20px); }
  .fn-lang:has(> a:first-child:hover)::after { left: 0; }
  .fn-lang:has(> a:last-child:hover)::after { left: calc(100% - 20px); }

  /* 15 · Headline words wiggle every so often */
  .fn-word { white-space: nowrap; }
  .fn-wiggle-letter { display: inline-block; animation: fn-wave 7s calc(1.4s + var(--fn-i) * 45ms) ease-in-out infinite; }

  @keyframes fn-fade-in { from { opacity: 0; } }
  @keyframes fn-fade-out { to { opacity: 0; } }
    @keyframes fn-fade-up { from { opacity: 0; } }
  @keyframes fn-develop { 0% { opacity: 0; filter: sepia(1) brightness(1.6) blur(6px); } 40% { opacity: 1; } 100% { filter: none; } }
  @keyframes fn-pop-in { from { scale: 0; opacity: 0; } }
  @keyframes fn-tick { 0% { scale: 1; } 35% { scale: 1.035; background-color: #B3054514; } 100% { scale: 1; } }
  @keyframes fn-tick-box { 30% { scale: 1.45; } 60% { scale: .9; } }
  @keyframes fn-cheer { 30% { color: var(--fn-red); text-shadow: 0 0 12px #B3054566; } }
  @keyframes fn-wave { 0%, 12%, 100% { translate: 0 0; rotate: 0deg; } 3% { translate: 0 -.06em; rotate: -4deg; } 6% { rotate: 3deg; } 9% { rotate: -1deg; } }
}
.fn-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fn-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 1000; overflow: hidden; }
.fn-confetti i { position: absolute; top: -20px; width: 9px; height: 14px; border-radius: 2px; }

/* Cute heading icons: big, sticker-like and lively */
/* The icon floats just after the text and takes up no space, so headings never reflow. */
.fn-icon-tag { position: relative; display: inline; white-space: nowrap; }
.fn-icon-tag.fn-icon-off { display: none; }
.fn-icon { position: absolute; left: .3em; top: 50%; width: 1.5em; height: 1.5em; margin-top: -.8em; color: var(--fn-red); overflow: visible; }
h3 .fn-icon { width: 2em; height: 2em; margin-top: -1.06em; left: .3em; }
.fn-icon * { transform-box: fill-box; transform-origin: center; }
/* on wine cards (Saturday day trips, the home page note) the icon takes the heading's cream colour, not wine on wine */
.weekend .outing-heading .fn-icon, .fn-note .fn-icon { color: inherit; }
.fn-i-cat, .fn-i-sand-fall, .fn-i-sk-bag, .fn-i-sk-pop, .fn-i-mum-pop, .fn-i-sign-pop { opacity: 0; } .fn-i-sand-bottom { scale: 1 0; } /* hourglass at rest: full on top, no cat */
@media (prefers-reduced-motion: no-preference) {
  .fn-icon { animation: fn-i-float 3.2s ease-in-out infinite; transition: scale .3s cubic-bezier(.3,1.6,.5,1); }
  .fn-icon-tag:nth-of-type(odd) .fn-icon, h3 .fn-icon { animation-delay: -1.6s; }
  h1:hover .fn-icon, h2:hover .fn-icon, h3:hover .fn-icon { scale: 1.25; animation-duration: 1s; }
  .fn-i-steam path { animation: fn-i-steam 2.2s ease-in-out infinite; }
  .fn-i-steam path:nth-child(2) { animation-delay: .45s; } .fn-i-steam path:nth-child(3) { animation-delay: .9s; }
  .fn-i-wob { animation: fn-i-wob 1.4s ease-in-out infinite; }
  .fn-i-beat { animation: fn-i-beat 1.3s ease-in-out infinite; }
  .fn-i-spin { animation: fn-i-spin 6s linear infinite; }
  .fn-i-spin-slow { animation: fn-i-spin 9s linear infinite; }
  .fn-i-sway { transform-origin: 50% 100%; animation: fn-i-sway 2.4s ease-in-out infinite; }
  .fn-i-twinkle { animation: fn-i-twinkle 1.6s ease-in-out infinite; }
  .fn-i-twinkle2 { animation: fn-i-twinkle 1.6s .8s ease-in-out infinite; }
  .fn-i-dash { animation: fn-i-dash 1s linear infinite; }
  .fn-i-write { transform-origin: 20% 90%; animation: fn-i-write 1.2s ease-in-out infinite; }
  .fn-i-tick { stroke-dasharray: 1; animation: fn-i-tick 2.4s ease-in-out infinite; }
  .fn-i-rise { animation: fn-i-rise 2.4s ease-in-out infinite; }
  .fn-i-rock { transform-origin: 50% 90%; animation: fn-i-rock 2s ease-in-out infinite; }
  .fn-i-wave { animation: fn-i-wave 2s ease-in-out infinite; }
  .fn-i-swing { transform-origin: 50% 0; animation: fn-i-swing 2.2s ease-in-out infinite; }
  .fn-i-flag { transform-origin: 0 50%; animation: fn-i-flag .9s ease-in-out infinite; }
  .fn-i-hop { animation: fn-i-hop 1s cubic-bezier(.3,0,.5,1) infinite; }
  .fn-i-dot1, .fn-i-dot2, .fn-i-dot3 { animation: fn-i-twinkle 1.8s ease-in-out infinite; }
  .fn-i-dot2 { animation-delay: .3s; } .fn-i-dot3 { animation-delay: .6s; }
  /* Hourglass: sand runs for ~5s, the cat pops up, flips it, and leaves (one 8.4s loop) */
  .fn-icon.fn-i-hourglass { overflow: visible; }
  .fn-i-glass { animation: fn-i-turn 8.4s infinite; }
  .fn-i-sand-top { transform-origin: 50% 100%; animation: fn-i-drain 8.4s infinite; }
  .fn-i-sand-bottom { transform-origin: 50% 100%; animation: fn-i-fill 8.4s infinite; }
  .fn-i-sand-fall { animation: fn-i-pour 8.4s infinite, fn-i-dash .5s linear infinite; }
  .fn-i-cat { animation: fn-i-cat 8.4s infinite; }
  .fn-i-paw { transform-origin: 100% 100%; animation: fn-i-paw 8.4s infinite; }
  @keyframes fn-i-drain { 0%, 3% { scale: 1 1; animation-timing-function: linear; } 60% { scale: 1 0; } 80% { scale: 1 0; animation-timing-function: steps(1, end); } 80.5%, 100% { scale: 1 1; } }
  @keyframes fn-i-fill { 0%, 3% { scale: 1 0; animation-timing-function: linear; } 60% { scale: 1 1; } 80% { scale: 1 1; animation-timing-function: steps(1, end); } 80.5%, 100% { scale: 1 0; } }
  @keyframes fn-i-pour { 0%, 2% { opacity: 0; } 4%, 57% { opacity: 1; } 60%, 100% { opacity: 0; } }
  @keyframes fn-i-turn { 0%, 69% { rotate: 0deg; } 79.9% { rotate: 180deg; animation-timing-function: steps(1, end); } 80%, 100% { rotate: 0deg; } }
  @keyframes fn-i-cat { 0%, 61% { opacity: 0; translate: 5px 4px; } 66%, 84% { opacity: 1; translate: 0 0; } 90%, 100% { opacity: 0; translate: 5px 4px; } }
  @keyframes fn-i-paw { 0%, 66% { rotate: 0deg; translate: 0 0; } 69% { rotate: 8deg; translate: -1px -1px; } 76% { rotate: -14deg; translate: 0 2px; } 82%, 100% { rotate: 0deg; translate: 0 0; } }
  /* The icons' playful extras (each delayed by its --d) */
  .fn-i-shoot { opacity: 0; animation: fn-i-shoot 3.2s var(--d, 0s) ease-out infinite; }
  .fn-i-balloon { animation: fn-i-balloon 5s ease-in-out infinite; }
  .fn-i-fly { animation: fn-i-fly 6s ease-in-out infinite; }
  .fn-i-flap { animation: fn-i-flap .32s ease-in-out infinite alternate; }
  .fn-i-pop { opacity: 0; animation: fn-i-pop 2.6s var(--d, 0s) ease-out infinite; }
  .fn-i-drip { opacity: 0; animation: fn-i-drip 2.4s ease-in infinite; }
  .fn-i-drift { animation: fn-i-drift 7s ease-in-out infinite alternate; }
  .fn-i-shooting { opacity: 0; animation: fn-i-shooting 4.5s ease-out infinite; }
  .fn-i-twirl { transform-origin: 50% 100%; animation: fn-i-twirl 1.6s ease-in-out infinite; }
  .fn-i-burst { opacity: 0; animation: fn-i-burst 2.4s var(--d, 0s) ease-out infinite; }
  .fn-i-glide { animation: fn-i-glide 6s linear infinite; }
  .fn-i-wing { animation: fn-i-wing .45s ease-in-out infinite alternate; }
  .fn-i-jump { opacity: 0; animation: fn-i-jump 3.6s ease-in-out infinite; }
  .fn-i-firefly { animation: fn-i-firefly 3.3s var(--d, 0s) ease-in-out infinite; }
  .fn-i-fall { opacity: 0; animation: fn-i-fall 4.5s var(--d, 0s) ease-in infinite; }
  .fn-i-duck { transform-origin: 50% 100%; animation: fn-i-duck 2.2s ease-in-out infinite; }
  .fn-i-puff { opacity: 0; animation: fn-i-puff 1s ease-out infinite; }
  @keyframes fn-i-shoot { 0% { opacity: 0; scale: .3; } 7% { opacity: 1; scale: 1.3; } 22% { opacity: 1; scale: 1; } 42% { opacity: 0; scale: .5; } 100% { opacity: 0; } }
  @keyframes fn-i-balloon { 0%, 100% { translate: 0 0; } 50% { translate: 2px -3px; } }
  @keyframes fn-i-fly { 0%, 100% { translate: 0 0; } 25% { translate: -4px 3px; } 50% { translate: -1px 6px; } 75% { translate: 3px 2px; } }
  @keyframes fn-i-flap { to { scale: .3 1; } }
  @keyframes fn-i-pop { 0% { opacity: 0; translate: 0 3px; scale: .4; } 18% { opacity: 1; scale: 1.1; } 60% { opacity: 0; translate: 0 -6px; scale: .9; } 100% { opacity: 0; } }
  @keyframes fn-i-drip { 0%, 30% { opacity: 0; translate: 0 0; scale: .4; } 45% { opacity: 1; scale: 1; } 85% { opacity: 1; translate: 0 6px; } 100% { opacity: 0; translate: 0 8px; } }
  @keyframes fn-i-drift { from { translate: -3px 0; } to { translate: 7px 0; } }
  @keyframes fn-i-shooting { 0%, 60% { opacity: 0; translate: -6px -3px; } 66% { opacity: 1; } 78% { opacity: 0; translate: 10px 5px; } 100% { opacity: 0; translate: 10px 5px; } }
  @keyframes fn-i-twirl { 0%, 100% { rotate: -14deg; } 50% { rotate: 14deg; } }
  @keyframes fn-i-burst { 0%, 38% { opacity: 0; scale: .2; rotate: 0deg; } 46% { opacity: 1; scale: 1.2; } 70%, 100% { opacity: 0; scale: .5; rotate: 45deg; } }
  @keyframes fn-i-glide { 0% { opacity: 0; translate: -4px 2px; } 15%, 75% { opacity: 1; } 90%, 100% { opacity: 0; translate: 14px -2px; } }
  @keyframes fn-i-wing { to { scale: 1 .35; } }
  @keyframes fn-i-jump { 0%, 40% { opacity: 0; translate: 0 5px; rotate: -50deg; } 48% { opacity: 1; } 58% { translate: -5px -4px; rotate: 0deg; } 68% { opacity: 1; translate: -10px 3px; rotate: 50deg; } 74%, 100% { opacity: 0; translate: -11px 6px; rotate: 60deg; } }
  @keyframes fn-i-firefly { 0%, 100% { opacity: .15; translate: 0 0; } 50% { opacity: 1; translate: 2px -2px; } }
  @keyframes fn-i-fall { 0% { opacity: 0; translate: 0 0; rotate: 0deg; } 15% { opacity: 1; } 80% { opacity: .8; } 100% { opacity: 0; translate: 5px 22px; rotate: 200deg; } }
  @keyframes fn-i-duck { 0%, 100% { translate: 0 0; rotate: -6deg; } 50% { translate: 0 -1px; rotate: 6deg; } }
  @keyframes fn-i-puff { 0%, 8% { opacity: 0; scale: .4; } 18% { opacity: .9; scale: 1; } 45%, 100% { opacity: 0; scale: 1.6; translate: -2px -1px; } }
  /* Wine: the bottle tips, pours, the glass fills and overflows, then it all clears (6s) */
  .fn-i-bottle { transform-origin: 50% 0; animation: fn-i-tip 6s ease-in-out infinite; }
  .fn-i-stream { stroke-dasharray: 2 1.2; animation: fn-i-stream 6s linear infinite, fn-i-dash .6s linear infinite; }
  .fn-i-winefill { transform-origin: 50% 100%; animation: fn-i-winefill 6s linear infinite; }
  .fn-i-spill { stroke-dasharray: 1; animation: fn-i-spill 6s linear infinite; }
  .fn-i-puddle { animation: fn-i-puddle 6s ease-out infinite; }
  @keyframes fn-i-tip { 0% { rotate: 32deg; } 10%, 58% { rotate: 0deg; } 68%, 100% { rotate: 32deg; } }
  @keyframes fn-i-stream { 0%, 9% { opacity: 0; } 12%, 56% { opacity: 1; } 60%, 100% { opacity: 0; } }
  @keyframes fn-i-winefill { 0%, 11% { scale: 1 0; opacity: 1; } 45%, 78% { scale: 1 1; opacity: 1; } 88% { scale: 1 1; opacity: 0; } 100% { scale: 1 0; opacity: 0; } }
  @keyframes fn-i-spill { 0%, 45% { stroke-dashoffset: 1; opacity: 1; } 60%, 78% { stroke-dashoffset: 0; opacity: 1; } 88%, 100% { stroke-dashoffset: 0; opacity: 0; } }
  @keyframes fn-i-puddle { 0%, 52% { scale: 0 1; opacity: 1; } 66%, 78% { scale: 1 1; opacity: 1; } 88%, 100% { scale: 1 1; opacity: 0; } }
  /* Biblioteca: the quill writes across the book and right off the page (5s) */
  .fn-i-ink { stroke-dasharray: 1; animation: fn-i-ink 5s linear infinite; }
  .fn-i-quill { animation: fn-i-quill 5s linear infinite; }
  @keyframes fn-i-ink { 0% { stroke-dashoffset: 1; opacity: 1; } 70%, 85% { stroke-dashoffset: 0; opacity: 1; } 95%, 100% { stroke-dashoffset: 0; opacity: 0; } }
  @keyframes fn-i-quill { 0% { translate: 0 0; rotate: 0deg; opacity: 1; } 12% { translate: 5px -.6px; rotate: -6deg; } 25% { translate: 10px .4px; rotate: 4deg; } 40% { translate: 16px -.4px; rotate: -5deg; } 55% { translate: 22px .2px; rotate: 5deg; } 70%, 82% { translate: 28.4px 1.4px; rotate: 0deg; opacity: 1; } 92%, 100% { translate: 28.4px 1.4px; opacity: 0; } }
  /* Piggy bank: the coin drops in, the piggy wiggles (3.2s) */
  .fn-i-coin { opacity: 0; animation: fn-i-coin 3.2s ease-in infinite; }
  .fn-i-jiggle { transform-origin: 50% 100%; animation: fn-i-jiggle 3.2s ease-in-out infinite; }
  .fn-i-piggy .fn-i-burst { animation-duration: 3.2s; }
  @keyframes fn-i-coin { 0% { opacity: 0; translate: 0 -4px; } 10% { opacity: 1; translate: 0 -4px; } 38% { opacity: 1; translate: 0 8px; scale: 1 1; } 44%, 100% { opacity: 0; translate: 0 9.4px; scale: 1 .2; } }
  @keyframes fn-i-jiggle { 0%, 44%, 72%, 100% { rotate: 0deg; } 50% { rotate: -5deg; } 57% { rotate: 4deg; } 64% { rotate: -2deg; } }
  /* Cave: bats flutter out */
  .fn-i-bat { opacity: 0; animation: fn-i-bat 3s var(--d, 0s) ease-out infinite; }
  @keyframes fn-i-bat { 0% { opacity: 0; translate: 0 0; scale: .4; } 15% { opacity: 1; } 80% { opacity: .9; translate: var(--xy); scale: 1; } 100% { opacity: 0; translate: var(--xy); scale: 1; } }
  /* Taco: flies into the mouth, chomp chomp, crumbs and a little heart (3.6s) */
  .fn-i-tacofly { opacity: 0; animation: fn-i-tacofly 3.6s ease-in-out infinite; }
  .fn-i-chomp { animation: fn-i-chomp 3.6s ease-in-out infinite; }
  .fn-i-crumbs { opacity: 0; animation: fn-i-crumbs 3.6s ease-out infinite; }
  .fn-i-yum { opacity: 0; animation: fn-i-yum 3.6s ease-out infinite; }
  @keyframes fn-i-tacofly { 0% { opacity: 0; translate: 0 0; scale: 1; rotate: 0deg; } 8%, 20% { opacity: 1; translate: 0 0; } 36% { translate: 12px -5px; rotate: 8deg; } 50% { opacity: 1; translate: 21px -2px; scale: .7; rotate: 14deg; } 56%, 100% { opacity: 0; translate: 23px -1px; scale: .25; } }
  /* Día de Muertos skeleton: waves, falls apart into a heap, a bag of bones pops over it, then it reassembles (one 7s loop) */
  .fn-icon.fn-i-skeleton { overflow: visible; }
  .fn-i-sk { animation: 7s ease-in infinite; }
  .fn-i-sk-skull { animation-name: fn-sk-skull; } .fn-i-sk-ribs { animation-name: fn-sk-ribs; }
  .fn-i-sk-arml { animation-name: fn-sk-arml; } .fn-i-sk-legl { animation-name: fn-sk-legl; } .fn-i-sk-legr { animation-name: fn-sk-legr; }
  .fn-i-sk-armr { transform-origin: 0% 100%; animation-name: fn-sk-armr; }
  .fn-i-sk-bag { transform-origin: 50% 100%; animation: fn-sk-bag 7s infinite; }
  .fn-i-sk-pop { opacity: 0; animation: fn-sk-pop 7s infinite; animation-delay: var(--d, 0s); }
  @keyframes fn-sk-skull { 0%, 38% { translate: 0 0; rotate: 0deg; opacity: 1; } 48% { translate: 1px 25px; rotate: 200deg; opacity: 1; } 55%, 72% { translate: 1px 25px; rotate: 200deg; opacity: 0; } 76% { translate: 1px 25px; rotate: 200deg; opacity: 1; } 86%, 100% { translate: 0 0; rotate: 0deg; opacity: 1; } }
  @keyframes fn-sk-ribs { 0%, 40% { translate: 0 0; rotate: 0deg; opacity: 1; } 49% { translate: -1px 13px; rotate: 90deg; opacity: 1; } 55%, 72% { translate: -1px 13px; rotate: 90deg; opacity: 0; } 76% { translate: -1px 13px; rotate: 90deg; opacity: 1; } 85%, 100% { translate: 0 0; rotate: 0deg; opacity: 1; } }
  @keyframes fn-sk-arml { 0%, 41% { translate: 0 0; rotate: 0deg; opacity: 1; } 50% { translate: 4px 13px; rotate: -70deg; opacity: 1; } 55%, 72% { translate: 4px 13px; rotate: -70deg; opacity: 0; } 76% { translate: 4px 13px; rotate: -70deg; opacity: 1; } 84%, 100% { translate: 0 0; rotate: 0deg; opacity: 1; } }
  @keyframes fn-sk-armr { 0%, 4%, 12%, 20%, 28%, 36% { translate: 0 0; rotate: 0deg; opacity: 1; } 8%, 16%, 24%, 32% { rotate: -16deg; } 42% { translate: 0 0; rotate: 0deg; } 50% { translate: -6px 22px; rotate: 110deg; opacity: 1; } 55%, 72% { translate: -6px 22px; rotate: 110deg; opacity: 0; } 76% { translate: -6px 22px; rotate: 110deg; opacity: 1; } 84%, 100% { translate: 0 0; rotate: 0deg; opacity: 1; } }
  @keyframes fn-sk-legl { 0%, 42% { translate: 0 0; rotate: 0deg; opacity: 1; } 50% { translate: 3px 3px; rotate: -80deg; opacity: 1; } 55%, 72% { translate: 3px 3px; rotate: -80deg; opacity: 0; } 76% { translate: 3px 3px; rotate: -80deg; opacity: 1; } 83%, 100% { translate: 0 0; rotate: 0deg; opacity: 1; } }
  @keyframes fn-sk-legr { 0%, 42% { translate: 0 0; rotate: 0deg; opacity: 1; } 50% { translate: -3px 3px; rotate: 80deg; opacity: 1; } 55%, 72% { translate: -3px 3px; rotate: 80deg; opacity: 0; } 76% { translate: -3px 3px; rotate: 80deg; opacity: 1; } 83%, 100% { translate: 0 0; rotate: 0deg; opacity: 1; } }
  @keyframes fn-sk-bag { 0%, 50% { opacity: 0; scale: .3; rotate: 0deg; } 54% { opacity: 1; scale: 1.08; } 57% { scale: 1; } 60% { rotate: -7deg; } 63% { rotate: 6deg; } 66% { rotate: -4deg; } 69% { rotate: 0deg; scale: 1; opacity: 1; } 74%, 100% { opacity: 0; scale: .3; rotate: 0deg; } }
  @keyframes fn-sk-pop { 0%, 84% { opacity: 0; scale: .2; } 88% { opacity: 1; scale: 1.2; } 94%, 100% { opacity: 0; scale: .6; } }
  /* Mummy: lies in its box, sits up, waves, lies back down (5.6s) */
  .fn-icon .fn-i-mum { transform-box: view-box; transform-origin: 30px 30.6px; animation: fn-mum 5.6s ease-in-out infinite; }
  .fn-icon .fn-i-mum-arm { transform-box: view-box; transform-origin: 32.4px 21.2px; animation: fn-mum-arm 5.6s ease-in-out infinite; }
  .fn-i-mum-pop { opacity: 0; animation: fn-sk-pop2 5.6s infinite; animation-delay: var(--d, 0s); }
  @keyframes fn-mum { 0%, 22% { rotate: -90deg; } 34%, 72% { rotate: 0deg; } 84%, 100% { rotate: -90deg; } }
  @keyframes fn-mum-arm { 0%, 38% { rotate: 0deg; } 44%, 56% { rotate: -22deg; } 50%, 62% { rotate: 8deg; } 68%, 100% { rotate: 0deg; } }
  @keyframes fn-sk-pop2 { 0%, 32% { opacity: 0; scale: .2; } 37% { opacity: 1; scale: 1.2; } 46%, 100% { opacity: 0; scale: .6; } }
  /* Bus: bounces along, wheels turn, road scrolls, exhaust puffs */
  .fn-i-busbody { animation: fn-bus 0.6s ease-in-out infinite; }
  .fn-i-wheel { animation: fn-i-spin .8s linear infinite; }
  @keyframes fn-bus { 0%, 100% { translate: 0 0; } 50% { translate: 0 -.6px; } }
  /* Signpost: the top arrow spins round on the post and stops; a twinkle where it points */
  .fn-icon .fn-i-sign { transform-box: view-box; transform-origin: 24px 15.2px; animation: fn-sign 4s ease-out infinite; }
  .fn-i-sign-pop { opacity: 0; animation: fn-sign-pop 4s infinite; animation-delay: var(--d, 0s); }
  @keyframes fn-sign { 0%, 30% { scale: 1 1; } 38% { scale: -1 1; } 46% { scale: 1 1; } 54% { scale: -1 1; } 62% { scale: 1 1; } 70% { scale: -1 1; } 80%, 100% { scale: 1 1; } }
  @keyframes fn-sign-pop { 0%, 80% { opacity: 0; scale: .2; } 85% { opacity: 1; scale: 1.2; } 95%, 100% { opacity: 0; scale: .6; } }
  /* Chapulín hops out of the basket and back in */
  .fn-i-hopper { animation: fn-hopper 3.2s ease-in-out infinite; }
  @keyframes fn-hopper { 0%, 30% { translate: 0 0; rotate: 0deg; } 42% { translate: 5px -14px; rotate: -20deg; } 54% { translate: 10px -6px; rotate: 10deg; } 60% { translate: 10px -6px; rotate: 0deg; } 72% { translate: 5px -14px; rotate: 20deg; } 84%, 100% { translate: 0 0; rotate: 0deg; } }
  /* Hierve el Agua: the swimmer bobs and waves, bubbles rise */
  .fn-i-swim { animation: fn-swim 2.4s ease-in-out infinite; }
  .fn-i-bubble { opacity: 0; animation: fn-bubble 2.1s ease-out infinite; animation-delay: var(--d, 0s); }
  @keyframes fn-swim { 0%, 100% { translate: 0 1.4px; } 50% { translate: 0 -.6px; } }
  @keyframes fn-bubble { 0% { opacity: 0; translate: 0 0; scale: .5; } 20% { opacity: .9; } 80% { opacity: .7; translate: 0 -8px; scale: 1; } 100% { opacity: 0; translate: 0 -10px; scale: 1.4; } }
  /* Loom: zigzag rows appear one after another while the shuttle goes back and forth, then it starts again */
  .fn-i-weave { opacity: 0; animation: fn-weave 6s infinite; animation-delay: var(--d, 0s); }
  .fn-i-shuttle { animation: fn-shuttle 1.1s ease-in-out infinite alternate; }
  .fn-i-shuttle path:last-child { animation: fn-shuttle-go 1.1s ease-in-out infinite alternate; }
  @keyframes fn-weave { 0% { opacity: 0; } 4%, 60% { opacity: 1; } 68%, 100% { opacity: 0; } }
  @keyframes fn-shuttle { from { translate: 0 0; } to { translate: 0 0; } }
  @keyframes fn-shuttle-go { from { translate: 0 0; } to { translate: 13px 0; } }
  /* Tunnel: a little car drives out of the tunnel towards you */
  .fn-i-tunnelcar { transform-origin: 50% 100%; animation: fn-tunnelcar 2.6s ease-in infinite; }
  @keyframes fn-tunnelcar { 0% { opacity: 0; translate: 0 -6px; scale: .4; } 15% { opacity: 1; } 80% { opacity: 1; translate: 0 2px; scale: 1.5; } 100% { opacity: 0; translate: 0 3px; scale: 1.7; } }
  @keyframes fn-i-chomp { 0%, 20% { scale: 1 .5; } 40% { scale: 1.1 1.4; } 52% { scale: 1 .15; } 60% { scale: 1 .9; } 66% { scale: 1 .15; } 74%, 100% { scale: 1 .5; } }
  @keyframes fn-i-crumbs { 0%, 52% { opacity: 0; translate: 0 0; } 56% { opacity: 1; } 76%, 100% { opacity: 0; translate: -1px 4px; } }
  @keyframes fn-i-yum { 0%, 66% { opacity: 0; translate: 0 2px; scale: .4; } 72% { opacity: 1; scale: 1.1; } 95%, 100% { opacity: 0; translate: 0 -6px; scale: .9; } }
  /* Bell: swings and rings */
  .fn-i-ring { transform-origin: 50% 0; animation: fn-i-ring 2.4s ease-in-out infinite; }
  .fn-i-ding { animation: fn-i-ding 2.4s ease-in-out infinite; }
  @keyframes fn-i-ring { 0%, 100% { rotate: -16deg; } 50% { rotate: 16deg; } }
  @keyframes fn-i-ding { 0%, 50%, 100% { opacity: 1; scale: 1.05; } 25%, 75% { opacity: 0; scale: .9; } }
  /* Cactus: blooms, and a hummingbird drops by (5s) */
  .fn-i-bloom { animation: fn-i-bloom 5s ease-out infinite; }
  .fn-i-hum { opacity: 0; animation: fn-i-hum 5s ease-in-out infinite; }
  @keyframes fn-i-bloom { 0%, 18% { scale: 0; } 34% { scale: 1.15; } 40%, 86% { scale: 1; } 96%, 100% { scale: 0; } }
  @keyframes fn-i-hum { 0%, 30% { opacity: 0; translate: 7px -4px; } 40% { opacity: 1; translate: 0 0; } 47% { translate: 0 -1.2px; } 54% { translate: 0 0; } 61% { translate: 0 -1.2px; } 70% { opacity: 1; translate: 0 0; } 82%, 100% { opacity: 0; translate: 8px -7px; } }
  /* Papel picado: the flags flutter */
  .fn-i-flutter { transform-origin: 50% 0; animation: fn-i-flutter 2s var(--d, 0s) ease-in-out infinite; }
  @keyframes fn-i-flutter { 0%, 100% { rotate: -9deg; } 50% { rotate: 9deg; } }
  /* Portrait: the frame sways on its nail and the sitter winks */
  .fn-i-tilt { transform-origin: 50% 0; animation: fn-i-swayf 4s ease-in-out infinite; }
  .fn-i-wink { animation: fn-i-wink 4s ease-in-out infinite; }
  @keyframes fn-i-swayf { 0%, 100% { rotate: -2.5deg; } 50% { rotate: 2.5deg; } }
  @keyframes fn-i-wink { 0%, 58%, 70%, 100% { scale: 1 1; } 62%, 66% { scale: 1.6 .15; } }
  /* Whisk: beats the batter, which splashes */
  .fn-i-whisk { transform-origin: 80% 0; animation: fn-i-whisk .6s ease-in-out infinite alternate; }
  .fn-i-splash { opacity: 0; animation: fn-i-splash 1.2s var(--d, 0s) ease-out infinite; }
  @keyframes fn-i-whisk { from { rotate: -12deg; translate: -1px 0; } to { rotate: 12deg; translate: 1px 0; } }
  @keyframes fn-i-splash { 0% { opacity: 0; translate: 0 2px; } 20% { opacity: 1; translate: 0 -4px; } 45%, 100% { opacity: 0; translate: 0 1px; } }
  /* Puerto Escondido: hatchling crawling to the sea, leaping dolphin, nodding horse */
  .fn-i-crawl { animation: fn-i-crawl 3.2s ease-in-out infinite; }
  .fn-i-fl { transform-origin: 0 0; animation: fn-i-leg .4s ease-in-out infinite alternate; }
  .fn-i-fl2 { transform-origin: 100% 0; animation: fn-i-leg .4s -.4s ease-in-out infinite alternate; }
  .fn-i-leap { transform-origin: 50% 100%; animation: fn-i-leap 2.8s ease-in-out infinite; }
  .fn-i-nod { transform-origin: 40% 90%; animation: fn-i-nod 1.8s ease-in-out infinite; }
  .fn-i-mane { animation: fn-i-wave 1.4s ease-in-out infinite; }
  @keyframes fn-i-crawl { 0% { translate: -4px 0; opacity: 0; } 12% { opacity: 1; } 78% { translate: 4px 0; opacity: 1; } 100% { translate: 7px 1px; opacity: 0; } }
  @keyframes fn-i-leap { 0%, 100% { translate: 0 3px; rotate: -6deg; } 50% { translate: 0 -3px; rotate: 6deg; } }
  @keyframes fn-i-nod { 0%, 100% { rotate: 0deg; } 30% { rotate: -6deg; } 45% { rotate: 2deg; } }
  /* Dog: trots along with a wagging tail */
  .fn-i-trot { animation: fn-i-trot .5s ease-in-out infinite alternate; }
  .fn-i-leg { transform-origin: 50% 0; animation: fn-i-leg .5s ease-in-out infinite alternate; }
  .fn-i-leg2 { transform-origin: 50% 0; animation: fn-i-leg .5s -.5s ease-in-out infinite alternate; }
  .fn-i-wag { transform-origin: 100% 100%; animation: fn-i-wag .35s ease-in-out infinite alternate; }
  @keyframes fn-i-trot { from { translate: 0 0; } to { translate: 0 -1.2px; } }
  @keyframes fn-i-leg { from { rotate: -20deg; } to { rotate: 20deg; } }
  @keyframes fn-i-wag { from { rotate: -18deg; } to { rotate: 22deg; } }
  @keyframes fn-i-float { 0%, 100% { translate: 0 0; rotate: -2deg; } 50% { translate: 0 -.06em; rotate: 2deg; } }
  @keyframes fn-i-steam { 0% { opacity: 0; translate: 0 3px; scale: .8; } 35% { opacity: 1; } 100% { opacity: 0; translate: 0 -6px; scale: 1.15; } }
  @keyframes fn-i-wob { 50% { translate: 0 -1.5px; } }
  @keyframes fn-i-beat { 0%, 60%, 100% { scale: 1; } 15% { scale: 1.3; } 30% { scale: .92; } 45% { scale: 1.2; } }
  @keyframes fn-i-spin { to { rotate: 360deg; } }
  @keyframes fn-i-sway { 0%, 100% { rotate: -16deg; } 50% { rotate: 16deg; } }
  @keyframes fn-i-twinkle { 50% { opacity: .15; scale: .45; rotate: 45deg; } }
  @keyframes fn-i-dash { to { stroke-dashoffset: -8; } }
  @keyframes fn-i-write { 25% { rotate: -16deg; translate: -2px 0; } 50% { rotate: 8deg; translate: 2px 0; } 75% { rotate: -12deg; translate: 4px 0; } }
  @keyframes fn-i-tick { 0%, 10% { stroke-dashoffset: 1; } 40%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
  @keyframes fn-i-rise { 0%, 100% { translate: 0 2px; } 50% { translate: 0 -4px; } }
  @keyframes fn-i-rock { 0%, 100% { rotate: -16deg; } 50% { rotate: 16deg; } }
  @keyframes fn-i-wave { 50% { translate: -3px 0; } }
  @keyframes fn-i-swing { 0%, 100% { rotate: -22deg; } 50% { rotate: 22deg; } }
  @keyframes fn-i-flag { 50% { scale: .55 1; } }
  @keyframes fn-i-hop { 0%, 100% { translate: 0 0; scale: 1 1; } 15% { scale: 1.1 .9; } 45% { translate: 0 -6px; scale: .95 1.05; } }
}

/* Hero photos: postmark sticker and footsteps (motion only) */
@media (prefers-reduced-motion: no-preference) {
  .fn-stamp { animation: fn-stamp-in .8s 1.6s cubic-bezier(.3,1.6,.5,1) both; }
  .fn-stamp-ring { transform-origin: 60px 60px; animation: fn-i-spin 16s linear infinite; }
  .fn-stamp-step { animation: fn-step-blink 1.6s ease-in-out infinite; }
  .fn-stamp-step + .fn-stamp-step { animation-delay: .8s; }
  .fn-steps[hidden] { display: none; }
  .fn-steps { position: absolute; left: 0; bottom: 18px; width: min(46%, 520px); height: 150px; pointer-events: none; z-index: 0; }
  .fn-steps svg { width: 100%; height: 100%; overflow: visible; }
  .fn-steps .fn-step { opacity: 0; }
  .fn-steps-name { opacity: 0; }
  .fn-pc-host { transition: rotate .9s cubic-bezier(.3,.7,.25,1), box-shadow .45s; }
  @keyframes fn-step-blink { 0%, 100% { opacity: .15; } 30%, 50% { opacity: 1; } }
  @keyframes fn-stamp-in { from { scale: 2.2; opacity: 0; rotate: -40deg; } }
}
.fn-stamp { position: absolute; left: -46px; bottom: -40px; width: 118px; height: 118px; z-index: 3; pointer-events: none; rotate: -12deg; filter: drop-shadow(3px 4px 0 #00000022); }
.fn-stamp svg { width: 100%; height: 100%; overflow: visible; }

/* Beige masking tape with torn ends, one strip on each top corner */
.fn-tape { position: absolute; top: -12px; width: 120px; height: 34px; z-index: 4; pointer-events: none; opacity: .93;
  background:
    linear-gradient(180deg, #ffffff40, #ffffff00 30%, #ffffff00 72%, #7a603020),
    repeating-linear-gradient(90deg, #6b552a0d 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, #ffffff12 0 1px, transparent 1px 4px),
    #e2d2a8;
  box-shadow: 0 1px 2px #00000030, inset 0 0 8px #b39c6a66;
  clip-path: polygon(2% 0, 98% 0, 100% 11%, 97.5% 24%, 99.5% 37%, 97% 50%, 100% 63%, 98% 76%, 99.5% 89%, 97.5% 100%, 2.5% 100%, 0 88%, 2% 75%, 0.5% 62%, 3% 50%, 0 37%, 2.5% 24%, 0.5% 12%); }
.fn-tape-l { left: -34px; rotate: -34deg; }
.fn-tape-r { right: -34px; rotate: 33deg; }

/* The hero photo turns over to show the back of a well-travelled postcard */
.fn-pc-wrap { position: relative; display: grid; perspective: 1600px; min-width: 0; }
.fn-pc-wrap > .fn-pc-host { min-width: 0; }
.fn-pc-host { transform-style: preserve-3d; }
.fn-pc-host > :not(.fn-pc-back) { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.fn-pc-host.fn-pc-flipped { rotate: y 180deg; box-shadow: none; }
@media (hover: hover) {
  .fn-pc-wrap:hover > .fn-pc-host { rotate: y 180deg; box-shadow: none; transition-delay: .12s; }
}
.fn-pc-back { position: absolute; inset: 0; z-index: 5; transform: rotateY(180deg) translateZ(1px); backface-visibility: hidden; -webkit-backface-visibility: hidden;
  container-type: size; color: #1f3474; border-radius: 2px;
  background:
    linear-gradient(135deg, #fbf8f0, #f4eedf);
  box-shadow: 10px 10px 0 #000, inset 0 0 30px #a7884f33; }
.fn-pc-back .fn-tape { top: -12px; }
.fn-pc-defs { position: absolute; }
.fn-pc-in { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 5cqmin 5cqmin 4cqmin; }
.fn-pc-head { margin: 0 0 3cqmin; text-align: center; font: 700 max(10px, 4.2cqmin)/1 'Playfair Display', Georgia, serif; letter-spacing: .3em; color: #3a3a3a; }
.fn-pc-head span { display: block; margin-top: .6em; font: 600 max(7px, 2.1cqmin)/1 'DM Sans', sans-serif; letter-spacing: .24em; color: #6b6b6b; }
.fn-pc-stamps { position: relative; flex: 1 1 auto; min-height: 0; }
.fn-st { position: absolute; display: block; rotate: var(--a); background: #fbf8ef; padding: 2.5%; box-shadow: 0 1px 2px #00000033;
  -webkit-mask: radial-gradient(circle at center, transparent 1.4px, #000 1.6px) -2.5px -2.5px / 5px 5px, linear-gradient(#000 0 0) 2.5px 2.5px / calc(100% - 5px) calc(100% - 5px) no-repeat;
  mask: radial-gradient(circle at center, transparent 1.4px, #000 1.6px) -2.5px -2.5px / 5px 5px, linear-gradient(#000 0 0) 2.5px 2.5px / calc(100% - 5px) calc(100% - 5px) no-repeat; }
.fn-st svg { display: block; width: 100%; height: 100%; }
.fn-pc-foot { display: grid; grid-template-columns: 1.15fr 1fr; gap: 4cqmin; margin-top: 3cqmin; flex: 0 0 auto; }
.fn-pc-note { position: relative; border-right: 1.5px solid #00000030; padding-right: 3cqmin; }
.fn-pc-note p { margin: 0; font: 600 max(10px, 4.6cqmin)/1.15 'Caveat', cursive; rotate: -1.5deg; }
.fn-pc-note .fn-pc-sign { margin-top: .5em; font: 400 max(12px, 5.8cqmin)/1.2 'Homemade Apple', cursive; color: #18306b; rotate: -6deg; transform-origin: left; }
.fn-pc-sign span { font-size: .6em; margin-left: .3em; color: #B30545; }
.fn-pc-scribble { display: block; width: 62%; height: auto; margin-top: -.6em; color: #18306b; }
.fn-pc-to { align-self: end; }
/* Wide photos: stamps on the left, the note and address on the right */
@container (min-aspect-ratio: 21/20) {
  .fn-pc-in { display: grid; grid-template-columns: 1.55fr 1fr; grid-template-rows: auto 1fr; column-gap: 4cqmin; }
  .fn-pc-head { grid-column: 1 / -1; }
  .fn-pc-foot { grid-template-columns: 1fr; align-content: space-between; margin: 0; padding-left: 4cqmin; border-left: 1.5px solid #00000030; }
  .fn-pc-note { border: 0; padding: 0; }
  .fn-pc-in .fn-pm-a { top: auto; bottom: 3%; left: 1%; }
  .fn-pc-in .fn-pm-b { right: 41%; top: 13%; }
  .fn-pc-in .fn-pm-c { right: 39%; bottom: 5%; width: min(30%, 40cqh); }
}
.fn-pc-to p { margin: 0; padding: .5em 0 .1em; border-bottom: 1.5px solid #00000030; font: 600 max(9px, 4cqmin)/1 'Caveat', cursive; }
.fn-pm { position: absolute; pointer-events: none; color: #1d1b2c; opacity: .62; mix-blend-mode: multiply; filter: url(#fn-ink); }
.fn-pm-a { width: min(62%, 105cqh); left: 2%; top: 40%; rotate: -9deg; }
.fn-pm-b { width: min(26%, 40cqh); right: 6%; top: 15%; rotate: 14deg; opacity: .55; }
.fn-pm-c { width: min(42%, 52cqh); right: 5%; bottom: 23%; rotate: -7deg; color: #b0182e; opacity: .72; }
.fn-pc-turn { position: absolute; right: 22px; bottom: 22px; z-index: 6; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 99px; padding: 7px 13px;
  font: 600 13px/1.2 'DM Sans', sans-serif; background: #FDEBD8E8; color: #B30545; box-shadow: 0 2px 8px #0000002a; cursor: pointer; }
.fn-pc-turn:focus-visible { outline: 3px solid #B30545; outline-offset: 3px; }
@media (hover: hover) { .fn-pc-turn { opacity: 0; pointer-events: none; } .fn-pc-turn:focus-visible { opacity: 1; pointer-events: auto; } }
@media (hover: none) { .fn-pc-turn { position: static; justify-self: end; margin-top: 18px; } }
@media (max-width: 760px) { .fn-steps { display: none; } .fn-stamp { width: 84px; height: 84px; left: -14px; bottom: -26px; } .fn-tape { width: 92px; height: 28px; } .fn-tape-l { left: -24px; } .fn-tape-r { right: -24px; } .fn-pc-turn { right: 16px; bottom: 16px; } }
@media (max-width: 600px) { .fn-pc-wrap:has(> .postcard) { display: none; } }

/* Footsteps that walk to a button and go in through a little door (motion.js) */
.fn-door-walk { position: absolute; z-index: 60; pointer-events: none; overflow: hidden; }
.fn-door-walk .fn-door-step { opacity: 0; }
.fn-door { opacity: 0; }
.fn-door-leaf { transform-box: fill-box; transform-origin: left center; }
.fn-steps { transition: opacity .5s; }
.fn-door-walking .fn-steps { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .fn-door-walk { display: none; } }

/* Postcard back: vintage "Greetings from" card. Antique white, a fine outline, the country in big cherry letters, a note */
html body .fn-pc-back { background: #FDEBD8; color: #030301; border: 1px solid #03030133; }
.fn-pc-in { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 5cqmin; padding: 10cqmin 8cqmin; }
.fn-pc-from { margin: 0; font: 600 max(9px, 3.4cqmin)/1 'DM Sans', sans-serif; letter-spacing: .22em; text-transform: uppercase; color: #030301; }
.fn-pc-from span { display: block; margin-top: .35em; font: italic 600 max(40px, 19cqmin)/1 'Playfair Display', Georgia, serif; letter-spacing: -.03em; text-transform: none; color: #B30545; -webkit-text-stroke: .6px #030301; }
.fn-pc-rule { width: 70%; height: 1px; background: #03030133; }
.fn-pc-msg p { margin: 0; font: 500 max(17px, 7cqmin)/1.15 'Caveat', cursive; color: #030301; }
.fn-pc-msg .fn-pc-sign { margin-top: .45em; font-size: max(19px, 8.4cqmin); color: #B30545; rotate: -3deg; }