/* ==========================================================================
   Leaf & Loaf — Mathöll Höfða, Reykjavík

   ONE LAYOUT, FOUR THEMES.

   THE RULE THAT MATTERS: a theme may change colour, typeface and corner radius.
   A theme may NOT move anything.

   This stylesheet used to carry five "views", and each one rearranged the menu
   into a different design — a gallery grid, a centred column, a printed card, a
   photo essay. It was a showcase, not a restaurant site: the same dish looked
   like four different products depending on a dropdown nobody asked for. That
   was cut on client feedback, and the rule above is what stops it coming back.
   Every theme below shares one DOM and one layout. If you find yourself writing
   `[data-theme="x"] .course { display: grid }`, stop.

   The four:

     light     the house look. Warm paper, spruce green, Cormorant + Inter.
     dark      the same page at night.
     bright    fast-casual. White, black, a signature yellow, condensed caps.
               Built after the client pointed at xoisland.is: this borrows that
               visual LANGUAGE — yellow-and-black, round pills, big uppercase
               display type — and none of that site's assets, logo or copy.
     nordic    the same energy, Icelandic palette. Birch paper, deep spruce,
               cloudberry buttons. Bright's confidence without the highway
               yellow.

   Principle, unchanged: the food is the only saturated thing on the page.
   Everything else is paper, ink, hairline and air.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Inter:wght@300;400;500;600&family=Lora:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* --------------------------------------------------------------------------
   What a theme is allowed to set.

   Every palette block below sets this same list and nothing else. Keeping the
   contract explicit is what makes "themes cannot move anything" enforceable:
   there is no layout variable here to reach for.

     --font-display   headings, dish names, prices
     --font-body      running text
     --font-quote     review quotes and the slab quote — long-form, so never
                      the condensed display face
     --display-tt     text-transform for display type
     --display-ls     letter-spacing for display type
     --display-em     font-style for the emphasised half of a two-line title.
                      Bebas Neue ships no italic, so themes using it say
                      `normal` rather than letting the browser fake a slant.
     --display-weight weight for the big titles
     --radius-card    cards, panels, the map frame
     --btn-bg/--btn-fg  the one solid button, and the pressed filter chip
   -------------------------------------------------------------------------- */

/* ------------------------------------------------------------ palette: light */
:root,
[data-theme="light"] {
  --paper:        #FBFAF7;
  --paper-2:      #F3F1EB;
  --card:         #FFFFFF;
  --ink:          #1A1F1B;
  --ink-2:        #5A625B;
  --ink-3:        #8C948C;
  --rule:         #E2DFD6;
  --rule-strong:  #CFCBBE;
  --moss:         #3A5A40;
  --moss-soft:    #EAEFE8;
  --berry:        #8C3B4A;
  --star:         #C08A2E;
  --on-accent:    #FBFAF7;     /* text that sits on a --moss or --ink fill */
  --shadow:       0 1px 2px rgba(26, 31, 27, 0.04), 0 12px 40px rgba(26, 31, 27, 0.06);
  --shadow-lift:  0 18px 44px rgba(26, 31, 27, 0.12);
  --hero-veil:    linear-gradient(180deg, rgba(251,250,247,0.10) 0%, rgba(251,250,247,0.55) 55%, rgba(251,250,247,1) 100%);

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-quote:   'Cormorant Garamond', Georgia, serif;
  --display-tt:   none;
  --display-ls:   -0.005em;
  --display-em:   italic;
  --display-weight: 300;
  --radius-card:  14px;
  --btn-bg:       var(--ink);
  --btn-fg:       var(--paper);
  color-scheme: light;
}

/* ------------------------------------------------------------- palette: dark */
[data-theme="dark"] {
  --paper:        #0E1210;
  --paper-2:      #141917;
  --card:         #171D1A;
  --ink:          #EDEEE9;
  --ink-2:        #A2ADA4;
  --ink-3:        #6F7A72;
  --rule:         #262E29;
  --rule-strong:  #38423C;
  --moss:         #9DBFA3;
  --moss-soft:    #1B241E;
  --berry:        #D98D99;
  --star:         #E0B457;
  --on-accent:    #0E1210;
  --shadow:       0 1px 2px rgba(0,0,0,0.4), 0 16px 48px rgba(0,0,0,0.45);
  --shadow-lift:  0 20px 50px rgba(0,0,0,0.55);
  --hero-veil:    linear-gradient(180deg, rgba(14,18,16,0.25) 0%, rgba(14,18,16,0.70) 55%, rgba(14,18,16,1) 100%);

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-quote:   'Cormorant Garamond', Georgia, serif;
  --display-tt:   none;
  --display-ls:   -0.005em;
  --display-em:   italic;
  --display-weight: 300;
  --radius-card:  14px;
  --btn-bg:       var(--ink);
  --btn-fg:       var(--paper);
  color-scheme: dark;
}

/* ----------------------------------------------------------- palette: bright
   Fast-casual, in the visual language the client pointed at: white paper, black
   ink, one loud yellow doing all the shouting, and condensed uppercase display
   type. Everything here is Leaf & Loaf's own — the palette and type treatment
   are the borrowed idea, not any asset.

   The yellow is a FILL, never text. #FFDD00 on white is roughly 1.3:1, which is
   invisible, so it lives on --btn-bg with black on top (about 16:1) and the red
   carries anything that has to be readable as text. */
[data-theme="bright"] {
  --paper:        #FFFFFF;
  --paper-2:      #FFF8D9;      /* the yellow, diluted, for the banded sections */
  --card:         #FFFFFF;
  --ink:          #101010;
  --ink-2:        #4A4A4A;
  --ink-3:        #6B6B6B;      /* 5.4:1 on white — the eyebrow labels are content */
  --rule:         #E8E4D2;
  --rule-strong:  #CFCBB8;
  --moss:         #D31F26;      /* the readable accent: prices, links, the mark */
  --moss-soft:    #FDEDED;
  --berry:        #B0161C;
  --star:         #E8A400;
  --on-accent:    #FFFFFF;
  --shadow:       0 1px 2px rgba(16,16,16,0.05), 0 10px 34px rgba(16,16,16,0.08);
  --shadow-lift:  0 16px 40px rgba(16,16,16,0.16);
  --hero-veil:    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.55) 52%, rgba(255,255,255,1) 100%);

  --font-display: 'Bebas Neue', Impact, sans-serif;
  --font-body:    'Lora', Georgia, serif;
  --font-quote:   'Lora', Georgia, serif;
  --display-tt:   uppercase;
  --display-ls:   0.01em;
  --display-em:   normal;       /* Bebas Neue has no italic; do not fake one */
  --display-weight: 400;
  --radius-card:  6px;          /* the reference keeps corners nearly square */
  --btn-bg:       #FFDD00;
  --btn-fg:       #101010;
  color-scheme: light;
}

/* ----------------------------------------------------------- palette: nordic
   The same confidence, rebuilt in Icelandic colour. Bright's structure —
   condensed caps, round pills, a bold solid button — on birch paper, deep
   spruce ink and a cloudberry button instead of highway yellow. Body type goes
   back to Inter, so it reads as Nordic rather than as a diner. */
[data-theme="nordic"] {
  --paper:        #FCFBF6;
  --paper-2:      #EAEFE6;
  --card:         #FFFFFF;
  --ink:          #12211A;
  --ink-2:        #4A5A50;
  --ink-3:        #67736B;      /* 4.7:1 on birch paper, so the labels pass AA */
  --rule:         #DCE3DA;
  --rule-strong:  #C1CBBE;
  --moss:         #1C6B4A;
  --moss-soft:    #E1EFE7;
  --berry:        #A6452F;
  --star:         #C08A2E;
  --on-accent:    #FCFBF6;
  --shadow:       0 1px 2px rgba(18,33,26,0.05), 0 10px 34px rgba(18,33,26,0.08);
  --shadow-lift:  0 16px 42px rgba(18,33,26,0.14);
  --hero-veil:    linear-gradient(180deg, rgba(252,251,246,0.08) 0%, rgba(252,251,246,0.55) 52%, rgba(252,251,246,1) 100%);

  --font-display: 'Bebas Neue', Impact, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-quote:   'Cormorant Garamond', Georgia, serif;
  --display-tt:   uppercase;
  --display-ls:   0.03em;       /* a touch more air than bright: less shouty */
  --display-em:   normal;
  --display-weight: 400;
  --radius-card:  12px;
  --btn-bg:       #F0BE45;      /* cloudberry */
  --btn-fg:       #12211A;
  color-scheme: light;
}

/* ------------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  overflow-x: hidden;
  transition: background-color .35s ease, color .35s ease;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

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

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

/* Anchor links land below the fixed header rather than under it. */
:target { scroll-margin-top: 90px; }

/* --------------------------------------------------------------- typography */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: var(--display-ls);
  text-transform: var(--display-tt);
}

/* The emphasised half of a two-line title. Themes on a face with no italic set
   --display-em to normal, so the browser never synthesises a slant. */
.hero__title em,
.section-head h2 em,
.section-h2 em { font-style: var(--display-em); color: var(--moss); }

/* The two long-form quotes on the site. Never the condensed display face — it
   is built for four words at 80px, not four lines at 18px. */
.review__quote, .slab__quote p { font-family: var(--font-quote); text-transform: none; }

/* Always Inter, on every theme. Small uppercase letter-spaced text is the one
   place a serif or a condensed face actively hurts — these are 11px labels. */
.eyebrow {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.lede {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--ink-2);
  font-weight: 300;
  line-height: 1.7;
  max-width: 58ch;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.wrap--narrow { max-width: 860px; }

section { padding: clamp(56px, 8vw, 120px) 0; }

.rule { height: 1px; background: var(--rule); border: 0; }

/* ============================================================ 01 · masthead */
.masthead {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 28px;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, padding .3s ease, background-color .35s ease;
}
.masthead.is-stuck { border-bottom-color: var(--rule); padding-top: 9px; padding-bottom: 9px; }

/* the circular mark — shared grammar with the manailab.com landing */
.ll-mark {
  --ll-size: 42px;
  position: relative;
  flex: 0 0 auto;
  width: var(--ll-size);
  height: var(--ll-size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--moss);
  color: var(--on-accent);
  font-family: var(--font-display);
  font-size: calc(var(--ll-size) * 0.42);
  letter-spacing: 0.02em;
  line-height: 1;
  border: 0;
  overflow: hidden;
}

.ll-mark::after {            /* a slow sheen, once in a while — alive, not busy */
  content: '';
  position: absolute;
  inset: -40%;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.28) 50%, transparent 58%);
  animation: ll-sheen 14s ease-in-out infinite;
}

@keyframes ll-sheen {
  0%, 78%, 100% { transform: translateX(-120%); }
  88%           { transform: translateX(120%); }
}

.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; min-width: 0; }
.brand__name { font-family: var(--font-display); font-size: 1.34rem; letter-spacing: 0.01em; line-height: 1.05; }
.brand__place { font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); }

.nav { display: flex; align-items: center; gap: 26px; }
.nav a {
  font-size: 0.84rem;
  letter-spacing: 0.03em;
  color: var(--ink-2);
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--moss); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--moss); }

.tools { display: flex; align-items: center; gap: 8px; }

/* ------------------------------------------------------------- theme picker
   Four themes need a list, not a toggle. It is kept to one small button that
   shows the current theme as a swatch, so the header gains a circle rather
   than a word, and the list only exists once you ask for it. */
.themepick { position: relative; }

.themepick__menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 244px; max-width: calc(100vw - 32px);
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  box-shadow: var(--shadow);
  display: none;
  z-index: 950;
}
.themepick[data-open="true"] .themepick__menu { display: block; }

.themepick__opt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink);
  text-align: left; cursor: pointer;
  transition: background .18s ease;
}
.themepick__opt:hover { background: var(--paper-2); }
.themepick__opt[aria-checked="true"] { background: var(--moss-soft); }

/* The label is running text, not display type — it must stay readable when the
   active theme is one of the all-caps condensed ones. */
.themepick__txt b {
  display: block; font-family: var(--font-body); font-size: .86rem; font-weight: 500;
  line-height: 1.2; letter-spacing: 0; text-transform: none;
}
.themepick__txt span { display: block; font-size: .72rem; color: var(--ink-3); line-height: 1.35; }

.themepick__sw {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--rule-strong);
}
.themepick__btn .themepick__sw { width: 19px; height: 19px; }

/* Each swatch is the theme's paper against its loudest colour, so the list can
   be read at a glance without opening four themes to find out. */
.sw--light  { background: linear-gradient(140deg, #FBFAF7 46%, #3A5A40 46%); }
.sw--dark   { background: linear-gradient(140deg, #0E1210 46%, #9DBFA3 46%); }
.sw--bright { background: linear-gradient(140deg, #FFDD00 46%, #D31F26 46%); }
.sw--nordic { background: linear-gradient(140deg, #F0BE45 46%, #1C6B4A 46%); }

/* On a phone the button sits about a third of the way across the header, so a
   244px menu anchored to its right edge hangs 80px off the left of the screen.
   Below 620px the menu is measured against the viewport instead of the button,
   which fits on any width and needs no per-page tuning — the three pages each
   have a different number of controls beside it. */
@media (max-width: 620px) {
  .themepick__menu {
    position: fixed;
    top: 62px; left: 12px; right: 12px;
    width: auto; min-width: 0; max-width: none;
  }
}

/* ------------------------------------------------------------- icon buttons
   The theme toggle and the mobile nav button. 40px square is the smallest
   comfortable tap target on a phone; anything smaller is a coin toss with a
   thumb. */
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: 0 0 auto;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.icon-btn:hover { border-color: var(--moss); color: var(--moss); }
.icon-btn svg { display: block; }

/* the hamburger, drawn rather than typed so it lines up at any size */
.navtoggle { display: none; }
.navtoggle__bars, .navtoggle__bars::before, .navtoggle__bars::after {
  content: '';
  display: block;
  width: 17px; height: 1.6px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .25s ease, opacity .2s ease;
}
.navtoggle__bars { position: relative; }
.navtoggle__bars::before { position: absolute; top: -5.5px; }
.navtoggle__bars::after  { position: absolute; top:  5.5px; }

/* open state: the three bars become a cross */
.nav-open .navtoggle { border-color: var(--moss); color: var(--moss); }
.nav-open .navtoggle__bars { background: transparent; }
.nav-open .navtoggle__bars::before { transform: translateY(5.5px) rotate(45deg); }
.nav-open .navtoggle__bars::after  { transform: translateY(-5.5px) rotate(-45deg); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: transparent;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.pill:hover { border-color: var(--moss); color: var(--moss); }

.pill--solid {
  background: var(--btn-bg);
  border-color: var(--btn-bg);
  color: var(--btn-fg);
}
.pill--solid:hover { background: var(--moss); border-color: var(--moss); color: var(--on-accent); }

/* ================================================================ 02 · hero */
.hero {
  position: relative;
  min-height: min(86svh, 860px);
  display: flex;
  align-items: flex-end;
  /* Top padding clears the fixed masthead. Without it the first line of the
     title sits underneath the bar, and with align-items:flex-end any content
     taller than min-height overflows off the TOP of a flex container — where
     it cannot be scrolled back into view. */
  padding: clamp(100px, 13vh, 148px) 0 clamp(48px, 7vw, 96px);
  overflow: hidden;
}

.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  animation: hero-settle 2.4s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes hero-settle { to { transform: scale(1); } }

.hero__veil { position: absolute; inset: 0; z-index: 1; background: var(--hero-veil); transition: background .35s ease; }
.hero__inner { position: relative; z-index: 2; width: 100%; }

.hero__title {
  font-size: clamp(2.5rem, 6.4vw, 5rem);
  font-weight: var(--display-weight);
  max-width: 16ch;
  margin: 16px 0 20px;
}
.section-h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); font-weight: var(--display-weight); margin: 10px 0 18px; }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}
.hero__meta strong { font-weight: 500; color: var(--ink); }

.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.hero__ctas .pill { height: 46px; padding: 0 26px; font-size: 0.76rem; }

/* ======================================================== 03 · today ribbon */
.ribbon {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
  padding: 0;
  transition: background-color .35s ease;
}
.ribbon__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.ribbon__cell {
  padding: 28px 28px;
  border-left: 1px solid var(--rule);
}
.ribbon__cell:first-child { border-left: 0; }
.ribbon__cell .eyebrow { margin-bottom: 8px; }
.ribbon__cell p { font-size: 0.94rem; color: var(--ink-2); }
.ribbon__cell strong { display: block; font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); line-height: 1.2; }

.open-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--moss);
  margin-right: 7px;
  vertical-align: middle;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--moss) 55%, transparent);
  animation: pulse 2.8s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--moss) 55%, transparent); }
  70%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.open-dot--closed { background: var(--ink-3); animation: none; }

/* ================================================================ 04 · menu */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; margin-bottom: 12px; }
.section-head h2 { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: var(--display-weight); }


.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 8px; }
.filter {
  border: 1px solid var(--rule-strong);
  background: transparent;
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.filter:hover { border-color: var(--moss); color: var(--moss); }
.filter[aria-pressed="true"] { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }

/* ------------------------------------------------------------- dish cards
   A photo-led card grid, in one arrangement, on every screen. This is what a
   modern restaurant menu looks like: you see the food. The grid collapses to a
   single column on a phone with no extra rules, because auto-fill does it. */
.course { margin-top: 48px; }
.course__label {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-strong);
  margin-bottom: 22px;
}
.course__label h3 { font-size: 1.7rem; font-weight: 400; }
.course__label span { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }

.course__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}

.dish {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow);
  transition: transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease, border-color .2s ease;
}
.dish:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--rule-strong); }

.dish__photo { display: block; height: 190px; background: var(--paper-2); flex: 0 0 auto; }
.dish__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The three drinks have no photograph — there is no juice or coffee shot in
   the house set, and a picture of a water carafe captioned "Fresh Pressed
   Juice" would be a small lie. A flat grey box read as a broken image, so the
   empty tile is drawn instead: a tinted panel with the house leaf on it. The
   absence now looks chosen, which it is. */
.dish__photo--none {
  position: relative;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--paper-2), var(--moss-soft));
}

/* The drawn illustrations. Inline SVG so stroke="currentColor" resolves
   against the theme — the same drawing is moss green on light and a paler
   green on dark, with no per-theme assets. */
.illus { width: 52%; max-width: 120px; height: auto; color: var(--moss); opacity: .5; }
[data-theme="dark"] .illus { opacity: .65; }

.dish__head {
  width: 100%;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 18px;
  align-items: baseline;
  align-content: start;
  padding: 20px 22px 22px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s ease;
}
.dish__head:hover { background: var(--paper-2); }

.dish__name { font-family: var(--font-display); font-size: 1.42rem; font-weight: 400; line-height: 1.2; }
.dish__price {
  font-family: var(--font-display);
  font-size: 1.34rem;
  color: var(--moss);
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}
.dish__price small { font-size: 0.6em; letter-spacing: 0.07em; color: var(--ink-3); margin-left: 4px; }

.dish__desc { grid-column: 1 / -1; font-size: 0.9rem; color: var(--ink-2); font-weight: 300; margin-top: 2px; }

.tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tag {
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--moss-soft);
  color: var(--moss);
}
.tag--muted { background: transparent; border: 1px solid var(--rule-strong); color: var(--ink-3); }

.dish__chevron {
  grid-column: 1 / -1;
  margin-top: 14px;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex; align-items: center; gap: 6px;
}
.dish__chevron svg { transition: transform .28s ease; }
.dish.is-open .dish__chevron { color: var(--moss); }
.dish.is-open .dish__chevron svg { transform: rotate(180deg); }

/* nutrition drawer */
.dish__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height .4s cubic-bezier(.16,1,.3,1);
}
.dish.is-open .dish__panel { max-height: 640px; }
.panel-inner { padding: 0 22px 24px; }

.nutri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 14px;
}
.nutri div { background: var(--card); padding: 12px 14px; }
.nutri dt { font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; }
.nutri dd {
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.nutri dd span { font-size: 0.5em; color: var(--ink-3); margin-left: 2px; }

.ingredients { font-size: 0.86rem; color: var(--ink-2); font-weight: 300; }
.ingredients b { font-weight: 500; color: var(--ink); }
.disclaimer { font-size: 0.75rem; color: var(--ink-3); margin-top: 10px; font-style: italic; }

/* The tiles are crops of two on-brand photographs, not a shot of each plate,
   so the page says so once rather than implying otherwise. */
.photo-note { font-size: .75rem; color: var(--ink-3); font-style: italic; margin-top: 26px; }

/* ====================================================== 05 · full-bleed slab */
.slab { position: relative; height: clamp(280px, 44vh, 560px); overflow: hidden; padding: 0; }
.slab img { width: 100%; height: 100%; object-fit: cover; }
.slab__quote {
  position: absolute; inset: auto 0 0 0;
  padding: 44px 24px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.62));
  color: #FBFAF7;
}
.slab__quote p {
  font-style: var(--display-em);
  font-size: clamp(1.3rem, 3vw, 2.2rem);
  font-weight: 400;
  max-width: 24ch;
  margin: 0 auto;
  text-align: center;
  line-height: 1.3;
}

/* ==========================================================================
   06 · CUSTOMER FEEDBACK

   Cards rather than a carousel. A carousel hides most of what it holds behind
   a control people do not press, and on a phone it fights the page scroll.
   Here every review is on the page, the grid reflows to one column, and the
   whole thing is readable with the browser's own scroll.
   ========================================================================== */
.reviews { background: var(--paper-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); transition: background-color .35s ease; }

/* Shown only while assets/reviews.js is still carrying sample text. It is
   deliberately hard to miss: a placeholder review that reaches a live site
   unlabelled is a fabricated customer. */
.reviews__notice {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 26px 0 4px; padding: 14px 18px;
  border: 1px dashed var(--berry);
  border-radius: 10px;
  background: var(--card);
  font-size: .82rem; color: var(--ink-2); line-height: 1.55;
}
.reviews__notice b { color: var(--berry); font-weight: 600; }

.reviews__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 34px;
}

.review {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: 26px 26px 24px;
  box-shadow: var(--shadow);
  transition: transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease;
}
.review:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

.review__stars { display: flex; gap: 3px; margin-bottom: 14px; color: var(--star); }
.review__stars svg { display: block; }
.review__stars .is-empty { color: var(--rule-strong); }

.review__quote {
  /* --font-quote, not --font-display: a review runs to several lines, and the
     condensed all-caps face the bold themes use is unreadable at that length. */
  font-family: var(--font-quote);
  font-size: 1.16rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  flex: 1;
}

.review__who { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rule); }
.review__name { display: block; font-size: .9rem; font-weight: 500; }
.review__meta { display: block; font-size: .76rem; color: var(--ink-3); margin-top: 2px; }

/* The one honest line about where reviews come from. */
.reviews__foot { margin-top: 26px; font-size: .8rem; color: var(--ink-3); }

/* =========================================================== 07 · office lunch */
.office { background: var(--paper); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); transition: background-color .35s ease; }
.office__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 68px); align-items: start; }

.points { list-style: none; margin-top: 28px; }
.points li { padding: 15px 0; border-top: 1px solid var(--rule); font-size: 0.9rem; color: var(--ink-2); font-weight: 300; }
.points li b { display: block; font-weight: 500; color: var(--ink); font-size: 0.98rem; margin-bottom: 2px; }

.quoter {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: clamp(22px, 3.4vw, 36px);
  box-shadow: var(--shadow);
}
.quoter h3 { font-size: 1.5rem; margin-bottom: 6px; }
.hint { font-size: 0.78rem; color: var(--ink-3); margin-top: 10px; line-height: 1.5; }
.quoter > h3 + p.hint { margin-top: 6px; margin-bottom: 22px; }

.field { margin-bottom: 18px; }
.field > label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.field > label b { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: 0; text-transform: none; color: var(--moss); font-weight: 400; }

/* 16px is not a style choice: iOS Safari zooms the whole page in when it
   focuses an input whose text is smaller than that, and the zoom does not
   come back out. Every text input on the site is at least 16px for that
   reason. */
.field input[type="text"],
.field input[type="email"],
.field input[type="number"],
.field input[type="date"],
.field select,
.field textarea {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 16px;
  transition: border-color .2s ease;
}
.field textarea { resize: vertical; min-height: 92px; line-height: 1.55; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--moss); outline: none; }

/* 40px of height, not the browser's ~20px. The visible track is unchanged —
   the extra is hit area, because a range slider is dragged with a thumb and a
   20px target on a phone is a coin toss. */
input[type="range"] { width: 100%; accent-color: var(--moss); height: 40px; }

.readout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 10px;
  margin: 26px 0 10px;
  overflow: hidden;
}
.readout div { background: var(--paper); padding: 16px 18px; }
.readout dt { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; }
.readout dd { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.05; font-variant-numeric: lining-nums tabular-nums; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quoter .pill--solid { width: 100%; justify-content: center; height: 48px; margin-top: 8px; }

/* =============================================================== 08 · find us */
.find__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 68px); align-items: start; }
.address { font-style: normal; font-size: 1.02rem; color: var(--ink-2); font-weight: 300; line-height: 1.9; margin: 20px 0 24px; }
.address b { color: var(--ink); font-weight: 500; }

.near { list-style: none; margin-top: 24px; border-top: 1px solid var(--rule); }
.near li { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 0.9rem; color: var(--ink-2); font-weight: 300; }
.near li span:last-child { color: var(--ink-3); font-size: 0.8rem; letter-spacing: 0.05em; white-space: nowrap; }

.map-frame { border: 1px solid var(--rule); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow); }
.map-frame iframe { display: block; width: 100%; height: 420px; border: 0; filter: saturate(0.55) contrast(1.02); }
[data-theme="dark"] .map-frame iframe { filter: invert(0.9) hue-rotate(180deg) saturate(0.5); }

/* ==========================================================================
   PARTY ORDERS — /party/
   Shares the palette, the theme and the chrome with the main page. What
   differs is the shape: a platter catalogue rather than a menu.
   ========================================================================== */

.hero--party { min-height: min(68svh, 620px); }

.platters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 22px;
  margin-top: 40px;
}

.platter {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow);
  transition: transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease, border-color .2s ease;
}
.platter:hover { transform: translateY(-3px); border-color: var(--rule-strong); box-shadow: var(--shadow-lift); }

.platter__photo { display: block; height: 190px; background: var(--paper-2); }
.platter__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.platter__photo--none {
  position: relative;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--paper-2), var(--moss-soft));
}

.platter__body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.platter__name { font-family: var(--font-display); font-size: 1.45rem; font-weight: 400; }
.platter__meta { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 5px 0 12px; }
.platter__desc { font-size: .89rem; color: var(--ink-2); font-weight: 300; flex: 1; }

.platter__foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--rule);
}
.platter__price {
  font-family: var(--font-display); font-size: 1.6rem; color: var(--moss);
  font-variant-numeric: lining-nums tabular-nums; white-space: nowrap;
}
.platter__price small { font-size: .5em; letter-spacing: .07em; color: var(--ink-3); margin-left: 4px; }
/* the working, printed on every board — the argument, not a footnote */
.platter__working { font-size: .72rem; color: var(--ink-3); text-align: right; font-style: italic; max-width: 18ch; }

/* ---------------------------------------------------------------- steps */
.steps__title { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: var(--display-weight); margin: 10px 0 28px; }
.steps { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 20px; }
.step { padding-top: 18px; border-top: 2px solid var(--moss); }
.step__n {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--moss-soft); color: var(--moss); font-size: .76rem; font-weight: 600; margin-bottom: 10px;
}
.step b { display: block; font-size: 1rem; font-weight: 500; margin-bottom: 4px; }
.step span { font-size: .88rem; color: var(--ink-2); font-weight: 300; }

/* ---------------------------------------------------------------- terms */
.terms { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap: 1px;
         background: var(--rule); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; margin-top: 32px; }
.terms li { background: var(--card); padding: 20px 22px; }
.terms b { display: block; font-size: .98rem; font-weight: 500; margin-bottom: 4px; }
.terms span { font-size: .86rem; color: var(--ink-2); font-weight: 300; }

/* The page is a proposal and says so, in the same voice as the rest of the
   site rather than in small print at the bottom. */
.proposal-note {
  margin-top: 28px; padding: 18px 22px;
  border-left: 3px solid var(--moss);
  background: var(--moss-soft);
  border-radius: 0 10px 10px 0;
  font-size: .84rem; color: var(--ink-2); font-style: italic; max-width: 80ch;
}

/* ==========================================================================
   PANTA — order ahead

   Same convention as the rest of the hall: Tandoori Palace, Beef and Buns and
   Skipperinn all run ordering at <vendor>.is/panta, linked from
   mathollhofda.is. Two columns — the menu to pick from, and a summary that
   stays put while you scroll it.
   ========================================================================== */

.order { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 30px; align-items: start; }
.order__h { font-size: 1.45rem; font-weight: 400; margin-bottom: 16px; }

.ordercourse { margin-bottom: 28px; }
.ordercourse__label {
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
  padding-bottom: 10px; border-bottom: 1px solid var(--rule-strong); margin-bottom: 4px;
}

.orderitem {
  display: grid;
  grid-template-columns: 60px minmax(0,1fr) auto auto;
  gap: 16px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  transition: background .2s ease;
}
.orderitem.is-chosen { background: var(--moss-soft); }

.orderitem__pic { width: 60px; height: 50px; border-radius: 8px; overflow: hidden; background: var(--paper-2); }
.orderitem__pic img { width: 100%; height: 100%; object-fit: cover; }
.orderitem__pic--drawn { display: grid; place-items: center; }
.orderitem__pic--drawn .illus { width: 66%; opacity: .5; }

.orderitem__name { font-size: 1rem; }
.orderitem__price {
  font-family: var(--font-display); font-size: 1.2rem; color: var(--moss);
  font-variant-numeric: lining-nums tabular-nums; white-space: nowrap;
}
.orderitem__price small { font-size: .55em; color: var(--ink-3); margin-left: 3px; letter-spacing: .05em; }
.orderitem__price--counter { font-family: inherit; font-size: .74rem; color: var(--ink-3); font-style: italic; }

/* stepper */
.stepper { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--rule-strong); border-radius: 999px; padding: 2px; }
.stepper__b {
  width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent;
  color: var(--ink-2); font-size: 1.05rem; line-height: 1; cursor: pointer; transition: background .18s, color .18s;
}
.stepper__b:hover { background: var(--moss); color: var(--on-accent); }
.stepper__n { min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; font-size: .9rem; }

/* the summary */
.order__side { position: sticky; top: 92px; }
.cart {
  border: 1px solid var(--rule-strong); border-radius: var(--radius-card);
  background: var(--card); box-shadow: var(--shadow); padding: 24px;
}
.cart__empty { font-size: .88rem; color: var(--ink-3); font-style: italic; padding: 8px 0 14px; }
.cart__line { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; gap: 8px; padding: 7px 0; font-size: .9rem; }
.cart__q { color: var(--moss); font-variant-numeric: tabular-nums; }
.cart__amt { color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

.cart__total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule);
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.cart__total b {
  font-family: var(--font-display); font-size: 1.65rem; font-weight: 400;
  color: var(--moss); letter-spacing: 0; text-transform: none;
  font-variant-numeric: lining-nums tabular-nums;
}
.cart__vat { font-size: .72rem; color: var(--ink-3); margin-top: 2px; }
.cart__sub { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin: 22px 0 10px; }

.note--soft {
  padding: 9px 12px; border-radius: 8px; margin-bottom: 12px; font-size: .8rem;
  border: 1px solid var(--rule-strong); background: var(--paper-2); color: var(--ink-2);
}

/* Stated where it cannot be missed: this page does not take money. */
.paynote {
  margin-top: 14px; padding: 12px 14px;
  border-left: 3px solid var(--moss); background: var(--moss-soft); border-radius: 0 8px 8px 0;
  font-size: .78rem; color: var(--ink-2); line-height: 1.55;
}

#sendOrder:disabled { opacity: .45; cursor: default; }

/* "To be integrated" — deliberately the most visible thing near the send
   button during a demo, so nobody leaves the room believing the till is live. */
.integnote {
  margin-top: 16px; padding: 13px 15px;
  border: 1px solid var(--rule-strong); border-radius: 10px;
  background: var(--paper-2);
}
.integnote__tag {
  display: inline-block; margin-bottom: 7px;
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--berry); border: 1px solid var(--berry); border-radius: 999px; padding: 2px 10px;
}
.integnote p { font-size: .78rem; color: var(--ink-2); line-height: 1.55; }

.hallnote { margin-top: 14px; text-align: center; font-size: .8rem; }
.hallnote a { color: var(--moss); border-bottom: 1px solid transparent; }
.hallnote a:hover { border-bottom-color: var(--moss); }

/* ==========================================================================
   THE ASSISTANT

   Our own client (assets/assistant.js). Themed from the same variables as
   everything else, so it is moss on light and pale green on dark without a
   second stylesheet.
   ========================================================================== */

.llchat-launch {
  position: fixed; right: 22px; bottom: 22px; z-index: 990;
  display: inline-flex; align-items: center; gap: 10px;
  height: 54px; padding: 0 22px 0 18px;
  border: 0; border-radius: 999px;
  background: var(--moss); color: var(--on-accent);
  font: inherit; font-size: .9rem; font-weight: 500; cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,.26);
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, opacity .2s ease;
}
.llchat-launch:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,.34); }
.llchat-launch.is-hidden { opacity: 0; pointer-events: none; transform: scale(.9); }

.llchat-launch__dot {
  width: 9px; height: 9px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 0 0 currentColor; animation: llpulse 3s ease-out infinite;
}
@keyframes llpulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.55); }
  70%  { box-shadow: 0 0 0 12px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

.llchat {
  position: fixed; right: 22px; bottom: 22px; z-index: 995;
  display: flex; flex-direction: column;
  /* The panel is a <section>, so it was inheriting the page's own
     `section { padding: clamp(...) 0 }` — over 100px of dead space above the
     header and below the footer, with the message list squeezed into what was
     left. Reset it explicitly rather than renaming the element, so any other
     page-level rule that targets `section` cannot reach in here either. */
  padding: 0;
  margin: 0;
  width: 400px; height: 560px;
  max-width: calc(100vw - 28px); max-height: calc(100svh - 44px);
  background: var(--card);
  border: 1px solid var(--rule-strong);
  border-radius: 16px;
  box-shadow: 0 28px 70px rgba(0,0,0,.30);
  overflow: hidden;
}
.llchat[hidden] { display: none; }
.llchat.is-resizing { user-select: none; }

/* Top-left grip: the panel is pinned bottom-right, so this is the corner that
   has to move for it to grow. */
.llchat__grip {
  position: absolute; top: 0; left: 0; width: 22px; height: 22px;
  cursor: nwse-resize; z-index: 3;
}
.llchat__grip::before {
  content: ''; position: absolute; top: 7px; left: 7px; width: 8px; height: 8px;
  border-top: 2px solid var(--ink-3); border-left: 2px solid var(--ink-3);
  border-radius: 2px 0 0 0; opacity: .6;
}
.llchat__grip:hover::before { opacity: 1; border-color: var(--moss); }

.llchat__head {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 12px 13px 26px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}
.llchat__mark {
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto;
  background: var(--moss);
}
.llchat__id { margin-right: auto; min-width: 0; }
.llchat__title { display: block; font-size: .88rem; font-weight: 600; }
.llchat__sub { display: block; font-size: .68rem; color: var(--ink-3); }

.llchat__icon {
  width: 32px; height: 32px; flex: 0 0 auto;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--ink-3); font-size: 1.05rem; line-height: 1; cursor: pointer;
  transition: background .18s, color .18s;
}
.llchat__icon:hover { background: var(--moss-soft); color: var(--moss); }

.llchat__list {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
  scrollbar-width: thin;
}

.llmsg { display: flex; }
.llmsg--user { justify-content: flex-end; }
.llmsg__body {
  max-width: 84%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: .88rem;
  line-height: 1.6;
}
.llmsg--bot .llmsg__body {
  background: var(--paper-2); color: var(--ink);
  border-bottom-left-radius: 5px;
}
/* The visitor's own question, clearly theirs — the point of a transcript is
   being able to see what you asked. */
.llmsg--user .llmsg__body {
  background: var(--moss); color: var(--on-accent);
  border-bottom-right-radius: 5px;
}
.llmsg--error .llmsg__body { background: transparent; border: 1px dashed var(--rule-strong); color: var(--ink-2); }

.llmsg__body p { margin: 0 0 .6em; }
.llmsg__body p:last-child { margin-bottom: 0; }
.llmsg__body ul, .llmsg__body ol { margin: .3em 0 .5em; padding-left: 1.25em; }
.llmsg__body ol { list-style: decimal; }
.llmsg__body li { margin: .16em 0; }
.llmsg__body strong { font-weight: 600; }
.llmsg__body em { font-style: normal; font-size: .82em; color: var(--ink-3); display: block; margin-top: .5em; }

/* Where the answer came from. "From the menu" is a stronger claim than the
   assistant can make, and someone reading an allergen answer should know
   which of the two they are looking at. */
.llmsg__src {
  display: inline-block; margin-top: 8px;
  font-size: .64rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--moss); border: 1px solid var(--moss); border-radius: 999px; padding: 2px 9px;
  opacity: .85;
}

.llthinking { display: inline-flex; gap: 4px; align-items: center; padding: 14px; }
.llthinking span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3);
  animation: llbounce 1.3s ease-in-out infinite;
}
.llthinking span:nth-child(2) { animation-delay: .16s; }
.llthinking span:nth-child(3) { animation-delay: .32s; }
@keyframes llbounce { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

.llchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.llchip {
  border: 1px solid var(--rule-strong); border-radius: 999px;
  background: transparent; color: var(--ink-2);
  font: inherit; font-size: .78rem; padding: 8px 14px; cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.llchip:hover { border-color: var(--moss); color: var(--moss); background: var(--moss-soft); }

.llchat__composer {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 10px 12px; border-top: 1px solid var(--rule); background: var(--card);
}
.llchat__composer textarea {
  flex: 1; resize: none; min-height: 42px; max-height: 120px;
  padding: 10px 12px; border: 1px solid var(--rule-strong); border-radius: 12px;
  background: var(--paper); color: var(--ink);
  font: inherit; font-size: 16px; line-height: 1.45;   /* 16px: see the note on .field inputs */
}
.llchat__composer textarea:focus { outline: none; border-color: var(--moss); }
.llchat__send {
  width: 42px; height: 42px; flex: 0 0 auto;
  border: 0; border-radius: 12px; background: var(--moss); color: var(--on-accent);
  display: grid; place-items: center; cursor: pointer; transition: filter .2s, opacity .2s;
}
.llchat__send:hover { filter: brightness(1.1); }
.llchat__send:disabled { opacity: .45; cursor: default; }

.llchat__foot { padding: 8px 14px 10px; border-top: 1px solid var(--rule); background: var(--paper-2); text-align: center; }
.llchat__foot a { display: inline-flex; align-items: center; gap: 6px; font-size: .7rem; color: var(--ink-3); }
.llchat__foot a:hover { color: var(--moss); }
.llchat__foot b { font-weight: 600; }
.llchat__logo { border-radius: 50%; }

/* ================================================================= footer */
footer { background: var(--paper-2); border-top: 1px solid var(--rule); padding: 64px 0 28px; transition: background-color .35s ease; }
.foot__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 36px; }
.foot__grid h4 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 400; margin-bottom: 12px; }
.foot__grid p, .foot__grid li { font-size: 0.88rem; color: var(--ink-2); font-weight: 300; }
.foot__grid ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.foot__grid a:hover { color: var(--moss); }
.foot__bottom {
  margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px;
  font-size: 0.78rem; color: var(--ink-3);
}

/* Brahmexa credit in the footer */
.by-brahmexa { display: inline-flex; align-items: center; gap: 8px; }
.by-brahmexa img { width: 20px; height: 20px; border-radius: 50%; }

/* ==========================================================================
   TYPE SIZING FOR THE CONDENSED THEMES

   Bebas Neue is condensed and all-caps: at the same font-size it occupies far
   less width and reads noticeably smaller than Cormorant Garamond. Left alone,
   `bright` and `nordic` come out looking timid next to `light`.

   So the display sizes are nudged up and the leading pulled in. Note what is
   NOT here: no grid changes, no order changes, no display switches. Sizes,
   spacing and weight only — a theme still cannot move anything.
   ========================================================================== */
:is([data-theme="bright"], [data-theme="nordic"]) .hero__title {
  font-size: clamp(3rem, 8.2vw, 6.2rem); line-height: .94;
}
:is([data-theme="bright"], [data-theme="nordic"]) .section-head h2 {
  font-size: clamp(2.2rem, 4.8vw, 3.6rem); line-height: .98;
}
:is([data-theme="bright"], [data-theme="nordic"]) .section-h2 {
  font-size: clamp(2.1rem, 4.4vw, 3.3rem); line-height: .98;
}
:is([data-theme="bright"], [data-theme="nordic"]) .steps__title {
  font-size: clamp(1.8rem, 3.6vw, 2.7rem); line-height: 1;
}
:is([data-theme="bright"], [data-theme="nordic"]) .brand__name { font-size: 1.52rem; letter-spacing: .04em; }
:is([data-theme="bright"], [data-theme="nordic"]) .course__label h3 { font-size: 1.95rem; }
:is([data-theme="bright"], [data-theme="nordic"]) .dish__name { font-size: 1.6rem; line-height: 1.1; }
:is([data-theme="bright"], [data-theme="nordic"]) .platter__name { font-size: 1.62rem; line-height: 1.1; }
:is([data-theme="bright"], [data-theme="nordic"]) .quoter h3,
:is([data-theme="bright"], [data-theme="nordic"]) .order__h { font-size: 1.7rem; }
:is([data-theme="bright"], [data-theme="nordic"]) .ribbon__cell strong { font-size: 1.72rem; }
:is([data-theme="bright"], [data-theme="nordic"]) .foot__grid h4 { font-size: 1.32rem; letter-spacing: .04em; }
:is([data-theme="bright"], [data-theme="nordic"]) .ll-mark { font-size: calc(var(--ll-size) * 0.5); }

/* Numerals in a condensed face want a little air or the thousands separator
   closes up against the digits. */
:is([data-theme="bright"], [data-theme="nordic"]) :is(
  .dish__price, .platter__price, .orderitem__price, .nutri dd, .readout dd, .cart__total b
) { letter-spacing: .03em; }

/* Lora's lightest weight is 400. Asking it for 300 makes the browser
   synthesise a thin, which looks broken at body size. */
[data-theme="bright"] :is(
  .lede, .dish__desc, .platter__desc, .points li, .address, .near li,
  .foot__grid p, .foot__grid li, .step span, .terms span, .ingredients, .cart__line
) { font-weight: 400; }

/* =============================================================== utilities */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.reveal.is-in { opacity: 1; transform: none; }

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

.toast {
  position: fixed; left: 50%; bottom: 24px;
  transform: translate(-50%, 160%);
  z-index: 1200;
  max-width: min(520px, calc(100vw - 32px));
  background: var(--ink);
  color: var(--paper);
  padding: 14px 22px;
  border-radius: 16px;
  font-size: 0.86rem;
  line-height: 1.5;
  text-align: center;
  box-shadow: var(--shadow);
  transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.toast.is-up { transform: translate(-50%, 0); }

/* ==========================================================================
   RESPONSIVE

   Two breakpoints do the work:

     ≤ 940px   the header nav becomes a drawer, two-column sections stack
     ≤ 620px   phone: tighter gutters, single-column everything, bigger taps

   Below 940px the nav used to be `display: none` with nothing replacing it,
   which left a phone visitor no route to Panta, Veislur, Hádegismatur or
   Finndu okkur at all. The drawer below is the fix.
   ========================================================================== */

@media (max-width: 940px) {
  .office__grid,
  .find__grid { grid-template-columns: 1fr; }

  .order { grid-template-columns: 1fr; }
  .order__side { position: static; }

  .navtoggle { display: inline-grid; }

  /* The drawer. Anchored under the header, full width, its own scroll if the
     list ever outgrows the screen. */
  .nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 890;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 76px 20px 20px;
    max-height: 100svh;
    overflow-y: auto;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    box-shadow: var(--shadow);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .25s ease, visibility .3s;
  }
  .nav-open .nav { transform: translateY(0); opacity: 1; visibility: visible; }

  .nav a {
    font-size: 1.02rem;
    letter-spacing: 0.01em;
    color: var(--ink);
    padding: 15px 4px;
    border-bottom: 1px solid var(--rule);
  }
  .nav a:last-child { border-bottom: 0; }
  .nav a:hover { border-bottom-color: var(--rule); color: var(--moss); }
  .nav a[aria-current="page"] { color: var(--moss); }
}

@media (max-width: 620px) {
  .masthead { gap: 8px; padding: 10px 16px; }
  .masthead.is-stuck { padding-top: 8px; padding-bottom: 8px; }
  .ll-mark { --ll-size: 38px; }

  /* The wordmark, the language pill, the order button and the menu button do
     not all fit across 375px. Left alone the brand text wrapped to three lines
     and pushed the header to 105px tall, which then sat over the top of the
     theme menu and the first link of the nav drawer.

     The wordmark is what goes: the circular mark still links home and still
     says the name, and "Order ahead" earns its slot on a phone far more than a
     second copy of the restaurant's name does. With it gone the header height
     is a predictable 60px, which is what the two offsets below rely on. */
  .brand__name, .brand__place, .brand br { display: none; }
  .brand { gap: 0; }

  /* "Order ahead" is the one action worth a header slot on a phone; the rest
     lives in the drawer. Shrink it rather than dropping it. */
  .tools .pill--solid { height: 40px; padding: 0 14px; font-size: .68rem; }

  .wrap { padding: 0 18px; }
  section { padding: 52px 0; }

  .hero { min-height: min(84svh, 700px); padding-top: 104px; }
  .hero__title { font-size: clamp(2.1rem, 10vw, 2.9rem); max-width: none; }
  .hero__ctas .pill { flex: 1 1 auto; justify-content: center; }
  .hero__meta { gap: 8px 20px; font-size: .78rem; }
  .hero__meta span { flex: 1 1 100%; }

  .ribbon__cell { border-left: 0; border-top: 1px solid var(--rule); padding: 22px 18px; }
  .ribbon__cell:first-child { border-top: 0; }

  .course { margin-top: 38px; }
  .course__items { grid-template-columns: 1fr; gap: 18px; }
  .dish__photo { height: 200px; }

  .filters { gap: 7px; margin: 24px 0 4px; }
  .filter { padding: 9px 15px; font-size: .76rem; }

  .reviews__grid { grid-template-columns: 1fr; gap: 16px; }
  .review { padding: 22px 20px 20px; }
  .review__quote { font-size: 1.08rem; }

  .form-row, .readout { grid-template-columns: 1fr; }
  .quoter { border-radius: 12px; }

  .map-frame iframe { height: 300px; }

  .platters { grid-template-columns: 1fr; gap: 18px; margin-top: 32px; }
  .platter__foot { flex-direction: column; align-items: flex-start; gap: 6px; }
  .platter__working { text-align: left; max-width: none; }

  .foot__grid { gap: 28px; }
  .foot__grid ul a,
  .foot__bottom a { display: inline-block; padding: 6px 0; }
  .foot__bottom { margin-top: 34px; justify-content: flex-start; }

  .slab__quote { padding: 32px 18px; }
}

@media (max-width: 560px) {
  .orderitem { grid-template-columns: 48px minmax(0,1fr) auto; gap: 12px; }
  .orderitem__pic { width: 48px; height: 42px; }
  .orderitem__price { grid-column: 2; font-size: 1rem; }
  .stepper { grid-column: 3; grid-row: 1 / 3; }

  .llchat { right: 10px; left: 10px; bottom: 10px; width: auto !important; height: 78svh !important; }
  .llchat__grip { display: none; }        /* no corner to drag when it is full width */
  .llchat-launch { right: 14px; bottom: 14px; padding: 0; width: 54px; justify-content: center; }
  .llchat-launch__txt { display: none; }
}

/* Coarse pointers get the hover lift removed — on a touch screen it fires on
   tap and leaves the card stuck in its hovered state until you scroll. */
@media (hover: none) {
  .dish:hover, .platter:hover, .review:hover { transform: none; box-shadow: var(--shadow); }
  .dish__head:hover { background: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}