/* ═══════════════════════════════════════════════════════════
   Crazy Cake Lady — Cakes by Diann Ackerman
   Albion, Nebraska
   ═══════════════════════════════════════════════════════════ */

/* ── Design tokens ─────────────────────────────────────── */
:root {
  --cream:        #FFF8F0;
  --cream-deep:   #FDF0E3;
  --frosting:     #FDEDF3;
  --frosting-2:   #FBE1EC;
  --berry:        #D4406B;
  --berry-deep:   #A82B51;
  --berry-soft:   #F6C9D8;
  --cocoa:        #3B2420;
  --cocoa-soft:   #5A3A33;
  --gold:         #E0A458;
  --gold-soft:    #F6DCB6;
  --mint:         #7FB39B;
  --ink:          #2E1D1A;
  --ink-soft:     #6B534E;
  --white:        #FFFFFF;
  --fb:           #1877F2;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --wrap:         1180px;
  --gutter:       clamp(1.25rem, 4vw, 3rem);
  --radius:       20px;
  --radius-lg:    32px;

  --shadow-sm:    0 2px 8px rgba(59, 36, 32, .07);
  --shadow:       0 10px 30px -8px rgba(59, 36, 32, .16);
  --shadow-lg:    0 28px 60px -20px rgba(59, 36, 32, .28);

  --ease:         cubic-bezier(.22, 1, .36, 1);
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  font-family: var(--font-body);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.68;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--berry-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--berry); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 12px 0;
}
.skip-link:focus { left: 0; }

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

/* ── Typography ────────────────────────────────────────── */
h1, h2, h3, .brand strong {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--cocoa);
  font-variation-settings: "SOFT" 40, "WONK" 1;
}
h1 { font-size: clamp(2.9rem, 8.5vw, 5.4rem); }
h2 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); line-height: 1.25; }

.script {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  color: var(--berry);
  position: relative;
  display: inline-block;
  padding: 0 .1em;
}
.script::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: .08em; height: .22em;
  background: var(--gold-soft);
  border-radius: 999px;
  z-index: -1;
  transform: rotate(-1.2deg);
}

.eyebrow {
  font-size: .8rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--berry); margin-bottom: 1rem;
}
.lede { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--ink-soft); max-width: 58ch; }
p + p { margin-top: 1rem; }
.center { text-align: center; }
.note {
  margin-top: 1.5rem; padding: 1rem 1.15rem; border-radius: 14px;
  background: rgba(255,255,255,.6); border: 1px dashed var(--berry-soft);
  font-size: .95rem; color: var(--ink-soft);
}

/* ── Layout ────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding: clamp(4.5rem, 10vw, 8rem) 0; position: relative; }
.section__head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section__head .lede { margin-top: 1.1rem; }

.section--frosting { background: linear-gradient(170deg, var(--frosting) 0%, var(--frosting-2) 100%); }
.section--cocoa {
  background: radial-gradient(120% 90% at 15% 0%, #4A2E28 0%, var(--cocoa) 60%, #2C1A16 100%);
  color: var(--cream);
}
.section--cocoa h2, .section--cocoa h3 { color: var(--cream); }
.section--cocoa .lede, .section--cocoa p { color: rgba(255, 248, 240, .78); }
.section--cocoa .eyebrow { color: var(--gold); }
.section--cocoa a { color: var(--gold-soft); }

.grid-2 {
  display: grid; gap: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .grid-2 { grid-template-columns: 1fr 1fr; align-items: center; }
  .grid-2--wide { grid-template-columns: 1fr 1.1fr; }
}

/* ── Buttons ───────────────────────────────────────────── */
.btn {
  --btn-bg: var(--berry); --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .85em 1.5em;
  font-family: var(--font-body); font-weight: 800; font-size: .95rem;
  letter-spacing: .01em; line-height: 1;
  text-decoration: none; white-space: nowrap;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 2px solid transparent; border-radius: 999px; cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s;
  box-shadow: 0 6px 18px -6px rgba(212, 64, 107, .55);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -8px rgba(212, 64, 107, .6); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

.btn--primary { --btn-bg: var(--berry); }
.btn--primary:hover { background: var(--berry-deep); }
.btn--fb { --btn-bg: var(--fb); box-shadow: 0 6px 18px -6px rgba(24, 119, 242, .55); }
.btn--fb:hover { background: #0F62D0; box-shadow: 0 12px 26px -8px rgba(24, 119, 242, .6); }
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--cocoa);
  border-color: currentColor; box-shadow: none;
}
.btn--ghost:hover { background: var(--cocoa); color: var(--cream); box-shadow: var(--shadow); }
.section--cocoa .btn--ghost { --btn-fg: var(--cream); }
.section--cocoa .btn--ghost:hover { background: var(--cream); color: var(--cocoa); }
.btn--lg { padding: 1.05em 1.9em; font-size: 1rem; }
.btn--sm { padding: .7em 1.15em; font-size: .85rem; }
/* The big call-to-action labels are whole sentences, and `nowrap` pushed
   them off the side of a 320px phone. Let those — and only those — wrap. */
@media (max-width: 420px) {
  .btn--lg { white-space: normal; line-height: 1.25; text-wrap: balance; }
}
.btn--block { display: flex; width: 100%; }
.btn--block + .btn--block { margin-top: .65rem; }

.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

/* ── Navigation ────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 248, 240, .82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s, border-color .3s, background .3s;
}
.nav.is-stuck { box-shadow: 0 4px 24px -12px rgba(59,36,32,.35); border-bottom-color: rgba(212,64,107,.14); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; }

.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--cocoa); }
.brand__mark { color: var(--berry); display: grid; place-items: center; transition: transform .4s var(--ease); }
.brand:hover .brand__mark { transform: rotate(-8deg) scale(1.08); }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand strong { font-size: 1.22rem; letter-spacing: -.02em; }
.brand em {
  font-style: normal; font-size: .68rem; font-weight: 800;
  letter-spacing: .17em; text-transform: uppercase; color: var(--berry);
}

.nav__menu { display: flex; align-items: center; gap: clamp(.9rem, 1.8vw, 1.7rem); }
.nav__menu a:not(.btn) {
  font-size: .93rem; font-weight: 700; color: var(--cocoa-soft);
  text-decoration: none; position: relative; padding: .3rem 0;
}
.nav__menu a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--berry); border-radius: 2px; transition: right .3s var(--ease);
}
.nav__menu a:not(.btn):hover { color: var(--berry); }
.nav__menu a:not(.btn):hover::after,
.nav__menu a.is-active::after { right: 0; }
.nav__menu a.is-active { color: var(--berry); }

.nav__toggle {
  display: none; width: 46px; height: 46px; border: 0; background: transparent;
  border-radius: 12px; cursor: pointer; position: relative;
}
.nav__bars, .nav__bars::before, .nav__bars::after {
  position: absolute; left: 50%; width: 24px; height: 2.5px; border-radius: 2px;
  background: var(--cocoa); transform: translateX(-50%); transition: .3s var(--ease);
}
.nav__bars { top: 50%; margin-top: -1px; }
.nav__bars::before { content: ""; top: -8px; left: 0; transform: none; }
.nav__bars::after  { content: ""; top:  8px; left: 0; transform: none; }
.nav__toggle[aria-expanded="true"] .nav__bars { background: transparent; }
.nav__toggle[aria-expanded="true"] .nav__bars::before { top: 0; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__bars::after  { top: 0; transform: rotate(-45deg); }

/* "Cakes by Diann Ackerman" is a wide line once it's letter-spaced and
   uppercased. On the narrowest phones it would reach the hamburger, so
   tighten it rather than hide her name. */
@media (max-width: 400px) {
  .brand em { font-size: .6rem; letter-spacing: .11em; }
  .brand strong { font-size: 1.1rem; }
}

@media (max-width: 900px) {
  .nav__toggle { display: block; }
  .nav__menu {
    position: fixed; inset: 72px 0 auto; flex-direction: column; align-items: stretch;
    gap: 0; padding: 1rem var(--gutter) 2rem;
    background: var(--cream);
    border-bottom: 1px solid var(--berry-soft);
    box-shadow: var(--shadow);
    max-height: calc(100vh - 72px); overflow-y: auto;
    /* transform alone is not enough to hide this: max-height caps the
       menu on a short viewport (a phone held sideways), and -115% of a
       capped height no longer clears the 72px offset — it left a strip
       of the closed menu pasted over the top of the page. visibility
       hides it whatever the height works out to, and also takes the
       closed links out of the tab order. */
    transform: translateY(-115%);
    visibility: hidden;
    transition: transform .38s var(--ease), visibility 0s linear .38s;
  }
  .nav__menu.is-open {
    transform: translateY(0);
    visibility: visible;
    transition: transform .38s var(--ease), visibility 0s;
  }
  .nav__menu a:not(.btn) {
    padding: 1rem .25rem; font-size: 1.1rem; font-family: var(--font-display);
    border-bottom: 1px solid rgba(212,64,107,.14);
  }
  .nav__menu a:not(.btn)::after { display: none; }
  .nav__menu .btn { margin-top: 1.25rem; }
}

/* ── Hero ──────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(5rem, 10vw, 8rem);
  background:
    radial-gradient(90% 70% at 85% 10%, rgba(253, 237, 243, .95) 0%, rgba(253,237,243,0) 60%),
    radial-gradient(70% 60% at 5% 90%, rgba(246, 220, 182, .55) 0%, rgba(246,220,182,0) 60%),
    var(--cream);
  overflow: hidden;
}
.hero__inner {
  display: grid; gap: clamp(2.5rem, 6vw, 4rem);
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 980px) { .hero__inner { grid-template-columns: 1.08fr .92fr; } }

.hero h1 { margin-bottom: 1.5rem; }
.hero .lede { margin-bottom: 2.2rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .85rem; }
.hero__badges {
  display: flex; flex-wrap: wrap; gap: 1.4rem;
  list-style: none; padding: 0; margin-top: 2.4rem;
  font-size: .88rem; font-weight: 700; color: var(--ink-soft);
}
.hero__badges li { display: inline-flex; align-items: center; gap: .4rem; }
.hero__badges svg { width: 1.15em; height: 1.15em; color: var(--mint); }

/* Floating sprinkles */
.hero__sprinkles { position: absolute; inset: 0; pointer-events: none; }
.hero__sprinkles::before, .hero__sprinkles::after {
  content: ""; position: absolute; border-radius: 999px; opacity: .5;
}
.hero__sprinkles::before {
  width: 340px; height: 340px; top: -110px; right: -80px;
  background: radial-gradient(circle, var(--berry-soft) 0%, transparent 70%);
  animation: float 14s ease-in-out infinite;
}
.hero__sprinkles::after {
  width: 260px; height: 260px; bottom: 40px; left: -90px;
  background: radial-gradient(circle, var(--gold-soft) 0%, transparent 70%);
  animation: float 18s ease-in-out infinite reverse;
}
.sprinkle {
  position: absolute; width: 9px; height: 3.5px; border-radius: 3px;
  opacity: .75; animation: drift linear infinite;
}
@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-18px, 24px) scale(1.07); }
}
@keyframes drift {
  0%   { transform: translateY(-12vh) rotate(0deg); opacity: 0; }
  10%  { opacity: .8; }
  90%  { opacity: .8; }
  100% { transform: translateY(112vh) rotate(720deg); opacity: 0; }
}

/* Layered CSS cake */
.hero__art { display: grid; place-items: center; }
.cake-stage {
  position: relative; width: min(400px, 82vw); aspect-ratio: 1 / 1;
  display: grid; place-items: end center;
  filter: drop-shadow(0 30px 45px rgba(59, 36, 32, .22));
  animation: bob 6s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.cake-plate {
  position: absolute; bottom: 6%; left: 50%; transform: translateX(-50%);
  width: 96%; height: 26px; border-radius: 50%;
  background: linear-gradient(180deg, #fff 0%, #F0E4DA 100%);
  box-shadow: 0 12px 22px -10px rgba(59,36,32,.4);
}
.cake { position: absolute; bottom: 11%; left: 50%; transform: translateX(-50%); width: 78%; }
.cake__tier { margin-inline: auto; border-radius: 14px 14px 10px 10px; position: relative; }
.cake__tier--top  { width: 46%; height: 66px;  background: linear-gradient(180deg, #FBD9E5 0%, #F3B8CD 100%); }
.cake__tier--mid  { width: 72%; height: 82px;  background: linear-gradient(180deg, #FFF3E2 0%, #F6DCB6 100%); margin-top: -6px; }
.cake__tier--base { width: 100%; height: 96px; background: linear-gradient(180deg, #6B443B 0%, #4A2E28 100%); margin-top: -6px; border-radius: 14px 14px 16px 16px; }

/* Frosting drips on each tier.
   Two mask layers, unioned: a solid band across the top, then a row of
   circles hanging below it. Chrome treats -webkit-mask-image and
   mask-image as the same property, so the standard one has to carry the
   real value — setting it to `none` after the prefixed one silently
   wiped the whole effect out and left a flat band. */
.cake__tier::before {
  content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 32px;
  background: var(--white); border-radius: 12px 12px 0 0;

  /* The circle sits ON the tile's top edge, so only its lower half shows
     and neighbouring tiles meet exactly — a continuous scalloped edge
     rather than a row of separated beads. */
  -webkit-mask-image: linear-gradient(#000 0 0),
                      radial-gradient(circle 9px at 9px 0, #000 98%, transparent 100%);
  -webkit-mask-size: 100% 20px, 18px 11px;
  -webkit-mask-position: 0 0, 0 20px;
  -webkit-mask-repeat: no-repeat, repeat-x;

  mask-image: linear-gradient(#000 0 0),
              radial-gradient(circle 9px at 9px 0, #000 98%, transparent 100%);
  mask-size: 100% 20px, 18px 11px;
  mask-position: 0 0, 0 20px;
  mask-repeat: no-repeat, repeat-x;
}
.cake__tier--top::before  { background: #fff; }
.cake__tier--mid::before  { background: #FFF6EC; }
.cake__tier--base::before { background: #FBD9E5; }

.cake__drip {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: -14px; width: 46%; height: 20px; z-index: 2;
  background: #fff; border-radius: 12px 12px 0 0;
}
.cake__candle {
  position: absolute; left: 50%; transform: translateX(-50%); top: -58px;
  width: 9px; height: 48px; z-index: 3;
  background: repeating-linear-gradient(45deg, var(--berry) 0 5px, #fff 5px 10px);
  border-radius: 3px;
}
.flame {
  position: absolute; left: 50%; top: -20px; transform: translateX(-50%);
  width: 14px; height: 20px;
  background: radial-gradient(circle at 50% 70%, #FFF1A8 0%, var(--gold) 45%, #E5713A 100%);
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  animation: flicker 1.4s ease-in-out infinite;
  box-shadow: 0 0 26px 8px rgba(224, 164, 88, .55);
}
@keyframes flicker {
  0%, 100% { transform: translateX(-50%) scale(1) rotate(-2deg); }
  50%      { transform: translateX(-50%) scale(1.14) rotate(3deg); }
}

/* The base tier used to clip itself for sprinkles that were never added,
   which cropped the top off its own frosting band. */

/* ── Drip dividers ─────────────────────────────────────── */
.drip { position: absolute; left: 0; right: 0; line-height: 0; pointer-events: none; }
.drip svg { width: 100%; height: clamp(28px, 4vw, 52px); }
.drip--cream { bottom: -1px; color: var(--cream); transform: scaleY(-1); }
.drip--footer { top: -1px; color: var(--cocoa); }

/* ── Ticker ────────────────────────────────────────────── */
.ticker {
  background: var(--berry); color: #fff; overflow: hidden;
  padding: .85rem 0; border-block: 3px solid var(--berry-deep);
}
.ticker__track {
  display: flex; align-items: center; gap: 2.2rem; width: max-content;
  animation: marquee 34s linear infinite;
  font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: clamp(1rem, 2vw, 1.3rem); white-space: nowrap;
}
.ticker__track span:nth-child(even) { color: var(--gold-soft); font-style: normal; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker:hover .ticker__track { animation-play-state: paused; }

/* ── About ─────────────────────────────────────────────── */
.stat-row { display: flex; flex-wrap: wrap; gap: 2.2rem; margin-top: 2.5rem; }
.stat { display: flex; flex-direction: column; }
.stat b {
  font-family: var(--font-display); font-size: 2.4rem; line-height: 1;
  color: var(--berry); font-weight: 700;
}
.stat span { font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }

.quote-card {
  position: relative; background: var(--cocoa); color: var(--cream);
  padding: 2.4rem 2rem 1.8rem; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); margin: 0 0 1.5rem;
}
.quote-card__mark { width: 42px; height: 42px; color: var(--gold); margin-bottom: .75rem; }
.quote-card blockquote p {
  font-family: var(--font-display); font-style: italic; font-size: 1.28rem;
  line-height: 1.45; color: var(--cream);
}
.quote-card figcaption {
  margin-top: 1.2rem; font-weight: 800; font-size: .82rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold);
}

.info-card {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 2rem; box-shadow: var(--shadow); border: 1px solid rgba(212,64,107,.1);
}
.info-card h3 { margin-bottom: 1.1rem; }
.tick-list { list-style: none; padding: 0; display: grid; gap: .7rem; }
.tick-list li { position: relative; padding-left: 1.9rem; color: var(--ink-soft); }
.tick-list li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--berry); box-shadow: 0 0 0 4px var(--berry-soft);
}

/* ── Flavors ───────────────────────────────────────────── */
.flavor-cols { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 860px) { .flavor-cols { grid-template-columns: 1fr 1fr; } }
.flavor-col h3 { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.4rem; }
.dot { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.dot--cake { background: var(--cocoa); box-shadow: 0 0 0 4px rgba(59,36,32,.15); }
.dot--frosting { background: var(--berry); box-shadow: 0 0 0 4px var(--berry-soft); }

.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.chips li {
  background: var(--white); border: 1.5px solid rgba(212,64,107,.18);
  padding: .58rem 1.05rem; border-radius: 999px;
  font-size: .93rem; font-weight: 700; color: var(--cocoa-soft);
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), background .22s, color .22s, border-color .22s;
  cursor: default;
}
.chips li:hover {
  transform: translateY(-3px) rotate(-1.5deg);
  background: var(--berry); border-color: var(--berry); color: #fff;
}
.chips li small { font-weight: 600; opacity: .65; }

/* ── Gallery ───────────────────────────────────────────── */
/* ── Gallery filters ──────────────────────────────────── */
.gal-filters { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 2.25rem; }
.gal-filters:empty { display: none; }
.gal-filter {
  display: inline-flex; align-items: baseline; gap: .1rem;
  padding: .62rem 1.2rem; border-radius: 999px;
  background: var(--white); border: 1.5px solid rgba(212, 64, 107, .2);
  font-family: var(--font-body); font-size: .92rem; font-weight: 800;
  color: var(--cocoa-soft); cursor: pointer; white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), background .22s, color .22s, border-color .22s;
}
.gal-filter:hover { transform: translateY(-2px); border-color: var(--berry); color: var(--berry); }
.gal-filter[aria-pressed="true"] {
  background: var(--berry); border-color: var(--berry); color: #fff;
  box-shadow: 0 6px 16px -6px rgba(212, 64, 107, .55);
}
.gal-filter__count {
  margin-left: .45em; font-size: .78em; font-weight: 700; opacity: .55;
  font-variant-numeric: tabular-nums;
}
.gal-filter[aria-pressed="true"] .gal-filter__count { opacity: .8; }

/* True masonry with CSS columns — tiles keep their own shape,
   no JavaScript measuring required. */
.gallery { columns: 3 250px; column-gap: 1rem; }
@media (max-width: 560px) { .gallery { columns: 1; } }

.gal-item {
  position: relative; overflow: hidden; border-radius: var(--radius);
  box-shadow: var(--shadow); border: 0; padding: 0; cursor: zoom-in;
  background: var(--frosting); display: block; width: 100%;
  margin: 0 0 1rem; break-inside: avoid; -webkit-column-break-inside: avoid;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
/* Must be spelled out: the `display: block` above is an author style and
   would otherwise beat the browser's built-in [hidden] rule. */
.gal-item[hidden] { display: none; }
.gal-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
/* Real photos set their own height, so any shape fits the masonry.
   The illustrations fill a figure that has an aspect-ratio set on it. */
.gal-item img { width: 100%; height: auto; display: block; }
.gal-item svg { width: 100%; height: 100%; display: block; }
.gal-item figcaption {
  position: absolute; inset: auto 0 0 0; padding: 2.2rem .95rem .85rem;
  background: linear-gradient(180deg, transparent, rgba(46, 29, 26, .82));
  color: #fff; font-size: .88rem; font-weight: 700; text-align: left;
  opacity: 0; transform: translateY(8px); transition: .3s var(--ease);
}
.gal-item:hover figcaption, .gal-item:focus-visible figcaption { opacity: 1; transform: translateY(0); }
.gallery + .center { margin-top: 2.75rem; }

/* ── Reviews ───────────────────────────────────────────── */
/* Same columns trick as the gallery: these quotes run from two lines to
   ten, and masonry keeps that from leaving a crater in the layout. */
.reviews { columns: 3 300px; column-gap: 1.4rem; }
@media (max-width: 620px) { .reviews { columns: 1; } }

.review {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  margin: 0 0 1.4rem; padding: 2.6rem 1.6rem 1.5rem;
  background: var(--white); border-radius: var(--radius);
  border: 1px solid rgba(212, 64, 107, .13);
  box-shadow: var(--shadow-sm); position: relative;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.review:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

/* The opening quote mark is decoration, not text — it sits behind the
   words and must never be read out or selected. */
.review::before {
  content: "\201C"; position: absolute; top: .35rem; left: 1.2rem;
  font-family: var(--font-display); font-size: 4.5rem; line-height: 1;
  color: var(--berry-soft); pointer-events: none; user-select: none;
}

.review blockquote {
  margin: 0; font-size: 1rem; line-height: 1.62; color: var(--ink-soft);
  position: relative;
}
.review figcaption {
  margin-top: 1.2rem; padding-top: 1rem;
  border-top: 1px solid rgba(212, 64, 107, .13);
}
.review__who {
  display: block; font-family: var(--font-display);
  font-size: 1.02rem; font-weight: 600; color: var(--cocoa);
}
.review__meta {
  display: flex; align-items: center; gap: .38rem; margin-top: .2rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  color: var(--ink-soft); opacity: .8;
}
.review__meta svg { width: 15px; height: 15px; color: var(--fb); flex: none; }

.reviews__cta { margin-top: 1.6rem; }

/* ── Builder ───────────────────────────────────────────── */
.builder {
  background: rgba(255, 248, 240, .06);
  border: 1px solid rgba(255, 248, 240, .16);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 3rem);
  backdrop-filter: blur(4px);
}
.builder__step { border: 0; padding: 0; margin: 0 0 2.2rem; }
.builder__step legend {
  display: flex; align-items: center; gap: .7rem; padding: 0; margin-bottom: 1rem;
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--cream);
}
.builder__step legend i {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border-radius: 50%; background: var(--berry); color: #fff;
  font-style: normal; font-family: var(--font-body); font-size: .82rem; font-weight: 800;
}

.opts { display: flex; flex-wrap: wrap; gap: .6rem; }
.opts label { position: relative; cursor: pointer; }
.opts input { position: absolute; opacity: 0; width: 0; height: 0; }
.opts span {
  display: inline-block; padding: .65rem 1.15rem; border-radius: 999px;
  border: 1.5px solid rgba(255,248,240,.28); color: rgba(255,248,240,.85);
  font-size: .92rem; font-weight: 700;
  transition: .22s var(--ease);
}
.opts label:hover span { border-color: var(--gold); color: var(--gold-soft); }
.opts input:checked + span {
  background: var(--berry); border-color: var(--berry); color: #fff;
  box-shadow: 0 6px 16px -6px rgba(212,64,107,.7);
}
.opts input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 3px; }

.builder__selects { display: grid; gap: 1rem; margin-bottom: 1rem; }
@media (min-width: 700px) { .builder__selects { grid-template-columns: 1fr 1fr; } }

.field { display: block; margin-bottom: 1rem; }
.field > span {
  display: block; margin-bottom: .45rem;
  font-size: .84rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gold-soft);
}
.field select, .field input, .field textarea {
  width: 100%; font: inherit; font-size: 1rem;
  padding: .85rem 1rem; border-radius: 14px;
  background: rgba(255, 248, 240, .95); color: var(--ink);
  border: 2px solid transparent; transition: border-color .2s, box-shadow .2s;
}
.field select { appearance: none; -webkit-appearance: none; padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23A82B51' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85rem center; background-size: 22px;
}
.field textarea { resize: vertical; min-height: 90px; }
.field select:focus, .field input:focus, .field textarea:focus {
  outline: none; border-color: var(--berry); box-shadow: 0 0 0 4px rgba(212,64,107,.28);
}

.builder__out {
  margin-top: 2.5rem; padding-top: 2rem;
  border-top: 1px dashed rgba(255, 248, 240, .25);
}
.builder__label {
  font-size: .84rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold) !important; margin-bottom: .8rem;
}
.builder__preview {
  font-family: var(--font-body); font-size: .97rem; line-height: 1.65;
  white-space: pre-wrap; word-break: break-word;
  background: rgba(255,248,240,.94); color: var(--ink);
  padding: 1.25rem 1.4rem; border-radius: 18px;
  border-left: 5px solid var(--berry);
  max-height: 320px; overflow-y: auto;
}
.builder__send { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }
.builder__fine { font-size: .85rem; margin-top: 1rem; opacity: .7; }

/* Desktop-only note: sms: links have nowhere to go without a phone app.
   Hidden until main.js confirms the device can't text. */
.builder__fine--desktop { display: none; }
.no-sms .builder__fine--desktop { display: block; opacity: .95; }
/* On those devices, lead with the option that actually works in a browser. */
.no-sms #sendFb { order: -1; }

/* ── Steps ─────────────────────────────────────────────── */
.steps {
  list-style: none; padding: 0; display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  counter-reset: step;
}
.steps li {
  position: relative; background: var(--white);
  border: 1px solid rgba(212,64,107,.12); border-radius: var(--radius-lg);
  padding: 2.6rem 1.6rem 1.8rem; box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.steps li:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.steps li b {
  position: absolute; top: 1.2rem; left: 1.6rem;
  font-family: var(--font-display); font-size: 2.6rem; font-weight: 700;
  line-height: 1; color: var(--berry-soft);
}
.steps li h3 { margin: 1.4rem 0 .6rem; }
.steps li p { color: var(--ink-soft); font-size: .96rem; }

/* ── FAQ ───────────────────────────────────────────────── */
.faq { margin-top: clamp(3rem, 6vw, 4.5rem); max-width: 52rem; }
.faq__title { margin-bottom: 1.5rem; }
.faq details {
  background: var(--white); border: 1px solid rgba(212,64,107,.14);
  border-radius: 18px; margin-bottom: .75rem; overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.faq summary {
  list-style: none; cursor: pointer; padding: 1.15rem 3.2rem 1.15rem 1.4rem;
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 600;
  color: var(--cocoa); position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 1.3rem; top: 50%; transform: translateY(-50%);
  font-family: var(--font-body); font-size: 1.6rem; font-weight: 400;
  color: var(--berry); transition: transform .3s var(--ease); line-height: 1;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq summary:hover { color: var(--berry); }
.faq details p { padding: 0 1.4rem 1.35rem; color: var(--ink-soft); font-size: .97rem; }

/* ── Facebook block ────────────────────────────────────── */
.fb-layout { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 940px) { .fb-layout { grid-template-columns: 1.15fr .85fr; } }

.fb-embed__frame {
  background: var(--white); border-radius: var(--radius-lg);
  padding: .6rem; box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.fb-embed__frame iframe { width: 100%; border-radius: calc(var(--radius-lg) - 10px); }

.fb-side { display: grid; gap: 1.25rem; }
.fb-card {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 2rem 1.75rem; box-shadow: var(--shadow);
  border: 1px solid rgba(24, 119, 242, .12);
}
.fb-card__logo { width: 46px; height: 46px; color: var(--fb); margin-bottom: 1rem; }
.fb-card h3 { margin-bottom: .7rem; line-height: 1.2; }
.fb-card h3 span { font-size: .78em; color: var(--berry); font-style: italic; font-weight: 600; }
.fb-card p { color: var(--ink-soft); font-size: .95rem; margin-bottom: 1.4rem; }
.fb-card--soft { background: rgba(255,255,255,.62); }

.share-row { display: flex; gap: .7rem; }
.share {
  display: grid; place-items: center; width: 50px; height: 50px;
  border-radius: 50%; border: 2px solid rgba(212,64,107,.2);
  background: var(--white); color: var(--berry); cursor: pointer;
  transition: .25s var(--ease); text-decoration: none;
}
.share svg { width: 22px; height: 22px; }
.share:hover { background: var(--berry); color: #fff; border-color: var(--berry); transform: translateY(-3px); }

/* ── Contact ───────────────────────────────────────────── */
.contact-list { display: grid; gap: 1.5rem; margin: 2.5rem 0 0; }
@media (min-width: 620px) { .contact-list { grid-template-columns: 1fr 1fr; } }
.contact-list dt {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem;
  font-size: .78rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold);
}
.contact-list dt svg { width: 1.2em; height: 1.2em; }
.contact-list dd { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--cream); }
.contact-list dd a { color: var(--cream); text-decoration: none; border-bottom: 1px solid rgba(224,164,88,.5); }
.contact-list dd a:hover { color: var(--gold); }
.contact-list dd small { display: inline-block; margin-top: .3rem; font-size: .82rem; font-weight: 400; color: rgba(255,248,240,.6); }

.map-card {
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); border: 6px solid var(--white);
  background: var(--white); line-height: 0;
}

/* ── Footer ────────────────────────────────────────────── */
.footer {
  position: relative; background: var(--cocoa); color: rgba(255,248,240,.75);
  padding: clamp(4rem, 8vw, 6rem) 0 2rem; margin-top: 0;
}
.footer__inner {
  display: grid; gap: 2.5rem; align-items: start;
  grid-template-columns: 1fr;
  padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,248,240,.14);
}
@media (min-width: 820px) { .footer__inner { grid-template-columns: 1.3fr 1fr auto; } }
.footer__brand svg { color: var(--berry-soft); margin-bottom: 1rem; }
.footer__brand strong { font-family: var(--font-display); font-size: 1.3rem; color: var(--cream); }
.footer__small { font-size: .82rem; margin-top: .5rem; color: rgba(255,248,240,.5); }
.footer__links { display: grid; gap: .6rem; }
.footer__links a { color: rgba(255,248,240,.75); text-decoration: none; font-size: .95rem; font-weight: 600; }
.footer__links a:hover { color: var(--gold); }
.footer__social { display: flex; gap: .7rem; }
.footer__social a {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,248,240,.1); color: var(--cream); transition: .25s var(--ease);
}
.footer__social svg { width: 21px; height: 21px; }
.footer__social a:hover { background: var(--berry); transform: translateY(-3px); }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  padding-top: 1.75rem; font-size: .84rem; color: rgba(255,248,240,.5);
}
.footer__bottom a { color: rgba(255,248,240,.7); }

/* ── Lightbox ──────────────────────────────────────────── */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(30, 16, 14, .93);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  animation: fadeIn .25s var(--ease);
}
.lightbox[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.lightbox__fig { margin: 0; display: grid; place-items: center; gap: 1rem; max-height: 100%; }
.lightbox__fig img {
  max-width: 100%; max-height: 78vh; object-fit: contain;
  border-radius: 14px; box-shadow: 0 30px 70px rgba(0,0,0,.6);
}
.lightbox__fig figcaption { color: var(--cream); font-size: .95rem; font-weight: 600; text-align: center; }
.lightbox__close {
  position: absolute; top: 1rem; right: 1.25rem; z-index: 2;
  width: 46px; height: 46px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff; font-size: 1.9rem; line-height: 1;
  cursor: pointer; transition: background .2s;
}
.lightbox__close:hover { background: var(--berry); }
.lightbox__nav {
  width: 52px; height: 52px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff; font-size: 2rem; line-height: 1;
  cursor: pointer; transition: background .2s; flex: none;
}
.lightbox__nav:hover { background: var(--berry); }

/* ── Toast ─────────────────────────────────────────────── */
/* Sliding it out of frame isn't enough on its own: on phones the toast is
   lifted above the sticky bar, and 150% of an *empty* pill is only ~43px —
   so the bare pill peeked over the bar on every page load. Hiding it
   outright is the part that doesn't depend on how tall it happens to be. */
.toast {
  position: fixed; left: 50%; bottom: 2rem; transform: translate(-50%, 150%);
  z-index: 300; background: var(--cocoa); color: var(--cream);
  padding: .9rem 1.5rem; border-radius: 999px; font-weight: 700; font-size: .93rem;
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden;
  transition: transform .4s var(--ease), opacity .4s var(--ease), visibility 0s linear .4s;
  pointer-events: none; max-width: calc(100vw - 2rem); text-align: center;
}
.toast.is-visible {
  transform: translate(-50%, 0); opacity: 1; visibility: visible;
  transition: transform .4s var(--ease), opacity .4s var(--ease), visibility 0s;
}

/* ── Sticky mobile bar ─────────────────────────────────── */
.mobile-bar { display: none; }
@media (max-width: 700px) {
  .mobile-bar {
    display: flex; gap: .6rem; position: fixed; z-index: 90;
    left: 0; right: 0; bottom: 0;
    padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
    background: rgba(255, 248, 240, .93);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--berry-soft);
    transform: translateY(120%); transition: transform .4s var(--ease);
  }
  .mobile-bar.is-visible { transform: translateY(0); }
  .mobile-bar .btn { flex: 1; padding: .9em .6em; font-size: .88rem; }
  body { padding-bottom: 0; }
  .footer__bottom { padding-bottom: 4.5rem; }
  .toast { bottom: 5.5rem; }
}

/* ── Scroll reveal ─────────────────────────────────────────
   Only hidden when JavaScript is actually running (the `js`
   class is set in the <head>). Without it every section stays
   visible — the page can never end up blank. */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* ── Print ─────────────────────────────────────────────── */
@media print {
  .nav, .mobile-bar, .ticker, .hero__art, .fb-embed, .map-card, .lightbox, .toast { display: none !important; }
  body { background: #fff; color: #000; }
  .section--cocoa { background: #fff !important; color: #000 !important; }
  .section--cocoa h2, .section--cocoa h3, .section--cocoa p, .contact-list dd { color: #000 !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* Shown only if the cake list in photos.js can't be read. */
.gal-empty {
  grid-column: 1 / -1;
  background: var(--white); border: 1px dashed var(--berry-soft);
  border-radius: var(--radius); padding: 1.5rem 1.75rem;
  color: var(--ink-soft); font-size: .95rem; line-height: 1.6;
}
.gal-empty code {
  background: var(--frosting); padding: .1em .4em; border-radius: 5px;
  font-size: .92em; color: var(--berry-deep);
}

/* ═══════════════════════════════════════════════════════════
   Blog — index listing and individual posts
   ═══════════════════════════════════════════════════════════ */

.blog-index { padding-top: clamp(2.5rem, 6vw, 4.5rem); }

.post-list { display: grid; gap: 1.5rem; }
@media (min-width: 760px)  { .post-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .post-list { grid-template-columns: repeat(3, 1fr); } }

.post-list__loading, .post-list__empty {
  grid-column: 1 / -1; color: var(--ink-soft);
  background: var(--white); border: 1px dashed var(--berry-soft);
  border-radius: var(--radius); padding: 1.75rem;
}

.post-card {
  background: var(--white); border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid rgba(212, 64, 107, .12); box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.post-card__link { display: block; text-decoration: none; color: inherit; height: 100%; }
.post-card__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--frosting); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card__text { padding: 1.4rem 1.5rem 1.6rem; }
.post-card__date {
  font-size: .76rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--berry); margin-bottom: .5rem;
}
.post-card__title {
  font-family: var(--font-display); font-size: 1.35rem; line-height: 1.2;
  color: var(--cocoa); margin-bottom: .6rem;
}
.post-card__excerpt { color: var(--ink-soft); font-size: .95rem; }
.post-card__more {
  display: inline-block; margin-top: 1rem;
  font-weight: 800; font-size: .9rem; color: var(--berry);
}
.post-card:hover .post-card__more { text-decoration: underline; text-underline-offset: 3px; }

/* ── A single post ─────────────────────────────────────── */
.post { padding: clamp(2.5rem, 6vw, 4.5rem) 0 0; }
.post__head { max-width: 46rem; }
.post__head .eyebrow a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.post__head h1 {
  font-size: clamp(2.1rem, 5vw, 3.4rem); margin-top: .35rem;
}

.post__hero { margin-top: clamp(2rem, 4vw, 3rem); }
.post__hero img {
  width: 100%; height: auto; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.post__body {
  max-width: 40rem; margin-top: clamp(2rem, 4vw, 3rem);
  font-size: 1.08rem; line-height: 1.75; color: var(--ink);
}
.post__body p + p { margin-top: 1.25rem; }
.post__body h2 {
  font-size: clamp(1.5rem, 3vw, 2rem); margin: 2.5rem 0 .75rem;
}
.post__body h3 { margin: 2rem 0 .5rem; }
.post__body ul, .post__body ol { margin: 1.25rem 0 1.25rem 1.5rem; }
.post__body li + li { margin-top: .5rem; }
.post__body img { border-radius: var(--radius); margin: 2rem 0; box-shadow: var(--shadow); }
.post__body a { font-weight: 600; }
.post__body blockquote {
  margin: 2rem 0; padding: 1.25rem 1.5rem;
  background: var(--frosting); border-left: 5px solid var(--berry);
  border-radius: 0 14px 14px 0; font-style: italic; color: var(--cocoa-soft);
}

.post__cta {
  max-width: 40rem; margin: clamp(3rem, 6vw, 4.5rem) auto clamp(4rem, 8vw, 6rem);
  padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px dashed var(--berry-soft);
}
.post__cta h2 { margin-bottom: .6rem; }

/* Diann's portrait in the About section */
.portrait {
  margin: 0 0 1.5rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--frosting);
  box-shadow: var(--shadow-lg);
  border: 6px solid var(--white);
}
.portrait img { width: 100%; height: auto; display: block; }