:root {
  --cream: #faf7f2;
  --ink: #2b2a28;
  --muted: #6b6760;
  --teal: #4e6d69;
  --teal-dark: #3b5552;
  --mustard: #d9a62e;
  --pink: #e8a9a0;
  --orange: #e48a5c;
  --sage: #b3b885;
  --sky: #a8cdd6;
  --radius: 10px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--cream);
  color: var(--ink);
  font: 17px/1.6 Georgia, 'Times New Roman', serif;
}
img { display: block; max-width: 100%; }
h1, h2, h3 { font-weight: normal; line-height: 1.2; }
h2 { font-size: 2rem; margin: 0 0 .75rem; }
h3 { font-size: 1.15rem; color: var(--teal); text-transform: uppercase; letter-spacing: .08em; margin: 2.5rem 0 .75rem; }
a { color: var(--teal-dark); }

/* Hero */
.hero { position: relative; height: min(88vh, 900px); min-height: 420px; overflow: hidden; }
.hero picture, .hero picture img { width: 100%; height: 100%; }
.hero picture img { object-fit: cover; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 55%); }
.hero-text { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 32px 16px 48px; text-align: center; color: #fff; }
.hero-text h1 { font-size: clamp(2.5rem, 7vw, 4.5rem); margin: .25rem 0; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.hero-text p { margin: 0 0 1.25rem; font-size: 1.15rem; }
.hero-monarch { position: relative; display: block; width: clamp(96px, 9vw, 140px); aspect-ratio: 520 / 364; margin: 0 auto 6px; }
.hero-monarch.flying { position: fixed; z-index: 50; margin: 0; pointer-events: none; }
.monarch-spacer { display: block; margin: 0 auto 6px; }


/* Painted-wall stripe motif */
.stripe { display: flex; height: 10px; position: relative; overflow: hidden; }
/* a soft sheen that drifts across the painted stripe every few seconds */
.stripe::after {
  content: ''; position: absolute; inset: 0; width: 30%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
  transform: translateX(-120%);
  animation: stripe-sheen 7s ease-in-out infinite;
}
footer .stripe::after { animation-delay: 3.5s; }
@keyframes stripe-sheen {
  0% { transform: translateX(-120%); }
  45%, 100% { transform: translateX(420%); }
}
@media (prefers-reduced-motion: reduce) { .stripe::after { animation: none; display: none; } }
.stripe span { flex: 1; }
.stripe span:nth-child(1) { background: var(--pink); }
.stripe span:nth-child(2) { background: var(--orange); }
.stripe span:nth-child(3) { background: var(--mustard); }
.stripe span:nth-child(4) { background: var(--sage); }
.stripe span:nth-child(5) { background: var(--sky); }

main { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
section { padding: 56px 0; }
.intro { max-width: 720px; margin: 0 auto; text-align: center; }
.facts { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; font-family: system-ui, sans-serif; font-size: .95rem; color: var(--muted); }

/* Gallery */
.tour > h2 { text-align: center; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.grid button { padding: 0; border: 0; background: #e9e4dc; border-radius: var(--radius); overflow: hidden; cursor: zoom-in; aspect-ratio: 3 / 4; }
.grid button.wide { grid-column: span 2; aspect-ratio: 4 / 3; }
.grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.grid button:hover img, .grid button:focus-visible img { transform: scale(1.03); }
.grid button:focus-visible { outline: 3px solid var(--mustard); outline-offset: 2px; }
@media (max-width: 520px) {
  .grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .grid button.wide { grid-column: span 2; }
}


/* Contact: bold horizontal rainbow bands as the background — each band as thick as the old ribbon —
   stacked from the footer stripe up to the pink band, which sits centred behind the heading.
   Heading line = 2rem × 1.2 ≈ 38px, so its centre is 19px below the section's top padding. */
.contact {
  --band: clamp(64px, 13.6vw, 230px);
  --head-mid: calc(var(--band) / 2 + 59px);
  position: relative; text-align: center;
  padding: calc(var(--head-mid) - 19px) 0 0;
  min-height: calc(var(--head-mid) + 4.5 * var(--band));
}
.contact-bands {
  position: absolute; z-index: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  top: calc(var(--head-mid) - var(--band) / 2); bottom: 0;
  background: linear-gradient(to bottom,
    var(--pink) 0 20%, var(--orange) 20% 40%, var(--mustard) 40% 60%, var(--sage) 60% 80%, var(--sky) 80% 100%);
}
.contact-text {
  position: relative; z-index: 1; display: inline-block; padding: 0 3rem 1.5rem;
  /* soft white glow so the words read in front of the bands */
  background: radial-gradient(closest-side, rgba(255,255,255,.9) 50%, rgba(255,255,255,0));
  text-shadow: 0 0 8px #fff, 0 0 16px #fff;
}
.contact-text h2 { margin-top: 0; font-size: clamp(1.6rem, 5vw, 2rem); }
.contact-text p { margin-bottom: 0; }

/* the "Sara" monarch: flies in low over the bands and perches on the pink band beside the heading as the email button.
   Photo layers share one canvas centred on the body, so each wing beats around the body axis. gallery.js
   flies it (and the hero monarch) and drives the wings and the cast shadow every frame. */
.contact > .contact-link {
  position: absolute; z-index: 2; left: calc(50% + clamp(120px, 26vw, 420px)); top: var(--head-mid);
  width: clamp(96px, 10vw, 150px); aspect-ratio: 520 / 364;
  transform: translate(-50%, -60%); text-decoration: none;
}
.js .contact > .contact-link { opacity: 0; }
.js .contact > .contact-link.airborne { opacity: 1; }
.mshadow, .mfly { position: absolute; inset: 0; transform-origin: 50% 50%; }
.mshadow img, .mfly img { position: absolute; inset: 0; width: 100%; height: 100%; }
.mshadow img { filter: brightness(0); }
.mshadow { opacity: .45; filter: blur(1px); transform: translate(2px, 4px); }   /* resting: close and crisp */
.wing, .swing { transform-origin: 50% 50%; }
/* hovered: a quick flutter (about 7 beats a second) */
.contact-link:hover .wing, .contact-link:hover .swing,
.contact-link:focus-visible .wing, .contact-link:focus-visible .swing { animation: flutter .14s ease-in-out infinite; }
@keyframes flutter { 50% { transform: scaleX(.2); } }
.contact-link .tag {
  position: absolute; left: 50%; top: 100%; transform: translate(-50%, -2px);
  padding: .2rem .7rem; border-radius: 999px; background: var(--cream); color: var(--ink);
  font: 600 .85rem system-ui, sans-serif; white-space: nowrap;
  box-shadow: 0 3px 8px rgba(43, 42, 40, .22);
  opacity: 0; transition: opacity .5s ease .3s;
}
.contact-link.landed .tag { opacity: 1; }
/* narrow screens: perch on the top edge of the pink band at the right, clear of the heading */
@media (max-width: 600px) {
  .contact > .contact-link { left: calc(100% - 46px); top: calc(var(--head-mid) - var(--band) * .85); }
}
.contact-link:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) {
  .js .contact > .contact-link { opacity: 1; }
  .wing, .swing { animation: none !important; }
  .contact-link .tag { opacity: 1; }
}

footer { text-align: center; color: var(--muted); font-size: .9rem; }
footer p { margin: 0; padding: 24px 16px 32px; }
footer .credit { padding: 0 16px 24px; margin-top: -20px; font-size: .75rem; }
footer .credit a { color: inherit; }

/* Lightbox */
dialog#viewer { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
dialog#viewer::backdrop { background: rgba(20,18,16,.92); }
dialog#viewer[open] { display: grid; place-items: center; }
#viewer img { max-width: 94vw; max-height: 90vh; object-fit: contain; border-radius: 4px; }
#viewer button { position: fixed; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 2rem; width: 52px; height: 52px; border-radius: 50%; cursor: pointer; line-height: 1; }
#viewer button:hover { background: rgba(255,255,255,.25); }
#viewer .close { top: 16px; right: 16px; }
#viewer .prev { left: 16px; top: 50%; translate: 0 -50%; }
#viewer .next { right: 16px; top: 50%; translate: 0 -50%; }