/* Magical Travel Fairy
   Light and airy throughout: no dark sections. Ink is for text and outlines only. */
:root {
  /* Grounds */
  --moon: #FFFBFE;
  --white: #FFFFFF;
  /* Pastels */
  --lilac: #EADFFF;
  --lilac-2: #D8C5FB;
  --petal: #FFDDEB;
  --peach: #FFE4D4;
  --butter: #FFF1BE;
  --sea: #D3F5E8;
  --sky: #D9EBFF;
  /* Ink */
  --ink: #2E1A47;
  --ink-soft: #594870;
  --rose: #B3306A;
  --violet: #6A3FA6;

  /* The opal: a slow-moving pastel rainbow */
  --opal: linear-gradient(90deg, var(--petal) 0%, var(--peach) 16%, var(--butter) 32%, var(--sea) 50%, var(--sky) 66%, var(--lilac-2) 83%, var(--petal) 100%);
  --opal-vivid: linear-gradient(90deg, #FFC2DC 0%, #FFD3B8 16%, #FFE98F 32%, #B5F0D9 50%, #BEDCFF 66%, #CDB4FB 83%, #FFC2DC 100%);

  --line: 2px solid var(--ink);
  --pop: 4px 4px 0 var(--ink);
  --radius: 26px;

  --display: "Fraunces", Georgia, serif;
  --display-wt: 650;
  --display-track: -0.025em;
  --display-vary: "SOFT" 100, "WONK" 1, "opsz" 120;
  --display-scale: 1;
  --body: "Figtree", system-ui, -apple-system, sans-serif;
  --wrap: 1160px;
  --gutter: 20px;

  /* Category tile grounds. Lilac-led by default. */
  --t1: var(--lilac); --t2: var(--lilac); --t3: var(--lilac); --t4: var(--lilac); --t5: var(--lilac); --t6: var(--lilac);
  --wash-a: var(--lilac);
  --wash-b: var(--white);
}

/* Draft headline options (data-type on <html>) */
html[data-type="bricolage"] {
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --display-wt: 800; --display-track: -0.04em; --display-vary: "opsz" 96; --display-scale: .96;
}
html[data-type="instrument"] {
  --display: "Instrument Serif", Georgia, serif;
  --display-wt: 400; --display-track: -0.015em; --display-vary: normal; --display-scale: 1.14;
}

/* Draft color option: the full spectrum shares the page */
html[data-palette="spectrum"] {
  --t1: var(--petal); --t2: var(--sea); --t3: var(--butter); --t4: var(--sky); --t5: var(--lilac); --t6: var(--peach);
  --wash-a: var(--sea);
  --wash-b: var(--white);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
}

body {
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  background: var(--moon);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 4px; }
a:hover { color: var(--rose); }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: 8px; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--white); border: var(--line); border-radius: 999px; font-weight: 700; }
.skip:focus { top: 12px; }

.wrap { position: relative; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

h1, h2, h3 {
  font-family: var(--display);
  font-variation-settings: var(--display-vary);
  font-weight: var(--display-wt);
  line-height: 1.02;
  letter-spacing: var(--display-track);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: calc(clamp(2.9rem, 11vw, 6.2rem) * var(--display-scale)); }
h2 { font-size: calc(clamp(2.2rem, 7.4vw, 3.8rem) * var(--display-scale)); }
h3 { font-size: calc(1.6rem * var(--display-scale)); line-height: 1.1; }
html[data-type="instrument"] h1 em, html[data-type="instrument"] .glow { font-style: italic; }
p { margin: 0; max-width: 62ch; text-wrap: pretty; }
.lede { font-size: 1.18rem; line-height: 1.6; color: var(--ink-soft); }
.eyebrow { font-weight: 700; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--violet); }

/* The highlighted word: an opal ribbon painted under the ink */
.glow {
  position: relative; display: inline-block; white-space: nowrap;
  background-image: var(--opal-vivid);
  background-size: 300% 44%;
  background-repeat: repeat-x;
  background-position: 0% 88%;
  padding: 0 .06em;
  animation: ribbon 9s linear infinite;
}
@keyframes ribbon { from { background-position: 0% 88%; } to { background-position: 300% 88%; } }

/* ---------- Buttons ---------- */
.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 14px 28px;
  font: 700 1.05rem/1 var(--body); letter-spacing: .005em;
  border: var(--line); border-radius: 999px;
  background: var(--white); color: var(--ink);
  box-shadow: var(--pop);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s cubic-bezier(.34,1.56,.64,1), background-position .6s ease;
}
.btn:hover { color: var(--ink); transform: translate(-2px, -3px) rotate(-1deg); box-shadow: 6px 7px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px) scale(.98); box-shadow: 0 0 0 var(--ink); transition-duration: .08s; }
.btn.small { min-height: 44px; padding: 10px 20px; font-size: .95rem; box-shadow: 3px 3px 0 var(--ink); }
.btn.small:hover { box-shadow: 4px 5px 0 var(--ink); }

/* Opal buttons: a soft rainbow at rest that comes alive on hover */
.btn.opal { background: var(--opal); background-size: 300% 100%; background-position: 0% 50%; }
.btn.opal.ghost { background: var(--white); }
.btn.opal::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--opal-vivid); background-size: 300% 100%;
  opacity: 0; transition: opacity .35s ease;
  animation: drift 3.2s linear infinite;
}
.btn.opal::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.85) 46%, rgba(255,255,255,0) 60%);
  background-size: 250% 100%; background-position: 140% 0;
  opacity: 0;
}
.btn.opal:hover::before, .btn.opal:focus-visible::before { opacity: 1; }
.btn.opal:hover::after, .btn.opal:focus-visible::after { opacity: 1; animation: glint 1.6s ease-in-out infinite; }

@keyframes drift { from { background-position: 0% 50%; } to { background-position: 300% 50%; } }
@keyframes glint { 0% { background-position: 140% 0; } 60%, 100% { background-position: -60% 0; } }

.text-link { font-weight: 700; color: var(--violet); text-decoration: underline; text-decoration-color: var(--lilac-2); }
.text-link::after { content: "\2192"; display: inline-block; margin-left: .3em; transition: transform .2s ease; }
.text-link:hover { color: var(--rose); text-decoration-color: currentColor; }
.text-link:hover::after { transform: translateX(4px); }

/* ---------- Header ---------- */
.top {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--moon) 86%, transparent);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--opal-vivid); background-size: 300% 100%; animation: drift 14s linear infinite; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 70px; }
.top-ctas { display: flex; align-items: center; gap: 10px; }
@media (max-width: 559px) { .top-ctas .hide-sm { display: none; } }
/* The wordmark: Art-nuvo only, letters alternating through the pastels with an ink outline.
   Art-nuvo is used for "Magical Travel Fairy" wordmarks and nowhere else. */
@font-face { font-family: "Art Nuvo"; src: url("/assets/fonts/art-nuvo.woff2") format("woff2"); font-display: swap; }
.mark {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 1.4rem;
  text-decoration: none; line-height: 1; white-space: nowrap;
}
.wordmark { font-family: "Art Nuvo", var(--display); font-weight: 400; letter-spacing: .02em; color: var(--ink); }
.wordmark .wm-l {
  color: var(--wm);
  -webkit-text-stroke: 1.1px var(--ink); paint-order: stroke fill;
  text-shadow: 1.5px 1.5px 0 var(--ink);
  display: inline-block;
}
.wordmark .wm-l:nth-of-type(6n+1) { --wm: #FF9CC7; }
.wordmark .wm-l:nth-of-type(6n+2) { --wm: #FFB98A; }
.wordmark .wm-l:nth-of-type(6n+3) { --wm: #FFD86B; }
.wordmark .wm-l:nth-of-type(6n+4) { --wm: #7FE3BE; }
.wordmark .wm-l:nth-of-type(6n+5) { --wm: #8EC5FF; }
.wordmark .wm-l:nth-of-type(6n+6) { --wm: #B794F6; }
/* Hover: the letters stay still while a wave of light passes through them, left to right, as if a wand
   swept over the name. Each letter brightens and breathes out a soft halo in its own color.
   magic.js sets --i (the letter's position) and sheds a little glitter along the same path. */
.mark:hover .wm-l, .mark:focus-visible .wm-l { animation: wm-shimmer 1s ease-in-out both; animation-delay: calc(var(--i, 0) * 38ms); }
@keyframes wm-shimmer {
  0%, 100% { filter: none; text-shadow: 1.5px 1.5px 0 var(--ink); }
  40% { filter: brightness(1.14) saturate(1.2); text-shadow: 1.5px 1.5px 0 var(--ink), 0 0 7px var(--wm), 0 0 16px rgba(255, 255, 255, .95); }
}
@media (max-width: 459px) { .top .mark { font-size: 1.12rem; gap: 6px; } .top .mark-star { width: 16px; height: 16px; } .top .btn.small { padding: 10px 14px; font-size: .88rem; } }
.wm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mark:hover { color: var(--ink); }
.mark-star { flex: none; fill: var(--rose); transition: transform 1.1s cubic-bezier(.22,1,.36,1), filter .6s ease; }
.mark:hover .mark-star, .mark:focus-visible .mark-star { transform: rotate(180deg) scale(1.12); filter: drop-shadow(0 0 4px #FFC2DC) drop-shadow(0 0 8px #CDB4FB); }

/* ---------- Sections ---------- */
section { position: relative; padding: 76px 0; }
.section-head { display: grid; gap: 14px; margin-bottom: 40px; }

/* ---------- Hero ---------- */
.hero { padding: 40px 0 72px; overflow: hidden; }
.aurora {
  position: absolute; inset: -20% -10% auto -10%; height: 130%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 38% at 78% 30%, color-mix(in srgb, var(--lilac-2) 70%, transparent), transparent 70%),
    radial-gradient(34% 30% at 60% 72%, color-mix(in srgb, var(--sea) 90%, transparent), transparent 70%),
    radial-gradient(30% 28% at 92% 70%, color-mix(in srgb, var(--petal) 90%, transparent), transparent 70%),
    radial-gradient(28% 26% at 12% 12%, color-mix(in srgb, var(--butter) 80%, transparent), transparent 70%);
  filter: blur(8px);
  animation: breathe 16s ease-in-out infinite alternate;
}
@keyframes breathe { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-3%, 2%, 0) scale(1.06); } }
.hero .wrap { display: grid; gap: 40px; align-items: center; }
.hero-copy { display: grid; gap: 24px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 6px; }
.hero-ctas .btn { flex: 1 1 220px; }
.reassure { font-size: .95rem; color: var(--ink-soft); }

/* The doorway: an arch of light, left ajar */
.doorway { position: relative; width: min(210px, 56vw); margin: 0 auto; }
.door-arch {
  position: relative; aspect-ratio: 5 / 7;
  border: 3px solid var(--ink); border-bottom: 0;
  border-radius: 999px 999px 0 0;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 0 0 10px var(--white), 0 0 0 12px var(--ink);
}
.door-light {
  position: absolute; inset: 0;
  background: var(--opal-vivid); background-size: 300% 100%;
  animation: drift 10s linear infinite;
}
.door-light::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 50% at 30% 62%, rgba(255,255,255,.95), rgba(255,255,255,0) 70%);
}
/* The open door, drawn flat (no 3D transform, so it never flickers) */
.door-panel {
  position: absolute; top: 0; bottom: 0; right: 0; width: 36%;
  background:
    linear-gradient(90deg, rgba(46,26,71,.10), rgba(46,26,71,0) 40%),
    repeating-linear-gradient(90deg, transparent 0 30%, rgba(46,26,71,.10) 30% calc(30% + 2px)),
    var(--lilac);
  clip-path: polygon(0 7%, 100% 0, 100% 100%, 0 90%);
  transform-origin: right center;
  animation: ajar 6s ease-in-out infinite alternate;
}
.door-panel::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--ink);
}
@keyframes ajar { from { transform: scaleX(1); } to { transform: scaleX(.86); } }
.keyhole {
  position: absolute; left: 22%; top: 50%;
  width: 14px; height: 22px;
  background: var(--ink);
  clip-path: polygon(50% 0, 80% 15%, 85% 40%, 65% 55%, 80% 100%, 20% 100%, 35% 55%, 15% 40%, 20% 15%);
}
.door-step { height: 14px; margin: 0 -26px; border: 3px solid var(--ink); border-radius: 6px; background: var(--butter); position: relative; z-index: 1; }
.dust { position: absolute; inset: -10% -30% 0 -30%; pointer-events: none; }

/* The peek: an arch of real deal photos in the hero, one per kind of trip, captioned and tappable */
.peek { position: relative; width: min(280px, 72vw); margin: 0 auto; display: grid; gap: 14px; }
.peek .dust { z-index: 2; }
.peek-arch {
  position: relative; aspect-ratio: 5 / 6.6;
  border: 3px solid var(--ink); border-radius: 999px 999px var(--radius) var(--radius);
  overflow: hidden; isolation: isolate;
  background: var(--opal-vivid); background-size: 300% 100%; animation: drift 10s linear infinite;
  box-shadow: 0 0 0 10px var(--white), 0 0 0 12px var(--ink);
}
.peek-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; color: var(--ink); text-decoration: none; transition: opacity .9s ease, visibility 0s linear .9s; }
.peek-slide.on { opacity: 1; visibility: visible; z-index: 1; transition: opacity .9s ease; }
.peek-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); transition: transform 1.2s ease; }
.peek-slide.on img { transform: none; }
.peek-slide:hover img { transform: scale(1.04); }
.peek-slide:focus-visible { outline: 3px solid var(--violet); outline-offset: -8px; border-radius: inherit; }
.peek-cap {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  display: grid; gap: 1px; padding: 9px 14px 10px;
  background: rgba(255, 251, 254, .95); border: 2px solid var(--ink); border-radius: 18px; box-shadow: 3px 3px 0 var(--ink);
  opacity: 0; transition: opacity .25s ease;
}
/* The old caption leaves first and the new one arrives once its photo has settled, so they never overlap */
.peek-slide.on .peek-cap { opacity: 1; transition: opacity .4s ease .7s; }
.peek-place { font-family: var(--display); font-weight: var(--display-wt); font-variation-settings: var(--display-vary); letter-spacing: var(--display-track); font-size: 1.05rem; line-height: 1.2; }
.peek-hook { font-weight: 700; font-size: .85rem; color: var(--violet); }
.peek-slide:hover .peek-place { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.peek .gallery-glint { z-index: 2; }
.peek-dots { display: flex; justify-content: center; }
@media (prefers-reduced-motion: reduce) {
  .peek-arch { animation: none; }
  .peek-slide, .peek-slide img, .peek-cap, .peek-slide.on .peek-cap { transition: none; }
}

/* Twinkles: small four-point stars injected by magic.js */
.twinkle {
  position: absolute; width: var(--s, 14px); height: var(--s, 14px);
  pointer-events: none; z-index: 2;
  background: var(--c, #FFD86B);
  clip-path: path("M7 0C7.5 3.7 10.3 6.5 14 7 10.3 7.5 7.5 10.3 7 14 6.5 10.3 3.7 7.5 0 7 3.7 6.5 6.5 3.7 7 0Z");
  transform: scale(0);
  animation: twinkle var(--d, 2.6s) ease-in-out var(--delay, 0s) infinite;
  filter: drop-shadow(0 0 3px rgba(255,255,255,.9));
}
.twinkle.big { clip-path: path("M12 0C12.9 6.3 16.8 10.6 24 12 16.8 13.4 12.9 17.7 12 24 11.1 17.7 7.2 13.4 0 12 7.2 10.6 11.1 6.3 12 0Z"); }
@keyframes twinkle {
  0%, 100% { transform: scale(0) rotate(0deg); opacity: 0; }
  45% { transform: scale(1) rotate(45deg); opacity: 1; }
  60% { transform: scale(.85) rotate(60deg); opacity: .9; }
}
.mote {
  position: absolute; bottom: 20%; width: 6px; height: 6px; border-radius: 50%;
  background: var(--c); opacity: 0;
  box-shadow: 0 0 6px 1px var(--c);
  animation: rise var(--d, 6s) ease-in var(--delay, 0s) infinite;
}
@keyframes rise {
  0% { opacity: 0; transform: translate(0, 0) scale(.6); }
  15% { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--x, 30px), -260px) scale(1.1); }
}

/* ---------- Featured deals: a few big doors ---------- */
.finds { padding-top: 40px; }
.featured { display: grid; gap: 22px; }
.deal-card {
  position: relative; display: grid; grid-template-rows: auto 1fr;
  text-decoration: none; color: var(--ink);
  background: var(--white);
  border: var(--line); border-radius: 999px 999px var(--radius) var(--radius);
  box-shadow: var(--pop);
  overflow: hidden;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s cubic-bezier(.34,1.56,.64,1);
}
.deal-card:hover { color: var(--ink); transform: translate(-3px, -5px); box-shadow: 7px 9px 0 var(--ink); }
.deal-card:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.deal-art {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--opal-vivid); background-size: 300% 100%;
  border-bottom: var(--line);
}
.deal-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.deal-card:hover .deal-art img { transform: scale(1.04); }
.deal-art.blank::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; background: var(--white);
  clip-path: path("M27 0C29 14.2 37.8 23.9 54 27 37.8 30.1 29 39.8 27 54 25 39.8 16.2 30.1 0 27 16.2 23.9 25 14.2 27 0Z");
  filter: drop-shadow(0 0 10px rgba(255,255,255,.9));
}
.deal-art.blank { animation: drift 24s linear infinite; }
.deal-card:hover .deal-art.blank { animation-duration: 5s; }
.deal-body { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 26px; }
.deal-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pill { display: inline-flex; align-items: center; padding: 4px 12px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--lilac); font-weight: 700; font-size: .8rem; line-height: 1.4; }
.pill.sample { background: var(--butter); }
.pill.closing { background: var(--butter); gap: 6px; }
.pill.closing::before { content: ""; width: 9px; height: 9px; flex: none; background: var(--rose); clip-path: path("M4.5 0C4.8 2.4 6.6 4.2 9 4.5 6.6 4.8 4.8 6.6 4.5 9 4.2 6.6 2.4 4.8 0 4.5 2.4 4.2 4.2 2.4 4.5 0Z"); }

/* Trust line under the hero buttons, and the direct line in the FAQ and footer */
.trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.trust li { padding: 5px 12px; border: 1.5px solid var(--ink); border-radius: 999px; background: rgba(255, 255, 255, .8); font-weight: 600; font-size: .82rem; line-height: 1.4; }
.trust-programs { margin-top: -12px; font-size: .86rem; line-height: 1.55; color: var(--ink-soft); max-width: 60ch; }
.direct { font-size: .95rem; color: var(--ink-soft); }
.direct a { font-weight: 700; color: var(--violet); text-decoration: underline; text-decoration-color: var(--lilac-2); }
.direct a:hover { color: var(--rose); text-decoration-color: currentColor; }
footer .direct { font-size: .9rem; }
.fine a { color: inherit; font-weight: 700; }

/* ---------- Privacy page ---------- */
.prose { max-width: 680px; display: grid; gap: 22px; }
.prose h1 { font-size: calc(clamp(2.4rem, 7vw, 3.8rem) * var(--display-scale)); }
.prose h2 { font-size: calc(1.35rem * var(--display-scale)); margin-bottom: -12px; }
.prose p { line-height: 1.65; }
.prose a { font-weight: 700; color: var(--violet); }
.deal-body h3 { font-size: calc(1.5rem * var(--display-scale)); }
.deal-body p { color: var(--ink-soft); font-size: 1rem; line-height: 1.5; }
/* The foot sits on the card's floor, so prices and links line up across a row */
.deal-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin-top: auto; padding-top: 6px; flex-wrap: wrap; }
.deal-price { font-family: var(--display); font-variation-settings: var(--display-vary); font-weight: var(--display-wt); font-size: calc(1.3rem * var(--display-scale)); }
.deal-go { font-weight: 700; color: var(--violet); }
.deal-go::after { content: "\2192"; display: inline-block; margin-left: .3em; transition: transform .2s ease; }
.deal-card:hover .deal-go::after { transform: translateX(4px); }

.featured .deal-card:first-child { border-radius: var(--radius); }
.featured .deal-card:first-child .deal-art { border-radius: 0; }

/* ---------- Category tiles ---------- */
.wishing { background: linear-gradient(180deg, var(--moon), var(--wash-a) 30%, var(--wash-a) 70%, var(--moon)); }
.tiles { display: grid; gap: 14px; grid-template-columns: 1fr; }
.tile {
  position: relative; display: grid; gap: 8px; text-align: left;
  padding: 20px 22px 22px;
  font: inherit; color: var(--ink);
  background: var(--white);
  border: var(--line); border-radius: var(--radius);
  box-shadow: var(--pop);
  cursor: pointer;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s cubic-bezier(.34,1.56,.64,1), background-color .2s ease;
}
.tile:nth-child(1) { --tile: var(--t1); } .tile:nth-child(2) { --tile: var(--t2); } .tile:nth-child(3) { --tile: var(--t3); }
.tile:nth-child(4) { --tile: var(--t4); } .tile:nth-child(5) { --tile: var(--t5); } .tile:nth-child(6) { --tile: var(--t6); }
html[data-palette="spectrum"] .tile { background: var(--tile); }
.tile:hover { transform: translate(-2px, -4px); box-shadow: 6px 8px 0 var(--ink); }
.tile:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); transition-duration: .08s; }
.tile[aria-pressed="true"], html[data-palette="spectrum"] .tile[aria-pressed="true"] { background: var(--opal); background-size: 300% 100%; animation: drift 12s linear infinite; transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.tile-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.tile-name { font-family: var(--display); font-variation-settings: var(--display-vary); font-weight: var(--display-wt); letter-spacing: var(--display-track); font-size: calc(1.5rem * var(--display-scale)); line-height: 1.1; }
.tile-count { flex: none; font-size: .78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--tile, var(--lilac)); white-space: nowrap; }
html[data-palette="spectrum"] .tile-count { background: var(--white); }
.tile-count.open::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #2E9D6E; vertical-align: 1px; box-shadow: 0 0 0 3px rgba(46,157,110,.18); }
.tile-line { color: var(--ink-soft); font-size: 1rem; line-height: 1.5; }
.path-else { margin-top: 28px; font-size: 1.05rem; color: var(--ink-soft); }
.path-else a { font-weight: 700; color: var(--violet); }

/* The shelf: a category's deals, opened by a tile */
.shelf { margin-top: 26px; padding: 22px; border: var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--pop); }
.shelf:focus { outline: none; }
.shelf.opening { animation: unfurl .45s cubic-bezier(.34,1.3,.64,1); }
@keyframes unfurl { from { opacity: 0; transform: translateY(-10px) scale(.985); } to { opacity: 1; transform: none; } }
.shelf-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; margin-bottom: 20px; }
.shelf-head h3 { font-size: calc(1.8rem * var(--display-scale)); }
.shelf-close { font: 700 .95rem var(--body); color: var(--ink-soft); background: none; border: 0; cursor: pointer; padding: 8px 4px; text-decoration: underline; text-underline-offset: 4px; }
.shelf-close:hover { color: var(--rose); }

/* The wish invitation that sits at the top of every shelf */
.invite {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px;
  padding: 16px 20px; margin-bottom: 22px;
  border: 1.5px dashed var(--violet); border-radius: 18px;
  background: color-mix(in srgb, var(--lilac) 55%, var(--white));
}
.invite p { font-size: 1rem; }
.invite strong { font-family: var(--display); font-variation-settings: var(--display-vary); font-weight: var(--display-wt); font-size: calc(1.15rem * var(--display-scale)); }
.invite.empty { display: grid; justify-content: center; justify-items: center; text-align: center; padding: 40px 22px; gap: 16px; border-style: solid; background: var(--opal); background-size: 300% 100%; animation: drift 18s linear infinite; }
.invite.empty strong { font-size: calc(1.7rem * var(--display-scale)); line-height: 1.15; }
.invite.empty p { max-width: 46ch; }
.grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
.grid .deal-card { border-radius: 22px; box-shadow: 3px 3px 0 var(--ink); }
.grid .deal-card:hover { box-shadow: 5px 6px 0 var(--ink); }
.grid .deal-art { aspect-ratio: 16 / 9; }
.grid .deal-body { padding: 16px 18px 18px; gap: 6px; }
.grid .deal-body h3 { font-size: calc(1.2rem * var(--display-scale)); }
.grid .deal-body p { font-size: .95rem; }

/* ---------- Two ways ---------- */
.way-pair { display: grid; gap: 20px; }
.way {
  display: grid; gap: 14px; align-content: start;
  padding: 28px 24px;
  border: var(--line); border-radius: var(--radius);
  background: var(--white);
}
.way:first-child { background: linear-gradient(160deg, var(--petal), var(--white) 70%); }
.way:last-child { background: linear-gradient(160deg, var(--sky), var(--white) 70%); }
.way-tag { font-weight: 700; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--violet); }
.way-steps { margin: 4px 0 6px; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 14px; }
.way-steps li { counter-increment: s; display: grid; grid-template-columns: 34px 1fr; gap: 12px; color: var(--ink-soft); line-height: 1.5; }
.way-steps li::before {
  content: counter(s); width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--white);
  display: grid; place-items: center; font: 700 .95rem/1 var(--body); color: var(--ink);
}
.ways-after { margin-top: 28px; color: var(--ink-soft); }

/* ---------- Letter ---------- */
.letter-card {
  position: relative; overflow: hidden;
  display: grid; gap: 22px;
  padding: 36px 24px;
  border: var(--line); border-radius: 36px; box-shadow: 6px 6px 0 var(--ink);
  background: var(--opal); background-size: 300% 100%;
  animation: drift 30s linear infinite;
}
.letter-card .lede { margin-top: 14px; color: var(--ink); }
.letter-card .btn { justify-self: start; }

/* ---------- Form ---------- */
.wish { background: linear-gradient(180deg, var(--moon), var(--lilac) 30%, var(--lilac) 80%, var(--moon)); }
html[data-palette="spectrum"] .wish { background: linear-gradient(180deg, var(--moon), var(--sky) 30%, var(--sea) 80%, var(--moon)); }
.wish-form {
  background: var(--white);
  border: var(--line); border-radius: 32px; box-shadow: 6px 6px 0 var(--ink);
  padding: 28px 20px;
  display: grid; gap: 22px;
}
.form-intro { display: grid; gap: 6px; padding-bottom: 6px; border-bottom: 1.5px dashed var(--lilac-2); }
.form-intro h3 { font-size: calc(1.5rem * var(--display-scale)); }
.form-intro p { color: var(--ink-soft); font-size: 1rem; }
.field { display: grid; gap: 8px; }
.field label, .field legend { font-weight: 700; font-size: 1rem; }
.field .hint { font-weight: 400; color: var(--ink-soft); font-size: .92rem; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; }
input[type=text], input[type=email], input[type=tel], input[type=number], select, textarea {
  width: 100%; min-height: 52px;
  padding: 12px 14px;
  font: 400 1rem/1.4 var(--body); color: var(--ink);
  background: var(--moon);
  border: var(--line); border-radius: 14px;
  appearance: none;
  transition: box-shadow .2s ease, background-color .2s ease;
}
input:hover, select:hover, textarea:hover { background: var(--white); }
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%232E1A47' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px;
}
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; background: var(--white); box-shadow: 0 0 0 4px var(--lilac-2); }
[aria-invalid="true"] { border-color: var(--rose) !important; box-shadow: 0 0 0 4px var(--petal) !important; }
.row { display: grid; gap: 22px; }
.row.three { grid-template-columns: 1fr 1fr 1.3fr; gap: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px;
  border: var(--line); border-radius: 999px; background: var(--white);
  font-size: .98rem; cursor: pointer; user-select: none;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), background-color .2s ease;
}
.chip span:hover { transform: translateY(-2px); background: var(--chip, var(--lilac)); }
/* Chip hovers borrow the category tile colors, in the same order */
.chip:nth-child(7n+1) { --chip: var(--petal); }
.chip:nth-child(7n+2) { --chip: var(--sea); }
.chip:nth-child(7n+3) { --chip: var(--butter); }
.chip:nth-child(7n+4) { --chip: var(--sky); }
.chip:nth-child(7n+5) { --chip: var(--lilac); }
.chip:nth-child(7n+6) { --chip: var(--peach); }
.chip:nth-child(7n+7) { --chip: var(--lilac-2); }
.chip input:checked + span { background: var(--opal-vivid); background-size: 300% 100%; animation: drift 8s linear infinite; font-weight: 700; box-shadow: 2px 2px 0 var(--ink); }
.chip input:focus-visible + span { outline: 3px solid var(--violet); outline-offset: 2px; }
.check { display: flex; gap: 10px; align-items: center; font-size: .98rem; }
.check input { width: 22px; height: 22px; accent-color: var(--violet); }
.form-foot { display: grid; gap: 14px; }
.form-foot .btn { width: 100%; }
.fine { font-size: .86rem; color: var(--ink-soft); }
.status { font-weight: 700; }
.status:empty { display: none; }
.status.err { color: var(--rose); }
.thanks { display: none; text-align: center; padding: 28px 0; gap: 14px; justify-items: center; }
.thanks p { color: var(--ink-soft); }
.wish-form.sent > :not(.thanks) { display: none; }
.wish-form.sent .thanks { display: grid; }
.hp { position: absolute; left: -9999px; }

/* ---------- Reveal ---------- */
.reveal .wrap { display: grid; gap: 32px; }
.reveal .section-head .lede + .lede { margin-top: 2px; }
.reveal .section-head { margin-bottom: 0; }
.can-do {
  position: relative; overflow: hidden;
  padding: 34px 26px 28px;
  border: var(--line); border-radius: var(--radius);
  background: var(--white); box-shadow: var(--pop);
}
.can-do::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--opal-vivid); background-size: 300% 100%; animation: drift 10s linear infinite; }
.can-do-title { font-family: var(--display); font-variation-settings: var(--display-vary); font-weight: var(--display-wt); font-size: calc(1.5rem * var(--display-scale)); letter-spacing: var(--display-track); margin-bottom: 16px; }
.can-do ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.can-do li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; line-height: 1.45; }
.can-do li::before { content: ""; width: 16px; height: 16px; margin-top: 4px; background: var(--rose); clip-path: path("M8 0C8.6 4.2 11.2 7.1 16 8 11.2 8.9 8.6 11.8 8 16 7.4 11.8 4.8 8.9 0 8 4.8 7.1 7.4 4.2 8 0Z"); }
.can-do li:nth-child(6n+2)::before { background: var(--violet); }
.can-do li:nth-child(6n+3)::before { background: #2E8F6A; }
.can-do li:nth-child(6n+4)::before { background: #2F6FB8; }
.can-do li:nth-child(6n+5)::before { background: #B4641F; }
.can-do li:nth-child(6n+6)::before { background: var(--rose); }

/* ---------- FAQ ---------- */
.faq { background: linear-gradient(180deg, var(--moon), var(--peach) 28%, var(--peach) 72%, var(--moon)); }
.faq .section-head .text-link { justify-self: start; }
.faq-list { display: grid; gap: 12px; max-width: 820px; }
.faq details { border: var(--line); border-radius: 22px; background: var(--white); overflow: hidden; transition: background-color .2s ease; }
.faq details:nth-child(6n+1) { --qa: var(--petal); --qs: var(--rose); }
.faq details:nth-child(6n+2) { --qa: var(--sea); --qs: #2E8F6A; }
.faq details:nth-child(6n+3) { --qa: var(--butter); --qs: #B4641F; }
.faq details:nth-child(6n+4) { --qa: var(--sky); --qs: #2F6FB8; }
.faq details:nth-child(6n+5) { --qa: var(--lilac); --qs: var(--violet); }
.faq details:nth-child(6n+6) { --qa: var(--peach); --qs: var(--rose); }
.faq details[open] { background: var(--qa); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 60px 18px 22px; position: relative; font-weight: 700; font-size: 1.05rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 22px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
  background: var(--qs, var(--ink));
  clip-path: path("M9 0C9.7 4.7 12.6 8 18 9 12.6 10 9.7 13.3 9 18 8.3 13.3 5.4 10 0 9 5.4 8 8.3 4.7 9 0Z");
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), background-color .2s ease;
}
.faq summary:hover::after { transform: rotate(45deg); }
.faq details[open] summary::after { transform: rotate(135deg) scale(1.15); }
.faq details > p { padding: 0 22px 22px; color: var(--ink-soft); }

/* ---------- Footer (light) ---------- */
footer { position: relative; padding: 64px 0 128px; background: linear-gradient(180deg, var(--moon), var(--lilac)); }
footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--opal-vivid); background-size: 300% 100%; animation: drift 14s linear infinite; }
footer .wrap { display: grid; gap: 20px; }
footer .mark { font-size: 2rem; }
footer p { font-size: .9rem; line-height: 1.6; color: var(--ink-soft); }
.socials { display: flex; flex-wrap: wrap; gap: 20px; font-weight: 700; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 24px; font-weight: 700; font-size: .95rem; }
.foot-links a { text-decoration: underline; text-decoration-color: var(--lilac-2); }
.foot-links a:hover { text-decoration-color: currentColor; }
/* Deals by kind: one link per category page, under the name on wide screens */
.foot-cats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; font-weight: 600; font-size: .9rem; }
.foot-cats-label { flex-basis: 100%; font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--violet); }
.foot-cats a { text-decoration: underline; text-decoration-color: var(--lilac-2); }
.foot-cats a:hover { text-decoration-color: currentColor; }
[data-socials][hidden] { display: none !important; } /* SHOW_SOCIALS in config.js */

/* ---------- Mobile sticky CTA ---------- */
.dock { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30; transition: transform .25s ease, opacity .25s ease; }
.dock .btn { width: 100%; }
.dock.hide { transform: translateY(140%); opacity: 0; pointer-events: none; }

/* ---------- Cursor trail canvas ---------- */
.trail { position: fixed; inset: 0; z-index: 60; pointer-events: none; }

/* ---------- Scroll reveal ---------- */
.rise { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.rise.in { opacity: 1; transform: none; }

/* ---------- Deal landing page ---------- */
/* clip, not hidden: hidden would make the section a scroll box and stop the gallery sticking */
.deal-hero { padding: 32px 0 56px; overflow: hidden; overflow: clip; }
.deal-hero .wrap { display: grid; gap: 28px; }
.deal-hero .deal-art { border: var(--line); border-radius: 999px 999px var(--radius) var(--radius); box-shadow: 6px 6px 0 var(--ink); aspect-ratio: 4 / 4.4; }
.deal-copy { display: grid; gap: 20px; align-content: start; }
.deal-copy h1 { font-size: calc(clamp(2.3rem, 8vw, 4rem) * var(--display-scale)); }
.kicker { display: inline-flex; align-self: start; justify-self: start; padding: 6px 14px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--lilac); font-weight: 700; font-size: .9rem; }
.price { font-family: var(--display); font-variation-settings: var(--display-vary); font-size: calc(2.1rem * var(--display-scale)); font-weight: var(--display-wt); line-height: 1.1; }
.price small { display: block; font-family: var(--body); font-size: .95rem; font-weight: 400; color: var(--ink-soft); margin-top: 4px; letter-spacing: 0; }
.facts { display: grid; border: var(--line); border-radius: 22px; background: var(--white); overflow: hidden; margin: 0; }
.facts div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 12px; padding: 14px 18px; border-top: 1px solid color-mix(in srgb, var(--ink) 15%, transparent); }
.facts div:first-child { border-top: 0; }
.facts dt { font-weight: 700; }
.facts dd { margin: 0; color: var(--ink-soft); }
.perks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.perks li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; }
.perks li::before { content: ""; width: 18px; height: 18px; margin-top: 5px; background: var(--rose); clip-path: path("M9 0C9.7 4.7 12.6 8 18 9 12.6 10 9.7 13.3 9 18 8.3 13.3 5.4 10 0 9 5.4 8 8.3 4.7 9 0Z"); }
/* Deal page: included, good for, about, particulars */
.mini-head { font-weight: 700; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--violet); margin-bottom: 10px; }
.included, .good-for { display: grid; }
.good-for ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.good-for li { padding: 6px 14px; border: 1.5px solid var(--ink); border-radius: 999px; font-size: .92rem; font-weight: 600; background: var(--chip, var(--lilac)); }
.good-for li:nth-child(6n+1) { --chip: var(--petal); }
.good-for li:nth-child(6n+2) { --chip: var(--sea); }
.good-for li:nth-child(6n+3) { --chip: var(--butter); }
.good-for li:nth-child(6n+4) { --chip: var(--sky); }
.good-for li:nth-child(6n+5) { --chip: var(--lilac); }
.good-for li:nth-child(6n+6) { --chip: var(--peach); }
.deal-more { padding-top: 8px; }
.deal-more .wrap { display: grid; gap: 28px; align-items: start; }
.about-card {
  position: relative; overflow: hidden;
  padding: 32px 26px 26px;
  border: var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--pop);
}
.about-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--opal-vivid); background-size: 300% 100%; animation: drift 10s linear infinite; }
.about-card h2, .particulars h2 { font-size: calc(1.7rem * var(--display-scale)); margin-bottom: 16px; }
.about-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.about-list li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; line-height: 1.5; }
.about-list li::before { content: ""; width: 16px; height: 16px; margin-top: 4px; background: var(--rose); clip-path: path("M8 0C8.6 4.2 11.2 7.1 16 8 11.2 8.9 8.6 11.8 8 16 7.4 11.8 4.8 8.9 0 8 4.8 7.1 7.4 4.2 8 0Z"); }
.about-list li:nth-child(5n+2)::before { background: var(--violet); }
.about-list li:nth-child(5n+3)::before { background: #2E8F6A; }
.about-list li:nth-child(5n+4)::before { background: #2F6FB8; }
.about-list li:nth-child(5n+5)::before { background: #B4641F; }
.particulars { display: grid; gap: 16px; }
.particulars h2 { margin-bottom: 0; }
.particulars:only-child { grid-column: 1 / -1; max-width: 720px; }

/* Grouped About, organized the way Disney lays out a resort: one line on what the place is,
   then short titled groups (rooms, dining, pools, kids) that scan in seconds. "Good to know"
   holds the honest notes and spans the card. Deals with a plain list still use .about-list above. */
.about-intro { font-size: 1.08rem; line-height: 1.55; color: var(--ink-soft); margin: -4px 0 24px; max-width: 64ch; }
.about-groups { display: grid; gap: 24px 36px; }
.about-group { --g: var(--rose); }
.about-group:nth-child(5n+2) { --g: var(--violet); }
.about-group:nth-child(5n+3) { --g: #2E8F6A; }
.about-group:nth-child(5n+4) { --g: #2F6FB8; }
.about-group:nth-child(5n+5) { --g: #B4641F; }
.about-group h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-family: var(--body); font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.about-group h3::before { content: ""; flex: none; width: 16px; height: 16px; background: var(--g); clip-path: path("M8 0C8.6 4.2 11.2 7.1 16 8 11.2 8.9 8.6 11.8 8 16 7.4 11.8 4.8 8.9 0 8 4.8 7.1 7.4 4.2 8 0Z"); }
.about-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.about-group li { position: relative; padding-left: 26px; line-height: 1.5; }
.about-group li::before { content: ""; position: absolute; left: 5px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--g); }
.about-group.know { grid-column: 1 / -1; padding: 16px 20px 18px; border: 1.5px dashed color-mix(in srgb, var(--ink) 45%, transparent); border-radius: 18px; background: var(--moon); --g: var(--violet); }
.fine-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fine-list li { position: relative; padding-left: 16px; }
.fine-list li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 40%, transparent); }
@media (min-width: 720px) {
  .about-groups { grid-template-columns: 1fr 1fr; }
  .about-card.grouped { padding: 38px 36px 32px; }
}
@media (min-width: 1180px) {
  .deal-more .wrap.grouped { grid-template-columns: 1fr; }
  .deal-more .wrap.grouped .particulars { grid-template-columns: 1fr 1fr; gap: 16px 48px; align-items: start; }
  .deal-more .wrap.grouped .particulars h2 { grid-column: 1 / -1; }
}

/* Deal photo gallery */
.gallery { display: grid; gap: 16px; outline-offset: 6px; }
.gallery-frame { position: relative; touch-action: pan-y; user-select: none; }
.gallery-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.03); transition: opacity .8s ease, transform 1.2s ease; -webkit-user-drag: none; }
.gallery-frame img.on { opacity: 1; transform: none; }
.gallery-glint { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(105deg, transparent 25%, rgba(255,194,220,.45) 38%, rgba(255,255,255,.75) 46%, rgba(190,220,255,.45) 54%, transparent 68%); background-size: 260% 100%; background-position: 130% 0; mix-blend-mode: screen; }
.gallery-glint.go { animation: sweep .95s ease-out; }
@keyframes sweep { 0% { opacity: 1; background-position: 130% 0; } 100% { opacity: 0; background-position: -40% 0; } }
.gallery-bar { display: flex; align-items: center; justify-content: center; gap: 14px; }
.gallery-btn { width: 46px; height: 46px; display: grid; place-items: center; border: var(--line); border-radius: 50%; background: var(--white); color: var(--ink); font: 700 1.1rem/1 var(--body); box-shadow: 3px 3px 0 var(--ink); cursor: pointer; transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s cubic-bezier(.34,1.56,.64,1); }
.gallery-btn:hover { transform: translate(-1px, -2px); box-shadow: 4px 5px 0 var(--ink); background: var(--lilac); }
.gallery-btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.gallery-dots { display: flex; gap: 0; flex-wrap: wrap; justify-content: center; }
.gallery-count { display: none; min-width: 64px; text-align: center; font-weight: 700; font-size: .95rem; font-variant-numeric: tabular-nums; }
.gallery-long .gallery-dots { display: none; }
.gallery-long .gallery-count { display: block; }
@media (max-width: 559px) { .gallery-dots { display: none; } .gallery-count { display: block; } }
.gallery-dot { width: 24px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.gallery-dot::before { content: ""; width: 14px; height: 14px; background: var(--lilac-2); clip-path: path("M7 0C7.5 3.7 10.3 6.5 14 7 10.3 7.5 7.5 10.3 7 14 6.5 10.3 3.7 7.5 0 7 3.7 6.5 6.5 3.7 7 0Z"); transition: transform .35s cubic-bezier(.34,1.56,.64,1), background-color .2s ease; }
.gallery-dot:hover::before { transform: scale(1.2) rotate(20deg); }
.gallery-dot[aria-current="true"]::before { background: var(--rose); transform: scale(1.45) rotate(45deg); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Promo code chip */
.code-reveal { display: grid; gap: 10px; justify-items: start; }
.reveal-hint { font-weight: 600; padding: 12px 16px; border: 1.5px dashed var(--violet); border-radius: 14px; background: var(--white); }
.code { display: inline-flex; align-items: center; gap: 12px; justify-self: start; padding: 8px 8px 8px 18px; border: 1.5px dashed var(--violet); border-radius: 999px; background: var(--white); }
.code span { font-size: .85rem; color: var(--ink-soft); }
.code strong { font-size: 1.1rem; letter-spacing: .08em; }
.code button { font: 700 .9rem var(--body); padding: 8px 14px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--opal-vivid); background-size: 300% 100%; color: var(--ink); cursor: pointer; }

.sample-bar { background: var(--butter); border-bottom: var(--line); text-align: center; padding: 10px var(--gutter); font-weight: 700; font-size: .95rem; }

/* ---------- Draft design options panel ---------- */
.options {
  position: fixed; right: 10px; top: 82px; z-index: 70;
  font: 500 .85rem/1.3 var(--body);
}
.options summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--white); border: var(--line); border-radius: 999px; box-shadow: 3px 3px 0 var(--ink); font-weight: 700; }
.options summary::-webkit-details-marker { display: none; }
.options[open] summary { margin-bottom: 8px; }
.options { display: flex; flex-direction: column; align-items: flex-end; }
.options-body { display: grid; gap: 12px; width: 250px; padding: 14px; background: var(--white); border: var(--line); border-radius: 18px; box-shadow: 4px 4px 0 var(--ink); }
.options-body p { font-weight: 700; margin-bottom: 6px; }
.options-body .seg { display: grid; gap: 6px; }
.options-body button { text-align: left; font: inherit; padding: 8px 10px; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--moon); cursor: pointer; color: var(--ink); }
.options-body button[aria-pressed="true"] { background: var(--opal-vivid); background-size: 300% 100%; font-weight: 700; }
.options-body small { color: var(--ink-soft); }

/* Featured deals swipe sideways on phones and tablets */
@media (max-width: 979px) {
  .featured {
    grid-auto-flow: column; grid-auto-columns: min(84%, 360px);
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) 14px;
    scroll-padding: 0 var(--gutter);
    scrollbar-width: none;
  }
  .featured::-webkit-scrollbar { display: none; }
  .featured .deal-card { scroll-snap-align: start; }
}

/* ---------- Draft photo checklist (right edge) ---------- */
.pc { position: fixed; top: 96px; right: 0; z-index: 75; display: flex; align-items: flex-start; font: 500 .9rem/1.35 var(--body); }
.pc-tab {
  writing-mode: vertical-rl; transform: rotate(180deg);
  padding: 16px 9px; border: var(--line); border-right: 0; border-radius: 0 14px 14px 0;
  background: var(--opal-vivid); background-size: 100% 300%; color: var(--ink);
  font: 700 .85rem var(--body); letter-spacing: .02em; cursor: pointer;
  box-shadow: -3px 3px 0 var(--ink);
}
.pc-tab b { display: inline-block; margin-top: 6px; padding: 4px 2px; border-radius: 999px; background: var(--white); border: 1.5px solid var(--ink); }
.pc.open .pc-tab { display: none; }
.pc-body {
  width: min(360px, calc(100vw - 24px)); max-height: calc(100vh - 120px); overflow: auto;
  margin-right: 12px; padding: 18px 18px 14px;
  background: var(--white); border: var(--line); border-radius: 20px; box-shadow: 5px 5px 0 var(--ink);
}
.pc-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pc-title { font-family: var(--display); font-variation-settings: var(--display-vary); font-weight: var(--display-wt); font-size: 1.35rem; letter-spacing: var(--display-track); }
.pc-close { width: 34px; height: 34px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--white); font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--ink); }
.pc-close:hover { background: var(--lilac); }
.pc-note { margin: 8px 0 12px; color: var(--ink-soft); font-size: .85rem; }
.pc-group { margin: 14px 0 6px; font-weight: 700; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--violet); }
.pc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pc-row { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.pc-row a { display: grid; gap: 1px; padding: 6px 8px; margin-left: -8px; border-radius: 10px; text-decoration: none; }
.pc-row a:hover { background: var(--lilac); color: var(--ink); }
.pc-box { width: 18px; height: 18px; margin-top: 8px; border: 1.5px solid var(--ink); border-radius: 5px; background: var(--white); }
.pc-row.is-done .pc-box { background: var(--sea); position: relative; }
.pc-row.is-done .pc-box::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pc-row.is-done .pc-name { color: var(--ink-soft); }
.pc-name { font-weight: 700; }
.pc-meta { font-size: .8rem; color: var(--ink-soft); }
.pc-soon { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 999px; background: var(--peach); border: 1px solid var(--ink); color: var(--ink); font-weight: 700; font-size: .72rem; }
.pc-foot { margin-top: 12px; font-size: .75rem; color: var(--ink-soft); }

/* ---------- Phones: a smaller door, tighter rhythm, compact tiles ---------- */
@media (max-width: 719px) {
  section { padding: 56px 0; }
  .section-head { margin-bottom: 28px; }
  .hero { padding: 32px 0 44px; }
  .hero .wrap { gap: 28px; }
  .finds { padding-top: 24px; }
  .doorway { width: 132px; }
  .door-arch { box-shadow: 0 0 0 7px var(--white), 0 0 0 9px var(--ink); }
  .door-step { height: 11px; margin: 0 -18px; }
  .keyhole { width: 10px; height: 16px; }
  .path-else, .ways-after { margin-top: 22px; }

  /* Two tiles to a row: name and count only, the description returns on wider screens */
  .tiles { grid-template-columns: 1fr 1fr; gap: 12px; }
  .tile { padding: 16px 14px 14px; gap: 0; align-content: stretch; border-radius: 22px; box-shadow: 3px 3px 0 var(--ink); }
  .tile:hover { box-shadow: 4px 6px 0 var(--ink); }
  /* counts sit on the tile's floor, so they line up across a row */
  .tile-top { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 10px; }
  .tile-name { font-size: calc(1.2rem * var(--display-scale)); }
  .tile-count { padding: 2px 9px; font-size: .74rem; }
  .tile-line { display: none; }
}

/* ---------- Wider screens ---------- */
@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 720px) {
  :root { --gutter: 32px; }
  section { padding: 88px 0; }
  .letter { padding: 24px 0; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .row.two { grid-template-columns: 1fr 1fr; }
  .row.three { gap: 22px; }
  .mark { font-size: 1.6rem; }
  .wish-form { padding: 40px; }
  .letter-card { padding: 52px; grid-template-columns: 1.4fr auto; align-items: center; }
  .letter-card .btn { justify-self: end; }
  .way-pair { grid-template-columns: 1fr 1fr; }
  .way { padding: 36px 34px; }
  .shelf { padding: 30px; }
  .dock { display: none; }
  .options { top: auto; bottom: 16px; right: 16px; }
  .options[open] { display: flex; flex-direction: column-reverse; align-items: flex-end; }
  .options[open] summary { margin: 8px 0 0; }
  footer { padding-bottom: 64px; }
  /* Footer: name and the fine print on the left, the page links on the right */
  footer .wrap { grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; }
  footer .wrap > * { grid-column: 1; }
  footer .foot-links { grid-column: 2; grid-row: 1 / span 3; align-self: start; padding-top: 8px; }
}
@media (min-width: 980px) {
  .hero { padding: 64px 0 104px; }
  .hero .wrap { grid-template-columns: 1.25fr .75fr; gap: 64px; }
  .doorway { width: 340px; margin-right: 20px; }
  .hero .doorway { order: 2; }
  .peek { width: 340px; margin-right: 20px; }
  .hero .peek { order: 2; }
  .peek-place { font-size: 1.2rem; }
  .featured { grid-template-columns: 1.35fr 1fr 1fr; align-items: stretch; }
  .featured .deal-card:first-child .deal-art { aspect-ratio: 4 / 3.3; }
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1180px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
  .reveal .wrap { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 64px; }
  .deal-hero .wrap { grid-template-columns: .9fr 1.1fr; align-items: start; gap: 56px; }
  .deal-more .wrap { grid-template-columns: 1.1fr .9fr; gap: 48px; }
  .wish .wrap.split { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
  .wish .wrap.split .section-head { position: sticky; top: 110px; }
  .faq .wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
  .faq .section-head { position: sticky; top: 110px; margin-bottom: 0; }
  /* The photos stay in view while the particulars scroll past beside them */
  .deal-hero .gallery, .deal-hero .wrap > .deal-art.blank { position: sticky; top: 96px; }
}

/* ---------- Deal listing pages (/deals, /deals/<category>, drawn by edge/listing.js) ---------- */
a.kicker { text-decoration: none; transition: background .2s ease, transform .2s ease; }
a.kicker:hover { background: var(--lilac-2); transform: translateY(-1px); }
.listing-hero .wrap { display: block; }
.listing-hero h1 { font-size: calc(clamp(2.5rem, 8vw, 4.6rem) * var(--display-scale)); }
.listing-hero .invite { margin-bottom: 24px; }
.listing-group { margin-bottom: 44px; }
.listing-group h2 { font-size: calc(1.8rem * var(--display-scale)); }
.listing-group h2 a { text-decoration: none; }
.listing-group h2 a:hover { color: var(--violet); text-decoration: underline; }
a.tile { text-decoration: none; color: inherit; }

/* ---------- Supplier offer panel (Disney and Universal deals) ----------
   Disney's agent rules: its offer appears as Disney states it, in a calm panel with nothing decorative
   on or around it. So this stays plain on purpose: no opal stripe, no shadow pop, no motion. */
.official { padding: 8px 0 32px; }
.official-col { display: grid; gap: 18px; max-width: 820px; }
.official-panel { padding: 26px 24px 22px; border: 1.5px solid var(--ink); border-radius: 18px; background: var(--white); }
.official-label { margin: 0 0 10px; font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.official-panel h2 {
  margin: 0 0 6px; font-family: var(--body); font-variation-settings: normal; font-weight: 700;
  font-size: 1.3rem; line-height: 1.3; letter-spacing: 0;
}
.official-dest { margin: 0 0 16px; }
.official-list { margin: 0 0 16px; padding-left: 1.2em; display: grid; gap: 8px; line-height: 1.5; }
.official-panel .fine-list { margin-bottom: 14px; }
.official-checked { margin: 0; font-size: .82rem; color: var(--ink-soft); }
.official-legal { display: grid; gap: 4px; font-size: .8rem; line-height: 1.5; color: var(--ink-soft); }
.official-legal p { margin: 0; }
.official-related { padding: 16px 20px 18px; border: 1.5px dashed color-mix(in srgb, var(--ink) 45%, transparent); border-radius: 18px; background: var(--moon); }
.official-related .mini-head { margin-bottom: 6px; }
.official-related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.official-related a { font-weight: 700; }
@media (min-width: 720px) { .official-panel { padding: 30px 32px 26px; } }

/* ---------- Typographic finish ----------
   Kerning and ligatures everywhere. The font shorthand used on buttons and fields resets them,
   so they are restated here, last, for every rule that sets font: directly. */
.btn, .tile, .shelf-close, .way-steps li::before, .gallery-btn, .code button,
.options, .options-body button, .pc, .pc-tab,
button, input, input[type], select, textarea {
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
}