/* Kopiten Coffee Shop menu
   Kraft paper + navy ink + teak. Wall-sign caps, arched windows, fluted counter. */

:root {
  color-scheme: light;

  /* kraft paper (tinted toward hue 84) */
  --kraft-50: oklch(0.965 0.016 85);
  --kraft-100: oklch(0.935 0.026 84);
  --kraft-200: oklch(0.885 0.036 82);
  --kraft-300: oklch(0.8 0.05 78);

  /* navy ink */
  --navy-950: oklch(0.19 0.045 258);
  --navy-900: oklch(0.24 0.05 258);
  --navy-600: oklch(0.45 0.06 255);

  /* teak + leaf */
  --teak-500: oklch(0.7 0.14 66);
  --teak-700: oklch(0.47 0.11 55);
  --leaf-700: oklch(0.45 0.1 152);

  /* life-ring red from the roof deck */
  --buoy: oklch(0.62 0.2 32);

  /* the lit "open" lamp on the door sign: a soft sage, lighter and yellower than leaf so it never reads as vegetarian */
  --lamp-on: oklch(0.795 0.088 123);

  --f-display: 'Archivo', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --f-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-hand: 'Gaegu', 'Comic Sans MS', cursive;

  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --gutter: clamp(1.1rem, 5vw, 2.25rem);
  --rail-h: 3.25rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

body {
  margin: 0;
  overflow-x: clip;
  background: var(--kraft-100);
  color: var(--navy-950);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* paper fibre: two faint crossing noise-free gradients, no image request */
  background-image:
    radial-gradient(oklch(0.7 0.04 80 / 0.07) 1px, transparent 1.2px),
    radial-gradient(oklch(0.5 0.04 80 / 0.05) 1px, transparent 1.2px);
  background-size: 23px 23px, 37px 37px;
  background-position: 0 0, 11px 17px;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* clip, not hidden: no scroll container, so the sticky rail keeps working */
main,
.hero,
.foot {
  overflow-x: clip;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--navy-950);
  outline-offset: 3px;
  border-radius: 4px;
}
.hero :focus-visible,
.foot :focus-visible {
  outline-color: var(--teak-500);
}

.wrap {
  width: min(100% - 2 * var(--gutter), 72rem);
  margin-inline: auto;
}

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

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.7rem 1rem;
  background: var(--kraft-50);
  color: var(--navy-950);
  font-weight: 700;
  border-radius: 999px;
}
.skip:focus {
  top: 1rem;
}

.ico {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0 1.25rem;
  border-radius: 999px;
  font-family: var(--f-display);
  font-stretch: 78%;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.btn-solid {
  background: var(--kraft-50);
  color: var(--navy-950);
}
.btn-solid:hover {
  background: var(--teak-500);
}
.btn-ghost {
  border-color: oklch(0.965 0.016 85 / 0.55);
  color: var(--kraft-50);
}
.btn-ghost:hover {
  border-color: var(--kraft-50);
  background: oklch(0.965 0.016 85 / 0.1);
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  background: var(--navy-950);
  color: var(--kraft-50);
  padding-block: 1.1rem clamp(3.2rem, 8vw, 5rem);
  overflow-x: clip;
}

.hero-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  color: var(--kraft-50);
  text-decoration: none;
}
.logo-cup {
  width: 2.4rem;
  height: auto;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.logo-word {
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 1.55rem;
  line-height: 1;
  letter-spacing: 0.02em;
}
.logo-word i {
  font-style: normal;
  color: var(--teak-500);
}
.logo--lg .logo-cup {
  width: 4.6rem;
}
.logo--lg .logo-word {
  font-size: 2.6rem;
}

/* ---------- door sign: live open / closed ----------
   A kraft tag hung from the top edge like the one on the cafe door. Open is the filled tag
   with a lit lamp, closed is the hollow tag with an empty lamp, so the state reads by shape and
   fill as well as by word. Colour backs the shape up: a green lamp when open, a half teak lamp
   when closing soon (leaf stays vegetarian, buoy stays the roof). */
.sign {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0.4rem 0.95rem 0.4rem 0.8rem;
  border: 1.5px solid var(--kraft-50);
  border-radius: 6px;
  background: var(--kraft-50);
  color: var(--navy-950);
  white-space: nowrap;
  transform: rotate(1.4deg);
  /* pivot at the top of the string, so the tag swings from the page edge */
  transform-origin: 50% -1.15rem;
}
/* printed keyline inside the tag */
.sign::after {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid oklch(0.19 0.045 258 / 0.35);
  border-radius: 3px;
  pointer-events: none;
}
/* hidden until app.js has read the clock, so the tag never shows a state it is about to change.
   The zero-length animation shows the static "Hours" tag after 1.5s if the script is late or blocked. */
.sign:not([data-state]) {
  opacity: 0;
  animation: sign-reveal 0s 1.5s forwards;
}
@keyframes sign-reveal {
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .sign {
    transition: opacity 0.35s var(--ease-out);
  }
}
.sign-string {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 1.5px);
  width: 2.4rem;
  height: 1.15rem;
  translate: -50% 0;
  fill: none;
  stroke: var(--kraft-300);
  stroke-width: 1.3;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.sign-string path {
  vector-effect: non-scaling-stroke;
}
.sign-body {
  display: block;
  min-width: 6.4rem;
}
.sign-state {
  display: block;
  font-family: var(--f-display);
  font-stretch: 78%;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.05;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.sign-note {
  display: block;
  margin-top: 0.14rem;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--navy-600);
}
.sign[data-state='closed'] {
  background: transparent;
  border-color: oklch(0.965 0.016 85 / 0.5);
  color: var(--kraft-50);
}
.sign[data-state='closed']::after {
  display: none;
}
.sign[data-state='closed'] .sign-note {
  color: var(--kraft-200);
}
@media (max-width: 27rem) {
  .hero-top {
    column-gap: 0.6rem;
  }
  .sign {
    gap: 0.5rem;
    padding: 0.36rem 0.8rem 0.36rem 0.65rem;
  }
  .sign-state {
    font-size: 0.94rem;
  }
  .sign-note {
    font-size: 0.74rem;
  }
}
/* 360px phones and narrower: logo and the longest note ("opens tomorrow 07:30") must share one row,
   or the string would hang into the wordmark */
@media (max-width: 23rem) {
  .hero-top {
    flex-wrap: nowrap;
    column-gap: 0.5rem;
  }
  .logo {
    gap: 0.4rem;
  }
  .logo-cup {
    width: 2.1rem;
  }
  .logo-word {
    font-size: 1.35rem;
  }
  .sign {
    gap: 0.4rem;
    padding: 0.32rem 0.55rem 0.32rem 0.5rem;
  }
  .sign-body {
    min-width: 0;
  }
  .sign-state {
    font-size: 0.9rem;
  }
  .sign-note {
    font-size: 0.7rem;
  }
  .sign .lamp {
    width: 0.8rem;
    height: 0.8rem;
  }
}

/* the lamp: a porthole, ring in the ink of whatever it sits on */
.lamp {
  flex: none;
  width: 0.9rem;
  height: 0.9rem;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: transparent;
}
[data-state='open'] .lamp {
  background: var(--lamp-on);
}
[data-state='soon'] .lamp {
  background: linear-gradient(90deg, var(--teak-500) 50%, transparent 50%);
}

/* one damped swing when the sign first reads the clock and when it flips; resting tilt is 1.4deg */
@media (prefers-reduced-motion: no-preference) {
  .sign.is-swinging {
    animation: sign-swing 1.5s var(--ease-out);
  }
  @keyframes sign-swing {
    0% {
      transform: rotate(-5deg);
    }
    28% {
      transform: rotate(3.4deg);
    }
    52% {
      transform: rotate(-0.4deg);
    }
    74% {
      transform: rotate(2deg);
    }
    100% {
      transform: rotate(1.4deg);
    }
  }
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 1.4rem;
}

.arch {
  position: relative;
  z-index: 1;
  width: min(80%, 24rem);
  margin: 0 0 0 auto;
}
.arch-window {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 999px 999px 0 0;
  overflow: hidden;
  background: var(--navy-900);
}
.arch-window img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
.arch-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.arch-frame path {
  stroke: oklch(0.15 0.03 258);
}
.plinth {
  height: 1.5rem;
  background: repeating-linear-gradient(90deg, var(--kraft-50) 0 0.38rem, var(--kraft-300) 0.38rem 0.55rem);
}

.hero-copy {
  position: relative;
  z-index: 2;
}

.wordmark {
  margin: 0;
  margin-top: -0.1em;
  font-family: var(--f-display);
  font-stretch: 62%;
  font-weight: 900;
  font-size: clamp(4.5rem, 26vw, 16rem);
  line-height: 0.86;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--kraft-50);
}

.hero-tag {
  display: inline-block;
  margin: 0.6rem 0 0;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: clamp(2rem, 7.5vw, 2.9rem);
  line-height: 1;
  color: var(--teak-500);
  transform: rotate(-2.2deg);
  transform-origin: left center;
}

.hero-sub {
  margin: 1.1rem 0 0;
  max-width: 30ch;
  color: var(--kraft-200);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.7rem;
}

.hero-edge {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 1px);
  width: 100%;
  height: clamp(2.2rem, 6vw, 4rem);
  fill: var(--navy-950);
  pointer-events: none;
}

@media (min-width: 56rem) {
  .hero {
    padding-block: 1.4rem 6rem;
  }
  .hero-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    align-items: end;
    margin-top: 2rem;
  }
  .arch {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    max-width: 27rem;
  }
  .hero-copy {
    grid-column: 1;
    grid-row: 1;
    padding-bottom: 1.5rem;
  }
  .wordmark {
    margin-top: 0;
    margin-right: -9%;
    font-size: clamp(9rem, 19vw, 17rem);
  }
}

/* ---------- menu intro + filters ---------- */
.menu-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.6rem;
  padding-top: clamp(3rem, 7vw, 4.5rem);
  padding-bottom: 1.4rem;
}
.doors + .menu-intro {
  padding-top: clamp(2.4rem, 6vw, 3.4rem);
}
.legend {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-basis: 100%;
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--navy-600);
}
.intro-note {
  margin: 0;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--teak-700);
}
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding: 0 1.1rem;
  border: 2px solid var(--navy-950);
  border-radius: 999px;
  background: transparent;
  color: var(--navy-950);
  font: 700 0.95rem/1 var(--f-body);
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.chip:hover {
  background: var(--kraft-200);
}
.chip[aria-pressed='true'] {
  background: var(--navy-950);
  color: var(--kraft-50);
}
.filter-status {
  flex-basis: 100%;
  min-height: 1.4em;
  margin: 0;
  font-size: 0.9rem;
  color: var(--navy-600);
}

/* ---------- sticky rail: groups on top, sections of the group you are in below ---------- */
.has-tiers {
  --rail-h: 5.9rem;
}
.rail {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--kraft-50);
  border-block: 2px solid var(--navy-950);
}
.rail ul {
  margin: 0;
  padding: 0 var(--gutter);
  list-style: none;
}
.rail-subs {
  display: flex;
  gap: 0.15rem;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.rail-subs::-webkit-scrollbar {
  display: none;
}
.rail-subs li {
  flex: none;
  scroll-snap-align: center;
}
.rail-subs li.is-off {
  display: none;
}
.rail-subs a {
  display: flex;
  align-items: center;
  height: var(--rail-h);
  padding: 0 0.95rem;
  font-family: var(--f-display);
  font-stretch: 75%;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy-600);
  white-space: nowrap;
  transition: color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.rail-subs a:hover {
  color: var(--navy-950);
}
.rail-subs a[aria-current='true'] {
  color: var(--navy-950);
  box-shadow: inset 0 -5px 0 var(--teak-500);
}
.rail--tiers .rail-subs a {
  height: 2.75rem;
  font-size: 1rem;
}
.rail .rail-groups {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  border-bottom: 1px solid oklch(0.19 0.045 258 / 0.22);
}
.rail-groups li[hidden] {
  display: none;
}
.rail-groups a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.8rem;
  font-family: var(--f-display);
  font-stretch: 66%;
  font-weight: 900;
  font-size: 1.3rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy-600);
  transition: color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.rail-groups a:hover {
  color: var(--navy-950);
}
.rail-groups a[aria-current='true'] {
  color: var(--navy-950);
  box-shadow: inset 0 -5px 0 var(--teak-500);
}
@media (min-width: 56rem) {
  /* centred while the row fits; a row wider than the screen starts at the left edge instead of
     spilling past it, where justify-content: center would leave its first tabs out of reach */
  .rail-subs::before,
  .rail-subs::after {
    content: '';
    flex: 1 0 0;
  }
  .rail .rail-groups {
    max-width: 38rem;
    margin-inline: auto;
  }
}

/* ---------- sections ---------- */
.menu-section {
  padding-top: clamp(3.2rem, 8vw, 5.5rem);
  scroll-margin-top: var(--rail-h);
}

.sec-head {
  position: relative;
  isolation: isolate;
  /* the brush behind the heading is an image, not the section colour: say so to contrast checkers */
  background-image: linear-gradient(transparent, transparent);
  display: inline-block;
  /* a long word (SANDWICHES) plus the 3.8em of padding must fit the column: about 8.3em */
  font-size: calc(min(clamp(2.6rem, 12.5vw, 5.6rem), calc((100vw - 2 * var(--gutter)) / 8.3)) * var(--sec-fit, 1));
  max-width: 100%;
  margin: 0 0 clamp(1.4rem, 3.5vw, 2.2rem) 0.35rem;
  padding: 0.28em 3.1em 0.18em 0.7em;
  transform: rotate(-1.1deg);
}
.swash {
  position: absolute;
  z-index: -1;
  inset: -14% -7% -14% -3%;
  width: 110%;
  height: 128%;
  fill: var(--navy-950);
}
.sec-head h2 {
  margin: 0;
  font-family: var(--f-display);
  font-stretch: 62%;
  font-weight: 900;
  font-size: 1em;
  line-height: 1;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--kraft-50);
}
.sec-note {
  margin: -0.6rem 0 1.4rem;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 1.45rem;
  color: var(--teak-700);
}

/* ---------- dishes (the price wall) ---------- */
.dishes {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2rem) clamp(2rem, 5vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 25rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.dish-row {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0.8rem, 1fr) auto;
  align-items: end;
  column-gap: 0.55rem;
}
.dish-name {
  margin: 0;
  font-family: var(--f-display);
  font-stretch: 78%;
  font-weight: 750;
  font-size: 1.32rem;
  line-height: 1.12;
  letter-spacing: -0.003em;
  text-wrap: balance;
}
.dish-lead {
  align-self: end;
  margin-bottom: 0.32em;
  border-bottom: 2px dotted oklch(0.19 0.045 258 / 0.38);
}
.dish-price {
  font-family: var(--f-display);
  font-stretch: 70%;
  font-weight: 850;
  font-size: 1.7rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dish-price .k {
  margin-left: 0.04em;
  font-size: 0.6em;
  vertical-align: 0.5em;
}
.dish-desc {
  margin: 0.4rem 0 0;
  max-width: 48ch;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--navy-600);
}
.dish-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1rem;
  margin: 0.55rem 0 0;
  padding: 0;
  list-style: none;
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.tag-veg {
  color: var(--leaf-700);
}
.tag-fav {
  color: var(--teak-700);
}
.tag-wait {
  color: var(--navy-600);
}

/* ---------- add-ons + whiteboard ---------- */
.addons-wrap {
  display: grid;
  gap: 2.2rem;
  align-items: start;
}
.addons {
  display: grid;
  gap: 0.7rem clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.addon {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0.8rem, 1fr) auto;
  align-items: end;
  column-gap: 0.5rem;
}
.addon-name {
  font-weight: 600;
  line-height: 1.2;
}
.addon .dish-price {
  font-size: 1.35rem;
}

.board {
  justify-self: start;
  max-width: 21rem;
  padding: 1.1rem 1.3rem 1.25rem;
  background: oklch(0.985 0.006 90);
  border: 6px solid var(--navy-950);
  border-radius: 6px;
  transform: rotate(1.4deg);
  box-shadow: 0 0.7rem 1.4rem -0.8rem oklch(0.19 0.045 258 / 0.5);
}
.board p {
  margin: 0;
  font-family: var(--f-hand);
  font-weight: 700;
  color: oklch(0.28 0.03 258);
}
.board-title {
  font-size: 1.9rem;
  line-height: 1;
}
.board-body {
  margin-top: 0.4rem !important;
  font-size: 1.4rem;
  line-height: 1.15;
  font-weight: 400 !important;
}
.board-promo {
  margin-top: 0.7rem !important;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--teak-700) !important;
}
.board-promo span {
  background: linear-gradient(transparent 62%, oklch(0.85 0.1 75 / 0.7) 62%);
  padding-inline: 0.15em;
}

@media (min-width: 56rem) {
  .addons-wrap {
    grid-template-columns: minmax(0, 1fr) 21rem;
    gap: 4rem;
  }
  .board {
    margin-top: 0.4rem;
  }
}

/* ---------- footer ---------- */
.foot {
  background: var(--navy-950);
  color: var(--kraft-50);
}
.fluted {
  height: 1.6rem;
  background: repeating-linear-gradient(90deg, var(--kraft-50) 0 0.38rem, var(--kraft-300) 0.38rem 0.55rem);
}
.find {
  display: grid;
  gap: 2.4rem;
  padding-top: clamp(3.4rem, 8vw, 5rem);
  padding-bottom: clamp(2.2rem, 5vw, 3rem);
}
.find-photo {
  position: relative;
  margin: 0;
}
.find-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 1000 / 917;
  object-fit: cover;
  border-radius: 0.5rem;
  background: var(--navy-900);
}
.bunting {
  position: absolute;
  z-index: 1;
  top: -1.1rem;
  left: -3%;
  width: 106%;
  height: auto;
  aspect-ratio: 600 / 70;
  overflow: visible;
  pointer-events: none;
}
.b-line {
  fill: none;
  stroke: var(--kraft-200);
  stroke-width: 1.6;
}
.b-navy {
  fill: var(--navy-950);
  stroke: var(--kraft-50);
  stroke-width: 1.2;
}
.b-buoy {
  fill: var(--buoy);
}
.b-kraft {
  fill: var(--kraft-50);
}
.find-hint {
  margin: 0 0 1.1rem;
  max-width: 30ch;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--teak-500);
}
.foot-end {
  padding-bottom: clamp(2.4rem, 6vw, 3.4rem);
  border-top: 1px solid oklch(0.965 0.016 85 / 0.18);
  padding-top: 1.6rem;
}

.foot-title {
  margin: 0 0 1rem;
  font-family: var(--f-display);
  font-stretch: 62%;
  font-weight: 900;
  font-size: calc(clamp(3rem, 12vw, 5rem) * var(--foot-fit, 1));
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.foot-addr {
  font-style: normal;
}
.foot-addr a {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  max-width: 30ch;
  text-decoration: none;
  color: var(--kraft-200);
}
.foot-addr a:hover span {
  text-decoration: underline;
}
.foot-addr .ico {
  margin-top: 0.25em;
  color: var(--teak-500);
}
.hours {
  display: grid;
  gap: 0.3rem;
  max-width: 21rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--kraft-50);
}
.hours-row {
  display: grid;
  grid-template-columns: auto minmax(0.8rem, 1fr) auto;
  align-items: end;
  column-gap: 0.55rem;
}
.hours-row[hidden] {
  display: none;
}
.hours-k {
  font-family: var(--f-display);
  font-stretch: 78%;
  font-weight: 750;
  font-size: 1.15rem;
  line-height: 1.2;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.hours-lead {
  align-self: end;
  margin-bottom: 0.4em;
  border-bottom: 2px dotted oklch(0.965 0.016 85 / 0.35);
}
.hours-v {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--f-display);
  font-stretch: 70%;
  font-weight: 850;
  font-size: 1.35rem;
  line-height: 1.1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--kraft-200);
}
#hours-now[data-state='open'] .hours-v,
#hours-now[data-state='soon'] .hours-v {
  color: var(--kraft-50);
}
.foot-links {
  display: grid;
  justify-items: start;
  gap: 0.6rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  text-decoration: none;
  font-weight: 600;
  color: var(--kraft-50);
}
.link:hover {
  color: var(--teak-500);
}
@media (min-width: 56rem) {
  .find {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: center;
  }
}

.empty {
  margin: 3rem 0 0;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--teak-700);
}

/* ---------- filtering ---------- */
.dish[hidden],
.addon[hidden],
.sc-item[hidden],
.showcase[hidden],
.menu-section[hidden],
.world[hidden],
.rail li[hidden] {
  display: none;
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .rise {
    animation: rise 0.85s var(--ease-expo) both;
    animation-delay: var(--d, 0s);
  }
  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(1.6rem);
    }
  }
  .hero-tag.rise {
    animation-name: rise-tag;
  }
  @keyframes rise-tag {
    from {
      opacity: 0;
      transform: translateY(1rem) rotate(-2.2deg);
    }
    to {
      opacity: 1;
      transform: rotate(-2.2deg);
    }
  }

  /* the section headings get painted on as you scroll to them */
  .js-ready .sec-head .swash {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.9s var(--ease-expo);
  }
  .js-ready .sec-head h2 {
    opacity: 0;
    transition: opacity 0.4s var(--ease-out) 0.25s;
  }
  .js-ready .sec-head.in .swash {
    clip-path: inset(0 0 0 0);
  }
  .js-ready .sec-head.in h2 {
    opacity: 1;
  }
}


/* ================= v2: showcase bands, ragged edges, price brushes, search ================= */

.edge {
  position: absolute;
  left: 0;
  width: 100%;
  height: clamp(1.7rem, 4.2vw, 3.2rem);
  fill: var(--navy-950);
  pointer-events: none;
}
.edge--down {
  top: calc(100% - 1px);
}
.edge--up {
  bottom: calc(100% - 1px);
  transform: scaleY(-1);
}

/* search */
.search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 100%;
  max-width: 34rem;
}
.search .ico {
  position: absolute;
  left: 1.1rem;
  width: 1.2rem;
  height: 1.2rem;
  pointer-events: none;
  color: var(--navy-600);
}
.search input {
  width: 100%;
  min-height: 3.1rem;
  padding: 0 1.1rem 0 3rem;
  border: 2px solid var(--navy-950);
  border-radius: 999px;
  background: var(--kraft-50);
  color: var(--navy-950);
  font: 500 1rem/1 var(--f-body);
}
.search input::placeholder {
  color: var(--navy-600);
}
.search input:focus-visible {
  outline: 3px solid var(--navy-950);
  outline-offset: 3px;
}

/* favourites: the price sits on its own little brush stroke */
.dish-price {
  position: relative;
  isolation: isolate;
}
.pb {
  position: absolute;
  z-index: -1;
  inset: -0.28em -0.55em -0.25em -0.45em;
  width: calc(100% + 1em);
  max-width: none;
  height: calc(100% + 0.53em);
  fill: var(--navy-950);
}
.dish--fav .dish-price {
  padding-inline: 0.08em;
  color: var(--kraft-50);
}
.dish--fav .dish-price .k {
  color: var(--teak-500);
}

/* ---------- showcase: cut-out plates over a big navy stroke ---------- */
.showcase {
  position: relative;
  margin: clamp(1.4rem, 4vw, 2.4rem) calc(50% - 50vw) clamp(3.4rem, 8vw, 5.2rem);
}
.sc-band {
  position: absolute;
  inset: clamp(5.2rem, 22vw, 7.5rem) 0 0 0;
  background: var(--navy-950);
}
.sc-list {
  position: relative;
  display: flex;
  gap: 1.1rem;
  margin: 0;
  padding: 0 var(--gutter) 2.2rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.sc-list::-webkit-scrollbar {
  display: none;
}
.sc-list:focus-visible {
  outline-offset: -3px;
  outline-color: var(--kraft-50);
}
.sc-item {
  flex: none;
  width: min(76vw, 17.5rem);
  scroll-snap-align: center;
  color: var(--kraft-50);
}
.sc-plate {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 1.1rem 1rem oklch(0.15 0.03 258 / 0.5));
  transform: rotate(var(--r, -3deg));
}
.sc-copy {
  padding-top: 0.8rem;
}
.sc-name {
  margin: 0;
  font-family: var(--f-display);
  font-stretch: 70%;
  font-weight: 850;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}
.sc-price {
  margin: 0.45rem 0 0;
  font-family: var(--f-display);
  font-stretch: 70%;
  font-weight: 850;
  font-size: 2rem;
  line-height: 1;
  color: var(--teak-500);
  font-variant-numeric: tabular-nums;
}
.sc-price .k {
  font-size: 0.6em;
  margin-left: 0.04em;
  vertical-align: 0.5em;
}
.sc-desc {
  margin: 0.55rem 0 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--kraft-200);
}
.showcase .dish-tags {
  margin-top: 0.5rem;
}
.showcase .tag-veg {
  color: oklch(0.82 0.15 150);
}
.showcase .tag-fav {
  color: var(--teak-500);
}
.showcase .tag-wait {
  color: var(--kraft-200);
}

@media (min-width: 56rem) {
  .sc-band {
    inset: 8.5rem 0 0 0;
  }
  .sc-list {
    width: min(100% - 2 * var(--gutter), 72rem);
    margin-inline: auto;
    padding: 0 0 3.4rem;
    overflow: visible;
    display: grid;
    gap: 2.6rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  }
  .sc-item {
    width: auto;
  }
  .sc-item:nth-child(even) {
    margin-top: 2.6rem;
  }
  .showcase--one .sc-list {
    grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
    align-items: center;
    gap: 3.5rem;
  }
  .showcase--one .sc-item {
    display: contents;
  }
  .showcase--one .sc-copy {
    padding-top: 4.4rem;
  }
  .showcase--one .sc-name {
    font-size: 3.2rem;
  }
  .showcase--one .sc-price {
    font-size: 2.6rem;
  }
  .showcase--one .sc-desc {
    max-width: 38ch;
    font-size: 1.05rem;
  }
}

/* ---------- hero plates ---------- */
.hero-plate {
  position: absolute;
  z-index: 3;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 0.9rem 0.9rem oklch(0.1 0.03 258 / 0.55));
}
.hero-plate--a {
  left: -23%;
  bottom: 9%;
  width: 54%;
  transform: rotate(-7deg);
}
.hero-plate--b {
  right: -4%;
  top: 7%;
  width: 36%;
  transform: rotate(9deg);
}

/* ---------- coffee as the bar wall ---------- */
.menu-section--wall .dishes {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  max-width: 52rem;
  counter-reset: none;
}
.menu-section--wall .dish {
  padding-block: 0.7rem 0.8rem;
  border-bottom: 3px solid var(--navy-950);
}
.menu-section--wall .dish:first-child {
  border-top: 3px solid var(--navy-950);
}
.menu-section--wall .dish-name {
  font-stretch: 62%;
  font-weight: 900;
  font-size: clamp(1.9rem, 7.6vw, 3rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.012em;
}
.menu-section--wall .dish-price {
  font-size: clamp(2rem, 8vw, 3.1rem);
}
.menu-section--wall .dish-lead {
  border-bottom-style: solid;
  border-bottom-width: 3px;
  margin-bottom: 0.25em;
}
.menu-section--wall .dish-desc {
  margin-top: 0.3rem;
  font-size: 0.9rem;
}

/* ---------- add-ons as a navy band ---------- */
.band {
  position: relative;
  isolation: isolate;
  margin-block: clamp(3rem, 7vw, 4.5rem);
  padding-bottom: clamp(3.4rem, 8vw, 5rem);
}
.band-bg {
  position: absolute;
  z-index: -1;
  inset: 0 calc(50% - 50vw);
  background: var(--navy-950);
}
.band .swash {
  fill: var(--kraft-50);
}
.band .sec-head h2 {
  color: var(--navy-950);
}
.band .sec-note {
  color: var(--teak-500);
}
.band .addon-name {
  color: var(--kraft-50);
}
.band .dish-lead {
  border-bottom-color: oklch(0.965 0.016 85 / 0.35);
}
.band .dish-price {
  color: var(--kraft-50);
}
.band .dish-price .k {
  color: var(--teak-500);
}
.band .board {
  box-shadow: 0 1.4rem 1.6rem -0.8rem oklch(0.05 0.02 258 / 0.7);
}
@media (min-width: 56rem) {
  .band .addons-wrap {
    align-items: center;
  }
}

/* ---------- logo steam + bunting sway + plate drift ---------- */
@media (prefers-reduced-motion: no-preference) {
  .logo-cup .steam path {
    transform-box: fill-box;
    animation: steam 3.6s ease-in-out infinite;
    opacity: 0;
  }
  .logo-cup .steam path:nth-child(2) {
    animation-delay: 1.1s;
  }
  .logo-cup .steam path:nth-child(3) {
    animation-delay: 2.2s;
  }
  @keyframes steam {
    0% {
      opacity: 0;
      transform: translateY(5px);
    }
    35% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      transform: translateY(-7px);
    }
  }
  .bunting {
    transform-origin: 50% 0;
    animation: sway 7s ease-in-out infinite alternate;
  }
  @keyframes sway {
    from {
      transform: rotate(-0.5deg);
    }
    to {
      transform: rotate(0.5deg);
    }
  }
  .hero-plate--a {
    animation: bob-a 7s ease-in-out infinite alternate;
  }
  .hero-plate--b {
    animation: bob-b 8s ease-in-out infinite alternate;
  }
  @keyframes bob-a {
    from {
      transform: rotate(-7deg) translateY(0);
    }
    to {
      transform: rotate(-4deg) translateY(-0.5rem);
    }
  }
  @keyframes bob-b {
    from {
      transform: rotate(9deg) translateY(0);
    }
    to {
      transform: rotate(6deg) translateY(0.45rem);
    }
  }
  /* showcase plates land one by one when the band scrolls in */
  .js-ready .sc-item {
    opacity: 0;
    transform: translateY(2.4rem);
    transition: opacity 0.7s var(--ease-expo), transform 0.95s var(--ease-expo);
    transition-delay: calc(var(--i) * 110ms);
  }
  .js-ready .showcase.in .sc-item {
    opacity: 1;
    transform: none;
  }
  .showcase.in .sc-plate {
    animation: bob 8s ease-in-out infinite alternate;
    animation-delay: calc(var(--i) * -2.4s);
  }
  @keyframes bob {
    from {
      transform: rotate(var(--r, -3deg)) translateY(0);
    }
    to {
      transform: rotate(calc(var(--r, -3deg) * 0.4)) translateY(-0.5rem);
    }
  }
}

.draft-banner {
  margin: 0;
  padding: 0.55rem var(--gutter);
  background: var(--buoy);
  color: var(--navy-950);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}
.menu-section--wall .dish-lead {
  border-bottom-color: oklch(0.19 0.045 258 / 0.55);
  border-bottom-width: 2px;
}


/* ================= v3: three doors, three worlds, drawn drinks ================= */

:root {
  --sun: oklch(0.83 0.15 82);
  --steel: oklch(0.15 0.03 258);
  --line: var(--navy-950);
}

/* ---------- drink illustrations ---------- */
.art {
  display: block;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3.2;
}
.art .ln {
  stroke: var(--line);
  stroke-width: 3;
}
.art .cer {
  fill: var(--kraft-50);
  stroke: var(--steel);
}
.art .glf {
  fill: oklch(0.965 0.016 85 / 0.16);
  stroke: none;
}
.art .gl {
  stroke: var(--line);
}
.art .shine {
  stroke: oklch(0.965 0.016 85 / 0.75);
  stroke-width: 3;
}
.art .c-coffee,
.art .c-milk,
.art .c-foam,
.art .c-matcha,
.art .c-lime,
.art .c-juice,
.art .c-slice,
.art .c-limeslice,
.art .c-berry,
.art .c-leaf {
  stroke: none;
}
.art .c-coffee {
  fill: oklch(0.4 0.08 50);
}
.art .c-milk {
  fill: oklch(0.93 0.04 82);
}
.art .c-foam {
  fill: var(--kraft-50);
}
.art .c-matcha {
  fill: oklch(0.68 0.15 135);
}
.art .c-lime {
  fill: oklch(0.88 0.15 118);
}
.art .c-juice {
  fill: oklch(0.72 0.18 48);
}
.art .c-slice {
  fill: oklch(0.82 0.17 68);
}
.art .c-limeslice {
  fill: oklch(0.9 0.16 120);
}
.art .c-berry {
  fill: oklch(0.72 0.14 12);
}
.art .c-leaf {
  fill: oklch(0.55 0.14 150);
}
.art .leaf-o {
  stroke: var(--line);
  stroke-width: 2.2;
}
.art .c-crust {
  fill: oklch(0.5 0.1 55);
  stroke: oklch(0.34 0.07 50);
  stroke-width: 2.4;
}
.art .bread {
  fill: oklch(0.88 0.07 82);
  stroke: oklch(0.5 0.1 55);
  stroke-width: 3.4;
}
.art .c-avo {
  fill: oklch(0.74 0.14 128);
  stroke: none;
}
.art .avo-spot {
  stroke: oklch(0.58 0.12 135);
  stroke-width: 2;
}
.art .egg {
  fill: var(--kraft-50);
  stroke: var(--steel);
  stroke-width: 2.6;
}
.art .yolk {
  fill: oklch(0.8 0.17 80);
  stroke: var(--steel);
  stroke-width: 2.6;
}
.art .shine2 {
  stroke: var(--kraft-50);
  stroke-width: 2.2;
}
.art .pepper {
  stroke: var(--steel);
  stroke-width: 2.6;
}
.art .rim {
  fill: none;
  stroke: oklch(0.8 0.05 78);
  stroke-width: 1.8;
}
.art .c-straw {
  fill: var(--buoy);
  stroke: var(--line);
  stroke-width: 2.2;
}
.art .ice {
  fill: oklch(0.965 0.016 85 / 0.36);
  stroke: oklch(0.965 0.016 85 / 0.85);
  stroke-width: 2;
}
.art .straw {
  stroke: var(--buoy);
  stroke-width: 6;
}
.art .straw--light {
  stroke: var(--kraft-50);
}
.art .rind {
  fill: oklch(0.86 0.12 88);
  stroke: var(--line);
  stroke-width: 2.4;
}
.art .spoke {
  stroke: var(--kraft-50);
  stroke-width: 1.6;
}
.art .cream circle {
  fill: var(--kraft-50);
  stroke: var(--line);
  stroke-width: 2.4;
}
.art .crema {
  stroke: var(--teak-500);
  stroke-width: 1.6;
}
.art .art-leaf {
  stroke: oklch(0.4 0.08 50);
  stroke-width: 1.7;
}

/* ---------- three doors, cut like the arched windows of the facade ---------- */
.doors {
  padding-top: clamp(2.6rem, 6vw, 4rem);
}
.doors-hand {
  margin: 0 0 1.1rem;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: clamp(1.7rem, 6vw, 2.2rem);
  line-height: 1;
  color: var(--teak-700);
  transform: rotate(-1.6deg);
  transform-origin: left center;
}
.doors-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: clamp(0.55rem, 2.6vw, 1.5rem);
  max-width: 54rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* the arches share one sill line whatever the length of the captions under them */
.doors-row li {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
}
.door {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  align-content: end;
  text-decoration: none;
  color: var(--navy-950);
  -webkit-tap-highlight-color: transparent;
}
.door--eat {
  --door-bg: var(--kraft-200);
}
.door--coffee {
  --door-bg: var(--navy-950);
  --line: var(--kraft-50);
}
.door--drinks {
  --door-bg: var(--sun);
  --line: var(--navy-950);
}
.door-arch {
  position: relative;
  display: block;
  align-self: end;
  aspect-ratio: 5 / 7.2;
  border: 5px solid var(--steel);
  border-bottom-width: 9px;
  border-radius: 999px 999px 0 0;
  background: var(--door-bg);
  overflow: hidden;
  isolation: isolate;
}
.doors-row li:nth-child(2) .door-arch {
  aspect-ratio: 5 / 8.4;
}
/* window bars sit in front of the picture, like glass in a steel frame */
.door-arch::before,
.door-arch::after {
  content: '';
  position: absolute;
  z-index: 3;
  background: var(--steel);
}
.door-arch::before {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  margin-left: -2px;
}
.door-arch::after {
  left: 0;
  right: 0;
  top: 36%;
  height: 4px;
}
.door-art {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: -3%;
  max-width: none;
  height: auto;
  transition: transform 0.55s var(--ease-expo);
}
.door-art {
  width: 116%;
  transform: translateX(-50%);
}
.door-art.art--matcha {
  width: 138%;
  bottom: -4%;
}
.door-art.art--toast {
  width: 150%;
  bottom: -5%;
}
.door:hover .door-art {
  transform: translateX(-50%) translateY(-4%);
}
.door-name {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--f-display);
  font-stretch: 62%;
  font-weight: 900;
  font-size: calc(clamp(1.75rem, 8vw, 3.4rem) * var(--door-fit, 1));
  line-height: 0.95;
  letter-spacing: 0.015em;
  text-transform: uppercase;
}
.door-hint {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: clamp(1.05rem, 4vw, 1.4rem);
  line-height: 1.05;
  color: var(--teak-700);
}

/* ---------- worlds ---------- */
.world {
  position: relative;
  /* a group tab lands the room's top just under the rail, not behind it */
  scroll-margin-top: var(--rail-h);
}
.world[hidden] {
  display: none;
}
.world-body {
  padding-bottom: clamp(3.5rem, 8vw, 5.5rem);
}
.world--paper .world-body {
  padding-bottom: clamp(4rem, 9vw, 7rem);
}
/* only the room's own fringes ride above the next room; band edges inside stay under the plates */
.world > .edge {
  z-index: 2;
}
.world-head {
  display: grid;
  grid-template-columns: [full-start] minmax(0, 1fr) [wrap-start] min(100% - 2 * var(--gutter), 72rem) [wrap-end] minmax(0, 1fr) [full-end];
  padding-top: clamp(3.6rem, 9vw, 6rem);
}
.lineup {
  grid-column: wrap;
  grid-row: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lineup li {
  flex: 0 1 auto;
  margin-inline: clamp(-0.7rem, -1.6vw, -0.25rem);
}
.lineup .art {
  width: clamp(5.8rem, 25vw, 12.5rem);
  height: auto;
  margin-bottom: clamp(-1.3rem, -2.4vw, -0.5rem);
}
.counter {
  grid-column: full;
  grid-row: 2;
  position: relative;
  z-index: 1;
  height: clamp(1rem, 2.4vw, 1.4rem);
  background: repeating-linear-gradient(90deg, var(--kraft-50) 0 0.38rem, var(--kraft-300) 0.38rem 0.55rem);
}
.world-aside {
  grid-column: wrap;
  grid-row: 3;
  justify-self: center;
  padding-top: clamp(2rem, 5vw, 3rem);
}
/* wide screens: the whiteboard leans on the counter next to the drinks */
@media (min-width: 64rem) {
  .world-head--aside .lineup {
    width: calc(100% - 24rem);
  }
  .world-head--aside .world-aside {
    grid-row: 1;
    justify-self: end;
    align-self: end;
    position: relative;
    z-index: 2;
    padding: 0;
    margin-bottom: -0.2rem;
  }
}
.world-head + .world-body .menu-section:first-child {
  padding-top: clamp(2.6rem, 6vw, 4rem);
}

/* navy: the bar wall at the back of the room */
.world--navy {
  --line: var(--kraft-50);
  background: var(--navy-950);
  color: var(--kraft-50);
  margin-top: clamp(3.4rem, 8vw, 5.6rem);
}
.world--navy .sec-head .swash {
  fill: var(--kraft-50);
}
.world--navy .sec-head h2 {
  color: var(--navy-950);
}
.world--navy .sec-note {
  color: var(--teak-500);
}
.world--navy .dish-name,
.world--navy .dish-price {
  color: var(--kraft-50);
}
.world--navy .dish-price .k {
  color: var(--teak-500);
}
.world--navy .dish-desc {
  color: var(--kraft-200);
}
.world--navy .dish-lead,
.world--navy .menu-section--wall .dish-lead {
  border-bottom-color: oklch(0.965 0.016 85 / 0.45);
}
.world--navy .menu-section--wall .dish,
.world--navy .menu-section--wall .dish:first-child {
  border-color: oklch(0.965 0.016 85 / 0.3);
}
.world--navy .tag-veg {
  color: oklch(0.82 0.15 150);
}
.world--navy .tag-fav {
  color: var(--teak-500);
}
.world--navy .tag-wait {
  color: var(--kraft-200);
}
.world--navy .pb {
  fill: var(--teak-500);
}
.world--navy .dish--fav .dish-price,
.world--navy .dish--fav .dish-price .k {
  color: var(--navy-950);
}
.world--navy :focus-visible,
.world--navy .search input:focus-visible {
  outline-color: var(--kraft-50);
}

/* sun: juice, shakes and matcha get daylight */
.world--sun {
  --line: var(--navy-950);
  background: var(--sun);
  color: var(--navy-950);
}
.world--sun .dish-desc {
  color: var(--navy-900);
}
.world--sun .dish-lead {
  border-bottom-color: oklch(0.19 0.045 258 / 0.5);
}
.world--sun .sec-note {
  color: oklch(0.36 0.1 50);
}
.world--sun .tag {
  color: var(--navy-950);
}
.world--sun .chip:focus-visible,
.world--sun :focus-visible {
  outline-color: var(--navy-950);
}
.menu-section[data-tint='leaf'] .swash {
  fill: oklch(0.36 0.09 152);
}

.world--navy[hidden] + .world--sun {
  margin-top: 0;
}

/* ---------- footer buttons ---------- */
.foot-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

@media (prefers-reduced-motion: no-preference) {
  .art .steam path {
    transform-box: fill-box;
    animation: steam 3.6s ease-in-out infinite;
    opacity: 0;
  }
  .art .steam path:nth-child(2) {
    animation-delay: 1.2s;
  }
  .art .steam path:nth-child(3) {
    animation-delay: 2.4s;
  }
}

/* ---------- language menu ----------
   A <details> in the hero, so it works without JavaScript. On phones the top row is already full (logo and door
   sign), so the button hangs on its own line under the sign; from 40rem up it sits in the row, left of the sign.
   The sign's string hangs from the top edge, so the button never goes above it. */
.hero-top {
  position: relative;
  margin-bottom: 3.7rem;
}
.lang {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  z-index: 30;
}
.lang summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 0.95rem 0 0.8rem;
  border: 1.5px solid oklch(0.965 0.016 85 / 0.55);
  border-radius: 999px;
  color: var(--kraft-50);
  font-family: var(--f-display);
  font-stretch: 78%;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.lang summary::-webkit-details-marker {
  display: none;
}
.lang summary:hover,
.lang[open] summary {
  border-color: var(--kraft-50);
  background: oklch(0.965 0.016 85 / 0.1);
}
.lang-chev {
  width: 0.9em;
  height: 0.9em;
  transition: rotate 0.25s var(--ease-out);
}
.lang[open] .lang-chev {
  rotate: 180deg;
}
.lang-list {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  min-width: 13.5rem;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: var(--kraft-50);
  color: var(--navy-950);
  border-radius: 6px;
  box-shadow: 0 0.7rem 1.8rem oklch(0.1 0.04 258 / 0.5);
}
.lang-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.75rem;
  padding: 0 0.85rem;
  border-radius: 4px;
  color: inherit;
  font-family: var(--f-body);
  font-size: 1.0625rem;
  font-weight: 600;
  text-decoration: none;
}
.lang-list a:hover {
  background: var(--kraft-200);
}
/* the current language reads by weight and a filled lamp, not by colour */
.lang-list a[aria-current] {
  font-weight: 800;
}
.lang-list a[aria-current]::after {
  content: '';
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: currentColor;
}
.lang-list :focus-visible {
  outline-color: var(--navy-950);
  outline-offset: -3px;
}
@media (min-width: 40rem) {
  .hero-top {
    justify-content: flex-start;
    margin-bottom: 0;
  }
  .lang {
    position: relative;
    top: auto;
    right: auto;
    margin-left: auto;
  }
}

/* ---------- other scripts ----------
   Archivo, Figtree and Gaegu only cover Latin (and Cyrillic, see fonts.css). For Chinese, Japanese, Korean and
   Hindi the Latin face stays first, so "Kopiten" and the dish names keep the cafe's type, and the system font
   draws the rest. Letter-spacing is for Latin caps: it pulls Han and Devanagari text apart and breaks conjuncts. */
:lang(zh) {
  --script: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Noto Sans SC';
}
:lang(ja) {
  --script: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', 'Noto Sans CJK JP', 'Noto Sans JP';
}
:lang(ko) {
  --script: 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans CJK KR', 'Noto Sans KR';
}
:lang(hi) {
  --script: 'Kohinoor Devanagari', 'Devanagari Sangam MN', 'Nirmala UI', 'Noto Sans Devanagari', 'Mukta';
}
:lang(zh),
:lang(ja),
:lang(ko),
:lang(hi) {
  --f-display: 'Archivo', var(--script), sans-serif;
  --f-body: 'Figtree', var(--script), system-ui, sans-serif;
  --f-hand: 'Gaegu', var(--script), sans-serif;
  letter-spacing: normal !important;
}

/* The type scale is drawn for condensed Latin capitals. Han, kana, hangul and Devanagari are wider per character
   (and Cyrillic and some long French and Indonesian words are wider per word), so the three loudest sizes (section
   stamp, door name, "Visit") shrink by a per-language factor; 1 is the English size. Add a line here for a new language
   if a caption does not fit its column at 320px. */
:lang(zh),
:lang(ja),
:lang(ko) {
  --sec-fit: 0.72;
  --foot-fit: 0.6;
}
:lang(hi) {
  --sec-fit: 0.88;
  --foot-fit: 0.85;
}
:lang(uk) {
  --sec-fit: 0.85;
}
:lang(ja) {
  --door-fit: 0.8;
}
:lang(fr) {
  --door-fit: 0.8;
}
:lang(id) {
  --door-fit: 0.85;
}
/* short captions break between words, never inside one (コーヒー, 플랫 화이트); Korean text does so everywhere */
:lang(zh) :is(.door-name, .door-hint, .rail a, .chip, .btn),
:lang(ja) :is(.door-name, .door-hint, .rail a, .chip, .btn),
:lang(ko) :is(.door-name, .door-hint, .rail a, .chip, .btn) {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
:lang(ko) {
  word-break: keep-all;
}
/* door captions in full-width script: a 105px column holds only six or seven characters per line */
:lang(zh) .door-hint,
:lang(ja) .door-hint,
:lang(ko) .door-hint {
  font-size: clamp(0.85rem, 3.4vw, 1.25rem);
  line-height: 1.2;
}
/* Devanagari carries marks above and below the line: the Latin line heights would collide them */
:lang(hi) :is(.sec-head h2, .door-name, .doors-hand, .door-hint, .intro-note, .sec-note, .find-hint, .foot-title, .board-title, .board-body, .sc-name) {
  line-height: 1.3;
}

/* ================= signature beans (under Classic Coffee) + the captain's log ================= */
.beans {
  margin: 0 0 clamp(2.4rem, 6vw, 4rem);
}
.beans[hidden] {
  display: none;
}
.beans-title {
  margin: 0 0 1.1rem;
  font-family: var(--f-display);
  font-stretch: 62%;
  font-weight: 900;
  font-size: clamp(1.9rem, 7.5vw, 3rem);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--kraft-50);
}
.beans-list {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.bean {
  padding: 1.25rem 1.35rem 1.4rem;
  background: var(--kraft-50);
  color: var(--navy-950);
  border-radius: 6px;
  box-shadow: 0 1.1rem 1.4rem -0.9rem oklch(0.05 0.02 258 / 0.8);
}
@media (min-width: 40rem) {
  .bean:nth-child(odd) {
    transform: rotate(-0.7deg);
  }
  .bean:nth-child(even) {
    transform: rotate(0.7deg);
  }
}
.bean-name {
  margin: 0;
  font-family: var(--f-display);
  font-stretch: 70%;
  font-weight: 850;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.bean-origin {
  margin: 0.4rem 0 0;
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.35;
  color: var(--teak-700);
}
.bean-kind::before {
  content: ' \00b7  ';
}
.bean-label {
  margin: 1rem 0 0.15rem;
  font-family: var(--f-display);
  font-stretch: 70%;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy-600);
}
.bean-notes {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.15;
}
.bean-blurb {
  margin: 0.85rem 0 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--navy-900);
}

.story {
  padding: clamp(3.4rem, 8vw, 5.5rem) 0 clamp(3.6rem, 8vw, 5.5rem);
}
.story .sec-head {
  --sec-fit: 0.6;
  margin-bottom: clamp(1.8rem, 4vw, 2.6rem);
}
.log-body {
  max-width: 38rem;
  margin-left: clamp(0rem, 4vw, 3rem);
  font-size: 1.1rem;
  line-height: 1.65;
  text-wrap: pretty;
}
.log-body p {
  margin: 0 0 1.15rem;
}
.log-hail {
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1.15;
  color: var(--teak-700);
}
.log-line {
  padding-left: 1rem;
  border-left: 4px solid var(--teak-500);
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1.2;
}
.log-sign {
  margin-top: 1.8rem !important;
  font-family: var(--f-display);
  font-stretch: 70%;
  font-weight: 850;
  font-size: 1.6rem;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
:lang(hi) :is(.bean-name, .bean-notes, .log-hail, .log-line, .log-sign, .beans-title) {
  line-height: 1.3;
}