@import url("https://fonts.googleapis.com/css2?family=Gloock&family=Hanken+Grotesk:wght@400;500;600&family=Outfit:wght@500;600&display=swap");

/* ---------- Tokens (from docs/03-color.md) ---------- */
.theme-coffee {
  --dark: #8a3324;
  --deepest: #5a2117;
  --mid: #d9824f;
  --light: #edd3bf;
  --hot: #3a1510;
  --on-dark: #fff8f0;
  --ink: #1c130f;
}
.theme-falafel {
  --dark: #1f4630;
  --deepest: #12291c;
  --mid: #b7cf84;
  --light: #e7ead5;
  --hot: #c8442f;
  --on-dark: #fbfbf3;
  --ink: #0f2218;
}
:root {
  --out: cubic-bezier(.215, .61, .355, 1);
  --inout: cubic-bezier(.645, .045, .355, 1);
  --expo: cubic-bezier(.16, 1, .3, 1);
  --display: "Gloock", Georgia, serif;
  --body: "Hanken Grotesk", system-ui, sans-serif;
  --label: "Outfit", system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 60px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--mid);
  color: var(--on-dark);
  font: 400 17px/1.6 var(--body);
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--hot); outline-offset: 4px; }
[data-scrub] { --p: 0; }

/* Section themes: one ground + one line colour + text */
.t-dark { background: var(--dark); color: var(--on-dark); --line: var(--mid); --big: var(--mid); }
.t-mid { background: var(--mid); color: var(--ink); --line: var(--dark); --big: var(--dark); }
.t-light { background: var(--light); color: var(--ink); --line: var(--dark); --big: var(--dark); }
.t-deep { background: var(--deepest); color: var(--on-dark); --line: var(--mid); --big: var(--mid); }

.label {
  font: 600 13px/1 var(--label);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ---------- Split text ---------- */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.wi { display: inline-block; }
.ch { display: inline-block; }

.js .reveal-words .wi {
  transform: translateY(105%);
  transition: transform .8s var(--out);
  transition-delay: calc(var(--c) * 22ms + var(--d, 0ms));
}
.js .reveal-words.in .wi { transform: none; }

.js .reveal-chars .ch {
  opacity: 0;
  transform: translateY(.45em) rotate(4deg);
  transition: opacity .7s var(--out), transform 1s var(--expo);
  transition-delay: calc(var(--c) * 45ms + var(--d, 0ms));
}
.js .reveal-chars.in .ch { opacity: 1; transform: none; }

.js .reveal-fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--out), transform .8s var(--out);
  transition-delay: var(--d, 0ms);
}
.js .reveal-fade.in { opacity: 1; transform: none; }

/* ---------- Button with rolling label ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding-inline: 24px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font: 600 12px/1 var(--label);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: color .45s var(--out), border-color .45s var(--out);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: currentColor;
  border-radius: inherit;
  transform: translateY(101%);
  transition: transform .55s var(--expo);
}
.btn .roll { display: block; height: 1em; overflow: hidden; white-space: nowrap; }
.btn .roll span { display: block; transition: transform .55s var(--expo); }
.btn .roll span + span { color: var(--btn-flip, var(--dark)); }
.btn:hover::before { transform: none; }
.btn:hover .roll span { transform: translateY(-100%); }
.btn.solid { background: var(--hot); border-color: var(--hot); color: var(--on-dark); }
.btn.solid::before { background: var(--on-dark); }
.btn.solid .roll span + span { color: var(--hot); }

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  height: 64px;
  padding-inline: var(--gutter);
  color: var(--nav-fg, var(--on-dark));
  background: var(--nav-bg, var(--dark));
  transform: translateY(-100%);
  transition: transform .7s var(--expo), background-color .45s var(--out), color .45s var(--out);
}
.nav-on .nav { transform: none; }
body[data-nav="dark"] { --nav-bg: var(--dark); --nav-fg: var(--on-dark); }
body[data-nav="mid"] { --nav-bg: var(--mid); --nav-fg: var(--ink); }
body[data-nav="light"] { --nav-bg: var(--light); --nav-fg: var(--ink); }
body[data-nav="deep"] { --nav-bg: var(--deepest); --nav-fg: var(--on-dark); }
.nav-links { display: flex; gap: 22px; }
.nav-links a, .foot-links a {
  position: relative;
  text-decoration: none;
  font: 600 12px/1 var(--label);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding-block: 6px;
}
.nav-links a::after, .foot-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s var(--expo);
}
.nav-links a:hover::after, .nav-links a.active::after, .foot-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-mark { font: 400 26px/1 var(--display); text-decoration: none; white-space: nowrap; }
.nav .btn { justify-self: end; grid-column: 3; height: 40px; padding-inline: 18px; }
.nav .btn.nav-book { display: none; }

/* ---------- Emblem (logo circle, drawn) ---------- */
.emblem { display: block; width: 100%; height: auto; overflow: visible; }
.emblem .ring, .emblem .cross { fill: none; stroke: currentColor; stroke-width: 3; }
.emblem .bar { fill: currentColor; transform-box: fill-box; }
.emblem .q1 .bar { transform-origin: 50% 0; }
.emblem .q4 .bar { transform-origin: 50% 100%; }
/* the ring dash runs a little past its start so the drawn circle closes without a seam at the top */
.js .emblem.draw .ring { stroke-dasharray: 1.02; stroke-dashoffset: 1.02; transition: stroke-dashoffset 1.6s var(--inout) var(--d, 0ms); }
.js .emblem.draw .cross { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--inout); transition-delay: calc(var(--d, 0ms) + 500ms); }
.js .emblem.draw .bar { transform: scaleY(0); transition: transform .9s var(--expo); transition-delay: calc(var(--d, 0ms) + 700ms + var(--i) * 40ms); }
/* the name inside the logo's middle band */
.emblem-name text {
  fill: currentColor;
  font: 400 30px/1 var(--display);
  text-anchor: middle;
}
.js .emblem-name { opacity: 0; transition: opacity .8s var(--out); transition-delay: calc(var(--d, 0ms) + .75s); }
.js .emblem.draw.in .emblem-name, .js .in .emblem.draw .emblem-name { opacity: 1; }

.js .emblem.draw.in .ring, .js .emblem.draw.in .cross { stroke-dashoffset: 0; }
.js .emblem.draw.in .bar { transform: none; }
/* a logo that sits inside a block which is itself watched (the sister link at the very
   bottom) draws itself when that block arrives, not when the logo alone does */
.js .in .emblem.draw .ring, .js .in .emblem.draw .cross { stroke-dashoffset: 0; }
.js .in .emblem.draw .bar { transform: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  background: transparent;
  color: var(--on-dark);
}
.hero-curtain {
  position: absolute;
  inset: 0;
  background: var(--dark);
}
.js .hero-curtain { clip-path: inset(100% 0 0 0); transition: clip-path 1s var(--inout) .15s; }
.js .ready .hero-curtain { clip-path: inset(0 0 0 0); }

.hero-top {
  position: absolute;
  inset: 22px var(--gutter) auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  transform: translateY(calc(var(--p) * -60px));
  opacity: calc(1 - var(--p) * 2.5);
}
.hero-top > :last-child { justify-self: end; }
.hero-top .label, .hero-arc { display: block; }
.js .hero-top .drop { opacity: 0; transform: translateY(-30px); transition: opacity 1s var(--out), transform 1s var(--out); }
.js .ready .hero-top .drop { opacity: 1; transform: none; }
.js .ready .hero-top .drop:nth-child(1) { transition-delay: 1.05s; }
.js .ready .hero-top .drop:nth-child(2) { transition-delay: 1.2s; }
.js .ready .hero-top .drop:nth-child(3) { transition-delay: 1.35s; }
.hero-arc { width: 200px; margin-top: -6px; }
.hero-arc text { fill: currentColor; font: 600 13px var(--label); letter-spacing: .2em; text-transform: uppercase; }

.hero-emblem {
  position: absolute;
  left: 50%;
  top: 42%;
  width: min(30vh, 250px, 46vw);
  color: var(--mid);
  transform: translate(-50%, -50%) translateY(calc(var(--p) * -18vh)) scale(calc(1 - var(--p) * .45));
}
.hero-emblem .emblem { transform: rotate(calc(var(--p) * -40deg)); }

.wordmark {
  position: absolute;
  inset: auto 0 0;
  text-align: center;
  transform-origin: 50% 100%;
  transform: translateY(calc(var(--p) * -46svh)) scale(calc(1 - var(--p) * .8));
  opacity: clamp(0, calc(1.6 - var(--p) * 1.8), 1);
}
.wordmark-in {
  display: block;
  font: 400 11.6vw/.8 var(--display);
  letter-spacing: -.02em;
  white-space: nowrap;
  margin-bottom: -.12em;
}
.js .wordmark .ch { transform: translateY(110%); transition: transform 1.1s var(--expo); transition-delay: calc(.55s + var(--c) * 35ms); }
.js .ready .wordmark .ch { transform: none; }

/* ---------- Contents (scroll-scrubbed letters) ---------- */
.toc { position: relative; height: 150vh; }
.toc-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.toc-line {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 22vh;
  background: var(--line);
  transform-origin: top;
  transform: scaleY(clamp(0, calc(var(--p) * 6), 1));
}
.toc-ring {
  position: relative;
  width: min(62vh, 520px, 86vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.toc-ring svg.ring-text {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(calc(-20deg + var(--p) * 120deg)) scale(calc(.88 + clamp(0, calc(var(--p) * 8), 1) * .12));
  opacity: clamp(.15, calc(var(--p) * 10), 1);
}
.ring-text text { fill: currentColor; font: 400 30px var(--display); letter-spacing: .12em; text-transform: uppercase; }
.toc-emblem {
  width: 34%;
  color: var(--dark);
  transform: scale(clamp(.2, calc(var(--p) * 9), 1)) rotate(calc(var(--p) * 90deg));
}
.toc-dot {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--dark);
  left: calc(50% - 5px);
  transform: scale(clamp(0, calc((var(--p) - .08) * 9), 1));
}
.toc-dot.top { top: -24px; }
.toc-dot.bottom { bottom: -24px; }
.toc-list {
  position: absolute;
  inset: auto 0 9vh;
  display: flex;
  justify-content: center;
  gap: clamp(20px, 5vw, 80px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.toc-list a {
  display: block;
  font: 400 clamp(44px, 7vw, 104px)/.9 var(--display);
  text-transform: uppercase;
  text-decoration: none;
}
.toc-list .ch {
  --k: clamp(0, calc((var(--p) - var(--s) - var(--c) * .02) * 11), 1);
  opacity: var(--k);
  transform: translateY(calc((1 - var(--k)) * .5em)) rotate(calc((1 - var(--k)) * 8deg));
}
.toc-list a:hover .ch { color: var(--on-dark); transition: color .3s var(--out); transition-delay: calc(var(--c) * 30ms); }

/* ---------- Chapter cover: full photo that shrinks into an arch ---------- */
.cover { position: relative; height: 190vh; }
.cover-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.cover {
  --a: clamp(0, calc((var(--p) - .28) / .5), 1);
  --e: calc(var(--a) * var(--a) * (3 - 2 * var(--a)));
  --side: 40vw;
}
.cover-media { position: absolute; inset: 0; overflow: hidden; }
.cover-arch .cover-media {
  clip-path: inset(calc(var(--e) * 18svh) calc(var(--e) * var(--side)) calc(var(--e) * 30svh) round calc(var(--e) * 22vw) calc(var(--e) * 22vw) 0 0);
}
.cover-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(calc(1.18 - var(--e) * .18));
}
.cover-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .05), rgb(0 0 0 / .35)); opacity: calc(1 - var(--e)); }
.cover-title {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: #fff;
  font: 400 clamp(88px, 17vw, 280px)/.85 var(--display);
  text-transform: uppercase;
  text-align: center;
  pointer-events: none;
  opacity: clamp(0, calc(1 - var(--e) * 1.6), 1);
  transform: scale(calc(1 - var(--e) * .3));
}
.cover-rim {
  position: absolute;
  top: calc(18svh - 14px);
  bottom: calc(30svh - 14px);
  left: calc(var(--side) - 14px);
  right: calc(var(--side) - 14px);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: calc(22vw + 14px) calc(22vw + 14px) 0 0;
  opacity: clamp(0, calc((var(--a) - .85) * 7), 1);
}
.cover-drop {
  position: absolute;
  left: 50%;
  top: 77svh;
  bottom: 0;
  width: 1px;
  background: var(--line);
  transform-origin: top;
  transform: scaleY(clamp(0, calc((var(--p) - .8) * 5), 1));
}
.cover-drop::after {
  content: "";
  position: absolute;
  left: -4px;
  bottom: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line);
}
.cover-caption {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(30svh - 46px);
  text-align: center;
  opacity: clamp(0, calc((var(--a) - .8) * 5), 1);
  transform: translateY(calc((1 - clamp(0, calc((var(--a) - .8) * 5), 1)) * 16px));
}

/* Second style: arched top edge flattens, photo zooms, ends as a capsule */
.cover-wave .cover-media {
  --w2: clamp(0, var(--w), 1);
  border-top-left-radius: 50% calc((1 - var(--w2)) * 26svh);
  border-top-right-radius: 50% calc((1 - var(--w2)) * 26svh);
  clip-path: inset(calc(var(--e) * 11svh) calc(var(--e) * 27vw) calc(var(--e) * 11svh) round calc(var(--e) * 5vw));
}
.cover-wave .cover-media img { transform: scale(calc(1 + var(--p) * .25)); }
.cover-wave .cover-title { transform: translateY(calc(var(--p) * -12vh)) scale(calc(1 - var(--e) * .2)); }
.cover-wave .cover-rim {
  top: calc(11svh - 14px); bottom: calc(11svh - 14px);
  left: calc(27vw - 14px); right: calc(27vw - 14px);
  border-bottom: 1px solid var(--line);
  border-radius: calc(5vw + 14px);
}
.cover-wave .cover-drop { top: 88svh; }

/* ---------- Framed box (big flashing letter + short text) ---------- */
.box { position: relative; padding: 0 var(--gutter) 14vh; }
.box-lead {
  width: 1px; height: 12vh; margin: 0 auto;
  background: var(--line);
  transform-origin: top;
}
.js .box-lead { transform: scaleY(0); transition: transform 1s var(--inout); }
.js .in > .box-lead, .js .box.in .box-lead { transform: none; }
.frame {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 78svh;
}
.fr { position: absolute; background: var(--line); }
.fr-t, .fr-b { left: 0; right: 0; height: 1px; }
.fr-t { top: 0; } .fr-b { bottom: 0; }
.fr-l, .fr-r, .fr-m { top: 0; bottom: 0; width: 1px; }
.fr-l { left: 0; } .fr-r { right: 0; } .fr-m { left: 50%; }
.fr-dot { width: 11px; height: 11px; border-radius: 50%; left: calc(50% - 5px); }
.fr-dot.t { top: -5px; } .fr-dot.b { bottom: -5px; }
.fr-c { width: 14px; height: 14px; background: none; border: 1px solid var(--line); }
.fr-c.tl { top: -7px; left: -7px; } .fr-c.tr { top: -7px; right: -7px; }
.fr-c.bl { bottom: -7px; left: -7px; } .fr-c.br { bottom: -7px; right: -7px; }
.js .fr-t, .js .fr-b { transform: scaleX(0); transition: transform 1.2s var(--inout) .15s; }
.js .fr-l, .js .fr-r { transform: scaleY(0); transition: transform 1.2s var(--inout) .35s; }
.js .fr-l { transform-origin: top; } .js .fr-r { transform-origin: top; }
.js .fr-m { transform: scaleY(0); transform-origin: top; transition: transform 1.4s var(--inout) .1s; }
.js .fr-dot, .js .fr-c { transform: scale(0); transition: transform .7s var(--expo) 1.1s; }
.js .fr-dot.t { transition-delay: 0s; }
.js .in .fr { transform: none; }

.frame-left {
  position: relative;
  display: grid;
  place-items: center;
  padding: 6vh 4vw;
  overflow: hidden;
}
.flash {
  position: relative;
  display: grid;
  width: 1em;
  font: 400 clamp(180px, 30vw, 440px)/.8 var(--display);
  color: var(--big);
  text-transform: uppercase;
  text-align: center;
}
.flash span { grid-area: 1 / 1; opacity: 0; }
.flash span.on { opacity: 1; }
.js .flash { transform: scale(.6) rotate(-10deg); opacity: 0; transition: transform 1.2s var(--expo) .3s, opacity .6s var(--out) .3s; }
.js .in .flash { transform: none; opacity: 1; }

.sticker {
  position: absolute;
  width: clamp(110px, 12vw, 170px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 6px solid var(--on-dark);
  box-shadow: 0 10px 30px rgb(0 0 0 / .25);
  right: 8%;
  bottom: 10%;
  transform: translateY(calc((.5 - var(--p)) * 160px)) rotate(calc(-30deg + var(--p) * 55deg));
}
.sticker img { width: 100%; height: 100%; object-fit: cover; }

.frame-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding: 8vh clamp(24px, 5vw, 90px);
}
.frame-right h2 {
  margin: 0;
  font: 400 clamp(40px, 4.2vw, 60px)/1 var(--display);
}
.frame-right p { margin: 0; max-width: 30em; font-size: 18px; }
.frame-right .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* ---------- Marquee ---------- */
.marquee-sec { position: relative; padding-block: 10vh 16vh; overflow: hidden; }
.mq-row {
  white-space: nowrap;
  transform: rotate(calc(var(--r0) + var(--p) * var(--dr)));
  margin-block: .4vw;
}
.mq-track { display: inline-block; will-change: transform; }
.mq-track span {
  font: 400 8.4vw/1.15 var(--display);
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--big);
  padding-right: .45em;
  transition: color .4s var(--out);
}
.mq-track span.fill, .mq-track span:hover { color: var(--big); }

/* ---------- Menu with tabs ---------- */
.menu-sec { padding: 14vh var(--gutter); }
.menu-head { text-align: center; margin-bottom: 7vh; }
.menu-head h2 { margin: 12px 0 0; font: 400 clamp(64px, 10vw, 150px)/.85 var(--display); text-transform: uppercase; }
.tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  max-width: 1320px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-bottom: 0;
}
.tab-ind {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: calc(100% / var(--n));
  background: var(--mid);
  transform: translateX(calc(var(--t, 0) * 100%));
  transition: transform .7s var(--expo);
}
.tab {
  position: relative;
  height: 56px;
  border: 0;
  background: none;
  cursor: pointer;
  font: 600 12px/1 var(--label);
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .55;
  transition: opacity .4s var(--out);
}
.tab + .tab { border-left: 1px solid var(--line); }
.tab[aria-selected="true"], .tab:hover { opacity: 1; }
.menu-frame { min-height: 74svh; }
.menu-frame .frame-left { padding: 7vh 3vw; }
.menu-photo {
  width: min(78%, 420px);
  aspect-ratio: 4 / 5;
  border-radius: 24px;
  overflow: hidden;
  transform: translateY(calc((.5 - var(--p)) * 120px)) rotate(calc(-9deg + var(--p) * 12deg));
  box-shadow: 0 30px 60px rgb(0 0 0 / .18);
}
.menu-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.2 - var(--p) * .2)); }
.panel { display: flex; flex-direction: column; justify-content: center; padding: 7vh clamp(24px, 5vw, 90px); }
.panel[hidden] { display: none; }
.panel ul { list-style: none; margin: 0; padding: 0; }
.panel li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  padding-block: 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 30%, transparent);
}
.panel li b { font: 400 30px/1.1 var(--display); }
.panel li span { grid-column: 1; font-size: 15px; opacity: .75; }
.panel li i { grid-row: 1; grid-column: 2; font: 600 13px/2.4 var(--label); font-style: normal; letter-spacing: .08em; opacity: .7; }
.js .panel.play li { animation: rise .8s var(--expo) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } }

/* ---------- Capsule photo row ---------- */
.pills { position: relative; padding-block: 6vh 12vh; overflow: hidden; }
.pills-track {
  display: flex;
  justify-content: center;
  gap: 2vw;
  transform: translateX(calc((.5 - var(--p)) * 34vw));
}
.pill {
  flex: 0 0 auto;
  width: clamp(150px, 19vw, 300px);
  aspect-ratio: 3 / 5;
  border-radius: 999px;
  overflow: hidden;
  transform: translateY(calc(var(--o) * (var(--p) - .5) * 160px)) rotate(calc(var(--o) * (var(--p) - .5) * 10deg));
}
.pill img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.2s var(--expo); }
.pill:hover img { transform: scale(1.18); }
.pill.center { width: clamp(180px, 24vw, 380px); outline: 1px solid var(--line); outline-offset: 12px; }
.pills-drop { width: 1px; height: 10vh; margin: 6vh auto 0; background: var(--line); transform-origin: top; transform: scaleY(clamp(0, calc((var(--p) - .45) * 4), 1)); }

/* ---------- Footer ---------- */
.foot-arc {
  height: 34vh;
  background: var(--deepest);
  --w2: clamp(0, var(--w), 1);
  border-top-left-radius: 50% calc((1 - var(--w2)) * 34vh);
  border-top-right-radius: 50% calc((1 - var(--w2)) * 34vh);
  margin-top: -1px;
}
.foot { padding: 0 var(--gutter) 40px; margin-top: -1px; }
.seam-dome + .foot .sheet { margin-top: 0; }
.hours {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  border: 1px solid var(--line);
  padding: 90px clamp(20px, 5vw, 80px) 70px;
  text-align: center;
}
.hours-tag {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 16px 28px;
  background: var(--deepest);
  border: 1px solid var(--line);
  border-radius: 999px;
  white-space: nowrap;
}
.hours-emblem { width: 110px; margin: 0 auto 50px; color: var(--mid); }
.hours-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
.hours-grid .hl { position: absolute; left: 0; right: 0; height: 1px; background: var(--line); }
.hours-grid .hl.t { top: 0; } .hours-grid .hl.b { bottom: 0; }
.hours-grid .vl { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line); }
.hours-grid .dot { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--mid); }
.hours-grid .dot.a { top: -4px; left: -4px; } .hours-grid .dot.b { top: -4px; right: -4px; }
.hours-grid .dot.c { bottom: -4px; left: -4px; } .hours-grid .dot.d { bottom: -4px; right: -4px; }
.js .hours-grid .hl { transform: scaleX(0); transition: transform 1.1s var(--inout); }
.js .hours-grid .vl { transform: scaleY(0); transform-origin: top; transition: transform 1.1s var(--inout) .5s; }
.js .hours-grid .dot { transform: scale(0); transition: transform .6s var(--expo) 1s; }
.js .hours-grid.in .hl, .js .hours-grid.in .vl, .js .hours-grid.in .dot { transform: none; }
.hours-col { padding: 48px 16px; }
.hours-col .label { opacity: .7; }
.hours-col strong { display: block; margin-top: 16px; font: 400 clamp(38px, 5vw, 76px)/1 var(--display); font-weight: 400; }
.address { margin: 70px 0 0; }
.address h3 { margin: 0; font: 400 clamp(64px, 11vw, 170px)/.85 var(--display); }
.address p { margin: 22px 0 0; }
.foot-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1320px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-top: 0;
}
.foot-links a { display: block; text-align: center; padding: 22px 8px; }
.foot-links a + a { border-left: 1px solid var(--line); }
.foot-links a::after { left: 30%; right: 30%; bottom: 16px; }

.sister {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3vw;
  padding: 12vh 0 6vh;
  text-decoration: none;
}
.sister-name { font: 400 clamp(52px, 9vw, 140px)/.9 var(--display); text-transform: uppercase; }
.sister-name .ch { transition: transform .7s var(--expo); transition-delay: calc(var(--c) * 25ms); }
.sister:hover .sister-name .ch { transform: translateY(-.12em); }
/* flex: none, or the long shop name squeezes the logo down to nothing on a phone */
.sister .emblem-wrap { flex: none; width: clamp(70px, 8vw, 120px); color: var(--mid); transition: transform 1.2s var(--expo); }
.sister:hover .emblem-wrap { transform: rotate(180deg); }
.copy { text-align: center; opacity: .5; font-size: 13px; margin: 0; }

/* ---------- Small screens ---------- */
@media (max-width: 860px) {
  .nav { grid-template-columns: auto 1fr auto; }
  /* No room for the section links on a phone. Booking is the one thing people come to do,
     so the nav button becomes "Book a table"; the other shop stays linked in the footer. */
  .nav-links { display: none; }
  .nav .btn.shop-switch { display: none; }
  .nav .btn.nav-book { display: inline-flex; }
  .nav-mark { font-size: 21px; }
  .hero-arc { width: 150px; }
  .hero-top .label { font-size: 11px; }
  .frame { grid-template-columns: 1fr; min-height: 0; }
  .fr-m { display: none; }
  .frame-left { min-height: 50svh; }
  .frame-right { padding-top: 0; }
  .cover { --side: 22vw; }
  .cover-wave .cover-media { clip-path: inset(calc(var(--e) * 12svh) calc(var(--e) * 10vw) calc(var(--e) * 12svh) round calc(var(--e) * 8vw)); }
  .cover-wave .cover-rim { left: calc(10vw - 14px); right: calc(10vw - 14px); top: calc(12svh - 14px); bottom: calc(12svh - 14px); border-radius: calc(8vw + 14px); }
  .toc-list { flex-direction: column; align-items: center; gap: 4px; inset: auto 0 6vh; }
  .toc-ring { width: min(48vh, 80vw); margin-bottom: 20vh; }
  .hours-grid { grid-template-columns: 1fr; }
  .hours-grid .vl { display: none; }
  .tabs .tab { font-size: 10px; letter-spacing: .06em; }
  .pill { width: 42vw; } .pill.center { width: 52vw; }
  .mq-track span { font-size: 15vw; }
}

/* ---------- Reduced motion: static but complete ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
}
.reduce [data-scrub] { --p: 0 !important; --w: 1 !important; }
.reduce .cover { height: auto; }
.reduce .cover-sticky { position: relative; height: 90svh; }
.reduce .toc { height: auto; }
.reduce .toc-sticky { position: relative; }
.reduce .toc [data-scrub], .reduce .toc { --p: .9 !important; }
.reduce .toc-list .ch { opacity: 1; transform: none; }
.reduce .cover-drop, .reduce .cover-caption { display: none; }

/* ============================================================
   Menu line language (from the printed menu):
   one heavy stroke, quarter circles filled with parallel stripes,
   semicircle bites where lines meet.
   ============================================================ */
:root { --stroke: clamp(2px, .22vw, 4px); }

/* ============================================================
   Transitions styled the way the reference does it: each one is made of a
   brand shape, moves several layers at once, and hands a line on to the next part.
   ============================================================ */
.seam { position: relative; margin-block: -1px; background: var(--from); pointer-events: none; }
.nav-zone { position: absolute; left: 0; right: 0; pointer-events: none; }

/* 1. Coffee hero: the orange plate rises through the logo. Where the plate has passed
      the logo is dark; it settles exactly where the contents ring picks it up. */
.hero-end { position: absolute; top: 0; left: 0; width: 1px; height: 100svh; pointer-events: none; }
.hero-pin {
  --q: clamp(0, calc((var(--p) - .1) / .7), 1);
  --m: clamp(0, calc((var(--p) - .1) / .75), 1);
  --me: calc(var(--m) * var(--m) * (3 - 2 * var(--m)));
  --hs: .7;
  --hy: 50%;
  height: 190vh;
  min-height: 0;
  overflow: visible;
  z-index: 2;
  pointer-events: none;
}
.hero-pin .hero-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.js:not(.reduce) .hero-pin .hero-sticky { opacity: clamp(0, calc((1 - var(--p)) * 1000), 1); }
.hero-pin .hero-emblem {
  top: calc(42% + (var(--hy) - 42%) * var(--me));
  transform: translate(-50%, -50%) scale(calc(1 - (1 - var(--hs)) * var(--me)));
}
.hero-pin .hero-emblem .emblem { transform: rotate(calc(var(--me) * 180deg)); }
.hero-plate {
  position: absolute;
  inset: 0;
  background: var(--mid);
  clip-path: inset(calc((1 - var(--q)) * 100%) 0 0 0);
}
.hero-plate .hero-emblem { color: var(--dark); }
.js:not(.reduce) .hero-pin + .toc { margin-top: -100vh; z-index: 1; }
.js:not(.reduce) .hero-pin + .toc .toc-emblem { transform: rotate(calc(var(--p) * 180deg)); }
.toc-thread {
  position: absolute;
  left: calc(50% - var(--stroke) / 2);
  bottom: 0;
  width: var(--stroke);
  height: 7vh;
  background: var(--line);
  transform-origin: 50% 100%;
  transform: scaleY(clamp(0, calc((var(--p) - .75) * 5), 1));
}

/* 2. Photo cover (coffee Sip, falafel Come in): the photo rises inside the logo circle (cross + striped quarter),
      hanging from the contents line; later its corner fills with the menu's stripes. */
.cover-arch {
  --domeR: calc(var(--in, 1) * 100svh + max(0px, (var(--in, 1) - .8) * 250vw));
  --rimR: min(22vw + 14px, 100vw - 2 * var(--side) + 28px);
  background: var(--cover-from, var(--mid));
}
.cover-arch .cover-sticky {
  background: var(--dark);
  clip-path: circle(var(--domeR) at 50% 100%);
}
.cover-thread {
  position: absolute;
  z-index: 1;
  left: calc(50% - var(--stroke) / 2);
  top: 0;
  width: var(--stroke);
  height: max(0px, calc(100svh - var(--domeR)));
  background: var(--cover-thread, var(--dark));
}
.cover-window {
  --wk: clamp(0, calc((1 - var(--in, 1)) / .35), 1);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--wk);
}
.cover-window .w-ring {
  position: absolute;
  left: 50%;
  top: 100%;
  width: calc(2 * max(0px, var(--domeR) - var(--stroke) * 5));
  aspect-ratio: 1;
  border: calc(var(--stroke) * 1.5) solid var(--mid);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.cover-window .w-bars {
  position: absolute;
  inset: 0 50% 0 0;
  background: repeating-linear-gradient(90deg, var(--mid) 0 calc(var(--stroke) * 2.5), transparent 0 calc(var(--stroke) * 8));
  clip-path: circle(max(0px, var(--domeR) - var(--stroke) * 11) at 100% 100%);
}
.cover-window .w-line {
  position: absolute;
  left: calc(50% - var(--stroke) * .75);
  bottom: 0;
  width: calc(var(--stroke) * 1.5);
  height: min(100%, var(--domeR));
  background: var(--mid);
}
.cover-bars {
  --s: clamp(0, calc((var(--a) - .8) * 5), 1);
  position: absolute;
  top: calc(18svh - 14px);
  bottom: calc(30svh - 14px);
  left: calc(var(--side) - 14px);
  right: calc(var(--side) - 14px);
  border: 0 solid var(--line);
  border-top-width: var(--stroke);
  border-right-width: var(--stroke);
  background: repeating-linear-gradient(to bottom, var(--line) 0 var(--stroke), transparent 0 calc(var(--stroke) * 5));
  -webkit-mask-image: radial-gradient(circle var(--rimR) at calc(100% - var(--rimR)) var(--rimR), transparent var(--rimR), #000 var(--rimR)), linear-gradient(#000, #000);
  -webkit-mask-size: 100% 100%, var(--rimR) var(--rimR);
  -webkit-mask-position: 0 0, 100% 0;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(circle var(--rimR) at calc(100% - var(--rimR)) var(--rimR), transparent var(--rimR), #000 var(--rimR)), linear-gradient(#000, #000);
  mask-size: 100% 100%, var(--rimR) var(--rimR);
  mask-position: 0 0, 100% 0;
  mask-repeat: no-repeat;
  mask-composite: intersect;
  clip-path: inset(0 0 0 calc((1 - var(--s)) * 100%));
}

/* 2b. "Come in": the same exit as the footer's. The photo stays whole, a centre line drops,
       and a dome rises from the bottom around the line, opening into the next part. */
.cover-exit {
  --a: 0;
  --t: clamp(0, calc((var(--p) - .06) / .14), 1);
  --dg: clamp(0, calc((var(--p) - .16) / .5), 1);
  --dr: calc(var(--dg) * max(95vw, 105vh) * 1.15);
  height: 220vh;
}
.cover-arch.cover-exit .cover-media { clip-path: none; }
.cover-exit .cover-window .w-bars { inset: 0 0 0 50%; clip-path: circle(max(0px, var(--domeR) - var(--stroke) * 11) at 0 100%); }
.cover-exit .cover-media img { object-position: 50% 35%; transform: scale(calc(1.12 - var(--p) * .12)); }
/* title sits low on the left, over the doorway and legs, never across the face */
.cover-exit .cover-title {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  align-items: flex-end;
  column-gap: .22em;
  padding: 0 var(--gutter) 7vh;
  text-align: left;
  font-size: clamp(64px, 12vw, 200px);
  /* no fade: the rising dome cuts the letters away along with the photo */
  opacity: 1;
  transform: none;
}
.cover-exit .cover-rim, .cover-exit .cover-bars, .cover-exit .cover-caption, .cover-exit .cover-drop { display: none; }
.exit-thread {
  position: absolute;
  left: calc(50% - var(--stroke) / 2);
  top: 0;
  width: var(--stroke);
  height: 100%;
  background: var(--mid);
  transform-origin: 50% 0;
  transform: scaleY(var(--t));
}
.exit-thread.in { top: auto; bottom: 0; height: min(100%, var(--dr)); background: var(--dark); transform: none; }
.exit-dome { display: none; }
/* the dome is a hole cut in this layer: the gallery below shows through it, text included */
/* dark ground only until the dome starts to open; after that the sticky layer covers the screen */
.cover-arch.cover-exit { position: relative; z-index: 1; background: color-mix(in srgb, var(--dark) calc((1 - min(1, var(--dg) * 1000)) * 100%), transparent); }
.cover-exit .cover-sticky {
  /* Safari paints a zero-radius gradient as fully transparent and would hide the whole layer, so the circle never drops below 1px */
  -webkit-mask-image: radial-gradient(circle calc(var(--dr) + 1px) at 50% 100%, transparent var(--dr), #000 calc(var(--dr) + 1px));
  mask-image: radial-gradient(circle calc(var(--dr) + 1px) at 50% 100%, transparent var(--dr), #000 calc(var(--dr) + 1px));
}
.reduce .exit-thread, .reduce .exit-dome { display: none; }

/* 4. Footers: a line drops, a dome of the footer colour rises under it, and the line carries on through the dome into the hours frame. */
.seam-dome {
  --h: 14vh;
  /* grows wide enough to swallow both cards' corners, over a long enough stretch of scrolling
     that the arc is actually seen rising instead of appearing all at once */
  --g: clamp(0, calc((var(--p) - .1) / .55), 1);
  /* wide enough to cover the screen on a tall, narrow window too: on a phone 95vw is far
     smaller than the screen is high, so the dome never reached the top and left the
     "right now" cell of the footer covered by the light layer */
  --r: calc(var(--g) * max(95vw, 105vh));
  --t: clamp(0, calc((var(--p) - .04) / .2), 1);
  /* how far below this block's bottom edge the bottom of the screen is: the dome's centre sits there */
  --off: max(0px, calc(var(--p) * (100vh + var(--h)) - var(--h)));
  height: var(--h);
  /* No overflow here: pairing overflow-x: clip with overflow-y: visible makes Safari clip the
     dome to this thin block, which chopped the arc off with a straight edge. The clip-path
     below already trims the sides and lets the dome rise past the top. */
  z-index: 3;
  /* Safari gives the cards above their own compositing layer (their photos animate on hover)
     and drew them over this block whatever its z-index; asking for a layer here too puts the
     dome back on top, where the z-index already said it belongs. */
  transform: translateZ(0);
  clip-path: inset(-300vh 0 -100vh 0);
}
/* The hours footer starts right under this thin block, so its dark top would slide into view as a flat band
   before the dome reaches it. Keep that strip in the light colour until the dome's circle passes over it. */
.seam-dome::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 100vh;
  /* Painted as a gradient with a hard stop rather than a mask: Safari does not always repaint
     a mask whose size comes from a custom property, which left the footer's dark band with a
     straight edge and no dome at all. */
  background: radial-gradient(circle calc(var(--r) + 1px) at 50% var(--off), transparent var(--r), var(--from) calc(var(--r) + 1px));
  pointer-events: none;
}
.seam-dome .thread { z-index: 1; }
/* the dome rises over the section above instead of being cut flat at this block's top edge */
.seam-dome .dome { position: absolute; inset: -200vh 0 0; background: var(--to); clip-path: circle(var(--r) at 50% calc(100% + var(--off))); }
.seam-dome .thread {
  position: absolute;
  left: calc(50% - var(--stroke) / 2);
  top: 0;
  width: var(--stroke);
  height: clamp(0px, calc(var(--h) - (var(--r) - var(--off))), var(--h));
  background: var(--thread);
  transform-origin: 50% 0;
  transform: scaleY(var(--t));
}
.seam-dome .thread.in { top: auto; bottom: 0; height: clamp(0px, calc(var(--r) - var(--off)), var(--h)); background: var(--thread-in); transform: none; }

/* Heavy stroke everywhere a line is drawn */
.fr-t, .fr-b { height: var(--stroke); }
.fr-l, .fr-r, .fr-m { width: var(--stroke); }
.fr-m { margin-left: calc(var(--stroke) / -2); }
.fr-c { display: none; }
.fr.fr-dot {
  width: 76px;
  height: 38px;
  left: calc(50% - 38px);
  background: none;
  border: var(--stroke) solid var(--line);
}
.fr.fr-dot.t { top: 0; border-top: 0; border-radius: 0 0 76px 76px; transform-origin: 50% 0; }
.fr.fr-dot.b { top: auto; bottom: 0; border-bottom: 0; border-radius: 76px 76px 0 0; transform-origin: 50% 100%; }
.box-lead, .toc-line, .cover-drop { width: var(--stroke); }
.cover-drop::after { left: calc(var(--stroke) / 2 - 5px); width: 10px; height: 10px; }
.tabs { border-width: var(--stroke); }
.tab + .tab { border-left-width: var(--stroke); }
.hours, .hours-tag, .foot-links { border-width: var(--stroke); }
.foot-links a + a { border-left-width: var(--stroke); }
.hours-grid .hl { height: var(--stroke); }
.hours-grid .vl { width: var(--stroke); }

/* Striped quarter in the corner of each text box, like the menu's cells */
.box .frame-left::before,
.box .frame-left::after {
  content: "";
  position: absolute;
  left: var(--stroke);
  bottom: var(--stroke);
  width: min(34%, 230px);
  aspect-ratio: 1;
  pointer-events: none;
}
.box .frame-left::before {
  background: repeating-linear-gradient(to top, var(--line) 0 var(--stroke), transparent 0 calc(var(--stroke) * 6));
  clip-path: circle(0% at 0 100%);
  transition: clip-path 1.3s var(--inout) .5s;
}
.box .frame-left::after {
  border: var(--stroke) solid var(--line);
  border-left: 0;
  border-bottom: 0;
  border-top-right-radius: 100%;
  transform: scale(0);
  transform-origin: 0 100%;
  transition: transform 1.1s var(--expo) .35s;
}
.box.in .frame-left::before { clip-path: circle(100% at 0 100%); }
.box.in .frame-left::after { transform: none; }
.box .frame-left > * { position: relative; }
.box .frame-left > .sticker { position: absolute; }

/* Coffee cover: the photo closes into a menu cell (one big quarter arc), not an arch */
.cover-arch .cover-media {
  clip-path: inset(calc(var(--e) * 18svh) calc(var(--e) * var(--side)) calc(var(--e) * 30svh) round 0 calc(var(--e) * 22vw) 0 0);
}
.cover-arch .cover-rim {
  border: var(--stroke) solid var(--line);
  border-radius: 0 calc(22vw + 14px) 0 0;
}

@media (max-width: 860px) {
  .seam-dome { --h: 12vh; }
  .hero-pin { --hs: .59; --hy: calc(50% - 10vh); }
  .toc-thread { display: none; }
  .fr.fr-dot { width: 52px; height: 26px; left: calc(50% - 26px); }
  .fr.fr-dot.t { border-radius: 0 0 52px 52px; }
  .fr.fr-dot.b { border-radius: 52px 52px 0 0; }
  .box .frame-left::before, .box .frame-left::after { width: 28%; }
}

.reduce [data-enter] { --in: 1; }
.reduce .hero-pin { height: 100svh; }
.reduce .hero-pin .hero-sticky { position: relative; }
.reduce .hero-plate, .reduce .cover-window, .reduce .cover-thread, .reduce .toc-thread { display: none; }
.reduce .seam-dome { height: 0; overflow: hidden; }
.reduce .seam-dome::after { display: none; }
.reduce .box .frame-left::before { clip-path: circle(100% at 0 100%); }
.reduce .box .frame-left::after { transform: none; }

/* ============================================================
   Footer as the shop's own printed menu: cells in one heavy line, the right
   column split at different heights from the left, hours listed like prices,
   a live "open right now", and the menu's striped arc, band and semicircle.
   ============================================================ */
.sheet {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "hours now"
    "hours links"
    "band  links"
    "addr  links"
    "addr  corner";
  grid-template-rows: minmax(210px, auto) auto 46px auto minmax(190px, auto);
  gap: var(--stroke);
  padding: var(--stroke);
  background: var(--mid);
}
.sheet .cell { position: relative; min-width: 0; padding: clamp(24px, 3vw, 48px); background: var(--deepest); }
.sheet .cell > * { margin-top: 0; }
.c-hours { grid-area: hours; display: flex; flex-direction: column; justify-content: space-between; }
.c-now { grid-area: now; overflow: hidden; }
.c-links { grid-area: links; }
.c-band { grid-area: band; z-index: 1; min-height: 46px; padding: 0 !important; }
.c-addr { grid-area: addr; }
.c-corner { grid-area: corner; min-height: 190px; container-type: size; overflow: hidden; display: flex; align-items: flex-end; }

.sheet-title {
  margin: 0;
  font: 600 clamp(26px, 2.8vw, 42px)/1 var(--label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mid);
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* hours as a price list */
.hours-table { width: 100%; margin-top: clamp(22px, 3vw, 40px); border-collapse: collapse; }
.hours-table thead th { padding: 0 0 12px 20px; font: 500 14px/1 var(--body); text-align: right; opacity: .7; }
.hours-table thead th:first-child { padding-left: 0; }
.hours-table tbody th { padding: 14px 16px 14px 0; font: 400 clamp(24px, 2.3vw, 34px)/1.15 var(--display); text-align: left; }
.hours-table td {
  padding: 14px 0 14px 20px;
  font: 500 clamp(22px, 2vw, 30px)/1.15 var(--label);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* open right now, next to the menu's striped arc */
.now-text { position: relative; z-index: 1; max-width: 52%; }
.now-text .label { margin: 0; color: var(--mid); }
.now-state { margin: 16px 0 0; font: 400 clamp(48px, 5.4vw, 88px)/.95 var(--display); }
.now-note { margin: 12px 0 0; font-size: 18px; }
.now-arc { position: absolute; top: 0; right: 0; bottom: 0; aspect-ratio: 1; max-width: 60%; }
.now-arc i {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom, var(--mid) 0 var(--stroke), transparent 0 calc(var(--stroke) * 7));
  clip-path: circle(100% at 0 0);
  -webkit-mask-image: linear-gradient(90deg, transparent 50%, #000 50%);
  mask-image: linear-gradient(90deg, transparent 50%, #000 50%);
}
.now-arc::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 0 solid var(--mid);
  border-right-width: var(--stroke);
  border-bottom-width: var(--stroke);
  border-bottom-right-radius: 100%;
}
.now-arc b { position: absolute; left: calc(50% - var(--stroke) / 2); top: 0; width: var(--stroke); height: 86.6%; background: var(--mid); }

/* the band with a semicircle bite, hanging into the cell below */
.c-band {
  background: linear-gradient(var(--mid), var(--mid)) 0 50% / 100% var(--stroke) no-repeat var(--deepest);
}
.c-band .bite { display: none;
  position: absolute;
  right: 0;
  top: calc(var(--stroke) * -1);
  width: 22%;
  aspect-ratio: 2 / 1;
  border: var(--stroke) solid var(--mid);
  border-top: 0;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: var(--deepest);
}

.addr-city { margin: 14px 0 0; font: 400 clamp(64px, 8vw, 128px)/.9 var(--display); }
.addr-line { margin: 18px 0 28px; max-width: 26em; }
.c-addr .btn { --btn-flip: var(--deepest); }

.c-links ul { list-style: none; margin: clamp(22px, 3vw, 40px) 0 0; padding: 0; }
.c-links li + li { border-top: 1px solid color-mix(in srgb, var(--mid) 35%, transparent); }
.c-links a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 18px 0;
  text-decoration: none;
  font: 400 clamp(24px, 2.3vw, 34px)/1.15 var(--display);
  transition: color .3s var(--out);
}
.c-links a span { font: 600 12px/1 var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--mid); }
.c-links a:hover { color: var(--mid); }

/* striped corner with a clear quarter for the small print */
.c-corner { --cr: min(70cqw, calc(100cqh + 44px)); }
.c-corner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom, var(--mid) 0 var(--stroke), transparent 0 calc(var(--stroke) * 7));
  -webkit-mask-image: radial-gradient(circle var(--cr) at 0 100%, transparent var(--cr), #000 var(--cr));
  mask-image: radial-gradient(circle var(--cr) at 0 100%, transparent var(--cr), #000 var(--cr));
}
.c-corner::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--cr);
  height: var(--cr);
  border: 0 solid var(--mid);
  border-top-width: var(--stroke);
  border-right-width: var(--stroke);
  border-top-right-radius: 100%;
}
.c-corner { padding: 22px !important; }
.c-corner .copy { position: relative; max-width: 8.5em; text-align: left; line-height: 1.45; }

/* the sheet prints downward from the line, then the stripes and arcs are drawn */
.js .sheet { clip-path: inset(0 0 100% 0); transition: clip-path 1.6s var(--inout); }
.js .sheet.in { clip-path: inset(-40px); }
.js .sheet .cell > * { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--out), transform 1s var(--expo); transition-delay: .7s; }
.js .sheet.in .cell > * { opacity: 1; transform: none; }
.js .sheet .now-arc i { clip-path: circle(0% at 0 0); transition: clip-path 1.4s var(--inout) 1s; }
.js .sheet.in .now-arc i { clip-path: circle(100% at 0 0); }
.js .sheet .c-band { background-size: 0% var(--stroke); transition: background-size 1.1s var(--inout) .9s; }
.js .sheet.in .c-band { background-size: 100% var(--stroke); }
.js .sheet .c-corner::before { clip-path: inset(0 100% 0 0); transition: clip-path 1.3s var(--inout) 1.1s; }
.js .sheet.in .c-corner::before { clip-path: inset(0); }

@media (max-width: 860px) {
  .sheet {
    grid-template-columns: 1fr;
    grid-template-areas: "now" "hours" "band" "addr" "links" "corner";
    grid-template-rows: auto;
  }
  .c-now { min-height: 230px; }
  .now-text { max-width: 58%; }
  .c-corner { min-height: 170px; }
}

/* ============================================================
   Falafel gallery after "Come in": photos from the shop hung off the centre
   line on short rules, cut into the menu's shapes, drifting at two speeds.
   ============================================================ */
/* the gallery sits under the last screen of "Come in" and shows through the opening dome */
.gallery { --cg: clamp(64px, 12vw, 200px); position: relative; z-index: 0; margin-top: -220vh; padding: 132vh var(--gutter) 18vh; overflow: hidden; }

.reduce .gallery { margin-top: 0; padding-top: 12vh; }
.reduce .gallery.t-light { background: var(--light); }
.reduce .cover-exit { height: auto; }
.gallery::before {
  content: "";
  position: absolute;
  left: calc(50% - var(--stroke) / 2);
  top: 0;
  bottom: 0;
  width: var(--stroke);
  background: var(--dark);
}
.g-title {
  position: relative;
  width: max-content;
  margin: 0 auto 8vh;
  padding: 14px 10px;
  background: var(--light);
  color: var(--dark);
}
.g-grid { position: relative; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--cg); }
.g-col { display: flex; flex-direction: column; gap: 20vh; }
.g-col.left { align-items: flex-end; }
.g-col.right { align-items: flex-start; padding-top: 28vh; }
.g-item { --sp: 1; position: relative; isolation: isolate; width: min(100%, 440px); margin: 0; }
.g-col.right .g-item { --sp: -.6; }
.g-photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  outline: var(--stroke) solid var(--dark);
  outline-offset: 12px;
  opacity: clamp(0, calc(var(--p) * 6), 1);
  transform: translateY(calc((.5 - var(--p)) * 90px * var(--sp)));
}
.g-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.14 - var(--p) * .14)); }
.g-photo.cell-tr { border-radius: 0 100% 0 0 / 0 75% 0 0; }
.g-photo.cell-tl { border-radius: 100% 0 0 0 / 75% 0 0 0; }
.g-photo.round { aspect-ratio: 1; border-radius: 50%; }
.g-item figcaption { margin-top: 28px; color: var(--ink); }
.g-rule {
  position: absolute;
  top: 26%;
  width: calc(var(--cg) / 2);
  height: var(--stroke);
  background: var(--dark);
  transform: scaleX(clamp(0, calc((var(--p) - .12) * 5), 1));
}
/* rules run from the centre line all the way to the photo's outline, at a height where the shape actually reaches its edge */
.g-col.left .g-rule { left: calc(100% + 12px + var(--stroke)); width: calc(var(--cg) / 2 - 12px - var(--stroke)); transform-origin: 100% 50%; }
.g-col.right .g-rule { right: calc(100% + 12px + var(--stroke)); width: calc(var(--cg) / 2 - 12px - var(--stroke)); transform-origin: 0 50%; }
.g-item:has(.cell-tr) .g-rule { top: 84%; }
.g-item:has(.round) .g-rule { top: 45%; }
.g-item.bars::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -14%;
  bottom: -10%;
  width: 62%;
  aspect-ratio: 1;
  background: repeating-linear-gradient(to bottom, var(--dark) 0 var(--stroke), transparent 0 calc(var(--stroke) * 6));
  clip-path: circle(100% at 100% 100%);
  transform: translateY(calc((.5 - var(--p)) * -60px));
}
@media (max-width: 860px) {
  .gallery::before, .g-rule { display: none; }
  .g-title { margin-bottom: 6vh; }
  .g-grid { grid-template-columns: 1fr; }
  .g-col { gap: 9vh; }
  .g-col.left { align-items: flex-start; }
  .g-col.right { align-items: flex-end; padding-top: 9vh; }
  .g-item { width: 80%; }
}
.reduce .g-photo, .reduce .g-photo img, .reduce .g-item.bars::before { opacity: 1; transform: none; }
.reduce .g-rule { transform: none; }

/* ============================================================
   Moving between the two shops.
   Browsers with cross-page view transitions (Chrome, Edge, Safari 18.2+) animate every
   navigation natively, including the browser's own back button: the next shop opens as a
   circle from where you clicked (from the centre on back), the page you leave sinks and darkens.
   Other browsers get the same circle as an overlay from script.js.
   ============================================================ */
@view-transition { navigation: auto; }
:root { --vx: 50%; --vy: 50%; }
::view-transition-group(root) { animation-duration: 1.05s; }
::view-transition-old(root) { animation: mg-sink 1.05s cubic-bezier(.76, 0, .24, 1) both; }
::view-transition-new(root) { animation: mg-open 1.05s cubic-bezier(.76, 0, .24, 1) both; }
@keyframes mg-open { from { clip-path: circle(0% at var(--vx) var(--vy)); } to { clip-path: circle(150% at var(--vx) var(--vy)); } }
@keyframes mg-sink { to { transform: scale(.92); filter: brightness(.45); } }

.page-veil {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  background: var(--veil, var(--dark));
  clip-path: circle(0% at var(--vx) var(--vy));
  transition: clip-path .95s cubic-bezier(.76, 0, .24, 1);
}
.page-veil.full { clip-path: circle(150% at var(--vx) var(--vy)); }
.page-veil.still { transition: none; }
.page-veil.leave { transition-duration: .52s; }
/* painted before any script runs, so the new page never flashes before its opening circle */
html.arriving::after { content: ""; position: fixed; inset: 0; z-index: 199; background: inherit; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .page-veil { display: none; }
}


/* Opening a page: a hole grows from the centre of the veil, so the hero's own opening
   (which also starts in the centre) is the first thing you see instead of the last */
@property --hole { syntax: "<length>"; inherits: false; initial-value: 0px; }
.page-veil.opening {
  --hole: 0px;
  --hx: 50%;
  --hy: 50%;
  -webkit-mask-image: radial-gradient(circle at var(--hx) var(--hy), transparent var(--hole), #000 calc(var(--hole) + 1px));
  mask-image: radial-gradient(circle at var(--hx) var(--hy), transparent var(--hole), #000 calc(var(--hole) + 1px));
  transition: --hole 1s cubic-bezier(.76, 0, .24, 1);
}
.page-veil.opening.open { --hole: 150vmax; }
/* into the hero: ease out and settle on the hero's logo circle (same centre and radius as its closed state) */
.page-veil.to-logo.opening { --hy: 48%; transition: --hole .8s cubic-bezier(.4, 0, .2, 1); }
.page-veil.to-logo.opening.open { --hole: min(30vh, 34vw); }