/* قهوتنا — the home page, after the GetLayers "brewns" layer (a 1440x800 board in rem: 1rem is one board px x 16
   at 1440). Right to left: every board x is an inline-start offset, so the composition is the board mirrored.
   Below 1024 the blocks lay themselves out in flow. Breakpoints: sm 640, md 768, lg 1024, xl 1280, board 1440. */

:root {
  --background: #070707; --foreground: #fff; --accent: #d58c3d;
  --inverse: #f1f1ef; --inverse-back: #e7e5e3; --ink: #070707;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --font-display: 'Noto Kufi Arabic', system-ui, sans-serif;
  --font-mono: 'Space Mono', 'IBM Plex Sans Arabic', ui-monospace, monospace;
  --font-sans: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-script: 'Aref Ruqaa', serif;
  --fs-label: 0.875rem; --fs-base: 1rem; --fs-fine: 0.75rem; --fs-script: 5.625rem; --fs-headline: 4rem; --fs-display: 6.25rem;
  /* Arabic sits taller than capitals: the headline leadings open up from the board's 0.9 */
  --lh-headline: 1.18; --lh-display: 1.3; --lh-copy: 1.6; --lh-flush: 1.1;
  --logo-w: 4.3906rem; --logo-h: 1.375rem;
  --board-h: 50rem;
  --board-drop: max(0px, min(calc(100lvh - var(--board-h)), 6.5rem));
  --still-lift: 0.75rem; --still-scale: 1; --still-max: none;
  --wordmark: url('wordmark-mask.webp'); --swirl: url('swirl-mask.webp');
}
@media (min-width: 1440px) { :root { --still-lift: 0px; } }
@media (min-width: 1024px) and (max-width: 1279.98px) { :root { --still-lift: 0.9rem; --still-scale: 0.92; } }
@media (max-width: 639.98px) { :root { --still-lift: 1.375rem; --still-max: 100%; } }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }
@media (max-width: 1439.98px) { html { font-size: calc(16px - (1440px - 100vw) / 128.57); } }
@media (max-width: 1023.98px) { html { font-size: 16px; } }
@media (max-width: 639.98px) { html { font-size: 4.444444vw; } }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--background); color: var(--foreground); min-height: 100lvh; width: 100%; overflow-x: hidden;
  font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
p, h1, h2, ul, figure, address { margin: 0; padding: 0; }
ul { list-style: none; }
address { font-style: normal; }
a { color: inherit; text-decoration: none; }
img { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.block { display: block; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; inset-inline-start: 1rem; top: -4rem; z-index: 200; background: var(--foreground); color: var(--ink); padding: 0.75rem 1rem; font-family: var(--font-sans); }
.skip:focus { top: 1rem; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.dim { opacity: 0.5; }

/* the small type: a mono for digits and Latin, Plex for the Arabic it does not have */
.eyebrow { font-family: var(--font-mono); font-size: var(--fs-fine); line-height: var(--lh-copy); }
@media (min-width: 640px) { .eyebrow { font-size: var(--fs-label); } }
.sl { font-family: 'Space Mono', monospace; letter-spacing: -0.23em; margin-inline-end: 0.35em; }
.lede { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-base); line-height: var(--lh-copy); text-align: start; }
@media (min-width: 640px) and (max-width: 1023.98px) { .lede { font-size: 1.125rem; } }
.dot { display: inline-block; width: 0.3125rem; height: 0.3125rem; border-radius: 50%; background: var(--accent); flex: none; }
.dot--4 { width: 0.25rem; height: 0.25rem; }

/* ---------------------------------------------------------------- the motion primitives' markup */
.te { display: flex; flex-wrap: wrap; justify-content: flex-start; }
.te--words { column-gap: 0.25em; }
.te--lines { flex-direction: column; }
.te__w, .te__li { display: inline-block; will-change: transform; }
.te__l { display: block; }
/* a clipped line: the clip box runs past the line box so dots and descenders are never cut */
.te__l--clip { overflow: hidden; padding-block: 0.16em 0.12em; margin-block: -0.16em -0.12em; }
.te__m { white-space: pre-wrap; }
.dr { position: relative; display: inline-block; white-space: pre; }
.dr__g { color: transparent; }
.dr__r { position: absolute; inset-inline: 0; top: -0.35em; bottom: -0.35em; display: flex; direction: ltr; }
.dr__x { flex: none; align-self: center; white-space: pre; }
.dr__c { position: relative; clip-path: inset(0); height: 100%; }
.dr__s { display: flex; flex-direction: column; height: 1000%; }
.dr__s > span { display: flex; height: 10%; align-items: center; justify-content: center; }

.ul { display: inline-block; }
.ul__b { position: relative; display: inline-block; }
.ul__c { position: relative; display: block; clip-path: inset(0); }
.ul__t { display: block; }
.ul__d { position: absolute; inset: 0; display: block; transform: translateY(100%); }
.ul__r { position: absolute; inset-inline: 0; bottom: -1px; height: 1px; background: currentColor; transform-origin: right center; transform: scaleX(0); opacity: 0; }

.cta { display: flex; height: 1.1875rem; flex-direction: column; justify-content: space-between; }
@media (max-width: 639.98px) { .cta { width: max-content; } }
.cta__row { display: flex; height: 0.6875rem; align-items: center; gap: 1rem; }
.cta__l { white-space: nowrap; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-label); line-height: var(--lh-flush); }
@media (min-width: 640px) { .cta__l { font-size: var(--fs-base); } }
@media (min-width: 640px) and (max-width: 1023.98px) { .cta__l { font-size: 1.125rem; } }
/* the arrow points up and back along the reading direction */
.cta__ar { position: relative; display: flex; width: 0.5rem; height: 0.5rem; flex: none; align-items: center; justify-content: center; transform: scaleX(-1); }
.cta__a { position: absolute; display: flex; inset: 0; align-items: center; justify-content: center; }
.cta__a + .cta__a { transform: translate3d(-190%, 0, 0); opacity: 0; }
.arw { display: flex; width: 0.5rem; height: 0.5rem; align-items: center; justify-content: center; }
.arw > span { display: flex; transform: rotate(-45deg); }
.arw svg { display: block; width: 0.763356rem; height: 0.828444rem; }
.cta__u { position: relative; display: block; height: 0.1125rem; width: 100%; }
.cta__ub, .cta__uo { position: absolute; inset: 0; display: block; background: currentColor; }
.cta__ub { transform-origin: left center; }
.cta__uo { transform-origin: right center; transform: scaleX(0); }
.hero__cta { width: 9.3125rem; }
.cta--ink { color: var(--ink); width: 10.0625rem; }
.od__cta { width: 10.0625rem; }

.wm { display: block; width: 100%; height: 100%; background: currentColor; -webkit-mask: var(--wordmark) center / 100% 100% no-repeat; mask: var(--wordmark) center / 100% 100% no-repeat;
  transition: background-color 250ms var(--ease); }

/* ---------------------------------------------------------------- the header */
.hd { position: fixed; inset-inline: 1.25rem; top: 1rem; z-index: 50; display: flex; height: var(--logo-h); align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: var(--fs-fine); line-height: var(--lh-copy); color: #fff; transition: color 250ms var(--ease); }
@media (min-width: 640px) { .hd { inset-inline: 2.5rem; top: 1.5rem; } }
@media (min-width: 640px) { .hd { font-size: var(--fs-base); } }
.hd.is-light { color: var(--ink); }
.hd.is-open { color: #fff; }
@media (max-width: 639.98px) { .hd.is-gone:not(.is-open) { visibility: hidden; pointer-events: none; } }
.hd__tg { position: relative; margin: -0.5rem; display: flex; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center; padding: 0.5rem; }
@media (max-width: 1023.98px) { .hd__tg { order: 9; } }
@media (min-width: 640px) and (max-width: 1023.98px) { .hd__tg { width: 2.75rem; height: 2.75rem; } }
@media (min-width: 1024px) { .hd__tg { display: none; } }
.hd__tg span { position: absolute; inset-inline-end: 0.5rem; height: 1px; background: currentColor; transition: all 250ms var(--ease); }
.hd__tg span:first-child { width: 1.5rem; transform: translateY(-0.25rem); }
.hd__tg span:last-child { width: 1rem; transform: translateY(0.25rem); }
@media (min-width: 640px) and (max-width: 1023.98px) {
  .hd__tg span { height: 2px; }
  .hd__tg span:first-child { width: 2rem; transform: translateY(-0.375rem); }
  .hd__tg span:last-child { width: 1.5rem; transform: translateY(0.375rem); }
}
.hd__tg[aria-expanded="true"] span:first-child { width: 1.5rem; transform: rotate(45deg); }
.hd__tg[aria-expanded="true"] span:last-child { width: 1.5rem; transform: rotate(-45deg); }
.hd__nav { display: none; }
@media (min-width: 1024px) { .hd__nav { display: block; } }
.hd__nav ul { display: flex; align-items: center; gap: 3rem; }
.hd__mark { position: absolute; left: 50%; height: 100%; width: var(--logo-w); transform: translateX(-50%); }
@media (max-width: 639.98px) { .hd__mark { position: static; order: -1; transform: none; } }
.hd__order { display: flex; align-items: center; gap: 0.375rem; white-space: nowrap; transition: opacity 150ms var(--ease); }
.hd__order:hover { opacity: 0.6; }
@media (max-width: 639.98px) { .hd__order { display: none; } }
@media (max-width: 1023.98px) { .hd__order { order: -1; } .hd__dot { order: -1; } }
@media (min-width: 640px) and (max-width: 1023.98px) { .hd__dot { width: 0.5rem; height: 0.5rem; } }

.pm { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: var(--background); color: #fff; padding: 6rem 1.25rem 2.5rem; }
.pm[hidden] { display: none; }
@media (min-width: 640px) { .pm { padding: 8rem 2.5rem 3.5rem; } }
@media (min-width: 1024px) { .pm { display: none; } }
.pm__k { color: rgba(255, 255, 255, 0.45); }
.pm__nav { margin-top: 1.75rem; display: flex; flex-direction: column; border-top: 1px solid rgba(255, 255, 255, 0.15); }
.pm__a { display: flex; align-items: baseline; gap: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.15); padding-block: 0.875rem;
  font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: var(--lh-headline); transition: opacity 150ms var(--ease); }
.pm__a:active { opacity: 0.6; }
@media (min-width: 640px) { .pm__nav { margin-top: 2.25rem; } .pm__a { gap: 1.5rem; padding-block: 1.25rem; font-size: 3rem; } }
.pm__n { font-family: var(--font-mono); font-size: var(--fs-fine); line-height: 1; color: rgba(255, 255, 255, 0.35); }
@media (min-width: 640px) { .pm__n { font-size: var(--fs-label); } }
.pm__order { margin-top: auto; display: flex; align-items: center; gap: 0.375rem; padding-top: 2.5rem; font-family: var(--font-mono); font-size: var(--fs-fine); }
@media (min-width: 640px) { .pm__order { font-size: var(--fs-base); } }

/* ---------------------------------------------------------------- the preloader */
.pre { position: fixed; inset: 0; z-index: 100; overflow: hidden; background: var(--background); color: #fff; padding: 1.25rem; clip-path: inset(0% 0 0 0); }
@media (min-width: 640px) { .pre { padding: 2.5rem; } }
.pre__k { color: rgba(255, 255, 255, 0.45); }
.pre__n { margin-top: 0.5rem; font-family: var(--font-display); font-weight: 700; font-size: 5rem; line-height: 1.1; font-variant-numeric: tabular-nums; text-align: start; }
.pre__n { display: flex; }
.pre__c { display: block; height: 1.1em; overflow: hidden; }
.pre__s { display: flex; flex-direction: column; }
.pre__s > span { display: block; height: 1.1em; }
@media (min-width: 640px) { .pre__n { margin-top: 0.75rem; font-size: 8rem; } }
@media (min-width: 1024px) { .pre__n { font-size: 11rem; } }
.pre__wm { position: absolute; bottom: 1.25rem; inset-inline-start: 1.25rem; width: var(--logo-w); height: var(--logo-h); color: #fff; }
@media (max-width: 639.98px) { .pre__wm { height: 1.1rem; width: calc(var(--logo-w) * 1.1 / 1.375); } }
@media (min-width: 640px) { .pre__wm { bottom: 2.5rem; inset-inline-start: 2.5rem; } }
.pre__cup { pointer-events: none; position: absolute; bottom: 1.25rem; inset-inline-end: 1.25rem; height: 34vh; max-height: 30rem; width: auto; }
@media (min-width: 640px) { .pre__cup { bottom: 2.5rem; inset-inline-end: 2.5rem; height: 52vh; } }

/* ---------------------------------------------------------------- Opalesce */
.opal { position: absolute; inset: 0; z-index: 0; background: var(--background); }
.opal__fb { position: absolute; inset: 0; background-image: linear-gradient(240deg, #070707 0%, #110b07 35%, #2c1a11 65%, #6e3e22 100%); }
.opal__c { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity 300ms linear; }
.opal__c.on { opacity: 1; }
.opal canvas { pointer-events: none; display: block; width: 100%; height: 100%; }

/* ---------------------------------------------------------------- 1. the hero */
.hero { position: relative; height: 100lvh; width: 100%; overflow: hidden; background: var(--background); }
.hero__scrim { pointer-events: none; position: absolute; inset: 0; z-index: 1;
  background-image: linear-gradient(to left, rgba(7, 7, 7, 0.75) 0%, rgba(7, 7, 7, 0.35) 35%, transparent 60%); }
.hero__in { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; padding: 4.5rem 1.25rem 1.25rem; }
@media (max-width: 639.98px) { .hero__in { padding-top: 6rem; } }
@media (min-width: 640px) { .hero__in { padding: 8rem 2.5rem 2.5rem; } }
@media (min-width: 640px) and (max-width: 1023.98px) { .hero__in { padding-top: 6rem; } }
@media (min-width: 1024px) { .hero__in { display: block; padding: 0; } }

.hero__copy { order: 1; position: relative; z-index: 2; display: flex; width: 100%; flex-shrink: 0; flex-direction: column; gap: 1rem; color: #fff; }
@media (min-width: 640px) { .hero__copy { width: 42rem; gap: 1.25rem; margin-block: auto; } }
@media (min-width: 640px) and (max-width: 1023.98px) { .hero__copy { gap: 0.6875rem; margin-top: 0; margin-bottom: auto; } }
@media (min-width: 1024px) { .hero__copy { position: absolute; margin: 0; inset-inline-start: 2.5rem; top: calc(50% - 1.75rem); width: 36rem; transform: translateY(-50%); gap: 1.5rem; } }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; }
.hero__hl { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; width: 100%; }
@media (max-width: 639.98px) { .hero__hl { gap: 1.25rem; } }
@media (min-width: 640px) { .hero__hl { gap: 1rem; } }
@media (min-width: 1024px) { .hero__hl { gap: 1.25rem; } }
.hero__h1 { font-family: var(--font-display); font-weight: 700; font-size: 3.25rem; line-height: var(--lh-display); text-align: start; }
@media (min-width: 640px) { .hero__h1 { font-size: 6rem; } }
@media (min-width: 1024px) { .hero__h1 { font-size: var(--fs-display); } }
.hero__h1 .te__l--clip { margin-block: -0.26em -0.22em; }
/* the script word shares the headline's cell and is set on its last line, after «مقاس» */
/* q.js sets --sx/--sy from the headline's last line as it actually wrapped */
.hero__script { grid-area: 1 / 1; align-self: start; margin-inline-start: var(--sx, 0px); margin-top: var(--sy, 0px); width: max-content; white-space: nowrap;
  font-family: var(--font-script); font-size: 3.85rem; line-height: 1; }
@media (min-width: 640px) { .hero__script { font-size: 7rem; } }
@media (min-width: 1024px) { .hero__script { font-size: var(--fs-script); } }
.hero__lede { display: flex; width: 100%; flex-direction: column; gap: 1.5rem; }
@media (max-width: 639.98px) { .hero__lede { width: 17rem; gap: 2.25rem; } }
@media (min-width: 640px) { .hero__lede { width: 20rem; gap: 2rem; } }
@media (min-width: 640px) and (max-width: 1023.98px) { .hero__lede { gap: 2.375rem; } }
@media (min-width: 1024px) { .hero__lede { width: 16.5rem; gap: 2.5rem; } }

.hero__media { pointer-events: none; position: relative; order: 2; margin-inline: -1.25rem; min-height: 0; width: auto; flex: 1; }
@media (max-width: 639.98px) { .hero__media { position: absolute; inset-inline: -5rem; bottom: 0; top: 40%; margin: 0 0 -1.25rem; flex: none; } }
@media (min-width: 640px) and (max-width: 767.98px) { .hero__media { position: absolute; inset-inline: -8rem; top: 42%; bottom: 0; margin: 0 0 -7rem; flex: none; } }
@media (min-width: 768px) and (max-width: 1023.98px) { .hero__media { position: absolute; inset-inline-start: -5rem; inset-inline-end: auto; width: max(64rem, calc(100% + 16rem)); top: 35.5%; bottom: 0; margin: 0 0 -5.25rem; flex: none; } }
@media (min-width: 1024px) { .hero__media { position: absolute; margin: 0; flex: none; inset-inline-start: calc(100% - 2.5rem - 0.847 * 72.0625rem);
  top: calc(1.8125rem + var(--board-drop)); height: 61rem; min-height: 100%; width: 72.0625rem; } }
@media (min-width: 1440px) { .hero__media { inset-inline-start: 24.0625rem; } }
.hero__mount { position: relative; width: 100%; height: 100%; }
.hero__handle { position: absolute; display: none; inset-inline-start: 27%; inset-inline-end: 15%; top: 5%; bottom: 23%; cursor: grab; touch-action: none; }
.hero__handle:active { cursor: grabbing; }
@media (min-width: 1024px) { .hero__handle { display: block; pointer-events: auto; } }

.hero__bar { order: 3; position: relative; z-index: 10; display: flex; flex-shrink: 0; align-items: center; gap: 1rem; padding-top: 1rem;
  font-family: var(--font-mono); font-size: var(--fs-label); line-height: var(--lh-copy); color: #fff; }
@media (max-width: 639.98px) { .hero__bar { margin-top: auto; } }
@media (min-width: 640px) { .hero__bar { gap: 1.5rem; padding-top: 1.5rem; font-size: var(--fs-base); } }
@media (min-width: 1024px) { .hero__bar { position: absolute; padding-top: 0; bottom: 2.5rem; inset-inline-start: 2.5rem; margin-top: 0; gap: 2rem; } }
.hero__barscrim { pointer-events: none; position: absolute; inset-inline: -2.5rem; bottom: -2.5rem; top: -1.5rem; z-index: -1; display: none;
  background: linear-gradient(to top, rgba(7, 7, 7, 0.95), rgba(7, 7, 7, 0.78), transparent); }
@media (min-width: 640px) and (max-width: 1023.98px) { .hero__barscrim { display: block; } }
.hb__hours, .hb__addr { width: max-content; }
@media (min-width: 1024px) { .hb__hours { min-width: 7.625rem; } .hb__addr { width: 9.9375rem; } }
.hb__rule { display: block; height: 2.375rem; width: 1px; flex-shrink: 0; background: rgba(255, 255, 255, 0.35); }
.hb__rule--sm { display: none; }
@media (min-width: 640px) { .hb__rule--sm { display: block; } }
.hb__social { display: none; width: max-content; flex-direction: column; }
@media (min-width: 640px) { .hb__social { display: flex; } }
@media (min-width: 1024px) { .hb__social { width: 5.3125rem; } }

.hero__cards { pointer-events: none; position: absolute; inset-inline-end: 2.5rem; top: 13%; display: none; width: max-content; z-index: 3; opacity: 0; }
@media (min-width: 1024px) { .hero__cards { display: block; } }
.pcard { border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(7, 7, 7, 0.7); padding: 1rem 1.25rem; color: #fff; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.pcard[hidden] { display: none; }
.pcard__k { color: rgba(255, 255, 255, 0.45); font-size: var(--fs-fine); }
.pcard__row { margin-top: 0.75rem; display: flex; align-items: baseline; justify-content: space-between; gap: 2.5rem; }
.pcard__t { font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: var(--lh-headline); }
.pcard__p { font-family: var(--font-mono); font-size: var(--fs-base); line-height: 1; font-variant-numeric: tabular-nums; }
.pcard__spec { margin-top: 0.75rem; display: flex; align-items: center; gap: 0.625rem; border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 0.75rem;
  font-family: var(--font-mono); font-size: var(--fs-fine); line-height: 1.2; color: rgba(255, 255, 255, 0.55); }
.pcard__spec li { display: flex; align-items: center; gap: 0.625rem; }
.pcard__spec li + li::before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); }

/* ---------------------------------------------------------------- the swirl */
.sw { pointer-events: none; position: absolute; inset: 0; z-index: 0; }
.sw--fade { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%); mask-image: linear-gradient(to bottom, transparent, #000 22%); }
.sw__box { position: absolute; inset-inline-start: 8.25rem; top: -1.5rem; width: 139.6875rem; height: 46.5625rem; }
.sw__mir { position: absolute; inset: 0; display: block; transform: scaleX(-1); }
.sw__mask { position: absolute; inset: 0; display: block; -webkit-mask: var(--swirl) center / 100% 100% no-repeat; mask: var(--swirl) center / 100% 100% no-repeat; }
.sw__fill { position: absolute; inset: 0; display: block; background: var(--inverse-back); --fill: 0; }
/* four soft blobs, each opening once --fill passes its delay; mask layers add, so they union */
.sw__fill--ltr { -webkit-mask-image: var(--b0), var(--b1), var(--b2), var(--b3); mask-image: var(--b0), var(--b1), var(--b2), var(--b3);
  --b0: radial-gradient(circle at 0% 78%, #000 calc((var(--fill) - 0) * 1.15% - 14%), transparent calc((var(--fill) - 0) * 1.15%));
  --b1: radial-gradient(circle at 30% 22%, #000 calc((var(--fill) - 10) * 1.27778% - 14%), transparent calc((var(--fill) - 10) * 1.27778%));
  --b2: radial-gradient(circle at 58% 88%, #000 calc((var(--fill) - 22) * 1.47436% - 14%), transparent calc((var(--fill) - 22) * 1.47436%));
  --b3: radial-gradient(circle at 92% 40%, #000 calc((var(--fill) - 34) * 1.74242% - 14%), transparent calc((var(--fill) - 34) * 1.74242%)); }
.sw__fill--rtl { -webkit-mask-image: var(--b0), var(--b1), var(--b2), var(--b3); mask-image: var(--b0), var(--b1), var(--b2), var(--b3);
  --b0: radial-gradient(circle at 100% 78%, #000 calc((var(--fill) - 0) * 1.15% - 14%), transparent calc((var(--fill) - 0) * 1.15%));
  --b1: radial-gradient(circle at 70% 22%, #000 calc((var(--fill) - 10) * 1.27778% - 14%), transparent calc((var(--fill) - 10) * 1.27778%));
  --b2: radial-gradient(circle at 42% 88%, #000 calc((var(--fill) - 22) * 1.47436% - 14%), transparent calc((var(--fill) - 22) * 1.47436%));
  --b3: radial-gradient(circle at 8% 40%, #000 calc((var(--fill) - 34) * 1.74242% - 14%), transparent calc((var(--fill) - 34) * 1.74242%)); }

/* ---------------------------------------------------------------- 3. the menu */
.mn, .loc { position: relative; display: flex; flex-direction: column; width: 100%; overflow: hidden; background: var(--inverse); color: var(--ink); }
@media (min-width: 1024px) { .mn, .loc { min-height: 100lvh; height: 100lvh; } }
@media (min-width: 1024px) and (max-width: 1279.98px) { .mn { height: calc(var(--board-h) + 2.5rem); min-height: 0; } .loc { height: var(--board-h); min-height: 0; } }
.mn__in { position: relative; z-index: 10; display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 2rem; padding: 5rem 1.25rem 3.5rem; }
@media (max-width: 639.98px) { .mn__in { gap: 2.25rem; } }
@media (min-width: 640px) { .mn__in { gap: 2.5rem; padding: 6rem 2.5rem 4rem; } }
@media (min-width: 640px) and (max-width: 1023.98px) { .mn__in { display: grid; grid-template-columns: 1fr 1fr; align-items: end; column-gap: 2.5rem; row-gap: 1.25rem; } }
@media (min-width: 1024px) { .mn__in { display: block; padding: 0; } }
@media (min-width: 1440px) { .mn__in { top: var(--board-drop); } }
.mn__head { display: flex; width: 100%; flex-direction: column; gap: 1rem; }
@media (max-width: 639.98px) { .mn__head { gap: 1.25rem; } }
@media (min-width: 640px) and (max-width: 1023.98px) { .mn__head { display: contents; } .mn__head .eyebrow, .mn__h2 { grid-column: span 2; } }
@media (min-width: 1024px) { .mn__head { position: absolute; inset-inline-start: 2.5rem; top: 6.625rem; width: 32.4375rem; gap: 1.25rem; } }
.mn__h2 { font-family: var(--font-display); font-weight: 700; font-size: 2.375rem; line-height: var(--lh-headline); text-align: start; }
@media (max-width: 639.98px) { .mn__h2 { max-width: 16rem; } }
@media (min-width: 640px) { .mn__h2 { font-size: 4rem; } }
@media (min-width: 640px) and (max-width: 1023.98px) { .mn__h2 { max-width: 26rem; } }
@media (min-width: 1024px) { .mn__h2 { font-size: var(--fs-display); } }
.mn__lede { width: 100%; }
@media (max-width: 639.98px) { .mn__lede { max-width: 18.5rem; } }
@media (min-width: 640px) { .mn__lede { max-width: 20rem; } }
/* tucked into the gap the heading's second line leaves free (the board's third) */
@media (min-width: 1024px) { .mn__lede { position: absolute; inset-inline-start: 24.25rem; top: 15.25rem; width: 10.875rem; } }
.mn__receipt { pointer-events: none; position: absolute; inset-inline-start: 86.44375rem; top: 10.0725rem; display: none; width: 17.41125rem; height: 39.553125rem; opacity: 0; }
@media (min-width: 1024px) { .mn__receipt { display: block; } }
.mn__receipt-in { display: block; width: 100%; height: 100%; rotate: 31.2678deg; }
.mn__receipt img { width: 100%; height: 100%; object-fit: cover; box-shadow: 0 30px 60px -20px rgba(7, 7, 7, 0.35); }
.mn__cta { display: block; }
@media (min-width: 640px) and (max-width: 1023.98px) { .mn__cta { justify-self: end; } }
@media (min-width: 1024px) { .mn__cta { position: absolute; inset-inline-end: 2.5rem; top: 24.625rem; } }
.mn__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
@media (max-width: 639.98px) { .mn__cards { grid-template-columns: 1fr; } }
@media (min-width: 640px) { .mn__cards { gap: 1rem; } }
@media (min-width: 640px) and (max-width: 1023.98px) { .mn__cards { grid-column: span 2; margin-top: 2.75rem; } }
@media (min-width: 1024px) { .mn__cards { position: absolute; inset-inline: 2.5rem; bottom: 2.5rem; top: auto; display: flex; gap: 0.75rem; } }
@media (min-width: 1440px) { .mn__cards { bottom: auto; top: 28.3125rem; } }
.mc { display: flex; flex: 1; }
.mc__lean { display: flex; flex: 1; perspective: 900px; }
.mc__lean-in { display: flex; flex: 1; transform-style: preserve-3d; }
.mc__card { position: relative; display: flex; height: 16rem; flex: 1; flex-direction: column; align-items: center; gap: 0.75rem; border: 1px solid var(--ink); padding: 0.75rem; color: var(--ink); }
@media (max-width: 639.98px) { .mc__card { height: 22.5rem; } }
@media (min-width: 640px) { .mc__card { height: 18rem; gap: 1rem; padding: 1rem; } }
@media (min-width: 640px) and (max-width: 1023.98px) { .mc__card { height: 24rem; } }
@media (min-width: 1024px) { .mc__card { height: 19.1875rem; } }
.mc__i { height: 0.5rem; width: 100%; font-family: var(--font-mono); font-size: 0.75rem; line-height: 1; color: rgba(7, 7, 7, 0.35); transition: color 250ms var(--ease); }
.mc__card:hover .mc__i { color: var(--ink); }
.mc__media { position: relative; min-height: 1px; width: 100%; flex: 1; }
.mc__media--clip { overflow: clip; }
.mc__media > .block { height: 100%; }
.mc__frame { position: absolute; left: 50%; transform: translateX(-50%); overflow: hidden; max-width: var(--still-max); }
.mc__frame img { position: absolute; max-width: none; }
.mc__frame img.cover { object-fit: cover; }
.mc__row { display: flex; min-height: 0.6875rem; width: 100%; align-items: flex-start; justify-content: space-between; gap: 0.5rem; font-family: var(--font-mono); font-size: var(--fs-label); line-height: var(--lh-flush); }
@media (max-width: 639.98px) { .mc__row { align-items: baseline; } }
@media (min-width: 1024px) { .mc__row { font-size: var(--fs-base); } }

/* ---------------------------------------------------------------- 4. the locations */
.loc__in { position: relative; z-index: 10; display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 2rem; padding: 5rem 1.25rem 3.5rem; }
@media (min-width: 640px) { .loc__in { gap: 2.5rem; padding: 6rem 2.5rem 4rem; } }
@media (min-width: 640px) and (max-width: 1023.98px) { .loc__in { padding-bottom: 2.5rem; } }
@media (max-width: 1023.98px) { .loc__in { display: grid; grid-template-columns: 1fr 1fr; align-items: start; } }
@media (max-width: 639.98px) { .loc__in { row-gap: 2.5rem; } }
@media (min-width: 1024px) { .loc__in { display: block; padding: 0; } }
@media (min-width: 1440px) { .loc__in { top: var(--board-drop); } }
.loc__turn { pointer-events: none; position: absolute; inset-inline: 0; top: -20%; height: 100%; }
.loc__dial { position: relative; margin-inline: auto; aspect-ratio: 1; width: 100%; max-width: 20rem; }
@media (min-width: 640px) { .loc__dial { max-width: 26rem; } }
@media (max-width: 1023.98px) { .loc__dial { order: 3; grid-column: span 2; } }
@media (min-width: 640px) and (max-width: 1023.98px) { .loc__dial { max-width: 34rem; } }
@media (min-width: 1024px) { .loc__dial { display: contents; } }
.loc__clock { pointer-events: none; position: absolute; inset: 0; }
.loc__clock img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) { .loc__clock { inset: auto; left: 50%; top: 6.625rem; width: 40.875rem; height: 40.875rem; transform: translateX(-50%); } }
.loc__cup { pointer-events: none; position: absolute; left: 50%; top: 12.8%; height: 64.2%; width: 42.8%; transform: translateX(-50%); perspective: 900px; }
@media (min-width: 1024px) { .loc__cup { top: 11.875rem; height: 26.25rem; width: 17.5rem; } }
.p3d { width: 100%; height: 100%; transform-style: preserve-3d; }
.loc__cup .block { width: 100%; height: 100%; }
.loc__cup img { width: 100%; height: 100%; object-fit: cover; }
.loc__k { order: -1; display: flex; align-items: center; gap: 0.375rem; font-family: var(--font-mono); font-size: var(--fs-label); line-height: var(--lh-copy); }
@media (min-width: 640px) { .loc__k { font-size: var(--fs-base); } }
@media (max-width: 1023.98px) { .loc__k { order: 1; grid-column-start: 1; } }
@media (min-width: 1024px) { .loc__k { position: absolute; inset-inline-start: 2.5rem; top: 6.625rem; } }
.loc__list { display: grid; grid-template-columns: 1fr; gap: 1.25rem; font-family: var(--font-mono); font-size: var(--fs-base); line-height: var(--lh-copy); }
@media (min-width: 640px) { .loc__list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1023.98px) { .loc__list { order: 4; grid-column: span 2; } }
@media (min-width: 1024px) { .loc__list { position: absolute; bottom: 2.4375rem; inset-inline-start: 2.5rem; top: auto; display: flex; width: 11.1875rem; flex-direction: column; gap: 1.5rem; } }
@media (min-width: 1440px) { .loc__list { bottom: auto; top: 37.375rem; } }
.loc__hours { font-family: var(--font-mono); font-size: var(--fs-base); line-height: var(--lh-copy); }
@media (max-width: 1023.98px) { .loc__hours { order: 2; grid-column-start: 2; justify-self: end; text-align: end; } }
@media (min-width: 1024px) { .loc__hours { position: absolute; bottom: 1.5rem; inset-inline-end: 2.5rem; top: auto; width: max-content; min-width: 7.625rem; text-align: end; } }
@media (min-width: 1440px) { .loc__hours { bottom: auto; top: 45.125rem; } }

/* ---------------------------------------------------------------- 5. the philosophy */
.ph { position: relative; display: flex; flex-direction: column; width: 100%; overflow: hidden; background: var(--background); color: #fff; }
@media (min-width: 1024px) { .ph { min-height: 100lvh; height: 100lvh; } }
@media (min-width: 1024px) and (max-width: 1279.98px) { .ph { height: var(--board-h); min-height: 0; } }
.ph__scrim { pointer-events: none; position: absolute; inset: 0; z-index: 1;
  background-image: linear-gradient(to bottom, rgba(7, 7, 7, 0.86) 0%, rgba(7, 7, 7, 0.6) 26%, rgba(7, 7, 7, 0.38) 46%, rgba(7, 7, 7, 0.62) 72%, rgba(7, 7, 7, 0.88) 100%); }
.ph__scene { pointer-events: none; position: absolute; inset: 0; z-index: 5; transform: translateZ(0); backface-visibility: hidden; }
.ph__in { position: relative; z-index: 10; display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 2rem; padding: 5rem 1.25rem 3.5rem; }
@media (max-width: 639.98px) { .ph__in { gap: 1.25rem; } }
@media (min-width: 640px) { .ph__in { gap: 2.5rem; padding: 6rem 2.5rem 4rem; } }
@media (min-width: 640px) and (max-width: 1023.98px) { .ph__in { display: grid; grid-template-columns: 21rem 1fr; align-content: center; align-items: end; column-gap: 1.25rem; } }
@media (min-width: 1024px) { .ph__in { position: absolute; inset: 0; display: block; padding: 0; } }
@media (min-width: 1440px) { .ph__in { bottom: 0; top: var(--board-drop); } }
.ph__cup { pointer-events: none; order: 2; margin-inline: auto; aspect-ratio: 2 / 3; height: auto; width: 13rem; }
.ph__cup > .block { width: 100%; height: 100%; }
/* the cup is drawn a fifth of its height below its box: on the column layouts that room is kept, so the lede under it
   never lands on white */
@media (max-width: 639.98px) { .ph__cup { margin-top: 1.25rem; margin-bottom: 4.25rem; width: 16rem; } }
@media (min-width: 640px) { .ph__cup { width: 16rem; } }
@media (min-width: 640px) and (max-width: 1023.98px) { .ph__cup { grid-column: span 2; width: 22rem; margin-bottom: 5.5rem; } }
@media (min-width: 1024px) { .ph__cup { position: absolute; inset-inline-start: 14.625rem; top: 19.5625rem; order: 0; margin: 0; height: 30.125rem; width: 20.125rem; } }
@media (min-width: 1280px) and (max-width: 1439.98px) { .ph__cup { bottom: 0.3125rem; top: auto; height: calc(30.125rem * 1.09); width: calc(20.125rem * 1.09); } }
.ph__head { order: 1; width: 100%; }
@media (min-width: 640px) and (max-width: 1023.98px) { .ph__head { grid-column: span 2; max-width: 38rem; } }
@media (min-width: 1024px) { .ph__head { position: absolute; inset-inline-start: 2.5rem; top: 6.625rem; width: 49.25rem; } }
.ph__h2, .od__h2 { font-family: var(--font-display); font-weight: 600; font-size: 2rem; line-height: var(--lh-headline); text-align: start; }
@media (min-width: 640px) { .ph__h2, .od__h2 { font-size: 3rem; } }
@media (min-width: 1024px) { .ph__h2, .od__h2 { font-size: var(--fs-headline); } }
.ph__lede { order: 3; width: 100%; }
@media (min-width: 1024px) { .ph__lede { position: absolute; bottom: 2.4375rem; inset-inline-start: 38.3125rem; top: auto; width: 20.6875rem; } }
@media (min-width: 1024px) and (max-width: 1439.98px) { .ph__lede { bottom: 2.5625rem; } }
@media (min-width: 1440px) { .ph__lede { bottom: auto; top: 41.5625rem; } }
.ph__claims { order: 4; display: flex; flex-direction: column; gap: 0.125rem; font-family: var(--font-mono); font-size: var(--fs-label); line-height: var(--lh-copy); }
@media (max-width: 639.98px) { .ph__claims { display: none; } }
@media (min-width: 640px) and (max-width: 1023.98px) { .ph__claims { justify-self: end; text-align: end; } }
@media (min-width: 1024px) { .ph__claims { position: absolute; bottom: 2.5625rem; inset-inline-end: 2.5rem; top: auto; width: 10.75rem; text-align: end; } }
@media (min-width: 1440px) { .ph__claims { bottom: auto; top: 44.0625rem; } }
.ph__k { order: 0; font-size: var(--fs-label); }
@media (min-width: 640px) and (max-width: 1023.98px) { .ph__k { grid-column: span 2; } }
@media (min-width: 1024px) { .ph__k { position: absolute; bottom: 1.875rem; inset-inline-start: 2.5rem; top: auto; } }
@media (min-width: 1024px) and (max-width: 1439.98px) { .ph__k { bottom: 2.5625rem; } }
@media (min-width: 1440px) { .ph__k { bottom: auto; top: 46.4375rem; } }

/* ---------------------------------------------------------------- 6. the order block */
.od { position: relative; width: 100%; height: 100vh; background: var(--background); color: #fff; }
@media (prefers-reduced-motion: reduce) { .od { height: 100lvh; } }
.od__sticky { position: sticky; top: 0; height: 100lvh; width: 100%; overflow: hidden; }
@media (min-width: 1024px) and (max-width: 1279.98px) { .od__sticky { height: 53.375rem; } }
.od__bg { position: absolute; inset-inline: 0; top: 0; display: block; height: 130%; }
.od__bg > .block { width: 100%; height: 100%; }
.od__bg img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) and (max-width: 1279.98px) { .od__bg img { height: 112%; object-position: top; } }
.od__frame { position: absolute; inset-inline: 0; top: 0; height: 100lvh; }
@media (min-width: 1024px) and (max-width: 1279.98px) { .od__frame { height: 53.375rem; } }
.od__stage { position: absolute; left: 50%; top: 0; width: 1440px; height: 800px; transform-origin: top center; transform: translateX(-50%); direction: ltr; }
.od__printer { position: absolute; left: 519px; top: 133px; width: 400px; height: 71.287px; z-index: 1; }
.od__window { position: absolute; left: 553px; top: 176px; width: 328px; height: 624px; overflow: hidden; z-index: 2; }
.od__paper { --p: 0; width: 328px; transform: translate3d(0, calc(-100% + var(--p) * 100%), 0);
  filter: drop-shadow(0 calc(var(--p) * 26px) calc(var(--p) * 20px) rgba(0, 0, 0, 0.42)); will-change: transform; }
.rc { width: 328px; color: #111; direction: rtl; }
.rc__p { background: #f2f0ea; padding: 32px 22px 10px; display: flex; flex-direction: column; gap: 10px; font-family: var(--font-mono); }
.rc__h { font-size: 11px; font-weight: 700; text-align: center; }
.rc__rule { height: 1px; background-image: repeating-linear-gradient(90deg, #111 0 5px, transparent 5px 10px); }
.rc__img { width: 150px; height: auto; margin: 0 auto; display: block; }
.rc__two { display: flex; justify-content: space-between; gap: 12px; font-size: 9px; line-height: 1.85; }
.rc__end { text-align: end; }
.rc__s { font-size: 9px; line-height: 1.85; }
.rc__cta { display: flex; gap: 12px; }
.rc__big { font-family: var(--font-display); font-size: 15px; font-weight: 700; line-height: 1.45; flex: 1; }
.rc__side { width: 132px; padding-inline-start: 12px; border-inline-start: 1px solid rgba(17, 17, 17, 0.25); display: flex; flex-direction: column; gap: 8px; }
.rc__note { font-size: 8px; line-height: 1.6; color: #5b5b58; }
.rc__btn { background: #111; color: #f2f0ea; font-size: 9px; font-weight: 700; padding: 6px 9px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bc { display: flex; align-items: flex-end; gap: 1px; height: 42px; direction: ltr; }
.bc i { display: block; height: 100%; background: #111; transform-origin: bottom center; }
.rc__url { font-size: 7px; letter-spacing: 0.16em; text-align: center; }
.rc__torn { display: block; }
.od__copy { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 4.5rem 1.25rem 1.25rem; }
@media (min-width: 640px) { .od__copy { padding: 6rem 2.5rem 2.5rem; } }
@media (max-width: 1023.98px) { .od__copy { align-items: center; text-align: center; } }
@media (min-width: 1024px) { .od__copy { display: block; padding: 0; } }
.od__fade { pointer-events: none; position: absolute; inset-inline: 0; }
.od__fade--t { top: 0; height: 16rem; background: linear-gradient(to bottom, rgba(7, 7, 7, 0.9), rgba(7, 7, 7, 0.55), transparent); }
.od__fade--b { bottom: 0; height: 18rem; background: linear-gradient(to top, rgba(7, 7, 7, 0.92), rgba(7, 7, 7, 0.6), transparent); }
@media (min-width: 1024px) { .od__fade { display: none; } }
.od__group { position: relative; display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 640px) and (max-width: 1023.98px) { .od__group { gap: 1.5rem; } }
@media (min-width: 1024px) { .od__group { display: contents; } }
@media (max-width: 639.98px) { .od__head { max-width: 17rem; } }
@media (min-width: 640px) and (max-width: 1023.98px) { .od__head { margin-inline: auto; max-width: 26rem; } }
@media (min-width: 1024px) { .od__head { position: absolute; inset-inline-start: 2.5rem; top: 7.875rem; width: 25.0625rem; } }
@media (max-width: 1023.98px) { .od__h2 .te { justify-content: center; } .od__h2 { text-align: center; } }
.od__note { width: 10.1875rem; font-family: var(--font-mono); font-size: var(--fs-base); line-height: var(--lh-copy); }
@media (max-width: 1023.98px) { .od__note { display: none; } }
@media (min-width: 1024px) { .od__note { position: absolute; bottom: 2.5rem; inset-inline-start: 2.5rem; } }
.od__aside { position: relative; display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 1rem; }
@media (max-width: 639.98px) { .od__aside { gap: 2.25rem; } }
@media (min-width: 640px) { .od__aside { width: 20.6875rem; gap: 1.5rem; } }
@media (min-width: 640px) and (max-width: 1023.98px) { .od__aside { width: 30rem; gap: 2.5rem; } }
@media (max-width: 1023.98px) { .od__aside { align-items: center; } .od__lede, .od__lede .te { text-align: center; justify-content: center; } }
@media (min-width: 1024px) { .od__aside { position: absolute; bottom: 2.5rem; inset-inline-end: 2.5rem; gap: 3.125rem; } }
.od__lede { display: block; width: 100%; }

/* ---------------------------------------------------------------- 7. the footer */
.ft { position: relative; display: flex; width: 100%; flex-direction: column; gap: 2rem; overflow: hidden; background: var(--background); padding: 3rem 1.25rem;
  font-family: var(--font-mono); font-size: var(--fs-label); line-height: var(--lh-copy); color: #fff;
  --ft-rule-top: 12.8125rem; --ft-row: 15.3125rem; --ft-rule-bottom: 20.1875rem; --ft-legal: 21.6875rem; --ft-right: calc(100% - 16.0625rem); }
@media (max-width: 639.98px) { .ft { padding-bottom: 2rem; } }
@media (min-width: 640px) { .ft { gap: 2.5rem; padding-inline: 2.5rem; font-size: var(--fs-base); } }
@media (min-width: 1024px) { .ft { display: block; height: 24.0625rem; padding: 0; } }
.ft__swirl { pointer-events: none; position: absolute; inset-inline-start: 8.25rem; top: -1.5rem; display: block; height: 46.5625rem; width: 139.6875rem; background: rgba(23, 23, 21, 0.5);
  -webkit-mask: var(--swirl) center / 100% 100% no-repeat; mask: var(--swirl) center / 100% 100% no-repeat; }
.ft__swirl { scale: -1 1; }
.ft__logo { display: block; height: var(--logo-h); width: var(--logo-w); position: relative; }
@media (min-width: 1024px) { .ft__logo { position: absolute; inset-inline-start: 2.5rem; top: 2.5rem; } }
.ft__wm { color: #fff; }
.ft__tag { margin-top: -1rem; width: 6.5rem; font-size: var(--fs-fine); color: rgba(255, 255, 255, 0.5); }
@media (max-width: 1023.98px) { .ft__tag { display: none; } }
@media (min-width: 1024px) { .ft__tag { position: absolute; inset-inline-start: 2.5rem; top: 6.375rem; margin-top: 0; width: 8rem; } }
.rise { display: block; clip-path: inset(0 0 -4px 0); }
.ft__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; row-gap: 2rem; }
@media (min-width: 640px) { .ft__grid { grid-template-columns: repeat(3, 1fr); column-gap: 2.5rem; } }
@media (min-width: 1024px) { .ft__grid { display: contents; } }
.ft__nav { display: contents; }
@media (min-width: 1024px) { .ft__nav { position: absolute; inset-inline-start: 23.9375rem; top: 2.5rem; display: flex; gap: 3rem; } }
.ft__col, .ft__contact { display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 1024px) { .ft__col { min-width: 7.625rem; } }
.ft__ul { display: flex; flex-direction: column; gap: 0.375rem; color: rgba(255, 255, 255, 0.5); }
.ft__ul a { overflow-wrap: anywhere; transition: color 150ms var(--ease); }
.ft__ul a:hover { color: #fff; }
@media (min-width: 1024px) { .ft__ul a { white-space: nowrap; } }
.ft__sep { display: none; height: 1px; background: rgba(255, 255, 255, 0.1); }
@media (max-width: 639.98px) { .ft__sep { display: block; grid-column: span 2; } }
@media (min-width: 640px) and (max-width: 1023.98px) { .ft__sep { display: block; grid-column: span 3; } }
@media (max-width: 639.98px) { .ft__contact { grid-column: span 2; } }
@media (min-width: 1024px) { .ft__contact { position: absolute; inset-inline-start: var(--ft-right); top: 2.5rem; } }
.ft__rule { position: relative; display: block; height: 1px; width: 100%; background: rgba(255, 255, 255, 0.1); }
@media (min-width: 1024px) { .ft__rule { position: absolute; inset-inline: 2.5rem; width: auto; top: var(--top); } }
.ft__lk { position: relative; font-size: var(--fs-fine); color: rgba(255, 255, 255, 0.5); }
.ft__lk .rise > .block { display: flex; align-items: center; gap: 0.375rem; }
@media (min-width: 1024px) { .ft__lk { position: absolute; inset-inline-start: 2.5rem; top: var(--ft-row); } }
.ft__addrs { position: relative; display: grid; column-gap: 1.5rem; row-gap: 1.5rem; }
@media (min-width: 640px) { .ft__addrs { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } }
@media (min-width: 1024px) { .ft__addrs { display: contents; } }
@media (min-width: 1024px) {
  .ft__a, .ft__hours { position: absolute; top: var(--ft-row); }
  .ft__a--1 { inset-inline-start: 23.9375rem; width: 10rem; }
  .ft__a--2 { inset-inline-start: 37.9375rem; white-space: nowrap; }
  .ft__a--3 { inset-inline-start: 53.0625rem; white-space: nowrap; }
  .ft__hours { inset-inline-start: var(--ft-right); white-space: nowrap; }
}
.ft__div { display: none; height: 2.375rem; width: 1px; background: rgba(255, 255, 255, 0.35); }
@media (min-width: 1024px) { .ft__div { position: absolute; top: var(--ft-row); display: block; } .ft__div--a { inset-inline-start: 35.9375rem; } .ft__div--b { inset-inline-start: 51.0625rem; } }
/* 1024-1279: the board's columns would run past the right-hand block, so they sit on the share of the width the board
   gives them instead (x / 1440) */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .ft__nav, .ft__a--1 { inset-inline-start: 26.597vw; }
  .ft__div--a { inset-inline-start: 39.931vw; }
  .ft__a--2 { inset-inline-start: 42.153vw; }
  .ft__div--b { inset-inline-start: 56.736vw; }
  .ft__a--3 { inset-inline-start: 58.958vw; }
  .ft__soc { inset-inline-start: 26.597vw; }
  .ft__nav { gap: 2.25rem; }
}
@media (max-width: 639.98px) { .ft__hours { margin-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 1.5rem; } }
.ft__legal { position: relative; display: flex; flex-direction: column; gap: 0.75rem; font-size: var(--fs-fine); }
@media (min-width: 640px) { .ft__legal { flex-direction: row; align-items: baseline; justify-content: space-between; } }
@media (min-width: 1024px) { .ft__legal { display: contents; } }
.ft__copy { white-space: nowrap; color: rgba(255, 255, 255, 0.5); }
@media (max-width: 639.98px) { .ft__copy { order: 9; margin-top: 0.75rem; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 1.5rem; } }
.ft__soc, .ft__rq { display: block; white-space: nowrap; }
.ft__soc .ul, .ft__rq .ul { color: rgba(255, 255, 255, 0.5); transition: color 150ms var(--ease); }
.ft__soc .ul:hover, .ft__rq .ul:hover { color: #fff; }
@media (min-width: 1024px) {
  .ft__copy, .ft__soc, .ft__rq { position: absolute; top: var(--ft-legal); }
  .ft__copy { inset-inline-start: 2.5rem; }
  .ft__soc { inset-inline-start: 23.9375rem; }
  .ft__rq { inset-inline-start: var(--ft-right); }
}

.q-err { position: fixed; inset-inline: 1rem; bottom: 1rem; z-index: 300; background: #7a1f12; color: #fff; padding: 0.75rem 1rem; font-family: var(--font-mono); font-size: 0.8rem; }
.q-err[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) { .opal__c { transition: none; } }