@font-face { font-family: "Anybody"; src: url("fonts/Anybody.woff2") format("woff2"); font-weight: 100 900; font-stretch: 50% 150%; font-display: swap; }
@font-face { font-family: "Rethink Sans"; src: url("fonts/RethinkSans.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Shantell Sans"; src: url("fonts/ShantellSans.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }

:root {
  --enamel: #f3f5f2;
  --enamel-2: #e5e9e6;
  --enamel-3: #d3d9d6;
  --navy: #1c2d5c;
  --navy-deep: #121d40;
  --navy-lift: #2b4180;
  --ink: #141c33;
  --ink-2: #485069;
  --on-navy: #eef1f7;
  --on-navy-2: #bcc6df;
  --steel: #17181b;
  --crema: #a8632c;
  --crema-deep: #6b3916;
  --milk: #f7f1e8;
  --wood: #d4cfc9;
  --gutter: clamp(1rem, 4vw, 3.5rem);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --sign: "Anybody", "Rethink Sans", system-ui, sans-serif;
  --chip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 44'%3E%3Cpath d='M3 6c6-4 15-5 22-2 5 2 9-1 15 1 8 3 15 9 17 17 1 7-4 9-9 13-6 5-15 8-23 6-7-1-9-7-15-10C5 28 1 23 1 17 0 12 0 8 3 6z' fill='%23c9cdd0'/%3E%3Cpath d='M8 9c5-2 11-3 17-1 5 1 8-1 13 1 7 2 12 7 14 13 1 5-3 7-7 10-5 4-12 6-18 5-6-1-8-5-13-8-4-3-8-6-8-11 0-4 0-7 2-9z' fill='%2317181b'/%3E%3Cpath d='M14 13c3-1 7-1 10 0' stroke='%2346484d' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--enamel); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-color: var(--navy) var(--enamel-2); }
body { margin: 0; color: var(--ink); background: var(--enamel); font: 400 1.0625rem/1.55 "Rethink Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; font-variant-numeric: tabular-nums; }
::selection { background: var(--navy); color: var(--on-navy); }
:focus-visible { outline: 2.5px solid var(--navy); outline-offset: 3px; border-radius: 6px; }
img, canvas, svg, picture { display: block; max-width: 100%; }
h1, h2, h3, p, dl, dd, ul, ol, figure, fieldset, table { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1.5px; }
input, button { font: inherit; color: inherit; }
h1, h2 { font: 800 clamp(2.3rem, 4.6vw, 4.4rem)/1 var(--sign); font-stretch: 122%; letter-spacing: -.035em; text-wrap: balance; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; top: .5rem; left: .5rem; z-index: 70; padding: .55rem .95rem; border-radius: 999px; background: var(--navy); color: var(--on-navy); transform: translateY(-200%); }
.skip:focus { transform: none; }

/* ── enamel: a plate has a keyline set in from its edge, four screw holes and, sometimes, a chip ── */
.plate { position: relative; border-radius: 22px; background: var(--enamel); color: var(--ink); box-shadow: inset 0 1px 0 rgb(255 255 255 / .7), inset 0 -2px 0 rgb(20 28 51 / .08), 0 2px 3px rgb(20 28 51 / .18), 0 22px 40px -18px rgb(20 28 51 / .45); }
.plate::before { content: ""; position: absolute; inset: 12px; border: 2px solid currentColor; border-radius: 12px; opacity: .9; pointer-events: none; }
.plate::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(circle at 26px 26px, var(--steel) 0 3px, rgb(255 255 255 / .55) 3.6px 4.4px, transparent 5px),
    radial-gradient(circle at calc(100% - 26px) 26px, var(--steel) 0 3px, rgb(255 255 255 / .55) 3.6px 4.4px, transparent 5px),
    radial-gradient(circle at 26px calc(100% - 26px), var(--steel) 0 3px, rgb(255 255 255 / .55) 3.6px 4.4px, transparent 5px),
    radial-gradient(circle at calc(100% - 26px) calc(100% - 26px), var(--steel) 0 3px, rgb(255 255 255 / .55) 3.6px 4.4px, transparent 5px),
    linear-gradient(160deg, rgb(255 255 255 / .16), transparent 38%, transparent 70%, rgb(0 0 0 / .05)); }
.plate--navy { background: var(--navy); color: var(--on-navy); box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), inset 0 -2px 0 rgb(0 0 0 / .25), 0 2px 3px rgb(18 29 64 / .3), 0 26px 44px -18px rgb(18 29 64 / .6); }
.plate__chip { position: absolute; right: -2px; top: 58px; width: 34px; height: 25px; background: var(--chip) center / contain no-repeat; transform: rotate(-80deg); pointer-events: none; z-index: 1; }
.plate__chip--b { right: auto; top: auto; left: 64px; bottom: -3px; transform: rotate(180deg); width: 30px; height: 22px; }

/* ── buttons: navy enamel pills with a white keyline set in ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.9rem; padding: .7rem 1.35rem; border: 0; border-radius: 999px; background: var(--navy); color: var(--on-navy); font: 600 1rem/1.15 "Rethink Sans", sans-serif; text-decoration: none; cursor: pointer;
  box-shadow: inset 0 0 0 3px var(--navy), inset 0 0 0 4.5px rgb(255 255 255 / .85), 0 1px 2px rgb(20 28 51 / .3), 0 8px 16px -8px rgb(20 28 51 / .5); transition: background-color 160ms, transform 160ms var(--ease); }
.btn:hover { background: var(--navy-lift); box-shadow: inset 0 0 0 3px var(--navy-lift), inset 0 0 0 4.5px rgb(255 255 255 / .9), 0 1px 2px rgb(20 28 51 / .3), 0 10px 18px -8px rgb(20 28 51 / .55); }
.btn:active { transform: translateY(1px); }
.btn--line { background: rgb(243 245 242 / .82); color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy), 0 1px 2px rgb(20 28 51 / .2); }
.btn--line:hover { background: var(--enamel); box-shadow: inset 0 0 0 2px var(--navy-lift), 0 6px 14px -8px rgb(20 28 51 / .5); }
.btn--light { background: var(--enamel); color: var(--navy); box-shadow: inset 0 0 0 3px var(--enamel), inset 0 0 0 4.5px var(--navy), 0 1px 2px rgb(0 0 0 / .3), 0 8px 16px -8px rgb(0 0 0 / .5); }
.btn--light:hover { background: #fff; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4.5px var(--navy), 0 1px 2px rgb(0 0 0 / .3), 0 10px 18px -8px rgb(0 0 0 / .55); }
.btn--ghost { background: transparent; color: var(--on-navy); box-shadow: inset 0 0 0 2px rgb(238 241 247 / .55); }
.btn--ghost:hover { background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 2px var(--on-navy); }

/* ── nav: one white enamel strip with the name on its own navy sign ── */
.nav { position: fixed; z-index: 50; top: .75rem; left: var(--gutter); right: var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .4rem .45rem .4rem .45rem; border-radius: 999px; background: rgb(243 245 242 / .94); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgb(20 28 51 / .16), 0 12px 26px -14px rgb(20 28 51 / .4); }
.nav__mark { display: inline-flex; align-items: center; padding: .45rem 1.1rem .5rem; border-radius: 999px; background: var(--navy); color: var(--on-navy); text-decoration: none; box-shadow: inset 0 0 0 3px var(--navy), inset 0 0 0 4.5px rgb(255 255 255 / .85); }
.nav__mark span { font: 800 1.05rem/1 var(--sign); font-stretch: 140%; letter-spacing: .06em; text-transform: uppercase; }
.nav nav { display: flex; align-items: center; gap: clamp(.6rem, 2vw, 1.6rem); font-weight: 500; font-size: .9688rem; }
.nav nav a { text-decoration: none; padding: .3rem .1rem; }
.nav nav a:not(.nav__cta):hover { text-decoration: underline; }
.nav nav .nav__cta { padding: .55rem 1.05rem; border-radius: 999px; background: var(--enamel); color: var(--navy); font-weight: 600; box-shadow: inset 0 0 0 2px var(--navy); }
.nav nav .nav__cta:hover { background: var(--navy); color: var(--on-navy); }

/* ── hero: the table, the cup, the jug and the pour ── */
.hero { position: relative; height: 560vh; background: var(--wood); }
.hero__stage { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; background: var(--wood); }
.hero__view { position: absolute; inset: 0; overflow: hidden; }
.hero__poster { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 74% 54%; max-width: none; }
.hero__poster.is-placed { width: auto; height: auto; object-fit: fill; transform-origin: 0 0; }
.hero__gl { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 900ms var(--ease); }
.hero__gl.is-on { opacity: 1; }
.jug { position: absolute; left: 0; top: 0; width: 900px; visibility: hidden; pointer-events: none; transform-origin: 0 0; will-change: transform; }
.jug img { position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none; }
.jug__shadow { filter: brightness(0) blur(16px); opacity: .3; will-change: transform; }
.hero__copy { position: absolute; left: var(--gutter); top: 50%; width: min(42vw, 36rem); transform: translateY(calc(-50% + var(--cy, 0px))); opacity: var(--ca, 1); }
.hero__copy h1 { font-size: clamp(2.5rem, 4.7vw, 4.6rem); }
.hero__copy > p:first-of-type { margin-top: 1.2rem; max-width: 34ch; font-size: 1.1875rem; font-weight: 500; line-height: 1.5; }
.hero__acts { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.7rem; }
.hero__open { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.4rem; font-size: .9375rem; font-weight: 600; color: var(--ink); }
.hero__open::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--dot, #2f7a4f); box-shadow: 0 0 0 3px rgb(47 122 79 / .18); }
.hero__open.is-closed { --dot: #9a3b22; }
.beats { position: absolute; left: var(--gutter); top: 50%; width: min(34vw, 27rem); transform: translateY(-50%); }
.beats li { position: absolute; left: 0; top: 0; transform: translateY(calc(-50% + var(--by, 0px))); opacity: var(--ba, 0); visibility: var(--bv, hidden); padding: 1.35rem 1.6rem 1.45rem; border-radius: 18px; background: var(--navy); color: var(--on-navy); font: 700 clamp(1.25rem, 1.9vw, 1.7rem)/1.18 var(--sign); font-stretch: 112%; letter-spacing: -.01em; box-shadow: inset 0 0 0 7px var(--navy), inset 0 0 0 9px rgb(255 255 255 / .85), 0 18px 34px -16px rgb(18 29 64 / .6); }

/* ── menu board ── */
.menu { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; padding: clamp(5rem, 10vw, 9rem) var(--gutter); }
.menu__head > p { margin-top: 1.1rem; max-width: 40ch; color: var(--ink-2); font-size: 1.125rem; }
.seg { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-top: 1.8rem; padding: .3rem; border-radius: 999px; background: var(--enamel-2); box-shadow: inset 0 1px 2px rgb(20 28 51 / .14); }
.seg legend { float: left; margin: 0 .5rem 0 .75rem; font-weight: 600; font-size: .9375rem; }
.seg label { position: relative; }
.seg input, .chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg span { display: block; padding: .5rem 1.05rem; border-radius: 999px; font-weight: 600; cursor: pointer; transition: background-color 160ms, color 160ms; }
.seg span:hover { background: rgb(28 45 92 / .08); }
.seg input:checked + span { background: var(--navy); color: var(--on-navy); box-shadow: inset 0 0 0 2.5px var(--navy), inset 0 0 0 3.8px rgb(255 255 255 / .8); }
.seg input:focus-visible + span, .chips input:focus-visible + span { outline: 2.5px solid currentColor; outline-offset: 2px; }
.seg--dark { background: rgb(0 0 0 / .22); box-shadow: inset 0 1px 3px rgb(0 0 0 / .3); }
.seg--dark span { color: var(--on-navy); }
.seg--dark span:hover { background: rgb(255 255 255 / .08); }
.seg--dark input:checked + span { background: var(--enamel); color: var(--navy); box-shadow: inset 0 0 0 2.5px var(--enamel), inset 0 0 0 3.8px var(--navy); }

.board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem clamp(1.5rem, 4vw, 3.5rem); padding: clamp(2.6rem, 4.5vw, 3.6rem) clamp(2.2rem, 4.5vw, 3.8rem) clamp(2.2rem, 3.5vw, 3rem); font-family: "Shantell Sans", "Rethink Sans", cursive; }
.board h3 { margin: 0 0 .7rem; font-size: clamp(1.45rem, 2.2vw, 1.9rem); font-weight: 700; line-height: 1.1; letter-spacing: .01em; }
.board h3::after { content: ""; display: block; width: 3.6em; height: .5rem; margin-top: .1rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M2 7c18-4 34 2 52-1s38-4 64 0' fill='none' stroke='%23eef1f7' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") left / 100% 100% no-repeat; opacity: .8; }
.board ul + h3 { margin-top: 1.6rem; }
.board li { display: flex; align-items: baseline; gap: .5rem; padding: .22rem 0; font-size: clamp(1.05rem, 1.4vw, 1.2rem); font-weight: 450; }
.board li::after { content: ""; order: 1; flex: 1; border-bottom: 2px dotted rgb(238 241 247 / .4); transform: translateY(-.25em); }
.board li b { order: 2; font-weight: 700; font-variant-numeric: tabular-nums; transition: color 300ms; }
.board li b.is-bumped { color: #f2c89b; }
.board__note { grid-column: 1 / -1; margin-top: .4rem; font: 500 .875rem/1.4 "Rethink Sans", sans-serif; color: var(--on-navy-2); }

/* ── beans: three enamel hang tags ── */
.beans { padding: clamp(4rem, 8vw, 7rem) 0 clamp(5rem, 9vw, 8rem); background: var(--enamel-2); }
.beans__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem clamp(2rem, 6vw, 6rem); align-items: end; padding: 0 var(--gutter); }
.beans__intro p { max-width: 46ch; color: var(--ink-2); font-size: 1.125rem; }
.beans__photo { margin: clamp(2.2rem, 5vw, 3.5rem) 0 0; }
.beans__photo img { width: 100%; height: clamp(15rem, 34vw, 30rem); object-fit: cover; object-position: 50% 45%; }
.tags { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); margin-top: calc(-1 * clamp(5rem, 10vw, 8rem)); padding: 0 var(--gutter); }
.tag { display: flex; flex-direction: column; padding: 3.1rem 2rem 1.9rem; }
.tag::before { inset: 10px; }
.tag__hole { position: absolute; left: 50%; top: 1.15rem; width: 1.3rem; height: 1.3rem; margin-left: -.65rem; border-radius: 50%; background: var(--enamel-2); box-shadow: inset 0 2px 3px rgb(20 28 51 / .35), 0 0 0 3px var(--navy); }
.tag:nth-child(2) { margin-top: 1.4rem; }
.tag:nth-child(3) { margin-top: .5rem; }
.tag h3 { font: 800 clamp(1.8rem, 2.6vw, 2.35rem)/1 var(--sign); font-stretch: 130%; letter-spacing: -.02em; color: var(--navy); }
.tag__who { margin-top: .45rem; font-weight: 600; }
.tag__notes { margin-top: .9rem; font: 600 1.25rem/1.3 "Shantell Sans", cursive; color: var(--crema-deep); }
.tag dl { display: grid; gap: 0; margin-top: 1rem; font-size: .9375rem; }
.tag dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .38rem 0; border-top: 1.5px solid var(--enamel-3); }
.tag dt { color: var(--ink-2); }
.tag dd { font-weight: 600; text-align: right; }
.roast { display: flex; gap: .3rem; align-items: center; }
.roast i { width: .7rem; height: .7rem; border-radius: 50%; background: var(--enamel-3); }
.roast i.on { background: var(--crema-deep); }
.tag__foot { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: auto; padding-top: 1.3rem; }
.tag__price { font: 700 1.05rem/1.2 "Rethink Sans", sans-serif; }
.tag__price small { display: block; font-weight: 500; font-size: .8125rem; color: var(--ink-2); }
.tag .btn { min-height: 2.6rem; padding: .55rem 1.05rem; font-size: .9375rem; }
.tag__hopper { position: absolute; right: 1.4rem; top: 1.25rem; padding: .25rem .65rem; border-radius: 999px; background: var(--crema-deep); color: var(--milk); font-size: .75rem; font-weight: 700; letter-spacing: .02em; }
.beans__note { margin-top: 1.6rem; padding: 0 var(--gutter); font-size: .875rem; color: var(--ink-2); }

/* ── brew: navy drench, a station-clock dial ── */
.brew { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; padding: clamp(5rem, 10vw, 8.5rem) var(--gutter); background: var(--navy); color: var(--on-navy); }
.brew__copy > p { margin-top: 1.1rem; max-width: 42ch; color: var(--on-navy-2); font-size: 1.125rem; }
.dose { display: block; margin-top: 1.8rem; max-width: 28rem; font-weight: 600; }
.dose span { display: flex; justify-content: space-between; }
.dose b { font: 800 1.2rem/1 var(--sign); font-stretch: 120%; }
input[type="range"] { display: block; width: 100%; height: 2.4rem; margin: .2rem 0 0; background: none; appearance: none; -webkit-appearance: none; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: rgb(255 255 255 / .2); box-shadow: inset 0 1px 2px rgb(0 0 0 / .35); }
input[type="range"]::-moz-range-track { height: 8px; border-radius: 999px; background: rgb(255 255 255 / .2); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%; background: var(--enamel); box-shadow: inset 0 0 0 3px var(--enamel), inset 0 0 0 5px var(--navy), 0 2px 5px rgb(0 0 0 / .4); }
input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border: 0; border-radius: 50%; background: var(--enamel); box-shadow: inset 0 0 0 3px var(--enamel), inset 0 0 0 5px var(--navy), 0 2px 5px rgb(0 0 0 / .4); }
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2.5px solid currentColor; outline-offset: 3px; }
.recipe { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0 1.6rem; margin-top: 1.6rem; max-width: 34rem; }
.recipe div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-top: 1.5px solid rgb(238 241 247 / .2); }
.recipe div:nth-child(3) { grid-column: 1 / -1; }
.recipe dt { color: var(--on-navy-2); }
.recipe dd { font-weight: 700; text-align: right; }

.dial-wrap { display: grid; justify-items: center; gap: 1.4rem; }
.dial { position: relative; width: min(100%, 30rem); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #fff, var(--enamel) 46%, var(--enamel-2) 100%); color: var(--ink); box-shadow: inset 0 0 0 16px var(--navy-deep), inset 0 0 0 19px rgb(255 255 255 / .75), inset 0 6px 20px rgb(18 29 64 / .2), 0 28px 50px -20px rgb(0 0 0 / .65), 0 0 0 2px rgb(255 255 255 / .1); touch-action: none; }
.dial svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dial__tick { stroke: var(--ink); stroke-width: 1.4; }
.dial__tick--big { stroke-width: 3.4; }
.dial__num { fill: var(--ink); font: 700 15px var(--sign); font-stretch: 115%; text-anchor: middle; dominant-baseline: middle; }
.dial__dose { fill: none; stroke: var(--navy); stroke-width: 9; stroke-linecap: round; }
.dial__arc { fill: none; stroke-width: 7; }
.dial__hand { stroke: var(--crema); stroke-width: 3.5; stroke-linecap: round; transform-origin: 200px 200px; transition: transform 120ms linear; }
.dial__hub { fill: var(--crema-deep); }
.dial__knob { position: absolute; left: 50%; top: 50%; width: 2.9rem; height: 2.9rem; margin: -1.45rem 0 0 -1.45rem; border: 0; border-radius: 50%; background: var(--navy); cursor: grab; box-shadow: inset 0 0 0 4px var(--navy), inset 0 0 0 6px rgb(255 255 255 / .9), 0 3px 8px rgb(0 0 0 / .4); touch-action: none; }
.dial__knob:active { cursor: grabbing; }
.dial__face { position: absolute; left: 50%; top: 50%; width: 52%; transform: translate(-50%, -38%); text-align: center; pointer-events: none; }
.dial__face b { display: block; font: 800 clamp(2.4rem, 5vw, 3.6rem)/1 var(--sign); font-stretch: 125%; letter-spacing: -.03em; color: var(--navy); }
.dial__face span { display: block; margin-top: .4rem; font-size: .9375rem; color: var(--ink-2); font-weight: 500; }
.steps { width: min(100%, 30rem); display: grid; gap: .35rem; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 3.2rem 1fr; gap: .8rem; padding: .5rem .8rem; border-radius: 12px; color: var(--on-navy-2); transition: background-color 240ms, color 240ms; }
.steps li b { font-weight: 700; color: var(--on-navy); }
.steps li.is-now { background: var(--enamel); color: var(--ink); }
.steps li.is-now b { color: var(--crema-deep); }
.steps li.is-done { opacity: .55; }
.timer { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; width: min(100%, 30rem); }
.timer__read { margin-left: auto; font: 800 1.6rem/1 var(--sign); font-stretch: 120%; }

/* ── visit ── */
.visit { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); background: var(--enamel); }
.visit__photo img { width: 100%; height: 100%; min-height: 32rem; object-fit: cover; object-position: 35% 50%; }
.visit__copy { align-self: center; padding: clamp(3rem, 6vw, 6rem) var(--gutter); }
.visit__copy h2 { font-size: clamp(2.1rem, 3.6vw, 3.5rem); }
.visit__copy > p:not(.status) { margin-top: 1.1rem; max-width: 42ch; color: var(--ink-2); font-size: 1.0625rem; }
.status { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.6rem; padding: .45rem 1rem .45rem .8rem; border-radius: 999px; background: #dfeee4; color: #1d4d33; font-weight: 700; font-size: .9375rem; }
.status::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: currentColor; }
.status.is-closed { background: #f3e1d8; color: #7b2e17; }
.hours { width: 100%; max-width: 26rem; margin-top: 1.2rem; border-collapse: collapse; }
.hours th, .hours td { padding: .48rem .7rem; text-align: left; font-weight: 500; border-top: 1.5px solid var(--enamel-3); }
.hours td { text-align: right; font-variant-numeric: tabular-nums; }
.hours tr.is-today th, .hours tr.is-today td { background: var(--navy); color: var(--on-navy); font-weight: 700; border-color: var(--navy); }
.hours tr.is-today th { border-radius: 999px 0 0 999px; }
.hours tr.is-today td { border-radius: 0 999px 999px 0; }

/* ── your usual: a navy ticket ── */
.usual { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: clamp(2rem, 6vw, 6rem); align-items: center; padding: clamp(5rem, 10vw, 8rem) var(--gutter) clamp(6rem, 11vw, 9rem); background: var(--enamel-2); }
.usual__copy > p { margin-top: 1.1rem; max-width: 40ch; color: var(--ink-2); font-size: 1.125rem; }
.ticket { display: grid; gap: 1.1rem; padding: 2.4rem 2.2rem 2rem; }
.ticket__top { display: flex; align-items: center; gap: 1.2rem; }
.mini { position: relative; flex: 0 0 auto; width: 7.4rem; aspect-ratio: 1; border-radius: 50%; background: var(--enamel); box-shadow: inset 0 0 0 7px var(--navy-deep), inset 0 0 0 9px rgb(255 255 255 / .8), 0 10px 18px -8px rgb(0 0 0 / .55); }
.mini canvas { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); border-radius: 50%; background: #3b1c0a; }
.ticket__ready span { display: block; font-size: .9375rem; color: var(--on-navy-2); font-weight: 500; }
.ticket__ready b { display: block; font: 800 clamp(2.2rem, 3.4vw, 2.9rem)/1 var(--sign); font-stretch: 125%; letter-spacing: -.03em; }
.ticket__ready small { display: block; margin-top: .3rem; font-size: .9375rem; color: var(--on-navy-2); }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chips legend { width: 100%; margin-bottom: .45rem; font-size: .875rem; font-weight: 600; color: var(--on-navy-2); }
.chips label { position: relative; }
.chips span { display: block; padding: .42rem .9rem; border-radius: 999px; font-size: .9375rem; font-weight: 600; cursor: pointer; box-shadow: inset 0 0 0 1.5px rgb(238 241 247 / .45); transition: background-color 160ms, color 160ms; }
.chips span:hover { box-shadow: inset 0 0 0 1.5px var(--on-navy); }
.chips input:checked + span { background: var(--enamel); color: var(--navy); box-shadow: inset 0 0 0 2.5px var(--enamel), inset 0 0 0 3.8px var(--navy); }
.chips input:disabled + span { opacity: .4; cursor: not-allowed; }
.away { display: block; font-size: .9375rem; font-weight: 500; }
.away b { font-weight: 700; }
.field { display: grid; gap: .3rem; font-size: .875rem; font-weight: 600; color: var(--on-navy-2); }
.field input { padding: .7rem .95rem; border: 0; border-radius: 12px; background: var(--enamel); color: var(--ink); font-size: 1rem; caret-color: var(--crema); box-shadow: inset 0 2px 3px rgb(20 28 51 / .25); }
.field input::placeholder { color: var(--ink-2); }
.field input[aria-invalid="true"] { box-shadow: inset 0 0 0 2.5px #e08a6a; }
.ticket .btn { width: 100%; }
.ticket__note { font-size: .875rem; color: var(--on-navy-2); }
.ticket.is-held .ticket__ready b { color: #f2c89b; }

.foot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem 3rem; align-items: start; padding: 3rem var(--gutter) 5.5rem; background: var(--navy-deep); color: var(--on-navy-2); font-size: .875rem; }
.foot__mark { font: 800 1.6rem/1 var(--sign); font-stretch: 140%; letter-spacing: .05em; text-transform: uppercase; color: var(--on-navy); }
.foot p:last-child { max-width: 70ch; }

.credit { position: fixed; right: 1rem; bottom: 1rem; z-index: 55; display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .95rem; border-radius: 999px; background: var(--navy-deep); color: var(--on-navy); font-size: .8125rem; font-weight: 500; text-decoration: none; box-shadow: inset 0 0 0 2px var(--navy-deep), inset 0 0 0 3.2px rgb(255 255 255 / .55), 0 6px 16px -6px rgb(0 0 0 / .5); transition: background-color 160ms; }
.credit svg { width: .85rem; height: .85rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.credit:hover { background: var(--navy-lift); }

/* copy enters once per section */
.js-motion [data-rise] { opacity: 0; transform: translateY(30px); transition: opacity 950ms var(--ease), transform 950ms var(--ease); }
.js-motion [data-rise].is-in { opacity: 1; transform: none; }

@media (max-width: 1100px) and (min-width: 761px) {
  .hero__copy { width: 46vw; }
  .tags { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tag:nth-child(n) { margin-top: 0; }
  .brew, .menu { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 761px) and (max-aspect-ratio: 5/4) {
  .hero__copy { top: 7rem; width: min(72vw, 40rem); transform: translateY(var(--cy, 0px)); }
  .beats { top: 9rem; transform: none; width: min(60vw, 27rem); }
  .beats li { transform: translateY(var(--by, 0px)); }
}
@media (max-width: 760px) {
  body { font-size: 1rem; }
  .nav { top: .5rem; padding: .3rem; }
  .nav nav a:not(.nav__cta) { display: none; }
  .nav__mark { padding: .45rem .95rem; }
  .hero { height: 500vh; }
  .hero__view { bottom: 42%; }
  .hero__view::after { content: ""; position: absolute; inset: auto 0 0; height: 2.2rem; background: linear-gradient(rgb(243 245 242 / 0), var(--enamel)); pointer-events: none; }
  .hero__stage { background: var(--enamel); }
  .hero__copy { left: var(--gutter); right: var(--gutter); top: calc(58% + .6rem); width: auto; transform: translateY(var(--cy, 0px)); }
  .hero__copy h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .hero__copy > p:first-of-type { margin-top: .6rem; font-size: 1rem; }
  .hero__acts { margin-top: 1rem; gap: .5rem; }
  .hero__acts .btn { min-height: 2.7rem; padding: .6rem 1.05rem; font-size: .9375rem; }
  .hero__open { display: none; }
  .beats { top: calc(58% + 1.4rem); left: var(--gutter); right: var(--gutter); width: auto; transform: none; }
  .beats li { top: 0; right: 0; transform: translateY(var(--by, 0px)); font-size: 1.2rem; padding: 1.1rem 1.25rem 1.2rem; }
  .menu, .brew, .usual, .visit { grid-template-columns: minmax(0, 1fr); }
  .board { grid-template-columns: minmax(0, 1fr); padding: 2.4rem 1.7rem 2rem; }
  .beans__intro { grid-template-columns: minmax(0, 1fr); }
  .tags { grid-template-columns: minmax(0, 1fr); margin-top: -3rem; }
  .tag:nth-child(n) { margin-top: 0; }
  .tag { padding: 3rem 1.6rem 1.7rem; }
  .visit__photo img { min-height: 15rem; height: 62vw; }
  .ticket { padding: 2.2rem 1.5rem 1.8rem; }
  .mini { width: 6rem; }
  .foot { grid-template-columns: minmax(0, 1fr); padding-bottom: calc(8dvh + 4rem); }
  .credit { left: 1rem; right: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero { height: auto; }
  .hero__stage { position: relative; height: 100vh; height: 100dvh; min-height: 36rem; }
  .beats, .jug { display: none; }
  .hero__gl { transition: none; }
  .js-motion [data-rise] { opacity: 1; transform: none; transition: none; }
  .dial__hand { transition: none; }
}