:root {
  --background: #F6E8D0;
  --surface: #FFF8EA;
  --ink: #2B211C;
  --primary: #7A3F2A;
  --accent: #D98246;
  --green: #2F4636;
  --gold: #C9A66B;
  --toast: #E9D2B3;

  --cream-deep: #EFDBB9;
  --cream-light: #FFFDF3;
  --cacao-deep: #1D1512;
  --orange-burnt: #B96535;
  --green-soft: #DAE0CF;
  --line: rgba(43, 33, 28, .18);
  --line-strong: rgba(43, 33, 28, .34);

  --display: "Fraunces", Georgia, serif;
  --body: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --page-pad: clamp(1rem, 3.4vw, 3rem);
  --section-y: clamp(4.5rem, 9vw, 9rem);
  --radius-soft: clamp(1.35rem, 3.5vw, 3.5rem);
  --radius-ticket: clamp(.9rem, 2vw, 1.45rem);

  --shadow-ink: 0 1.35rem 3.8rem rgba(43, 33, 28, .16);
  --shadow-soft: 0 .75rem 2rem rgba(43, 33, 28, .09);
  --shadow-tight: 0 .35rem 1rem rgba(43, 33, 28, .11);

  --curve: cubic-bezier(.19, .82, .22, 1);
  --curve-slow: cubic-bezier(.16, 1, .3, 1);
  --curve-steam: cubic-bezier(.28, .01, .14, 1);

  --scroll: 0;
  --mx: 0;
  --my: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
  background: var(--background);
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, .95rem + .2vw, 1.125rem);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(circle at 8% -8%, rgba(217, 130, 70, .24), transparent 28rem),
    radial-gradient(circle at 96% 4%, rgba(47, 70, 54, .17), transparent 32rem),
    radial-gradient(circle at 48% 34%, rgba(201, 166, 107, .12), transparent 38rem),
    linear-gradient(137deg, var(--background) 0%, #F1DDBE 58%, #EED7B5 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: -7rem;
  z-index: -3;
  pointer-events: none;
  opacity: calc(.18 + var(--scroll) * .12);
  background-image:
    url("data:image/svg+xml,%3Csvg width='118' height='158' viewBox='0 0 118 158' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%237A3F2A' stroke-linecap='round' stroke-linejoin='round' opacity='.38'%3E%3Cpath d='M59 22c18 16 25 35 22 58-3 27-17 47-22 53-5-6-19-26-22-53-3-23 4-42 22-58Z' fill='%237A3F2A' opacity='.16'/%3E%3Cpath d='M59 32c6 23 6 49 0 84' stroke-width='2.2' opacity='.58'/%3E%3Cpath d='M77 54h10c7 0 12 5 12 12v1c0 7-5 12-12 12h-8' stroke-width='3' opacity='.62'/%3E%3Cpath d='M96 64h8M96 71h8' stroke-width='2.2' opacity='.62'/%3E%3C/g%3E%3C/svg%3E");
  background-size:
    calc(7.4rem + var(--scroll) * 2.6rem)
    calc(9.8rem + var(--scroll) * 3.4rem);
  background-position:
    calc(50% + var(--mx) * 18px)
    calc(50% + var(--my) * 14px);
  transform: rotate(calc(-5deg + var(--scroll) * 8deg));
  transition:
    opacity 360ms var(--curve),
    background-size 360ms var(--curve),
    background-position 360ms var(--curve);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(43, 33, 28, .055) 1px, transparent 1px),
    linear-gradient(180deg, rgba(43, 33, 28, .045) 1px, transparent 1px);
  background-size:
    clamp(2.75rem, 7vw, 6.25rem)
    clamp(2.75rem, 7vw, 6.25rem);
  mask-image: radial-gradient(ellipse at center, black 0%, black 44%, transparent 86%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, black 44%, transparent 86%);
  opacity: .68;
}

a {
  color: inherit;
  text-decoration-thickness: .08em;
  text-underline-offset: .22em;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

img,
svg {
  display: block;
}

svg {
  overflow: visible;
}

::selection {
  color: var(--surface);
  background: var(--primary);
}

main {
  isolation: isolate;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 999;
  padding: .78rem 1rem;
  color: var(--surface);
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: -.04em;
  text-decoration: none;
  text-transform: uppercase;
  background: var(--ink);
  border: 1px solid rgba(255, 248, 234, .26);
  border-radius: 999px;
  box-shadow: var(--shadow-tight);
  transform: translateY(-160%);
  transition: transform 240ms var(--curve);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
}

.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.paper-grain {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: .38;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(circle at 17% 22%, rgba(43, 33, 28, .10) 0 1px, transparent 1.45px),
    radial-gradient(circle at 77% 72%, rgba(122, 63, 42, .075) 0 1px, transparent 1.55px),
    radial-gradient(circle at 44% 51%, rgba(201, 166, 107, .13) 0 1px, transparent 1.5px),
    radial-gradient(circle at 64% 18%, rgba(47, 70, 54, .05) 0 1px, transparent 1.55px);
  background-size: 19px 23px, 31px 29px, 43px 47px, 67px 71px;
}

/* Header */
.site-header {
  position: sticky;
  top: .75rem;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  width: min(100% - 1.25rem, 118rem);
  margin: .75rem auto 0;
  padding: .45rem;
  border: 1px solid rgba(43, 33, 28, .2);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 248, 234, .86), rgba(255, 248, 234, .66)),
    rgba(255, 248, 234, .72);
  box-shadow:
    0 .7rem 2rem rgba(43, 33, 28, .08),
    inset 0 1px 0 rgba(255, 255, 255, .56);
  backdrop-filter: blur(20px) saturate(1.08);
}

.site-header::after {
  content: "";
  position: absolute;
  inset: .4rem;
  z-index: -1;
  border-radius: inherit;
  border: 1px dashed rgba(122, 63, 42, .13);
  pointer-events: none;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-width: 0;
  padding: .34rem .82rem .34rem .42rem;
  text-decoration: none;
  border-radius: 999px;
  transition:
    background 260ms var(--curve),
    transform 260ms var(--curve),
    box-shadow 260ms var(--curve);
}

.brand:hover {
  background: rgba(217, 130, 70, .13);
  box-shadow: inset 0 0 0 1px rgba(122, 63, 42, .1);
  transform: translateY(-1px);
}

.brand__mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--primary);
  background:
    radial-gradient(circle at 35% 25%, rgba(217, 130, 70, .18), transparent 44%),
    var(--background);
  border: 1px solid rgba(122, 63, 42, .25);
  border-radius: 50% 46% 52% 48%;
  box-shadow: inset 0 -.18rem .5rem rgba(122, 63, 42, .08);
}

.brand__mark svg {
  width: 1.58rem;
  height: 1.58rem;
}

.brand__word {
  position: relative;
  max-width: 51vw;
  overflow: hidden;
  color: var(--primary);
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.5vw, 1.48rem);
  font-weight: 790;
  letter-spacing: -.055em;
  line-height: .92;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-optical-sizing: auto;
}

.brand__word::after {
  content: "";
  display: inline-block;
  width: .62em;
  height: .62em;
  margin-left: .14em;
  border: .11em solid currentColor;
  border-left-color: transparent;
  border-radius: 50%;
  transform: translateY(.09em) rotate(-18deg);
  opacity: .74;
}

.nav {
  display: none;
  align-items: center;
  gap: .2rem;
}

.nav a {
  position: relative;
  padding: .72rem .88rem;
  color: rgba(43, 33, 28, .72);
  font-family: var(--mono);
  font-size: .73rem;
  font-weight: 600;
  letter-spacing: -.045em;
  text-decoration: none;
  text-transform: uppercase;
  border-radius: 999px;
  transition:
    color 230ms var(--curve),
    background 230ms var(--curve),
    transform 230ms var(--curve);
}

.nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: .36rem;
  width: .28rem;
  height: .28rem;
  background: var(--accent);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, .25rem) scale(.55);
  transition:
    opacity 230ms var(--curve),
    transform 230ms var(--curve);
}

.nav a:hover {
  color: var(--ink);
  background: rgba(201, 166, 107, .21);
  transform: translateY(-1px);
}

.nav a:hover::after {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

/* Shared */
section {
  position: relative;
  width: min(100%, 124rem);
  margin-inline: auto;
  padding: var(--section-y) var(--page-pad);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 790;
  letter-spacing: -.067em;
  text-wrap: balance;
}

p {
  line-height: 1.72;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.section-kicker,
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .62rem;
  max-width: 100%;
  color: var(--green);
  font-family: var(--mono);
  font-size: clamp(.69rem, .74rem + .12vw, .88rem);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.25;
  text-transform: uppercase;
}

.section-kicker {
  margin: 0;
}

.section-kicker svg {
  flex: 0 0 auto;
  width: 2.15rem;
  height: 2.15rem;
  color: var(--accent);
  filter: drop-shadow(0 .18rem .2rem rgba(122, 63, 42, .12));
}

.section-kicker--inline {
  margin-bottom: 1.05rem;
}

.eyebrow {
  padding: .42rem .58rem .42rem .48rem;
  background: rgba(255, 248, 234, .48);
  border: 1px solid rgba(47, 70, 54, .13);
  border-radius: 999px;
}

.eyebrow__dot {
  position: relative;
  flex: 0 0 auto;
  width: .72rem;
  height: .72rem;
  background: var(--accent);
  border: 2px solid var(--primary);
  border-radius: 50% 48% 52% 50%;
  box-shadow: 1.05rem 0 0 -.14rem rgba(122, 63, 42, .36);
}

.eyebrow__dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: .16rem;
  height: .48rem;
  background: var(--surface);
  border-radius: 999px;
  opacity: .78;
  transform: translate(-50%, -50%) rotate(14deg);
}

[data-reveal] {
  opacity: 0;
  transform: translateY(1.6rem) rotate(var(--reveal-rotate-from, .001deg));
  transition:
    opacity 820ms var(--curve-slow),
    transform 820ms var(--curve-slow),
    border-radius 300ms var(--curve),
    box-shadow 300ms var(--curve),
    background 300ms var(--curve);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0) rotate(var(--reveal-rotate, 0deg));
}

.hero__art[data-reveal] {
  --reveal-delay: 110ms;
  --reveal-rotate-from: 1deg;
}

.hero__lower[data-reveal] {
  --reveal-delay: 190ms;
}

.table-note:nth-child(1) {
  --reveal-delay: 40ms;
}

.table-note:nth-child(2) {
  --reveal-delay: 120ms;
}

.table-note:nth-child(3) {
  --reveal-delay: 200ms;
}

.table-note:nth-child(4) {
  --reveal-delay: 280ms;
}

.menu-slip:nth-child(2),
.receipt-layout article:nth-child(2),
.faq-list details:nth-child(2n) {
  --reveal-delay: 120ms;
}

/* Hero */
.hero {
  min-height: calc(100svh - 4.5rem);
  padding-top: clamp(3rem, 7vw, 6.25rem);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 1rem var(--page-pad) auto;
  height: clamp(14rem, 24vw, 27rem);
  z-index: -2;
  border: 1px solid rgba(122, 63, 42, .17);
  border-radius:
    clamp(2.4rem, 9vw, 10rem)
    clamp(2.4rem, 9vw, 10rem)
    clamp(1.4rem, 4vw, 3rem)
    clamp(1.4rem, 4vw, 3rem);
  background:
    radial-gradient(circle at 80% 20%, rgba(217, 130, 70, .18), transparent 15rem),
    linear-gradient(135deg, rgba(255, 248, 234, .66), rgba(233, 210, 179, .42)),
    repeating-linear-gradient(-7deg, transparent 0 13px, rgba(122, 63, 42, .038) 13px 14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42);
}

.hero::after {
  content: "";
  position: absolute;
  left: calc(var(--page-pad) * -1);
  bottom: clamp(1rem, 6vw, 5rem);
  z-index: -1;
  width: clamp(13rem, 28vw, 32rem);
  aspect-ratio: 1;
  border: 1px solid rgba(47, 70, 54, .16);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(47, 70, 54, .09) 0 2px, transparent 2.4px)
    0 0 / 1.2rem 1.2rem,
    rgba(255, 248, 234, .22);
  transform: rotate(-8deg);
}

.hero__stamp {
  position: absolute;
  right: max(.9rem, 7vw);
  top: clamp(5rem, 10vw, 8.25rem);
  z-index: 3;
  display: grid;
  place-items: center;
  width: clamp(5.2rem, 11vw, 9.4rem);
  aspect-ratio: 1;
  color: var(--surface);
  background:
    radial-gradient(circle at 34% 28%, rgba(217, 130, 70, .45), transparent 38%),
    var(--primary);
  border: 1px solid rgba(43, 33, 28, .24);
  border-radius: 53% 47% 45% 55% / 44% 56% 46% 54%;
  box-shadow: var(--shadow-ink);
  transform: rotate(9deg);
  animation: floatStamp 6.8s var(--curve-steam) infinite;
}

.hero__stamp::before,
.hero__stamp::after {
  content: "";
  position: absolute;
  inset: .48rem;
  border: 1px dashed rgba(255, 248, 234, .36);
  border-radius: inherit;
}

.hero__stamp::after {
  inset: auto auto .72rem 50%;
  width: 58%;
  height: 1px;
  background: rgba(255, 248, 234, .38);
  border: 0;
  transform: translateX(-50%) rotate(-3deg);
}

.hero__stamp svg {
  width: 42%;
  color: var(--accent);
  transform: translateY(-.35rem);
}

.hero__stamp span {
  position: absolute;
  bottom: 1.02rem;
  max-width: 6rem;
  font-family: var(--mono);
  font-size: clamp(.52rem, .9vw, .7rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.045em;
  text-align: center;
  text-transform: uppercase;
}

.hero__grid {
  display: grid;
  gap: clamp(1.7rem, 3.5vw, 3.6rem);
  align-items: center;
}

.hero__copy {
  max-width: 73rem;
}

.hero h1 {
  max-width: 11.2ch;
  margin: .85rem 0 1.1rem;
  color: var(--ink);
  font-size: clamp(3.35rem, 15.6vw, 13.8rem);
  font-weight: 835;
  letter-spacing: -.088em;
  line-height: .76;
}

.hero h1::first-line {
  color: var(--primary);
}

.hero__sub {
  max-width: 49rem;
  margin: 0 0 0 clamp(.1rem, 8vw, 10.25rem);
  padding: .15rem 0 .15rem 1.15rem;
  color: rgba(43, 33, 28, .82);
  font-size: clamp(1.02rem, 1.1rem + .35vw, 1.38rem);
  font-weight: 500;
  line-height: 1.62;
  border-left: 3px solid var(--accent);
  text-wrap: pretty;
}

.hero__art {
  position: relative;
  min-height: clamp(28rem, 74vw, 47rem);
  border-radius: clamp(2rem, 8vw, 7rem);
  isolation: isolate;
}

.hero__art::before {
  content: "";
  position: absolute;
  inset: 12% 2% 4% 1%;
  z-index: -1;
  border: 1px solid rgba(122, 63, 42, .14);
  border-radius: 50% 47% 48% 52% / 45% 52% 48% 55%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 248, 234, .5), rgba(233, 210, 179, .25) 64%, transparent 65%),
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(122, 63, 42, .035) 22px 23px);
  transform: rotate(-3deg);
}

.table-label {
  position: absolute;
  left: clamp(.55rem, 2vw, 1.5rem);
  top: 11%;
  z-index: 3;
  margin: 0;
  padding: .58rem .78rem;
  color: var(--surface);
  font-family: var(--mono);
  font-size: clamp(.6rem, .82rem, .8rem);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1;
  text-transform: uppercase;
  background: var(--green);
  border: 1px solid rgba(255, 248, 234, .18);
  border-radius: 999px 999px 999px .48rem;
  box-shadow: var(--shadow-tight);
  transform: rotate(-4deg);
}

.cup-scene {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(108vw, 44.5rem);
  max-width: none;
  transform:
    translate(calc(-50% + var(--mx) * 10px), calc(-50% + var(--my) * 8px))
    rotate(calc(-4.5deg + var(--mx) * 1.5deg));
  transition: transform 460ms var(--curve);
}

.table-oval {
  fill: rgba(255, 248, 234, .68);
  stroke: rgba(122, 63, 42, .18);
  stroke-width: 3;
}

.plate-shadow {
  fill: rgba(43, 33, 28, .105);
}

.saucer {
  fill: var(--surface);
  stroke: var(--primary);
  stroke-width: 7;
}

.cup-rim {
  fill: #F7EAD4;
  stroke: var(--primary);
  stroke-width: 11;
}

.coffee {
  fill: url("#coffeeGrad");
}

.crema {
  fill: rgba(217, 130, 70, .5);
  mix-blend-mode: screen;
}

.handle {
  stroke: var(--primary);
  stroke-width: 22;
  stroke-linecap: round;
}

.spoon {
  stroke: var(--gold);
  stroke-width: 10;
  stroke-linecap: round;
}

.spoon-tip {
  fill: var(--gold);
}

.crumbs {
  fill: var(--primary);
  opacity: .6;
}

.steam,
.plug-line,
.plug path {
  stroke: var(--green);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.steam {
  opacity: .66;
  stroke-dasharray: 18 18;
  animation: steamRise 5.2s linear infinite;
}

.steam--two {
  animation-duration: 6.2s;
  animation-direction: reverse;
  opacity: .42;
}

.plug-line,
.plug path {
  stroke-width: 7;
  stroke-dasharray: 760;
  stroke-dashoffset: 760;
  animation: drawPlug 2.4s .5s var(--curve-slow) forwards;
}

.ticket-cta {
  position: absolute;
  right: clamp(.2rem, 4vw, 3.2rem);
  bottom: clamp(2rem, 7vw, 4.4rem);
  z-index: 4;
  display: grid;
  gap: .2rem;
  min-width: clamp(13.5rem, 26vw, 19.25rem);
  padding: 1rem 1.12rem 1.12rem;
  color: var(--ink);
  text-decoration: none;
  background:
    radial-gradient(circle at 0 50%, transparent 0 .72rem, var(--surface) .76rem),
    radial-gradient(circle at 100% 50%, transparent 0 .72rem, var(--surface) .76rem);
  border: 1px dashed rgba(43, 33, 28, .54);
  border-radius: var(--radius-ticket);
  box-shadow: var(--shadow-ink);
  transform: rotate(-5deg);
  transition:
    transform 280ms var(--curve),
    border-radius 280ms var(--curve),
    box-shadow 280ms var(--curve),
    background 280ms var(--curve);
}

.ticket-cta::before {
  content: "";
  position: absolute;
  left: .9rem;
  right: .9rem;
  top: .62rem;
  height: .22rem;
  background: radial-gradient(circle, rgba(122, 63, 42, .42) 0 1px, transparent 1.5px);
  background-size: .55rem .22rem;
  opacity: .7;
}

.ticket-cta:hover,
.ticket-cta:focus-visible {
  border-radius: 1.35rem 1.35rem 1.65rem 1.05rem;
  box-shadow: 0 1.55rem 3.5rem rgba(43, 33, 28, .18);
  transform: rotate(-2deg) translateY(-.32rem);
  background:
    radial-gradient(circle at 0 50%, transparent 0 .72rem, #FFFBF0 .76rem),
    radial-gradient(circle at 100% 50%, transparent 0 .72rem, #FFFBF0 .76rem);
}

.ticket-cta span {
  color: var(--green);
  font-family: var(--mono);
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.ticket-cta strong {
  color: var(--primary);
  font-family: var(--display);
  font-size: clamp(1.75rem, 4vw, 2.9rem);
  font-weight: 820;
  line-height: .86;
  letter-spacing: -.07em;
}

.ticket-cta small {
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: -.045em;
}

.hero__lower {
  display: grid;
  gap: .9rem;
  align-items: center;
  margin-top: clamp(.4rem, 3vw, 2.2rem);
}

.secondary-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: min(100%, 28.5rem);
  padding: .72rem .72rem .72rem 1.05rem;
  color: var(--surface);
  text-decoration: none;
  background:
    linear-gradient(135deg, var(--ink), #271B17);
  border: 1px solid rgba(255, 248, 234, .13);
  border-radius: 999px;
  box-shadow: var(--shadow-tight);
  transition:
    transform 250ms var(--curve),
    border-radius 250ms var(--curve),
    background 250ms var(--curve);
}

.secondary-cta:hover,
.secondary-cta:focus-visible {
  background: var(--green);
  border-radius: 1.25rem 999px 999px 1.25rem;
  transform: translateY(-2px);
}

.secondary-cta span {
  font-weight: 850;
  letter-spacing: -.02em;
}

.secondary-cta svg {
  flex: 0 0 auto;
  width: 2.42rem;
  height: 2.42rem;
  color: var(--accent);
  background: var(--surface);
  border-radius: 50%;
  padding: .35rem;
}

.mono-note {
  margin: 0;
  color: rgba(43, 33, 28, .68);
  font-family: var(--mono);
  font-size: clamp(.76rem, .82rem + .08vw, .92rem);
  font-weight: 500;
  letter-spacing: -.045em;
}

/* Table index */
.table-index {
  padding-top: clamp(2.5rem, 6vw, 5.5rem);
}

.table-index::before {
  content: "";
  position: absolute;
  left: var(--page-pad);
  right: var(--page-pad);
  top: 0;
  height: 1px;
  background:
    linear-gradient(90deg, transparent, rgba(122, 63, 42, .25), transparent);
}

.growing-motif {
  position: absolute;
  right: 7vw;
  top: clamp(5rem, 10vw, 8rem);
  z-index: -1;
  width: clamp(10rem, 28vw, 29rem);
  color: rgba(122, 63, 42, .13);
  transform:
    scale(calc(.72 + var(--scroll) * .72))
    rotate(calc(-16deg + var(--scroll) * 32deg));
  transform-origin: center;
}

.growing-motif svg {
  width: 100%;
  height: auto;
}

.table-map {
  display: grid;
  gap: 1rem;
  margin-top: clamp(1.6rem, 4vw, 3.25rem);
}

.table-note {
  position: relative;
  min-height: 14.5rem;
  padding: clamp(1rem, 2.4vw, 1.35rem);
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0, rgba(217, 130, 70, .14), transparent 11rem),
    linear-gradient(145deg, rgba(255, 248, 234, .95), rgba(233, 210, 179, .76)),
    repeating-linear-gradient(90deg, transparent 0 20px, rgba(122, 63, 42, .038) 20px 21px);
  border: 1px solid rgba(122, 63, 42, .22);
  border-radius: var(--radius-soft);
  box-shadow: var(--shadow-soft);
  transform: rotate(var(--tilt, 0deg));
  transition:
    transform 300ms var(--curve),
    border-radius 300ms var(--curve),
    box-shadow 300ms var(--curve),
    background 300ms var(--curve);
}

.table-note::before {
  content: "";
  position: absolute;
  top: -.58rem;
  right: -.58rem;
  width: 5.4rem;
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 64% 42%, rgba(43, 33, 28, .2), transparent 0 .42rem, rgba(122, 63, 42, .38) .45rem .63rem, transparent .67rem),
    radial-gradient(circle at 40% 70%, rgba(255, 248, 234, .24), transparent 32%),
    var(--accent);
  border-radius: 36% 64% 57% 43% / 41% 43% 57% 59%;
  opacity: .9;
  transform: rotate(18deg);
}

.table-note::after {
  content: "";
  position: absolute;
  left: 1.05rem;
  right: 1.05rem;
  bottom: 1rem;
  height: .4rem;
  background: radial-gradient(circle, rgba(122, 63, 42, .34) 0 1px, transparent 1.5px);
  background-size: .55rem .38rem;
  opacity: .78;
}

.table-note:hover {
  background:
    radial-gradient(circle at 100% 0, rgba(217, 130, 70, .19), transparent 12rem),
    linear-gradient(145deg, #FFFDF3, #EED6B2);
  border-radius: calc(var(--radius-soft) + .7rem);
  box-shadow: var(--shadow-ink);
  transform: rotate(0deg) translateY(-.38rem);
}

.table-note__number {
  display: inline-grid;
  place-items: center;
  width: 3.45rem;
  height: 3.45rem;
  color: var(--surface);
  font-family: var(--mono);
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: -.04em;
  background:
    radial-gradient(circle at 30% 20%, rgba(217, 130, 70, .34), transparent 40%),
    var(--primary);
  border-radius: 50% 46% 52% 48%;
  box-shadow: inset 0 -.22rem .4rem rgba(43, 33, 28, .12);
}

.table-note__label {
  margin: 1.12rem 0 .38rem;
  color: var(--green);
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.1;
  text-transform: uppercase;
}

.table-note h3 {
  max-width: 12.2ch;
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.05rem, 7vw, 5.85rem);
  font-weight: 825;
  line-height: .84;
}

.table-note--origin {
  --tilt: -2.1deg;
}

.table-note--brunch {
  --tilt: 2.2deg;
}

.table-note--wifi {
  --tilt: -1.35deg;
}

.table-note--plug {
  --tilt: 1.55deg;
}

/* About */
.about {
  display: grid;
  gap: clamp(2rem, 6vw, 5.4rem);
  overflow: hidden;
}

.about::before {
  content: "";
  position: absolute;
  right: var(--page-pad);
  top: clamp(3rem, 8vw, 7rem);
  width: clamp(5rem, 10vw, 9rem);
  height: .32rem;
  background: radial-gradient(circle, rgba(122, 63, 42, .45) 0 1.5px, transparent 2px);
  background-size: .7rem .32rem;
  opacity: .55;
  transform: rotate(-4deg);
}

.about__word {
  position: absolute;
  left: 50%;
  top: .5rem;
  z-index: -1;
  width: max-content;
  color: rgba(122, 63, 42, .082);
  font-family: var(--display);
  font-size: clamp(6.2rem, 19vw, 21.5rem);
  font-weight: 880;
  letter-spacing: -.1em;
  line-height: .78;
  transform: translateX(-50%) rotate(-4deg);
  white-space: nowrap;
}

.about__text {
  max-width: 67rem;
}

.about h2,
.services h2,
.receipt-zone h2,
.faq h2,
.contact h2 {
  margin-bottom: 1.05rem;
  color: var(--primary);
  font-size: clamp(2.55rem, 8.1vw, 8.6rem);
  font-weight: 830;
  letter-spacing: -.082em;
  line-height: .83;
}

.about__body {
  display: grid;
  gap: 1rem;
  max-width: 66rem;
  color: rgba(43, 33, 28, .82);
  font-size: clamp(1.02rem, 1rem + .35vw, 1.23rem);
  font-weight: 500;
}

.about__body p {
  margin-bottom: 0;
  text-wrap: pretty;
}

.highlight-trail {
  position: relative;
  display: grid;
  gap: .72rem;
  align-self: start;
  margin: 0;
  padding: .9rem;
  list-style: none;
  border: 1px solid rgba(122, 63, 42, .2);
  border-radius: var(--radius-soft);
  background:
    linear-gradient(rgba(255, 248, 234, .7), rgba(255, 248, 234, .52)),
    radial-gradient(circle at 100% 0, rgba(217, 130, 70, .13), transparent 12rem);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .36);
}

.highlight-trail::before {
  content: "";
  position: absolute;
  left: 2.08rem;
  top: 2rem;
  bottom: 2rem;
  width: 2px;
  background: linear-gradient(var(--accent), var(--green));
  opacity: .36;
}

.highlight-trail li {
  position: relative;
  display: grid;
  grid-template-columns: 2.35rem 1fr;
  gap: .82rem;
  align-items: center;
  min-height: 3.35rem;
  padding: .56rem .72rem;
  color: rgba(43, 33, 28, .86);
  font-weight: 650;
  line-height: 1.35;
  background: var(--surface);
  border: 1px solid rgba(122, 63, 42, .1);
  border-radius: 999px 1.5rem 1.5rem 999px;
  box-shadow: 0 .35rem 1rem rgba(43, 33, 28, .055);
}

.highlight-trail span {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  color: var(--surface);
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: -.045em;
  background: var(--green);
  border-radius: 50%;
}

/* Services */
.services {
  overflow: hidden;
}

.services::after {
  content: "";
  position: absolute;
  right: -8rem;
  top: 15%;
  z-index: -1;
  width: clamp(16rem, 34vw, 36rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(122, 63, 42, .12) 0 2px, transparent 2.5px)
    0 0 / 1.1rem 1.1rem;
  transform: rotate(9deg);
}

.services__intro {
  max-width: 61rem;
}

.menu-rail {
  display: grid;
  gap: 1.15rem;
  margin-top: clamp(1.6rem, 4vw, 3.6rem);
}

.menu-slip {
  position: relative;
  min-height: 23rem;
  padding: clamp(1.18rem, 4vw, 2.2rem);
  overflow: hidden;
  color: var(--surface);
  border-radius: clamp(1.35rem, 5vw, 4.25rem);
  box-shadow: var(--shadow-ink);
  isolation: isolate;
  transform: rotate(var(--slip-rotate, 0deg));
  transition:
    transform 300ms var(--curve),
    border-radius 300ms var(--curve),
    box-shadow 300ms var(--curve);
}

.menu-slip:hover {
  border-radius: clamp(1.7rem, 5vw, 4.9rem);
  box-shadow: 0 1.6rem 4rem rgba(43, 33, 28, .2);
  transform: rotate(0deg) translateY(-.35rem);
}

.menu-slip::before,
.menu-slip::after {
  content: "";
  position: absolute;
  z-index: -1;
}

.menu-slip::before {
  inset: 0;
  background:
    radial-gradient(circle at 100% 0, rgba(255, 248, 234, .18), transparent 14rem),
    radial-gradient(circle at 18% 88%, rgba(217, 130, 70, .28), transparent 15rem),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(255, 248, 234, .062) 18px 19px),
    var(--primary);
}

.menu-slip::after {
  top: 1.1rem;
  bottom: 1.1rem;
  right: 1.1rem;
  width: .36rem;
  background: radial-gradient(circle, rgba(255, 248, 234, .86) 0 1.5px, transparent 2px);
  background-size: .36rem .75rem;
  opacity: .72;
}

.menu-slip--coffee {
  --slip-rotate: -1deg;
}

.menu-slip--brunch {
  --slip-rotate: 1.2deg;
}

.menu-slip--brunch::before {
  background:
    radial-gradient(circle at 8% 14%, rgba(122, 63, 42, .34), transparent 13rem),
    radial-gradient(circle at 100% 92%, rgba(217, 130, 70, .16), transparent 16rem),
    repeating-linear-gradient(-45deg, transparent 0 20px, rgba(255, 248, 234, .072) 20px 21px),
    var(--green);
}

.menu-slip__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(2rem, 5vw, 4.25rem);
}

.menu-slip__top svg {
  flex: 0 0 auto;
  width: clamp(3.1rem, 9vw, 6.2rem);
  height: clamp(3.1rem, 9vw, 6.2rem);
  color: var(--accent);
}

.menu-slip__num {
  font-family: var(--mono);
  font-size: clamp(.82rem, .9rem + .22vw, 1.08rem);
  font-weight: 700;
  letter-spacing: -.05em;
  text-transform: uppercase;
}

.menu-slip h3 {
  max-width: 12.2ch;
  margin-bottom: .9rem;
  color: var(--surface);
  font-size: clamp(2.5rem, 8.4vw, 7.1rem);
  font-weight: 830;
  line-height: .81;
}

.menu-slip p {
  max-width: 50rem;
  margin: 0;
  color: rgba(255, 248, 234, .84);
  font-size: clamp(1rem, 1rem + .32vw, 1.2rem);
  font-weight: 500;
  text-wrap: pretty;
}

/* Receipt and map */
.receipt-zone {
  overflow: hidden;
}

.receipt-copy {
  max-width: 64rem;
}

.receipt-layout {
  display: grid;
  gap: 1.2rem;
  align-items: stretch;
  margin-top: clamp(1.45rem, 4vw, 3.15rem);
}

.warm-receipt {
  position: relative;
  padding: clamp(1.25rem, 3vw, 2.1rem);
  background:
    linear-gradient(180deg, rgba(255, 248, 234, .98), rgba(255, 243, 221, .96)),
    repeating-linear-gradient(0deg, transparent 0 2.4rem, rgba(122, 63, 42, .06) 2.4rem calc(2.4rem + 1px));
  border: 1px solid rgba(43, 33, 28, .22);
  border-radius: 1.25rem;
  box-shadow: var(--shadow-ink);
}

.warm-receipt::before,
.warm-receipt::after {
  content: "";
  position: absolute;
  left: 1.15rem;
  right: 1.15rem;
  height: .92rem;
  background:
    radial-gradient(circle at .46rem .46rem, var(--background) 0 .38rem, transparent .405rem)
    0 0 / .92rem .92rem repeat-x;
}

.warm-receipt::before {
  top: -.46rem;
}

.warm-receipt::after {
  bottom: -.46rem;
}

.receipt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.05rem;
  border-bottom: 2px dashed rgba(43, 33, 28, .27);
}

.receipt-head span {
  color: var(--primary);
  font-family: var(--display);
  font-size: clamp(2rem, 5vw, 4.45rem);
  font-weight: 830;
  letter-spacing: -.08em;
  line-height: .86;
}

.receipt-head svg {
  flex: 0 0 auto;
  width: clamp(2.75rem, 7vw, 4.7rem);
  height: clamp(2.75rem, 7vw, 4.7rem);
  color: var(--accent);
}

.receipt-lines {
  display: grid;
  gap: 0;
  margin: 1.05rem 0 4.35rem;
}

.receipt-lines div {
  display: grid;
  grid-template-columns: 7.4rem 1fr;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px dashed rgba(43, 33, 28, .23);
}

.receipt-lines dt {
  color: var(--green);
  font-family: var(--mono);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.25;
  text-transform: uppercase;
}

.receipt-lines dd {
  margin: 0;
  font-weight: 850;
  letter-spacing: -.02em;
}

.receipt-lines a {
  color: var(--primary);
  text-decoration-color: rgba(122, 63, 42, .48);
}

.sticker-call {
  position: absolute;
  right: clamp(1rem, 4vw, 2rem);
  bottom: 1.15rem;
  display: inline-grid;
  place-items: center;
  min-width: 11.2rem;
  padding: 1rem 1.2rem;
  color: var(--surface);
  text-decoration: none;
  background:
    radial-gradient(circle at 25% 20%, rgba(255, 248, 234, .22), transparent 34%),
    var(--accent);
  border: 2px solid var(--primary);
  border-radius: 999px 999px 999px .85rem;
  box-shadow: 0 .9rem 1.5rem rgba(122, 63, 42, .22);
  transform: rotate(-4deg);
  transition:
    transform 250ms var(--curve),
    border-radius 250ms var(--curve),
    background 250ms var(--curve);
}

.sticker-call:hover,
.sticker-call:focus-visible {
  background: var(--orange-burnt);
  border-radius: 1.2rem 999px 999px 999px;
  transform: rotate(-1deg) translateY(-2px);
}

.sticker-call span {
  font-family: var(--display);
  font-size: 1.66rem;
  font-weight: 820;
  letter-spacing: -.06em;
  line-height: .9;
}

.paper-map {
  position: relative;
  min-height: 24rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 20%, rgba(217, 130, 70, .18), transparent 17rem),
    linear-gradient(135deg, rgba(47, 70, 54, .96), rgba(29, 21, 18, .96)),
    var(--green);
  border: 1px solid rgba(43, 33, 28, .25);
  border-radius: var(--radius-soft);
  box-shadow: var(--shadow-ink);
}

.paper-map::after {
  content: "";
  position: absolute;
  inset: 1rem;
  border: 1px dashed rgba(255, 248, 234, .16);
  border-radius: calc(var(--radius-soft) - .6rem);
  pointer-events: none;
}

.map-grid {
  position: absolute;
  inset: 0;
  opacity: .3;
  background:
    linear-gradient(90deg, rgba(255, 248, 234, .35) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 248, 234, .35) 1px, transparent 1px);
  background-size: 4rem 4rem;
  transform: rotate(-8deg) scale(1.25);
}

.map-grid span {
  display: none;
}

.map-route {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(34rem, 120%);
  color: var(--accent);
  transform: translate(-50%, -50%) rotate(-2deg);
}

.map-route path {
  stroke: var(--accent);
  stroke-width: 14;
  stroke-linecap: round;
  stroke-dasharray: 18 22;
  animation: routeDash 9s linear infinite;
}

.map-route circle {
  fill: var(--surface);
  stroke: var(--accent);
  stroke-width: 6;
}

.map-route use {
  color: var(--surface);
  transform: scale(1.15);
}

.map-pin {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  max-width: 19rem;
  margin: 0;
  padding: .82rem 1rem;
  color: var(--ink);
  font-family: var(--mono);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.35;
  background: var(--surface);
  border: 1px solid rgba(43, 33, 28, .13);
  border-radius: 999px;
  box-shadow: var(--shadow-tight);
}

/* FAQ */
.faq {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.1rem);
}

.faq__header {
  max-width: 58rem;
}

.faq-list {
  display: grid;
  gap: .72rem;
}

details {
  background:
    linear-gradient(rgba(255, 248, 234, .76), rgba(255, 248, 234, .68));
  border: 1px solid rgba(122, 63, 42, .19);
  border-radius: 1.18rem;
  box-shadow: 0 .25rem .9rem rgba(43, 33, 28, .035);
  transition:
    background 250ms var(--curve),
    border-radius 250ms var(--curve),
    transform 250ms var(--curve),
    box-shadow 250ms var(--curve);
}

details[open] {
  background: var(--surface);
  border-radius: 2rem;
  box-shadow: var(--shadow-soft);
}

details:hover {
  transform: translateX(.18rem);
}

summary {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 2rem;
  gap: 1rem;
  align-items: center;
  padding: 1.05rem 1.1rem;
  font-family: var(--display);
  font-size: clamp(1.24rem, 2.45vw, 2.28rem);
  font-weight: 790;
  letter-spacing: -.06em;
  line-height: .98;
  cursor: pointer;
  list-style: none;
  text-wrap: balance;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  color: var(--surface);
  font-family: var(--mono);
  font-size: 1.12rem;
  font-weight: 700;
  background: var(--primary);
  border-radius: 50%;
  transition:
    transform 250ms var(--curve),
    background 250ms var(--curve),
    border-radius 250ms var(--curve);
}

details[open] summary::after {
  content: "–";
  background: var(--green);
  border-radius: 48% 52% 44% 56%;
  transform: rotate(180deg);
}

details p {
  max-width: 66rem;
  margin: 0;
  padding: 0 1.1rem 1.22rem;
  color: rgba(43, 33, 28, .78);
  font-weight: 500;
  text-wrap: pretty;
}

/* Contact */
.contact {
  display: grid;
  gap: 1rem;
  align-items: start;
}

.contact__panel {
  position: relative;
  padding: clamp(1.2rem, 4vw, 2.15rem);
  overflow: hidden;
  color: var(--surface);
  background:
    radial-gradient(circle at 12% 18%, rgba(217, 130, 70, .2), transparent 16rem),
    linear-gradient(135deg, var(--primary), #65301F);
  border: 1px solid rgba(43, 33, 28, .22);
  border-radius: var(--radius-soft);
  box-shadow: var(--shadow-ink);
}

.contact__panel::before {
  content: "";
  position: absolute;
  inset: 1rem;
  border: 1px dashed rgba(255, 248, 234, .18);
  border-radius: calc(var(--radius-soft) - .45rem);
  pointer-events: none;
}

.contact__panel::after {
  content: "";
  position: absolute;
  right: -4rem;
  bottom: -5rem;
  width: clamp(12rem, 30vw, 26rem);
  aspect-ratio: 1;
  color: rgba(255, 248, 234, .105);
  background: currentColor;
  clip-path: ellipse(38% 47% at 50% 50%);
  transform: rotate(18deg);
}

.contact__panel .section-kicker {
  color: var(--surface);
}

.contact__panel .section-kicker svg {
  color: var(--accent);
}

.contact h2 {
  color: var(--surface);
}

.contact__panel p:not(.section-kicker) {
  max-width: 39rem;
  color: rgba(255, 248, 234, .84);
  font-weight: 500;
}

.contact-phone {
  display: inline-block;
  margin-top: .72rem;
  color: var(--surface);
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: -.045em;
  text-decoration-color: rgba(255, 248, 234, .56);
  text-underline-offset: .25em;
}

.contact-form {
  display: grid;
  gap: 1rem;
  padding: clamp(1rem, 3vw, 1.65rem);
  background:
    linear-gradient(rgba(255, 248, 234, .86), rgba(255, 248, 234, .84)),
    repeating-linear-gradient(0deg, transparent 0 2.75rem, rgba(122, 63, 42, .11) 2.75rem calc(2.75rem + 1px));
  border: 1px solid rgba(122, 63, 42, .22);
  border-radius: var(--radius-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .36);
}

.field {
  display: grid;
  gap: .36rem;
}

.field label {
  color: var(--green);
  font-family: var(--mono);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.field input,
.field textarea {
  width: 100%;
  color: var(--ink);
  background: rgba(255, 248, 234, .16);
  border: 0;
  border-bottom: 2px solid rgba(122, 63, 42, .36);
  border-radius: .65rem .65rem .12rem .12rem;
  outline: 0;
  padding: .84rem .16rem;
  transition:
    border-color 230ms var(--curve),
    background 230ms var(--curve),
    border-radius 230ms var(--curve),
    padding 230ms var(--curve),
    box-shadow 230ms var(--curve);
}

.field textarea {
  min-height: 9.25rem;
  resize: vertical;
}

.field input:focus,
.field textarea:focus {
  padding-inline: .72rem;
  background: rgba(217, 130, 70, .09);
  border-color: var(--accent);
  border-radius: 1rem 1rem .35rem .35rem;
  box-shadow: inset 0 0 0 1px rgba(217, 130, 70, .08);
}

.form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  margin-top: .62rem;
  padding: .78rem .78rem .78rem 1rem;
  color: var(--surface);
  background:
    linear-gradient(135deg, var(--ink), #241814);
  border: 0;
  border-radius: 999px;
  box-shadow: var(--shadow-tight);
  transition:
    background 250ms var(--curve),
    transform 250ms var(--curve),
    border-radius 250ms var(--curve),
    box-shadow 250ms var(--curve);
}

.form-submit:hover,
.form-submit:focus-visible {
  background: var(--green);
  border-radius: 1rem 999px 999px 999px;
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
}

.form-submit span {
  font-family: var(--display);
  font-size: clamp(1.34rem, 3vw, 2.05rem);
  font-weight: 810;
  letter-spacing: -.065em;
  line-height: .95;
  text-align: left;
}

.form-submit svg {
  flex: 0 0 auto;
  width: 2.72rem;
  height: 2.72rem;
  color: var(--accent);
  background: var(--surface);
  border-radius: 50%;
  padding: .38rem;
}

/* Footer */
.site-footer {
  position: relative;
  width: min(100% - 1.25rem, 118rem);
  margin: 0 auto .75rem;
  padding: clamp(1.2rem, 4vw, 2.1rem);
  color: var(--surface);
  background:
    radial-gradient(circle at 12% 18%, rgba(217, 130, 70, .24), transparent 20rem),
    radial-gradient(circle at 88% 92%, rgba(47, 70, 54, .28), transparent 22rem),
    var(--ink);
  border: 1px solid rgba(255, 248, 234, .12);
  border-radius: clamp(1.5rem, 5vw, 4.25rem);
  overflow: hidden;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 1rem;
  border: 1px dashed rgba(255, 248, 234, .14);
  border-radius: calc(clamp(1.5rem, 5vw, 4.25rem) - .6rem);
  pointer-events: none;
}

.footer-wordmark {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255, 248, 234, .18);
}

.footer-wordmark span {
  max-width: 8ch;
  font-family: var(--display);
  font-size: clamp(3.9rem, 14vw, 13.2rem);
  font-weight: 870;
  letter-spacing: -.105em;
  line-height: .7;
}

.footer-wordmark svg {
  flex: 0 0 auto;
  width: clamp(3.8rem, 11vw, 8.2rem);
  height: clamp(3.8rem, 11vw, 8.2rem);
  color: var(--accent);
}

.footer-grid {
  display: grid;
  gap: 1.45rem;
  padding-top: 1.45rem;
}

.footer-concept {
  max-width: 34rem;
  margin: 0;
  color: rgba(255, 248, 234, .78);
  font-weight: 500;
}

address {
  color: rgba(255, 248, 234, .83);
  font-style: normal;
  line-height: 1.8;
}

address a,
.footer-social a {
  color: var(--surface);
  text-decoration-color: rgba(255, 248, 234, .48);
  text-underline-offset: .25em;
}

.footer-social {
  display: grid;
  gap: .42rem;
  align-content: start;
  color: rgba(255, 248, 234, .74);
  font-family: var(--mono);
  font-size: .84rem;
  font-weight: 500;
  letter-spacing: -.045em;
}

/* Focus */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

.brand:focus-visible,
.nav a:focus-visible,
.ticket-cta:focus-visible,
.secondary-cta:focus-visible,
.sticker-call:focus-visible,
.form-submit:focus-visible,
.contact-phone:focus-visible,
summary:focus-visible {
  outline-color: var(--green);
}

.field input:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid rgba(47, 70, 54, .36);
  outline-offset: 3px;
}

/* Animations */
@keyframes steamRise {
  to {
    stroke-dashoffset: -180;
  }
}

@keyframes drawPlug {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes floatStamp {
  0%,
  100% {
    transform: translateY(0) rotate(9deg);
  }

  50% {
    transform: translateY(-.58rem) rotate(5deg);
  }
}

@keyframes routeDash {
  to {
    stroke-dashoffset: -220;
  }
}

@supports (animation-timeline: view()) {
  .growing-motif {
    animation: germinate linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 70%;
  }

  @keyframes germinate {
    from {
      opacity: .36;
      transform: scale(.55) rotate(-24deg);
    }

    to {
      opacity: 1;
      transform: scale(1.22) rotate(14deg);
    }
  }
}

/* Responsive */
@media (min-width: 46rem) {
  .nav {
    display: flex;
  }

  .hero__lower {
    grid-template-columns: auto 1fr;
  }

  .table-map {
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(6rem, auto);
    gap: clamp(.85rem, 1.6vw, 1.35rem);
  }

  .table-note {
    min-height: clamp(16rem, 24vw, 24.5rem);
  }

  .table-note--origin {
    grid-column: 1 / span 7;
    grid-row: 1 / span 2;
  }

  .table-note--brunch {
    grid-column: 8 / span 5;
    grid-row: 1 / span 1;
  }

  .table-note--wifi {
    grid-column: 5 / span 8;
    grid-row: 3 / span 2;
  }

  .table-note--plug {
    grid-column: 1 / span 4;
    grid-row: 3 / span 1;
  }

  .about {
    grid-template-columns: minmax(0, 1.35fr) minmax(19rem, .65fr);
  }

  .menu-rail {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }

  .menu-slip--brunch {
    margin-top: clamp(2rem, 8vw, 6rem);
  }

  .receipt-layout {
    grid-template-columns: minmax(19rem, .74fr) minmax(22rem, 1fr);
  }

  .faq {
    grid-template-columns: minmax(18rem, .65fr) minmax(0, 1fr);
    align-items: start;
  }

  .contact {
    grid-template-columns: minmax(18rem, .8fr) minmax(0, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr auto auto;
  }
}

@media (min-width: 64rem) {
  .site-header {
    width: min(100% - 2rem, 118rem);
  }

  .hero__grid {
    grid-template-columns: minmax(0, 1.04fr) minmax(31rem, .96fr);
  }

  .hero__art {
    min-height: clamp(38rem, 53vw, 48rem);
  }

  .hero__sub {
    transform: rotate(-1.25deg);
  }

  .about__body {
    grid-template-columns: .95fr 1.05fr;
  }

  .about__body p:first-child {
    grid-row: span 2;
    font-size: clamp(1.12rem, 1rem + .55vw, 1.38rem);
    line-height: 1.55;
  }

  .receipt-lines div {
    grid-template-columns: 9rem 1fr;
  }

  .contact-form {
    grid-template-columns: 1fr 1fr;
  }

  .field--message,
  .form-submit {
    grid-column: 1 / -1;
  }
}

@media (min-width: 90rem) {
  .hero h1 {
    max-width: 10.8ch;
  }

  .cup-scene {
    width: min(48vw, 46rem);
  }
}

@media (max-width: 45.99rem) {
  .site-header {
    top: .5rem;
  }

  .hero__stamp {
    top: clamp(5.5rem, 18vw, 7.5rem);
    opacity: .9;
  }

  .section-kicker,
  .eyebrow {
    align-items: flex-start;
  }

  .section-kicker svg {
    margin-top: -.22rem;
  }

  .ticket-cta {
    right: .4rem;
  }

  .receipt-lines div {
    grid-template-columns: 1fr;
    gap: .25rem;
  }
}

@media (max-width: 30rem) {
  :root {
    --page-pad: 1rem;
  }

  .brand__word {
    max-width: 54vw;
  }

  .brand__mark {
    width: 2.32rem;
    height: 2.32rem;
  }

  .site-header {
    align-items: stretch;
    width: min(100% - 1rem, 118rem);
  }

  .hero {
    padding-top: 3rem;
  }

  .hero h1 {
    font-size: clamp(3.1rem, 18vw, 4.7rem);
    letter-spacing: -.08em;
  }

  .hero__sub {
    margin-left: 0;
  }

  .cup-scene {
    width: min(122vw, 40rem);
  }

  .ticket-cta {
    min-width: 12.6rem;
    transform: rotate(-3deg);
  }

  .table-note {
    min-height: 13rem;
  }

  .table-note h3 {
    font-size: clamp(1.95rem, 12vw, 3.35rem);
  }

  .receipt-lines div {
    grid-template-columns: 1fr;
  }

  summary {
    font-size: 1.18rem;
  }

  .form-submit {
    align-items: flex-start;
  }

  .footer-wordmark {
    align-items: flex-start;
  }
}

@media (hover: none) {
  .brand:hover,
  .nav a:hover,
  .table-note:hover,
  .menu-slip:hover,
  details:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .cup-scene,
  .growing-motif,
  body::before {
    transform: none;
  }
}