:root {
  --brown-950: #160d06;
  --brown-900: #241509;
  --brown-800: #3b210e;
  --orange: #ee750e;
  --orange-dark: #c75508;
  --cream: #f7e8d5;
  --cream-soft: #fff3e4;
  --ink: #25170f;
  --line: #d99a62;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--brown-950); color: var(--ink); font-family: "Trebuchet MS", Arial, sans-serif; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.page-width { width: min(1320px, calc(100% - 44px)); margin-inline: auto; }
.section-cream { background: radial-gradient(circle at 54% 20%, #fff7ec 0, var(--cream) 55%, #ecd1b3 100%); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

h1, h2, h3, p { margin-top: 0; }
h2, h3 { font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; letter-spacing: .025em; text-transform: uppercase; }

.hero {
  --hero-canvas-width: 1920px;
  --hero-counter-top: 81.5%;
  height: min(46.9792vw, 902px);
  position: relative;
  overflow: hidden;
  background: #100a05;
  color: white;
  isolation: isolate;
}
.hero::after { content: ""; position: absolute; z-index: 2; inset: 0; background: linear-gradient(90deg, rgba(8,4,2,.35) 0%, rgba(8,4,2,.12) 31%, transparent 57%); pointer-events: none; }
.hero__art { display: none; }
.hero__responsive-scene { display: none; }
.hero__desktop-scene { position: absolute; z-index: 1; inset: 0; overflow: hidden; }
.hero__desktop-scene img { position: absolute; max-width: none; user-select: none; }
.hero__background {
  position: absolute;
  inset: 0 0 calc(100% - var(--hero-counter-top));
  background: url('../images/hero-cafe-interior.png') center center / cover no-repeat;
}
.hero__composition {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(100%, var(--hero-canvas-width));
  height: 100%;
  aspect-ratio: 1920 / 902;
  transform: translateX(-50%);
}
.hero__plant { z-index: 4; left: -3.2%; bottom: -5%; width: auto; height: 72%; transform: scaleX(1.24); transform-origin: left bottom; filter: drop-shadow(0 12px 9px rgba(0,0,0,.42)); }
.hero__characters { left: 29%; top: -1.2%; width: 63%; }
.hero__characters--body { z-index: 2; }
.hero__counter-front {
  position: absolute;
  z-index: 3;
  top: var(--hero-counter-top);
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: url('../images/hero-countertop.png') center top / cover no-repeat;
  filter: drop-shadow(0 -8px 10px rgba(0,0,0,.42));
  pointer-events: none;
}
.hero__characters--hand,
.hero__characters--duck { z-index: 4; }
.hero__sign { z-index: 4; right: -1.5%; bottom: -1.5%; width: 30%; filter: drop-shadow(0 12px 9px rgba(0,0,0,.38)); }
.hero__content {
  position: absolute;
  z-index: 5;
  inset-block: 0;
  left: 50%;
  width: min(100%, var(--hero-canvas-width));
  transform: translateX(-50%);
}
.brand-logo { position: absolute; top: 4%; left: 7.5%; width: 16.7%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0,0,0,.35)); }
.hero__headline-art { position: absolute; top: 47%; left: 6.9%; width: 31.2%; height: auto; user-select: none; }
.hero__headline-mobile { display: none; position: absolute; top: 49%; left: 8.2%; width: 30%; margin: 0; text-align: center; line-height: .88; text-transform: uppercase; transform: rotate(-1deg); }
.hero__headline-mobile::after { content: "✧  ♡  ✦     ✧  ♡  ✦"; display: block; margin-top: .08em; color: #f68a1e; font-family: Georgia, serif; font-size: clamp(15px, 1.5vw, 29px); font-style: normal; letter-spacing: .14em; }
.hero__headline-mobile span { display: block; white-space: nowrap; font-family: "Anton", Impact, sans-serif; font-size: clamp(30px, 3.4vw, 68px); font-weight: 400; letter-spacing: .035em; transform: scaleX(1.2); }
.hero__headline-mobile strong { display: block; white-space: nowrap; color: #f58a22; font-family: "Anton", Impact, sans-serif; font-size: clamp(45px, 5.4vw, 108px); font-weight: 400; letter-spacing: .015em; transform: scaleX(1.2); }
.hero__headline-mobile em { display: block; color: white; font-family: "Pacifico", "Brush Script MT", cursive; font-size: clamp(78px, 7.4vw, 148px); font-weight: 400; text-transform: none; line-height: .72; text-shadow: 0 4px 0 rgba(0,0,0,.25); transform: scaleX(1.25); }
.hero__content > p { position: absolute; left: 7.1%; bottom: 3.2%; width: 33.5%; margin: 0; font-family: "Anton", Impact, sans-serif; font-size: clamp(17px, 1.85vw, 37px); font-weight: 400; line-height: 1.24; letter-spacing: .035em; text-align: center; text-transform: uppercase; }

.section-dark { background: radial-gradient(circle at 50% 10%, #432813 0, #2d1a0b 45%, #180e06 100%); color: white; }
.menu-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 44px 0 36px;
  border-top: 2px solid #4b2a12;
}
.menu-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .32;
  background-image:
    radial-gradient(circle at 7% 18%, transparent 0 54px, rgba(213,125,42,.15) 55px 57px, transparent 58px),
    radial-gradient(circle at 94% 77%, transparent 0 76px, rgba(213,125,42,.12) 77px 79px, transparent 80px),
    radial-gradient(circle, rgba(255,222,177,.095) 0 1px, transparent 1.5px);
  background-size: auto, auto, 22px 22px;
  pointer-events: none;
}
.menu-shell {
  width: min(1720px, calc(100% - 64px));
  position: relative;
  z-index: 1;
  border: 2px solid #a75d13;
  border-radius: 22px;
  padding: 0 24px 24px;
  background: linear-gradient(145deg, rgba(41,23,10,.93), rgba(20,11,5,.91));
  box-shadow: inset 0 0 58px rgba(137,72,18,.18), 0 18px 38px rgba(8,4,1,.22);
}
.menu-shell h2 { font-family: "Anton", Impact, sans-serif; font-size: clamp(40px, 3.35vw, 64px); font-weight: 400; text-align: center; margin: 10px 0 14px; color: #f9e7dc; text-shadow: 0 3px 0 #4b260f; }
.menu-shell h2 span { color: #d86a13; font-family: Georgia, serif; padding-inline: 15px; }
.menu-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.menu-item {
  min-height: 172px;
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 14px;
  align-items: center;
  padding: 16px 16px 14px 12px;
  border: 1px solid rgba(171,91,22,.82);
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(75,41,16,.58), rgba(22,12,5,.72));
  box-shadow: inset 0 1px rgba(255,225,183,.06), 0 8px 16px rgba(7,3,1,.14);
}
.menu-item img { width: 108px; height: 126px; object-fit: contain; border-radius: 10px; filter: drop-shadow(0 8px 7px rgba(0,0,0,.34)); }
.menu-item__category { display: block; margin: 0 0 4px; color: #df7a20; font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.menu-item h3 { font-family: "Anton", Impact, sans-serif; font-size: 17px; font-weight: 400; letter-spacing: .02em; margin: 0 0 9px; color: #fff; }
.menu-item p { font-family: "Arial Narrow", Arial, sans-serif; font-size: 15px; line-height: 1.42; margin-bottom: 8px; color: #fff4e8; }
.menu-item strong { color: #ff9a12; font-size: 17px; }
.menu-note { color: #f38a14; text-align: center; font-size: 17px; margin: 20px 0 0; }
.menu-note span { margin: 0 9px; }

@media (max-width: 1280px) and (min-width: 981px) {
  .menu-shell { width: calc(100% - 48px); }
  .menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.about-section { padding: 28px 0 16px; }
.about-card { display: grid; grid-template-columns: 45% 55%; border-radius: 26px; overflow: hidden; background: rgba(255,248,239,.86); box-shadow: 0 3px 18px rgba(70,37,11,.18); }
.about-image-wrap { min-height: 690px; overflow: hidden; background: #f7e5cf; }
.about-image-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: 30% center; }
.about-copy { padding: 42px 8% 28px 4%; }
.about-story > h2 { font-size: clamp(42px, 4.4vw, 64px); margin-bottom: 20px; }
.about-story > h2 span { color: #382316; }
.about-story > p { font-family: Arial, sans-serif; font-size: 17px; line-height: 1.48; margin-bottom: 20px; }
.about-story .lead { font-size: 18px; }
.about-icon {
  width: 58px;
  height: 64px;
  overflow: visible;
  color: #382116;
  stroke: currentColor;
  stroke-width: 3.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}
.about-icon__accent-line { stroke: #d45f0a; }
.about-icon__accent-fill { fill: #d45f0a; stroke: #d45f0a; }
.about-icon__fine { stroke-width: 2.5; }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line); }
.values-grid article { display: grid; grid-template-columns: 58px 1fr; gap: 10px; padding: 0 16px; border-right: 1px dotted var(--orange); }
.values-grid article:first-child { padding-left: 0; }
.values-grid article:last-child { border: 0; padding-right: 0; }
.values-grid article > .about-icon { width: 56px; height: 62px; }
.values-grid h3 { margin: 0 0 5px; font-size: 17px; }
.values-grid p { margin: 0; font-size: 14px; line-height: 1.45; }

@media (min-width: 981px) {
  .about-section {
    padding: 24px 0;
    background: radial-gradient(circle at 50% 0, #3b220f 0, #28160a 58%, #190e06 100%);
  }
  .about-card {
    width: min(1720px, calc(100% - 64px));
    grid-template-columns: 43.5% 56.5%;
    grid-template-rows: minmax(0, 1fr) auto;
    aspect-ratio: 1.765 / 1;
    border-radius: 22px;
    background: radial-gradient(circle at 62% 20%, #fff8ed 0, #f8ead8 56%, #efd4b8 100%);
    box-shadow: 0 18px 36px rgba(8,4,1,.24), inset 0 0 40px rgba(181,111,53,.06);
  }
  .about-image-wrap {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    aspect-ratio: auto;
    background: transparent;
  }
  .about-image-wrap img {
    width: 106%;
    max-width: none;
    height: auto;
    object-fit: initial;
    object-position: initial;
    transform: translateX(-3%);
  }
  .about-copy {
    display: contents;
    min-width: 0;
  }
  .about-story {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    padding: 50px 7.2% 24px 4.2%;
  }
  .about-story > h2 {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 20px;
    font-family: "Anton", Impact, Haettenschweiler, sans-serif;
    font-size: clamp(50px, 3.8vw, 68px);
    font-weight: 400;
    line-height: 1;
  }
  .about-story > h2 .about-icon--heading { width: 68px; height: 68px; }
  .about-story > p,
  .about-story .lead {
    max-width: 790px;
    font-size: clamp(17px, 1.05vw, 20px);
    line-height: 1.5;
    margin-bottom: 22px;
  }
  .values-grid {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 0;
    padding: 22px 3.2% 24px;
    border-top: 2px solid #d58b4e;
    background:
      radial-gradient(circle at 50% 0, rgba(255,255,255,.58), transparent 58%),
      linear-gradient(90deg, rgba(239,207,175,.62), rgba(255,246,233,.76) 50%, rgba(239,207,175,.62));
    box-shadow: inset 0 1px rgba(255,255,255,.74), inset 0 12px 22px rgba(200,124,55,.06);
  }
  .values-grid article {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    min-height: 92px;
    padding: 4px 44px;
    border-right: 2px dotted rgba(213,107,19,.72);
  }
  .values-grid article:first-child {
    padding-left: 32px;
  }
  .values-grid article:last-child {
    border-right: 0;
    padding-right: 32px;
  }
  .values-grid article > .about-icon { width: 76px; height: 80px; }
  .values-grid h3 { margin-bottom: 8px; font-size: 22px; }
  .values-grid p { max-width: 250px; font-size: 16px; line-height: 1.42; }
}

@media (max-width: 1280px) and (min-width: 981px) {
  .about-card {
    width: calc(100% - 48px);
    grid-template-columns: 41% 59%;
    grid-template-rows: minmax(0, 1fr) auto;
    aspect-ratio: auto;
    min-height: 730px;
  }
  .about-story { padding: 38px 5% 22px 4%; }
  .about-story > h2 { font-size: 50px; margin-bottom: 16px; }
  .about-story > p,
  .about-story .lead { font-size: 16px; line-height: 1.46; margin-bottom: 16px; }
  .values-grid { padding: 18px 20px 20px; }
  .values-grid article,
  .values-grid article:first-child,
  .values-grid article:last-child { grid-template-columns: 62px 1fr; gap: 11px; padding-inline: 18px; }
  .values-grid article > .about-icon { width: 62px; height: 66px; }
  .values-grid h3 { font-size: 18px; }
  .values-grid p { font-size: 14px; }
}

.visit-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 20px 0 8px;
}
.visit-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(62vw, 1100px);
  aspect-ratio: 1.9;
  left: 53%;
  bottom: -18%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(202,126,66,.17), rgba(234,190,145,.07) 48%, transparent 70%);
  filter: blur(10px);
  pointer-events: none;
}
.visit-grid {
  min-height: 390px;
  display: grid;
  grid-template-columns: 29% 19% 35% 17%;
  align-items: center;
  gap: 0;
}
.visit-copy { align-self: start; padding: 25px 0 0 32px; }
.visit-copy h2 { font-size: clamp(32px, 3.1vw, 45px); margin-bottom: 26px; }
.visit-copy address { font-style: normal; font-size: 17px; }
.visit-copy address p { display: grid; grid-template-columns: 28px 1fr; align-items: start; gap: 12px; margin-bottom: 18px; line-height: 1.5; }
.visit-icon { width: 27px; height: 27px; overflow: visible; fill: #cf5f0c; }
.visit-icon--clock { fill: none; stroke: #cf5f0c; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.visit-copy b { text-transform: uppercase; font-weight: 400; }
.visit-hours { display: grid; grid-template-columns: 102px 1fr; }
.community-badge { width: 100%; max-width: 220px; justify-self: center; }
.community-stamp-art,
.spread-joy-art { display: none; }
.community-stamp { display: none; }
.joy-van { width: 100%; transform: scale(1.14); transform-origin: center; }
.joy-van--desktop { display: none; }
.spread-joy { position: relative; align-self: center; font-family: "Brush Script MT", "Segoe Script", cursive; font-size: clamp(38px, 4vw, 56px); line-height: 1.2; transform: rotate(-8deg); text-align: center; }
.spread-joy .spread-joy__heart { display: block; font-size: 60px; }
.spread-joy__trail { display: none; }

@media (min-width: 981px) {
  .visit-section { padding: 0; border-top: 1px solid rgba(143,79,31,.22); }
  .visit-grid {
    width: min(1720px, calc(100% - 64px));
    min-height: clamp(390px, 30.25vw, 520px);
    grid-template-columns: 27.5% 19% 38% 15.5%;
  }
  .visit-copy { align-self: center; padding: 0 0 1% 6.5%; }
  .visit-copy h2 {
    margin-bottom: clamp(26px, 1.8vw, 34px);
    font-family: "Anton", Impact, Haettenschweiler, sans-serif;
    font-size: clamp(42px, 3.35vw, 60px);
    font-weight: 400;
    line-height: 1;
  }
  .visit-copy address { font-family: Arial, sans-serif; font-size: clamp(17px, 1.1vw, 21px); }
  .visit-copy address p {
    grid-template-columns: clamp(30px, 2.15vw, 39px) minmax(0, 1fr);
    gap: clamp(12px, 1vw, 18px);
    margin-bottom: clamp(18px, 1.45vw, 26px);
    line-height: 1.5;
  }
  .visit-icon { width: clamp(28px, 2vw, 36px); height: clamp(28px, 2vw, 36px); }
  .visit-hours { grid-template-columns: clamp(104px, 7.4vw, 132px) 1fr; row-gap: 2px; }
  .community-badge--image { display: none; }
  .community-stamp-art {
    display: block;
    width: min(92%, 310px);
    max-height: 84%;
    object-fit: contain;
    justify-self: center;
    align-self: center;
    transform: translateY(-1%);
  }
  .community-stamp--fallback { display: none; }
  .community-stamp {
    width: min(91%, 292px);
    aspect-ratio: .9;
    display: grid;
    place-content: center;
    justify-self: center;
    position: relative;
    padding: 14% 13% 11%;
    transform: rotate(-2deg);
    color: #21150f;
    text-align: center;
  }
  .community-stamp::before,
  .community-stamp::after {
    content: "";
    position: absolute;
    inset: 3% 5%;
    border: 2px solid #d86b1a;
    border-radius: 45% 55% 48% 52% / 53% 46% 54% 47%;
    transform: rotate(2deg);
  }
  .community-stamp::after {
    inset: 5% 4% 2% 7%;
    border-width: 1px;
    opacity: .58;
    transform: rotate(-2deg);
  }
  .community-stamp > span { color: #c9580a; font-size: clamp(22px, 1.8vw, 30px); line-height: 1; }
  .community-stamp p {
    margin: 8px 0 0;
    font-family: "Brush Script MT", "Segoe Script", cursive;
    font-size: clamp(25px, 2.05vw, 36px);
    font-weight: 600;
    line-height: 1.04;
  }
  .community-stamp.community-stamp--fallback { display: none; }
  .joy-van {
    position: relative;
    z-index: 1;
    width: 130%;
    max-width: none;
    justify-self: center;
    align-self: end;
    margin: 0 0 4.8%;
    transform: translateX(-1.5%);
    filter: drop-shadow(0 16px 10px rgba(105,60,28,.18));
  }
  .joy-van--desktop { display: block; }
  .joy-van--mobile { display: none; }
  .spread-joy {
    align-self: center;
    margin: -7% 0 0 -10%;
    font-size: clamp(48px, 4.15vw, 70px);
    line-height: 1.08;
    transform: rotate(-7deg);
  }
  .spread-joy .spread-joy__heart { margin-top: 10px; font-size: clamp(54px, 4.3vw, 76px); line-height: .8; }
  .spread-joy__trail {
    display: block;
    width: 52%;
    height: 26px;
    margin: -3px 0 0 25%;
    border-bottom: 3px solid #25170f;
    border-radius: 50%;
    transform: rotate(8deg);
  }
  .spread-joy-art {
    display: block;
    width: min(84%, 224px);
    max-height: 82%;
    object-fit: contain;
    justify-self: center;
    align-self: center;
    margin: -2% 0 0 -7%;
  }
  .spread-joy--fallback { display: none; }
}

.gifts-section { padding: 0 0 20px; }
.gifts-shell { display: grid; grid-template-columns: 260px 1fr; gap: 20px; border: 1px solid #da9154; border-radius: 20px; padding: 14px 18px; }
.gifts-intro { display: grid; grid-template-columns: 42px 1fr; gap: 8px; align-items: start; padding: 8px 10px; }
.gift-icon {
  width: 42px;
  height: 48px;
  overflow: visible;
  color: #2c1b12;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gift-icon__ribbon { fill: none; stroke: #d15e0b; stroke-width: 5; }
.gift-icon__bow { fill: none; stroke: #d15e0b; stroke-width: 4; }
.gifts-intro h2 { font-size: 24px; line-height: 1.05; margin: 0 0 18px; }
.gifts-intro p { font-size: 14px; line-height: 1.5; margin: 0; }
.gift-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 13px; }
.gift-grid article { text-align: center; }
.gift-grid img { width: 100%; height: 145px; object-fit: cover; border-radius: 12px; }
.gift-grid h3 { font-family: Arial, sans-serif; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 13px; margin: 6px 0 0; }

@media (min-width: 981px) {
  .gifts-section { padding: 0 0 26px; }
  .gifts-shell {
    width: min(1720px, calc(100% - 64px));
    grid-template-columns: minmax(300px, 21.5%) minmax(0, 1fr);
    gap: clamp(18px, 1.4vw, 26px);
    padding: clamp(18px, 1.35vw, 24px);
    border-width: 2px;
    border-radius: 22px;
    background: rgba(255, 246, 234, .34);
    box-shadow: inset 0 1px rgba(255,255,255,.72), 0 9px 22px rgba(121,68,27,.08);
  }
  .gifts-intro {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    padding: 12px 10px 8px 14px;
  }
  .gifts-intro .gift-icon { width: 58px; height: 64px; margin-top: 1px; }
  .gifts-intro h2 {
    margin-bottom: 20px;
    font-family: "Anton", Impact, Haettenschweiler, sans-serif;
    font-size: clamp(28px, 1.8vw, 34px);
    font-weight: 400;
    line-height: 1.03;
  }
  .gifts-intro p { max-width: 220px; font-size: 16px; line-height: 1.55; }
  .gift-grid { gap: clamp(12px, 1vw, 18px); align-items: start; }
  .gift-grid article { min-width: 0; }
  .gift-grid img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center top;
    border-radius: 16px;
    box-shadow: 0 5px 14px rgba(105,58,24,.12), inset 0 0 0 1px rgba(134,74,30,.08);
  }
  .gift-grid h3 { margin-top: 9px; font-size: 15px; }
}

.site-footer {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 84% 8%, rgba(121,72,24,.22), transparent 34%),
    radial-gradient(circle at 38% 18%, #3d240f 0, #281609 48%, #170c05 100%);
  color: white;
  padding: 28px 0 12px;
  border-top: 2px solid #603611;
  box-shadow: inset 0 2px rgba(238,136,35,.08);
}
.footer-grid { display: grid; grid-template-columns: 1.45fr .75fr 1.05fr 130px; gap: 36px; align-items: start; }
.site-footer h2 { margin: 0 0 10px; font-size: 22px; }
.footer-brand { display: flex; gap: 18px; align-items: center; }
.footer-brand img { width: 125px; height: 125px; object-fit: contain; }
.footer-brand p { margin: 0 0 12px; color: #f8eadd; font-size: 14px; line-height: 1.45; text-transform: uppercase; }
.footer-brand__tagline span, .footer-brand__message span, .copyright span { color: var(--orange); }
.footer-brand__message { text-transform: none !important; }
.footer-social { text-align: center; border-left: 1px solid #6c3c15; padding-left: 20px; min-height: 120px; }
.social-links { display: flex; justify-content: center; gap: 18px; }
.social-links a { display: grid; justify-items: center; gap: 7px; }
.social-links a > span { width: 48px; height: 48px; border: 1px solid #a65d18; border-radius: 50%; display: grid; place-items: center; transition: border-color .2s ease, background-color .2s ease, transform .2s ease; }
.social-links a:hover > span, .social-links a:focus-visible > span { border-color: #ef8a1d; background: rgba(214,100,13,.14); transform: translateY(-2px); }
.social-links svg { width: 25px; height: 25px; overflow: visible; fill: #fff7ed; stroke: #fff7ed; stroke-width: 1.8; }
.social-links svg path { stroke: none; }
.social-links svg rect, .social-links svg circle { fill: none; }
.social-links svg .social-icon__dot { fill: #fff7ed; stroke: none; }
.social-links small { display: none; color: #ead8c8; font-family: Arial, sans-serif; font-size: 11px; }
.newsletter { border-left: 1px solid #6c3c15; padding-left: 28px; }
.newsletter p { font-size: 13px; color: #f3dfcf; margin-bottom: 13px; }
.newsletter form { display: flex; }
.newsletter input { flex: 1; min-width: 0; border: 0; padding: 13px 14px; font-size: 14px; }
.newsletter button { border: 0; background: var(--orange-dark); color: white; padding: 13px 17px; text-transform: uppercase; cursor: pointer; }
.footer-art-wrap { overflow: visible; }
.footer-art { width: 125px; height: auto; object-fit: contain; }
.copyright { font-size: 12px; text-align: center; margin: 14px 0 0; color: #dfccbc; }

@media (min-width: 981px) {
  .site-footer { padding: clamp(30px, 2.2vw, 40px) 0 14px; }
  .footer-grid {
    width: min(1720px, calc(100% - 64px));
    grid-template-columns: minmax(0, 1.55fr) minmax(0, .82fr) minmax(0, 1.16fr) minmax(0, .42fr);
    grid-template-rows: auto auto;
    column-gap: clamp(30px, 2.6vw, 50px);
    row-gap: 10px;
    align-items: stretch;
  }
  .site-footer h2 {
    margin-bottom: 12px;
    font-family: "Anton", Impact, Haettenschweiler, sans-serif;
    font-size: clamp(24px, 1.65vw, 31px);
    font-weight: 400;
    line-height: 1;
  }
  .footer-brand { gap: clamp(22px, 1.75vw, 34px); align-items: center; }
  .footer-brand img { width: clamp(132px, 9vw, 158px); height: clamp(132px, 9vw, 158px); flex: 0 0 auto; filter: drop-shadow(0 8px 11px rgba(0,0,0,.28)); }
  .footer-brand__copy { padding-top: 3px; }
  .footer-brand p { margin-bottom: 13px; font-family: Arial, sans-serif; font-size: clamp(14px, .95vw, 17px); line-height: 1.5; }
  .footer-brand__tagline { letter-spacing: .025em; }
  .footer-brand__message { color: #f6e6d9 !important; }
  .footer-social,
  .newsletter,
  .footer-art-wrap { min-height: 156px; border-left: 1px solid rgba(160,90,28,.72); }
  .footer-social { display: flex; flex-direction: column; justify-content: center; padding: 2px 0 0 clamp(28px, 2vw, 38px); text-align: left; }
  .footer-social h2 { text-align: center; }
  .social-links { gap: clamp(17px, 1.45vw, 26px); }
  .social-links a { gap: 8px; }
  .social-links a > span { width: clamp(50px, 3.4vw, 59px); height: clamp(50px, 3.4vw, 59px); border-width: 2px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); }
  .social-links svg { width: clamp(25px, 1.65vw, 30px); height: clamp(25px, 1.65vw, 30px); }
  .social-links small { display: block; }
  .newsletter { display: flex; flex-direction: column; justify-content: center; padding: 1px 0 0 clamp(32px, 2.35vw, 46px); }
  .newsletter p { max-width: 360px; margin-bottom: 17px; font-family: Arial, sans-serif; font-size: clamp(13px, .86vw, 16px); line-height: 1.42; }
  .newsletter form { width: min(100%, 420px); border-radius: 5px; overflow: hidden; box-shadow: 0 6px 15px rgba(4,2,1,.18); }
  .newsletter input { min-height: 48px; padding-inline: 17px; background: #fff7ee; color: #2b190e; outline-color: #ef831b; }
  .newsletter button { min-width: 112px; padding-inline: 20px; background: #d45b08; font-family: Arial, sans-serif; font-weight: 700; transition: background-color .2s ease; }
  .newsletter button:hover, .newsletter button:focus-visible { background: #ef7413; }
  .footer-art-wrap { display: grid; place-items: center; padding-left: clamp(20px, 1.5vw, 30px); }
  .footer-art { width: min(100%, 150px); max-width: none; opacity: .94; filter: drop-shadow(0 4px 10px rgba(0,0,0,.18)); }
  .copyright { grid-column: 1 / -1; grid-row: 2; margin: 6px 0 0; padding-top: 13px; border-top: 1px solid rgba(137,76,25,.58); font-family: Arial, sans-serif; font-size: 12px; letter-spacing: .01em; }
}

@media (max-width: 1280px) and (min-width: 981px) {
  .footer-grid {
    width: calc(100% - 48px);
    grid-template-columns: minmax(0, 1.36fr) minmax(0, .8fr) minmax(0, 1.12fr) 82px;
    column-gap: 20px;
  }
  .footer-brand { gap: 14px; }
  .footer-brand img { width: 108px; height: 108px; }
  .footer-brand p { font-size: 13px; }
  .site-footer h2 { font-size: 22px; }
  .footer-social { padding-left: 18px; }
  .social-links { gap: 9px; }
  .social-links a > span { width: 43px; height: 43px; }
  .social-links small { display: none; }
  .newsletter { padding-left: 22px; }
  .newsletter button { min-width: 94px; padding-inline: 13px; }
  .footer-art-wrap { padding-left: 14px; }
  .footer-art { width: 88px; }
}

@media (max-width: 980px) {
  .page-width { width: min(94%, 760px); }
  .menu-shell { width: min(94%, 760px); }
  .hero {
    --responsive-counter-top: 59%;
    height: clamp(820px, 94vw, 920px);
    min-height: 0;
    background: #100904;
  }
  .hero__desktop-scene { display: none; }
  .hero__art { display: none; }
  .hero__responsive-scene { display: block; position: absolute; z-index: 1; inset: 0; overflow: hidden; }
  .hero__responsive-background {
    position: absolute;
    inset: 0 0 24%;
    background: url('../images/hero-cafe-interior.png') center center / cover no-repeat;
    filter: saturate(1.06) contrast(1.03);
  }
  .hero__responsive-background::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8,4,2,.05), rgba(8,4,2,.18) 58%, rgba(8,4,2,.62));
  }
  .hero__responsive-stage { position: absolute; inset: 0; left: 50%; width: min(100%, 900px); transform: translateX(-50%); }
  .hero__responsive-stage img { position: absolute; max-width: none; user-select: none; }
  .hero__responsive-plant {
    z-index: 2;
    left: -4%;
    bottom: 25%;
    width: auto;
    height: 58%;
    filter: drop-shadow(0 10px 8px rgba(0,0,0,.34));
  }
  .hero__responsive-characters {
    left: 50%;
    top: 11%;
    width: 78%;
    transform: translateX(-50%);
  }
  .hero__responsive-characters--body { z-index: 2; }
  .hero__responsive-counter {
    position: absolute;
    z-index: 3;
    top: var(--responsive-counter-top);
    right: 0;
    bottom: 24%;
    left: 0;
    background: url('../images/hero-countertop.png') center top / cover no-repeat;
    box-shadow: 0 -9px 16px rgba(0,0,0,.35);
  }
  .hero__responsive-characters--hand,
  .hero__responsive-characters--duck { z-index: 4; }
  .hero__responsive-sign {
    z-index: 4;
    right: 1%;
    bottom: 23.5%;
    width: 31%;
    filter: drop-shadow(0 10px 8px rgba(0,0,0,.35));
  }
  .hero::after { z-index: 2; background: linear-gradient(0deg, #120a04 0%, rgba(12,6,2,.92) 23%, rgba(12,6,2,.08) 54%, rgba(12,6,2,.14)); }
  .hero__content { position: absolute; z-index: 5; inset: 0; left: 50%; width: min(100%, 900px); transform: translateX(-50%); }
  .brand-logo { top: 22px; left: 50%; width: 185px; margin: 0; transform: translateX(-50%); }
  .hero__headline-art { display: block; top: auto; bottom: 11.5%; left: 50%; width: min(44%, 390px); transform: translateX(-50%); }
  .hero__headline-mobile { display: none; }
  .hero__content > p { left: 50%; bottom: 2.2%; width: 70%; transform: translateX(-50%); font-size: clamp(20px, 2.6vw, 25px); }
  .menu-grid { grid-template-columns: repeat(2, 1fr); }
  .about-card { grid-template-columns: 43% 57%; }
  .about-copy { padding: 32px 5% 26px 4%; }
  .about-story > p { font-size: 15px; }
  .values-grid { grid-template-columns: 1fr; gap: 14px; }
  .values-grid article, .values-grid article:first-child, .values-grid article:last-child { padding: 0 0 14px; border: 0; border-bottom: 1px solid #e5b98d; }
  .values-grid article:last-child { border-bottom: 0; }
  .visit-grid { grid-template-columns: 1fr 1fr; }
  .visit-copy { padding-left: 0; }
  .community-badge--image { display: none; }
  .community-stamp-art { display: block; width: min(72%, 240px); justify-self: center; align-self: center; }
  .community-stamp--fallback { display: none; }
  .joy-van { transform: none; }
  .spread-joy-art { display: block; width: min(70%, 210px); justify-self: center; align-self: center; }
  .spread-joy--fallback { display: none; }
  .gifts-shell { grid-template-columns: 1fr; }
  .gift-grid { grid-template-columns: repeat(3, 1fr); }
  .gift-grid img { height: 180px; }
  .footer-grid { grid-template-columns: 1.3fr 1fr; }
  .footer-social, .newsletter { border-left: 0; padding-left: 0; }
  .footer-art { display: none; }
}

/*
 * Tablet hero stage
 *
 * Keep the illustrated scene on one proportional canvas. Previously the
 * counter used the clamped hero height while the foreground art scaled from
 * the viewport width, allowing their contact points to drift during resize.
 */
@media (max-width: 980px) and (min-width: 621px) {
  .gifts-section { padding: 34px 0 26px; }
  .gifts-shell {
    padding: 22px 20px 24px;
    background: rgba(255,246,234,.34);
    box-shadow: inset 0 1px rgba(255,255,255,.72), 0 9px 22px rgba(121,68,27,.08);
  }

  .site-footer { padding: 42px 0 16px; }
  .footer-grid {
    width: min(94%, 760px);
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    column-gap: 0;
    row-gap: 0;
    align-items: stretch;
  }
  .footer-brand {
    grid-column: 1 / 10;
    grid-row: 1;
    gap: 22px;
    min-height: 158px;
    padding: 0 30px 28px 8px;
    align-items: center;
  }
  .footer-brand img {
    width: 132px;
    height: 132px;
    flex: 0 0 auto;
    filter: drop-shadow(0 8px 11px rgba(0,0,0,.28));
  }
  .footer-brand__copy { padding-top: 4px; }
  .site-footer h2 {
    margin-bottom: 12px;
    font-family: "Anton", Impact, Haettenschweiler, sans-serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 1;
  }
  .footer-brand p {
    margin-bottom: 11px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
  }
  .footer-art-wrap {
    display: grid;
    grid-column: 10 / -1;
    grid-row: 1;
    place-items: center;
    min-height: 158px;
    padding: 0 2px 28px 24px;
    border-left: 1px solid rgba(160,90,28,.72);
  }
  .footer-art {
    display: block;
    width: min(100%, 132px);
    height: auto;
    opacity: .94;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.18));
  }
  .footer-social,
  .newsletter {
    min-height: 190px;
    padding-top: 30px;
    border-top: 1px solid rgba(137,76,25,.7);
  }
  .footer-social {
    display: flex;
    grid-column: 1 / 6;
    grid-row: 2;
    flex-direction: column;
    justify-content: center;
    padding-right: 30px;
    text-align: center;
  }
  .social-links { gap: 20px; }
  .social-links a { gap: 8px; }
  .social-links a > span {
    width: 52px;
    height: 52px;
    border-width: 2px;
  }
  .social-links svg { width: 27px; height: 27px; }
  .social-links small { display: block; }
  .newsletter {
    display: flex;
    grid-column: 6 / -1;
    grid-row: 2;
    flex-direction: column;
    justify-content: center;
    padding-left: 38px;
    border-left: 1px solid rgba(160,90,28,.72);
  }
  .newsletter p {
    max-width: 340px;
    margin-bottom: 17px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.45;
  }
  .newsletter form {
    width: min(100%, 360px);
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 6px 15px rgba(4,2,1,.18);
  }
  .newsletter input { min-height: 48px; padding-inline: 16px; background: #fff7ee; color: #2b190e; }
  .newsletter button { min-width: 106px; padding-inline: 16px; font-weight: 700; }
  .copyright {
    grid-column: 1 / -1;
    grid-row: 3;
    margin: 2px 0 0;
    padding-top: 15px;
    border-top: 1px solid rgba(137,76,25,.58);
    font-family: Arial, sans-serif;
    font-size: 12px;
  }

  .about-section { padding: 18px 0; }
  .about-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: min(94%, 760px);
  }
  .about-image-wrap {
    min-height: 0;
    aspect-ratio: 1099 / 1431;
  }
  .about-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .about-copy { padding: 0; }
  .about-story { padding: 36px 40px 26px; }
  .about-story > h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    font-size: 50px;
  }
  .about-story > h2 .about-icon--heading { width: 64px; height: 64px; }
  .about-story > p,
  .about-story .lead {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 18px;
  }
  .values-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 0;
    padding: 20px 18px 22px;
    border-top: 2px solid #d58b4e;
    background:
      radial-gradient(circle at 50% 0, rgba(255,255,255,.58), transparent 58%),
      linear-gradient(90deg, rgba(239,207,175,.62), rgba(255,246,233,.76) 50%, rgba(239,207,175,.62));
  }
  .values-grid article,
  .values-grid article:first-child,
  .values-grid article:last-child {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 78px;
    padding: 2px 16px;
    border: 0;
    border-right: 1px dotted rgba(213,107,19,.72);
  }
  .values-grid article:last-child { border-right: 0; }
  .values-grid article > .about-icon { width: 56px; height: 60px; }
  .values-grid h3 { margin-bottom: 6px; font-size: 18px; }
  .values-grid p { font-size: 13px; line-height: 1.38; }

  /*
   * Tablet visit scene
   *
   * Treat the contact details and lettering as supporting elements around one
   * large, grounded van rather than letting the generic two-column grid give
   * every asset equal visual weight.
   */
  .visit-section { padding: 24px 0 10px; }
  .visit-grid {
    position: relative;
    width: min(94%, 760px);
    min-height: 0;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto;
    align-items: center;
    padding: 20px 12px 0;
  }
  .visit-copy {
    z-index: 2;
    grid-column: 1 / 7;
    grid-row: 1;
    align-self: start;
    padding: 8px 0 0 10px;
  }
  .visit-copy h2 {
    margin-bottom: 24px;
    font-size: clamp(38px, 5.6vw, 48px);
  }
  .visit-copy address { font-size: clamp(15px, 2.2vw, 17px); }
  .visit-copy address p { margin-bottom: 16px; }
  .community-stamp-art {
    z-index: 2;
    grid-column: 8 / 13;
    grid-row: 1;
    width: min(84%, 230px);
    margin: 0;
    justify-self: center;
    align-self: center;
    transform: rotate(-1.5deg);
  }
  .joy-van {
    z-index: 1;
    grid-column: 1 / 12;
    grid-row: 2;
    width: 113%;
    max-width: none;
    margin: -42px 0 -30px -4%;
    justify-self: start;
    align-self: end;
    filter: drop-shadow(0 16px 10px rgba(105,60,28,.18));
  }
  .spread-joy-art {
    z-index: 2;
    grid-column: 10 / 13;
    grid-row: 2;
    width: min(92%, 180px);
    margin: 6px -4px 0 -20%;
    justify-self: end;
    align-self: start;
  }

  .hero {
    /*
     * The isolated foreground arm begins at roughly 53% of this proportional
     * stage. Keep the counter edge below that point so the sleeve overlaps
     * Joy's body instead of appearing detached at tablet widths.
     */
    --responsive-counter-top: 57%;
    --responsive-counter-bottom: 34%;
    height: min(110vw, 1080px);
  }
  .hero__responsive-background { bottom: var(--responsive-counter-bottom); }
  .hero__responsive-stage,
  .hero__content { width: min(100%, 980px); }
  .hero__responsive-plant {
    z-index: 4;
    left: -5%;
    /*
     * Align the visible base of the pot with the visible base of the sign.
     * A proportional anchor compensates for the plant PNG's transparent
     * padding and keeps both counter props on one baseline while resizing.
     */
    bottom: 26%;
    height: 58%;
  }
  .hero__responsive-characters {
    top: 13.5%;
    width: 78%;
  }
  .hero__responsive-counter { bottom: var(--responsive-counter-bottom); }
  .hero__responsive-sign {
    right: 0;
    bottom: 34%;
    width: 31%;
  }
  .brand-logo {
    top: 2%;
    width: 22%;
  }
  .hero__headline-art {
    bottom: 9.5%;
    width: min(44%, 430px);
  }
  .hero__content > p {
    bottom: 1.8%;
    width: 70%;
    font-size: clamp(19px, 2.6vw, 25px);
  }
}

@media (max-width: 620px) {
  .page-width { width: calc(100% - 28px); }
  .menu-shell { width: calc(100% - 28px); }
  .hero {
    /*
     * Mobile is its own portrait composition. The illustrated stage scales
     * from the viewport width, while the headline/copy occupy a separate dark
     * band below it. Every foreground prop uses the same counter line.
     */
    /*
     * Keep the complete opening composition inside a modern phone viewport.
     * The illustrated stage absorbs the available height while the copy band
     * remains large enough for the headline artwork and supporting sentence.
     * A 540px floor protects shorter phones from crowding Joy into the logo.
     */
    --mobile-copy-band: clamp(190px, 25.5svh, 215px);
    --mobile-stage-height: max(540px, calc(100svh - var(--mobile-copy-band)));
    --responsive-counter-top: 80%;
    height: calc(var(--mobile-stage-height) + var(--mobile-copy-band));
  }
  .hero__responsive-background {
    inset: 0 0 auto;
    height: var(--mobile-stage-height);
    background-position: 56% center;
  }
  .hero__responsive-stage {
    top: 0;
    right: auto;
    bottom: auto;
    width: min(100%, 620px);
    height: var(--mobile-stage-height);
  }
  .hero__responsive-plant { display: none; }
  .hero__responsive-characters {
    top: auto;
    /*
     * The character PNGs share a 5.8% transparent lower gutter. Anchor the
     * visible feet/forearm—not the image boxes—to the countertop surface.
     */
    /* Joy and the duck need the same final drop to make visible contact with
     * the countertop; keeping the offset shared preserves their composition. */
    bottom: calc(20% - 38px);
    width: min(118%, 520px);
    transform: translate(-50%, 5.8%);
  }
  .hero__responsive-counter {
    top: var(--responsive-counter-top);
    bottom: 0;
  }
  .hero__responsive-sign {
    /* The sign becomes the grounded foreground element beneath Joy and duck. */
    right: auto;
    left: 52%;
    bottom: 0;
    width: min(62%, 260px);
    transform: translate(-50%, 5%);
  }
  .hero::after {
    background: linear-gradient(
      0deg,
      #130a04 0,
      #130a04 calc(100% - var(--mobile-stage-height)),
      rgba(12,6,2,.54) calc(100% - var(--mobile-stage-height) + 7%),
      rgba(12,6,2,.12) 68%,
      rgba(12,6,2,.16) 100%
    );
  }
  .brand-logo { top: 18px; width: min(43%, 180px); }
  .hero__headline-art {
    top: calc(var(--mobile-stage-height) - 12px);
    bottom: auto;
    width: min(75%, 380px);
  }
  .hero__content > p { bottom: 14px; width: 90%; font-size: clamp(15px, 4vw, 18px); line-height: 1.22; }
  .menu-section {
    padding: 18px 0 22px;
    border-top-color: #4b2a12;
    background: radial-gradient(circle at 50% 10%, #432813 0, #2d1a0b 45%, #180e06 100%);
  }
  .menu-section::before { opacity: .28; }
  .menu-shell {
    padding: 0 12px 16px;
    border: 2px solid #a75d13;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(41,23,10,.93), rgba(20,11,5,.91));
    box-shadow: inset 0 0 42px rgba(137,72,18,.18), 0 13px 28px rgba(8,4,1,.22);
  }
  .menu-shell h2 { margin: 0; padding: 20px 10px 17px; color: #f9e7dc; font-size: 34px; line-height: 1.05; text-shadow: 0 3px 0 #4b260f; }
  .menu-shell h2 span { display: none; }
  .menu-grid { grid-template-columns: 1fr; gap: 10px; border: 0; border-radius: 0; overflow: visible; }
  .menu-item {
    min-height: 128px;
    grid-template-columns: 96px 1fr;
    gap: 12px;
    padding: 10px 14px 10px 8px;
    border: 1px solid rgba(171,91,22,.82);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(75,41,16,.58), rgba(22,12,5,.72));
    box-shadow: inset 0 1px rgba(255,225,183,.06), 0 8px 16px rgba(7,3,1,.14);
  }
  .menu-item img { width: 90px; height: 106px; }
  .menu-item h3 { color: #fff; font-size: 16px; margin-bottom: 6px; }
  .menu-item p { color: #fff4e8; font-size: 14px; margin-bottom: 6px; }
  .menu-item strong { color: #ff9a12; }
  .menu-note { margin: 17px 4px 0; padding: 0; background: none; color: #f38a14; font-size: 14px; line-height: 1.5; }
  .menu-note span { display: inline; height: auto; overflow: visible; }
  .about-section { padding: 14px 0; }
  .about-card { display: flex; flex-direction: column; border-radius: 18px; }
  .about-image-wrap { min-height: 0; aspect-ratio: 1099 / 1431; }
  .about-image-wrap img { object-position: center; }
  .about-copy { padding: 22px 20px 16px; }
  .about-story > h2 { display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 39px; text-align: center; }
  .about-story > h2 .about-icon--heading { width: 54px; height: 56px; }
  .about-story > p, .about-story .lead { font-size: 14px; line-height: 1.52; }
  .values-grid { margin-top: 20px; }
  .values-grid article { grid-template-columns: 48px 1fr; }
  .values-grid article > .about-icon { width: 48px; height: 52px; }
  .visit-section { padding-top: 4px; }
  .visit-grid { grid-template-columns: 1fr; text-align: left; padding-top: 22px; }
  .visit-copy { padding: 0 18px; }
  .visit-copy h2 { margin-bottom: 22px; text-align: left; }
  .visit-copy address { font-size: 15px; }
  .community-stamp-art { width: 210px; margin: 4px auto 2px; }
  .joy-van { width: 108%; max-width: none; margin: -6px 0 0 -4%; }
  .spread-joy-art { width: 190px; margin: -14px auto 24px; }
  .gifts-section { padding: 18px 0 14px; }
  .gifts-shell { padding: 18px 12px; }
  .gifts-intro { max-width: 280px; margin: auto; }
  .gift-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .gift-grid img { height: auto; aspect-ratio: 1; }
  .site-footer { padding: 34px 0 16px; }
  .footer-grid { grid-template-columns: 1fr; width: calc(100% - 28px); text-align: center; gap: 0; }
  .footer-brand { flex-direction: column; gap: 14px; padding: 0 12px 28px; }
  .footer-brand img { width: 138px; height: 138px; filter: drop-shadow(0 8px 11px rgba(0,0,0,.28)); }
  .site-footer h2 { font-family: "Anton", Impact, Haettenschweiler, sans-serif; font-size: 28px; font-weight: 400; }
  .footer-brand p { font-family: Arial, sans-serif; font-size: 14px; }
  .footer-social { padding: 28px 0; border-block: 1px solid rgba(137,76,25,.7); }
  .social-links { gap: 22px; }
  .social-links a > span { width: 52px; height: 52px; border-width: 2px; }
  .social-links small { display: block; }
  .newsletter { padding: 30px 12px; }
  .newsletter p { max-width: 310px; margin: 0 auto 17px; font-family: Arial, sans-serif; font-size: 14px; line-height: 1.45; }
  .newsletter form { display: grid; width: min(100%, 350px); margin-inline: auto; gap: 10px; }
  .newsletter input { min-height: 48px; border-radius: 4px; background: #fff7ee; color: #2b190e; }
  .newsletter button { min-height: 46px; justify-self: stretch; border-radius: 4px; font-weight: 700; }
  .footer-art-wrap { display: grid; place-items: center; padding: 27px 0 13px; border-top: 1px solid rgba(137,76,25,.58); }
  .footer-art { display: block; width: min(44%, 158px); height: auto; opacity: .94; filter: drop-shadow(0 4px 10px rgba(0,0,0,.18)); }
  .copyright { margin-top: 6px; padding: 14px 20px 0; border-top: 1px solid rgba(137,76,25,.58); }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }