/* FERIA: a fair stall at full volume. Colour blocks, a fat rounded display face, letters that jump, photos as stickers. */
:root {
  --bg: #fff1dc; --bg-2: #ffe6c2; --fg: #3b1d12; --muted: #7a5240;
  --gold: #f4b63c; --choc: #3b1d12; --tomato: #ff4b1f; --pink: #ffb4c8; --cream: #fff1dc;
  --accent: #ff4b1f; --accent-ink: #fff1dc; --focus: #3b1d12;
  --font-display: "Bagel Fat One", ui-rounded, system-ui, sans-serif; --font-body: "Familjen Grotesk", ui-sans-serif, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1); --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --grain: 0.06; --wa-bg: var(--choc); --wa-fg: var(--gold);
}
body { font-weight: 500; }
h1, h2, h3, .display { font-family: var(--font-display); font-weight: 400; }

/* nav */
.nav { position: fixed; z-index: 70; top: max(10px, env(safe-area-inset-top)); left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: center; padding: 6px 6px 6px 18px; border-radius: 999px; background: var(--choc); color: var(--cream); box-shadow: 0 10px 30px -12px color-mix(in oklab, var(--choc) 60%, transparent); }
.nav__mark { font: 400 1.05rem/1 var(--font-display); text-decoration: none; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.nav__cta { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 999px; background: var(--tomato); color: var(--cream); font-weight: 700; text-decoration: none; transition: transform 0.5s var(--spring); }
.nav__cta:hover { transform: rotate(-4deg) scale(1.05); }

/* pill */
.pill { display: inline-flex; align-items: center; gap: 14px; min-height: 66px; padding: 7px 7px 7px 28px; border-radius: 999px; background: var(--tomato); color: var(--cream); font: 700 1.125rem/1 var(--font-body); text-decoration: none; white-space: nowrap; box-shadow: 0 6px 0 var(--choc); transition: transform 0.5s var(--spring), box-shadow 0.5s var(--spring); }
.pill__dot { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--cream); color: var(--tomato); transition: transform 0.6s var(--spring); }
.pill:hover { transform: translateY(-3px) rotate(-1.5deg); box-shadow: 0 9px 0 var(--choc); }
.pill:hover .pill__dot { transform: rotate(-18deg) scale(1.08); }
.pill:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--choc); }
.pill--choc { background: var(--choc); color: var(--gold); box-shadow: 0 6px 0 var(--tomato); }
.pill--choc .pill__dot { background: var(--gold); color: var(--choc); }
.pill--choc:hover { box-shadow: 0 9px 0 var(--tomato); }

/* hero */
.hero { background: var(--gold); padding: calc(80px + env(safe-area-inset-top)) 0 56px; overflow: clip; }
.hero__word { color: var(--choc); line-height: 0.82; letter-spacing: -0.02em; }
.hero__word > span { display: block; font-size: 25vw; white-space: nowrap; }
.lt { display: inline-block; }
.lt:nth-child(odd) { transform: rotate(-3deg); } .lt:nth-child(even) { transform: rotate(3deg) translateY(0.03em); }
.hero__stage { position: relative; margin-top: 10px; }
.sticker-photo { position: relative; padding: 10px; background: var(--cream); border-radius: 30px; transform: rotate(-2.5deg); box-shadow: 0 24px 50px -24px color-mix(in oklab, var(--choc) 70%, transparent); }
.sticker-photo .media { aspect-ratio: 4 / 3.4; border-radius: 22px; }
.sticker-photo img { filter: saturate(1.15) contrast(1.05); }
.sticker { position: absolute; display: grid; place-items: center; text-align: center; font: 400 1.05rem/1 var(--font-display); color: var(--choc); border-radius: 50%; box-shadow: 0 10px 24px -12px color-mix(in oklab, var(--choc) 70%, transparent); }
.sticker--pink { right: -6px; top: -26px; width: 104px; height: 104px; padding: 14px; background: var(--pink); transform: rotate(12deg); }
.sticker--tomato { left: -4px; bottom: -22px; padding: 12px 18px; border-radius: 999px; background: var(--tomato); color: var(--cream); transform: rotate(-7deg); }
.hero__foot { display: grid; gap: 26px; margin-top: 44px; }
.hero__lead { font-size: clamp(1.25rem, 1.4vw + 0.8rem, 1.75rem); line-height: 1.25; color: var(--choc); max-width: 28ch; }
.hero__lead strong { font: 400 1.1em/1 var(--font-display); }

/* marquee */
.strip { background: var(--tomato); color: var(--cream); padding: 16px 0; transform: rotate(-2deg); margin: -18px -10px 0; position: relative; z-index: 2; --marquee-speed: 18s; }
.strip span { font: 400 clamp(2rem, 6vw, 4.25rem)/1 var(--font-display); padding: 0 0.35em; }
.strip b { display: inline-block; width: 0.42em; height: 0.42em; border-radius: 50%; background: var(--gold); align-self: center; font-size: clamp(2rem, 6vw, 4.25rem); }

/* bento menu */
.menu { padding: 16vh 0 14vh; }
.menu__head { font-size: clamp(3.6rem, 16vw, 11rem); line-height: 0.85; color: var(--choc); margin-bottom: 32px; }
.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; gap: 12px; margin: 0; padding: 0; }
.tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 210px; padding: 18px; border-radius: 28px; overflow: hidden; transition: transform 0.6s var(--spring); }
.tile:hover { transform: rotate(-1deg) scale(1.015); }
.tile--big { grid-column: 1 / -1; min-height: 420px; }
.tile--wide { grid-column: 1 / -1; }
.tile--gold { background: var(--gold); color: var(--choc); }
.tile--choc { background: var(--choc); color: var(--gold); }
.tile--pink { background: var(--pink); color: var(--choc); }
.tile--tomato { background: var(--tomato); color: var(--cream); }
.tile .media { position: absolute; inset: 0; background: none; }
.tile .media img { filter: saturate(1.15) contrast(1.05); }
.tile .media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in oklab, var(--choc) 82%, transparent), transparent 62%); }
.tile:has(.media) { color: var(--cream); }
.tile__txt { position: relative; }
.tile h3 { font-size: clamp(1.6rem, 2vw + 1rem, 2.6rem); line-height: 0.95; }
.tile p { margin-top: 6px; font-size: 0.9375rem; opacity: 0.9; }
.price { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; min-width: 76px; height: 76px; padding: 0 12px; border-radius: 999px; background: var(--cream); color: var(--choc); font: 400 1.4rem/1 var(--font-display); transform: rotate(8deg); }
.tile--choc .price { background: var(--gold); }
.tile--tomato .price { background: var(--choc); color: var(--gold); }

/* kinetic */
.kinetic { background: var(--choc); color: var(--gold); padding: 14vh 0 16vh; overflow: clip; }
.kinetic__line { font: 400 clamp(3.4rem, 15vw, 12rem)/0.9 var(--font-display); white-space: nowrap; padding-left: 4vw; }
.kinetic__line--alt { color: var(--pink); text-align: right; padding: 0 4vw 0 0; }
.stack { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 8vh; }
.st { padding: 8px; background: var(--cream); border-radius: 22px; }
.st .media { aspect-ratio: 1; border-radius: 16px; }
.st img { filter: saturate(1.15) contrast(1.05); }
.st--1 { transform: rotate(-4deg); } .st--2 { transform: rotate(3deg) translateY(28px); } .st--3 { transform: rotate(2deg); } .st--4 { transform: rotate(-3deg) translateY(28px); }

/* hours */
.hours { background: var(--pink); color: var(--choc); padding: 16vh 0; }
.hours__big { font: 400 clamp(3.4rem, 16vw, 12rem)/0.85 var(--font-display); }
.hours__mid { margin-top: 18px; font: 400 clamp(1.6rem, 3vw + 1rem, 3rem)/1.05 var(--font-display); }
.hours__place { margin-top: 10px; font-size: 1.125rem; }
.hours__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.chip { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px; border-radius: 999px; background: var(--cream); color: var(--choc); font-weight: 700; text-decoration: none; border: 2px solid var(--choc); box-shadow: 0 4px 0 var(--choc); transition: transform 0.4s var(--spring), box-shadow 0.4s var(--spring); }
.chip:hover { transform: translateY(-2px) rotate(-1deg); box-shadow: 0 6px 0 var(--choc); }
.chip:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--choc); }

/* final */
.final { background: var(--gold); padding: 18vh 0; }
.final__in { display: grid; gap: 34px; justify-items: start; }
.final__head { font-size: clamp(3.4rem, 14vw, 11rem); line-height: 0.86; color: var(--choc); max-width: 9ch; }

/* footer */
.foot { background: var(--choc); color: var(--cream); padding: 48px 0 calc(100px + env(safe-area-inset-bottom)); font-size: 0.875rem; }
.foot__in { display: grid; gap: 10px; }
.foot__mark { font: 400 clamp(2.2rem, 8vw, 5rem)/1 var(--font-display); color: var(--gold); }
.foot a { color: var(--cream); }

@media (min-width: 900px) {
  .nav { left: 50%; right: auto; transform: translateX(-50%); width: min(640px, calc(100% - 40px)); }
  .hero { padding-top: 104px; }
  .hero__in { display: grid; grid-template-columns: 7fr 5fr; column-gap: 48px; align-items: end; }
  .hero__word { grid-column: 1 / -1; }
  .hero__stage { grid-column: 1; margin-top: 1vw; width: 74%; }
  .hero__foot { grid-column: 2; margin: 0 0 40px; }
  .sticker--pink { width: 140px; height: 140px; font-size: 1.35rem; right: -40px; top: -40px; }
  .sticker--tomato { font-size: 1.35rem; padding: 16px 26px; }
  .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 260px; gap: 16px; }
  .tile { min-height: 0; padding: 26px; }
  .tile--big { grid-column: span 2; grid-row: span 2; min-height: 0; }
  .tile--choc { grid-column: span 2; }
  .tile--pink { grid-column: span 1; }
  .tile--wide { grid-column: span 1; }
  .stack { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
  .hours__in { display: grid; grid-template-columns: 1.4fr 1fr; column-gap: 48px; align-items: end; }
  .hours__big { grid-column: 1 / -1; }
  .hours__links { grid-column: 2; grid-row: 2 / span 2; justify-content: flex-end; margin: 0; }
  .final__in { grid-template-columns: 1fr auto; align-items: end; }
}
/* ambient: the sticker photo bobs, the round sticker spins slowly */
.sticker-photo { animation: bob 5.5s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; }
@keyframes bob { from { transform: rotate(-2.5deg) translateY(0); } to { transform: rotate(-1deg) translateY(-8px); } }
.sticker--pink { animation: spin 14s linear infinite; }
@keyframes spin { from { transform: rotate(12deg); } to { transform: rotate(372deg); } }