/* --- Home-only flourishes --- */
  /* Full-bleed montage hero: three clips crossfade behind the words. The
     scrim is a left-to-right cream fade so the headline stays readable over
     footage; the wash is a faint soft-light rainbow that ties the clips to
     the brand. Both were dialled in with Shadie in the design tool
     (July 2026) — wash on, soft scrim. */
  .hero { position: relative; padding: 0; border-bottom: 3px solid var(--ink); overflow: hidden; }
  .hero-vid { position: absolute; inset: 0; z-index: 0; }
  .hero-vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; }
  .hero-vid video.on { opacity: 1; }
  .hero-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,248,234,0.94) 0%, rgba(255,248,234,0.82) 38%, rgba(255,248,234,0.35) 62%, rgba(255,248,234,0) 85%); }
  .hero-wash { position: absolute; inset: 0; opacity: 0.35; mix-blend-mode: soft-light; background: linear-gradient(115deg, #e0453a, #f2a03d, #ffd23f, #5aa15a, #4a7fbf, #9b6bb3); }
  .hero-grid {
    position: relative; z-index: 1;
    max-width: 1400px; margin: 0 auto; padding: 0 28px;
    display: grid; grid-template-columns: 1fr; align-items: center;
    min-height: min(78vh, 680px);
  }
  .hero-words { padding: 72px 8px 64px; position: relative; max-width: 640px; }
  .hero-eyebrow {
    font-family: 'Caveat', cursive; font-weight: 700; font-size: 28px;
    color: var(--blue); transform: rotate(-3deg); display: inline-block;
  }
  .hero h1 { font-size: clamp(2.6rem, 6vw, 5.8rem); margin-top: 8px; line-height: 1; }
  .hero h1 .w1 { color: var(--red); }
  .hero h1 .w2 { color: var(--orange); }
  .hero h1 .w3 { color: var(--green); }
  .hero h1 .w4 { color: var(--blue); }
  .hero h1 .underline { position: relative; display: inline-block; }
  .hero h1 .underline svg {
    position: absolute; left: -4%; bottom: -20px; width: 108%; height: 30px;
  }
  .hero p.lede {
    font-size: clamp(15px, 1.3vw, 18px); max-width: 44ch; margin: 24px 0 0;
    color: rgba(26,20,16,0.82);
  }
  .hero-actions { display: flex; gap: 28px; margin-top: 36px; flex-wrap: wrap; align-items: center; }
  .btn-meet-dogs {
    position: relative;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px 9px 12px;
    font-family: 'Nunito', sans-serif; font-weight: 800;
    font-size: 14px; letter-spacing: 0.02em;
    color: var(--paper); text-decoration: none;
    background: var(--red);
    border: 3px solid var(--ink);
    border-radius: 18px 14px 20px 16px / 14px 18px 16px 20px;
    box-shadow: 4px 4px 0 var(--ink);
    transform: rotate(2deg);
    transition: transform .18s ease, box-shadow .18s ease, background .18s;
    white-space: nowrap;
  }
  .btn-meet-dogs::before {
    content: "";
    position: absolute; inset: 3px;
    border-radius: inherit;
    border: 1.5px dashed rgba(255,255,255,0.55);
    pointer-events: none;
  }
  .btn-meet-dogs .bmd-paw {
    width: 22px; height: 22px;
    display: inline-grid; place-items: center;
    background: var(--paper);
    border: 2.5px solid var(--ink);
    border-radius: 50%;
    transform: rotate(-4deg);
    transition: transform .25s cubic-bezier(.5,1.6,.4,1);
  }
  .btn-meet-dogs .bmd-paw svg { width: 14px; height: 14px; display: block; }
  .btn-meet-dogs .bmd-label { line-height: 1; }
  .btn-meet-dogs .bmd-arrow {
    font-weight: 900; font-size: 15px;
    margin-left: 1px;
    transition: transform .2s ease;
    display: inline-block;
  }
  .btn-meet-dogs:hover {
    transform: rotate(1deg) translate(-2px,-2px);
    box-shadow: 6px 6px 0 var(--ink);
    background: #d8392e;
  }
  .btn-meet-dogs:hover .bmd-paw {
    animation: bmd-pad 0.7s ease-in-out infinite;
  }
  .btn-meet-dogs:hover .bmd-arrow { transform: translateX(3px); }
  .btn-meet-dogs:active {
    transform: rotate(2deg) translate(2px,2px);
    box-shadow: 0 0 0 var(--ink);
  }
  @keyframes bmd-pad {
    0%, 100% { transform: rotate(-4deg) scale(1); }
    25%      { transform: rotate(-4deg) scale(1.15); }
    50%      { transform: rotate(-4deg) scale(0.95); }
    75%      { transform: rotate(-4deg) scale(1.1); }
  }
  /* Hero scale tweaks — match donate button's hero scale exactly */
  .hero-actions .btn-meet-dogs,
  .hero-actions .hero-donate {
    padding: 14px 22px 14px 16px;
    font-size: 16px;
    gap: 11px;
  }
  .hero-actions .btn-meet-dogs .bmd-paw,
  .hero-actions .hero-donate .bdn-heart { width: 28px; height: 28px; }
  .hero-actions .btn-meet-dogs .bmd-paw svg,
  .hero-actions .hero-donate .bdn-heart svg { width: 17px; height: 17px; }
  .hero-actions .btn-meet-dogs .bmd-arrow,
  .hero-actions .hero-donate .bdn-arrow { font-size: 17px; }
  /* Donate button — green variant for the hero so it doesn't clash with red 'Meet the dogs' */
  .btn-donate-nav.donate-green { background: var(--green); }
  .btn-donate-nav.donate-green:hover { background: var(--green-dark); }
  /* Donate band — larger sticker-pill version */
  .btn-donate-nav.band-donate {
    padding: 18px 30px 18px 22px;
    font-size: 19px; gap: 14px;
    box-shadow: 5px 5px 0 var(--ink);
  }
  .btn-donate-nav.band-donate .bdn-heart { width: 34px; height: 34px; }
  .btn-donate-nav.band-donate .bdn-heart svg { width: 21px; height: 21px; }
  .btn-donate-nav.band-donate .bdn-arrow { font-size: 21px; }
  /* Phones: the clip fills the top of the screen and the words sit at the
     bottom over a vertical scrim; --hv-focus (set per clip in front-page.php)
     keeps each dog in frame on the narrow crop. */
  @media (max-width: 980px) {
    .hero-scrim { background: linear-gradient(180deg, rgba(255,248,234,0.2) 0%, rgba(255,248,234,0.45) 45%, rgba(255,248,234,0.88) 78%, rgba(255,248,234,0.95) 100%); }
    .hero-grid { min-height: 82vh; align-items: end; }
    .hero-words { padding: 46vh 4px 40px; }
    .hero-eyebrow { font-size: 24px; }
    .hero h1 .underline svg { bottom: -12px; height: 22px; }
    .hero-vid video { object-position: var(--hv-focus, 50% 50%); }
  }

  /* Stats strip */
  .stats { background: var(--ink); color: var(--paper); padding: 36px 0; margin-top: 0;
    border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
  .stats-row { max-width: 1400px; margin: 0 auto; padding: 0 28px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .stat { text-align: center; }
  .stat .n { font-family: 'Caprasimo', serif; font-size: clamp(3rem, 5vw, 4.6rem); line-height: 0.9; }
  .stat:nth-child(1) .n { color: var(--yellow); }
  .stat:nth-child(2) .n { color: var(--orange); }
  .stat:nth-child(3) .n { color: var(--pink); }
  .stat:nth-child(4) .n { color: var(--green); }
  .stat .l { font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em;
    font-weight: 700; color: rgba(255,248,234,0.75); margin-top: 6px; }

  /* =====================================================================
     Featured doggo — the featured-dog promo strip (parts/featured-dog.php)
     between the stats band and the adopt band. One wide card: photo, a few
     lines, one button. Kept short on purpose (the adopt band below is still
     the main event), and on its own slightly deeper cream so it reads as an
     advert rather than another section of the page.
     ===================================================================== */
  .featured-dog {
    background: var(--paper-2);
    border-bottom: 3px solid var(--ink);
    padding: 46px 0 40px;
  }
  .fd-card {
    position: relative;
    /* Narrower than the bands above and below on purpose: an advert sitting
       on the page, not another full-width section of it. */
    max-width: 1080px; margin: 0 auto;
    display: grid; grid-template-columns: 190px 1fr auto;
    gap: 26px; align-items: center;
    background: var(--paper);
    border: 3px solid var(--ink); border-radius: 26px;
    box-shadow: 6px 6px 0 var(--ink);
    /* Extra padding at the top so the sticker tab clears the photo below it
       rather than crowding its border. */
    padding: 30px 26px 22px;
  }
  /* Sticker tab straddling the top edge — the promotional bit. Rotated, not
     the card itself: at this width even a 1deg tilt on the card reads as
     leaning rather than hand-drawn. */
  .fd-badge {
    position: absolute; top: -21px; left: 26px;
    background: var(--orange); color: var(--ink);
    border: 3px solid var(--ink); border-radius: 999px;
    padding: 1px 18px 3px;
    font-size: 24px; line-height: 1.2;
    transform: rotate(-2.5deg);
    box-shadow: 3px 3px 0 var(--ink);
  }
  .fd-photo {
    display: block; aspect-ratio: 1/1;
    border: 3px solid var(--ink); border-radius: 18px;
    background-color: var(--soft-yellow);
    background-size: cover; background-position: center;
    box-shadow: 4px 4px 0 var(--ink);
    position: relative;
    transition: transform .15s, box-shadow .15s;
  }
  .fd-photo:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
  /* Same status pill as the dog cards, so a Reserved dog reads the same here */
  .fd-photo[data-status]::before {
    content: attr(data-status);
    position: absolute; top: 10px; left: 10px;
    padding: 5px 12px;
    background: var(--paper); color: var(--ink);
    border: 2px solid var(--ink); border-radius: 999px;
    font: 800 10px/1 'Nunito', sans-serif;
    text-transform: uppercase; letter-spacing: 0.05em;
  }
  .fd-photo[data-status="Reserved"]::before { background: var(--soft-yellow); }
  .fd-eyebrow {
    font-size: 26px; line-height: 1; color: var(--red);
    display: inline-block; transform: rotate(-2deg);
  }
  .fd-name {
    font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1;
    margin: 6px 0 6px; max-width: none;
  }
  .fd-name a { text-decoration: none; }
  .fd-name a:hover { text-decoration: underline; text-decoration-thickness: 3px; }
  .fd-meta {
    font-size: 13px; font-weight: 700; color: rgba(26,20,16,0.65);
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  .fd-line {
    font-size: 15px; margin: 10px 0 0; max-width: 56ch;
    color: rgba(26,20,16,0.8);
  }
  .fd-tags { margin-top: 12px; }
  .fd-cta { padding-right: 6px; }

  /* Tablets: the button drops under the copy, and the photo grows down the
     side of both rows rather than leaving a hole beneath itself. */
  @media (max-width: 980px) {
    .fd-card { grid-template-columns: 170px 1fr; row-gap: 18px; }
    .fd-photo { grid-row: 1 / span 2; aspect-ratio: auto; height: 100%; }
    .fd-cta { grid-column: 2; padding-right: 0; }
  }
  /* Phones: single column, full-width button. */
  @media (max-width: 600px) {
    .featured-dog { padding: 40px 0 32px; }
    .fd-card { grid-template-columns: 1fr; padding: 28px 18px 18px; }
    .fd-badge { font-size: 21px; left: 18px; }
    /* undo the tablet rule's two-row photo — everything is one column here */
    .fd-photo { grid-row: auto; height: auto; aspect-ratio: 4/3; }
    .fd-cta { grid-column: 1; }
    .fd-cta .btn { width: 100%; }
  }

  /* Bands */
  .band { padding: 100px 0; border-bottom: 3px solid var(--ink); position: relative; overflow: hidden; }
  .band-inner { max-width: 1280px; margin: 0 auto; padding: 0 28px;
    display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: start; }
  .band .eyebrow {
    font-family: 'Caveat', cursive; font-size: 32px; font-weight: 700;
    transform: rotate(-2deg); display: inline-block;
  }
  .band h2 { font-size: clamp(2.6rem, 5vw, 4.4rem); margin-top: 8px; max-width: 14ch; }
  .band p { font-size: 18px; max-width: 44ch; margin: 24px 0 0; color: rgba(26,20,16,0.8); }
  .b-adopt { background: var(--red); color: var(--paper); }
  .b-adopt .eyebrow { color: var(--yellow); }
  .b-adopt p { color: rgba(255,248,234,0.88); }
  .b-foster { background: var(--green); color: var(--paper); }
  .b-foster .eyebrow { color: var(--yellow); }
  .b-foster p { color: rgba(255,248,234,0.88); }
  .b-donate { background: var(--yellow); }
  .b-donate .eyebrow { color: var(--red); }

  /* Foster splash */
  .foster-splash {
    background: var(--paper); color: var(--ink);
    border: 3px solid var(--ink); border-radius: 28px;
    padding: 32px; box-shadow: 8px 8px 0 var(--ink); position: relative;
  }
  .foster-splash .scribble {
    position: absolute; top: -22px; right: 32px;
    background: var(--yellow); border: 3px solid var(--ink); border-radius: 999px;
    padding: 6px 16px;
    font-family: 'Caveat', cursive; font-weight: 700; font-size: 22px;
    transform: rotate(4deg);
  }
  .foster-splash h3 { font-size: 30px; margin-bottom: 10px; }
  .foster-splash ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
  .foster-splash li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
  .foster-splash li::before {
    content: '✓'; flex: 0 0 26px; height: 26px; border-radius: 50%;
    background: var(--green); color: var(--paper);
    display: grid; place-items: center;
    font-weight: 800; font-size: 14px;
  }

  /* Donate amounts */
  .amounts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .amt { background: var(--paper); border: 3px solid var(--ink); border-radius: 22px;
    padding: 22px; box-shadow: 4px 4px 0 var(--ink); }
  .amt-note {
    grid-column: 1 / -1;
    margin: 8px 4px 0;
    padding: 0;
    background: transparent;
    border: 0;
    font-family: 'Nunito', sans-serif;
    font-size: 11.5px; line-height: 1.5;
    color: rgba(26,20,16,0.6);
  }
  .amt-note strong {
    font-family: inherit; font-weight: 800;
    font-size: inherit; color: inherit;
    margin: 0;
  }
  .amt .num { font-family: 'Caprasimo', serif; font-size: 56px; line-height: 1; }
  .amt:nth-child(1) .num { color: var(--red); }
  .amt:nth-child(2) .num { color: var(--orange); }
  .amt:nth-child(3) .num { color: var(--green); }
  .amt:nth-child(4) .num { color: var(--purple); }
  .amt .lbl { font-size: 14px; margin-top: 8px; font-weight: 600; }

  /* Stories ribbon */
  .ribbon { padding: 100px 0; background: var(--paper); }
  .ribbon-head { max-width: 1280px; margin: 0 auto 40px; padding: 0 28px;
    display: flex; justify-content: space-between; align-items: end; gap: 40px; }
  .ribbon-head h2 { font-size: clamp(2.4rem, 4vw, 3.8rem); margin-top: 4px; }
  .ribbon-head .script { color: var(--purple); font-size: 32px; transform: rotate(-2deg); display: inline-block; }
  .ribbon-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
    max-width: 1280px; margin: 0 auto; padding: 0 28px; }

  /* Hero dog grid (2-up colourful) */
  .hero-dog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .hero-dog-grid .dog-card:nth-child(2) { margin-top: 24px; }
  .hero-dog-grid .dog-card:nth-child(4) { margin-top: 24px; }

  @media (max-width: 980px) {
    .hero-grid, .band-inner { grid-template-columns: 1fr; }
    .stats-row, .ribbon-row { grid-template-columns: 1fr 1fr; }
    .hero-dog-grid, .amounts { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 600px) {
    .stats-row, .ribbon-row, .hero-dog-grid, .amounts { grid-template-columns: 1fr; }
    /* heading + "All stories" button can't sit side-by-side on narrow phones */
    .ribbon-head { flex-wrap: wrap; gap: 14px 24px; }
  }

/* =====================================================================
   Facebook note pointing at the page where day-to-day updates are posted
   first. Lives INSIDE the adopt band, tucked under the dog cards so it
   belongs to that block rather than floating: no section border of its own
   (the page has enough ink rules) and its right edge on the cards' edge.
   ===================================================================== */
.fb-note {
  display: flex;
  grid-column: 2;    /* the dog-grid column: the strip spans exactly the width
                        of the cards, so both edges line up and it reads as
                        centred under the block rather than shoved right */
  margin-top: 36px;  /* a breath under the cards, clear of their shadows */
}
/* The band's 60px gap applies to rows as well as columns, which would push
   the note away from the cards; it only ever had one row before this note,
   so zeroing the row gap here changes nothing else. (Below 980px the band is
   a single column and that row gap IS wanted, so this is desktop-only.) */
@media (min-width: 981px) {
  .band-inner { row-gap: 0; }
}
/* Below 980px that row gap stays (it separates the band's copy from the dog
   grid), so pull the note back up to the same 36px breath as on desktop. The
   band is a single column here, so column 2 no longer exists — without the
   reset the note would invent a phantom column beside the cards. */
@media (max-width: 980px) {
  .fb-note { grid-column: 1; margin-top: -24px; }
}
/* Slimmer than the standalone version, so it reads as a strip under the
   cards rather than a feature card. No tilt either: at this width a 0.8deg
   rotation drops the right end ~9px and reads as leaning, not hand-drawn. */
.fb-note .fb-note-card {
  width: 100%;                    /* match the cards' width exactly */
  justify-content: center;        /* message + button centred in the strip */
  gap: 14px 20px; padding: 16px 22px;
  transform: none;
}
.fb-note .fb-note-card .script { font-size: 22px; }
/* .b-adopt sets a cream text colour for the band; the card is its own
   cream sticker, so put the ink colour back inside it. */
.fb-note-card, .fb-note-card .script { color: var(--ink); }
/* Phones: no room for the handwriting and the button side by side, and
   stacking them reads as clutter — so the note becomes a single full-width
   pill carrying the message itself. */
.fb-note .fbn-short { display: none; }
@media (max-width: 600px) {
  .fb-note .fb-note-card {
    width: 100%; padding: 0;
    background: none; border: 0; box-shadow: none;
  }
  .fb-note .fb-note-card .script { display: none; }
  .fb-note .fb-note-card .btn { width: 100%; justify-content: center; }
  .fb-note .fbn-long { display: none; }
  .fb-note .fbn-short { display: inline; }
}
.fb-note-card {
  display: inline-flex; align-items: center; gap: 26px;
  flex-wrap: wrap; justify-content: center;
  background: var(--paper-2);
  border: 3px solid var(--ink); border-radius: 22px;
  box-shadow: 5px 5px 0 var(--ink);
  padding: 20px 30px;
  transform: rotate(-0.8deg);
}
.fb-note-card .script { font-size: 30px; line-height: 1.1; }
.fb-note-card .btn { display: inline-flex; align-items: center; gap: 10px; }
.fb-note-card .btn .fb-mark { width: 26px; height: 26px; display: block; }