:root {
  /* Brand core */
  --union-wine: #4B1A1D;
  --union-wine-dark: #3A1416;
  --union-roast: #352516;
  --union-roast-deep: #231A12;
  --union-ink: #0D0D0C;
  --union-crema: #C08A62;
  --union-crema-pale: #E0C7A8;

  /* Neutrals */
  --union-linen: #F0E9E2;
  --union-paper: #FAF7F4;
  --union-rule: #D8CFC5;
  --union-leader: #C4B7A8;
  --union-stone: #8A7D6E;
  --union-bark: #6B5F52;
  --union-bark-deep: #3F362D;

  /* Semantic — text */
  --text-body: var(--union-ink);
  --text-prose: var(--union-bark-deep);
  --text-muted: var(--union-bark);
  --text-faint: var(--union-stone);
  --text-accent: var(--union-wine);
  --text-on-dark: var(--union-linen);
  --text-on-dark-muted: var(--union-crema);

  /* Semantic — surfaces */
  --surface-page: var(--union-linen);
  --surface-card: var(--union-paper);
  --surface-dark: var(--union-roast);
  --surface-dark-deep: var(--union-roast-deep);
  --surface-accent: var(--union-wine);
  --surface-inert: var(--union-rule);

  /* Semantic — lines */
  --border-hairline: var(--union-rule);
  --border-strong: var(--union-roast);
  --border-accent: var(--union-wine);
  --border-leader: var(--union-leader);

  /* Semantic — action */
  --action-bg: var(--union-wine);
  --action-bg-hover: var(--union-wine-dark);
  --action-fg: var(--union-linen);
  --action-ring: var(--union-crema);
  --action-disabled-bg: var(--union-rule);
  --action-disabled-fg: var(--union-stone);
}
:root {
  /* 8px vertical rhythm */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --space-9: 96px;

  /* Print — mm, A4/A3 sheets */
  --print-margin: 16mm;
  --print-gutter: 16mm;
  --print-section-gap: 11mm;
  --print-item-gap: 2.4mm;

  --measure-page: 1100px;
  --measure-prose: 620px;

  --radius: 0px;              /* square corners throughout */
  --hairline: 1px;
  --tap-min: 44px;

  --grid-columns: 12;
  --grid-gutter-screen: 24px;
  --grid-gutter-print: 5mm;
}
:root {
  --font-display: "Bodoni Moda", Didot, "Times New Roman", serif;
  --font-text: "Spectral", Georgia, serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;

  /* Screen scale */
  --text-display: 72px;
  --text-display-line: 0.98;
  --text-heading: 34px;
  --text-heading-line: 1.15;
  --text-subheading: 24px;
  --text-eyebrow: 13px;
  --text-body-size: 17px;
  --text-body-line: 1.62;
  --text-ui: 14px;
  --text-detail: 14px;
  --text-caption: 10px;

  /* Print scale */
  --print-eyebrow: 11pt;
  --print-item: 13pt;
  --print-fineprint: 8.5pt;

  --tracking-eyebrow: 0.24em;
  --tracking-ui: 0.1em;
  --tracking-caption: 0.14em;

  --weight-display: 400;
  --weight-display-strong: 500;
  --weight-text: 400;
  --weight-text-strong: 600;
}

/* Union site layer. Tokens come from tokens.css (copied from the design system).
   Brand rules held here: square corners, hairlines not shadows, flat grounds,
   150ms colour/opacity motion only, full-opacity text. */

:root {
  --font-hebrew: "Frank Ruhl Libre", "David", "Times New Roman", serif;
  --gutter: clamp(16px, 4vw, 24px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-text);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  font-weight: var(--weight-text);
  text-rendering: optimizeLegibility;
}
[lang="he"] body, body[lang="he"] { --font-display: var(--font-hebrew); --font-text: var(--font-hebrew); }

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }

.wrap { width: 100%; max-width: calc(var(--measure-page) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

.skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { width: auto; height: auto; clip-path: none; inset-inline-start: var(--gutter); top: var(--space-2); z-index: 10; background: var(--union-paper); padding: var(--space-2) var(--space-4); outline: 1px solid var(--action-ring); }

:focus-visible { outline: 1px solid var(--action-ring); outline-offset: 3px; }

/* Type roles */
.eyebrow {
  font-family: var(--font-display);
  font-weight: var(--weight-display-strong);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-accent);
  line-height: 1.4;
}
[lang="he"] .eyebrow { letter-spacing: 0.08em; font-size: 15px; }
.display {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(44px, 9vw, var(--text-display));
  line-height: var(--text-display-line);
  letter-spacing: -0.01em;
}
.heading {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(28px, 5vw, var(--text-heading));
  line-height: var(--text-heading-line);
}
.prose { color: var(--text-prose); max-width: var(--measure-prose); }
.prose p + p { margin-top: var(--space-4); }
.fine {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--text-muted);
}
[lang="he"] .fine { font-family: var(--font-hebrew); letter-spacing: 0; font-size: 13px; }

/* Buttons — Button.jsx, as CSS */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap-min); padding: 0 26px;
  font-family: var(--font-text); font-size: var(--text-ui); line-height: 1;
  letter-spacing: var(--tracking-ui); text-transform: uppercase; text-decoration: none;
  border: var(--hairline) solid transparent; border-radius: var(--radius);
  transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
}
[lang="he"] .btn { letter-spacing: 0.04em; font-size: 16px; }
.btn-primary { background: var(--action-bg); color: var(--action-fg); }
.btn-primary:hover { background: var(--action-bg-hover); }
.btn-secondary { color: var(--border-strong); border-color: var(--border-strong); }
.btn-secondary:hover { color: var(--action-bg-hover); border-color: var(--action-bg-hover); }
.on-dark .btn-secondary { color: var(--text-on-dark); border-color: var(--union-crema); }
.on-dark .btn-secondary:hover { color: var(--union-crema-pale); border-color: var(--union-crema-pale); }
.quiet {
  color: var(--text-accent); text-decoration: none;
  border-bottom: var(--hairline) solid var(--border-accent); padding-bottom: 2px;
  transition: color 150ms ease-out, border-color 150ms ease-out;
}
.quiet:hover { color: var(--action-bg-hover); border-color: var(--action-bg-hover); }

/* Header */
.site-head { border-bottom: var(--hairline) solid var(--border-hairline); background: var(--surface-page); position: sticky; top: 0; z-index: 5; }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 64px; }
.brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.brand img { width: 30px; }
.brand span { font-family: var(--font-display); letter-spacing: 0.2em; font-size: 17px; }
.site-nav { display: flex; align-items: center; gap: clamp(var(--space-3), 3vw, var(--space-6)); }
.site-nav a {
  font-size: var(--text-ui); letter-spacing: var(--tracking-ui); text-transform: uppercase; text-decoration: none;
  min-height: var(--tap-min); display: inline-flex; align-items: center;
  transition: color 150ms ease-out;
}
[lang="he"] .site-nav a { letter-spacing: 0; font-size: 16px; }
.site-nav a:hover { color: var(--text-accent); }
.site-nav .lang { color: var(--text-accent); font-family: var(--font-hebrew); text-transform: none; letter-spacing: 0; font-size: 16px; }
[lang="he"] .site-nav .lang { font-family: "Spectral", Georgia, serif; }
@media (max-width: 560px) { .site-nav .opt { display: none; } }

/* Hero — roast panel, reversed lockup */
.hero { background: var(--surface-dark); color: var(--text-on-dark); text-align: center; padding: var(--space-8) 0 var(--space-9); }
.hero .logo { width: min(360px, 78vw); margin: 0 auto var(--space-7); }
.hero .eyebrow { color: var(--union-crema); }
.hero h1 { margin-top: var(--space-4); }
.hero .lede { max-width: 540px; margin: var(--space-5) auto 0; color: var(--union-crema-pale); font-size: 19px; }
.hero .actions { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; margin-top: var(--space-7); }

/* Sections */
section.block { padding: var(--space-9) 0; }
section.block + section.block { border-top: var(--hairline) solid var(--border-hairline); }
.block-head { display: grid; gap: var(--space-3); margin-bottom: var(--space-7); }

.about { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 820px) { .about { grid-template-columns: 5fr 7fr; gap: var(--space-5); } }

/* Happy hour — hairline card on paper, like Card.jsx */
.happy {
  margin-top: var(--space-8);
  background: var(--surface-card);
  border: var(--hairline) solid var(--border-hairline);
  display: grid; grid-template-columns: 1fr; text-align: center;
}
.happy > div { padding: var(--space-6) var(--space-5); }
.happy > div + div { border-top: var(--hairline) solid var(--border-hairline); }
@media (min-width: 820px) {
  .happy { grid-template-columns: 1.3fr 1fr 1fr; align-items: center; }
  .happy > div + div { border-top: 0; border-inline-start: var(--hairline) solid var(--border-hairline); }
}
.happy .heading { margin-top: var(--space-2); }
.happy .big { white-space: nowrap; font-family: var(--font-display); font-size: clamp(36px, 4.4vw, 48px); line-height: 1; color: var(--text-accent); font-variant-numeric: lining-nums; }
.happy .sub { margin-top: var(--space-2); color: var(--text-muted); font-size: var(--text-detail); }

/* Menu — the menu itself is /menu.pdf */
.menu-pdf { max-width: 640px; }
.menu-pdf .actions { margin-top: var(--space-5); }

/* Visit */
.visit-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 820px) { .visit-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }
.visit-grid h3 { margin-bottom: var(--space-3); padding-bottom: var(--space-3); border-bottom: var(--hairline) solid var(--border-strong); }
address { font-style: normal; }
.visit-grid .actions { margin-top: var(--space-4); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.hours { width: 100%; border-collapse: collapse; }
.hours td { padding: 3px 0; vertical-align: baseline; }
.hours td + td { text-align: end; font-variant-numeric: lining-nums tabular-nums; }
/* The time cell is direction:ltr for the digits, so "end" would mean right; pin it to the RTL end. */
[dir="rtl"] .hours td + td { text-align: left; }
.hours tr.today td { color: var(--text-accent); }
.hours tr.today td:first-child::after { content: " ·"; }

/* Instagram band under the hero: QR on desktop, Subscribe button on phones/tablets. */
.insta-band { padding: var(--space-7) 0 0; }
.insta {
  background: var(--surface-card); border: var(--hairline) solid var(--border-hairline);
  display: grid; grid-template-columns: 1fr; align-items: center; gap: var(--space-5);
  padding: var(--space-6) var(--space-5);
}
.insta-qr, .insta-qr img { display: block; }
.insta-cta { justify-self: start; }
.desktop-only { display: none; }
@media (min-width: 820px) {
  .insta { grid-template-columns: auto 1fr; padding: var(--space-6); gap: var(--space-6); }
  .desktop-only { display: revert; }
  .mobile-only { display: none; }
}
@media (max-width: 819px) { .insta-qr { display: none; } }
.insta img { width: 148px; border: var(--hairline) solid var(--border-hairline); background: #fff; padding: 8px; }

/* FAQ */
.faq { border-top: var(--hairline) solid var(--border-strong); max-width: 820px; }
.faq details { border-bottom: var(--hairline) solid var(--border-hairline); }
.faq summary {
  list-style: none; cursor: pointer; min-height: var(--tap-min);
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4);
  padding: var(--space-4) 0;
  font-family: var(--font-display); font-size: 21px; line-height: 1.3;
  transition: color 150ms ease-out;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--text-accent); font-family: var(--font-text); flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { color: var(--text-accent); }
.faq details p { padding: 0 0 var(--space-5); color: var(--text-prose); max-width: var(--measure-prose); }

/* Footer — deep roast */
.site-foot { background: var(--surface-dark-deep); color: var(--text-on-dark); padding: var(--space-8) 0 var(--space-6); }
.site-foot .top { display: grid; gap: var(--space-6); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 820px) { .site-foot .top { grid-template-columns: 1fr 1fr 1fr; } }
.site-foot .logo { width: 200px; }
.site-foot p, .site-foot address { color: var(--union-crema-pale); font-size: var(--text-detail); }
.site-foot a { color: var(--text-on-dark); text-decoration: none; border-bottom: var(--hairline) solid var(--union-crema); transition: color 150ms ease-out; }
.site-foot a:hover { color: var(--union-crema-pale); }
.site-foot .base { margin-top: var(--space-7); padding-top: var(--space-3); border-top: var(--hairline) solid var(--union-crema); color: var(--union-crema); }
.site-foot .base .fine { color: var(--union-crema); }

/* Hebrew: numbers and Latin wine names keep their own direction */
.ltr { direction: ltr; unicode-bidi: isolate; }