/* Hibbitz — single stylesheet.
   All colours, type sizes and spacing steps are custom properties here.
   No hardcoded hex below this block. */

:root {
  /* palette — see docs/design-brief.md */
  --hb-bg-ice: #E9FDFE;
  --hb-bg-mint: #B9FFEB;
  --hb-surface: #FFFFFF;
  --hb-ink: #365B6D;
  --hb-forest: #133F31;
  --hb-accent: #093FB4;
  --hb-teal: #01807D;      /* decoration/large display only — 4.23:1 on mint bg */
  --hb-mint: #7BDBC0;      /* decoration only, never text */

  /* charm-only extras */
  --hb-charm-red: #EF4B54;
  --hb-charm-yellow: #FFC94B;
  --hb-charm-tan: #F2D2A9;

  /* type. Font files (Baloo 2, Atkinson Hyperlegible) not yet self-hosted —
     awaiting go-ahead to fetch; stacks fall back to system faces until then. */
  --hb-font-display: "Baloo 2", ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --hb-font-body: "Atkinson Hyperlegible", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --hb-fs-hero: clamp(2.25rem, 5vw + 1rem, 3.25rem);
  --hb-fs-number: clamp(4.5rem, 10vw, 7rem);
  --hb-fs-h2: clamp(1.625rem, 2vw + 1rem, 2.125rem);
  --hb-fs-h3: clamp(1.25rem, 1vw + 1rem, 1.375rem);
  --hb-fs-body: clamp(1.0625rem, 0.3vw + 1rem, 1.125rem);
  --hb-fs-button: 1.125rem;
  --hb-fs-small: 0.875rem;

  /* spacing scale */
  --hb-space-1: 0.25rem;
  --hb-space-2: 0.5rem;
  --hb-space-3: 0.75rem;
  --hb-space-4: 1rem;
  --hb-space-5: 1.5rem;
  --hb-space-6: 2rem;
  --hb-space-7: 3rem;
  --hb-space-8: 4rem;

  --hb-radius: 16px;
  --hb-radius-pill: 999px;

  /* forest at 82%: scrim behind white text overlaid on photos */
  --hb-scrim: rgba(19, 63, 49, 0.82);

  /* background pattern: four-lobed rounded cross redrawn from the deck
     reference (docs/reference/pattern-reference.png), 145px square repeat.
     Stroke #D2F0F1 on ice; #A7F2DF is the same per-channel tint ratio
     applied to the mint background. Decorative only. AA worst case is
     ink on the stroke colour itself: 6.08 (ice) / 5.71 (mint). */
  --hb-pattern-size: 216px;
  --hb-pattern-ice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-72.5 -72.5 145 145'%3E%3Cpath d='M21.4 -42.0A20.6 20.6 0 1 1 42.0 -21.4A21.4 21.4 0 0 0 42.0 21.4A20.6 20.6 0 1 1 21.4 42.0A21.4 21.4 0 0 0 -21.4 42.0A20.6 20.6 0 1 1 -42.0 21.4A21.4 21.4 0 0 0 -42.0 -21.4A20.6 20.6 0 1 1 -21.4 -42.0A21.4 21.4 0 0 0 21.4 -42.0Z' fill='none' stroke='%23D2F0F1' stroke-width='4.5'/%3E%3C/svg%3E");
  --hb-pattern-mint: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-72.5 -72.5 145 145'%3E%3Cpath d='M21.4 -42.0A20.6 20.6 0 1 1 42.0 -21.4A21.4 21.4 0 0 0 42.0 21.4A20.6 20.6 0 1 1 21.4 42.0A21.4 21.4 0 0 0 -21.4 42.0A20.6 20.6 0 1 1 -42.0 21.4A21.4 21.4 0 0 0 -42.0 -21.4A20.6 20.6 0 1 1 -21.4 -42.0A21.4 21.4 0 0 0 21.4 -42.0Z' fill='none' stroke='%23A7F2DF' stroke-width='4.5'/%3E%3C/svg%3E");
  /* same tint ratio applied to the accent blue, for the Get One band.
     White text on it: 9.3:1 */
  --hb-pattern-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-72.5 -72.5 145 145'%3E%3Cpath d='M21.4 -42.0A20.6 20.6 0 1 1 42.0 -21.4A21.4 21.4 0 0 0 42.0 21.4A20.6 20.6 0 1 1 21.4 42.0A21.4 21.4 0 0 0 -21.4 42.0A20.6 20.6 0 1 1 -42.0 21.4A21.4 21.4 0 0 0 -42.0 -21.4A20.6 20.6 0 1 1 -21.4 -42.0A21.4 21.4 0 0 0 21.4 -42.0Z' fill='none' stroke='%23083CAB' stroke-width='4.5'/%3E%3C/svg%3E");
}

/* base ------------------------------------------------------------------ */

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--hb-bg-ice);
  color: var(--hb-ink);
  font-family: var(--hb-font-body);
  font-size: var(--hb-fs-body);
  line-height: 1.65;
}

img { display: block; max-width: 100%; height: auto; }

:focus-visible {
  outline: 3px solid var(--hb-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.hb-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* layout ---------------------------------------------------------------- */

/* the one grid: every section's content lives in this container.
   Full-bleed backgrounds go on the section, content in here. */
.hb-container {
  max-width: 68rem;
  margin: 0 auto;
  padding-inline: var(--hb-space-5);
}

/* header ---------------------------------------------------------------- */

.hb-header {
  padding: var(--hb-space-4) 0;
}

/* shows the aid + wordmark, hides the lockup's strapline (bottom ~38%),
   which is unreadable at header size */
.hb-header__logo {
  width: 240px;
  height: 84px;
  overflow: hidden;
}

/* CTA — one button style, one destination, reused down the page --------- */

.hb-cta {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: var(--hb-space-3) var(--hb-space-6);
  border-radius: var(--hb-radius-pill);
  background: var(--hb-accent);
  color: var(--hb-surface);
  font-family: var(--hb-font-display);
  font-size: var(--hb-fs-button);
  font-weight: 600;
  text-decoration: none;
}

.hb-cta:hover { background: var(--hb-forest); }

.hb-cta:focus-visible { border-radius: var(--hb-radius-pill); }

/* hero ------------------------------------------------------------------ */

.hb-hero {
  /* full-bleed so the pattern runs to the viewport edge; content is
     constrained by the container. A solid ice wash keeps the pattern out
     from under the copy block (top of the section on mobile). */
  padding: var(--hb-space-6) 0 var(--hb-space-8);
  background-image:
    linear-gradient(180deg, var(--hb-bg-ice) 0%, var(--hb-bg-ice) 58%, transparent 82%),
    var(--hb-pattern-ice);
  background-size: auto, var(--hb-pattern-size);
}

.hb-hero__inner {
  display: grid;
  gap: var(--hb-space-6);
}

.hb-hero__strapline {
  margin: 0 0 var(--hb-space-4);
  font-family: var(--hb-font-display);
  font-size: var(--hb-fs-small);
  font-weight: 600;
  letter-spacing: 0.35em;
}

.hb-hero__uglyph {
  display: inline-block;
  width: 0.9em;
  height: 1.05em;
  vertical-align: -0.15em;
  margin-right: 0.35em; /* optically restores the letterspace the svg eats */
}

.hb-hero__headline {
  margin: 0 0 var(--hb-space-4);
  font-family: var(--hb-font-display);
  font-size: var(--hb-fs-hero);
  font-weight: 800;
  line-height: 1.1;
}

.hb-hero__subhead {
  margin: 0 0 var(--hb-space-5);
  max-width: 34rem;
}

.hb-hero__hint {
  margin: var(--hb-space-3) 0 0;
  max-width: 30rem;
  font-size: var(--hb-fs-small);
}

.hb-hero__stage {
  display: grid;
  justify-items: center;
  gap: var(--hb-space-4);
}

.hb-hero__aid {
  width: min(64vw, 280px);
  height: auto;
}

/* JS adds this class: tapping the aid also advances the charm (pointer
   bonus only — the picker buttons are the keyboard/AT path). */
.hb-hero--live .hb-hero__aid { cursor: pointer; }

.hb-hero__picker {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--hb-space-1); /* six 48px buttons must fit one row at 375px */
}

@media (min-width: 480px) {
  .hb-hero__picker { gap: var(--hb-space-2); }
}

.hb-hero__charm-btn {
  width: 48px;
  height: 48px;
  padding: 5px;
  border: 2px solid transparent;
  border-radius: 12px;
  background: var(--hb-surface);
  cursor: pointer;
}

.hb-hero__charm-btn svg { width: 100%; height: 100%; display: block; }

.hb-hero__charm-btn:hover { border-color: var(--hb-mint); }

.hb-hero__charm-btn[aria-pressed="true"] { border-color: var(--hb-accent); }

/* the number ------------------------------------------------------------ */

.hb-number {
  /* the dark moment early in the page: ink, generous room */
  background: var(--hb-ink);
  color: var(--hb-bg-ice);
  padding: var(--hb-space-8) 0;
}

.hb-number__inner {
  text-align: center;
}

.hb-number__sentence {
  margin: 0 auto;
  max-width: 46rem;
  font-size: var(--hb-fs-h3);
  line-height: 1.45;
}

.hb-number__figure {
  /* still inline in the sentence, not a stat block, but it carries the
     line. bg-mint on ink: 6.46 */
  font-family: var(--hb-font-display);
  font-size: clamp(2.75rem, 4vw + 1.25rem, 4rem);
  font-weight: 800;
  line-height: 1;
  color: var(--hb-bg-mint);
}

.hb-number__note {
  margin: var(--hb-space-4) 0 0;
}

/* what a hibbitz is ------------------------------------------------------ */

.hb-what {
  padding: var(--hb-space-8) 0;
}

.hb-what__inner {
  display: grid;
  gap: var(--hb-space-6);
}

.hb-what__title,
.hb-story__title,
.hb-kids__title,
.hb-shepherd__title,
.hb-news__title,
.hb-get__title {
  margin: 0 0 var(--hb-space-4);
  font-family: var(--hb-font-display);
  font-size: var(--hb-fs-h2);
  font-weight: 800;
  line-height: 1.15;
}

/* section headings pick up colour so the page isn't one ink ladder.
   Accent on ice: 8.37. Teal on mint is large-text only: 4.23 vs the 3.0
   AA floor for text this size. */
.hb-what__title { color: var(--hb-accent); }

.hb-shepherd__title { color: var(--hb-teal); }

.hb-what__text { max-width: 55ch; }

.hb-what__text p { margin: 0; }

.hb-what__photo {
  /* the range gets real space: crops the tall source to 4:5 */
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: calc(var(--hb-radius) / 2);
}

@media (min-width: 768px) {
  .hb-what__inner {
    grid-template-columns: minmax(0, 50ch) 1fr;
    column-gap: var(--hb-space-8);
    align-items: center;
  }
}

/* divider: the strapline, quietly repeated ------------------------------- */

.hb-divider {
  text-align: center;
  padding: 0 var(--hb-space-5) var(--hb-space-6);
  font-family: var(--hb-font-display);
  font-size: var(--hb-fs-small);
  font-weight: 600;
  letter-spacing: 0.35em;
  color: var(--hb-ink);
}

.hb-divider__uglyph {
  display: inline-block;
  width: 0.9em;
  height: 1.05em;
  vertical-align: -0.15em;
  margin-right: 0.35em;
}

/* eden's story ----------------------------------------------------------- */

.hb-story {
  padding: 0 0 var(--hb-space-8);
}

.hb-story__card {
  background: var(--hb-surface);
  border-radius: var(--hb-radius);
  padding: var(--hb-space-6) var(--hb-space-5);
}

.hb-story__photos {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: var(--hb-space-4);
  margin-bottom: var(--hb-space-5);
}

.hb-story__photo {
  /* width-driven sizing throughout: Safari lays out height-set/width-auto
     images in flex at their natural file width, which overflows the page */
  width: 107px;
  height: auto;
  border-radius: calc(var(--hb-radius) / 2);
}

.hb-story__photo--founder {
  /* source is a full-length 9:16 portrait; crop to 3:4 on head and tee
     so it pairs with the baby photo instead of dominating */
  width: 143px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 14%;
}

.hb-story__text { max-width: 55ch; margin: 0 auto; }

.hb-story__text p { margin: 0 0 var(--hb-space-4); }

.hb-story__byline {
  font-family: var(--hb-font-display);
  font-weight: 600;
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .hb-story__card {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--hb-space-7);
    align-items: center;
    padding: var(--hb-space-7) var(--hb-space-6);
  }

  .hb-story__title { grid-column: 1 / -1; }

  .hb-story__photos { margin-bottom: 0; }

  .hb-story__photo { width: 180px; }

  .hb-story__photo--founder { width: 240px; }

  .hb-story__text { margin: 0; }
}

/* on real ears ----------------------------------------------------------- */

.hb-kids {
  padding: 0 0 var(--hb-space-8);
}

/* full-bleed photo band, copy overlaid on a scrim at the bottom */
.hb-kids__banner { position: relative; }

.hb-kids__banner-photo {
  display: block;
  width: 100%;
  height: min(70vh, 440px);
  object-fit: cover;
  object-position: 60% 28%; /* keeps the ear and charm in frame */
}

.hb-kids__banner-copy {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--hb-space-7) 0 var(--hb-space-5);
  background: linear-gradient(180deg, transparent, var(--hb-scrim) 60%);
  color: var(--hb-surface);
}

.hb-kids__title {
  color: var(--hb-surface);
  margin-bottom: var(--hb-space-1);
}

.hb-kids__line { margin: 0; }

.hb-kids__gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--hb-space-4);
  margin-top: var(--hb-space-5);
}

.hb-kids__tile {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: calc(var(--hb-radius) / 2);
}

@media (min-width: 768px) {
  .hb-kids__banner-photo {
    height: min(72vh, 600px);
    /* the ear and charm sit at 36-61% of the source's height; 48% keeps
       them fully in frame across desktop widths */
    object-position: 60% 48%;
  }

  .hb-kids__gallery { grid-template-columns: repeat(4, 1fr); }
}

/* the shepherd centre ----------------------------------------------------- */

.hb-shepherd {
  background: var(--hb-bg-mint);
  padding: var(--hb-space-7) 0;
}

.hb-shepherd__inner {
  display: grid;
  gap: var(--hb-space-6);
}

/* third-party mark, straight on the mint with clear space from margins.
   Never recoloured, restyled or cropped. 272px keeps the slogan legible
   (200px minimum). */
.hb-shepherd__logo {
  width: 272px;
  height: auto;
  margin: 0 0 var(--hb-space-5);
}

.hb-shepherd__text p { margin: 0 0 var(--hb-space-4); max-width: 55ch; }

.hb-shepherd__box {
  margin: 0;
  text-align: center; /* centres the caption on the image, which fills it */
}

.hb-shepherd__box img {
  width: 100%;
  height: auto;
  border-radius: calc(var(--hb-radius) / 2);
}

.hb-shepherd__caption {
  margin-top: var(--hb-space-3);
  font-size: var(--hb-fs-small);
}

@media (min-width: 768px) {
  .hb-shepherd__inner {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    column-gap: var(--hb-space-7);
  }
}

/* what's next ------------------------------------------------------------- */

.hb-news {
  padding: 0 0 var(--hb-space-8);
}

.hb-news__inner {
  display: grid;
  gap: var(--hb-space-5);
  justify-items: start;
}

.hb-news__photo {
  width: min(56vw, 220px); /* width-driven; see .hb-story__photo note */
  height: auto;
  border-radius: calc(var(--hb-radius) / 2);
}

.hb-news__text { max-width: 55ch; }

.hb-news__text p { margin: 0 0 var(--hb-space-4); }

.hb-news__text p:last-child { margin-bottom: 0; }

.hb-news__press { font-size: var(--hb-fs-small); }

@media (min-width: 768px) {
  .hb-news__inner {
    grid-template-columns: auto 1fr;
    column-gap: var(--hb-space-7);
    align-items: center;
  }
}

/* get one ----------------------------------------------------------------- */

.hb-get {
  background-color: var(--hb-accent);
  background-image: var(--hb-pattern-accent);
  background-size: var(--hb-pattern-size);
  color: var(--hb-surface);
  padding: var(--hb-space-8) 0;
  text-align: center;
}

.hb-cta--inverse {
  background: var(--hb-surface);
  color: var(--hb-accent);
}

.hb-cta--inverse:hover {
  background: var(--hb-bg-ice);
  color: var(--hb-accent);
}

/* the global accent focus ring vanishes on the accent band */
.hb-get :focus-visible { outline-color: var(--hb-surface); }

.hb-get__hint {
  margin: var(--hb-space-4) 0 0;
  font-size: var(--hb-fs-small);
}

.hb-get__stockist {
  margin: var(--hb-space-6) auto 0;
  max-width: 38rem;
  font-size: var(--hb-fs-h3);
  font-family: var(--hb-font-display);
  font-weight: 600;
  line-height: 1.4;
}

/* footer ------------------------------------------------------------------ */

.hb-footer {
  background: var(--hb-ink);
  color: var(--hb-bg-ice);
  padding: var(--hb-space-7) 0;
}

.hb-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--hb-space-5);
}

.hb-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--hb-space-3);
  color: var(--hb-bg-ice);
}

.hb-footer__mark { width: 34px; height: 52px; }

.hb-footer__wordmark {
  font-family: var(--hb-font-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.hb-footer__contact { margin: 0; }

.hb-footer__link {
  color: var(--hb-bg-ice);
  font-weight: 700;
}

.hb-footer__link:focus-visible { outline-color: var(--hb-bg-ice); }

/* motion ----------------------------------------------------------------
   Base experience above is fully static: picking a charm swaps it
   instantly. Motion is layered on only for people who haven't asked for
   reduced motion. hero.js checks the same media query before auto-cycling. */

@media (prefers-reduced-motion: no-preference) {
  .hb-hero__charm { transform-box: fill-box; transform-origin: center; }

  .hb-hero__charm--in { animation: hb-clip-on 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3); }

  .hb-hero__charm--out { animation: hb-pop-off 0.15s ease-in forwards; }

  @keyframes hb-clip-on {
    from { transform: translateY(-26px) scale(0.85); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
  }

  @keyframes hb-pop-off {
    to { transform: translateY(-14px) scale(0.85); opacity: 0; }
  }
}

/* desktop ---------------------------------------------------------------- */

@media (min-width: 768px) {
  .hb-hero {
    padding-top: var(--hb-space-7);
    /* copy is the left half of the centred column, so it always ends at
       the viewport midline: solid wash to 50%, fade past it */
    background-image:
      linear-gradient(90deg, var(--hb-bg-ice) 0%, var(--hb-bg-ice) 50%, transparent 70%),
      var(--hb-pattern-ice);
  }

  .hb-hero__inner {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  .hb-hero__aid { width: min(32vw, 360px); }

  .hb-hero__charm-btn { width: 56px; height: 56px; }
}