/* ═══════════════════════════════════════════════════════════════════
   Khufu Coffee LLC
   Black is the dominant surface, exactly as it is on the cart and the
   drink board. Beige carries the type, and one beige band mirrors the
   business card. Gold is the single accent, sampled off the board.
   Radius 2px throughout.
   ═══════════════════════════════════════════════════════════════════ */

/* Self-hosted so the first paint never waits on a third-party stylesheet.
   Both files are the latin subset of the variable face. */
@font-face {
  font-family: "Cinzel";
  src: url("../fonts/cinzel-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

:root {
  --ground:      #0A0807;
  --ground-2:    #000000;
  --ground-3:    #171310;
  --ground-rgb:  10, 8, 7;

  --ink:         #EDE0CC;
  --ink-2:       #D9C8AE;
  --muted:       #A2907A;

  --accent:      #B08558;
  --accent-lit:  #C79E6E;

  --rule:        rgba(217, 200, 174, .18);
  --rule-soft:   rgba(217, 200, 174, .09);
  --leader:      rgba(217, 200, 174, .28);

  --display: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --text:    "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --r: 2px;
  --ease: cubic-bezier(.16, 1, .3, 1);

  --gut: clamp(1.25rem, 5vw, 4rem);
  --wrap: 78rem;

  --z-bar: 55;
  --z-nav: 60;
  --z-drawer: 80;
  --z-grain: 90;

  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  /* clip, not hidden: `hidden` would make this a scroll container and break
     any position:sticky descendant. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink-2);
  font-family: var(--text);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p, dl, dd, figure, blockquote { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--accent); color: var(--ground); }

:focus-visible {
  outline: 2px solid var(--accent-lit);
  outline-offset: 3px;
  border-radius: var(--r);
}

.skip {
  position: fixed; top: .75rem; left: .75rem; z-index: 100;
  padding: .7rem 1.1rem; border-radius: var(--r);
  background: var(--accent); color: var(--ground);
  font-size: .875rem; font-weight: 600; text-decoration: none;
  transform: translateY(-160%);
  transition: transform .2s var(--ease);
}
.skip:focus-visible { transform: none; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* ── Film grain ──────────────────────────────────────────────────── */
.grain {
  position: fixed; inset: 0; z-index: var(--z-grain);
  pointer-events: none;
  background-image: url("../img/grain.png");
  background-size: 96px 96px;
  opacity: .05;
  mix-blend-mode: overlay;
}

/* ── Type scale ──────────────────────────────────────────────────── */
.h-display {
  text-wrap: balance;
  font-family: var(--display);
  font-weight: 400;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: .07em;
  line-height: 1.1;
  font-size: clamp(1.75rem, 6vw, 3rem);
}

/* The drink board frames itself in a hairline. The same device marks
   the sections that carry the brand's own material. */
.rule-tri {
  display: block;
  width: .5rem; height: .42rem;
  margin: 0 auto;
  background: var(--accent);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  opacity: .8;
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn {
  --btn-bg: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 3rem;
  padding: .85rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: var(--btn-bg);
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s var(--ease), background-color .25s var(--ease),
              border-color .25s var(--ease), color .25s var(--ease);
}
.btn--solid { --btn-bg: var(--accent); color: var(--ground); }
.btn--ghost { color: var(--ink); border-color: var(--rule); }

@media (hover: hover) {
  .btn--solid:hover { --btn-bg: var(--accent-lit); transform: translateY(-2px); }
  .btn--ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
}
.btn:active { transform: scale(.985); }

/* ── Navigation ──────────────────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto; z-index: var(--z-nav);
  padding-top: env(safe-area-inset-top);
  transition: background-color .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav::before {
  content: "";
  position: absolute; inset: 0 0 auto;
  /* Taller than the bar, so the fade happens *below* the links rather than
     through them. The hero image behind is fixed, so whatever sits under the
     bar changes as you scroll and the scrim has to hold on its own. */
  height: 190%;
  background: linear-gradient(to bottom,
    rgba(var(--ground-rgb), .97) 0%,
    rgba(var(--ground-rgb), .95) 46%,
    rgba(var(--ground-rgb), .55) 74%,
    rgba(var(--ground-rgb), 0) 100%);
  pointer-events: none;
  transition: opacity .4s var(--ease);
}
.nav.is-stuck::before { opacity: 0; }
.nav.is-stuck {
  background: rgba(10, 8, 7, .88);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--rule-soft);
}
.nav__in {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 4.25rem;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.brand {
  display: flex; align-items: center; gap: .6rem;
  margin-right: auto;
  text-decoration: none;
}
.brand img { width: 2rem; height: auto; }
.brand__type {
  font-family: var(--display);
  font-size: .95rem;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: .22em;
}

.nav__links { display: none; }
.nav__cta { display: none; }

.burger {
  display: grid; place-content: center; gap: 6px;
  width: 3rem; height: 3rem; margin-right: -.75rem;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.burger span {
  display: block; width: 24px; height: 1.5px;
  background: var(--ink);
  transition: transform .35s var(--ease), opacity .2s linear;
}
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.75px) rotate(-45deg); }

/* ── Mobile drawer ───────────────────────────────────────────────── */
.drawer {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  display: flex; flex-direction: column; justify-content: center;
  gap: 2.5rem;
  padding: 6rem var(--gut) calc(2rem + env(safe-area-inset-bottom));
  background: var(--ground-2);
  /* opacity, never visibility:hidden, so the links can take focus the moment
     it opens. `inert` (set in JS) is what removes it from the tab order. */
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease);
}
.drawer.is-open { opacity: 1; pointer-events: auto; }

.drawer__nav { display: flex; flex-direction: column; }
.drawer__nav a {
  display: block;
  padding: .55rem 0;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--display);
  font-size: clamp(1.35rem, 6.5vw, 2rem);
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: .05em;
  text-decoration: none;
  opacity: 0;
  transform: translateY(14px);
}
.drawer.is-open .drawer__nav a {
  animation: rise .5s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 55ms + 120ms);
}
.drawer__foot { display: grid; gap: 1.25rem; justify-items: start; }
.drawer__foot p { color: var(--muted); font-size: .875rem; }

@keyframes rise { to { opacity: 1; transform: none; } }

/* ── Hero ────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 100dvh;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -1; overflow: clip; }
.hero__media img { width: 100%; height: 100%; }
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  /* Only an overall settling of the frame. Legibility is the body's job. */
  background:
    linear-gradient(to bottom,
      rgba(var(--ground-rgb), .62) 0%,
      rgba(var(--ground-rgb), .22) 26%,
      rgba(var(--ground-rgb), .22) 68%,
      rgba(var(--ground-rgb), .45) 100%);
}

.hero__body {
  position: relative;
  z-index: 2;
  padding: 3.25rem var(--gut) calc(3rem + env(safe-area-inset-bottom));
  max-width: 40rem;
  /* A solid panel, not a gradient. The image behind it is fixed while this
     copy scrolls, so a translucent backing cannot promise contrast at every
     scroll position; a solid one can. The window plays out above it. */
  background: var(--ground);
}
/* soft edge where the panel meets the photograph */
.hero__body::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 100%;
  height: 7rem;
  pointer-events: none;
  background: linear-gradient(to top, var(--ground), rgba(var(--ground-rgb), 0));
}
.hero__eyebrow {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--accent-lit);
  margin-bottom: 1rem;
  opacity: 0;
  animation: rise .8s var(--ease) .05s forwards;
}
.hero__title {
  font-family: var(--display);
  font-weight: 400;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: .045em;
  line-height: 1.06;
  font-size: clamp(2.15rem, 9.2vw, 3.9rem);
  margin-bottom: 1.75rem;
  opacity: 0;
  animation: rise .9s var(--ease) .14s forwards;
}
.hero__sub {
  max-width: 36ch;
  color: var(--ink-2);
  font-size: clamp(1rem, 2.6vw, 1.125rem);
  margin-bottom: 2rem;
  opacity: 0;
  animation: rise .9s var(--ease) .26s forwards;
}
.hero__cta {
  display: flex; flex-wrap: wrap; gap: .75rem;
  opacity: 0;
  animation: rise .9s var(--ease) .38s forwards;
}
.hero__cta .btn { flex: 1 1 auto; min-width: 10rem; }


/* ── Background parallax: the section is a window ─────────────────
   The image is position:fixed, so it stays anchored to the viewport while
   the section scrolls over it. What makes that work is clip-path on the
   frame: it clips the fixed child without becoming a containing block for
   it, which `transform`, `filter` and `will-change` would all do. Verified
   in build/cbtest.mjs.

   No JavaScript, no scroll listener, nothing on the main thread. Under
   reduced motion the image falls back to position:absolute and simply
   scrolls with its section. */
.hero__fixed,
.bleed__fixed { position: absolute; inset: 0; }
.hero__fixed img,
.bleed__fixed img { width: 100%; height: 100%; object-fit: cover; }
/* so the <img> is laid out by .hero__fixed rather than by the <picture> box */
.hero__fixed picture { display: contents; }

@media (max-width: 899px) {
  .hero__fixed img { object-fit: contain; object-position: 50% 50%; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero__media,
  .bleed { clip-path: inset(0); }

  .bleed__fixed {
    position: fixed;
    top: -10vh;
    left: 0; right: 0;   /* not 100vw: that would count the scrollbar */
    width: auto;
    height: 120vh;
  }
}

/* The hero's parallax window only holds up once the fixed box's aspect is
   close to the visible box's aspect - true on desktop, not on a phone, where
   a 120vh fixed layer is far taller than the one screen of hero actually
   shown. contain then centers the photo in a box much taller than the
   window, and the subject can end up outside the visible slice no matter how
   it's positioned. Below 900px the hero image is a plain absolute layer
   instead: no parallax, but the whole photograph is guaranteed to fit inside
   what is actually on screen. */
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  .hero__fixed {
    position: fixed;
    top: -10vh;
    left: 0; right: 0;
    width: auto;
    height: 120vh;
  }
}

/* ── Section rhythm ──────────────────────────────────────────────── */
.menu, .about, .feed, .book, .creed {
  padding-block: clamp(5.5rem, 15vw, 11rem);
}

/* ── Drink chart ─────────────────────────────────────────────────── */
.menu { background: var(--ground-2); }
.menu__head { margin-bottom: clamp(1.5rem, 5vw, 2.5rem); }
.menu__head p {
  color: var(--muted);
  max-width: 44ch;
  margin-top: .9rem;
  font-size: .9375rem;
}

.chart { display: grid; max-width: 48rem; }
.chart li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: clamp(1.25rem, 4vw, 2.25rem);
  padding-block: clamp(1.6rem, 4.5vw, 2.4rem);
  position: relative;
}
/* A small pyramid separates the items, exactly as it does on the board. */
.chart li + li::before {
  content: "";
  position: absolute; top: -.21rem; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(176, 133, 88, .35) 22%,
                                     rgba(176, 133, 88, .35) 78%, transparent);
}
.chart li + li::after {
  content: "";
  position: absolute; top: -.21rem; left: 50%;
  width: .5rem; height: .42rem;
  transform: translateX(-50%);
  background: var(--accent);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  opacity: .85;
}
.chart img {
  width: clamp(5.5rem, 22vw, 8rem);
  height: auto;
}
/* Name, a dotted leader, then the temperature. The leader is the detail that
   makes a list read as a menu rather than as a table. */
.chart__row {
  display: grid;
  /* Narrow screens keep the leader but drop the temperature to its own line,
     so the drink name never wraps. */
  grid-template-columns: auto minmax(1.25rem, 1fr);
  align-items: baseline;
  column-gap: .85rem;
  row-gap: .35rem;
}
.chart__row .temp { grid-column: 1 / -1; }
.chart__row i {
  border-bottom: 1px dotted var(--leader);
  transform: translateY(-.32em);
}
.chart h3 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--ink);
  font-size: clamp(1.25rem, 5vw, 1.75rem);
  text-transform: uppercase;
  letter-spacing: .07em;
  line-height: 1.15;
}
/* A quiet lettered label, not a form chip. */
.temp {
  color: var(--accent);
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .24em;
  white-space: nowrap;
}


/* ── The creed: a title card, framed the way the drink board is ──── */
.creed { background: var(--ground); }
.creed__frame {
  position: relative;
  padding: clamp(3rem, 10vw, 6rem) clamp(1.5rem, 6vw, 4rem);
  text-align: center;
  border: 1px solid rgba(176, 133, 88, .3);
  border-radius: var(--r);
}
/* a second hairline just inside, as the board has */
.creed__frame::before {
  content: "";
  position: absolute; inset: 6px;
  border: 1px solid rgba(176, 133, 88, .14);
  border-radius: var(--r);
  pointer-events: none;
}
.creed__mark {
  width: clamp(3rem, 10vw, 4.25rem);
  height: auto;
  margin: 0 auto clamp(1.5rem, 5vw, 2.25rem);
}
.creed__line {
  text-wrap: balance;
  font-family: var(--display);
  font-weight: 400;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1.28;
  font-size: clamp(1rem, 3.2vw, 1.6rem);
  max-width: 26ch;
  margin-inline: auto;
}
.creed__sub {
  color: var(--muted);
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .24em;
  margin-top: clamp(1.25rem, 4vw, 1.75rem);
}

/* ── Home teaser for the About page ──────────────────────────────── */
.teaser__lede {
  text-wrap: pretty;
  font-weight: 300;
  color: var(--ink);
  font-size: clamp(1.5rem, 5.6vw, 2.25rem);
  line-height: 1.28;
  letter-spacing: -.01em;
  max-width: 24ch;
  margin-top: 1.5rem;
}
.teaser__body { color: var(--ink-2); max-width: 46ch; margin-top: 1.5rem; }
.teaser__cta { margin-top: 2.25rem; }

/* ── How we make it: the one cream band, mirroring the card ─────── */
.about {
  background: #E4D5BC;
  /* tokens flip inside this band so every child stays legible on cream */
  --ink: #3A2917;
  --ink-2: #4E3A25;
  --muted: #634B31;
  --accent: #7A5220;
  --rule: rgba(58, 41, 23, .22);
  --rule-soft: rgba(58, 41, 23, .13);
  --leader: rgba(58, 41, 23, .3);
  color: var(--ink-2);
}
.about__lede {
  text-wrap: pretty;
  font-weight: 300;
  color: var(--ink);
  font-size: clamp(1.375rem, 5.2vw, 1.9rem);
  line-height: 1.3;
  letter-spacing: -.01em;
  max-width: 26ch;
  margin-top: 1.25rem;
}
.standards { display: grid; margin-top: clamp(2.5rem, 7vw, 4rem); }
.standards article { position: relative; padding-block: clamp(1.75rem, 4.5vw, 2.5rem); }
.standards article + article::before {
  content: "";
  position: absolute; top: -.21rem; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(122, 82, 32, .32) 18%,
                                     rgba(122, 82, 32, .32) 82%, transparent);
}
.standards article + article::after {
  content: "";
  position: absolute; top: -.21rem; left: 50%;
  width: .5rem; height: .42rem;
  transform: translateX(-50%);
  background: var(--accent);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  opacity: .7;
}
.standards h3 {
  text-wrap: balance;
  font-family: var(--display);
  font-weight: 400;
  color: var(--ink);
  font-size: clamp(1.0625rem, 3.4vw, 1.25rem);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: .75rem;
}
.standards p { color: var(--ink-2); max-width: 46ch; font-size: .9375rem; }


/* ── Interior page head ──────────────────────────────────────────── */
.phead {
  padding-block: clamp(8rem, 18vw, 12rem) clamp(3rem, 9vw, 5rem);
}
.phead__eyebrow {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .24em;
  color: var(--accent);
  margin-bottom: 1.25rem;
}
.phead__title {
  text-wrap: balance;
  font-family: var(--display);
  font-weight: 400;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: .045em;
  line-height: 1.06;
  font-size: clamp(2.25rem, 8.5vw, 4rem);
}
.phead__lede {
  text-wrap: pretty;
  font-weight: 300;
  color: var(--ink-2);
  font-size: clamp(1.125rem, 4vw, 1.5rem);
  line-height: 1.4;
  max-width: 40ch;
  margin-top: clamp(1.5rem, 4vw, 2rem);
}

/* ── Full-bleed figure ───────────────────────────────────────────── */
.bleed { margin: 0; overflow: clip; }
.bleed img {
  width: 100%;
  height: clamp(16rem, 52vw, 34rem);
  object-fit: cover;
  object-position: 50% 46%;
}

.creed__cta { margin-top: clamp(1.75rem, 5vw, 2.5rem); }


/* ── Signature trio: a bento of the three drinks we make a point of ── */
.sigs {
  display: flex;
  gap: .75rem;
  margin-top: clamp(2.5rem, 7vw, 4rem);
  margin-inline: calc(var(--gut) * -1);
  padding-inline: var(--gut);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.sigs::-webkit-scrollbar { display: none; }
.sig {
  flex: 0 0 76%;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sig__frame {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--ground-3);
}
.sig img {
  width: 100%; height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
  transition: transform .7s var(--ease);
}
@media (hover: hover) { .sig:hover img { transform: scale(1.04); } }
.sig figcaption {
  flex: none;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-top: .9rem;
  padding-top: .8rem;
  border-top: 1px solid var(--rule);
}
.sig figcaption b {
  font-family: var(--display);
  font-weight: 400;
  color: var(--ink);
  font-size: .9375rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.sig figcaption span {
  color: var(--accent);
  font-size: .625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .22em;
  white-space: nowrap;
}

/* ── The hieroglyph course, cut from the mark, used as a rule ─────── */
.glyph-rule {
  width: min(100%, 22rem);
  height: auto;
  margin: clamp(2.5rem, 8vw, 4rem) auto 0;
  opacity: .8;
}

/* ── Where we go: a marquee of the neighbourhoods we serve ───────── */
.areas { padding-block: clamp(3.5rem, 9vw, 5.5rem); background: var(--ground-2); }
.areas__head {
  text-align: center;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .24em;
  margin-bottom: clamp(1.5rem, 5vw, 2.25rem);
}
.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: slide 52s linear infinite; }
.marquee__set { display: flex; flex: none; }
.marquee__set em {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  padding-right: 1.5rem;
  font-family: var(--display);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.375rem, 5.5vw, 2.5rem);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink);
}
.marquee__set em:nth-child(even) {
  color: transparent;
  -webkit-text-stroke: 1px var(--muted);
}
.marquee__set em::after {
  content: "";
  flex: none;
  width: .42em; height: .36em;
  background: var(--accent);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  -webkit-text-stroke: 0;
}
@keyframes slide { to { transform: translateX(-50%); } }

/* ── Craft: the image holds while the standards move past it ─────── */
.craft__media { margin-bottom: clamp(2rem, 6vw, 3rem); }
.craft__media img { width: 100%; border-radius: var(--r); }

/* ── Availability, set like an opening-hours plate ───────────────── */
.days { display: grid; gap: .9rem; margin-bottom: 1.5rem; }
.days div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--rule-soft);
}
.days dt { color: var(--muted); font-size: .9375rem; }
.days dd {
  font-family: var(--display);
  color: var(--ink);
  font-size: 1.0625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.days dd.is-open { color: var(--accent); }

/* ── Instagram ───────────────────────────────────────────────────── */
.feed__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.25rem;
  margin-bottom: clamp(1.75rem, 5vw, 2.5rem);
}
.feed__handle {
  color: var(--accent);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
}
@media (hover: hover) { .feed__handle:hover { color: var(--accent-lit); } }

.feed__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.tile {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--ground-3);
  text-decoration: none;
}
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
@media (hover: hover) { .tile:hover img { transform: scale(1.05); } }

/* Placeholder tiles carry the mark rather than a broken-image box, so an
   empty or unreachable account still looks deliberate. */
.feed__grid[data-state="placeholder"] .tile,
.feed__grid[data-state="error"] .tile {
  border: 1px solid rgba(176, 133, 88, .18);
  background: linear-gradient(160deg, #17120E, #0A0807 70%);
}
.feed__grid[data-state="placeholder"] .tile span,
.feed__grid[data-state="error"] .tile span {
  position: absolute; inset: 0;
  background: url("../img/khufu-mark-gold.webp") center / 34% auto no-repeat;
  opacity: .28;
  transition: opacity .4s var(--ease);
}
@media (hover: hover) {
  .feed__grid[data-state="placeholder"] .tile:hover span { opacity: .6; }
}
.feed__grid[data-state="loading"] .tile { animation: shimmer 1.4s ease-in-out infinite; }
@keyframes shimmer { 50% { opacity: .55; } }

.feed__note { color: var(--muted); font-size: .875rem; margin-top: 1.25rem; max-width: 46ch; }
.feed__cta { margin-top: 1.5rem; }

/* ── Booking ─────────────────────────────────────────────────────── */
.book { background: var(--ground-2); }

.avail {
  margin-top: clamp(1.75rem, 5vw, 2.75rem);
  padding: clamp(1.75rem, 5.5vw, 2.75rem);
  border: 1px solid rgba(176, 133, 88, .35);
  border-radius: var(--r);
  background: var(--ground-3);
}
.avail__days { display: flex; flex-wrap: wrap; gap: .5rem .6rem; margin-bottom: 1rem; }
.avail__days span {
  padding: .55rem 1.15rem;
  border-radius: var(--r);
  background: var(--accent);
  color: var(--ground);
  font-family: var(--display);
  font-size: clamp(.8125rem, 2.6vw, .9375rem);
  text-transform: uppercase;
  letter-spacing: .16em;
}
.avail__note { color: var(--ink-2); max-width: 52ch; }
.avail__contact {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-soft);
  font-size: .9375rem;
  font-weight: 600;
}
.avail__contact a { color: var(--accent); text-decoration: none; }
@media (hover: hover) { .avail__contact a:hover { color: var(--accent-lit); } }

.book__embed {
  margin-top: 1rem;
  border: 1px solid var(--rule-soft);
  border-radius: var(--r);
  background: var(--ground-3);
  overflow: hidden;
}
/* TidyCal injects its own fixed-height iframe; keep it inside our frame. */
.book__embed .tidycal-embed { width: 100%; min-height: 42rem; }

/* ── Footer ──────────────────────────────────────────────────────── */
.foot {
  border-top: 1px solid var(--rule-soft);
  padding-top: clamp(3.5rem, 9vw, 5rem);
  /* clears the fixed action bar, which only exists below 900px */
  padding-bottom: calc(6rem + env(safe-area-inset-bottom));
}
.foot__in { display: grid; gap: 3rem; }
.foot__brand img { width: 7.5rem; height: auto; }
.foot__brand p { color: var(--muted); font-size: .875rem; max-width: 34ch; margin-top: 1.25rem; }

.foot__cols { display: grid; gap: 2rem 1.5rem; }
.foot__cols div { display: flex; flex-direction: column; gap: .6rem; align-items: start; }
.foot__cols h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--accent);
  margin-bottom: .3rem;
}
.foot__cols a {
  font-size: .9375rem;
  color: var(--ink-2);
  text-decoration: none;
  transition: color .2s var(--ease);
}
.foot__cols p { color: var(--muted); font-size: .875rem; }
@media (hover: hover) { .foot__cols a:hover { color: var(--accent-lit); } }

.foot__legal {
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
  justify-content: space-between;
  margin-top: clamp(3rem, 8vw, 4.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-soft);
  color: var(--muted);
  font-size: .8125rem;
}

/* ── Sticky mobile action bar ────────────────────────────────────── */
.bar {
  position: fixed; inset: auto 0 0; z-index: var(--z-bar);
  display: flex; gap: .5rem;
  padding: .6rem var(--gut) calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(10, 8, 7, .9);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-top: 1px solid var(--rule-soft);
  transform: translateY(110%);
  transition: transform .45s var(--ease);
}
.bar.is-on { transform: none; }
.bar .btn { flex: 1; min-width: 0; padding-inline: .75rem; }

/* ── Scroll reveals ────────────────────────────────────────────────
   Gated behind .js so a failed or blocked script can never leave the
   page's content sitting at opacity 0. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ═══ 600px and up ══════════════════════════════════════════════════ */
@media (min-width: 520px) {
  .chart__row { grid-template-columns: auto minmax(1.25rem, 1fr) auto; row-gap: 0; }
  .chart__row .temp { grid-column: auto; }
}

@media (min-width: 600px) {
  .hero__cta .btn { flex: 0 0 auto; }
  .feed__grid { grid-template-columns: repeat(3, 1fr); }
  .sigs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
  .sig { flex: none; }
  .sig img { aspect-ratio: 4 / 3; }
  .sig--tall { grid-row: span 2; }
  .sig--tall .sig__frame { display: flex; }
  .sig--tall img { height: 100%; aspect-ratio: auto; min-height: 20rem; }
  .foot__cols { grid-template-columns: repeat(2, 1fr); }
}

/* ═══ 780px and up ══════════════════════════════════════════════════ */
@media (min-width: 780px) {
}

/* ═══ 900px and up ══════════════════════════════════════════════════ */
@media (min-width: 900px) {
  .burger { display: none; }
  .drawer { display: none; }

  .nav__links { display: flex; gap: clamp(1.25rem, 2.6vw, 2.25rem); }
  .nav__links a {
    position: relative;
    font-size: .875rem;
    font-weight: 500;
    letter-spacing: .02em;
    text-decoration: none;
    color: var(--ink-2);
    transition: color .25s var(--ease);
  }
  .nav__links a::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -.4rem;
    height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s var(--ease);
  }
  .nav__links a:hover { color: var(--ink); }
  .nav__links a:hover::after { transform: scaleX(1); }

  .nav__cta { display: inline-flex; min-height: 2.5rem; padding: .5rem 1.15rem; margin-left: 1.5rem; }
  .nav__in { height: 4.5rem; }

  /* The photograph runs the full width; the copy sits on it bottom-left. */
  .hero {
    /* The photograph gets two thirds of the screen. On short windows it yields
       just enough for the copy, so the buttons never fall under the fold. */
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    align-content: start;
    align-items: stretch;
    min-height: 100dvh;
    padding: 0;
  }
  /* A real grid row now, rather than an absolute overlay, so its height is
     the two thirds directly. clip-path still windows the fixed image inside
     it exactly as before. */
  .hero__media {
    position: relative;
    grid-row: 1;
    inset: auto;
    z-index: 0;
    height: 100%;
  }
  .hero__media::after {
    background:
      linear-gradient(to bottom,
        rgba(var(--ground-rgb), .62) 0%,
        rgba(var(--ground-rgb), .18) 24%,
        rgba(var(--ground-rgb), .18) 66%,
        rgba(var(--ground-rgb), .5) 100%);
  }

  .hero__body {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    justify-self: stretch;
    width: 100%;
    max-width: none;
    margin-left: 0;
    /* Full width, so there are no side edges to read as a box on the
       photograph. The only fade is vertical and it lives entirely in the top
       padding, which keeps every line of type on the solid part. */
    padding-top: 2rem;
    padding-right: 0;
    padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
    padding-left: calc(max((100vw - var(--wrap)) / 2, 0px) + var(--gut));
    /* Fully opaque. The blend into the photograph happens above it, in
       ::before, so the fade can be as long as it likes without pushing the
       copy off the solid ground. */
    background: var(--ground);
  }
  /* a long, full-width dissolve from the photograph into the panel */
  .hero__body::before {
    display: block;
    height: 9rem;
    background: linear-gradient(to top,
      var(--ground) 0%,
      rgba(var(--ground-rgb), .74) 32%,
      rgba(var(--ground-rgb), .3) 64%,
      rgba(var(--ground-rgb), 0) 100%);
  }
  .hero__eyebrow { margin-bottom: .5rem; }
  .hero__title { font-size: clamp(2.1rem, min(4.4vw, 5.6dvh), 3.5rem); margin-bottom: 1rem; max-width: 22ch; }
  .hero__sub { max-width: 60ch; margin-bottom: 1.35rem; font-size: 1.0625rem; }

  .teaser .wrap {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    /* row gap kept tight; the column gap does the separating */
    gap: 1.5rem clamp(2rem, 5vw, 4.5rem);
    align-content: start;
    align-items: start;
  }
  .teaser .h-display { grid-column: 1; grid-row: 1 / span 3; }
  .teaser__lede { grid-column: 2; margin-top: 0; }
  .teaser__body { grid-column: 2; margin-top: 0; }
  .teaser__cta { grid-column: 2; justify-self: start; margin-top: .75rem; }


  .craft__in {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: start;
  }
  .craft__media { position: sticky; top: 6.5rem; margin-bottom: 0; }
  /* The image has to be meaningfully shorter than the column beside it or it
     runs out of travel and never reads as held. */
  .craft__media img { height: min(60dvh, 32rem); object-fit: cover; }

  .foot__in {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
  }
  .foot__cols { grid-template-columns: repeat(3, 1fr); }
  .foot { padding-bottom: 1.5rem; }

  .bar { display: none; }
}

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .hero__eyebrow, .hero__title, .hero__sub, .hero__cta,
  .drawer.is-open .drawer__nav a { opacity: 1; transform: none; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
  .bar { transition: none; }
}

/* ── Reduced transparency ────────────────────────────────────────── */
@media (prefers-reduced-transparency: reduce) {
  .nav.is-stuck, .bar {
    background: var(--ground);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}