/* ---------------------------------------------------------------------------
   chrome.css: the parts on every page. The site container, the header on
   the opener's photo, the Explore menu, and the logbook footer with the
   Hannah Design Co. rail.

   Breakpoints are container widths of `.site`, not the window, so the
   panel's Read Mode and Narrow Column move them too:
     820px  the menu's visit card moves under the words
     700px  the logo gets smaller and the phone button leaves the header
   --------------------------------------------------------------------------- */

.site { container: site / inline-size; position: relative; min-height: 100vh; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- Header: on the photo, the logo hanging from a branch ---------------- */
.site-header { position: absolute; inset: 0 0 auto; z-index: 20; color: var(--white); }
/* A page that does not start with an opener gets a dark band to sit on,
   or the white words would vanish into the pale page. */
.site:not(:has(main > :is(.hero, .page-head):first-child)) .site-header { position: relative; background: var(--canopy); padding-bottom: 12px; }
.header-row { display: flex; align-items: flex-start; gap: 14px; padding-block: 16px; }
.hang { padding-top: 14px; }
/* The branch runs in from the left edge of the page, whatever the width. */
.limb {
  position: absolute;
  left: 0;
  top: 22px;
  width: calc(max(var(--gutter), (100cqw - var(--measure)) / 2) + 240px);
  height: 12px;
  border-radius: 0 8px 8px 0;
  background: linear-gradient(180deg, #8A603F, var(--bark) 55%, var(--bark-dark));
  box-shadow: 0 3px 6px rgba(0, 0, 0, .35);
}
.limb svg { position: absolute; width: 30px; height: 30px; color: var(--fern); }
.limb svg:nth-child(1) { right: 30px; top: -24px; rotate: -30deg; }
.limb svg:nth-child(2) { right: 84px; top: -20px; rotate: -60deg; width: 24px; height: 24px; color: var(--moss); }
.limb svg:nth-child(3) { right: -14px; top: -12px; rotate: 10deg; width: 26px; height: 26px; }
.limb svg:nth-child(4) { right: 140px; top: 2px; rotate: 160deg; color: var(--leaf); }
.brand { position: relative; display: block; margin-left: 26px; padding-top: 26px; transform-origin: 50% 0; transition: transform .5s; }
.brand::before, .brand::after { content: ""; position: absolute; top: 0; width: 3px; height: 28px; border-radius: 2px; background: #D8C7A2; }
.brand::before { left: 22%; }
.brand::after { right: 22%; }
.brand:hover, .brand:focus-visible { transform: rotate(-2.5deg); }
.brand-card { display: inline-flex; padding: 8px 12px; border-radius: 16px; background: var(--white); box-shadow: 0 10px 24px rgba(0, 0, 0, .3); }
.brand-card img { width: auto; height: 78px; }
.header-end { display: flex; align-items: center; gap: 12px; margin: 26px 0 0 auto; }
.call { min-height: 46px; padding: 10px 18px; font-size: 16px; }
.call-short { display: none; }

.explore {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 20px;
  border: 2px solid rgba(255, 255, 255, .6);
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-weight: 800;
  font-size: 16px;
  text-decoration: none;
  transition: background .2s, border-color .2s;
}
.explore:hover, .explore:focus-visible { background: rgba(255, 255, 255, .24); border-color: var(--white); }
.explore-leaf { width: 20px; height: 20px; color: var(--moss); }

@container site (max-width: 700px) {
  .limb { width: calc(var(--gutter) + 170px); }
  .brand { margin-left: 10px; }
  .brand-card img { height: 50px; }
  .site-header .call { display: none; }
}

/* ---- The Explore menu: the whole jungle, with a visit card --------------
   Hidden until Explore is pressed. Without the script it shows when it is
   the page's target, which is what the Explore link points at. */
.jungle {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: auto;
  padding-block: 20px 44px;
  background: radial-gradient(ellipse at 70% 15%, #1F6B48, var(--canopy) 55%, #061A13);
  color: var(--white);
}
.jungle:target, .jungle.is-open { display: block; }
.menu-open { overflow: hidden; }
.jungle-leaf { position: absolute; pointer-events: none; color: var(--leaf); opacity: .28; }
.jungle-leaf--a { right: -90px; top: -60px; width: 420px; height: 420px; rotate: 200deg; }
.jungle-leaf--b { left: -40px; bottom: -60px; width: 260px; height: 260px; rotate: 20deg; }
.jungle-bar, .jungle-main { position: relative; max-width: var(--measure); margin-inline: auto; }
.jungle-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: clamp(20px, 4cqw, 44px); }
.jungle-bar .brand-card img { height: 56px; }
.jungle-close { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 2px solid var(--white); border-radius: 999px; font-weight: 800; text-decoration: none; }
.jungle-close svg { width: 18px; height: 18px; }
.jungle-main { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 44px; align-items: start; }
.jungle-words a {
  display: block;
  padding: 4px 0;
  font: 400 clamp(34px, 5.4cqw, 76px) / 1.04 var(--display);
  text-transform: uppercase;
  text-decoration: none;
  transition: color .2s, transform .2s;
}
.jungle-words a:hover, .jungle-words a:focus-visible { color: var(--sun); transform: translateX(8px); }
.jungle-words a[aria-current="page"] { color: var(--sun); }
.jungle-rooms { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.jungle-rooms a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 2px var(--c); font-weight: 700; text-decoration: none; transition: background .2s; }
.jungle-rooms a:hover { background: rgba(255, 255, 255, .2); }
.jungle-rooms img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.visit-card { padding: 26px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 26px; background: rgba(255, 255, 255, .08); }
.visit-card-title { margin-bottom: 14px; color: var(--sun); font: 400 20px var(--display); text-transform: uppercase; }
.visit-facts li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; padding: 7px 0; }
.visit-facts svg { width: 20px; height: 20px; margin-top: 2px; color: var(--moss); }
.visit-facts .is-today { margin-inline: -8px; padding-inline: 8px; border-radius: 10px; background: rgba(142, 230, 174, .16); }
.visit-card .btn { margin-top: 14px; }
@container site (max-width: 820px) {
  .jungle-main { grid-template-columns: 1fr; }
}

/* ---- Facebook and Instagram, each with its name ------------------------- */
.follow { display: grid; gap: 10px; margin-top: 22px; }
.follow-title { font-size: 12px; letter-spacing: .1em; }
.visit-card .follow-title { color: #8EE6AE; }
.social-row { display: flex; flex-wrap: wrap; gap: 10px; }
.social {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 12px;
  border: 2px solid currentColor;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .2s, background .2s;
}
.social svg { width: 20px; height: 20px; fill: currentColor; }
.social:hover { transform: translateY(-3px); background: rgba(127, 127, 127, .15); }

/* ---- Footer: the ranger's logbook --------------------------------------- */
.site-footer { position: relative; color: #E6F1E9; }
.footer-moss { display: block; width: 100%; height: 80px; }
.footer-ground { background: var(--soil); }
.desk {
  padding: clamp(30px, 4cqw, 56px) clamp(16px, 3cqw, 40px) clamp(40px, 5cqw, 64px);
  border-radius: 16px 16px 0 0;
  background: repeating-linear-gradient(92deg, #7A4D2E 0 26px, #704529 26px 30px, #85563A 30px 58px);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .35);
}
.book { position: relative; display: grid; grid-template-columns: 1fr 1fr; max-width: 1040px; margin-inline: auto; padding: 10px; border-radius: 10px; background: var(--bark-dark); box-shadow: 0 26px 40px rgba(0, 0, 0, .45); }
.book-page {
  position: relative;
  padding: 28px clamp(18px, 3cqw, 36px) 30px;
  background: var(--white) repeating-linear-gradient(transparent 0 31px, #DCE7F1 31px 32px) 0 58px;
  color: var(--forest-ink);
}
.book-page:first-child { border-radius: 6px 0 0 6px; box-shadow: inset -22px 0 24px -18px rgba(0, 0, 0, .35); }
.book-page:nth-child(2) { border-radius: 0 6px 6px 0; box-shadow: inset 22px 0 24px -18px rgba(0, 0, 0, .35); }
.book-title { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font: 400 18px / 32px var(--display); text-transform: uppercase; }
.book-title svg { width: 20px; height: 20px; color: var(--leaf); }
.book-facts li { display: grid; grid-template-columns: 22px minmax(84px, auto) 1fr; gap: 10px; align-items: start; line-height: 32px; }
.book-facts svg { width: 18px; height: 18px; margin-top: 7px; color: var(--leaf); }
.book-facts a { font-weight: 700; }
.book-facts .is-today { margin-inline: -6px; padding-inline: 6px; border-radius: 6px; background: #E3F5E9; }
.book-page .btn { margin-top: 16px; }
.book-check li { line-height: 32px; }
.book-check a { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; text-decoration: none; }
.book-check .box { display: grid; place-items: center; width: 20px; height: 20px; border: 2.5px solid var(--forest-ink); border-radius: 5px; background: var(--white); transition: background .2s; }
.book-check .box svg { width: 14px; height: 14px; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .2s; }
.book-check a:hover .box, .book-check a:focus-visible .box { background: var(--green); }
.book-check a:hover .box svg, .book-check a:focus-visible .box svg { opacity: 1; transform: none; }
.book-check a:hover span:last-child { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.book-blurb { max-width: 34ch; margin-top: 16px; line-height: 32px; }
.stamp {
  position: absolute;
  right: 26px;
  bottom: 26px;
  display: grid;
  place-items: center;
  width: 116px;
  height: 116px;
  border: 3px solid var(--leaf);
  border-radius: 50%;
  color: var(--leaf);
  font: 400 12px / 1.2 var(--display);
  text-align: center;
  text-transform: uppercase;
  rotate: -12deg;
  opacity: .8;
  transition: rotate .3s, scale .3s;
}
.book-page:hover .stamp { rotate: -3deg; scale: 1.05; }
.ribbon { position: absolute; right: 7%; top: -8px; z-index: 2; width: 26px; height: 120px; background: var(--pink); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%); }
@container site (max-width: 860px) {
  .book { grid-template-columns: 1fr; }
  .book-page:first-child, .book-page:nth-child(2) { border-radius: 6px; box-shadow: none; }
  .book-page + .book-page { margin-top: 10px; }
  .ribbon { display: none; }
}
@container site (max-width: 520px) {
  .stamp { position: static; margin-top: 16px; rotate: 0deg; }
  .book-facts li { grid-template-columns: 22px 1fr; column-gap: 10px; row-gap: 0; }
  .book-facts li span { grid-column: 2; }
}

/* ---- The credit rail ---------------------------------------------------
   The kit owns the rail and the lockup; only the colors are set here, and
   the little wooden sign behind the lockup with its sunflower. Pointed at,
   the butterfly flies a figure eight over the words and back. On a phone
   the copyright goes above, so the lockup keeps its one line. */
.site-footer .hdc-credit-bar { align-items: center; padding-block: 28px 30px; border-top-color: rgba(255, 255, 255, .14); }
.site-footer .hdc-credit-bar__legal { color: #C4D2C9; font-size: 13px; }
.credit-sign {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 16px 28px 16px 48px;
  border: 3px solid var(--bark-dark);
  border-radius: 10px;
  background: repeating-linear-gradient(176deg, #7A4D2E 0 7px, #6E4428 7px 10px, #835534 10px 17px);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .15), 0 8px 16px rgba(0, 0, 0, .4);
  transition: transform .25s;
}
.credit-sign::before, .credit-sign::after { content: ""; position: absolute; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: #C9C2B6; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4); }
.credit-sign::before { top: 8px; }
.credit-sign::after { bottom: 8px; }
.credit-sign:hover, .credit-sign:focus-within { transform: rotate(-1.5deg); }
.credit-sign .hdc-credit { position: relative; z-index: 2; white-space: nowrap; }
.credit-flower { position: absolute; left: 4px; top: 50%; z-index: 3; width: 40px; height: 40px; margin-top: -20px; pointer-events: none; }
.credit-fly { position: absolute; left: 16px; top: -22px; z-index: 4; width: 26px; height: 26px; pointer-events: none; }
.credit-fly svg { width: 100%; height: 100%; }
.credit-sign:hover .credit-fly, .credit-sign:focus-within .credit-fly { animation: figure-eight 3s ease-in-out infinite; }
.credit-sign:hover .credit-fly svg, .credit-sign:focus-within .credit-fly svg { animation: flap .18s ease-in-out infinite alternate; }
@keyframes flap { to { transform: scaleX(.3); } }
@keyframes figure-eight { 0%, 100% { translate: 0 0; } 20% { translate: 60px -16px; } 40% { translate: 130px 0; } 60% { translate: 60px 16px; } 80% { translate: 0 -8px; } }
@container site (max-width: 520px) {
  .site-footer .hdc-credit-bar { grid-template-columns: 1fr; gap: 18px; }
  .site-footer .hdc-credit-wrap { justify-self: end; margin-right: 12px; }
}

/* The resting state of everything above that moves, under both switches:
   base.css already stops every transition and animation; these keep the
   sign, the logo and the stamp still when pointed at. */
@media (prefers-reduced-motion: reduce) {
  .brand:hover, .brand:focus-visible, .credit-sign:hover, .credit-sign:focus-within, .social:hover, .jungle-words a:hover { transform: none; }
  .book-page:hover .stamp { rotate: -12deg; scale: 1; }
}
html[data-a11y-stop-anim] :is(.brand, .credit-sign, .social, .jungle-words a):is(:hover, :focus-visible, :focus-within) { transform: none; }
html[data-a11y-stop-anim] .book-page:hover .stamp { rotate: -12deg; scale: 1; }