/* The Spotted Cup — "The Curved Fold". Page CSS over the tasteskill system (assets/kit/system.css). */
@font-face { font-family: "Gabarito"; src: url("../fonts/Gabarito.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/HankenGrotesk.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --pink: #fa782c;         /* the sheet, sampled from the fold plate */
  --pink-deep: #a83a06;    /* pink as text on paper (AA on --p-bg) */
  --paper: #f8e7dc;
  --p-bg: #f8e7dc; --p-surface: #f1d9cb; --p-ink: #151011; --p-muted: #5d4a45;
  --p-accent: #a83a06; --p-accent-ink: #ffffff; --p-action: #151011; --p-action-ink: #ffffff;
  --p-inv-bg: #fa782c; --p-inv-surface: #f47c3c; --p-inv-ink: #151011; --p-inv-muted: #3a1a0a;
  --p-inv-accent: #151011; --p-inv-accent-ink: #ffffff; --p-inv-action: #151011; --p-inv-action-ink: #ffffff;
  --font-display: "Gabarito", "Hanken Grotesk", system-ui, sans-serif;
  --font-text: "Hanken Grotesk", system-ui, sans-serif;
  --display-weight: 800; --display-tracking: -0.02em;
  --btn-h: 52px;
  --paper-ease: cubic-bezier(.22, 1, .36, 1);
  --live: #e0a526;         /* the one live-state colour: open now */
}

html[data-type="place"] { --r-btn: 999px; }
html[data-type="place"] .btn { border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: 0; min-height: var(--btn-h); padding-inline: 26px; }
body { background: var(--paper) url("../plates/ground.png") repeat; color: var(--p-ink); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: var(--display-tracking); }
h2 { font-size: clamp(36px, 2.6vw + 14px, 56px); line-height: 1.02; margin: 0 0 16px; }
h3 { font-size: 22px; margin: 0 0 8px; }
.t-label { font-family: var(--font-display); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 13px; }

/* placeholder tag for facts the owner still has to give */
.tbc { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .02em; padding: 3px 12px; border-radius: 999px;
  border: 1px dashed currentColor; color: var(--pink-deep); white-space: nowrap; }
.tbc--block { display: block; width: fit-content; margin-top: 18px; white-space: normal; }

/* ---------- nav: transparent over the sheet, solid paper once scrolled ---------- */
.nav.nav--fold { background: transparent; border-bottom-color: transparent; }
.nav.nav--fold .nav__logo { font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: -.01em; display: inline-flex; gap: 10px; align-items: center; }
.logo-cup { width: 22px; height: 22px; border-radius: 50% 50% 6px 6px / 40% 40% 6px 6px; background: var(--p-ink); box-shadow: inset 0 -7px 0 #fff; }
.nav.nav--fold .nav__link { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 14px; color: var(--p-ink); }
html.is-scrolled .nav.nav--fold { background: color-mix(in oklab, var(--paper) 96%, transparent); border-bottom-color: color-mix(in oklab, var(--p-ink) 12%, transparent); }
html[data-type="place"] .nav.nav--fold .btn { min-height: 44px; font-size: 15px; }

/* ---------- hero: the fold ---------- */
.hero.hero--fold { position: relative; z-index: 2; height: 100svh; min-height: 640px; padding: 0; overflow: visible; background: transparent; display: block; }
.hero--fold .fold { position: absolute; inset: 0; z-index: 0; transform-origin: 50% 0; background: transparent; border-radius: 0; overflow: clip;
  translate: 0 calc(var(--lift, 0) * -14%); }
/* the sheet's own cream fades into the page's paper, so the hero has no bottom edge */
.hero.hero--fold .fold .fold__sheet { -webkit-mask-image: linear-gradient(#000 78%, transparent 99%); mask-image: linear-gradient(#000 78%, transparent 99%); }
.fold__title { translate: 0 calc(var(--lift, 0) * -10%); }
.hero.hero--fold .fold .fold__sheet { display: block; width: 100%; height: auto; object-fit: fill; }
.fold__title { position: absolute; inset: 0 0 auto 0; aspect-ratio: 1344 / 690; width: 100%; margin: 0; z-index: 2; }
.arc { display: block; width: 100%; height: 100%; overflow: visible; }
.arc__name { font-family: var(--font-display); font-weight: 900; font-size: 164px; letter-spacing: -.035em; fill: var(--p-ink); }
.arc__line { font-family: var(--font-display); font-weight: 800; font-size: 40px; letter-spacing: -.005em; fill: var(--p-ink); }
.arc--stack { display: none; }
/* the actions sit at the comp's boxes, measured on the 1344×752 frame */
.hero.hero--fold { --frame-h: calc(100vw * 752 / 1344); --act-top: calc(var(--frame-h) * .47); --act-h: 200px;
  --bake-h: clamp(120px, calc(100svh - var(--act-top) - var(--act-h) - 16px), 260px); }
/* the actions centre on the page, under the crease, and never run into the tray below */
.fold__actions { position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); width: clamp(300px, 23.4vw, 400px);
  top: var(--act-top);
  display: grid; justify-items: center; gap: 14px; }
.openpill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: var(--btn-h); margin: 0; white-space: nowrap; padding-inline: 18px;
  border: 2px solid var(--p-ink); border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.openpill__dot { width: .5em; height: .5em; border-radius: 50%; background: var(--p-muted); flex: none; }
.openpill.is-open .openpill__dot { background: var(--live); }
.fold__actions .btn { width: 100%; justify-content: center; }
.fold__link { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--p-ink); min-height: 44px; display: inline-flex; align-items: center; }
/* the real cookie tray, cut out, standing whole on the bottom edge */
/* only the cookie tops peek up from the bottom edge: the tray and its sign sit below the fold.
   The cut-out is 1200x526; the cookies fill its top ~46%, so the image is drawn at bake-h / .44 tall. */
.fold__bake { position: absolute; z-index: 1; left: 50%; bottom: 0; transform: translateX(-50%); overflow: hidden;
  --img-h: calc(var(--bake-h) / .44); height: var(--bake-h); width: calc(var(--img-h) * 1200 / 526); }
.fold__bake img { display: block; height: var(--img-h); width: auto; max-width: none; margin-top: calc(var(--img-h) * -.04); }

/* desktop hero controls near the comp's measured size, capped for big screens */
@media (min-width: 900px) {
  .fold__actions .openpill { min-height: clamp(52px, 4.17vw, 60px); font-size: clamp(17px, 1.6vw, 22px); border-width: 3px; }
  html[data-type="place"] .fold__actions .btn { min-height: clamp(52px, 4.5vw, 64px); font-size: clamp(17px, 1.9vw, 25px); font-weight: 800; }
  .fold__actions .fold__link { font-size: clamp(17px, 1.5vw, 21px); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 2px; background-image: none; }
  .fold__actions .fold__link::after, .fold__actions .btn .m-arrow { display: none; }
  /* minimal header over the sheet: the name is the logo, the hero holds the action */
  html:not(.is-scrolled) .nav.nav--fold .nav__logo, html:not(.is-scrolled) .nav.nav--fold .nav__actions { opacity: 0; visibility: hidden; }
  .nav.nav--fold .nav__logo, .nav.nav--fold .nav__actions { transition: opacity .3s var(--ease), visibility .3s; }
  html:not(.is-scrolled) .nav.nav--fold .nav__links { position: absolute; left: 50%; transform: translateX(-50%); }
}
/* the sheet lifts into its arc once, then stands (reduced motion: it simply stands) */
@media (prefers-reduced-motion: no-preference) {
  html.m-enter .hero--fold .fold { animation: fold-lift 1.25s var(--paper-ease) both; }
}
html.m-enter .hero--fold .fold { animation-fill-mode: backwards; }
@keyframes fold-lift { from { transform: translateY(-14%) scaleY(.86); } to { transform: none; } }

/* ---------- shared section rhythm ---------- */
main > section > .wrap { padding-block: 88px 72px; }
.facts { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 8px; font-size: 16px; line-height: 1.45; }

/* ---------- visit ---------- */
.visit__grid { align-items: start; }
.visit__address { font-size: 18px; margin: 0 0 18px; }
.hours { width: 100%; border-collapse: collapse; font-size: 16px; margin-bottom: 20px; }
.hours th, .hours td { text-align: left; padding: 7px 0; border-bottom: 1px solid color-mix(in oklab, var(--p-ink) 14%, transparent); font-weight: 500; }
.hours td { text-align: right; font-variant-numeric: tabular-nums; }
.hours tr.is-today th, .hours tr.is-today td { font-weight: 800; }
.hours tr.is-today th::after { content: " · today"; color: var(--pink-deep); font-weight: 700; }
.mapcard { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 18px; height: min(620px, calc(100svh - 300px)); padding: 40px; background: var(--pink); border-radius: 4px; overflow: hidden; }
.mapcard__addr { font-family: var(--font-display); font-weight: 900; font-size: clamp(48px, 5.4vw, 92px); line-height: .9; letter-spacing: -.035em; margin: 0; }
.mapcard__note { margin: 0; font-size: 17px; max-width: 34ch; }
html[data-type="place"] .mapcard .btn.mapcard__btn { align-self: flex-start; background: var(--p-ink); color: #fff; border-color: var(--p-ink); }
.mapcard iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- statement (moment: word-highlight) ---------- */
.statement { background: var(--pink); color: var(--p-ink); --ink: #151011; --accent: #ffffff; }
.statement .wrap { display: flex; flex-direction: column; justify-content: center; min-height: 100%; }
.statement .mo-wh__text { font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 3.6vw, 60px); line-height: 1.08; letter-spacing: -.02em; max-width: 1100px; margin: 18px 0 0; }

/* ---------- menu ---------- */
.menu__grid, .yard__grid, .reviews__grid { align-items: start; }
.menu__list { display: grid; gap: 20px; margin-top: 24px; }
.menu__group h3 { color: var(--pink-deep); }
.menu__items { list-style: none; padding: 0; margin: 0; }
.menu__items li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid color-mix(in oklab, var(--p-ink) 14%, transparent); font-size: 16px; }
.price { font-family: var(--font-display); font-weight: 800; white-space: nowrap; }
.menu__pics { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; height: min(570px, calc(100svh - 330px)); }
.menu__pic { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 0; }
.menu__pic--lead { grid-row: span 2; }

/* ---------- yard ---------- */
.yard__copy h3 { margin-top: 8px; }
.yard__copy p { margin: 0 0 18px; font-size: 16px; line-height: 1.5; }
.yard__pics { display: grid; grid-template-rows: 3fr 2fr; gap: 12px; height: min(620px, calc(100svh - 300px)); }
.yard__develop { min-height: 0; overflow: hidden; }
.yard__develop img, .yard__small { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 0; }

/* ---------- reviews ---------- */
.reviews { background: var(--p-surface); }
.score { display: flex; align-items: baseline; gap: 14px; margin: 8px 0 18px; }
.score__num { font-family: var(--font-display); font-weight: 900; font-size: 44px; line-height: 1; letter-spacing: -.03em; }
.score__of { font-weight: 600; color: var(--p-muted); }
.bars { display: grid; gap: 6px; margin: 0 0 28px; font-size: 14px; max-width: 420px; }
.bars div { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 10px; }
.bars dt { color: var(--p-muted); }
.bars dd { margin: 0; display: grid; grid-template-columns: 1fr 22px; gap: 8px; align-items: center; font-variant-numeric: tabular-nums; }
.bars dd span { display: block; height: 8px; border-radius: 99px; background: color-mix(in oklab, var(--p-ink) 12%, transparent); position: relative; overflow: hidden; }
.bars dd span::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); background: var(--p-ink); border-radius: inherit; }
.quotes { display: grid; gap: 0; }
.quotes__pic { width: 100%; height: 220px; object-fit: cover; object-position: 50% 60%; display: block; margin-bottom: 8px; }
.quote { margin: 0; padding: 16px 0; border-bottom: 1px solid color-mix(in oklab, var(--p-ink) 14%, transparent); display: grid; gap: 6px; }
.quote p { font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.25; margin: 0; }
.quote footer { font-size: 14px; color: var(--p-muted); }

/* ---------- closing ---------- */
.closing { background: var(--pink); color: var(--p-ink); }
.closing__inner { padding-block: 88px 32px; }
.closing__top { align-items: start; }
.closing__cta { display: block; }
footer.closing > .wrap.closing__inner { grid-template-rows: auto auto; row-gap: 56px; height: auto; }
footer.closing > .wrap.closing__inner > * { min-height: auto; }
.closing__links { border-top: 1px solid color-mix(in oklab, var(--p-ink) 18%, transparent); padding-top: 32px; }
.closing__say h2 { font-size: clamp(56px, 7vw, 112px); line-height: .95; margin: 0 0 18px; }
.closing .t-lead { color: var(--p-ink); margin-bottom: 24px; }
.closing__art img { width: min(100%, 340px); height: auto; display: block; margin-inline: auto 0; }
.closing__name { font-family: var(--font-display); font-weight: 900; font-size: 26px; margin: 0 0 12px; }
.closing .hours--short { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; margin: 0; font-size: 15px; }
.closing .hours--short dd { margin: 0; }
.closing__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; align-content: start; }
.closing .link { color: var(--p-ink); min-height: 44px; display: inline-flex; align-items: center; }
.footer__legal { margin: 40px 0 0; font-size: 13px; color: var(--p-inv-muted); }

/* ---------- tablets and phones: the sheet grows taller, the name straightens ---------- */
@media (max-width: 899px) {
  .hero.hero--fold { --fold-m: clamp(400px, 58svh, 560px); height: auto; min-height: 100svh; display: flex; flex-direction: column; }
  .hero--fold .fold { aspect-ratio: auto; height: var(--fold-m); overflow: hidden;
    background: url("../plates/fold-1400.jpg") right top / auto 200% no-repeat;
    -webkit-mask-image: linear-gradient(#000 90%, transparent); mask-image: linear-gradient(#000 90%, transparent); }
  .hero.hero--fold .fold .fold__sheet { display: none; }
  .fold__title { position: relative; aspect-ratio: auto; min-height: var(--fold-m); padding: calc(var(--nav) + 18px) var(--pad) 0; }
  .arc--wide { display: none; }
  .arc--stack { display: grid; gap: 14px; }
  .arc--stack__name { font-family: var(--font-display); font-weight: 900; font-size: clamp(64px, 19vw, 132px); line-height: .86; letter-spacing: -.04em; }
  .arc--stack__line { font-family: var(--font-display); font-weight: 700; font-size: clamp(17px, 4.6vw, 24px); line-height: 1.25; }
  .arc--stack__line > span { display: block; }
  .fold__actions { position: relative; left: auto; top: auto; transform: none; width: auto; margin: 0 var(--pad) 32px; padding-top: 16px; gap: 12px; }
  /* phones: the cookie tops fill whatever room is left under the buttons, cropped the same way as desktop */
  .fold__bake { position: relative; left: auto; bottom: auto; transform: none; width: 100%; height: auto; flex: 1 0 0; min-height: 0; max-height: 210px; overflow: hidden; }
  .fold__bake img { position: absolute; left: 50%; top: 0; height: calc(100% / .44); width: auto; max-width: none; margin: 0; transform: translate(-50%, -4%); }
  main > section > .wrap { padding-block: 72px 56px; }
  .menu__pics, .yard__pics { height: auto; }
  .mapcard { height: auto; min-height: 320px; margin-top: 24px; padding: 28px; }
  .menu__pics { grid-template-rows: 220px 160px; margin-top: 24px; }
  .yard__pics { grid-template-rows: 260px 200px; margin-top: 24px; }
  .quotes { margin-top: 24px; }
  .score__num { font-size: 34px; }
  .closing__nav { grid-template-columns: 1fr; margin-top: 24px; }
  .closing__art img { margin: 24px auto 0; width: 70%; }
}

/* ================= flow ================= */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* the cookie tops dissolve into the paper instead of ending on a line, and rise as you scroll */
.fold__bake { -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent);
  translate: 0 calc(var(--lift, 0) * -60px); }
.fold__actions { opacity: calc(1 - max(0, var(--lift, 0) - .45) * 2.2); }

/* steam off the fresh bakes, drifting up across the edge between the hero and the next section */
.steam { position: absolute; z-index: 2; left: 50%; bottom: calc(var(--bake-h, 200px) * .35); width: min(520px, 44vw); height: 300px; translate: -50% 0;
  display: flex; justify-content: space-around; pointer-events: none; }
.steam__wisp { width: 90px; height: 260px; overflow: visible; filter: blur(7px); opacity: 0; }
.steam__wisp path { fill: none; stroke: #fff; stroke-width: 20; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) {
  .steam__wisp { animation: steam-rise 5.4s linear infinite; }
  .steam__wisp:nth-child(2) { animation-delay: -1.8s; animation-duration: 6.2s; }
  .steam__wisp:nth-child(3) { animation-delay: -3.6s; animation-duration: 5.8s; }
}
@keyframes steam-rise {
  0%   { opacity: 0; transform: translateY(80px) scaleY(.6) scaleX(.8); }
  25%  { opacity: .9; }
  70%  { opacity: .35; }
  100% { opacity: 0; transform: translateY(-140px) scaleY(1.15) scaleX(1.25); }
}

/* sections meet on a curve that echoes the crease, not a straight seam */
.has-curve { position: relative; }
.has-curve::before, .statement.has-curve::after { content: ""; position: absolute; left: 0; right: 0; height: clamp(48px, 7vw, 110px); pointer-events: none; z-index: 1;
  background: var(--curve-fill, var(--paper)); }
.has-curve::before { top: -1px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V36C1080 112 520 -6 0 84Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V36C1080 112 520 -6 0 84Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.statement.has-curve::after { bottom: -1px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0 110H1440V30C960 120 420 0 0 70Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0 110H1440V30C960 120 420 0 0 70Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.closing.has-curve { --curve-fill: var(--p-surface); }

/* arrivals: each block settles once as it comes on screen; without script or with reduced motion it simply stands */
html.rv [data-rv] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--paper-ease), transform .9s var(--paper-ease); transition-delay: calc(var(--i, 0) * 70ms); }
html.rv img[data-rv] { transform: translateY(28px) scale(1.04); }
html.rv [data-rv].is-in { opacity: 1; transform: none; }

/* phones: a bigger cookie peek */
@media (max-width: 899px) { .fold__bake { min-height: 150px; } .steam { width: 80vw; height: 220px; } }

/* pitch popup: every contact action opens this instead of real details */
.pitch { border: 0; border-radius: 6px; padding: 32px; max-width: min(460px, calc(100vw - 32px)); background: var(--p-bg); color: var(--p-ink); }
.pitch::backdrop { background: rgb(21 16 17 / .55); }
.pitch h2 { margin: 6px 0 12px; }
.pitch p { margin: 0 0 20px; }
button.link { background: none; border: 0; padding: 0; font: inherit; color: var(--pink-deep); text-decoration: underline; cursor: pointer; }