/* StuffedSicle Dessert Company — site styles */

:root {
  --peri: #7C91DF;
  --peri-light: #A9B8EE;
  --peri-pale: #E6EAF8;
  --peri-deep: #5E74C8;
  --navy: #343A5A;
  --navy-soft: #454C70;
  --ink: #4A5DAE;
  --cream: #F8F6F1;
  --cream-2: #EDEBE4;
  --line: #E3E0D8;
  --pill-muted: #C9D2F2;

  --font-body: 'Quicksand', sans-serif;
  --font-script: 'Sacramento', cursive;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  --gutter: clamp(20px, 4vw, 56px);
  --section-pad: clamp(64px, 9vw, 112px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--ink); }
img { max-width: 100%; }
button { font-family: inherit; }
h1, h2, h3, p { margin: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- shared type ---------- */
.eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.mono { font-family: var(--font-mono); }
.script { font-family: var(--font-script); line-height: .85; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; white-space: nowrap; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  border-radius: 999px; padding: 12px 24px; border: 2px solid transparent; text-decoration: none;
  transition: background .15s, color .15s, transform .15s, box-shadow .15s;
}
.btn-outline { border-color: var(--navy); color: var(--navy); background: transparent; padding: 10px 22px; }
.btn-outline:hover { background: var(--navy); color: var(--cream); }
.btn-solid { background: var(--navy); color: var(--cream); }
.btn-solid:hover { background: var(--navy-soft); color: var(--cream); }
.btn-cream { background: var(--cream); color: var(--navy); padding: 14px 28px; }
.btn-cream:hover { background: var(--peri-light); color: var(--navy); }
.btn-shadow {
  border-color: var(--navy); color: var(--navy); padding: 12px 26px;
  box-shadow: 0 3px 0 var(--navy);
}
.btn-shadow:hover { transform: translateY(2px); box-shadow: 0 1px 0 var(--navy); color: var(--navy); }
.btn-ghost-cream { border-color: var(--cream); color: var(--cream); background: transparent; padding: 9px 18px; }
.btn-ghost-cream:hover { background: var(--cream); color: var(--navy); }

/* ---------- header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 250;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 20px clamp(16px, 3vw, 40px);
  background: transparent; border-bottom: 1.5px solid transparent;
  transition: background .3s, padding .3s, border-color .3s;
}
.site-header .hdr-btn {
  background: none; border: none; padding: 6px 0; cursor: pointer; color: var(--cream);
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; transition: color .3s;
}
.site-header .hdr-right { display: flex; justify-content: flex-end; }
.site-header .wordmark {
  display: flex; font-family: var(--font-script); font-size: clamp(40px, 4.4vw, 56px); line-height: 1;
  color: var(--cream); white-space: nowrap; transition: color .3s;
}
.site-header.is-scrolled, .site-header.is-solid {
  background: var(--cream); border-bottom-color: var(--line); padding-top: 12px; padding-bottom: 12px;
}
.site-header.is-scrolled .hdr-btn, .site-header.is-scrolled .wordmark,
.site-header.is-solid .hdr-btn, .site-header.is-solid .wordmark { color: var(--ink); }
.site-header.is-scrolled .hdr-btn:hover, .site-header.is-solid .hdr-btn:hover { color: var(--navy); }

/* ---------- side nav ---------- */
.nav-scrim {
  position: fixed; inset: 0; z-index: 299; background: rgba(52, 58, 90, .55);
  opacity: 0; pointer-events: none; transition: opacity .35s;
}
.side-nav {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 300; width: min(100%, 460px);
  background: var(--cream); display: flex; flex-direction: column;
  padding: 24px clamp(20px, 2vw, 28px);
  transform: translateX(-105%); transition: transform .45s cubic-bezier(.22, 1, .36, 1);
  box-shadow: 0 0 40px rgba(52, 58, 90, .2);
}
body.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
body.nav-open .side-nav { transform: translateX(0); }
.side-nav .close-btn {
  align-self: flex-start; background: none; border: none; padding: 6px 0; cursor: pointer; color: var(--ink);
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.side-nav .close-btn:hover { color: var(--navy); }
.side-nav nav { display: flex; flex-direction: column; gap: 6px; margin-top: clamp(32px, 6vh, 64px); }
.side-nav nav a {
  font-size: clamp(30px, 3vw, 38px); font-weight: 700; line-height: 1.2; text-transform: uppercase; color: var(--ink);
  background: none; border: none; padding: 0; text-align: left; cursor: pointer; font-family: inherit;
}
.side-nav nav a:hover { color: var(--navy); }
.side-nav .ig-link {
  margin-top: auto; align-self: flex-start; display: flex; align-items: center; gap: 10px; color: var(--ink);
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.side-nav .ig-link:hover { color: var(--navy); }
.side-nav .ig-link .ig-badge {
  width: 34px; height: 34px; border-radius: 50%; background: var(--peri);
  display: flex; align-items: center; justify-content: center;
}
.side-nav .ig-link .ig-badge img { height: 22px; }

/* ---------- hero ---------- */
@keyframes ss-spin { to { transform: rotate(360deg); } }
@keyframes ss-bob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-10px) rotate(2deg); }
}

.hero {
  background: var(--peri); min-height: 100vh; display: flex; flex-direction: column;
  position: relative; overflow: hidden; padding-top: 96px;
}
.hero-body {
  position: relative; z-index: 2; flex: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(16px, 3vw, 40px); padding: clamp(24px, 4vw, 48px) clamp(16px, 3vw, 40px);
}
.hero-side {
  flex: 1 1 0; min-width: min(100%, 190px); display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.35;
}
.hero-side.right { align-items: flex-end; text-align: right; }
.hero-side .dot-line { display: flex; align-items: center; gap: 8px; }
.hero-side .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--navy); }
.hero-side .sub { font-weight: 600; letter-spacing: .04em; text-transform: none; font-size: 15px; }
.hero-mark {
  position: relative; flex: none; margin: 0 auto; width: clamp(240px, 34vw, 560px); aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
}
.hero-mark .ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: ss-spin 40s linear infinite; }
.hero-mark .ring text { font-family: Quicksand, sans-serif; font-size: 20px; font-weight: 700; letter-spacing: .16em; fill: var(--cream); }
.hero-mark .pop { height: 52%; width: auto; position: relative; will-change: transform; animation: ss-bob 5s ease-in-out infinite; }
.hero-foot {
  position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 20px;
  padding: 0 clamp(16px, 3vw, 40px);
}
.hero-foot .scroll-hint { font-family: var(--font-mono); font-size: 13px; line-height: 1.5; text-align: center; padding-bottom: 12px; }

/* ---------- feature cake (scroll-driven) ---------- */
.feature {
  height: 200vh; margin-top: -18vh; position: relative; z-index: 1; background: var(--cream);
  --a: 0; --w: 0;
}
.feature-sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(8px, 2vh, 20px); padding: clamp(16px, 3vh, 32px) 16px;
  background: rgb(
    calc(124 + (248 - 124) * var(--a)),
    calc(145 + (246 - 145) * var(--a)),
    calc(223 + (241 - 223) * var(--a))
  );
}
.feature-words {
  display: flex; gap: .3em; font-family: var(--font-script); font-size: clamp(48px, 7vh, 96px); line-height: 1;
  color: var(--navy); white-space: nowrap; opacity: var(--w);
}
.feature-words .l { transform: translateX(calc((1 - var(--w)) * -30vw)); }
.feature-words .r { transform: translateX(calc((1 - var(--w)) * 30vw)); }
.feature-cake {
  flex: none; height: min(62vh, 560px); width: auto; max-width: 86vw; object-fit: contain; will-change: transform;
  transform: translateY(calc((1 - var(--a)) * 6vh)) scale(calc(.72 + .28 * var(--a))) rotate(calc(-18deg * (1 - var(--a))));
}
.feature-caption { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: var(--w); }

/* ---------- about ---------- */
.about {
  padding: clamp(72px, 10vw, 140px) var(--gutter); display: flex; flex-direction: column; align-items: center;
  gap: 36px; text-align: center; border-bottom: 1.5px solid var(--line);
}
.about svg text { font-family: Quicksand, sans-serif; font-size: 17px; font-weight: 700; letter-spacing: .18em; fill: var(--ink); }
.about .lede {
  max-width: 880px; font-size: clamp(20px, 2.6vw, 32px); font-weight: 700; line-height: 1.3;
  text-transform: uppercase; letter-spacing: .01em; text-wrap: balance;
}

/* ---------- showcase ---------- */
.showcase { padding: var(--section-pad) var(--gutter); border-bottom: 1.5px solid var(--line); }
.showcase-grid {
  max-width: 1100px; margin: 0 auto; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(40px, 6vw, 96px); align-items: center;
}
.slider { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.slider-stage { position: relative; width: min(100%, 400px); aspect-ratio: 4 / 5; margin-right: 40px; }
.slider-card {
  position: absolute; inset: 0; border-radius: 14px; border: 2px solid var(--navy); overflow: hidden; background: var(--cream-2);
  transform-origin: right center; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.slider-card img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .85; }
.slider-card.k3 { transform: translateX(42px) scale(.88); z-index: 7; }
.slider-card.k2 { transform: translateX(28px) scale(.92); z-index: 8; }
.slider-card.k1 { transform: translateX(14px) scale(.96); z-index: 9; }
.slider-card.front { z-index: 10; }
.slider-card.front img { opacity: 1; position: absolute; inset: 0; }
.slider-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 16px; }
.slider-tag {
  align-self: flex-start; white-space: nowrap; max-width: calc(100% - 8px); overflow: hidden; text-overflow: ellipsis;
  background: var(--cream); border-radius: 999px; padding: 6px 14px;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.slider-count {
  align-self: flex-start; background: var(--navy); color: var(--cream); border-radius: 999px; padding: 5px 12px;
  font-family: var(--font-mono); font-size: 12px;
}
.slider-controls { display: flex; gap: 10px; }
.slider-controls button {
  width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--navy); background: transparent; color: var(--navy);
  font-size: 18px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.slider-controls button:hover { background: var(--navy); color: var(--cream); }
.showcase-copy { display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.showcase-copy img { height: clamp(220px, 26vw, 340px); width: auto; transform: rotate(4deg); }
.showcase-copy img.illo { height: auto; width: min(100%, 440px); transform: none; }
.showcase-copy h2 {
  max-width: 420px; font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; line-height: 1.2;
  text-transform: uppercase; letter-spacing: .02em; text-wrap: balance;
}
.showcase-copy p.copy { max-width: 420px; font-size: 17px; line-height: 1.5; text-wrap: pretty; }
.showcase-copy .btn { margin-top: 4px; }

/* ---------- menu section ---------- */
.menu { padding: var(--section-pad) var(--gutter); border-bottom: 1.5px solid var(--line); }
.menu-head {
  max-width: 1200px; margin: 0 auto 40px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap;
}
.menu-head h2 { font-size: clamp(32px, 4.5vw, 56px); font-weight: 700; line-height: 1; text-transform: uppercase; }
.menu-grid {
  max-width: 1200px; margin: 0 auto; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(32px, 4vw, 48px);
}
.menu-col { display: flex; flex-direction: column; gap: 22px; }
.menu-col h3 { font-size: clamp(26px, 2.6vw, 32px); font-weight: 700; text-transform: uppercase; letter-spacing: .01em; }
.menu-list { display: flex; flex-direction: column; gap: 18px; }
.menu-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline; }
.menu-item .name { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.menu-item .desc { font-family: var(--font-mono); font-size: 13px; line-height: 1.45; margin-top: 3px; }
.menu-item .price { font-family: var(--font-mono); font-size: 14px; white-space: nowrap; }

/* ---------- treats ---------- */
.treats { padding: var(--section-pad) var(--gutter); border-bottom: 1.5px solid var(--line); }
.treats-grid {
  max-width: 1200px; margin: 0 auto; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(32px, 5vw, 64px); align-items: center;
}
.treats-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.treats-photos > div { aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; }
.treats-photos > div:last-child { margin-top: 40px; }
.treats-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.treats-copy { display: flex; flex-direction: column; gap: 18px; }
.treats-copy .script { font-size: clamp(64px, 7vw, 96px); color: var(--peri-deep); }
.treats-copy h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; line-height: 1.15; text-transform: uppercase; }
.treats-copy p { font-size: 18px; line-height: 1.5; max-width: 460px; }
.treats-copy .btn { align-self: flex-start; }

/* ---------- events ---------- */
.events { background: var(--navy); color: var(--cream); padding: var(--section-pad) var(--gutter); }
.events-grid {
  max-width: 1200px; margin: 0 auto; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(32px, 5vw, 64px); align-items: center;
}
.events-copy { display: flex; flex-direction: column; gap: 20px; }
.events-copy .script { font-size: clamp(72px, 9vw, 120px); color: var(--peri-light); }
.events-copy p { font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; line-height: 1.35; text-transform: uppercase; }
.events-copy p.copy { font-size: 18px; font-weight: 500; line-height: 1.55; text-transform: none; max-width: 480px; text-wrap: pretty; }
.events-copy .btn { align-self: flex-start; }
.events-photo { aspect-ratio: 4 / 5; max-height: 640px; border-radius: 24px; overflow: hidden; border: 2px solid var(--peri-light); }
.events-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; display: block; }

/* ---------- full menu modal ---------- */
.full-menu {
  position: fixed; inset: 0; z-index: 400; background: rgba(52, 58, 90, .8); overflow-y: auto;
  display: none; flex-direction: column; align-items: center; padding: 16px 16px 40px;
}
.full-menu.is-open { display: flex; }
.full-menu-bar {
  position: sticky; top: 0; z-index: 2; width: var(--fw, 640px); max-width: 100%;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0 14px;
}
.full-menu-bar .title { font-family: var(--font-script); font-size: 40px; line-height: 1; color: var(--cream); }
.full-menu-bar .actions { display: flex; gap: 10px; }
.full-menu-bar .close { border: none; background: var(--cream); color: var(--navy); padding: 11px 20px; }
.full-menu-bar .close:hover { background: var(--peri-light); }
.full-menu-sheet {
  flex: none; width: var(--fw, 640px); height: var(--fh, 828px); border-radius: 12px; overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5); background: var(--cream);
}
.full-menu-sheet iframe {
  width: 1275px; height: 1650px; border: 0; display: block;
  transform: scale(var(--fs, .5)); transform-origin: 0 0;
}

/* ---------- footer ---------- */
.site-footer {
  background: var(--peri); color: var(--cream);
  padding: clamp(56px, 8vw, 96px) var(--gutter) 24px;
  display: flex; flex-direction: column; align-items: center; gap: clamp(40px, 6vw, 72px);
}
.footer-cols {
  width: 100%; max-width: 1000px; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 40px; text-align: center;
}
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col h2 { font-size: clamp(26px, 2.6vw, 32px); font-weight: 700; text-transform: uppercase; }
.footer-col .lines {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.5;
}
.footer-col p.copy { font-size: 15px; line-height: 1.5; font-weight: 500; max-width: 300px; margin: 0 auto 4px; text-wrap: pretty; }
.footer-col a { color: var(--cream); }
.footer-col a:hover { color: var(--navy); }
.footer-mark { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.footer-mark svg text { font-family: Quicksand, sans-serif; font-size: 17px; font-weight: 700; letter-spacing: .18em; fill: var(--cream); }
.footer-mark img { height: 96px; width: auto; margin-top: -62px; transform: rotate(-8deg); }
.footer-legal {
  width: 100%; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 12px; color: var(--navy);
}

/* ---------- narrow screens ---------- */
@media (max-width: 760px) {
  .hero { padding-top: 88px; }
  .hero-body { flex-direction: column; align-items: stretch; justify-content: space-between; gap: 20px; padding: 16px 20px 24px; }
  .hero-side, .hero-side.right { flex: none; min-width: 0; }
  .hero-side.right { align-items: flex-end; }
  .hero-mark { width: min(78vw, 360px); }
  .hero-foot .scroll-hint { padding-bottom: 20px; }
  .site-header { padding-left: 16px; padding-right: 16px; }
  .site-header .wordmark { font-size: 36px; }
  .feature { height: 160vh; margin-top: -10vh; }
  .feature-cake { height: min(50vh, 420px); }
  .about .lede { font-size: clamp(19px, 5.4vw, 26px); }
  .slider-stage { margin-right: 32px; width: min(100%, 340px); }
  .menu-head { align-items: flex-start; }
  .treats-photos > div:last-child { margin-top: 28px; }
  .events-photo { max-height: 480px; }
  .footer-cols { gap: 28px; }
  .full-menu { padding: 12px 8px 24px; }
}
@media (max-width: 420px) {
  .site-header .wordmark { font-size: 32px; }
  .side-nav nav a { font-size: 28px; }
  .treats-copy h2 { font-size: 24px; }
  .events-copy p { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-mark .ring, .hero-mark .pop { animation: none; }
  html { scroll-behavior: auto; }
}