/* ==========================================================================
   BULUBEEF — "The Wrapper"

   The site is built on Bulubeef's own greaseproof paper: an off-white sheet
   ruled with a fine teal grid, scattered with the logotype and the hand-drawn
   cow, pig and chicken. Every one of their best photographs is already shot on
   it. Food is laid on the page the way it is laid on the paper — oversized, a
   degree off-square, cropped by the edge of the sheet.

   Every colour below is measured from their artwork or photographs, not chosen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Ink. Teal is a drawing colour, not a fill — it inverts to a solid field
     exactly twice on the site: the ordering block and the footer. */
  --teal:       #006E65;  /* verified 3x: live CSS, mascot artwork, logotype */
  --teal-deep:  #00504A;  /* pressed / hover. Same hue, darker. */
  --ink:        #0C0B08;  /* Bulubeef's own near-black */

  /* Paper. Measured off the photographs: lit stock reads #E9E9EB–#ECEDEF.
     Warmed a touch so it reads as uncoated paper rather than interface grey. */
  --paper:      #EDEBE6;
  --paper-lit:  #F4F3EF;

  /* The cream is the ink the mascots and logotype are printed in, on teal.
     It belongs ON teal and nowhere else. */
  --cream:      #E6E3DE;

  --rule:       rgb(0 110 101 / 0.22);
  --grid-line:  rgb(0 110 101 / 0.085);
  --grid-size:  clamp(34px, 3.4vw, 42px);

  /* Display face — headings, item names, prices, buttons, nav. */
  --face: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  /* Body face — running text, menu ingredient lists and small print. Spline
     Sans Mono reads like an order ticket. Chosen by Adam, 24 Sep 2026, after
     comparing it with Instrument Sans and Archivo on the preview. */
  --face-body: 'Spline Sans Mono', ui-monospace, Menlo, monospace;
  --body-size-adjust: 0.94;
  --body-tracking: -0.005em;

  --t-display: clamp(2.75rem, 11.5vw, 9.5rem);
  --t-xl:      clamp(2rem, 6.2vw, 4.75rem);
  --t-lg:      clamp(1.5rem, 3.4vw, 2.5rem);
  --t-md:      clamp(1.15rem, 1.6vw, 1.5rem);
  --t-body:    clamp(1rem, 0.72vw + 0.82rem, 1.1875rem);
  --t-sm:      0.875rem;

  --measure: 62ch;

  --gap:   clamp(1rem, 2.5vw, 2rem);
  --bleed: clamp(1.25rem, 5vw, 5.5rem);
  --band:  clamp(4rem, 11vh, 9rem);

  --head-h: 4.32rem;

  --speed: 260ms;
  --ease:  cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--face-body);
  font-size: calc(var(--t-body) * var(--body-size-adjust));
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: var(--body-tracking);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
p + p { margin-top: 0.8em; }

a { color: inherit; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-teal :focus-visible { outline-color: var(--cream); }

.skip-link {
  position: absolute;
  left: var(--bleed);
  top: -4rem;
  z-index: 100;
  background: var(--teal);
  color: var(--cream);
  padding: 0.7rem 1.1rem;
  font-weight: 700;
  transition: top var(--speed) var(--ease);
}
.skip-link:focus { top: 0.75rem; }

.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. Type roles

   The brand sets its own name in caps, so caps here are inherited from
   Bulubeef's materials rather than applied as a styling habit.
   -------------------------------------------------------------------------- */

.t-display, .t-xl, .t-lg {
  overflow-wrap: break-word;
  font-stretch: 125%;         /* Archivo's wdth axis — matches the logotype */
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}

.t-display { font-size: var(--t-display); }

/* On paper, display headings are set in the brand teal; body copy stays in ink
   for reading contrast. */
.reg-loud .t-xl, .reg-quiet .t-xl,
.reg-loud .t-lg, .reg-quiet .t-lg,
.reg-loud .t-display, .reg-quiet .t-display { color: var(--teal); }

/* An inverted panel can sit INSIDE a paper section - the location page puts a
   teal ordering block inside .reg-quiet. Without this the heading inherits the
   rule above and renders teal on teal, i.e. invisible. Must stay after it. */
.on-teal .t-xl, .on-teal .t-lg, .on-teal .t-display,
.reg-silent .t-xl, .reg-silent .t-lg, .reg-silent .t-display,
.sig__body .t-xl, .sig__body .t-lg { color: var(--cream); }
.t-xl      { font-size: var(--t-xl); }
.t-lg      { font-size: var(--t-lg); line-height: 0.95; }

.t-display, .t-xl, .t-lg, .t-md, .t-price,
.btn, .head__nav a, .menubar a, .navpanel__list a,
.mitem__name, .branch__hours dt, .status, .social__handle,
.foot h2, .specimen__label, .sheet__title, .provbar strong {
  font-family: var(--face);
  letter-spacing: normal;
}

.t-md {
  font-size: var(--t-md);
  font-weight: 640;
  line-height: 1.25;
}

.t-body  { max-width: var(--measure); }
.t-small { font-size: var(--t-sm); }

.t-price {
  font-stretch: 112%;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   4. The three registers

   The wrapper must not run at full intensity everywhere or it stops being
   special and becomes noise. Sections alternate; no two neighbours match.

     loud    paper + visible grid + mascots   hero, ordering, 404
     quiet   plain paper, grid absent         reading, menu body, locations
     silent  full-bleed photo or solid teal   signature food, footer
   -------------------------------------------------------------------------- */

.reg-loud {
  position: relative;
  background-color: var(--paper);
  background-image:
    linear-gradient(to right,  var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}

/* Paper tooth. One inline SVG turbulence, no network request, barely there —
   enough that the ground reads as stock instead of flat colour. */
.reg-loud::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
}

.reg-quiet  { background: var(--paper); }

.reg-silent { background: var(--ink); color: var(--cream); }

.on-teal, .reg-teal {
  background: var(--teal);
  color: var(--cream);
}

.band { padding-block: var(--band); }
.wrap { padding-inline: var(--bleed); }
.hold { max-width: 78rem; margin-inline: auto; }

/* Mascots in the margins, as they sit on the real paper. Decorative — alt=""
   in the markup, hidden from assistive tech. */
.mascot {
  position: absolute;
  opacity: 0.22;
  pointer-events: none;
  user-select: none;
  mix-blend-mode: multiply;
}

/* --------------------------------------------------------------------------
   5. Buttons

   Everything on this site is square-cornered. The Wolt and Bolt Food pills are
   the single exception, which is exactly why they stay recognisable — the shape
   Adam wanted to keep from the outgoing site.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.85rem 1.9rem;
  border: 2px solid var(--teal);
  font-stretch: 112%;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--speed) var(--ease),
              color var(--speed) var(--ease),
              border-color var(--speed) var(--ease);
}

.btn--primary {
  background: var(--teal);
  color: var(--cream);
}
.btn--secondary {
  background: transparent;
  color: var(--teal);
}

@media (hover: hover) {
  .btn--primary:hover   { background: var(--teal-deep); border-color: var(--teal-deep); }
  .btn--secondary:hover { background: var(--teal); color: var(--cream); }
}

/* Order platform pills — Wolt and Bolt Food */
.pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 4.6rem;
  padding: 0.85rem 1.5rem;
  border: 2px solid currentColor;
  border-radius: 999px;
  background: transparent;
  text-decoration: none;
  transition: background-color var(--speed) var(--ease),
              color var(--speed) var(--ease);
}
.pill img { height: 2rem; width: auto; }

.on-teal .pill { color: var(--cream); }
.on-teal .pill img { filter: none; }

/* On hover each platform fills with its own brand colour and keeps its white
   wordmark - which is how both brands actually present themselves. Wolt cyan,
   Bolt Food green (#14C670, sampled from their own launcher icon). The
   wordmark stays white on both, which is how each brand presents itself. */
.pill--wolt:hover, .pill--wolt:focus-visible { background: #00C2E8; border-color: #00C2E8; }
.pill--bolt:hover, .pill--bolt:focus-visible { background: #14C670; border-color: #14C670; }

@media (hover: none) {
  .pill--wolt, .pill--bolt { transition: none; }
}

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */

.head {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: var(--head-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: 0.75rem var(--bleed);
  background: rgb(237 235 230 / 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}

.head__mark { display: flex; align-items: center; text-decoration: none; }
.head__mark img { height: clamp(2.5rem, 3.6vw, 3.1rem); max-height: calc(var(--head-h) - 1.55rem); width: auto; }

.head__nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.25rem);
}
.head__nav a {
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--teal);
  padding-block: 0.4rem;
}
@media (hover: hover) {
  .head__nav a:hover { text-decoration: underline; text-underline-offset: 0.35em; }
}

.head .btn { min-height: 2.75rem; padding: 0.55rem 1.3rem; font-size: 0.8125rem; }

@media (max-width: 47.99em) {
  .head__nav a[data-desk] { display: none; }
  .head__nav a { font-size: 0.75rem; letter-spacing: 0.04em; }
  .head__nav { gap: 0.55rem; }
  .head .btn { padding: 0.5rem 0.85rem; font-size: 0.7rem; min-height: 2.5rem; }
  .head__mark img { height: 2.05rem; }
  .nav-toggle { width: 2.4rem; margin-right: -0.35rem; }
}

/* --------------------------------------------------------------------------
   7. Hero — "The Unwrap"
   -------------------------------------------------------------------------- */

@media (min-width: 48em) {
  :root { --head-h: 4.7rem; }

  /* Ordering block, centred */
  .orderblock__head { max-width: none; margin-inline: auto; text-align: center; justify-items: center; }
  .orderblock__head .t-body { max-width: 46ch; margin-inline: auto; }

  /* Find us heading, centred */
  .finder-head { text-align: center; }
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  overflow: hidden;
  isolation: isolate;
  --seam: 10px;       /* the teal edge along the cut */
  --slant: 1.75rem;   /* ~4deg across a phone-width photo */
}

.hero__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}

/* The photograph. The wrapper is teal and the picture is clipped a few pixels
   inside it, so the cut edge carries a teal stripe - the colour of the wrapper
   paper's print - instead of a hard photo edge. Phone: the top edge slants.

   The picture is absolutely positioned so the portrait photo can never set the
   hero's height - left in flow it stretched the desktop hero to ~1000px and
   pushed the wordmark below the fold. */
.hero__photo {
  position: relative;
  height: min(46svh, 27rem);
  background: var(--teal);
  /* Top and bottom cut at the same angle, each with its teal line: a comic panel. */
  clip-path: polygon(0 var(--slant), 100% 0, 100% calc(100% - var(--slant)), 0 100%);
}
.hero__photo picture {
  position: absolute;
  inset: 0;
}
.hero__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% 62%;   /* keeps the burger, not the fries, in frame */
  clip-path: polygon(0 calc(var(--slant) + var(--seam)), 100% var(--seam),
                     100% calc(100% - var(--slant) - var(--seam)), 0 calc(100% - var(--seam)));
}

.hero__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* stops the 1600px logo widening the column */
  justify-items: center;
  gap: 1.35rem;
  padding: clamp(2rem, 5vh, 3rem) var(--bleed) clamp(1.75rem, 4vh, 2.5rem);
  text-align: center;
}

.hero__logo {
  width: min(100%, 26rem);
  height: auto;
}

/* The tagline, in the logotype's teal. */
.hero__line {
  color: var(--teal);
  font-family: var(--face);
  font-size: clamp(1.05rem, 5vw, 1.4rem);
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1.15;
}

.hero__actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.75rem;
  width: 100%;
  justify-content: center;
}
.hero__actions .btn { flex: 1 1 0; min-width: 0; max-width: 13rem; padding-inline: 0.75rem; white-space: nowrap; }

/* Desktop: words on the paper to the left, the photograph filling the right
   half to the top, right and bottom edges, its left edge cut on the slant. */
@media (min-width: 56em) {
  .hero {
    --slant: clamp(3.5rem, 5vw, 5rem);
    --seam: 12px;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    grid-template-rows: minmax(0, 1fr);   /* the row fills the hero's min-height */
    align-content: stretch;
    align-items: center;
    /* Sized by the words, capped so the whole hero fits on a laptop screen. */
    min-height: clamp(28rem, calc(100svh - var(--head-h) - 6rem), 38rem);
  }
  .hero__photo {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    height: auto;
    margin-left: calc(var(--slant) * -1);
    clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%);
  }
  .hero__photo img {
    object-position: 38% 50%;
    clip-path: polygon(calc(var(--slant) + var(--seam)) 0, 100% 0, 100% 100%, var(--seam) 100%);
  }
  .hero__top {
    grid-column: 1;
    grid-row: 1;
    justify-items: start;
    gap: clamp(1.5rem, 3.2vh, 2.25rem);
    padding: clamp(2.5rem, 6vh, 4rem) clamp(1.5rem, 3vw, 3rem) clamp(2.5rem, 6vh, 4rem) var(--bleed);
    text-align: left;
  }
  .hero__logo { width: min(100%, 30rem); }
  .hero__line { font-size: clamp(1.25rem, 1.7vw, 1.6rem); }
  .hero__actions { width: auto; justify-content: start; }
  .hero__actions .btn { flex: none; max-width: none; padding-inline: 1.9rem; }
}

/* --------------------------------------------------------------------------
   8. Signature food — silent register
   -------------------------------------------------------------------------- */

.sig {
  position: relative;
  display: grid;
  align-items: end;
  /* Solid base beneath the photograph. If the image ever fails to load, the
     cream type still sits on a dark field rather than on bare paper. */
  background: #00342F;
  color: var(--cream);
  min-height: min(86svh, 46rem);
  overflow: hidden;
  isolation: isolate;
}

.sig__media { position: absolute; inset: 0; z-index: -2; }
.sig__media img { width: 100%; height: 100%; object-fit: cover; }

/* Scrim only where the type sits, so the photograph stays the subject.
   Tinted with the brand teal rather than neutral black. */
.sig::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgb(0 52 47 / 0.92) 0%, rgb(0 52 47 / 0.66) 34%, rgb(0 52 47 / 0) 72%);
}
@media (min-width: 56em) {
  .sig::after {
    background: linear-gradient(to right, rgb(0 52 47 / 0.93) 0%, rgb(0 52 47 / 0.72) 38%, rgb(0 52 47 / 0) 68%);
  }
}

.sig__body {
  position: relative;
  display: grid;
  gap: 1.15rem;
  justify-items: start;
  max-width: 34rem;
  padding: clamp(2.25rem, 6vw, 4.5rem) var(--bleed);
  color: var(--cream);
}
@media (min-width: 56em) {
  .sig { align-items: center; }
  .sig__body { max-width: 40rem; }
}

/* Icon call to action: the section's mascot, drawn as a mask so it takes the
   button's text colour and flips with it on hover. */
.iconbtn {
  display: inline-grid;
  place-items: center;
  width: 5.25rem;
  height: 5.25rem;
  border: 2px solid var(--cream);
  color: var(--cream);
  transition: background-color var(--speed) var(--ease),
              color var(--speed) var(--ease);
}
.iconbtn__icon {
  width: 3.5rem;
  height: 3.5rem;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}
@media (hover: hover) {
  .iconbtn:hover { background: var(--cream); color: var(--teal); }
}
.iconbtn:focus-visible { outline: 3px solid var(--cream); outline-offset: 4px; }

.sig__sub {
  font-size: var(--t-md);
  font-weight: 620;
  opacity: 0.92;
}

/* --------------------------------------------------------------------------
   10. Order sheet

   Motion here answers a tap — it shows what changed — which is the one kind of
   animation worth keeping everywhere.

   Without JavaScript the <dialog> never opens, so the same four links and both
   sets of hours are also printed in a plain static block. Ordering never
   depends on JS.
   -------------------------------------------------------------------------- */

.sheet {
  width: min(100%, 34rem);
  max-height: 88svh;
  margin: auto auto 0;
  padding: 0;
  border: 0;
  background: var(--teal);
  color: var(--cream);
  overflow: auto;
}
@media (min-width: 48em) {
  .sheet { margin: auto; }
}

.sheet::backdrop {
  background: rgb(12 11 8 / 0.62);
  backdrop-filter: blur(3px);
}

.sheet__in { padding: clamp(1.5rem, 4vw, 2.25rem); }

.sheet__title {
  font-stretch: 112%;
  font-weight: 900;
  font-size: clamp(1.35rem, 5.2vw, 1.85rem);
  line-height: 1.05;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  max-width: 14ch;
}

.sheet__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.sheet__close {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  margin: -0.5rem -0.5rem 0 0;
  border: 2px solid currentColor;
  border-radius: 999px;
  flex: none;
}

.loc {
  border-top: 1px solid rgb(230 227 222 / 0.3);
  padding-block: 1.4rem;
}
.loc:last-of-type { padding-bottom: 0.4rem; }

.loc__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.loc__pills { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.6rem; }

/* Open / closed. Suppressed entirely when the hours data is unverified —
   silence beats sending someone to a closed shop. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.status::before {
  content: '';
  width: 0.5rem; height: 0.5rem;
  border-radius: 999px;
  background: currentColor;
}
.status[hidden] { display: none; }
.status[data-open="false"] { opacity: 0.72; }

@media (prefers-reduced-motion: no-preference) {
  .sheet[open] { animation: sheet-in 300ms var(--ease); }
  @keyframes sheet-in {
    from { transform: translateY(12px); opacity: 0; }
  }
}

/* No-JS fallback: revealed only when JS never runs. */
.nojs-order { display: none; }
html:not(.js) .nojs-order { display: block; }
html:not(.js) [data-order-open] { display: none; }

/* --------------------------------------------------------------------------
   11. Mobile navigation

   A full-screen teal panel rather than a slide-out drawer: the site already
   inverts to teal for ordering and the footer, so the nav belongs to that same
   family instead of introducing a third surface treatment.
   -------------------------------------------------------------------------- */

.nav-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.5rem;
  place-items: center;
}
.nav-toggle span {
  display: block;
  width: 1.35rem;
  height: 2px;
  background: var(--teal);
  box-shadow: 0 -6px 0 var(--teal), 0 6px 0 var(--teal);
}

@media (max-width: 47.99em) {
  .nav-toggle { display: grid; }
}

.navpanel {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1.25rem;
  overflow-y: auto;
  padding: 1rem var(--bleed) calc(1.5rem + env(safe-area-inset-bottom, 0px));
  background: var(--teal);
  color: var(--cream);
}
.navpanel[hidden] { display: none; }

.navpanel__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.navpanel__top img { height: 2.1rem; width: auto; max-width: calc(100% - 4rem); }
.navpanel__top .sheet__close { flex: none; margin: 0; }

.navpanel__list {
  display: grid;
  align-content: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.navpanel__list a {
  display: block;
  padding-block: 0.4rem;
  font-stretch: 112%;
  /* sized so BIRZEBBUGA, the longest item, fits inside the panel at 320px */
  font-size: clamp(1.6rem, 8.2vw, 3rem);
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
  text-decoration: none;
  overflow-wrap: break-word;
}

.navpanel__foot { display: grid; gap: 0.75rem; }

/* --------------------------------------------------------------------------
   12. Homepage sections
   -------------------------------------------------------------------------- */

/* The line — quiet register. One sentence, set large, nothing else. */
.line {
  padding-block: clamp(3.5rem, 9vh, 7rem);
  text-align: center;
}
.line p {
  font-family: var(--face);   /* a headline, not body text */
  margin-inline: auto;
  max-width: 24ch;
  font-stretch: 118%;
  font-size: clamp(1.6rem, 4.6vw, 3.25rem);
  font-weight: 900;
  line-height: 1.02;
  text-transform: uppercase;
  color: var(--teal);
  text-wrap: balance;
}

/* Ordering block — the first of only two solid-teal fields on the site. */
.orderblock { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
.orderblock__head { display: grid; gap: 0.9rem; max-width: 30ch; }

.orderblock__locs {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 48em) {
  .orderblock__locs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.orderblock .loc {
  border-top: 1px solid rgb(230 227 222 / 0.32);
  padding-top: 1.35rem;
}

/* Social — curated, not embedded. Photographs laid on the paper as prints. */
.social__head {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem);
  text-align: center;
}
.social__handle {
  overflow-wrap: anywhere;
  max-width: 100%;
  font-stretch: 118%;
  /* sized so "@bulubeef_takeaway" stays on one line from 320px up */
  font-size: clamp(1rem, 6.2vw, 2.75rem);
  font-weight: 900;
  line-height: 1;
  text-transform: none;   /* a handle is lowercase - setting it in caps is wrong */
  color: var(--teal);
}

.prints {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.6rem, 1.6vw, 1.1rem);
}
@media (min-width: 40em) { .prints { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64em) { .prints { grid-template-columns: repeat(6, 1fr); } }

.prints img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
/* Squared up - the earlier slight rotation read as misalignment rather than
   as prints laid on a counter. */

/* Instagram and Facebook are third-party platforms, so they take the same pill
   shape as Wolt and Bolt Food and carry their own brand colours. The pill is
   the site's one rounded shape, reserved for "this takes you somewhere else". */
.social__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

.pill--brand {
  gap: 0.6rem;
  padding: 0.75rem 1.6rem;
  border: 0;
  color: #fff;
  font-family: var(--face);
  font-stretch: 112%;
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.pill--brand svg { width: 1.25rem; height: 1.25rem; flex: none; }

.pill--ig { background: linear-gradient(45deg, #F58529 0%, #DD2A7B 45%, #8134AF 72%, #515BD4 100%); }
.pill--fb { background: #1877F2; }

@media (hover: hover) {
  .pill--brand:hover { filter: brightness(1.08); }
}

/* Find us — quiet register. No map: a screenshot of Google Maps breaches their
   terms, the Static Maps API needs a key and billing, and a grey map tile in
   the middle of this palette earns nothing. Directions deep-link out instead. */
.finder {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
}
@media (min-width: 48em) {
  .finder { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); }
}

.branch { display: grid; gap: 0.85rem; align-content: start; }
.branch__name {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.75rem;
}
@media (max-width: 47.99em) {
  .branch__name { display: grid; justify-items: start; gap: 0.4rem; }
}
.branch__lines { display: grid; gap: 0.15rem; }
.branch dl { display: grid; gap: 0.15rem; margin: 0; }
.branch dt { font-weight: 700; }
.branch dd { margin: 0; }
.branch__hours {
  display: grid;
  gap: 0.1rem;
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.5;
}
.branch__hours div { display: flex; gap: 0.75rem; justify-content: space-between; max-width: 22rem; }
.branch__hours dt { font-weight: 640; }
.branch__hours dd { font-variant-numeric: tabular-nums; }

.branch__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.4rem; }
.branch__actions .btn { min-height: 2.9rem; padding: 0.6rem 1.2rem; font-size: 0.8125rem; }

/* Footer — the second and last solid-teal field. */
.foot { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
.foot__logo { width: min(100%, 30rem); height: auto; margin-inline: auto; }
.foot__cols {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
}
@media (min-width: 48em) { .foot__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.foot h2 {
  font-size: var(--t-sm);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.7rem;
  opacity: 0.75;
}
.foot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; }
.foot a { text-decoration: none; }
@media (hover: hover) { .foot a:hover { text-decoration: underline; text-underline-offset: 0.3em; } }

.pulsify {
  font-family: 'Outfit', var(--face-body);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--cream);
  text-decoration: none;
  position: relative;
}
.pulsify i { font-style: normal; position: relative; }
/* the tittle, in Pulsify violet - their guidelines say never omit it */
.pulsify i::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -0.32em;
  width: 0.19em;
  height: 0.19em;
  border-radius: 50%;
  background: #7C3AED;
  transform: translateX(-50%);
}

.foot__legal {
  border-top: 1px solid rgb(230 227 222 / 0.28);
  padding-top: 1.35rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: var(--t-sm);
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   13. Menu page

   Every category is in the HTML. No JavaScript-only tabs - that is the exact
   defect the outgoing site has. The category strip is anchor links; JS only
   highlights the active one.
   -------------------------------------------------------------------------- */

.menubar {
  position: sticky;
  overflow: hidden;   /* the strip scrolls internally; it must not widen the page */
  max-width: 100%;
  top: var(--head-h);
  z-index: 30;
  background: rgb(237 235 230 / 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.menubar ul {
  display: flex;
  gap: 0.25rem;
  margin: 0;
  padding: 0.5rem var(--bleed);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.menubar ul::-webkit-scrollbar { display: none; }
.menubar a {
  display: block;
  padding: 0.5rem 0.85rem;
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--teal);
  border-bottom: 2px solid transparent;
}
.menubar a[aria-current="true"] { border-bottom-color: var(--teal); }

.mcat { scroll-margin-top: calc(var(--head-h) + 3.5rem); padding-block: clamp(2.5rem, 6vw, 4.5rem); }


.mcat__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  padding: clamp(0.7rem, 1.6vw, 1rem) clamp(0.9rem, 2vw, 1.4rem);
  background: var(--teal);
  color: var(--cream);
}
.mcat__head .t-lg { margin-right: auto; overflow-wrap: anywhere; color: var(--cream); }
.mcat__head img { width: clamp(2.2rem, 4vw, 3rem); height: auto; filter: brightness(0) invert(1); opacity: 0.9; }
.mcat__count {
  font-family: var(--face);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.72;
}

/* --------------------------------------------------------------------------
   Menu items — the counter board.

   No photography here. Two earlier attempts (bordered cards, then a photo
   grid) both read as a generated catalogue: 53 repeating units in a grid look
   like a directory however they are styled, and the small thumbnails buried
   the food rather than selling it. The photography does its job on the
   homepage; the menu's job is to be read.

   The category headers are set as solid teal bars with cream type, which is
   how the real boards above Bulubeef's counter are made.
   -------------------------------------------------------------------------- */

.mitems {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.1rem, 2vw, 1.5rem) clamp(2rem, 5vw, 4.5rem);
}
@media (min-width: 52em) { .mitems { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.mitem { display: block; break-inside: avoid; }

.mitem__top {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.mitem__name {
  overflow-wrap: anywhere;
  font-family: var(--face);
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--teal);
}

/* The leader is a real menu device, not decoration - it ties a name to its
   price across a gap the eye would otherwise lose. */
.mitem__dots {
  flex: 1 1 auto;
  min-width: 1.5rem;
  align-self: center;
  border-bottom: 1px dotted rgb(0 110 101 / 0.4);
  transform: translateY(-0.15em);
}

.mitem__top .t-price {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  white-space: nowrap;
  color: var(--teal);
}

.mitem__desc {
  margin-top: 0.2rem;
  max-width: 46ch;
  font-size: 0.875rem;
  line-height: 1.45;
  opacity: 0.72;
}

.mitem--nophoto { }

.mitem__addon {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-weight: 700;
}

/* Honest empty state. An invented placeholder item would be worse than a gap. */
.mcat__awaiting {
  max-width: 46ch;
  padding: 1.1rem 1.25rem;
  border: 1px dashed var(--rule);
}

.provisional {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  border: 1px solid var(--rule);
  padding: 0.15rem 0.45rem;
  vertical-align: 0.15em;
}

/* Preview-only banner flagging unconfirmed content. Removed at launch. */
.provbar {
  background: var(--teal);
  color: var(--cream);
  padding: 0.7rem var(--bleed);
  font-size: var(--t-sm);
  text-align: center;
}
.provbar strong { font-weight: 800; }

/* --------------------------------------------------------------------------
   14. Location pages
   -------------------------------------------------------------------------- */

.locpage__head { display: grid; gap: 1.1rem; max-width: 42rem; }
.locpage__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 52em) { .locpage__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); } }

.locpage__order { display: grid; gap: 0.9rem; max-width: 26rem; }
@media (min-width: 52em) { .locpage__grid > .on-teal { align-self: start; } }
.locpage__pills { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.6rem; }

/* --------------------------------------------------------------------------
   15. 404
   -------------------------------------------------------------------------- */

.notfound {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1.35rem;
  min-height: 78svh;
  text-align: center;
}
.notfound__mascot { width: clamp(90px, 16vw, 180px); height: auto; opacity: 0.5; }
.notfound__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; }

/* --------------------------------------------------------------------------
   16. Prose — privacy page
   -------------------------------------------------------------------------- */

.prose { max-width: 40rem; }
.prose h2 { margin-top: 2.5rem; margin-bottom: 0.7rem; font-family: var(--face); font-size: var(--t-lg); }
.prose h2:first-child { margin-top: 0; }
.prose p + p { margin-top: 0.85em; }
.prose ul { margin: 0.85em 0 0; padding-left: 1.2rem; display: grid; gap: 0.35rem; }
.prose a { text-underline-offset: 0.2em; }