/*
  Dr.Lori - compact spacing + adjustable hero sticker
  This stylesheet is loaded AFTER styles.css and viewport.css.
  It overrides the older forced full-screen spacing while keeping the artwork,
  colour palette, scrapbook grid, navigation and booking interactions unchanged.

  To make the hero sticker bigger or move it, edit the CSS variables directly
  in index.html on <div class="hero-art" ...>. No CSS knowledge is required.
*/

/* Keep the tiny overshoot of rotated scrapbook stickers from creating sideways scroll. */
html, body { overflow-x: clip; }

/* The previous viewport-height rule created large empty bands on tall screens.
   Keep all sections naturally sized to their CONTENT instead. */
.hero {
  height: auto;
  min-height: 0;
}
.hero-grid {
  height: auto;
  min-height: 0;
  padding-block: clamp(18px, 2.8vw, 36px) clamp(14px, 2vw, 24px);
}
/* Keep the author's intended “MAD MAGIC.” on one line at wider heights. */
@media (min-width: 1025px) and (min-height: 780px) {
  .hero h1 { font-size: clamp(76px, 5.9vw, 88px); }
}
.hero-copy {
  position: relative;
  z-index: 4; /* Text stays legible when the sticker overlaps its blank edges. */
}
.hero-art {
  height: auto;
  min-height: 0;
  margin-right: -10px;
}
.hero-sticker {
  /* The CSS variables below come from the HTML hero-art element. */
  width: min(var(--sticker-desktop-width, 1100px), 210%);
  height: auto; /* IMPORTANT: prevents squishing/stretching. */
  min-height: 0;
  max-width: none;
  max-height: none;
  flex: 0 0 auto;
  object-fit: contain;
  transform: translate(var(--sticker-x, -70px), var(--sticker-y, -4px));
}
.hero-scroller {
  position: relative;
  bottom: auto;
  left: auto;
  transform: none;
  justify-content: center;
  margin: -2px auto 13px;
}

/* Close up the generous padding that used to separate the sections. */
.moments-section { padding-top: clamp(30px, 3.5vw, 48px); }
.section-heading { margin-bottom: clamp(18px, 2.4vw, 25px); }
.archive-note { margin-top: clamp(16px, 2vw, 24px); margin-bottom: clamp(19px, 2.5vw, 29px); }
#prices {
  min-height: 0;
  padding-top: clamp(22px, 2.7vw, 32px);
  padding-bottom: clamp(17px, 2.5vw, 29px);
}
.prices-top { margin-bottom: clamp(12px, 1.8vw, 20px); }
.price-disclaimer { margin-bottom: 0; }
.book-section {
  min-height: 0;
  padding-top: clamp(26px, 3.2vw, 42px);
  padding-bottom: clamp(22px, 3vw, 38px);
}
.book-header { margin-bottom: clamp(13px, 2vw, 22px); }

/* On medium screens, don't let the right-hand artwork become a fixed-height box. */
@media (min-width: 681px) and (max-width: 1024px) {
  .hero-grid { height: auto; min-height: 0; }
  .hero-art { height: auto; min-height: 0; }
  .hero-sticker { width: min(var(--sticker-desktop-width, 1100px), 202%); }
}

/* The original layout stacks on tablets and phones. Keep the sticker big but
   use its natural aspect ratio, rather than squeezing it into a short viewport. */
@media (max-width: 820px) {
  .hero-grid { height: auto; min-height: 0; gap: 6px; padding-block: 22px 14px; }
  .hero-art { height: auto; min-height: 0; flex: 0 0 auto; width: 100%; margin: 4px -10px 0; }
  .hero-sticker {
    width: var(--sticker-mobile-width, 155%);
    height: auto;
    max-width: none;
    max-height: none;
    transform: translate(var(--sticker-mobile-x, -3%), var(--sticker-mobile-y, 0px));
  }
  .hero-scroller { margin-bottom: 12px; }
  .moments-section { padding-top: 30px; }
  .section-heading { margin-bottom: 20px; }
  .archive-note { margin-top: 17px; margin-bottom: 20px; }
  #prices { padding-top: 22px; padding-bottom: 20px; }
  .prices-top { margin-bottom: 14px; }
  .book-section { padding-block: 28px; }
  .book-header { margin-bottom: 14px; }
}

@media (max-width: 680px) {
  .hero-grid { padding: 17px 0 10px; justify-content: initial; }
  .hero-art { margin-top: 4px; }
  .hero-scroller { margin: 0 auto 11px; }
  .moments-section { padding-top: 25px; }
  .section-heading { margin-bottom: 15px; }
  .archive-note { margin: 15px auto 17px; }
  #prices { padding-top: 15px; padding-bottom: 14px; }
  .prices-top { margin-bottom: 10px; }
  .book-section { padding: 22px 0 26px; }
  .book-header { margin-bottom: 11px; }
}


/* =============================================================
   TOP-LEFT HEADER LOGO
   Edit image HEIGHT here to adjust the header logo size.
   Its width stays AUTO so the artwork keeps its proportions.
   No other page elements or brand styling were changed.
   ============================================================= */
.site-header .brand.brand-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  flex: 0 0 auto;
  min-width: 0;
}
.site-header .brand.brand-logo img {
  display: block;
  width: auto;
  height: 78px; /* Desktop logo size - increase/decrease here */
  max-width: 100%;
  object-fit: contain;
}
@media (min-width: 821px) and (max-width: 1100px) {
  .site-header .brand.brand-logo img { height: 66px; }
}
@media (max-width: 820px) {
  .site-header .brand.brand-logo img { height: 64px; } /* Mobile */
}