/* Keep the opening legible while the photograph and ink settle. */
.hero h1 > span {
  animation: headline-in .45s var(--ease) both;
}
.hero h1 > span:nth-child(1) { animation-delay: 0s; }
.hero h1 > span:nth-child(2) { animation-delay: .045s; }
.hero h1 > span:nth-child(3) { animation-delay: .09s; }
@keyframes headline-in {
  from { opacity: .9; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-photo > img { animation: none; }
.hero-photo[data-image-state="ready"] > img { animation: sd-photo-settle .55s var(--ease) both; }
@keyframes sd-photo-settle {
  from { opacity: .84; }
  to { opacity: 1; }
}
.js .reveal, .js .reveal.visible {
  opacity: 1;
  transform: rotate(var(--paper-tilt, 0deg));
  transition: none;
}
.js .plan-card.reveal { --paper-tilt: -1deg; }
.js .reveal.visible:not(:focus-within) { animation: sd-ink-in .48s var(--ease) both; }
@keyframes sd-ink-in {
  from { transform: translateY(9px) rotate(var(--paper-tilt, 0deg)); }
  to { transform: translateY(0) rotate(var(--paper-tilt, 0deg)); }
}
.hero-scroll { bottom: 54px; }

@media (min-width:901px) and (max-width:1280px) {
  .hero {
    display: grid;
    grid-template-columns: 54% 46%;
    min-height: 580px;
    height: clamp(580px, calc(100svh - 120px), 700px);
  }
  .hero-photo { width: auto; height: auto; aspect-ratio: auto; }
  .hero-photo > img { object-position: 30% 50%; }
  .hero-copy { padding: 32px 8% 66px; min-width: 0; }
  .hero-copy::before { content: none; }
  .hero-edge { display: block; left: -49px; width: 51px; }
  .hero h1 { font-size: clamp(55px, 6.4vw, 83px); }
  .hero .eyebrow { margin-bottom: 19px; font-size: 9px; }
  .hero-description { font-size: 16px; margin: 22px 0; }
  .hero-sun { top: 22px; right: 9%; }
  .pet-stamp { top: auto; left: calc(54% - 102px); right: auto; bottom: 66px; }
  .pet-note { top: auto; left: calc(54% - 256px); right: auto; bottom: 204px; }
}

@media (min-width:681px) and (max-width:900px) {
  .hero {
    display:flex;
    flex-direction:column;
    min-height:0;
    max-height:none;
    height:auto;
  }
  .hero-photo {
    flex:0 0 auto;
    height:clamp(295px,43vw,365px);
    width:100%;
    order:0;
    min-height:0;
    aspect-ratio:auto;
  }
  .hero-photo img {
    object-position:28% 32%;
  }
  .hero-copy {
    order:1;
    width:100%;
    min-height:0;
    height:auto;
    padding:35px 8% 58px;
    justify-content:center;
  }
  .hero h1 {
    font-size:clamp(52px,7.5vw,65px);
    line-height:.94;
  }
  .hero h1 > span:not(:first-child) { display:inline-block; }
  .hero h1 > span:nth-child(2) { margin-right:.18em; }
  .hero .eyebrow { margin-bottom:16px; }
  .hero-description { margin:17px 0 16px; }
  .hero-note { margin:16px 0 0 4px; }
  .pet-stamp { top:calc(clamp(295px,43vw,365px) - 85px); }
  .hero-scroll {
    right:28px;
    bottom:41px;
  }
  .desktop-nav a, .site-header .header-actions .button {
    font-size:11px;
  }
}
@media (max-width:680px) {
  .hero-copy { min-height:0; padding-top:40px; padding-bottom:54px; }
  .hero .eyebrow { margin-bottom:18px; }
  .hero-description { margin-top:23px; margin-bottom:19px; }
  .hero-scroll { right:14px; bottom:33px; min-width:44px; min-height:44px; justify-content:center; }
  .hero-scroll span:last-child { width:34px; height:34px; }
  .site-header .header-actions .button {
    font-size:11px;
    min-height:44px;
  }
  .site-header .menu-toggle {
    min-height:44px;
    min-width:44px;
    display:grid;
    place-items:center;
    padding:0;
  }
  .before-accordion summary {
    font-size:12px;
  }
  .plan-card .field label, .plan-card .pet-checkbox {
    font-size:12px;
  }
  .packing-item strong {
    font-size:10px;
  }
  .camper-tabs small { font-size:8px; }
  .camper-tabs .icon { top:15px; }
  .trip-result-actions { row-gap:8px; }
}
@media (max-width:480px) {
  .hero-scroll span:first-child { display:none; }
}
@media (max-width:375px) {
  .site-header {
    padding-left:12px;
    padding-right:10px;
    gap:8px;
  }
  .site-header .brand {
    font-size:16px;
    gap:6px;
  }
  .site-header .header-actions {
    gap:3px;
  }
  .site-header .header-actions .button {
    font-size:10px;
    min-height:44px;
    padding-left:9px;
    padding-right:9px;
  }
  .site-header .menu-toggle {
    width:44px;
    min-width:44px;
  }
}

/* The contact strip is the tear-off edge of the example trip desk. */
.sd-contact-bar {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(24px,5vw,76px);
  padding:3px 20px;
  background:#e9dfc8;
  color:var(--navy);
  position:relative;
  z-index:4;
}
.sd-contact-bar a { display:flex; align-items:center; gap:8px; min-height:40px; }
.sd-contact-bar .icon, .trip-desk .icon { width:16px; height:16px; flex:none; }
.contact-copy { display:flex; align-items:baseline; gap:8px; }
.contact-copy > span { font-size:10px; letter-spacing:.07em; }
.contact-copy strong { font:15px/1.2 var(--display); }
.sd-contact-bar a:hover strong { text-decoration:underline; text-underline-offset:3px; }
.sd-contact-bar a:focus-visible { outline:2px solid currentColor; outline-offset:2px; }
.trip-desk {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px 12px;
  max-width:290px;
  margin-top:18px;
  padding:11px 13px;
  border:1px dashed #11283b82;
  border-radius:4px 14px 4px 14px;
  background:#f8f1df68;
}
.trip-desk h3 {
  grid-column:1/-1;
  font:700 11px/1.3 var(--body);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.trip-desk p { display:flex; align-items:center; gap:4px; font-size:13px; }
.trip-desk:target, .trip-desk:focus { outline:2px solid var(--navy); outline-offset:4px; }
@media (max-width:600px) {
  .sd-contact-bar { justify-content:space-between; gap:5px; padding:4px 15px; }
  .sd-contact-bar a { min-height:44px; gap:5px; }
  .contact-copy { flex-direction:column; gap:2px; }
  .contact-copy > span { font-size:9px; }
  .contact-copy strong { font-size:14px; }
}
@media (forced-colors:active) {
  .trip-desk { border-color:CanvasText; }
  .trip-desk:target, .trip-desk:focus { outline-color:Highlight; }
}