/* hurge base - reset, typography, the photograph, the page tag, the navigation */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
}

img { max-width: 100%; display: block; }

/* the cart bar is fixed, so while it is showing the page owes it the space it covers -
   without this it sits on top of the brand block at the end of the kaart */
body.has-cart { padding-bottom: calc(var(--nav-h) + var(--cartbar-h) + env(safe-area-inset-bottom)); }
a { color: var(--brand); }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

.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;
}

/* ---------- headings ---------- */

h1, h2, .disp { font-family: var(--font-display); font-weight: 600; margin: 0; }
h1 { font-size: 42px; line-height: .94; letter-spacing: -.025em; }
.page-home h1 { font-size: 46px; line-height: .92; letter-spacing: -.028em; }

/* the judgement line under the title: what this kitchen actually does */
.lead {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.4;
  color: var(--brand);
  max-width: var(--measure-lead);
  margin: 20px 0 0;
}

/* ---------- the photograph ---------- */

.hero { position: relative; height: var(--hero-h); overflow: hidden; background: #1a1410; }
.hero-img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- language, on the photograph ---------- */

.lang {
  position: absolute;
  top: calc(var(--s3) + env(safe-area-inset-top));
  right: var(--s3);
  display: flex;
  padding: 2px;
  border: var(--border) solid rgba(255, 255, 255, .6);
  border-radius: var(--r-pill);
  background: rgba(20, 16, 12, .34);
}

.lang button {
  height: 34px;
  padding: 0 13px;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
  cursor: pointer;
}

.lang button.is-active { background: #fff; color: var(--ink); }

/* ---------- page tag: every page opens with one, at the same height ---------- */

.pagetag { padding: 36px var(--gutter) 0; }
.pagetag .label, .pagetag h1.label { margin: 0; }

.label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--brand);
}

.title { padding: var(--first-gap) var(--gutter) 0; }

/* ---------- running prose ---------- */

.prose { padding: 0 var(--gutter); max-width: var(--measure); }
.prose p { font-size: 14px; line-height: 1.8; color: var(--prose); margin: 22px 0 0; }
.prose .open { font-weight: 600; color: var(--ink); }

/* the small brand rule that separates passages, and reappears in the brand block */
.dinkus { width: 26px; height: var(--border); background: var(--brand); margin: 30px var(--gutter) 0; }

.byline { padding: 26px var(--gutter) 0; font-size: 12px; color: var(--muted); }

/* ---------- navigation ----------
   The markup sits before <main> so that the desktop rule can be `position: sticky`.
   Sticky does not move an element, it only pins it in place once scrolling reaches it -
   with the nav written after <main> it landed at the foot of a desktop page and stuck
   to nothing. Fixed positioning on mobile ignores DOM order either way, so putting the
   nav first costs nothing there and is the better reading order anyway. */

.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--s1);
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding: 6px 10px calc(6px + env(safe-area-inset-bottom));
  background: var(--paper);
  border-top: 1px solid var(--hair);
}

.tabbar a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  border-radius: var(--r-pill);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}

.tabbar a[aria-current="page"] { background: var(--brand); color: var(--brand-ink); }
.tabbar .wordmark { display: none; }

/* ---------- desktop: the tab bar becomes a sticky header, the page a column ---------- */

@media (min-width: 768px) {
  body { padding-bottom: 0; font-size: 14px; }
  body.has-cart { padding-bottom: calc(var(--cartbar-h) + var(--gutter)); }

  .tabbar {
    position: sticky;
    top: 0; bottom: auto;
    z-index: 40;
    height: var(--header-h);
    padding: 0 var(--gutter);
    justify-content: flex-end;
    gap: var(--s2);
    border-top: 0;
    border-bottom: 1px solid var(--hair);
  }

  .tabbar .wordmark {
    display: block;
    margin-right: auto;
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
  }

  .tabbar a { flex: 0 0 auto; height: 38px; padding: 0 18px; }

  .column { max-width: var(--max-w); margin: 0 auto; }

  /* The photograph. On mobile it is full-bleed at --hero-h. On desktop it sits in the
     reading column at its own 3:2 - shown whole, and a normal 2000-2400px source
     displayed at ~760px stays sharp. A full-bleed band here is a ~3.4:1 letterbox that
     slices a tight food close-up into a strip and upscales a small file; clients send
     3:2 close-ups, not wide 2400px establishing shots, so the band rarely paid off.
     Fixed aspect + fixed width means the height is identical on every page, so the
     frame still holds still between pages. */
  .hero {
    height: auto;
    aspect-ratio: 3 / 2;
    max-width: var(--max-w);
    margin: var(--gutter) auto 0;
  }

  h1 { font-size: 52px; }
  .page-home h1 { font-size: 58px; }
  .lead { font-size: 23px; }
  .prose p { font-size: 15px; }
}