/* =========================================================
   Down the chimney: the page is one trip from the rooftop,
   down a cutaway chimney (Santa slides inside it), into the
   fireplace and out to the tree. Loaded after styles.css;
   section rules start with the section ID so they win over
   its layered overrides.
========================================================= */

/* Script font for headings, hosted on the site (no Google dependency) */
@font-face{
  font-family: "Dancing Script";
  src: url("../assets/fonts/dancing-script-700.woff2") format("woff2");
  font-weight: 600 700; font-style: normal; font-display: swap;
}

html{ scroll-padding-top: 96px; }
/* styles.css pins html/body to one screen tall, which unsticks the nav after the first screen */
html, body{ height: auto; }
body{ min-height: 100%; }

/* ---------- Nav: a slim night-sky bar with a string of lights under it ---------- */
.topbar{
  background: rgba(11,31,24,.96);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 0; box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.topbar > .wrap{
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  padding: 0 var(--pad);
}
.topbar::after{ /* string of lights */
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 14px; pointer-events: none;
  background:
    radial-gradient(circle, #E25555 0 4px, transparent 5px) 0 60% / 54px 14px repeat-x,
    radial-gradient(circle, #D9B46C 0 4px, transparent 5px) 18px 60% / 54px 14px repeat-x,
    radial-gradient(circle, #9DB89F 0 4px, transparent 5px) 36px 60% / 54px 14px repeat-x,
    linear-gradient(#0E2A20, #0E2A20) 0 3px / 100% 2px no-repeat;
}
.topbar .topbar-inner{ min-height: 72px; padding: 6px 0; }
.topbar .site-logo, .topbar-inner .brand .site-logo{
  height: 60px; margin-left: 0;
  background: #F7F3EC; border-radius: 14px; padding: 3px 10px;
  filter: none; box-shadow: 0 0 0 2px rgba(217,180,108,.6);
}
.topbar-inner .nav{ background: transparent; border: 0; box-shadow: none; padding: 0; gap: 4px; }
.topbar-inner .nav a:not(.btn){
  color: #F7F3EC; font-size: 15px; font-weight: 600; letter-spacing: .2px;
  padding: 8px 14px; border-radius: 8px; text-shadow: none; background: transparent;
}
.topbar-inner .nav a:not(.btn):hover, .topbar-inner .nav a:not(.btn):focus-visible{
  color: #F5DBA3; background: transparent; box-shadow: inset 0 -2px 0 #D9B46C;
}
.topbar-inner .nav a.btn.primary{ font-size: 15px; padding: 9px 20px; margin-left: 12px; }
.topbar .header-gift{ display: none; }
.topbar .header-social a{ width: 34px; height: 34px; }

/* ---------- Shared scene backdrops (sky, wall, tree) ---------- */
.stop{
  position: relative;
  border: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center bottom;
}
.stop-sky       { background-image: url("../assets/scene/sky.svg"); background-color: #0B1F18; }
.stop-wall      { background-image: url("../assets/scene/wall.svg"); background-color: #F7F3EC; }

/* Living-room headings sit on an evergreen banner so they read over the cream rooms */
#golf .section-head, #gallery .section-head, #sponsors .section-head{
  background: rgba(14,42,32,.95);
  border: 2px solid var(--gold);
  border-radius: 20px;
  padding: 18px clamp(18px, 3vw, 34px);
  max-width: 880px;
  margin-left: auto; margin-right: auto;
}

/* ---------- Night sky (hero) ---------- */
/* bottom padding leaves the roof clear for the chimney top + Santa (about 1.25x the shaft width) */
.stop-sky{ padding-top: clamp(30px, 3vw, 56px); padding-bottom: clamp(110px, 11vw, 160px); }
.hero h1{ text-shadow: 0 0 28px rgba(245,219,163,.45), 0 2px 0 rgba(0,0,0,.25); }
.sky-sleigh{
  position: absolute; right: 4%; top: 12px; z-index: 1;
  width: min(22vw, 300px); height: auto; pointer-events: none;
}
body:not(.intro-active) .sky-sleigh{ animation: sleigh-in 1.8s cubic-bezier(.2,.8,.2,1) both; }
@keyframes sleigh-in{
  from{ transform: translate(60vw, -20vh) rotate(-8deg); opacity: 0; }
  to{ transform: none; opacity: 1; }
}

/* The headline glows straight in the sky (no photo card); the side boxes become a row below */
.hero.stop-sky .hero-grid{ display: flex; flex-direction: column; align-items: center; gap: clamp(36px, 5vw, 64px); }
.hero.stop-sky .hero-card{
  background: transparent; border: 0; box-shadow: none; min-height: 0; overflow: visible;
  max-width: 1120px; width: 100%;
}
/* headline and intro each on two lines on wide screens */
@media (min-width: 1100px){
  .hero.stop-sky h1{ font-size: clamp(40px, 3.6vw, 56px); max-width: 1100px; margin-left: auto; margin-right: auto; }
  .hero.stop-sky .hero-card .content .lede{ max-width: 1000px; }
}
.hero.stop-sky .hero-card .media, .hero.stop-sky .hero-card .overlay{ display: none; }
.hero.stop-sky .hero-card .content{ position: relative; text-align: center; align-items: center; padding: 0; }
.hero.stop-sky .hero-actions{ justify-content: center; }
.hero.stop-sky .lede{ color: #F7F3EC; max-width: 680px; margin-left: auto; margin-right: auto; }
/* the cards stand on the snow between the two houses */
.hero.stop-sky .hero-side{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: clamp(12px, 1.4vw, 20px);
  width: min(920px, 64vw); margin: clamp(60px, 9vw, 150px) auto 0; align-items: end;
}
.hero.stop-sky .side-stack .side-card, .hero .gift-tag-box{ padding: 16px 16px 18px; }
.hero.stop-sky .side-stack .side-card p, .hero .gift-tag-box p{ font-size: 13px; }
.hero.stop-sky .side-stack{
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px);
  background: transparent; border: 0; box-shadow: none; overflow: visible;
}
/* Snow-capped signs */
.hero.stop-sky .side-stack .side-card{
  position: relative; margin-top: 14px;
  background: rgba(14,42,32,.92); border: 2px solid rgba(217,180,108,.55); border-radius: 14px;
  box-shadow: 0 10px 0 rgba(0,0,0,.25);
}
.hero.stop-sky .side-stack .side-card::before{
  content: ""; position: absolute; top: -14px; left: -6px; right: -6px; height: 22px;
  background: #F7F3EC; border-radius: 14px 14px 10px 10px;
  box-shadow: 0 4px 0 rgba(157,184,159,.5);
}
.hero.stop-sky .side-stack .side-card h3{ font-family: Fraunces, Georgia, serif; font-size: 21px; color: #F5DBA3; }

/* "Fastest way to help" hangs off the sleigh as a gift tag */
.hero .gift-tag-box{
  position: relative;
  background: #FBF6EA;
  color: #2A2420;
  border: 0;
  border-radius: 14px;
  clip-path: polygon(14% 0, 86% 0, 100% 14%, 100% 100%, 0 100%, 0 14%);
  padding-top: 40px;
  box-shadow: none;
}
.hero .gift-tag-box::before{ /* string hole */
  content: ""; position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: #0B1F18; box-shadow: 0 0 0 3px var(--gold);
}
.hero .gift-tag-box h3{ color: #0E2A20; font-family: Fraunces, Georgia, serif; font-size: 22px; }
.hero .gift-tag-box p{ color: #3A332D; }
.hero .gift-tag-box .btn{ background: #0E2A20; color: #F7F3EC; border-color: #0E2A20; }
.hero .gift-tag-box .btn:hover{ background: #16382B; }

/* The scrolling word strip between sky and chimney is decorative only */
.marquee{ display: none; }

/* ---------- The chimney ---------- */
/* One grid for the whole trip down:
     row 1: shaft | everything from the story to the gallery (full-width bricks)
     row 2: shaft | Donate chalkboard (chimney narrows) | room wall + tree
     row 3: mantel across the chimney               | room
     row 4: firebox | stockings                      | room            */
.chimney{
  --shaft-w: clamp(150px, 16vw, 240px);
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: var(--shaft-w) minmax(0, 1fr) minmax(0, 1fr);
  --room-w: clamp(300px, 44vw, 680px);
  /* everything that isn't chimney is the room's wallpaper */
  background: url("../assets/scene/wallpaper.svg") 0 0 / 44px auto repeat, #F7F3EC;
  border-bottom: 22px solid #6A4E36;
}
/* the open shaft runs down beside the chalkboard too; Santa stops just above the mantel */
.chimney{ --hearth-h: 360px; }
.chimney > .shaft{ grid-column: 1; grid-row: 1 / 3; padding-bottom: var(--hearth-h); }
.chimney > .chimney-content{ grid-column: 2 / 4; grid-row: 1; }
.chimney > #donate{ grid-column: 2; grid-row: 2; }
/* the fireplace sits right under the shaft, beside the Donate chalkboard */
.chimney > .hearth{
  grid-column: 1; grid-row: 2; align-self: end; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: var(--hearth-h);
}
.hearth .mantel{ margin: 0 -28px 0 -4px; }
/* only the chimney column is brick: it runs straight down into the firebox */
.hearth .hearth-face{ display: block; }
.fire-surround{
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 26px 12px 0;
  border-left: 14px solid #9C4A3C;
  background:
    linear-gradient(to bottom, rgba(40,14,10,.15), rgba(245,170,90,.3)),
    url("../assets/scene/shaft.svg") repeat;
  background-size: auto, 72px auto;
  filter: drop-shadow(10px 0 12px rgba(0,0,0,.3));
}
.chimney > #sponsors{ grid-column: 3; grid-row: 2; }

/* The cutaway shaft: dark inner walls, warm glow at the bottom */
.shaft{
  position: relative;
  background:
    linear-gradient(to bottom, rgba(8,4,3,.8), rgba(8,4,3,.62) 72%, rgba(245,150,70,.45)),
    url("../assets/scene/shaft.svg") repeat;
  background-size: auto, 72px auto;
  border-left: 14px solid #9C4A3C;
  filter: drop-shadow(10px 0 12px rgba(0,0,0,.3));
  box-shadow: inset 30px 0 36px rgba(0,0,0,.75), inset -30px 0 36px rgba(0,0,0,.75);
}
.shaft::after{ /* the cut front edge: broken brick ends */
  content: ""; position: absolute; top: 0; bottom: 0; right: -10px; width: 20px; z-index: 1;
  background: repeating-linear-gradient(to bottom,
    #B35A48 0 22px, #4A221D 22px 26px,
    #A3503F 26px 40px, #4A221D 40px 44px,
    #B35A48 44px 70px, #4A221D 70px 74px);
  clip-path: polygon(0 0, 60% 0, 100% 3%, 50% 6%, 100% 9%, 40% 12%, 100% 15%, 55% 18%, 100% 21%, 45% 24%, 100% 27%, 60% 30%, 100% 33%, 40% 36%, 100% 39%, 55% 42%, 100% 45%, 45% 48%, 100% 51%, 60% 54%, 100% 57%, 40% 60%, 100% 63%, 55% 66%, 100% 69%, 45% 72%, 100% 75%, 60% 78%, 100% 81%, 40% 84%, 100% 87%, 55% 90%, 100% 93%, 45% 96%, 100% 100%, 0 100%);
}
/* Chimney top pokes up out of the roof, with Santa climbing in */
.shaft-top{
  position: absolute; left: 0; right: 0; bottom: 100%; z-index: 3;
  display: flex; align-items: flex-end; justify-content: center;
  pointer-events: none;
}
.shaft-top img{ position: relative; width: 100%; max-width: 240px; height: auto; margin-bottom: -4px; }

/* Santa sliding: sticky keeps him still on screen while the bricks pass */
.shaft-santa{
  position: sticky; top: 42vh;
  width: 74%; max-width: 160px; margin: 40px auto 30px;
}
.shaft-santa img{
  position: relative; display: block; width: 100%; height: auto;
  animation: wobble 1.1s ease-in-out infinite alternate;
  transform-origin: 50% 20%;
}
.shaft-santa::before{ /* speed lines above him */
  content: ""; position: absolute; left: 10%; right: 10%; bottom: 100%; height: 90px;
  background: repeating-linear-gradient(to right, transparent 0 14px, rgba(247,243,236,.22) 14px 16px, transparent 16px 30px);
  -webkit-mask-image: linear-gradient(to top, #000, transparent);
          mask-image: linear-gradient(to top, #000, transparent);
}
.soot{
  position: absolute; border-radius: 50%; background: rgba(40,26,22,.7);
  animation: soot 1.6s ease-out infinite;
}
.soot.s1{ width: 26px; height: 26px; left: -8%; bottom: 10%; }
.soot.s2{ width: 18px; height: 18px; right: -6%; bottom: 22%; animation-delay: .5s; }
.soot.s3{ width: 22px; height: 22px; left: 40%; bottom: -6%; animation-delay: 1s; }
@keyframes wobble{ from{ transform: rotate(-3deg); } to{ transform: rotate(3deg); } }
@keyframes soot{
  0%{ transform: translateY(0) scale(.6); opacity: 0; }
  20%{ opacity: .8; }
  100%{ transform: translateY(-120px) scale(1.4); opacity: 0; }
}

/* windows, wreaths and paintings are part of the wallpaper, peeking out between and beside the sections */
.chimney-content{
  min-width: 0;
  background: url("../assets/scene/room-decor.svg") center top / 100% auto repeat-y;
}
#story, #how, #impact{ background: transparent; border: 0; padding: clamp(18px, 2vw, 30px) 0; }
#story.band, #how.band, #impact.band{ background: transparent; }

/* (old) wooden plank headings */
.chimney .section-head{
  position: relative;
  max-width: 720px; margin-left: auto; margin-right: auto;
  padding: 16px clamp(18px, 3vw, 30px);
  background: repeating-linear-gradient(to bottom, #7A5634 0 12px, #6E4C2D 12px 14px);
  border-radius: 10px;
  box-shadow: 0 8px 0 rgba(0,0,0,.3);
}
.chimney .section-head::before, .chimney .section-head::after{
  content: ""; position: absolute; top: 12px; width: 9px; height: 9px; border-radius: 50%; background: #2A1C10;
}
.chimney .section-head::before{ left: 12px; }
.chimney .section-head::after{ right: 12px; }
.chimney .ribbon-title{ color: #FFF6E0; font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: clamp(28px, 3.2vw, 40px); }
.chimney .ribbon-title::before{ display: none; }
.chimney .section-head .sub{ color: #F7EBD3; }

/* Why We Do This + How We Work share one row */
.duo{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 32px); max-width: none; margin: 0;
  padding: 0 var(--pad); align-items: start;
}
.duo > section > .wrap{ padding: 0; max-width: none; }
#how .grid-3{ grid-template-columns: 1fr; gap: 16px; }
#how .sign{ min-height: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: start; }
#how .sign .card-icon{ grid-row: span 2; }
#how .sign h3{ margin-top: 0; }
#how .sign:nth-child(2){ transform: rotate(1deg); }
/* letter on the left with the numbers under it; signs on the right */
.duo{ grid-template-areas: "story how"; }
.duo > #story{ grid-area: story; }
.duo > #how{ grid-area: how; }
/* 20 Years lives inside the note, under the story */
.letter #impact{ padding: 22px 0 0; margin-top: 26px; border-top: 2px dashed rgba(142,43,43,.35); }
.letter #impact .wrap{ padding: 0; max-width: none; }
/* compact numbers */
.letter #impact .section-head{ margin-bottom: 12px; }
.letter #impact .ribbon-title{ font-size: clamp(30px, 3vw, 42px); }
.letter #impact .section-head .sub{ font-size: 14px; }
.letter #impact .impact{ grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; column-gap: 20px; max-width: none; }
.letter #impact .painted{ padding: 6px 4px; }
.letter #impact .painted strong{ font-size: clamp(24px, 2.2vw, 32px); }
.letter #impact .painted > span{ font-size: 13px; }
@media (max-width: 900px){
  .duo{ grid-template-columns: 1fr; grid-template-areas: "story" "how"; }
}

/* Why We Do This: a letter pinned to the bricks */
#story .letter{
  position: relative;
  max-width: 860px; margin: 0 auto;
  background-color: #FBF6EA;
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(110,143,115,.28) 31px 32px);
  border: 0; border-radius: 4px;
  padding: 44px clamp(22px, 4vw, 56px) 30px;
  transform: rotate(-1.2deg);
  box-shadow: 0 14px 0 rgba(0,0,0,.14), 0 0 0 1px rgba(110,143,115,.35);
}
#story .letter::before{ /* red thumbtack */
  content: ""; position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #F17E7E, #C94444 60%, #8E2B2B);
  box-shadow: 0 3px 0 rgba(0,0,0,.3);
}
#story .letter p{ color: #2A2420; font-size: 16.5px; line-height: 32px; margin: 0 0 32px; text-align: left; }
#story .letter p:last-child{ margin-bottom: 0; }
#story .letter:hover{ background-color: #FBF6EA; }

/* How We Work: three wooden signs */
#how .grid-3{ background: transparent; gap: clamp(18px, 2.4vw, 30px); }
#how .sign{
  position: relative;
  background: repeating-linear-gradient(to bottom, #7A5634 0 18px, #6E4C2D 18px 20px);
  border: 0; border-radius: 10px;
  box-shadow: 0 10px 0 rgba(0,0,0,.3);
  padding-top: 34px;
}
#how .sign:nth-child(1){ transform: rotate(-1.5deg); }
#how .sign:nth-child(2){ transform: rotate(1deg) translateY(10px); }
#how .sign:nth-child(3){ transform: rotate(-.6deg); }
#how .sign::before, #how .sign::after{
  content: ""; position: absolute; top: 12px; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #B8B0A4, #4A4038);
}
#how .sign::before{ left: 14px; }
#how .sign::after{ right: 14px; }
#how .sign:hover{ background: repeating-linear-gradient(to bottom, #835C38 0 18px, #765232 18px 20px); }
#how .sign h3{ color: #FFF6E0; font-family: Fraunces, Georgia, serif; font-size: 24px; }
#how .sign p{ color: #F7EBD3; }
#how .sign .card-icon{ color: #F5DBA3; border-color: rgba(245,219,163,.6); }

/* 20 Years: numbers painted on the bricks */
#impact .impact{ background: transparent; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; border: 0; overflow: visible; max-width: 900px; margin: 0 auto; }
#impact .painted, #impact .painted:hover{
  background: transparent; border: 0; box-shadow: none; text-align: center;
}
#impact .painted:nth-child(odd){ transform: rotate(-2deg); }
#impact .painted:nth-child(even){ transform: rotate(1.5deg); }
#impact .painted strong{
  color: #8E2B2B; font-family: Fraunces, Georgia, serif; font-weight: 700; font-size: clamp(34px, 3.8vw, 50px);
  text-shadow: none;
}
#impact .painted > span{ color: #2A2420; font-size: 15px; text-shadow: none; }

/* ---------- Fireplace (Donate) ---------- */
#donate{ background: transparent; border: 0; padding: clamp(24px, 2.6vw, 40px) 0; }
#donate.band{ background: transparent; }
#donate .donate-section .row{ grid-template-columns: 1fr; gap: 18px; }
#donate .chalkboard{
  background: radial-gradient(ellipse at 30% 30%, #2C3A33, #1C2621 70%);
  border: 14px solid #8A6A3A; border-radius: 10px;
  box-shadow: 0 12px 0 rgba(0,0,0,.25), inset 0 0 40px rgba(0,0,0,.4);
}
#donate .chalkboard h2{ color: #FFFFFF; font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: clamp(28px, 3vw, 38px); }
#donate .chalkboard .sub, #donate .chalkboard p{ color: rgba(244,241,234,.9); }
#donate .chalkboard .side-card{ background: transparent; border: 2px dashed rgba(244,241,234,.45); box-shadow: none; }
#donate .chalkboard .side-card h3{ color: #FFFFFF; font-family: Fraunces, Georgia, serif; font-size: 22px; }
#donate .chalkboard .handle{ background: rgba(255,255,255,.06); border-color: rgba(244,241,234,.25); }
#donate .chalkboard .handle strong{ color: #F4F1EA; }
#donate .chalkboard .handle code{ color: #F5DBA3; }
/* The hearth: the chimney ends at the mantel and opens into the firebox */
.mantel{
  position: relative; z-index: 2; height: 30px; margin: 0 -14px 0 0;
  background: linear-gradient(to bottom, #A9864F 0 7px, #8A6A3A 7px);
  border-radius: 6px; box-shadow: 0 8px 0 rgba(0,0,0,.28);
}
.mantel::after{ /* garland */
  content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 14px;
  background:
    radial-gradient(circle, #E25555 0 4px, transparent 5px) 0 0 / 90px 14px repeat-x,
    radial-gradient(ellipse at 50% 0, #16382B 0 9px, transparent 10px) 0 0 / 30px 14px repeat-x;
}
.firebox{
  position: relative; overflow: hidden;
  align-self: end; height: clamp(200px, 17vw, 240px);
  margin: 0; width: 100%; flex: 0 0 auto;
  border-radius: 90px 90px 0 0 / 60px 60px 0 0;
  border: 12px solid #5A2A24; border-bottom: 0;
  background: radial-gradient(ellipse at 50% 100%, #F0A35A 0, #9C4A1C 34%, #2A1610 70%, #160C08);
}
.firebox .santa-at-fire{
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  width: min(78%, 150px); height: auto; z-index: 2;
}
.firebox .logs{
  position: absolute; left: 12%; right: 12%; bottom: 0; height: 12px; z-index: 1;
  background: #6A4E36; border-radius: 6px;
}
.firebox .flame{
  position: absolute; bottom: 8px; z-index: 1;
  border-radius: 50% 50% 50% 50% / 64% 64% 36% 36%;
  animation: flicker .9s ease-in-out infinite alternate;
  transform-origin: 50% 100%;
}
.firebox .f1{ left: 14%; width: 30px; height: 54px; background: #E25555; }
.firebox .f2{ right: 14%; width: 34px; height: 62px; background: #D9B46C; animation-delay: .3s; }
.firebox .f3{ right: 24%; width: 18px; height: 34px; background: #F5DBA3; animation-delay: .6s; }
@keyframes flicker{ from{ transform: scaleY(.85) rotate(-3deg); } to{ transform: scaleY(1.08) rotate(3deg); } }

/* Stockings hang from the mantel, beside the fire */
/* stockings hang from the mantel, just above the fire */
.hearth .stockings{
  display: flex; align-items: flex-start; justify-content: center; gap: clamp(10px, 1.4vw, 18px);
  margin: -12px 0 14px; padding: 0;
}
.hearth .stocking{ width: clamp(34px, 3.2vw, 46px); height: clamp(50px, 4.6vw, 66px); border-top-width: 12px; }
.hearth .stocking::after{ top: -20px; height: 8px; }

/* Donate buttons on the chalkboard, above the fireplace */
.donate-btns{ display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; }
.donate-btn{
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 22px 10px 10px; border-radius: 999px;
  text-decoration: none; color: #FFFFFF;
  border: 2px solid #D9B46C;
  box-shadow: 0 6px 0 rgba(0,0,0,.28);
  transition: transform .15s ease, box-shadow .15s ease;
}
.donate-btn-venmo{ background: linear-gradient(180deg, #C94444, #A33232); }
.donate-btn-cashapp{ background: linear-gradient(180deg, #4F6F55, #3F5C45); }
.donate-btn:hover{ transform: translateY(-2px); box-shadow: 0 8px 0 rgba(0,0,0,.28); }
.donate-btn:active{ transform: translateY(3px); box-shadow: 0 3px 0 rgba(0,0,0,.28); }
.donate-btn:focus-visible{ outline: 3px solid #F5DBA3; outline-offset: 3px; }
.donate-btn-icon{
  width: 38px; height: 38px; flex: 0 0 38px; padding: 8px; border-radius: 50%;
  background: #F7F3EC; fill: none; stroke: #8E2B2B; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.donate-btn-cashapp .donate-btn-icon{ stroke: #3F5C45; }
.donate-btn-text{ display: flex; flex-direction: column; line-height: 1.25; }
.donate-btn-text strong{ font-size: 16px; font-weight: 700; color: #FFFFFF; }
.donate-btn-text small{ font-size: 12.5px; color: #FBEFD9; font-weight: 500; }

/* Small stockings hung on the mantel (decoration) */
.stocking{
  position: relative; display: block; width: 52px; height: 74px;
  background: #B83A3A; border-top: 16px solid #FFFFFF;
  border-radius: 6px 6px 30px 12px;
  box-shadow: 0 5px 0 rgba(0,0,0,.2);
  transform-origin: top center;
}
.stocking-cashapp{ background: #3F5C45; transform: rotate(3deg); }
.stocking-gold{ background: #C9A25E; transform: rotate(-3deg); }
.stocking::after{ /* hook up to the mantel */
  content: ""; position: absolute; top: -28px; left: 50%; width: 3px; height: 12px; background: #D9B46C; transform: translateX(-50%);
}

/* Inside the house the content column is the living-room wall */
#golf, #gallery, #donate{ border: 0; }
/* Golf and See the Magic share one row */
.duo2{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 32px); max-width: none; margin: 0; padding: 0 var(--pad); align-items: start;
}
.duo2 > section > .wrap{ padding: 0; max-width: none; }
.duo2 #golf .golf-panel, #golf .golf-panel{ grid-template-columns: 1fr; justify-content: stretch; gap: 0; }
.duo2 #golf .invitation{ max-width: none; width: 100%; }
.duo2 #golf .invitation .golf-facts{ grid-template-columns: 1fr; }
.duo2 #golf .section-head .sub{ font-size: 13.5px; }
.duo2 #gallery .gallery{ gap: 12px; }
@media (max-width: 900px){ .duo2{ grid-template-columns: 1fr; } }


@media (max-width: 560px){
  #golf .invitation{ grid-template-columns: 1fr; }
  #golf .invitation > *:not(.golf-poster), #golf .invitation .golf-main > *{ grid-column: 1; }
  #golf .invitation .golf-poster.taped{ grid-row: auto; max-width: 220px; justify-self: center; }
}

/* Golf invitation, organized: tagline / when + where / what's included / buttons / contact */
/* flyer sits inside the card on the left; details stack on the right */
#golf .invitation{
  display: grid; grid-template-columns: minmax(130px, 34%) minmax(0, 1fr);
  column-gap: 22px; row-gap: 12px; align-content: start; text-align: left;
}
#golf .invitation > *:not(.golf-poster), #golf .invitation .golf-main > *{ grid-column: 2; }
#golf .invitation .golf-poster.taped{ grid-column: 1; grid-row: 1 / span 6; align-self: start; margin-top: 8px; transform: rotate(-2deg); }
#golf .invitation .golf-main{ display: contents; }
#golf .invitation .golf-eyebrow{
  order: 1; display: block; text-align: center; font-size: 11.5px; letter-spacing: 1.6px;
  padding-bottom: 10px; border-bottom: 1px solid rgba(217,180,108,.6);
}
#golf .invitation .golf-intro{ order: 2; margin: 0; font-size: 14px; line-height: 1.55; text-align: center; color: #3A332D; }
#golf .invitation .golf-facts{ order: 3; display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0; }
#golf .invitation .golf-fact{ display: grid; grid-template-columns: 58px minmax(0, 1fr); column-gap: 10px; align-items: baseline; }
#golf .invitation .golf-fact > *:not(.golf-fact-label){ grid-column: 2; }
#golf .invitation .golf-fact-label{ font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; }
#golf .invitation .golf-includes{
  order: 4; margin: 0; padding: 12px 0 0; border: 0; border-top: 1px dashed rgba(63,92,69,.4);
}
#golf .invitation .golf-includes ul{ columns: 2; column-gap: 18px; }
#golf .invitation .golf-actions{ order: 5; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
#golf .invitation .golf-actions .btn{ width: 100%; justify-content: center; text-align: center; }
#golf .invitation .golf-contact{
  order: 6; margin: 0; padding-top: 10px; border-top: 1px solid rgba(217,180,108,.45);
  font-size: 12.5px; text-align: center;
}

/* Golf and the gallery hang on the chimney bricks too */
#golf, #golf.band, #gallery, #gallery.band{ background: transparent; padding: clamp(18px, 2vw, 30px) 0; }

/* ---------- Living room wall: Golf ---------- */
#golf .golf-panel{ background: transparent; border: 0; box-shadow: none; overflow: visible; gap: clamp(24px, 3vw, 44px); }
#golf .golf-panel{ grid-template-columns: minmax(170px, 260px) minmax(0, 560px); justify-content: center; align-items: start; }
/* compact invitation card */
#golf .invitation{ padding: 20px 24px; outline-offset: -8px; }
#golf .invitation .golf-main, #golf .invitation .golf-includes{ padding: 0; }
#golf .invitation .golf-facts{ grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0 14px; }
#golf .invitation .golf-fact strong{ font-size: 16px; }
#golf .invitation .golf-fact-note, #golf .invitation .golf-contact{ font-size: 13px; }
#golf .invitation .golf-actions{ gap: 10px; margin: 0 0 12px; }
#golf .invitation .golf-actions .btn{ padding: 9px 16px; font-size: 14px; }
#golf .invitation .golf-includes{ margin-top: 12px; padding-top: 12px; }
#golf .invitation .golf-includes h3{ margin: 0 0 8px; font-size: 12px; }
#golf .invitation .golf-includes ul{ columns: 2; column-gap: 20px; font-size: 13.5px; }
#golf .invitation .golf-includes li{ margin: 0 0 4px; }
@media (max-width: 900px){ #golf .golf-panel{ grid-template-columns: 1fr; } }
#golf .golf-poster.taped{ overflow: visible; transform: rotate(-2deg); background: #FFFFFF; box-shadow: 0 14px 0 rgba(0,0,0,.14); }
#golf .golf-poster.taped::before, #golf .golf-poster.taped::after{
  content: ""; position: absolute; top: -12px; width: 90px; height: 28px; z-index: 2;
  background: rgba(245,219,163,.75); box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
#golf .golf-poster.taped::before{ left: -18px; transform: rotate(-30deg); }
#golf .golf-poster.taped::after{ right: -18px; transform: rotate(30deg); }
#golf .invitation{
  background: #FBF6EA; color: #2A2420;
  border: 2px solid var(--gold); outline: 2px solid var(--gold); outline-offset: -10px;
  border-radius: 6px; padding: clamp(24px, 3vw, 38px);
  box-shadow: 0 14px 0 rgba(0,0,0,.14);
}
#golf .invitation :is(p, li, span, strong, h3, div){ color: #2A2420; }
#golf .invitation :is(.golf-eyebrow, .golf-fact-label, .golf-includes h3){ color: #3F5C45; }
#golf .invitation .golf-includes{ background: transparent; border-color: rgba(63,92,69,.3); }
#golf .invitation a:not(.btn){ color: #8E2B2B; border-color: rgba(142,43,43,.4); }
#golf .invitation a:not(.btn):hover{ color: #6E1F1F; }
#golf .invitation .btn.primary{ color: #FFFFFF; }
#golf .invitation .btn.gold{ color: #22200F; }

/* ---------- Living room wall: Gallery ---------- */
#gallery .ph.frame{
  border: 10px solid #C9A25E; outline: 2px solid #8A6A3A; border-radius: 4px;
  box-shadow: 0 14px 0 rgba(0,0,0,.14);
  transition: transform .25s ease;
}
#gallery .ph.frame:nth-child(1){ transform: rotate(-1.5deg); }
#gallery .ph.frame:nth-child(2){ transform: rotate(2deg); }
#gallery .ph.frame:nth-child(3){ transform: rotate(-1deg); }
#gallery .ph.frame:nth-child(4){ transform: rotate(1.5deg); }
#gallery .ph.frame:nth-child(5){ transform: rotate(-2deg); }
#gallery .ph.frame:hover{ transform: rotate(0) translateY(-4px); }
#gallery .ph.frame:focus-visible{ transform: rotate(0); outline: 3px solid #0E2A20; outline-offset: 4px; }

/* ---------- Under the tree: Sponsors as presents ---------- */
#sponsors.stop{
  padding: clamp(24px, 2.6vw, 40px) 0 28px; min-height: 0;
  background-size: auto 100%; background-position: right bottom;
  display: flex; flex-direction: column; justify-content: space-between;
}
#sponsors .wrap{ display: flex; flex-direction: column; justify-content: space-between; height: 100%; gap: 32px; width: 100%; }
#sponsors .section-head{ margin: 0; max-width: 100%; padding: 14px 20px; }
#sponsors .ribbon-title{ font-size: clamp(22px, 2.2vw, 30px); }
/* presents in one row at the foot of the tree */
#sponsors .presents{ max-width: none; flex-wrap: nowrap; justify-content: center; gap: 10px; position: relative; z-index: 1; }
#sponsors .presents .present{ flex: 1 1 0; width: auto; max-width: 150px; }
#sponsors .presents{ display: flex; align-items: flex-end; }
#sponsors .present{
  position: relative; display: grid; place-items: center;
  width: clamp(72px, 5.6vw, 92px); height: auto; aspect-ratio: 1; padding: 0;
  border-radius: 8px; border: 0; overflow: visible;
  background:
    linear-gradient(to right, transparent 44%, #D9B46C 44% 56%, transparent 56%),
    linear-gradient(to bottom, transparent 44%, #D9B46C 44% 56%, transparent 56%),
    var(--box, #E25555);
  box-shadow: 0 10px 0 rgba(0,0,0,.14);
}
#sponsors .present:nth-child(2){ --box: #3F5C45; }
#sponsors .present:nth-child(3){ --box: #0E2A20; }
#sponsors .present:nth-child(4){ --box: #C94444; }
#sponsors .present::before{ /* bow */
  content: ""; position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  width: 46px; height: 22px;
  background: radial-gradient(ellipse at 25% 50%, #D9B46C 45%, transparent 47%), radial-gradient(ellipse at 75% 50%, #D9B46C 45%, transparent 47%);
}
#sponsors .present img, #sponsors .present img.boxed{
  position: relative; z-index: 1;
  width: 64%; height: auto; max-height: none; aspect-ratio: 1;
  object-fit: contain; padding: 7%;
  background: #FFFFFF; border: 3px solid #D9B46C; border-radius: 50%;
}
#sponsors .present:hover img{ transform: scale(1.05); }
#sponsors .present:focus-visible{ outline: 3px solid #0E2A20; outline-offset: 4px; }

/* The tree stands on the same wallpaper as the room above, so the wall runs unbroken to the floor */
.chimney > #sponsors, .chimney > #sponsors.stop{
  background:
    url("../assets/scene/tree-only.svg") center bottom 70px / auto 74% no-repeat;
}

/* ---------- Floor (footer) ---------- */
.site-footer{
  background: repeating-linear-gradient(to bottom, #3A2A1C 0 38px, #2E2116 38px 40px);
  border-top: 10px solid #6E8F73;
}

/* Section headings: script lettering straight on the wallpaper */
.chimney .section-head, #golf .section-head, #gallery .section-head, #sponsors .section-head{
  background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0;
}
.chimney .section-head::before, .chimney .section-head::after{ display: none; }
.chimney .ribbon-title, #sponsors .ribbon-title{
  font-family: "Dancing Script", Georgia, serif; font-weight: 700;
  font-size: clamp(42px, 4.8vw, 64px); color: #0E2A20; letter-spacing: 0;
  text-shadow: 0 2px 0 rgba(247,243,236,.9);
}
.chimney .section-head .sub{ color: #2A2420; }
#donate .chalkboard h2{ font-family: "Dancing Script", Georgia, serif; font-weight: 700; }

/* the golf card is a note, like Why We Do This */
#golf .invitation{
  position: relative;
  background-color: #FBF6EA;
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(110,143,115,.28) 31px 32px);
  border: 0; outline: 0; border-radius: 4px;
  padding: 44px clamp(20px, 3vw, 40px) 28px;
  transform: rotate(.8deg);
  box-shadow: 0 14px 0 rgba(0,0,0,.14), 0 0 0 1px rgba(110,143,115,.35);
}
#golf .invitation::before{ /* red thumbtack */
  content: ""; position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #F17E7E, #C94444 60%, #8E2B2B);
  box-shadow: 0 3px 0 rgba(0,0,0,.3);
}
#golf .invitation :is(p, li, span, strong, div){ color: #2A2420; }
#golf .invitation .golf-intro{ font-size: 16px; line-height: 1.7; text-align: left; color: #2A2420; }
#golf .invitation .golf-eyebrow{ border-bottom-color: rgba(142,43,43,.35); text-align: left; }
#golf .invitation .golf-contact{ border-top: 2px dashed rgba(142,43,43,.35); text-align: left; }
#golf .invitation .golf-includes{ border-top: 2px dashed rgba(142,43,43,.35); }
#golf .invitation .golf-poster .golf-poster-cue{ color: #F7F3EC; }

/* ---------- Phones ---------- */
@media (max-width: 820px){
  html{ scroll-padding-top: 100px; }
}
@media (max-width: 1100px){
  .hero.stop-sky .hero-side{ grid-template-columns: 1fr; width: min(720px, 100%); margin-top: 40px; }
  .stop-sky{ padding-bottom: clamp(200px, 24vw, 280px); }
}
@media (max-width: 760px){
  .chimney{ --shaft-w: 56px; grid-template-columns: 56px minmax(0, 1fr); }
  .chimney > .chimney-content{ grid-column: 2; }
  .chimney{ --hearth-h: 250px; }
  .hearth .mantel{ margin: 0 -6px 0 -2px; height: 16px; }
  .chimney > #sponsors{ grid-column: 1 / -1; grid-row: 3; }
  .shaft::after{ right: -6px; width: 12px; }
  .shaft-top img{ width: 100%; }
  .shaft-santa{ width: 46px; margin: 24px auto; top: 45vh; }
  .shaft-santa::before{ height: 50px; }
  .soot.s1, .soot.s2{ width: 14px; height: 14px; }
  .soot.s3{ display: none; }
  .chimney .section-head{ padding: 12px 16px; }

  .stop-wall{ background-size: 100% auto; background-position: center top; }
  #impact .impact{ grid-template-columns: 1fr; }
  .chimney > #sponsors, .chimney > #sponsors.stop{
    min-height: 420px;
    background:
      url("../assets/scene/tree-only.svg") center bottom 50px / auto 64% no-repeat;
  }
  #sponsors .presents{ justify-content: center; }
  #sponsors .wrap{ padding-right: var(--pad); }
  #sponsors .section-head{ max-width: none; }
  #sponsors .presents{ justify-content: center; }
  .topbar .site-logo, .topbar-inner .brand .site-logo{ height: 48px; }
  .topbar .topbar-inner{ min-height: 60px; }

  .stop-sky{ padding-top: 0; padding-bottom: 96px; }
  .hero.stop-sky .hero-side, .hero.stop-sky .side-stack{ grid-template-columns: 1fr; }
  .shaft{ border-left-width: 6px; }
  .sky-sleigh{ position: relative; display: block; width: 78%; margin: 8px auto 4px; right: auto; top: auto; }

  .fire-surround{ padding: 14px 4px 0; border-left-width: 6px; }
  .firebox{ height: 170px; margin: 0; border-width: 6px; border-radius: 40px 40px 0 0 / 30px 30px 0 0; }
  .firebox .santa-at-fire{ width: 46px; }
  .firebox .f1, .firebox .f3{ display: none; }
  .firebox .f2{ width: 16px; height: 30px; right: 8%; }
  .hearth .stockings{ margin: -6px 0 8px; }
  .hearth .stocking{ width: 22px; height: 32px; border-top-width: 7px; }
  .hearth .stocking-cashapp, .hearth .stocking-gold{ display: none; }
  .donate-btn{ width: 100%; }
  #sponsors .presents .present{ max-width: 84px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .sky-sleigh, body:not(.intro-active) .sky-sleigh{ animation: none !important; }
  .shaft-santa img, .firebox .flame{ animation: none; }
  .soot{ animation: none; display: none; }
  .donate-btn, #gallery .ph.frame{ transition: none; }
}

/* donate pills used outside the chalkboard too */
.hero .gift-tag-box .donate-actions{ display: flex; flex-direction: column; gap: 10px; }
.hero .gift-tag-box .donate-btn{ padding: 7px 16px 7px 7px; }
.hero .gift-tag-box .donate-btn-icon{ width: 32px; height: 32px; flex-basis: 32px; padding: 6px; }
.hero-actions{ align-items: center; }
.footer-buttons{ display: flex; flex-wrap: nowrap; gap: 8px; }
.footer-buttons .donate-btn{ flex: 0 1 auto; min-width: 0; }
.footer-buttons .donate-btn-text strong{ font-size: 14px; white-space: nowrap; }
.footer-buttons .donate-btn-text small{ font-size: 11px; white-space: nowrap; }
.footer-buttons .donate-btn, .mobile-menu-cta .donate-btn{ padding: 7px 16px 7px 7px; }
.footer-buttons .donate-btn-icon, .mobile-menu-cta .donate-btn-icon{ width: 30px; height: 30px; flex-basis: 30px; padding: 6px; }
.mobile-menu-cta{ display: flex; flex-direction: column; gap: 10px; }
#golf .invitation .golf-actions .donate-btn{ padding: 7px 14px 7px 7px; justify-content: flex-start; }
#golf .invitation .golf-actions .donate-btn-icon{ width: 30px; height: 30px; flex-basis: 30px; padding: 6px; }
#golf .invitation .golf-actions .donate-btn-text strong{ color: #FFFFFF; font-size: 14px; white-space: nowrap; }
#golf .invitation .golf-actions{ grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
#golf .invitation .golf-includes li{ line-height: 1.3; margin: 0 0 6px; padding-top: 0; padding-bottom: 0; }
/* bigger Follow buttons in the footer */
.footer-social .social-icons{ gap: 14px; }
.footer-social .social-icons a{ width: 52px; height: 52px; }
.footer-social .social-icons svg{ width: 24px; height: 24px; }
#donate .chalkboard .sub{ max-width: none; }
#donate .chalkboard h2, #donate .chalkboard .sub{ text-align: center; }
#donate .chalkboard .donate-btns{ justify-content: center; }
#donate .chalkboard .side-card h3, #donate .chalkboard .side-card > p{ text-align: center; }

/* ---------- Phones: everything centered; the chimney runs to the footer ---------- */
@media (max-width: 760px){
  /* chimney + Santa go all the way down beside the tree */
  .chimney > .shaft{ grid-row: 1 / 4; }
  .chimney > .chimney-content{ grid-column: 2; grid-row: 1; }
  .chimney > #donate{ grid-column: 2; grid-row: 2; }
  .chimney > #sponsors{ grid-column: 2; grid-row: 3; }
  .chimney > .hearth{ grid-column: 1; grid-row: 3; }

  /* center everything */
  .chimney, .chimney :is(h2, h3, p, li, .section-head, .golf-eyebrow, .golf-intro, .golf-contact, .stocking-tag){ text-align: center; }
  #story .letter p{ text-align: center; }
  #how .sign{ grid-template-columns: 1fr; justify-items: center; text-align: center; }
  #how .sign .card-icon{ grid-row: auto; }
  .hero-actions{ justify-content: center; }
  .hero-actions .donate-btn{ justify-content: center; }
  .donate-btn{ justify-content: center; }
  .donate-btn-text{ align-items: center; }

  /* numbers: one per row so nothing overlaps */
  .letter #impact .impact{ grid-template-columns: 1fr; row-gap: 10px; }

  /* golf card: one column, flyer on top */
  #golf .invitation{ grid-template-columns: 1fr; padding: 40px 16px 22px; }
  #golf .invitation > *:not(.golf-poster), #golf .invitation .golf-main > *{ grid-column: 1; }
  #golf .invitation .golf-poster.taped{ grid-row: auto; max-width: 200px; justify-self: center; }
  #golf .invitation .golf-intro, #golf .invitation .golf-contact, #golf .invitation .golf-eyebrow{ text-align: center; }
  #golf .invitation .golf-fact{ grid-template-columns: 1fr; justify-items: center; text-align: center; }
  #golf .invitation .golf-fact > *{ grid-column: 1 !important; }
  #golf .invitation .golf-includes ul{ columns: 1; }
  #golf .invitation .golf-includes li{ list-style: none; }
  #golf .invitation .golf-includes li::before{ display: none; }
  #golf .invitation .golf-actions{ grid-template-columns: 1fr; }

  /* sponsors beside the shaft */
  .chimney > #sponsors .presents{ flex-wrap: wrap; justify-content: center; }
  .chimney > #sponsors .presents .present{ flex: 0 0 calc(50% - 10px); max-width: 110px; }

  /* footer centered */
  .site-footer, .site-footer :is(h3, h4, p){ text-align: center; }
  .footer-buttons, .social-icons{ justify-content: center; }
}
@media (max-width: 760px){
  .chimney > #sponsors .presents{ flex-wrap: nowrap; gap: 6px; }
  .chimney > #sponsors .presents .present{ flex: 1 1 0; max-width: 70px; }
}

/* ---------- Logo: transparent, with a soft glow so the dark lion reads on the night colors ---------- */
.topbar .site-logo, .topbar-inner .brand .site-logo{
  background: none; border-radius: 0; padding: 0; box-shadow: none;
  filter: drop-shadow(0 0 6px rgba(247,243,236,.55)) drop-shadow(0 0 14px rgba(247,243,236,.25));
}
.hero-logo, .footer-logo{
  display: block; height: auto;
  filter: drop-shadow(0 0 8px rgba(247,243,236,.55)) drop-shadow(0 0 20px rgba(247,243,236,.25));
}
.hero-logo{ width: clamp(200px, 18vw, 280px); margin: 0 auto 14px; }
.footer-logo{ width: 190px; margin: 0 0 14px; }
/* desktop: the logo lives above "Celebrating 20 Years", not in the nav */
@media (min-width: 821px){
  .topbar-inner .brand{ visibility: hidden; }
}
@media (max-width: 820px){
  .hero-logo{ display: none; }
  .footer-logo{ margin: 0 auto 14px; }
}
/* phones: the fireplace starts level with "Proudly Supported By"; the shaft ends there */
@media (max-width: 760px){
  .chimney > .shaft{ grid-row: 1 / 3; padding-bottom: 0; }
  .chimney > .hearth{ grid-row: 3; align-self: stretch; justify-content: flex-start; min-height: 0; }
  .chimney > .hearth .hearth-face{ flex: 1; display: flex; }
  .chimney > .hearth .fire-surround{ flex: 1; justify-content: flex-start; }
}
.letter #impact .section-head, .letter #impact .painted, .letter #impact .painted strong, .letter #impact .painted > span{ text-align: center; justify-content: center; }
.letter #impact .painted{ display: flex; flex-direction: column; align-items: center; }
/* every button: label centered */
.btn, .donate-btn, #golf .invitation .golf-actions .donate-btn{ justify-content: center; text-align: center; }
.donate-btn-text{ align-items: center; text-align: center; }
/* phones: fire sits right above the footer; brick chimney fills above the mantel */
@media (max-width: 760px){
  .chimney > .hearth{
    justify-content: flex-end;
    background:
      linear-gradient(to bottom, rgba(40,14,10,.1), rgba(245,170,90,.2)),
      url("../assets/scene/shaft.svg") repeat;
    background-size: auto, 72px auto;
  }
  .chimney > .hearth .hearth-face{ flex: 0 0 auto; }
  .chimney > .hearth .fire-surround{ flex: 0 0 auto; justify-content: flex-end; padding-bottom: 0; }
}
@media (max-width: 760px){ .chimney > .hearth .firebox{ height: 96px; } }
/* (footer logo now lives in its own first grid column) */
/* desktop: the fireplace starts level with the Donate chalkboard; the open shaft ends there */
@media (min-width: 761px){
  .chimney > .shaft{ grid-row: 1; padding-bottom: 0; }
  .chimney > .hearth{
    grid-row: 2; align-self: stretch; justify-content: flex-start; min-height: 0;
    padding-top: clamp(24px, 2.6vw, 40px);
    background:
      linear-gradient(to bottom, rgba(40,14,10,.1), rgba(245,170,90,.25)),
      url("../assets/scene/shaft.svg") repeat;
    background-size: auto, 72px auto;
  }
}
/* phones: the fireplace sits right under the Donate chalkboard (top of the sponsors row) */
@media (max-width: 760px){
  .chimney > .hearth{ justify-content: flex-start; }
}
/* both sizes: the fireplace stretches down so the fire ends right above the footer */
.chimney > .hearth{ align-self: stretch; justify-content: flex-start; }
.chimney > .hearth .hearth-face{ flex: 1 1 auto; display: flex; }
.chimney > .hearth .fire-surround{ flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-start; padding-bottom: 0; }
.chimney > .hearth .firebox{ flex: 1 1 auto; height: auto; min-height: 140px; }
@media (max-width: 760px){
  .chimney > .hearth .hearth-face{ flex: 1 1 auto; }
  .chimney > .hearth .fire-surround{ flex: 1 1 auto; }
  .chimney > .hearth .firebox{ height: auto; min-height: 90px; }
}
.mobile-menu-cta{ padding-bottom: 18px; }
/* footer: the logo gets its own column, far left */
@media (min-width: 901px){
  .site-footer .footer-grid{ grid-template-columns: auto 2fr 1fr 1fr 1.3fr; gap: 36px; }
}
.footer-logo-col{ display: flex; justify-content: flex-start; }
.footer-logo-col .footer-logo{ width: clamp(220px, 17vw, 280px); margin: 0; }
@media (max-width: 900px){
  .footer-logo-col{ justify-content: center; }
}
/* phones: bigger presents (2 per row) with bigger logos so they're readable */
@media (max-width: 760px){
  .chimney > #sponsors .presents{ flex-wrap: wrap; gap: 14px; justify-content: center; }
  .chimney > #sponsors .presents .present{ flex: 0 0 calc(50% - 10px); max-width: 140px; }
  .chimney > #sponsors .present img, .chimney > #sponsors .present img.boxed{ width: 82%; padding: 4%; }
}
@media (max-width: 760px){
  .chimney > #sponsors, .chimney > #sponsors.stop{
    background: url("../assets/scene/tree-only.svg") center 92px / auto 250px no-repeat;
  }
  .chimney > #sponsors .presents{ margin-top: 250px; }
}
.footer-logo-col{ flex-direction: column; align-items: center; gap: 14px; }
.footer-logo-col .footer-buttons{ flex-direction: column; flex-wrap: nowrap; align-items: stretch; width: 100%; }
.footer-logo-col .footer-buttons .donate-btn{ width: 100%; }
@media (max-width: 900px){ .footer-logo-col .footer-buttons{ flex-direction: row; justify-content: center; } .footer-logo-col .footer-buttons .donate-btn{ width: auto; } }
/* golf contact line on one line on wide screens */
@media (min-width: 1100px){
  #golf .invitation .golf-contact{ white-space: nowrap; font-size: clamp(11px, .82vw, 13px); }
  #golf .invitation .golf-contact br{ display: none; }
}
@media (min-width: 1100px){
  #golf .invitation .golf-contact{ grid-column: 1 / -1 !important; text-align: center; font-size: clamp(11px, .9vw, 13.5px); }
}
.footer-logo-col .footer-logo{ width: clamp(150px, 12vw, 190px); }
/* phones: the tree is the backdrop behind Proudly Supported By and the presents */
@media (max-width: 760px){
  .chimney > #sponsors, .chimney > #sponsors.stop{
    background: url("../assets/scene/tree-only.svg") center 30px / auto calc(100% - 50px) no-repeat;
  }
  .chimney > #sponsors .presents{ margin-top: 150px; }
  .chimney > #sponsors .ribbon-title{ text-shadow: 0 0 10px #F7F3EC, 0 0 4px #F7F3EC; }
}
/* phones: shorter sponsors area */
@media (max-width: 760px){
  .chimney > #sponsors, .chimney > #sponsors.stop{ padding-top: 16px; padding-bottom: 20px; }
  .chimney > #sponsors .wrap{ gap: 0; }
  .chimney > #sponsors .presents{ margin-top: 70px; gap: 10px; }
  .chimney > #sponsors .presents .present{ max-width: 118px; }
}
/* presents: 2 columns x 2 rows on phones */
@media (max-width: 760px){
  .chimney > #sponsors .presents{
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px; max-width: 250px; margin-left: auto; margin-right: auto; justify-items: center;
  }
  .chimney > #sponsors .presents .present{ width: 100%; max-width: 120px; flex: none; }
}
/* phones: presents on the left, tree on the right */
@media (max-width: 760px){
  .chimney > #sponsors, .chimney > #sponsors.stop{
    background: url("../assets/scene/tree-only.svg") right 6px bottom 20px / 38% auto no-repeat;
  }
  .chimney > #sponsors .presents{
    margin: 18px 0 0 0; max-width: 60%; gap: 8px;
  }
  .chimney > #sponsors .presents .present{ max-width: 96px; }
}
@media (max-width: 900px){ .footer-logo-col .footer-logo{ width: 240px; } }
@media (max-width: 760px){ .site-footer .footer-about{ display: none; } }
/* phones: big tree in the background on the right; presents overlap it */
@media (max-width: 760px){
  .chimney > #sponsors, .chimney > #sponsors.stop{
    background: url("../assets/scene/tree-only.svg") right -30px bottom 10px / auto 92% no-repeat;
  }
  .chimney > #sponsors .presents{ position: relative; z-index: 1; max-width: 66%; }
  .chimney > #sponsors .presents .present{ max-width: 104px; }
}
/* phones footer order: logo, Follow, then Venmo/CashApp, then signup */
@media (max-width: 900px){
  .site-footer .footer-grid{ display: flex; flex-direction: column; align-items: center; }
  .footer-logo-col{ display: contents; }
  .footer-logo-col .footer-logo{ order: 1; }
  .site-footer .footer-social{ order: 2; }
  .footer-logo-col .footer-buttons{ order: 3; }
  .site-footer .footer-nav{ order: 4; }
  .site-footer .footer-signup{ order: 5; width: 100%; }
}
@media (max-width: 760px){ #golf .invitation .golf-poster{ display: none; } }
@media (max-width: 760px){
  .chimney > #sponsors .presents{ max-width: 82%; gap: 10px; }
  .chimney > #sponsors .presents .present{ max-width: 130px; }
}

/* sliding Santa fades in inside the chimney and out before the fireplace (only when JS runs) */
.js-santa .shaft-santa{ opacity: 0; transition: opacity .35s ease; }
.js-santa .shaft-santa.is-sliding{ opacity: 1; }
@media (prefers-reduced-motion: reduce){ .js-santa .shaft-santa{ transition: none; } }

/* phones: a slightly wider chimney and bigger Santa */
@media (max-width: 760px){
  .chimney{ --shaft-w: 74px; grid-template-columns: 74px minmax(0, 1fr); }
  .shaft-santa{ width: 62px; }
  .chimney > .hearth .firebox .santa-at-fire{ width: 60px; }
}
@media (max-width: 760px){ .hero.stop-sky .hero-actions{ margin-top: 26px; } }
.hero.stop-sky .hero-actions{ margin-top: 26px; }

/* notes: warmer yellow paper with faint lines (letter, golf card, donate) */
#story .letter, #golf .invitation, #donate .chalkboard{
  background-color: #FFF4C9 !important;
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(110,143,115,.12) 31px 32px) !important;
}
/* Donate as a note: dark ink, wood frame kept */
#donate .chalkboard{ box-shadow: 0 12px 0 rgba(0,0,0,.18); }
#donate .chalkboard h2{ color: #0E2A20; }
#donate .chalkboard .sub, #donate .chalkboard p{ color: #2A2420; }
#donate .chalkboard .side-card{ border-color: rgba(142,43,43,.35); }
#donate .chalkboard .side-card h3{ color: #0E2A20; }
#donate .chalkboard .handle{ background: rgba(255,255,255,.55); border-color: rgba(42,36,32,.18); }
#donate .chalkboard .handle strong{ color: #2A2420; }
#donate .chalkboard .handle code{ color: #8E2B2B; }

/* headings on one line where they fit */
.duo .ribbon-title{ white-space: nowrap; font-size: clamp(34px, 3.4vw, 56px); }
.duo2 .ribbon-title, #sponsors .ribbon-title{ font-size: clamp(32px, 3.2vw, 54px); }
@media (max-width: 760px){ .duo .ribbon-title{ white-space: normal; font-size: 40px; } }
.duo .letter #impact .ribbon-title{ white-space: normal; font-size: clamp(28px, 2.6vw, 40px); }
/* Donate note matches the other notes: no frame, pinned, slight tilt */
#donate .chalkboard{
  position: relative; border: 0 !important; border-radius: 4px;
  transform: rotate(-.8deg);
  box-shadow: 0 14px 0 rgba(0,0,0,.14), 0 0 0 1px rgba(110,143,115,.35) !important;
  padding-top: 44px;
}
#donate .chalkboard::before{
  content: ""; position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #F17E7E, #C94444 60%, #8E2B2B);
  box-shadow: 0 3px 0 rgba(0,0,0,.3);
}
#donate .chalkboard .handle{ display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }