@import url('https://fonts.googleapis.com/css2?family=Gloock&family=Instrument+Sans:wght@400;500;600;700&display=swap');

:root {
  --paper: #fbf9f5;
  --white: #fffdf9;
  --ink: #211c1b;
  --muted: #655958;
  --red: #941b14;
  --dark-red: #6f1510;
  --pink: #f5ead6;
  --gold: #fbdf9c;
  --line: #d8ceca;
  --edge: clamp(20px, 5vw, 86px);
  --serif: "Gloock", Georgia, serif;
  --sans: "Instrument Sans", Arial, sans-serif;
}

* { box-sizing: border-box }
html { scroll-behavior: smooth }
body { margin: 0; color: var(--ink); background: var(--paper); font: 16px/1.5 var(--sans) }
h1, h2, p, figure, dl, dd { margin: 0 }
h2 { font: 400 clamp(44px, 6vw, 104px)/.92 var(--serif); letter-spacing: -.045em; text-wrap: balance }
a { color: inherit; text-underline-offset: 4px }
a:hover { text-decoration-thickness: 2px }
button { font: inherit; color: inherit; cursor: pointer }
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--white);
}
img { display: block; width: 100%; height: auto }
figcaption { margin-top: 8px; font-size: 13px }
section, #laval, #dollard, #jungle-reels { scroll-margin-top: 24px }

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  padding: 14px var(--edge);
}
.bar { border-bottom: 1px solid var(--line); background: var(--paper) }
.brand { color: var(--red); font: 400 32px/.92 var(--serif); letter-spacing: .035em; text-transform: uppercase; text-decoration: none }
.brand-logo { display: block; flex: none }
.brand-logo .anniversary-logo { width: clamp(78px, 10vw, 112px); border-radius: 50% }
nav { display: flex; align-items: center; gap: clamp(12px, 3vw, 42px); font-size: 14px; font-weight: 600 }
nav a { text-decoration: none }
nav a:hover { text-decoration: underline }
#lang {
  -webkit-appearance: none;
  appearance: none;
  min-height: 44px;
  padding: 0 36px 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper) url("icon-chevron.svg") right 13px center / 14px no-repeat;
  color: inherit;
  font: inherit;
}
#lang:hover { background-color: var(--pink); border-color: var(--pink) }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(30px, 5vw, 82px);
  padding: clamp(32px, 5vw, 76px) var(--edge) clamp(48px, 6vw, 96px);
  background: #f6eddf;
}
.hero-copy { text-align: center }
.hero h1 { margin: 0 auto; width: min(100%, 610px) }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.hero-copy .hero-description { margin: 15px auto 27px; font-size: 14px; font-weight: 600; letter-spacing: .04em }
.hero-copy h2 { font-size: clamp(33px, 4vw, 61px); text-wrap: balance }
.hero-copy p:not(.hero-description) { max-width: 36ch; margin: 13px auto 24px }
.hero-locations { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; font-size: 14px; font-weight: 700 }
.hero-locations a { padding: 5px 0 }
.hero-locations small { display: block; font-size: 11px; font-weight: 600; color: var(--muted) }
.plate img { aspect-ratio: .92; object-fit: cover }
.plate figcaption { color: var(--muted) }
.visit p { max-width: 39ch; margin: 19px 0 24px }
.button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  padding: 12px 21px;
  border-radius: 100px;
  background: var(--red);
  color: var(--white);
  text-decoration: none;
  font-weight: 700;
  transition: background .18s ease, transform .18s ease;
}
.button:hover { background: var(--dark-red) }
.button:active { transform: translateY(2px) }
.quiet { color: var(--red); font-weight: 700 }

.bakery, .jungle, .cake-door, .visit { padding: clamp(54px, 8vw, 130px) var(--edge) }
.bakery { border-block: 1px solid var(--line); background: var(--white) }
.bakery-intro { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); column-gap: clamp(24px, 5vw, 72px); align-items: end; margin-bottom: clamp(28px, 4vw, 60px) }
.bakery-intro h2 { grid-row: span 2; max-width: 12ch; color: var(--red) }
.bakery-intro p { align-self: end; max-width: 33ch; padding-bottom: 10px }
.bakery-intro .quiet { justify-self: start; align-self: start }
.menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px }
.menu-card { min-width: 0; background: var(--paper); border: 1px solid var(--line) }
.menu-photo { aspect-ratio: 1.55; object-fit: cover }
.menu-card-counter .menu-photo { object-position: center 55% }
.menu-card-copy { padding: clamp(16px, 2.25vw, 32px) }
.menu-card h3 { margin: 0 0 15px; color: var(--red); font: 400 clamp(25px, 3vw, 44px)/1 var(--serif); letter-spacing: -.035em }
.menu-card ul { list-style: none; margin: 0; padding: 0; color: var(--muted) }
.menu-card li + li { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px }
.menu-card .season-note { margin-top: 16px; font-size: .875rem }
.menu-card-event { display: flex; align-items: center; color: var(--white); background: var(--dark-red); border-color: var(--dark-red) }
.menu-card-event h3, .menu-card-event a { color: var(--gold) }
.menu-card-event :focus-visible { outline-color: var(--gold); box-shadow: none }
.menu-card-event .menu-card-copy { padding-block: clamp(36px, 5vw, 76px) }
.sweet-table-link { display: inline-block; margin: 8px 12px 0 0; font-size: 14px; white-space: nowrap }

.kok-feature { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); align-items: center; gap: clamp(34px, 7vw, 110px); padding: clamp(48px, 7vw, 110px) var(--edge); background: var(--pink) }
.kok-photo img { aspect-ratio: 1.24; object-fit: cover }
.kok-copy h2 { margin-bottom: 20px; color: var(--red); font: 400 clamp(59px, 8vw, 128px)/.86 var(--serif); letter-spacing: -.055em }
.kok-copy p { max-width: 34ch; margin-bottom: 22px }

.jungle { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 72px); align-items: center; background: var(--red); color: var(--white) }
.jungle h2 { color: var(--gold); max-width: 12ch; text-wrap: pretty }
.jungle p { max-width: 45ch }
.jungle p + p { margin-top: 14px }
.jungle-reels { grid-column: 1/-1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 30px); align-items: start }

.reel { min-width: 0; container-type: inline-size }
.reel iframe { display: block; width: 100%; height: calc(125cqw + 210px); border: 0; background: white }
.reel-cover[hidden], .reel-player[hidden] { display: none }
.reel-cover {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: start;
  align-items: end;
  gap: 21px;
  width: 100%;
  aspect-ratio: 4 / 4.5;
  min-height: 270px;
  padding: clamp(19px, 3vw, 44px);
  border: 0;
  text-align: left;
  background: var(--dark-red);
  color: var(--white);
}
.reel-still, .reel-cover::before { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none }
.reel-still { z-index: -2; object-fit: cover; object-position: center 22% }
.reel-cover::before { content: ""; z-index: -1; background: linear-gradient(180deg, #170804b8, transparent 29%, #17080430 44%, #170804f5 100%) }
.reel-cover-label { font-size: 14px; font-weight: 700 }
.reel-cover-title { font-size: clamp(26px, 12cqw, 70px); line-height: .92; letter-spacing: -.055em; font-weight: 700; text-wrap: balance }
.jungle :focus-visible { outline-color: var(--white); box-shadow: 0 0 0 3px var(--ink) }
.reel-play { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700 }
.reel-play-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: var(--red); background: var(--white); transition: transform .18s ease }
.reel-play-icon::before { content: ""; border-block: 5px solid transparent; border-left: 9px solid currentColor; margin-left: 3px }
.reel-cover:hover .reel-play-icon { transform: scale(1.12) }
.reel-cover:active .reel-play-icon { transform: scale(.94) }
.reel-close { display: block; margin: 0 0 8px auto; padding: 7px 12px; background: transparent; border: 1px solid currentColor; border-radius: 100px; font-weight: 700 }

.cake-door h2, .visit h2 { text-wrap: pretty }
.visit { border-top: 1px solid var(--line); background: var(--white) }
.locations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(25px, 5vw, 76px); margin-top: clamp(28px, 4vw, 56px) }
.location { display: grid; grid-template-rows: auto auto 1fr auto auto; gap: 12px; border-top: 1px solid var(--line); padding-top: 18px; min-width: 0 }
.location h3 { margin: 0; font-size: clamp(23px, 3vw, 39px); line-height: 1.08; letter-spacing: -.04em }
.location address { font-style: normal; color: var(--muted) }
.location-map { display: block; width: 100%; height: clamp(230px, 26vw, 350px); border: 1px solid var(--line); background: var(--paper) }
.location .quiet { justify-self: start; margin-bottom: 3px }
.hours { display: grid; align-content: start; gap: 4px; font-size: 15px }
.hours div { display: flex; flex-wrap: wrap; gap: 4px 12px }
.hours dt, .opening-status strong { font-weight: 700 }
.hours dd, .opening-status span { color: var(--muted) }
.opening-status { display: grid; align-content: start; gap: 4px; font-size: 15px }
.site-footer { padding: clamp(38px, 6vw, 94px) var(--edge) 0; background: #35130f; color: var(--paper); border-top: 3px solid #cf9a4d }
.footer-main { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .7fr); align-items: start; gap: clamp(26px, 6vw, 96px); padding-bottom: clamp(30px, 5vw, 68px) }
.footer-identity img { width: 88px; border-radius: 50% }
.footer-identity a { display: inline-block; border-radius: 50% }
.footer-identity p { margin-top: 15px; color: var(--gold); font: 400 clamp(30px, 3.4vw, 55px)/1.05 var(--serif); letter-spacing: -.035em }
.site-footer h2 { margin-bottom: 15px; color: var(--gold); font: 700 16px/1.3 var(--sans); letter-spacing: 0 }
.footer-visit a, .footer-contact a { display: block; width: fit-content; margin-bottom: 12px }
.footer-visit span { display: block; color: #f1dfd1; font-size: .875rem }
.footer-visit a { text-decoration: none }
.footer-visit a:hover strong { text-decoration: underline }
.footer-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 18px 0; border-top: 1px solid #a9806c; font-size: .875rem }
.site-footer :focus-visible { outline-color: var(--gold); box-shadow: none }

@media (max-width: 950px) {
  .menu { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 670px) {
  .bar { display: grid; justify-content: stretch; justify-items: center; row-gap: 8px }
  nav { justify-content: center; flex-wrap: wrap; width: min(100%, 420px); gap: 6px 12px; font-size: 12px }
  .hero, .kok-feature, .jungle, .locations { grid-template-columns: minmax(0, 1fr) }
  .hero-copy .hero-description { margin-bottom: 20px }
  .plate img { aspect-ratio: 1.42 }
  .bakery-intro { grid-template-columns: 1fr; gap: 12px }
  .bakery-intro h2 { grid-row: auto }
  .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 27px 18px }
  .footer-identity { grid-column: 1 / -1 }
  .kok-copy { grid-row: 1 }
  .jungle-reels { grid-template-columns: minmax(0, 1fr); max-width: 440px; width: 100%; justify-self: start; gap: 25px }
  .reel-cover { aspect-ratio: 1.13; min-height: 240px }
}
@media (max-width: 510px) {
  .menu { grid-template-columns: 1fr }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after { transition: none !important }
}

.missing-page { min-height: 100svh; background: #f6eddf }
.missing-bar { display: flex; flex-wrap: nowrap }
.missing { text-align: center; padding: clamp(28px, 5vw, 72px) var(--edge) 70px }
.missing-art { position: relative; width: min(100%, 520px); margin: 0 auto 20px; padding: 5px 0 41px }
.missing-code { display: block; color: var(--red); font: 400 clamp(86px, 18vw, 185px)/.9 var(--serif); letter-spacing: -.065em }
.missing-pin {
  position: absolute;
  bottom: 13px;
  left: calc(50% - 48px);
  width: 96px;
  height: 24px;
  border-radius: 6px;
  background: repeating-linear-gradient(176deg, #fbdf9c 0 5px, #edc474 6px 8px);
  border: 1px solid #be8436;
  box-shadow: 0 6px 0 #72181025;
  transform: translateX(-48px) rotate(-8deg);
}
.missing-pin::before, .missing-pin::after {
  content: "";
  position: absolute;
  top: 7px;
  width: 18px;
  height: 8px;
  border-radius: 8px;
  background: #bd7e34;
}
.missing-pin::before { right: 100% }
.missing-pin::after { left: 100% }
.missing-art::after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: calc(50% - 1px);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #b0774f;
  box-shadow: -76px -6px #a36043, -58px 2px #cda175, 56px -9px #a36043, 74px 1px #cda175;
}
.missing h1 { font: 400 clamp(36px, 6vw, 76px)/1.02 var(--serif); letter-spacing: -.04em; text-wrap: balance }
.missing-speaker { color: var(--dark-red); font-weight: 700; margin-bottom: 5px }
.missing-setup { max-width: 40ch; margin: 12px auto 16px }
.missing-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px 24px; margin-top: 24px }
.missing-knock { visibility: hidden; position: absolute; left: calc(50% + 89px); bottom: 42px; color: var(--dark-red); font-weight: 700; font-size: .75rem; transform: rotate(10deg) }
.missing-tray { margin: 0 auto; width: min(100%, 380px); color: var(--dark-red) }
.missing-tray summary { display: inline-flex; align-items: center; gap: 10px; padding: 7px 10px; cursor: pointer; font-weight: 700; text-decoration: underline; text-underline-offset: 4px }
.missing-tray summary::-webkit-details-marker { display: none }
.tray-icon { display: inline-block; width: 25px; height: 10px; border: 2px solid currentColor; border-top: 0; border-radius: 0 0 8px 8px; transform-origin: right center }
.missing-tray p { margin: 8px auto 0; background: var(--white); border: 1px solid var(--line); padding: 11px 15px }
.missing-tray strong { display: block; margin-bottom: 3px }
.missing-tray[open] .tray-icon { transform: rotate(-16deg) }
.missing:has(.missing-tray[open]) .missing-pin { transform: translateX(39px) rotate(9deg) }
.missing:has(.missing-tray[open]) .missing-knock { visibility: visible }
@media (prefers-reduced-motion: no-preference) {
  .missing {
    --pin-run: 1.35s;
    --pin-impact: 1s; /* The 74% keyframe is the collision. */
    --comic-pause: .18s;
  }
  .missing:has(.missing-tray[open]) .missing-pin { animation: sneak-and-clack var(--pin-run) ease-out both }
  .missing:has(.missing-tray[open]) .missing-knock { animation: pin-knock .52s var(--pin-impact) ease-out both }
  .missing-tray[open] .tray-icon { animation: lift-tray .46s ease-out both }
  .missing-tray[open] p { animation: tray-reveal .25s calc(var(--pin-impact) + var(--comic-pause)) ease-out both }
}
@keyframes sneak-and-clack {
  0%, 19% { transform: translateX(-48px) rotate(-8deg) }
  43%, 65% { transform: translateX(-16px) rotate(-4deg) }
  74% { transform: translate(45px, 3px) rotate(16deg) }
  83% { transform: translate(34px, -5px) rotate(3deg) }
  92%, 100% { transform: translateX(39px) rotate(9deg) }
}
@keyframes pin-knock {
  0% { opacity: 0; transform: translateY(5px) rotate(10deg) }
  25%, 100% { opacity: 1; transform: translateY(0) rotate(10deg) }
}
@keyframes lift-tray {
  0% { transform: rotate(0) }
  65% { transform: rotate(-23deg) }
  100% { transform: rotate(-16deg) }
}
@keyframes tray-reveal {
  from { opacity: 0; transform: translateY(-6px) }
  to { opacity: 1; transform: translateY(0) }
}

.site-header { position: sticky; top: 0; z-index: 10; transition: transform .24s ease }
.site-header.is-tucked:not(:focus-within) { transform: translateY(-100%) }
.float-top {
  position: fixed;
  z-index: 11;
  right: max(15px, env(safe-area-inset-right));
  bottom: max(15px, env(safe-area-inset-bottom));
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid #edc474;
  border-radius: 50%;
  background: var(--dark-red);
  color: var(--gold);
  box-shadow: 0 3px 12px #211c1b44;
}
.float-top[hidden] { display: none }
.float-top:hover { background: var(--red) }
.top-arrow {
  width: 13px;
  height: 13px;
  border-top: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: translateY(3px) rotate(45deg);
}

body:has(.site-header) :is(section, #laval, #dollard, #jungle-reels) { scroll-margin-top: clamp(108px, 13vw, 150px) }
@media (max-width: 670px) {
  body:has(.site-header) :is(section, #laval, #dollard, #jungle-reels) { scroll-margin-top: 172px }
}

.footer-socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px }
.footer-socials a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  color: var(--gold);
  border: 1px solid #a9806c;
  border-radius: 50%;
  text-decoration: none;
}
.footer-socials a:hover { color: #35130f; background: var(--gold); border-color: var(--gold) }
.social-instagram { position: relative; width: 19px; height: 19px; border: 1.8px solid currentColor; border-radius: 5px }
.social-instagram::before { content: ""; position: absolute; inset: 4px; border: 1.6px solid currentColor; border-radius: 50% }
.social-instagram::after { content: ""; position: absolute; top: 2px; right: 2px; width: 2px; height: 2px; border-radius: 50%; background: currentColor }
.social-facebook { font: 700 25px/.92 Arial, sans-serif }

@media (prefers-reduced-motion: reduce) {
  .missing-tray[open] p { animation: tray-reveal-still 0s .18s both }
}
@keyframes tray-reveal-still {
  from { opacity: 0 }
  to { opacity: 1 }
}

.cake-door .cake-partner-label {
  color: #284437;
  font-size: .875rem;
  font-weight: 700;
  margin: 0;
}
.cake-partner-actions { justify-self: start; display: flex; align-items: center; gap: 10px 17px; flex-wrap: wrap }

.cake-door {
  background: #edf0e8;
  border-top: 1px solid #cbd2c7;
}
.cake-door h2 { color: #284437; font-size: clamp(43px, 6vw, 86px) }
.cake-partner-intro { display: grid; justify-items: start; gap: 14px; margin-bottom: clamp(26px, 4vw, 55px) }
.cake-partner-intro > p:not(.cake-partner-label) { max-width: 67ch }
.cake-partner-marks {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 23px);
  width: fit-content;
  max-width: 100%;
  padding: 11px clamp(12px, 2vw, 25px);
  border: 1px solid #ccd3c6;
  background: var(--paper);
  color: #526858;
  font-size: clamp(20px, 3vw, 32px);
}
.cake-partner-ambrosia { width: clamp(54px, 7vw, 88px); border-radius: 50% }
.cake-partner-lawrence { width: clamp(112px, 15vw, 191px); min-width: 0 }
.cake-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 2vw, 24px) }
.cake-gallery img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center bottom; background: #26332a }
.cake-gallery figcaption { color: #284437; font-weight: 600 }
.cake-gallery-credit { margin-top: 14px; color: #526559; font-size: .8125rem; text-align: end }
.cake-gallery-credit a { text-decoration-thickness: 1px; text-underline-offset: 2px }
.cake-gallery-credit a:hover { text-decoration-thickness: 2px }

@media (max-width: 540px) {
  .cake-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .cake-gallery figure:first-child { grid-column: 1 / -1 }
}

.cake-thumbnail { display: block; cursor: zoom-in }
.cake-thumbnail:hover img { opacity: .92 }
.cake-viewer {
  position: fixed;
  inset: 0;
  width: min(94vw, 900px);
  height: min(94vh, 960px);
  height: min(94dvh, 960px);
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 1px solid #756e62;
  background: #211c1b;
  color: var(--paper);
}
.cake-viewer::backdrop { background: #160e0de8 }
body:has(.cake-viewer[open]) { overflow: hidden }
.cake-viewer-panel { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto }
.cake-viewer-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 10px }
.cake-viewer h2 { font: 600 1rem/1.2 var(--sans); letter-spacing: normal }
.cake-viewer-stage { display: grid; place-items: center; min-height: 0; touch-action: pan-y pinch-zoom }
.cake-viewer-image { width: 100%; height: 100%; min-height: 0; object-fit: contain }
.cake-viewer button { width: 44px; height: 44px; flex: none; border: 1px solid #bdaea1; border-radius: 50%; background: transparent; font-size: 1.35rem }
.cake-viewer button:hover { background: #4c3934 }
.cake-viewer button:focus-visible { outline-color: var(--gold); box-shadow: none }
.cake-viewer-caption { text-align: center; font-size: .95rem }

.link-mark::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-inline-start: .24em;
  vertical-align: -.14em;
  background-color: currentColor;
  -webkit-mask: var(--link-mark) center / contain no-repeat;
  mask: var(--link-mark) center / contain no-repeat;
}
.link-mark-external { --link-mark: url("icon-external.svg") }
.link-mark-down { --link-mark: url("icon-down.svg") }
.control-icon { width: 1em; height: 1em; flex: none }
.cake-viewer button { display: grid; place-items: center }
.reel-close .control-icon { margin-inline-start: .3em; vertical-align: -.13em }