/* ==========================================================================
   Happy Puppy Social — holding page
   Author stylesheet. Loaded after the Bootstrap 5 grid layer so it wins on
   conflicts. Bootstrap supplies the display / flex / text utilities used in
   the markup (d-flex, flex-column, align-items-center, text-center, and the
   d-lg-* responsive variants); this file never repeats them.

   Every size below is traced from the supplied desktop (1440x899) and mobile
   (375x1280) designs. On phones each value is a fixed percentage of the 375px
   canvas, so the mobile design reproduces exactly at any handset width and its
   hand-set line breaks hold; each one then stops growing at its desktop figure
   from the style guide.

   Contents
   0.  Metric-matched fallback
   1.  Design tokens
   2.  Reset / base
   3.  Typography scale
   4.  Buttons
   5.  Hero shell and backdrop
   6.  Header / social links
   7.  Brand mark
   8.  Hero copy
   9.  Footer / contact bar
   10. Brand pillars
   11. Decorative paw prints
   12. Desktop composition (>= 992px)
   13. Accessibility
   14. Known contrast exception
   ========================================================================== */

/* ==========================================================================
   0. METRIC-MATCHED FALLBACK
   Plus Jakarta Sans is about 15% narrower than the grotesques a browser
   reaches for while a webfont is still loading: "But he's only back on" sets
   310px in Jakarta and 365px in Arial at the same 30px. The design breaks that
   line by hand, so an unadjusted fallback pushes it onto a third line and
   shunts everything below it down the page - visible as a jump when the font
   swaps in, and permanent if the font never arrives at all.

   size-adjust scales the substitute to Jakarta's width, so the line breaks and
   the whole vertical rhythm hold from first paint, webfont or no webfont.
   ========================================================================== */
@font-face {
  font-family: "Plus Jakarta Sans Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Roboto"),
       local("Liberation Sans"), local("Segoe UI");
  size-adjust: 85%;
  ascent-override: 105%;
  descent-override: 27%;
  line-gap-override: 0%;
}

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  /* --- Colour palette (brand style guide) --- */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-dark-yellow: #ffa023;
  --color-light-yellow: #ffe6c1;
  --color-purple: #7c4a83;

  /* --- Semantic roles --- */
  --bg-page: var(--color-dark-yellow);
  --text-body: var(--color-black);
  --btn-bg: var(--color-purple);
  --btn-text: var(--color-light-yellow);
  --paw-ink: #e18000;

  /* --- Typeface and weights (style guide) --- */
  --font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", ui-sans-serif,
    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* --- Type scale ---------------------------------------------------------
     On phones every value is a fixed percentage of the 375px mobile design,
     so the artwork reproduces exactly at any handset width and the design's
     line breaks hold at all of them. Each one stops growing when it reaches
     its desktop figure from the style guide. --- */
  --fs-intro: min(5.867vw, 1.875rem);      /* 22 @375 -> 30 */
  --fs-headline: min(8vw, 2.25rem);        /* 30 @375 -> 36 */
  --fs-aside: min(6.4vw, 1.5rem);          /* 24 @375 -> 24 */
  --fs-bracket: min(13.333vw, 3.125rem);   /* 50 @375 -> 50 */
  --fs-invite: min(6.4vw, 2.125rem);       /* 24 @375 -> 34 */
  --fs-button: min(7.467vw, 2rem);         /* 28 @375 -> 32 */
  --fs-contact: min(5.333vw, 1.5rem);      /* 20 @375 -> 24 */

  /* --- Line heights (ratios matching the style guide's px pairs) --- */
  --lh-intro: 1.27;
  --lh-headline: 1.272;
  --lh-aside: 1.25;
  --lh-invite: 1.24;
  --lh-tight: 1.25;

  /* --- Vertical rhythm inside the copy block --- */
  --gap-intro-headline: min(6.133vw, 1.4375rem); /* 23 @375, 16 on desktop */
  --gap-headline-aside: min(4.8vw, 1.75rem);     /* 18 @375 -> 28 */
  --gap-aside-invite: min(6.667vw, 1.9375rem);   /* 25 @375 -> 31 */
  --gap-invite-cta: min(9.6vw, 2.25rem);         /* 36 @375, 24 on desktop */

  /* --- Layout --- */
  --container-max: 1440px;
  --edge: min(6.4vw, 3.75rem);             /* 24 @375 -> 60 page gutter */
  --radius-pill: 999px;

  /* --- Components (outer ring diameters, measured from the artwork) --- */
  --social-size: min(12.267vw, 4.625rem);  /* 46 @375 -> 74 */
  --social-gap: min(2.933vw, 2.3125rem);   /* 11 @375 -> 37 */
  --contact-size: min(12.267vw, 3.75rem);  /* 46 @375 -> 60 */
  --contact-gap: min(2.4vw, 0.875rem);     /*  9 @375 -> 14 */
  --pillars-w: clamp(8.75rem, 12.57vw, 11.5rem);               /* blob strip */
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
p,
ul,
figure {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family);
  font-weight: var(--fw-medium);
  color: var(--text-body);
  background-color: var(--bg-page);
  /* Artwork bleeds off every edge; never allow a sideways scrollbar. */
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

/* ==========================================================================
   3. TYPOGRAPHY SCALE
   Reusable classes mirroring the style guide, for future pages.
   ========================================================================== */
.heading-1 {
  font-size: var(--fs-headline);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-headline);
}

.subheading-1 {
  font-size: var(--fs-intro);
  font-weight: var(--fw-medium);
  line-height: var(--lh-intro);
}

.paragraph-1 {
  font-size: var(--fs-aside);
  font-weight: var(--fw-medium);
  line-height: var(--lh-aside);
}

.paragraph-2 {
  font-size: var(--fs-contact);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.btn-brand {
  width: 100%;
  min-height: min(17.333vw, 4.125rem);  /* 65 @375 -> 66 */
  padding: 0.2em 1.4em;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: var(--fs-button);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease,
    transform 0.25s ease, box-shadow 0.25s ease;
}

.btn-brand--primary {
  background-color: var(--btn-bg);
  color: var(--btn-text);
}

/* Secondary treatment from the style guide doubles as the hover state. */
.btn-brand--primary:hover,
.btn-brand--primary:focus-visible {
  background-color: var(--color-black);
  color: var(--btn-text);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgb(0 0 0 / 0.22);
}

.btn-brand--primary:active {
  transform: translateY(0);
  box-shadow: none;
}

/* ==========================================================================
   5. HERO SHELL AND BACKDROP
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
}

/* Full-bleed newspaper texture behind everything. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__stage {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--edge);
}

/* ==========================================================================
   6. HEADER / SOCIAL LINKS
   ========================================================================== */
.site-header {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: min(7.467vw, 3.1875rem) var(--edge) 0;  /* 28 @375 -> 51 */
}

.social-list {
  gap: var(--social-gap);
}

.social-link {
  display: block;
  width: var(--social-size);
  height: var(--social-size);
  border-radius: 50%;
  transition: transform 0.25s ease;
}

.social-link svg {
  width: 100%;
  height: 100%;
}

.social-link:hover,
.social-link:focus-visible {
  transform: scale(1.06);
}

/* ==========================================================================
   7. BRAND MARK
   ========================================================================== */
.brand-mark {
  margin: min(12.533vw, 3.5rem) auto 0;  /* 47 @375 below the social row */
  width: min(100%, 82.32vw);
  line-height: 0;
}

.brand-mark img {
  width: 100%;
  height: auto;
  /* The original artwork carries a soft shadow; reproduced as a filter so the
     mark stays vector-sharp at any size. */
  filter: drop-shadow(3px 6px 4px rgb(0 0 0 / 0.28));
}

/* ==========================================================================
   8. HERO COPY
   ========================================================================== */
.hero__copy {
  margin-top: min(7.733vw, 2.5rem);  /* 29 @375 below the wordmark */
  /* The design's longest lines sit within ~12px of the column edge. The copy is
     centred, so widening the box symmetrically shifts nothing visually but stops
     a line wrapping early if the webfont rasterises a hair wide. */
  margin-inline: -1rem;
}

.hero__intro {
  font-size: var(--fs-intro);
  font-weight: var(--fw-medium);
  line-height: var(--lh-intro);
}

.hero__headline {
  margin-top: var(--gap-intro-headline);
  font-size: var(--fs-headline);
  font-weight: var(--fw-extrabold);
  font-style: italic;
  line-height: var(--lh-headline);
}

/* Oversized brackets flank a two-line aside. */
.hero__aside {
  margin-top: var(--gap-headline-aside);
  gap: clamp(0.25rem, 0.6vw, 0.5rem);
  font-size: var(--fs-aside);
  font-weight: var(--fw-medium);
  font-style: italic;
  line-height: var(--lh-aside);
}

.hero__bracket {
  flex: none;
  font-size: var(--fs-bracket);
  font-style: normal;
  font-weight: var(--fw-medium);
  line-height: 1;
}

.hero__invite {
  margin-top: var(--gap-aside-invite);
  font-size: var(--fs-invite);
  font-weight: var(--fw-medium);
  font-style: italic;
  line-height: var(--lh-invite);
}

.hero__cta {
  margin-top: var(--gap-invite-cta);
  /* Cancel the copy block's negative inline margin so the pill sits on the
     normal page gutter, 24px in from each edge as the design has it. The
     widening is only there to stop text lines wrapping early. */
  padding-inline: 1rem;
}

/* ==========================================================================
   9. FOOTER / CONTACT BAR
   ========================================================================== */
.site-footer {
  position: relative;
  z-index: 3;
  margin-top: auto;
}

.contact-bar {
  gap: clamp(0.0625rem, 0.27vw, 0.25rem);
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: min(7.2vw, 2.25rem) var(--edge) 0;  /* 27 @375 below the CTA */
}

.contact-link {
  gap: var(--contact-gap);
  font-size: var(--fs-contact);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--color-white);
  text-decoration: none;
}

.contact-link:hover,
.contact-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.contact-link svg {
  flex: none;
  width: var(--contact-size);
  height: var(--contact-size);
}

/* ==========================================================================
   10. BRAND PILLARS (Creative / Content / Social / Design)
   Shapes traced from the source artwork. Labels stay live SVG text so they
   remain selectable, translatable and available to assistive technology.
   ========================================================================== */
.pillars {
  display: block;
  width: 100%;
}

.pillars text {
  font-family: var(--font-family);
  font-weight: var(--fw-bold);
}

.pillars-panel {
  margin-top: min(4vw, 1.5rem);  /* 15 @375 below the contact rows */
}

.pillars--mobile {
  aspect-ratio: 375 / 318;
}

.pillars--desktop {
  display: none;
}

/* ==========================================================================
   11. DECORATIVE PAW PRINTS
   ========================================================================== */
.paws {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.paws--top-right {
  top: 0;
  right: 0;
  height: auto;
}

.paws--narrow {
  width: clamp(3.75rem, 18.7vw, 6rem);
}

.paws--wide,
.paws--bottom-left {
  display: none;
}

/* ==========================================================================
   11b. TABLET (768px - 991px)
   There is no tablet design, so the mobile composition is kept and simply
   stopped from over-scaling: the wordmark and copy get sensible ceilings and
   the contact rows sit side by side now that there is room for them.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 991.98px) {
  .brand-mark {
    width: min(100%, 26.25rem); /* 420px */
  }

  .hero__copy {
    max-width: 34rem;
    margin-inline: auto;
  }

  .btn-brand {
    width: auto;
    min-width: 20.875rem;
  }

  .contact-bar {
    gap: 3rem;
  }
}

/* ==========================================================================
   12. DESKTOP COMPOSITION (>= 992px)
   Reproduces the 1440 x 899 reference layout, and fits it to the window.

   Desktop only: the composition occupies exactly one viewport and never
   scrolls. Every vertical value is the smaller of its figure from the design
   and the same share of the viewport height, the share being design-px / 899.
   At 1440x899 the two agree and you get the design exactly; in a shorter
   window the height term takes over and the whole composition scales down
   together. Phones and tablets are untouched and still scroll.
   ========================================================================== */
@media (min-width: 992px) {
  :root {
    --fs-intro: min(1.875rem, 3.337svh);          /* 30 */
    --fs-headline: min(2.25rem, 4.004svh);        /* 36 */
    --fs-aside: min(1.5rem, 2.670svh);            /* 24 */
    --fs-bracket: min(3.125rem, 5.562svh);        /* 50 */
    --fs-invite: min(2.125rem, 3.782svh);         /* 34 */
    --fs-button: min(2rem, 3.560svh);             /* 32 */
    --fs-contact: min(1.5rem, 2.670svh);          /* 24 */
    --gap-intro-headline: min(1rem, 1.780svh);    /* 16 */
    --gap-headline-aside: min(1.75rem, 3.115svh); /* 28 */
    --gap-aside-invite: min(1.9375rem, 3.448svh); /* 31 */
    --gap-invite-cta: min(1.5rem, 2.670svh);      /* 24 */
    --edge: min(3.75rem, 6.674svh);               /* 60 */
    --social-size: min(4.625rem, 8.231svh);       /* 74 */
    --social-gap: min(2.3125rem, 4.116svh);       /* 37 */
    --contact-size: min(3.75rem, 6.674svh);       /* 60 */
    --contact-gap: min(0.875rem, 1.557svh);       /* 14 */
  }

  body {
    overflow: hidden;
  }

  .hero {
    height: 100svh;
  }

  .btn-brand {
    min-height: min(4.125rem, 7.341svh); /* 66 */
  }

  /* --- Two-column stage: wordmark left, message right ------------------- */
  .hero__stage {
    flex: 1 1 auto;
    /* 73.6px left / 219px right at the 1440px reference width. */
    padding-left: clamp(1.5rem, 5.11vw, 4.6rem);
    padding-right: clamp(1.5rem, 15.21vw, 13.6875rem);
    /* The wordmark is the tallest item, so it sets the row height. These two
       values put its top edge on y=223.7 and its bottom on y=714.3 at the
       1440x899 reference size, matching the design exactly; any extra viewport
       height is then shared evenly above and below. */
    padding-block: min(clamp(3rem, 15.53vw, 13.98rem), 24.883svh)
                   min(clamp(3rem, 12.83vw, 11.54rem), 20.545svh);
    display: grid;
    /* Column ratio 592.76 : 502, exactly as measured from the design. */
    grid-template-columns: 592.76fr 502fr;
    column-gap: clamp(1.5rem, 3.65vw, 3.3125rem);
    align-items: center;
  }

  /* --- Corner furniture anchors to the viewport, not the stage ---------- */
  .site-header {
    position: absolute;
    top: min(clamp(2rem, 3.54vw, 3.1875rem), 5.673svh); /* ring top at y = 51 */
    left: var(--edge);
    width: auto;
    max-width: none;
    padding: 0;
  }

  .brand-mark {
    grid-column: 1;
    /* 65.94svh is the wordmark's 592.8px width at the 899px reference, so a
       short window shrinks it rather than pushing the page past the viewport. */
    width: min(100%, 65.94svh);
    margin: 0;
  }

  .brand-mark img {
    filter: drop-shadow(5px 11px 7px rgb(0 0 0 / 0.28));
  }

  .hero__copy {
    grid-column: 2;
    margin-top: 0;
    margin-inline: -1.5rem;
  }

  .btn-brand {
    width: auto;
    min-width: 20.875rem; /* 334px pill from the design */
  }

  .site-footer {
    margin-top: 0;
  }

  .contact-bar {
    position: absolute;
    left: var(--edge);
    bottom: min(clamp(2rem, 3.82vw, 3.4375rem), 6.118svh); /* ring bottom y=844 */
    gap: clamp(1.5rem, 5.37vw, 4.83rem); /* 77.3px between contact rows */
    width: auto;
    max-width: none;
    padding: 0;
  }

  /* --- Blob strip bleeds off the right edge of the viewport ------------- */
  .pillars-panel {
    display: none;
  }

  .pillars--desktop {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    width: var(--pillars-w);
    height: 100%;
  }

  /* --- Paw prints: swap to the desktop clusters ------------------------- */
  .paws--narrow {
    display: none;
  }

  .paws--wide {
    display: block;
    width: clamp(7rem, 12.78vw, 11.5rem);
    right: clamp(0rem, 3.05vw, 2.75rem);
  }

  .paws--bottom-left {
    display: block;
    top: auto;
    bottom: 0;
    left: 0;
    width: clamp(6rem, 11.11vw, 10rem);
    height: auto;
  }
}

/* ==========================================================================
   13. ACCESSIBILITY
   ========================================================================== */
:where(a, button):focus-visible {
  outline: 3px solid var(--color-black);
  outline-offset: 4px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 100;
  transform: translate(-50%, -120%);
  padding: 0.75rem 1.25rem;
  background: var(--color-purple);
  color: var(--color-white);
  font-weight: var(--fw-bold);
  text-decoration: none;
  border-radius: 0 0 8px 8px;
}

.skip-link:focus {
  transform: translate(-50%, 0);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   14. KNOWN CONTRAST EXCEPTION
   The contact row is white on the brand orange, exactly as drawn in the
   design. That pairing measures 2.04:1, below the WCAG 2.1 AA threshold of
   3:1 for large bold text, and it is the only thing standing between this
   page and a perfect Lighthouse accessibility score. The palette and the
   layout are untouched here because the design is the source of truth —
   uncommenting the block below switches that text to the same black already
   used for the body copy (10.3:1) without altering anything else.

   .contact-link { color: var(--color-black); }
   .contact-link svg circle[stroke] { stroke: var(--color-black); }
   .contact-link svg path,
   .contact-link svg rect { fill: var(--color-black); }
   ========================================================================== */