Restaurant - defuss-shadcn

Taula Llarga, Catalan restaurant
The Look select switches the palette, the trim under the header, the board's material and how the hero's words are marked: Terracotta (cream, terracotta, a chalkboard in a wooden frame), Candlelight (oxblood and brass, a black menu card) and Terrace (whitewash and sea blue, a note taped up). Tick an allergen in the legend and the dishes that contain it fade; the booking form opens only the slots the kitchen serves that day.
<style>
  @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..600&family=Manrope:wght@400;500;600;700&family=Caveat:wght@500;700&display=swap');
  /* Taula Llarga: a Catalan restaurant in Hamburg-Ottensen built around one long table. Full-width bands on a 78rem
     grid: the hero, the menu with its allergen legend, tonight's board, the booking, the long table, the gallery, the
     guest book and the visit. Fraunces over Manrope, the board in Caveat. */
  #in-restaurant {
    --background: oklch(0.972 0.014 75);
    --foreground: oklch(0.25 0.03 40);
    --card: oklch(0.99 0.008 75);
    --card-foreground: var(--foreground);
    --popover: oklch(0.99 0.008 75);
    --popover-foreground: var(--foreground);
    --muted: oklch(0.94 0.018 70);
    --muted-foreground: oklch(0.46 0.035 45);
    --border: oklch(0.25 0.03 40 / 0.14);
    --input: oklch(0.25 0.03 40 / 0.3);
    --primary: oklch(0.52 0.15 38);
    --primary-foreground: oklch(0.985 0.01 75);
    --secondary: oklch(0.925 0.035 55);
    --secondary-foreground: oklch(0.3 0.06 38);
    --accent: oklch(0.935 0.022 65);
    --accent-foreground: var(--foreground);
    --ring: var(--primary);
    --radius: 0.5rem;
    --radius-sm: max(0px, calc(var(--radius) - 4px));
    --radius-md: max(0px, calc(var(--radius) - 2px));
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    --tl-band: oklch(0.945 0.022 68);
    --tl-board: oklch(0.29 0.035 165);
    --tl-board-ink: oklch(0.95 0.012 95);
    --tl-board-frame: oklch(0.45 0.06 55);
    --tl-mark: oklch(0.55 0.16 38);
    --tl-ticket: oklch(0.995 0.004 95);
    --tl-ticket-ink: oklch(0.25 0.03 40);
    --tl-head: 'Fraunces', Georgia, serif;
    --tl-hand: 'Caveat', 'Segoe Print', cursive;
    --tl-gutter: clamp(1rem, 4vw, 2.5rem);
    color-scheme: light;
    container: in-restaurant / inline-size;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow-x: clip;
    background: var(--background);
    color: var(--foreground);
    font:
      400 1rem/1.6 'Manrope',
      var(--font-sans);
  }
  #in-restaurant[data-look='candle'] {
    --background: oklch(0.962 0.014 25);
    --foreground: oklch(0.22 0.045 18);
    --card: oklch(0.985 0.008 25);
    --popover: oklch(0.985 0.008 25);
    --muted: oklch(0.93 0.02 22);
    --muted-foreground: oklch(0.45 0.05 20);
    --border: oklch(0.22 0.045 18 / 0.15);
    --input: oklch(0.22 0.045 18 / 0.3);
    --primary: oklch(0.4 0.13 20);
    --primary-foreground: oklch(0.97 0.02 80);
    --secondary: oklch(0.92 0.035 80);
    --secondary-foreground: oklch(0.32 0.06 60);
    --accent: oklch(0.925 0.022 25);
    --radius: 0.25rem;
    --tl-band: oklch(0.935 0.02 22);
    --tl-board: oklch(0.2 0.035 18);
    --tl-board-ink: oklch(0.86 0.1 85);
    --tl-board-frame: oklch(0.72 0.11 80);
    --tl-mark: oklch(0.6 0.12 75);
    --tl-ticket: oklch(0.985 0.01 80);
    --tl-ticket-ink: oklch(0.22 0.045 18);
  }
  #in-restaurant[data-look='terrace'] {
    --background: oklch(0.985 0.005 230);
    --foreground: oklch(0.26 0.05 250);
    --card: oklch(1 0 0);
    --popover: oklch(1 0 0);
    --muted: oklch(0.955 0.012 230);
    --muted-foreground: oklch(0.47 0.04 250);
    --border: oklch(0.26 0.05 250 / 0.13);
    --input: oklch(0.26 0.05 250 / 0.28);
    --primary: oklch(0.47 0.13 250);
    --primary-foreground: oklch(0.985 0.005 230);
    --secondary: oklch(0.94 0.035 115);
    --secondary-foreground: oklch(0.34 0.07 120);
    --accent: oklch(0.95 0.015 235);
    --radius: 1rem;
    --tl-band: oklch(0.955 0.022 110);
    --tl-board: oklch(0.995 0.004 95);
    --tl-board-ink: oklch(0.3 0.08 255);
    --tl-board-frame: oklch(0.88 0.07 85 / 0.85);
    --tl-mark: oklch(0.55 0.14 250);
    --tl-ticket: oklch(1 0 0);
    --tl-ticket-ink: oklch(0.26 0.05 250);
  }
  #in-restaurant [hidden] {
    display: none !important;
  }
  #in-restaurant .tl-look-only {
    display: none;
  }
  #in-restaurant[data-look='terracotta'] .tl-look-only[data-for='terracotta'],
  #in-restaurant[data-look='candle'] .tl-look-only[data-for='candle'],
  #in-restaurant[data-look='terrace'] .tl-look-only[data-for='terrace'] {
    display: block;
  }
  #in-restaurant :is(h1, h2, h3) {
    font-family: var(--tl-head);
    font-optical-sizing: auto;
    text-wrap: balance;
  }
  #in-restaurant .tl-party-hint a {
    color: var(--primary);
    font-weight: 600;
    text-underline-offset: 0.2em;
  }
  #in-restaurant :is(a, button, summary, input, select, textarea):focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
  }
  /* the grid: every band is full width, its content on one 78rem column */
  #in-restaurant > .tl-band {
    box-sizing: border-box;
    width: 100%;
    padding: clamp(3.5rem, 8vw, 6rem) max(var(--tl-gutter), calc((100% - 78rem) / 2));
  }
  #in-restaurant > .tl-band[data-tone='alt'] {
    background: var(--tl-band);
  }
  #in-restaurant .tl-eyebrow {
    margin: 0;
    color: var(--primary);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  #in-restaurant .mk-section-header {
    max-width: none;
    margin-block-end: clamp(1.75rem, 4vw, 2.75rem);
    padding-inline: 0;
  }
  #in-restaurant .mk-section-header-title {
    font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.75rem);
    font-weight: 500;
    letter-spacing: -0.015em;
  }
  #in-restaurant .mk-section-header-desc {
    max-width: 40rem;
  }
  /* the header: the name, five places on the page, the look and the mode, the booking */
  #in-restaurant .tl-header {
    box-sizing: border-box;
    padding-inline: max(var(--tl-gutter), calc((100% - 78rem) / 2));
    border-block-end: 1px solid var(--border);
    background: color-mix(in oklch, var(--background) 90%, transparent);
    backdrop-filter: blur(10px);
  }
  #in-restaurant .tl-header .mk-header-inner {
    max-width: none;
    min-height: 4.75rem;
    padding: 0.75rem 0;
  }
  #in-restaurant .tl-brand {
    display: grid;
    gap: 0.1rem;
    color: var(--foreground);
    text-decoration: none;
    line-height: 1;
  }
  #in-restaurant .tl-brand b {
    font: 600 1.5rem/1 var(--tl-head);
    letter-spacing: -0.01em;
  }
  #in-restaurant .tl-brand small {
    color: var(--muted-foreground);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  #in-restaurant .mk-header-nav .nav-menu-link {
    font-size: 0.9375rem;
    font-weight: 500;
  }
  #in-restaurant .mk-header-nav .nav-menu-link[aria-current] {
    box-shadow: inset 0 -2px 0 var(--primary);
    border-radius: 0;
  }
  #in-restaurant .mk-header-actions .select {
    width: auto;
  }
  #in-restaurant .site-mode {
    flex: none;
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    background: var(--background);
    color: var(--foreground);
  }
  #in-restaurant .site-mode:hover {
    background: var(--accent);
    color: var(--accent-foreground);
  }
  @container mk-header (max-width: 66rem) {
    #in-restaurant .mk-header-nav {
      display: none;
    }
    #in-restaurant .mk-header-menu {
      display: inline-flex;
    }
  }
  @container mk-header (max-width: 30rem) {
    #in-restaurant .tl-brand small {
      display: none;
    }
  }
  /* the trim under the header: tiles, a brass rule or the terrace's awning */
  #in-restaurant .tl-trim {
    position: absolute;
    inset: 0 0 auto;
    height: 0.875rem;
    pointer-events: none;
  }
  #in-restaurant .tl-trim[data-for='terracotta'] {
    background: conic-gradient(from 45deg, var(--tl-mark) 25%, transparent 0 50%, var(--tl-mark) 0 75%, transparent 0) 0
      0 / 0.875rem 0.875rem;
    opacity: 0.55;
  }
  #in-restaurant .tl-trim[data-for='candle'] {
    height: 0.5rem;
    border-block: 1px solid var(--tl-board-frame);
  }
  #in-restaurant .tl-trim[data-for='terrace'] {
    height: 1.4rem;
    background: repeating-linear-gradient(90deg, var(--primary) 0 1.75rem, oklch(0.95 0.035 95) 1.75rem 3.5rem);
    mask:
      radial-gradient(0.9rem 0.6rem at 50% 0.8rem, #000 98%, transparent) 0 0 / 1.75rem 100% repeat-x,
      linear-gradient(#000, #000) 0 0 / 100% 0.8rem no-repeat;
  }
  /* the hero: the promise, the long table circled, the worktop with a dish on it */
  #in-restaurant .tl-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
    padding-block: clamp(3.5rem, 7vw, 5.5rem);
  }
  #in-restaurant .tl-hero h1 {
    margin: 1rem 0 1.25rem;
    font-size: clamp(2.6rem, 1.6rem + 3.6vw, 4.6rem);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.025em;
  }
  #in-restaurant .tl-marked {
    position: relative;
    display: inline-block;
    font-style: italic;
    white-space: nowrap;
  }
  #in-restaurant .tl-mark {
    position: absolute;
    inset: -30% -14% -30% -14%;
    width: 128%;
    height: 160%;
    overflow: visible;
    pointer-events: none;
  }
  #in-restaurant .tl-mark path {
    fill: none;
    stroke: var(--tl-mark);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: tl-draw 1.3s 0.5s cubic-bezier(0.6, 0, 0.3, 1) forwards;
  }
  #in-restaurant .tl-mark[data-for='candle'] path {
    stroke-width: 2;
  }
  @keyframes tl-draw {
    to {
      stroke-dashoffset: 0;
    }
  }
  #in-restaurant .tl-lead {
    max-width: 36rem;
    margin: 0;
    color: var(--muted-foreground);
    font-size: 1.125rem;
    line-height: 1.65;
    text-wrap: pretty;
  }
  #in-restaurant .tl-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-block-start: 2rem;
  }
  #in-restaurant .tl-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, auto));
    justify-content: start;
    gap: 0.5rem 2.25rem;
    margin: 2.5rem 0 0;
    padding-block-start: 1.25rem;
    border-block-start: 1px solid var(--border);
  }
  #in-restaurant .tl-facts dt {
    color: var(--muted-foreground);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  #in-restaurant .tl-facts dd {
    margin: 0.2rem 0 0;
    font-weight: 600;
  }
  #in-restaurant .tl-hero-pic {
    position: relative;
    margin: 0;
    padding-inline-start: 2.5rem;
  }
  #in-restaurant .tl-hero-pic > img:first-child {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius-xl);
  }
  #in-restaurant .tl-hero-dish {
    position: absolute;
    inset: auto auto -1.5rem 0;
    width: 42%;
    aspect-ratio: 1;
    border: 0.5rem solid var(--background);
    border-radius: 50%;
    object-fit: cover;
    rotate: -8deg;
    box-shadow: 0 20px 40px -20px oklch(0.2 0.03 40 / 0.55);
  }
  #in-restaurant .tl-hero-pic figcaption {
    position: absolute;
    inset: 1rem 1rem auto auto;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: oklch(0.15 0.02 40 / 0.65);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
  }
  /* the menu: tabs by service, dishes with their allergen codes, the legend that filters them */
  #in-restaurant .tl-menu {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 19rem;
    align-items: start;
    gap: clamp(2rem, 4vw, 3.5rem);
  }
  #in-restaurant .tl-menu .tab-list {
    margin-block-end: 1.5rem;
  }
  #in-restaurant .tl-menu .tab-content {
    outline-offset: 4px;
  }
  #in-restaurant .tl-service {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    margin: 0 0 1.25rem;
    padding: 0.875rem 1.125rem;
    border-radius: var(--radius-lg);
    background: var(--card);
    border: 1px solid var(--border);
  }
  #in-restaurant .tl-service b {
    font: 500 1.125rem/1.3 var(--tl-head);
  }
  #in-restaurant .tl-service span {
    color: var(--muted-foreground);
    font-size: 0.875rem;
  }
  #in-restaurant .tl-course {
    margin: 1.75rem 0 0.5rem;
    color: var(--primary);
    font: italic 500 1.25rem/1.2 var(--tl-head);
  }
  #in-restaurant .tl-course:first-child {
    margin-block-start: 0;
  }
  #in-restaurant .tl-dishes {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  #in-restaurant .tl-dish {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: baseline;
    gap: 0.15rem 1.25rem;
    padding-block: 0.8rem;
    border-block-end: 1px dashed var(--border);
    transition: opacity 0.25s;
  }
  #in-restaurant .tl-dish h4 {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
  }
  #in-restaurant .tl-dish h4 svg {
    width: 0.95rem;
    height: 0.95rem;
    margin-inline-start: 0.35rem;
    vertical-align: -0.1em;
    color: oklch(0.55 0.13 145);
  }
  #in-restaurant .tl-dish p {
    grid-column: 1;
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.9375rem;
  }
  #in-restaurant .tl-dish .tl-codes {
    grid-row: 1;
    grid-column: 2;
  }
  #in-restaurant .tl-dish .tl-price {
    grid-row: 1;
    grid-column: 3;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  #in-restaurant .tl-codes {
    display: inline-flex;
    gap: 0.25rem;
    color: var(--muted-foreground);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
  }
  #in-restaurant .tl-codes abbr {
    display: inline-grid;
    place-items: center;
    min-width: 1.35rem;
    height: 1.35rem;
    border: 1px solid var(--input);
    border-radius: 999px;
    text-decoration: none;
    cursor: help;
  }
  #in-restaurant .tl-dish[data-soon] :is(h4, .tl-price) {
    color: var(--muted-foreground);
  }
  #in-restaurant:has(#tl-al-a:checked) .tl-dish[data-al~='A'],
  #in-restaurant:has(#tl-al-b:checked) .tl-dish[data-al~='B'],
  #in-restaurant:has(#tl-al-c:checked) .tl-dish[data-al~='C'],
  #in-restaurant:has(#tl-al-d:checked) .tl-dish[data-al~='D'],
  #in-restaurant:has(#tl-al-e:checked) .tl-dish[data-al~='E'],
  #in-restaurant:has(#tl-al-f:checked) .tl-dish[data-al~='F'],
  #in-restaurant:has(#tl-al-g:checked) .tl-dish[data-al~='G'],
  #in-restaurant:has(#tl-al-h:checked) .tl-dish[data-al~='H'],
  #in-restaurant:has(#tl-al-l:checked) .tl-dish[data-al~='L'],
  #in-restaurant:has(#tl-al-m:checked) .tl-dish[data-al~='M'],
  #in-restaurant:has(#tl-al-n:checked) .tl-dish[data-al~='N'],
  #in-restaurant:has(#tl-al-o:checked) .tl-dish[data-al~='O'],
  #in-restaurant:has(#tl-al-p:checked) .tl-dish[data-al~='P'],
  #in-restaurant:has(#tl-al-r:checked) .tl-dish[data-al~='R'] {
    opacity: 0.3;
  }
  #in-restaurant .tl-legend {
    position: sticky;
    top: 6rem;
    display: grid;
    gap: 0.875rem;
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
  }
  #in-restaurant .tl-legend fieldset {
    margin: 0;
    padding: 0;
    border: 0;
  }
  #in-restaurant .tl-legend legend {
    margin-block-end: 0.25rem;
    padding: 0;
    font: 500 1.125rem/1.3 var(--tl-head);
  }
  #in-restaurant .tl-legend-hint,
  #in-restaurant .tl-legend output,
  #in-restaurant .tl-legend small {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    line-height: 1.5;
  }
  #in-restaurant .tl-legend output {
    display: block;
    color: var(--foreground);
    font-weight: 600;
  }
  #in-restaurant .tl-allergens {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
  }
  #in-restaurant .tl-allergens label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.4rem;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    cursor: pointer;
  }
  #in-restaurant .tl-allergens label:hover {
    background: var(--accent);
    color: var(--accent-foreground);
  }
  #in-restaurant .tl-allergens b {
    display: inline-grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border: 1px solid var(--input);
    border-radius: 999px;
    font-size: 0.75rem;
  }
  #in-restaurant .tl-allergens label:has(:checked) b {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--primary-foreground);
  }
  #in-restaurant .tl-allergens input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
  }
  #in-restaurant .tl-allergens label:has(:focus-visible) {
    outline: 2px solid var(--ring);
    outline-offset: 1px;
  }
  /* tonight: the board, slanted, beside the kitchen's note */
  #in-restaurant .tl-tonight {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2.5rem, 6vw, 5rem);
  }
  #in-restaurant .tl-board {
    position: relative;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 0.75rem solid var(--tl-board-frame);
    border-radius: 0.375rem;
    background: radial-gradient(120% 90% at 30% 20%, oklch(1 0 0 / 0.07), transparent 60%), var(--tl-board);
    color: var(--tl-board-ink);
    box-shadow: 0 30px 50px -30px oklch(0.15 0.02 40 / 0.6);
    rotate: -1.8deg;
    font-family: var(--tl-hand);
  }
  #in-restaurant .tl-board h2 {
    margin: 0;
    font: 700 clamp(2.4rem, 5vw, 3.2rem)/1 var(--tl-hand);
  }
  #in-restaurant .tl-board-date {
    margin: 0.25rem 0 1.25rem;
    font-size: 1.4rem;
    opacity: 0.85;
  }
  #in-restaurant .tl-board ul {
    display: grid;
    gap: 0.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  #in-restaurant .tl-board li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 1rem;
    font-size: 1.55rem;
    line-height: 1.15;
  }
  #in-restaurant .tl-board li small {
    grid-column: 1 / -1;
    font-size: 1.15rem;
    opacity: 0.8;
  }
  #in-restaurant .tl-board-note {
    margin: 1.5rem 0 0;
    padding-block-start: 1rem;
    border-block-start: 2px dashed currentColor;
    font-size: 1.35rem;
    line-height: 1.2;
  }
  #in-restaurant[data-look='candle'] .tl-board {
    border: 1px solid var(--tl-board-frame);
    border-radius: 2px;
    outline: 1px solid var(--tl-board-frame);
    outline-offset: -0.6rem;
    background: var(--tl-board);
    rotate: 1.4deg;
    font-family: var(--tl-head);
    font-style: italic;
  }
  #in-restaurant[data-look='candle'] .tl-board h2 {
    font: italic 500 clamp(2rem, 4vw, 2.6rem)/1 var(--tl-head);
    letter-spacing: 0.02em;
  }
  #in-restaurant[data-look='candle'] .tl-board :is(li, .tl-board-date, .tl-board-note) {
    font-size: 1.125rem;
    line-height: 1.35;
  }
  #in-restaurant[data-look='candle'] .tl-board li small {
    font-size: 0.875rem;
  }
  #in-restaurant[data-look='terrace'] .tl-board {
    border: 0;
    border-radius: 2px;
    background:
      repeating-linear-gradient(transparent 0 2.15rem, oklch(0.6 0.08 250 / 0.18) 2.15rem calc(2.15rem + 1px)),
      var(--tl-board);
    rotate: -1.1deg;
    box-shadow: 0 24px 40px -24px oklch(0.25 0.05 250 / 0.55);
  }
  #in-restaurant[data-look='terrace'] .tl-board::before,
  #in-restaurant[data-look='terrace'] .tl-board::after {
    content: '';
    position: absolute;
    top: -0.9rem;
    width: 6.5rem;
    height: 1.8rem;
    background: var(--tl-board-frame);
    box-shadow: 0 1px 2px oklch(0 0 0 / 0.12);
  }
  #in-restaurant[data-look='terrace'] .tl-board::before {
    left: 1.5rem;
    rotate: -6deg;
  }
  #in-restaurant[data-look='terrace'] .tl-board::after {
    right: 1.5rem;
    rotate: 5deg;
  }
  #in-restaurant .tl-kitchen {
    display: grid;
    gap: 1.25rem;
  }
  #in-restaurant .tl-kitchen h2 {
    margin: 0;
    font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.75rem);
    font-weight: 500;
    line-height: 1.1;
  }
  #in-restaurant .tl-kitchen p {
    margin: 0;
    color: var(--muted-foreground);
    text-wrap: pretty;
  }
  #in-restaurant .tl-kitchen img.tl-produce {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-lg);
  }
  #in-restaurant .tl-signed {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  #in-restaurant .tl-signed span {
    display: grid;
    line-height: 1.3;
  }
  #in-restaurant .tl-signed small {
    color: var(--muted-foreground);
  }
  /* the booking: the form, and after it the ticket that names the table */
  #in-restaurant .tl-book-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    align-items: start;
    gap: clamp(2rem, 4vw, 3.5rem);
  }
  #in-restaurant .mk-booking-form {
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
  }
  #in-restaurant .tl-meal {
    margin: 0.5rem 0 0;
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  #in-restaurant .tl-slot-status {
    display: block;
    margin-block-start: 0.25rem;
    color: var(--muted-foreground);
    font-size: 0.875rem;
  }
  #in-restaurant .tl-party-hint {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.875rem;
  }
  #in-restaurant .tl-book[data-sent] form,
  #in-restaurant .tl-book:not([data-sent]) .tl-done {
    display: none;
  }
  #in-restaurant .tl-done {
    display: grid;
    justify-items: start;
    gap: 1.25rem;
  }
  #in-restaurant .tl-ticket {
    position: relative;
    width: min(100%, 26rem);
    margin: 0;
    padding: 2.25rem 1.75rem 1.75rem;
    background: var(--tl-ticket);
    color: var(--tl-ticket-ink);
    rotate: 1.2deg;
    box-shadow: 0 24px 40px -24px oklch(0.2 0.03 40 / 0.5);
    mask: radial-gradient(0.45rem at 50% 0, transparent 98%, #000) 0 0 / 1.1rem 100%;
  }
  #in-restaurant .tl-ticket:focus-visible {
    outline: 2px solid var(--ring);
  }
  #in-restaurant .tl-ticket h3 {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1rem;
    padding-block-end: 0.75rem;
    border-block-end: 2px solid currentColor;
    font-size: 1.375rem;
    font-weight: 600;
  }
  #in-restaurant .tl-ticket h3 span {
    font:
      600 0.875rem/2 'Manrope',
      sans-serif;
    letter-spacing: 0.08em;
  }
  #in-restaurant .tl-ticket dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem 1.25rem;
    margin: 0;
  }
  #in-restaurant .tl-ticket dt {
    opacity: 0.7;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding-block-start: 0.2rem;
  }
  #in-restaurant .tl-ticket dd {
    margin: 0;
    font-weight: 600;
  }
  #in-restaurant .tl-ticket p {
    margin: 1.25rem 0 0;
    padding-block-start: 0.75rem;
    border-block-start: 1px dashed currentColor;
    font-family: var(--tl-hand);
    font-size: 1.35rem;
    line-height: 1.2;
  }
  #in-restaurant .tl-policy {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  #in-restaurant .tl-policy li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    font-size: 0.9375rem;
  }
  #in-restaurant .tl-policy svg {
    width: 1.25rem;
    height: 1.25rem;
    margin-block-start: 0.15rem;
    color: var(--primary);
  }
  #in-restaurant .tl-policy b {
    display: block;
  }
  #in-restaurant .tl-policy span {
    color: var(--muted-foreground);
  }
  /* the long table */
  #in-restaurant .tl-private {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
  }
  #in-restaurant .tl-private > img {
    width: 100%;
    height: 100%;
    min-height: 22rem;
    object-fit: cover;
    border-radius: var(--radius-xl);
  }
  #in-restaurant .tl-private h2 {
    margin: 0.75rem 0 1rem;
    font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.75rem);
    font-weight: 500;
    line-height: 1.1;
  }
  #in-restaurant .tl-private-copy > p {
    margin: 0;
    color: var(--muted-foreground);
    text-wrap: pretty;
  }
  #in-restaurant .tl-private-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.75rem 0;
  }
  #in-restaurant .tl-private-facts div {
    padding-block-start: 0.75rem;
    border-block-start: 2px solid var(--primary);
  }
  #in-restaurant .tl-private-facts dt {
    font: 500 1.75rem/1.1 var(--tl-head);
  }
  #in-restaurant .tl-private-facts dd {
    margin: 0.25rem 0 0;
    color: var(--muted-foreground);
    font-size: 0.875rem;
  }
  #in-restaurant .tl-menus {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-block-end: 1.75rem;
  }
  #in-restaurant .tl-menus .card {
    display: grid;
    padding: 1.25rem;
    gap: 0.5rem;
  }
  #in-restaurant .tl-menus h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 500;
  }
  #in-restaurant .tl-menus p {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.9375rem;
  }
  #in-restaurant .tl-menus b {
    font: 500 1.5rem/1 var(--tl-head);
  }
  /* the gallery: every dish a button into the viewer */
  #in-restaurant .tl-shot {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: zoom-in;
  }
  #in-restaurant .tl-shot img {
    transition: scale 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  #in-restaurant .tl-shot:hover img {
    scale: 1.04;
  }
  #in-restaurant .tl-shot figcaption {
    padding: 0.5rem 0.25rem 0;
    font-size: 0.875rem;
    font-weight: 600;
  }
  #in-restaurant .tl-shot figcaption small {
    display: block;
    color: var(--muted-foreground);
    font-weight: 500;
  }
  #in-restaurant .mk-media-gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(45%, 16.5rem), 1fr));
    gap: 1.25rem 1rem;
  }
  #in-restaurant .mk-media-gallery-grid figure {
    background: none;
  }
  #in-restaurant .mk-media-gallery-grid img {
    border-radius: var(--radius-md);
  }
  #in-restaurant .mk-media-gallery-head h2 {
    font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.75rem);
    font-weight: 500;
  }
  #in-restaurant .tl-viewer .mk-media-gallery-track p {
    max-width: 40rem;
    margin-inline: auto;
  }
  #in-restaurant .tl-viewer-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
  }
  #in-restaurant .tl-viewer-step {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 999px;
    background: oklch(1 0 0 / 0.15);
    color: #fff;
    cursor: pointer;
  }
  #in-restaurant .tl-viewer-step:hover {
    background: oklch(1 0 0 / 0.28);
  }
  #in-restaurant .tl-viewer-step:focus-visible {
    outline: 2px solid #fff;
  }
  /* the guest book */
  #in-restaurant .mk-testimonial-card-text p {
    font-family: var(--tl-head);
    font-size: 1.125rem;
    line-height: 1.5;
  }
  #in-restaurant .mk-testimonial-card:nth-child(2) {
    rotate: 0.8deg;
  }
  /* the visit: hours with the kitchen's last orders, the map, the address */
  #in-restaurant .tl-visit {
    display: grid;
    grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
    align-items: start;
    gap: clamp(2rem, 4vw, 3rem);
  }
  #in-restaurant .mk-opening-hours {
    border-radius: var(--radius-xl);
  }
  #in-restaurant .mk-opening-hours-title {
    font-size: 1.5rem;
    font-weight: 500;
  }
  #in-restaurant .mk-opening-hours-days dd {
    text-align: end;
  }
  #in-restaurant .mk-opening-hours-days dd small {
    display: block;
    color: var(--muted-foreground);
    font-size: 0.75rem;
    font-weight: 500;
  }
  #in-restaurant .tl-address {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    margin-block-start: 1.25rem;
  }
  #in-restaurant .tl-address address {
    font-style: normal;
    line-height: 1.5;
  }
  #in-restaurant .mk-location-map-popup button {
    margin-block-start: 0.5rem;
  }
  /* the footer */
  #in-restaurant .tl-footer {
    box-sizing: border-box;
    padding-inline: max(var(--tl-gutter), calc((100% - 78rem) / 2));
    border-block-start: 1px solid var(--border);
    background: var(--tl-band);
  }
  #in-restaurant .tl-footer .mk-footer-inner {
    max-width: none;
    padding-inline: 0;
  }
  #in-restaurant .tl-footer .mk-footer-list :is(a, span, address, .tl-linkish) {
    color: var(--muted-foreground);
    font-style: normal;
    font-size: 0.9375rem;
    line-height: 1.6;
  }
  #in-restaurant .tl-linkish {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: start;
    cursor: pointer;
  }
  #in-restaurant .tl-footer .mk-footer-list a:hover,
  #in-restaurant .tl-linkish:hover {
    color: var(--foreground);
    text-decoration: underline;
    text-underline-offset: 0.25em;
  }
  #in-restaurant .tl-footer .mk-footer-brand {
    color: var(--foreground);
    font: 600 1.375rem/1 var(--tl-head);
    text-decoration: none;
  }
  /* the dialogs: the long table, the imprint, the privacy notice */
  #in-restaurant .dialog .dialog-body {
    display: grid;
    gap: 0.875rem;
  }
  #in-restaurant .dialog .dialog-body > p,
  #in-restaurant .dialog dd {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.9375rem;
    line-height: 1.55;
  }
  #in-restaurant .dialog h3 {
    margin: 0.5rem 0 0;
    font-size: 1rem;
    font-weight: 600;
  }
  #in-restaurant .dialog dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 1rem;
    margin: 0;
  }
  #in-restaurant .dialog dt {
    font-size: 0.875rem;
    font-weight: 600;
  }
  #in-restaurant .tl-row {
    display: grid;
    gap: 0.375rem;
  }
  #in-restaurant .tl-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
  #in-restaurant .tl-choice {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin: 0;
    padding: 0;
    border: 0;
  }
  #in-restaurant .tl-choice legend {
    margin-block-end: 0.375rem;
    padding: 0;
    font-size: 0.875rem;
    font-weight: 500;
  }
  #in-restaurant .tl-choice label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9375rem;
  }
  #in-restaurant .tl-enquiry:not([data-sent]) .tl-enquiry-done,
  #in-restaurant .tl-enquiry[data-sent] form {
    display: none;
  }
  #in-restaurant .tl-enquiry-done {
    text-align: center;
    justify-items: center;
  }
  #in-restaurant .tl-enquiry-done > svg {
    width: 3rem;
    height: 3rem;
    padding: 0.6rem;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-foreground);
  }
  /* narrow: one column */
  @container in-restaurant (max-width: 60rem) {
    #in-restaurant :is(.tl-menu, .tl-book-layout, .tl-visit) {
      grid-template-columns: minmax(0, 1fr);
    }
    #in-restaurant .tl-legend {
      position: static;
      grid-row: 1;
    }
    #in-restaurant .tl-allergens {
      display: flex;
      flex-wrap: wrap;
      gap: 0.375rem;
    }
    #in-restaurant .tl-allergens label {
      padding: 0.2rem 0.6rem 0.2rem 0.2rem;
      border: 1px solid var(--border);
      border-radius: 999px;
    }
  }
  @container in-restaurant (max-width: 48rem) {
    #in-restaurant :is(.tl-hero, .tl-tonight, .tl-private) {
      grid-template-columns: minmax(0, 1fr);
    }
    #in-restaurant .tl-hero-pic {
      padding-inline-start: 1rem;
    }
    #in-restaurant .tl-facts {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    #in-restaurant :is(.tl-menus, .tl-private-facts) {
      grid-template-columns: minmax(0, 1fr);
    }
    #in-restaurant .tl-private > img {
      min-height: 0;
      aspect-ratio: 4 / 3;
    }
  }
  @container in-restaurant (max-width: 34rem) {
    #in-restaurant .tl-dish {
      grid-template-columns: minmax(0, 1fr) auto;
    }
    #in-restaurant .tl-dish .tl-codes {
      grid-row: auto;
      grid-column: 1;
    }
    #in-restaurant .tl-dish .tl-price {
      grid-column: 2;
    }
    #in-restaurant .tl-pair {
      grid-template-columns: minmax(0, 1fr);
    }
    #in-restaurant .tl-board li {
      font-size: 1.35rem;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    #in-restaurant .tl-mark path {
      animation: none;
      stroke-dashoffset: 0;
    }
    #in-restaurant :is(.tl-dish, .tl-shot img) {
      transition: none;
    }
  }
  @media (forced-colors: active) {
    #in-restaurant .tl-allergens label:has(:checked) b {
      forced-color-adjust: none;
      background: Highlight;
      color: HighlightText;
    }
  }
  /* -- modes: each look in light and dark, derived from the palettes above (the other mode of each look) -- */
  .dark #in-restaurant[data-look='terracotta'] {
    color-scheme: dark;
    --background: oklch(0.19 0.018 45);
    --foreground: oklch(0.94 0.016 75);
    --card: oklch(0.225 0.02 45);
    --popover: oklch(0.23 0.02 45);
    --popover-foreground: oklch(0.94 0.016 75);
    --card-foreground: oklch(0.94 0.016 75);
    --muted: oklch(0.26 0.022 45);
    --muted-foreground: oklch(0.77 0.03 65);
    --border: oklch(0.94 0.016 75 / 0.13);
    --input: oklch(0.94 0.016 75 / 0.26);
    --primary: oklch(0.72 0.13 42);
    --primary-foreground: oklch(0.18 0.02 45);
    --secondary: oklch(0.29 0.04 42);
    --secondary-foreground: oklch(0.9 0.04 60);
    --accent: oklch(0.27 0.024 50);
    --accent-foreground: oklch(0.94 0.016 75);
    --ring: oklch(0.72 0.13 42);
    --tl-band: oklch(0.165 0.016 45);
    --tl-board: oklch(0.25 0.03 165);
    --tl-board-frame: oklch(0.36 0.05 55);
    --tl-mark: oklch(0.72 0.13 42);
    --tl-ticket: oklch(0.95 0.012 85);
    --tl-ticket-ink: oklch(0.22 0.03 40);
  }
  .dark #in-restaurant[data-look='candle'] {
    color-scheme: dark;
    --background: oklch(0.165 0.025 18);
    --foreground: oklch(0.93 0.025 80);
    --card: oklch(0.2 0.03 18);
    --card-foreground: oklch(0.93 0.025 80);
    --popover: oklch(0.2 0.03 18);
    --popover-foreground: oklch(0.93 0.025 80);
    --muted: oklch(0.24 0.03 18);
    --muted-foreground: oklch(0.76 0.04 70);
    --border: oklch(0.93 0.025 80 / 0.14);
    --input: oklch(0.93 0.025 80 / 0.26);
    --primary: oklch(0.8 0.11 82);
    --primary-foreground: oklch(0.18 0.03 18);
    --secondary: oklch(0.28 0.05 20);
    --secondary-foreground: oklch(0.9 0.05 80);
    --accent: oklch(0.25 0.035 20);
    --accent-foreground: oklch(0.93 0.025 80);
    --ring: oklch(0.8 0.11 82);
    --tl-band: oklch(0.135 0.022 18);
    --tl-board: oklch(0.11 0.02 18);
    --tl-mark: oklch(0.8 0.11 82);
    --tl-ticket: oklch(0.93 0.025 80);
    --tl-ticket-ink: oklch(0.2 0.04 18);
  }
  .dark #in-restaurant[data-look='terrace'] {
    color-scheme: dark;
    --background: oklch(0.185 0.03 250);
    --foreground: oklch(0.95 0.01 230);
    --card: oklch(0.22 0.035 250);
    --card-foreground: oklch(0.95 0.01 230);
    --popover: oklch(0.22 0.035 250);
    --popover-foreground: oklch(0.95 0.01 230);
    --muted: oklch(0.25 0.035 250);
    --muted-foreground: oklch(0.77 0.035 240);
    --border: oklch(0.95 0.01 230 / 0.13);
    --input: oklch(0.95 0.01 230 / 0.26);
    --primary: oklch(0.75 0.11 235);
    --primary-foreground: oklch(0.17 0.03 250);
    --secondary: oklch(0.3 0.05 120);
    --secondary-foreground: oklch(0.9 0.06 115);
    --accent: oklch(0.26 0.035 250);
    --accent-foreground: oklch(0.95 0.01 230);
    --ring: oklch(0.75 0.11 235);
    --tl-band: oklch(0.155 0.03 250);
    --tl-board: oklch(0.93 0.01 95);
    --tl-board-ink: oklch(0.28 0.08 255);
    --tl-mark: oklch(0.75 0.11 235);
    --tl-ticket: oklch(0.93 0.01 95);
  }
  /* -- modes: end -- */
</style>
<div id="in-restaurant" data-look="terracotta">
  <header class="mk-header tl-header" data-variant="sticky">
    <div class="mk-header-inner">
      <a class="tl-brand" href="#tl-top"><b>Taula Llarga</b><small>Cuina catalana · Ottensen</small></a>
      <nav class="mk-header-nav" aria-label="On this page">
        <ul class="nav-menu-list">
          <li class="nav-menu-item"><a class="nav-menu-link" href="#tl-menu">Menu</a></li>
          <li class="nav-menu-item"><a class="nav-menu-link" href="#tl-tonight">Tonight</a></li>
          <li class="nav-menu-item"><a class="nav-menu-link" href="#tl-book">Book</a></li>
          <li class="nav-menu-item"><a class="nav-menu-link" href="#tl-private">Long table</a></li>
          <li class="nav-menu-item"><a class="nav-menu-link" href="#tl-visit">Visit</a></li>
        </ul>
      </nav>
      <div class="mk-header-actions">
        <select class="select" data-size="sm" data-site-look aria-label="Look">
          <option value="terracotta">Terracotta</option>
          <option value="candle">Candlelight</option>
          <option value="terrace">Terrace</option>
        </select>
        <label class="swap site-mode" data-variant="rotate" data-size="sm">
          <input type="checkbox" data-site-mode aria-label="Dark mode" />
          <span class="swap-on" aria-hidden="true"><i data-lucide="moon"></i></span>
          <span class="swap-off" aria-hidden="true"><i data-lucide="sun"></i></span>
        </label>
        <a class="btn mk-header-wide" data-size="sm" href="#tl-book">Book a table</a>
        <button
          type="button"
          class="btn mk-header-menu"
          data-variant="ghost"
          data-size="icon"
          data-sheet-trigger="tl-sheet"
          aria-haspopup="dialog"
          aria-label="Open menu"
          ><i data-lucide="menu"></i
        ></button>
      </div>
    </div>
    <dialog
      id="tl-sheet"
      class="sheet"
      data-side="right"
      role="dialog"
      aria-modal="true"
      aria-labelledby="tl-sheet-title"
    >
      <div class="sheet-content">
        <div class="sheet-header">
          <h2 class="sheet-title" id="tl-sheet-title">Taula Llarga</h2>
          <p class="sheet-description">Holzmarktgang 7, Hamburg-Ottensen</p>
        </div>
        <div class="sheet-body">
          <ul class="mk-header-sheet-nav">
            <li
              ><a href="#tl-menu" data-sheet-close>Menu <small>lunch, dinner, drinks</small></a></li
            >
            <li
              ><a href="#tl-tonight" data-sheet-close>Tonight <small>the board</small></a></li
            >
            <li><a href="#tl-book" data-sheet-close>Book a table</a></li>
            <li
              ><a href="#tl-private" data-sheet-close>The long table <small>private dining</small></a></li
            >
            <li><a href="#tl-gallery" data-sheet-close>From the pass</a></li>
            <li
              ><a href="#tl-visit" data-sheet-close>Visit <small>hours, map</small></a></li
            >
          </ul>
        </div>
        <div class="sheet-footer mk-header-sheet-actions">
          <a class="btn" href="#tl-book" data-sheet-close>Book a table</a>
        </div>
      </div>
      <button class="sheet-close-x" data-sheet-close aria-label="Close"><i data-lucide="x"></i></button>
    </dialog>
  </header>

  <section class="tl-band tl-hero" id="tl-top" aria-labelledby="tl-title">
    <div class="tl-trim tl-look-only" data-for="terracotta" aria-hidden="true"></div>
    <div class="tl-trim tl-look-only" data-for="candle" aria-hidden="true"></div>
    <div class="tl-trim tl-look-only" data-for="terrace" aria-hidden="true"></div>
    <div>
      <p class="tl-eyebrow">Cuina catalana · Hamburg-Ottensen · since 2016</p>
      <h1 id="tl-title"
        >Catalan cooking, shared at one
        <span class="tl-marked"
          >long table<svg
            class="tl-mark tl-look-only"
            data-for="terracotta"
            viewBox="0 0 300 100"
            preserveAspectRatio="none"
            aria-hidden="true"
          >
            <path
              pathLength="1"
              d="M28 58 C 20 24, 140 8, 236 16 C 292 22, 296 70, 232 86 C 160 102, 44 96, 18 70 C 6 52, 44 30, 96 24"
            /></svg
          ><svg
            class="tl-mark tl-look-only"
            data-for="candle"
            viewBox="0 0 300 100"
            preserveAspectRatio="none"
            aria-hidden="true"
          >
            <path pathLength="1" d="M14 84 C 90 80, 200 82, 286 79 M 30 93 C 110 90, 190 92, 270 89" /></svg
          ><svg
            class="tl-mark tl-look-only"
            data-for="terrace"
            viewBox="0 0 300 100"
            preserveAspectRatio="none"
            aria-hidden="true"
          >
            <path
              pathLength="1"
              d="M12 86 q 18 -10 36 0 t 36 0 t 36 0 t 36 0 t 36 0 t 36 0 t 36 0 t 36 0"
            /></svg></span
        >.</h1
      >
      <p class="tl-lead"
        >Pa amb tomàquet, rice from the paella pan, fish from the grill and a porró of red passed down the table.
        Thirty-four seats at small tables, fourteen at the long one - and a kitchen that cooks until 21:45.</p
      >
      <div class="tl-actions">
        <a class="btn" data-size="lg" href="#tl-book"><i data-lucide="calendar-check"></i> Book a table</a>
        <a class="btn" data-variant="outline" data-size="lg" href="#tl-menu">See the menu</a>
      </div>
      <dl class="tl-facts">
        <div><dt>Covers</dt><dd>48 inside · 20 outside</dd></div>
        <div><dt>Kitchen</dt><dd>Last orders 21:45</dd></div>
        <div><dt>Today</dt><dd data-tl-today>Tue - Sun</dd></div>
      </dl>
    </div>
    <figure class="tl-hero-pic">
      <img
        src="https://picsum.photos/id/490/900/1125"
        alt="A dark wooden worktop from above: a chopping board, a mortar and pestle, a cast-iron pan, a cleaver and small bowls of spices"
      />
      <img
        class="tl-hero-dish"
        src="https://picsum.photos/id/488/600/600"
        alt="A clay bowl of salad with red onion, red and green peppers and herbs on a wooden board"
      />
      <figcaption>Mise en place, 17:30</figcaption>
    </figure>
  </section>

  <section class="tl-band" data-tone="alt" id="tl-menu" aria-labelledby="tl-menu-title">
    <header class="mk-section-header">
      <div class="mk-section-header-copy">
        <span class="mk-section-header-eyebrow">The menu · week of 9 November</span>
        <h2 class="mk-section-header-title" id="tl-menu-title">Small plates to share, rice for two, the grill</h2>
        <p class="mk-section-header-desc"
          >It changes with the market, so this is this week's. The letters are the 14 allergens the EU asks every
          restaurant to name - tick the ones you can't eat and the dishes that contain them fade.</p
        >
      </div>
    </header>
    <div class="tl-menu">
      <div class="tabs">
        <div class="tab-list" role="tablist" aria-label="Services" data-size="lg">
          <button
            class="tab-trigger"
            role="tab"
            aria-selected="false"
            aria-controls="tl-p-lunch"
            id="tl-t-lunch"
            tabindex="-1"
            ><i data-lucide="sun"></i>Lunch</button
          >
          <button class="tab-trigger" role="tab" aria-selected="true" aria-controls="tl-p-dinner" id="tl-t-dinner"
            ><i data-lucide="moon-star"></i>Dinner</button
          >
          <button
            class="tab-trigger"
            role="tab"
            aria-selected="false"
            aria-controls="tl-p-drinks"
            id="tl-t-drinks"
            tabindex="-1"
            ><i data-lucide="wine"></i>Drinks</button
          >
        </div>
        <div class="tab-content" role="tabpanel" id="tl-p-lunch" aria-labelledby="tl-t-lunch" tabindex="0" hidden>
          <p class="tl-service"
            ><b>Menú del migdia</b
            ><span>Tuesday to Friday, 12:00 - 14:30 · two courses €19, three €23 · bread and water included</span></p
          >
          <h3 class="tl-course">To start - one of</h3>
          <ul class="tl-dishes">
            <li class="tl-dish" data-al="L">
              <h4>Crema de carbassa<i data-lucide="leaf"></i><span class="sr-only">(vegetarian)</span></h4>
              <span class="tl-codes"><abbr title="Celery">L</abbr></span>
              <span class="tl-price">-</span>
              <p>Pumpkin soup, toasted seeds, a thread of arbequina oil</p>
            </li>
            <li class="tl-dish" data-al="O">
              <h4>Amanida de llenties<i data-lucide="leaf"></i><span class="sr-only">(vegetarian)</span></h4>
              <span class="tl-codes"><abbr title="Sulphites">O</abbr></span>
              <span class="tl-price">-</span>
              <p>Lentil salad, roasted peppers, red onion, sherry vinegar</p>
            </li>
            <li class="tl-dish" data-al="A C G">
              <h4>Croquetes de pollastre</h4>
              <span class="tl-codes"
                ><abbr title="Gluten">A</abbr><abbr title="Eggs">C</abbr><abbr title="Milk">G</abbr></span
              >
              <span class="tl-price">-</span>
              <p>Two chicken croquettes with allioli</p>
            </li>
          </ul>
          <h3 class="tl-course">Main - one of</h3>
          <ul class="tl-dishes">
            <li class="tl-dish" data-al="L">
              <h4>Arròs de verdures<i data-lucide="leaf"></i><span class="sr-only">(vegetarian)</span></h4>
              <span class="tl-codes"><abbr title="Celery">L</abbr></span>
              <span class="tl-price">-</span>
              <p>Vegetable rice from the paella pan - artichoke, green beans, saffron</p>
            </li>
            <li class="tl-dish" data-al="D">
              <h4>Bacallà amb samfaina</h4>
              <span class="tl-codes"><abbr title="Fish">D</abbr></span>
              <span class="tl-price">-</span>
              <p>Salt cod on samfaina, the Catalan stew of aubergine, pepper and tomato</p>
            </li>
            <li class="tl-dish" data-al="">
              <h4>Botifarra amb mongetes</h4>
              <span class="tl-codes">none</span>
              <span class="tl-price">-</span>
              <p>Grilled pork sausage, white beans with garlic and parsley</p>
            </li>
          </ul>
          <h3 class="tl-course">To finish - for €4 more</h3>
          <ul class="tl-dishes">
            <li class="tl-dish" data-al="C G">
              <h4>Crema catalana</h4>
              <span class="tl-codes"><abbr title="Eggs">C</abbr><abbr title="Milk">G</abbr></span>
              <span class="tl-price">-</span>
              <p>Custard with lemon and cinnamon, the sugar burnt to order</p>
            </li>
          </ul>
        </div>
        <div class="tab-content" role="tabpanel" id="tl-p-dinner" aria-labelledby="tl-t-dinner" tabindex="0">
          <p class="tl-service"
            ><b>À la carte</b
            ><span>Tuesday to Saturday from 18:00 · the plates are made to share, two or three each</span></p
          >
          <h3 class="tl-course">Per picar - to pick at</h3>
          <ul class="tl-dishes">
            <li class="tl-dish" data-al="A">
              <h4>Pa amb tomàquet<i data-lucide="leaf"></i><span class="sr-only">(vegetarian)</span></h4>
              <span class="tl-codes"><abbr title="Gluten">A</abbr></span>
              <span class="tl-price">€5.50</span>
              <p>Toasted country bread rubbed with tomato, garlic and olive oil</p>
            </li>
            <li class="tl-dish" data-al="A C G">
              <h4>Croquetes de pernil</h4>
              <span class="tl-codes"
                ><abbr title="Gluten">A</abbr><abbr title="Eggs">C</abbr><abbr title="Milk">G</abbr></span
              >
              <span class="tl-price">€9.00</span>
              <p>Four ham croquettes, crisp outside, soft inside</p>
            </li>
            <li class="tl-dish" data-al="D">
              <h4>Escalivada</h4>
              <span class="tl-codes"><abbr title="Fish">D</abbr></span>
              <span class="tl-price">€11.00</span>
              <p>Aubergine, pepper and onion roasted in the embers, with anchovies</p>
            </li>
            <li class="tl-dish" data-al="R">
              <h4>Calamars a la planxa</h4>
              <span class="tl-codes"><abbr title="Molluscs">R</abbr></span>
              <span class="tl-price">€14.00</span>
              <p>Griddled squid, garlic and parsley</p>
            </li>
          </ul>
          <h3 class="tl-course">Arrossos - rice for two, 25 minutes</h3>
          <ul class="tl-dishes">
            <li class="tl-dish" data-al="C D R">
              <h4>Arròs negre</h4>
              <span class="tl-codes"
                ><abbr title="Eggs">C</abbr><abbr title="Fish">D</abbr><abbr title="Molluscs">R</abbr></span
              >
              <span class="tl-price">€24.00 pp</span>
              <p>Black rice with cuttlefish and its ink, allioli on the side</p>
            </li>
            <li class="tl-dish" data-al="A B C D">
              <h4>Fideuà</h4>
              <span class="tl-codes"
                ><abbr title="Gluten">A</abbr><abbr title="Crustaceans">B</abbr><abbr title="Eggs">C</abbr
                ><abbr title="Fish">D</abbr></span
              >
              <span class="tl-price">€25.00 pp</span>
              <p>Short noodles cooked like a paella, prawns and monkfish</p>
            </li>
          </ul>
          <h3 class="tl-course">De la brasa - from the grill</h3>
          <ul class="tl-dishes">
            <li class="tl-dish" data-al="A H" data-soon>
              <h4>Calçots amb romesco<i data-lucide="leaf"></i><span class="sr-only">(vegetarian)</span></h4>
              <span class="tl-codes"><abbr title="Gluten">A</abbr><abbr title="Nuts">H</abbr></span>
              <span class="tl-price">from 1 Dec</span>
              <p>Charred spring onions to dip in romesco - eaten with your hands, bibs provided</p>
            </li>
            <li class="tl-dish" data-al="H L O">
              <h4>Galta de porc</h4>
              <span class="tl-codes"
                ><abbr title="Nuts">H</abbr><abbr title="Celery">L</abbr><abbr title="Sulphites">O</abbr></span
              >
              <span class="tl-price">€23.00</span>
              <p>Pork cheek braised in red wine, finished on the grill, prunes and pine nuts</p>
            </li>
            <li class="tl-dish" data-al="">
              <h4>Botifarra amb mongetes</h4>
              <span class="tl-codes">none</span>
              <span class="tl-price">€17.00</span>
              <p>Grilled pork sausage, white beans with garlic and parsley</p>
            </li>
          </ul>
          <h3 class="tl-course">Postres</h3>
          <ul class="tl-dishes">
            <li class="tl-dish" data-al="C G">
              <h4>Crema catalana</h4>
              <span class="tl-codes"><abbr title="Eggs">C</abbr><abbr title="Milk">G</abbr></span>
              <span class="tl-price">€7.00</span>
              <p>Custard with lemon and cinnamon, the sugar burnt to order</p>
            </li>
            <li class="tl-dish" data-al="G H">
              <h4>Mel i mató</h4>
              <span class="tl-codes"><abbr title="Milk">G</abbr><abbr title="Nuts">H</abbr></span>
              <span class="tl-price">€8.00</span>
              <p>Fresh cheese, heather honey, walnuts</p>
            </li>
          </ul>
        </div>
        <div class="tab-content" role="tabpanel" id="tl-p-drinks" aria-labelledby="tl-t-drinks" tabindex="0" hidden>
          <p class="tl-service"
            ><b>From Catalonia, mostly</b><span>Wine by the glass 0.15 l · the porró holds 0.75 l</span></p
          >
          <h3 class="tl-course">Before</h3>
          <ul class="tl-dishes">
            <li class="tl-dish" data-al="O">
              <h4>Vermut de la casa</h4>
              <span class="tl-codes"><abbr title="Sulphites">O</abbr></span>
              <span class="tl-price">€6.00</span>
              <p>Red vermouth on ice, an olive and a slice of orange</p>
            </li>
            <li class="tl-dish" data-al="O">
              <h4>Cava brut nature, Penedès</h4>
              <span class="tl-codes"><abbr title="Sulphites">O</abbr></span>
              <span class="tl-price">€7.50</span>
              <p>By the glass</p>
            </li>
          </ul>
          <h3 class="tl-course">With the food</h3>
          <ul class="tl-dishes">
            <li class="tl-dish" data-al="O">
              <h4>Porró of the house red, Montsant</h4>
              <span class="tl-codes"><abbr title="Sulphites">O</abbr></span>
              <span class="tl-price">€24.00</span>
              <p>The glass jug with a spout, to pass down the table - we show you how</p>
            </li>
            <li class="tl-dish" data-al="O">
              <h4>Garnatxa blanca, Terra Alta</h4>
              <span class="tl-codes"><abbr title="Sulphites">O</abbr></span>
              <span class="tl-price">€8.00 / €36.00</span>
              <p>Glass or bottle</p>
            </li>
            <li class="tl-dish" data-al="A">
              <h4>Pale ale from a Hamburg brewery</h4>
              <span class="tl-codes"><abbr title="Gluten">A</abbr></span>
              <span class="tl-price">€4.20</span>
              <p>On tap, 0.3 l</p>
            </li>
            <li class="tl-dish" data-al="">
              <h4>Orxata</h4>
              <span class="tl-codes">none</span>
              <span class="tl-price">€4.50</span>
              <p>Cold tiger-nut milk, made here</p>
            </li>
          </ul>
          <h3 class="tl-course">After</h3>
          <ul class="tl-dishes">
            <li class="tl-dish" data-al="H">
              <h4>Ratafia</h4>
              <span class="tl-codes"><abbr title="Nuts">H</abbr></span>
              <span class="tl-price">€5.00</span>
              <p>Green-walnut and herb liqueur from the Pyrenees</p>
            </li>
          </ul>
        </div>
      </div>
      <aside class="tl-legend" id="tl-legend" aria-label="Allergens">
        <fieldset>
          <legend>Allergens - tick what you can't eat</legend>
          <p class="tl-legend-hint">Codes after the 14 allergens of EU Regulation 1169/2011.</p>
          <ul class="tl-allergens">
            <li
              ><label for="tl-al-a"><input type="checkbox" id="tl-al-a" value="A" /><b>A</b>Gluten</label></li
            >
            <li
              ><label for="tl-al-b"><input type="checkbox" id="tl-al-b" value="B" /><b>B</b>Crustaceans</label></li
            >
            <li
              ><label for="tl-al-c"><input type="checkbox" id="tl-al-c" value="C" /><b>C</b>Eggs</label></li
            >
            <li
              ><label for="tl-al-d"><input type="checkbox" id="tl-al-d" value="D" /><b>D</b>Fish</label></li
            >
            <li
              ><label for="tl-al-e"><input type="checkbox" id="tl-al-e" value="E" /><b>E</b>Peanuts</label></li
            >
            <li
              ><label for="tl-al-f"><input type="checkbox" id="tl-al-f" value="F" /><b>F</b>Soya</label></li
            >
            <li
              ><label for="tl-al-g"><input type="checkbox" id="tl-al-g" value="G" /><b>G</b>Milk</label></li
            >
            <li
              ><label for="tl-al-h"><input type="checkbox" id="tl-al-h" value="H" /><b>H</b>Nuts</label></li
            >
            <li
              ><label for="tl-al-l"><input type="checkbox" id="tl-al-l" value="L" /><b>L</b>Celery</label></li
            >
            <li
              ><label for="tl-al-m"><input type="checkbox" id="tl-al-m" value="M" /><b>M</b>Mustard</label></li
            >
            <li
              ><label for="tl-al-n"><input type="checkbox" id="tl-al-n" value="N" /><b>N</b>Sesame</label></li
            >
            <li
              ><label for="tl-al-o"><input type="checkbox" id="tl-al-o" value="O" /><b>O</b>Sulphites</label></li
            >
            <li
              ><label for="tl-al-p"><input type="checkbox" id="tl-al-p" value="P" /><b>P</b>Lupin</label></li
            >
            <li
              ><label for="tl-al-r"><input type="checkbox" id="tl-al-r" value="R" /><b>R</b>Molluscs</label></li
            >
          </ul>
        </fieldset>
        <output for="tl-al-a tl-al-c tl-al-d tl-al-g tl-al-h" data-tl-avoid aria-live="polite"
          >Nothing ticked - every dish is shown.</output
        >
        <small
          ><i
            data-lucide="leaf"
            style="width: 0.9rem; height: 0.9rem; vertical-align: -0.1em; color: oklch(0.55 0.13 145)"
          ></i>
          vegetarian. Our kitchen handles all 14 - traces are always possible. Tell us when you book and the kitchen
          plans your plates.</small
        >
      </aside>
    </div>
  </section>

  <section class="tl-band tl-tonight" id="tl-tonight" aria-labelledby="tl-tonight-title">
    <div class="tl-board">
      <h2 id="tl-tonight-title">Tonight</h2>
      <p class="tl-board-date" data-tl-board-date>Tuesday to Sunday</p>
      <ul>
        <li><span>Suquet de rap - monkfish, potatoes, saffron</span><b>€28</b><small>A D H L</small></li>
        <li><span>Rovellons a la brasa - saffron milk caps, garlic</span><b>€17</b><small>no allergens</small></li>
        <li><span>Panellets - almond and pine nut sweets, three</span><b>€6</b><small>C H</small></li>
        <li><span>Garnatxa blanca from the barrel</span><b>€8</b><small>O · by the glass</small></li>
      </ul>
      <p class="tl-board-note">Only 12 portions of the suquet - say so when you book and we keep one back.</p>
    </div>
    <div class="tl-kitchen">
      <p class="tl-eyebrow">From the kitchen</p>
      <h2>We cook what came in this morning</h2>
      <p
        >Fish comes from the auction in Cuxhaven on Tuesdays and Fridays, vegetables from two growers in the Vierlande,
        the rice from the Ebro delta. When something runs out, it comes off the board - so the board is the truest menu
        we have.</p
      >
      <img
        class="tl-produce"
        src="https://picsum.photos/id/292/900/506"
        alt="A halved red onion, a parsnip, a cabbage and parsley with scattered peppercorns on a wooden chopping board"
      />
      <div class="tl-signed">
        <span class="avatar"><img class="avatar-image" src="https://i.pravatar.cc/120?img=13" alt="" /></span>
        <span><b>Jordi Serra</b><small>chef, from Reus, in Hamburg since 2011</small></span>
      </div>
    </div>
  </section>

  <section class="tl-band tl-book" data-tone="alt" id="tl-book" aria-labelledby="tl-book-title">
    <header class="mk-section-header">
      <div class="mk-section-header-copy">
        <span class="mk-section-header-eyebrow">Reservations</span>
        <h2 class="mk-section-header-title" id="tl-book-title">Book a table</h2>
        <p class="mk-section-header-desc"
          >Up to eight guests online, up to 60 days ahead. The form only offers the times the kitchen serves on the day
          you pick.</p
        >
      </div>
    </header>
    <div class="tl-book-layout">
      <div>
        <section class="mk-booking-form" aria-label="Booking form">
          <form id="tl-book-form">
            <div class="mk-booking-form-layout">
              <div style="display: grid; gap: 2rem">
                <fieldset class="mk-booking-form-group">
                  <legend>1. Pick a day and a time</legend>
                  <div class="mk-booking-form-field"
                    ><label class="label" for="tl-date">Date</label
                    ><input class="input" type="date" id="tl-date" name="date" required
                  /></div>
                  <p class="tl-meal" id="tl-lunch-label">Lunch</p>
                  <div class="mk-booking-form-slots" role="group" aria-labelledby="tl-lunch-label">
                    <label class="mk-booking-form-slot"
                      ><input type="radio" name="slot" value="12:00" data-meal="lunch" required /><span
                        >12:00</span
                      ></label
                    ><label class="mk-booking-form-slot"
                      ><input type="radio" name="slot" value="12:30" data-meal="lunch" required /><span
                        >12:30</span
                      ></label
                    ><label class="mk-booking-form-slot"
                      ><input type="radio" name="slot" value="13:00" data-meal="lunch" required /><span
                        >13:00</span
                      ></label
                    ><label class="mk-booking-form-slot"
                      ><input type="radio" name="slot" value="13:30" data-meal="lunch" required /><span
                        >13:30</span
                      ></label
                    >
                  </div>
                  <p class="tl-meal" id="tl-dinner-label">Dinner</p>
                  <div class="mk-booking-form-slots" role="group" aria-labelledby="tl-dinner-label">
                    <label class="mk-booking-form-slot"
                      ><input type="radio" name="slot" value="18:00" data-meal="dinner" required /><span
                        >18:00</span
                      ></label
                    ><label class="mk-booking-form-slot"
                      ><input type="radio" name="slot" value="18:30" data-meal="dinner" required /><span
                        >18:30</span
                      ></label
                    ><label class="mk-booking-form-slot"
                      ><input type="radio" name="slot" value="19:00" data-meal="dinner" required /><span
                        >19:00</span
                      ></label
                    ><label class="mk-booking-form-slot"
                      ><input type="radio" name="slot" value="19:30" data-meal="dinner" required /><span
                        >19:30</span
                      ></label
                    ><label class="mk-booking-form-slot"
                      ><input type="radio" name="slot" value="20:00" data-meal="dinner" required /><span
                        >20:00</span
                      ></label
                    ><label class="mk-booking-form-slot"
                      ><input type="radio" name="slot" value="20:30" data-meal="dinner" required /><span
                        >20:30</span
                      ></label
                    ><label class="mk-booking-form-slot"
                      ><input type="radio" name="slot" value="21:00" data-meal="dinner" required /><span
                        >21:00</span
                      ></label
                    ><label class="mk-booking-form-slot"
                      ><input type="radio" name="slot" value="21:30" data-meal="dinner" required /><span
                        >21:30</span
                      ></label
                    >
                  </div>
                  <output class="tl-slot-status" for="tl-date" data-tl-slot-status aria-live="polite"
                    >Pick a day to see the free times.</output
                  >
                </fieldset>
              </div>
              <div style="display: grid; gap: 2rem; align-content: start">
                <fieldset class="mk-booking-form-group">
                  <legend>2. Who is coming</legend>
                  <div class="mk-booking-form-fields">
                    <div class="mk-booking-form-field"
                      ><label class="label" for="tl-party">Guests</label
                      ><select class="select" id="tl-party" name="party" required>
                        <option value="1">1 guest</option>
                        <option value="2" selected>2 guests</option>
                        <option value="3">3 guests</option>
                        <option value="4">4 guests</option>
                        <option value="5">5 guests</option>
                        <option value="6">6 guests</option>
                        <option value="7">7 guests</option>
                        <option value="8">8 guests</option>
                        <option value="9">9 or more</option>
                      </select></div
                    >
                    <div class="mk-booking-form-field"
                      ><label class="label" for="tl-name">Name</label
                      ><input class="input" id="tl-name" name="name" autocomplete="name" required
                    /></div>
                    <div class="mk-booking-form-field"
                      ><label class="label" for="tl-phone">Phone</label
                      ><input
                        class="input"
                        id="tl-phone"
                        type="tel"
                        name="phone"
                        autocomplete="tel"
                        inputmode="tel"
                        minlength="6"
                        required
                    /></div>
                    <div class="mk-booking-form-field"
                      ><label class="label" for="tl-email">Email</label
                      ><input class="input" id="tl-email" type="email" name="email" autocomplete="email" required
                    /></div>
                    <p class="tl-party-hint" data-tl-party-hint hidden
                      >For nine or more, the long table is yours - <a href="#tl-private">ask for it below</a>.</p
                    >
                    <div class="mk-booking-form-field" data-span="full"
                      ><label class="label" for="tl-notes">Allergies, a high chair, a birthday?</label
                      ><textarea class="textarea" id="tl-notes" name="notes" rows="3" maxlength="400"></textarea
                    ></div
                    >
                  </div>
                </fieldset>
                <div class="mk-booking-form-summary">
                  <p
                    >We hold your table for 15 minutes. Cancelling is free until 14:00 on the day - one call is
                    enough.</p
                  >
                  <button class="btn" type="submit"><i data-lucide="check"></i> Request the table</button>
                </div>
              </div>
            </div>
          </form>
          <div class="tl-done">
            <article class="tl-ticket" tabindex="-1" data-tl-ticket aria-labelledby="tl-ticket-title">
              <h3 id="tl-ticket-title">Your table<span data-tl-t-ref>TL-0000</span></h3>
              <dl>
                <dt>Table for</dt>
                <dd data-tl-t-party>2</dd>
                <dt>Day</dt>
                <dd data-tl-t-day>-</dd>
                <dt>Time</dt>
                <dd data-tl-t-time>-</dd>
                <dt>Name</dt>
                <dd data-tl-t-name>-</dd>
                <dt>Notes</dt>
                <dd data-tl-t-notes>-</dd>
              </dl>
              <p data-tl-t-line>Fins aviat - see you soon!</p>
            </article>
            <p style="margin: 0; color: var(--muted-foreground)"
              >This is a demo - nothing was sent. A real booking would arrive as an email with the same reference.</p
            >
            <button class="btn" data-variant="outline" type="button" data-tl-again
              ><i data-lucide="rotate-ccw"></i> Book another table</button
            >
          </div>
        </section>
      </div>
      <ul class="tl-policy">
        <li
          ><i data-lucide="clock"></i
          ><span><b>Kitchen hours</b>Last orders 14:00 at lunch, 21:45 at dinner, 22:15 on Saturdays.</span></li
        >
        <li
          ><i data-lucide="users"></i
          ><span><b>Nine or more</b>Groups sit at the long table - see private dining.</span></li
        >
        <li
          ><i data-lucide="footprints"></i
          ><span><b>Walk-ins</b>Eight stools at the bar are never booked. Come by from 18:00.</span></li
        >
        <li
          ><i data-lucide="baby"></i
          ><span><b>Children</b>Welcome at every hour - two high chairs, half portions.</span></li
        >
        <li
          ><i data-lucide="accessibility"></i
          ><span><b>Step-free</b>Level entrance from the street, an accessible toilet.</span></li
        >
      </ul>
    </div>
  </section>

  <section class="tl-band tl-private" id="tl-private" aria-labelledby="tl-private-title">
    <img
      src="https://picsum.photos/id/42/1000/800"
      alt="A long wooden table by a window in a quiet dining room, two cups of coffee and a phone at one end"
    />
    <div class="tl-private-copy">
      <p class="tl-eyebrow">Private dining</p>
      <h2 id="tl-private-title">The long table, for your people</h2>
      <p
        >Seven metres of oak that seats fourteen. Book it for a birthday, a team or a family that never fits in one
        photo - we cook one menu for everybody and bring it in big dishes, the way Sunday lunch goes in Catalonia.</p
      >
      <dl class="tl-private-facts">
        <div><dt>9 - 14</dt><dd>guests at the long table</dd></div>
        <div><dt>48</dt><dd>with the whole room, Sundays from 17:00</dd></div>
        <div><dt>€650</dt><dd>minimum spend for the table</dd></div>
      </dl>
      <div class="tl-menus">
        <article class="card">
          <h3>Menú de la taula</h3>
          <p>Five courses to share: pa amb tomàquet, three plates, rice, crema catalana.</p>
          <b>€58 pp</b>
        </article>
        <article class="card">
          <h3>Menú llarg</h3>
          <p>Seven courses, a glass of cava to start, coffee and panellets to end.</p>
          <b>€74 pp</b>
        </article>
      </div>
      <button class="btn" data-size="lg" type="button" commandfor="tl-enquiry" command="show-modal"
        ><i data-lucide="mail"></i> Ask about a date</button
      >
    </div>
  </section>

  <section class="tl-band mk-media-gallery" data-tone="alt" id="tl-gallery" aria-labelledby="tl-gallery-title">
    <header class="mk-media-gallery-head">
      <h2 id="tl-gallery-title">From the pass</h2>
      <span>8 photos</span>
      <div class="mk-media-gallery-tools">
        <div class="mk-media-gallery-views" role="radiogroup" aria-label="Layout">
          <label
            ><input type="radio" name="tl-view" value="grid" checked /><i data-lucide="layout-grid"></i
            ><span class="sr-only">Grid</span></label
          >
          <label
            ><input type="radio" name="tl-view" value="masonry" /><i data-lucide="layout-dashboard"></i
            ><span class="sr-only">Masonry</span></label
          >
          <label
            ><input type="radio" name="tl-view" value="strip" /><i data-lucide="gallery-horizontal"></i
            ><span class="sr-only">Filmstrip</span></label
          >
        </div>
        <button
          class="btn"
          data-variant="outline"
          data-size="sm"
          type="button"
          commandfor="tl-viewer"
          command="show-modal"
          data-slide="0"
          ><i data-lucide="play"></i> Slideshow</button
        >
      </div>
    </header>
    <ul class="mk-media-gallery-grid">
      <li
        ><button class="tl-shot" type="button" commandfor="tl-viewer" command="show-modal" data-slide="0"
          ><figure
            ><img
              src="https://picsum.photos/id/488/600/600"
              alt="A clay bowl of salad with red onion, red and green peppers and herbs on a wooden board"
            /><figcaption>Amanida in the cassola<small>A salad from the clay dish</small></figcaption></figure
          ></button
        ></li
      >
      <li
        ><button class="tl-shot" type="button" commandfor="tl-viewer" command="show-modal" data-slide="1"
          ><figure
            ><img
              src="https://picsum.photos/id/490/600/600"
              alt="A dark wooden worktop from above: a chopping board, a mortar and pestle, a cast-iron pan, a cleaver and small bowls of spices"
            /><figcaption>Before service<small>The mortar for the romesco</small></figcaption></figure
          ></button
        ></li
      >
      <li
        ><button class="tl-shot" type="button" commandfor="tl-viewer" command="show-modal" data-slide="2"
          ><figure
            ><img
              src="https://picsum.photos/id/292/600/600"
              alt="A halved red onion, a parsnip, a cabbage and parsley with scattered peppercorns on a wooden chopping board"
            /><figcaption>Tuesday's vegetables<small>From the Vierlande growers</small></figcaption></figure
          ></button
        ></li
      >
      <li
        ><button class="tl-shot" type="button" commandfor="tl-viewer" command="show-modal" data-slide="3"
          ><figure
            ><img
              src="https://picsum.photos/id/999/600/600"
              alt="A cream-topped cake crowned with poached pears on a dark wooden table, small bowls of almonds and biscuits around it"
            /><figcaption>Pear and mató cake<small>Fresh cheese, poached pears</small></figcaption></figure
          ></button
        ></li
      >
      <li
        ><button class="tl-shot" type="button" commandfor="tl-viewer" command="show-modal" data-slide="4"
          ><figure
            ><img
              src="https://picsum.photos/id/835/600/600"
              alt="Almond biscuits in a dark bowl beside lemon slices and yellow daffodils on a black table"
            /><figcaption>Carquinyolis<small>Almond biscuits with the coffee</small></figcaption></figure
          ></button
        ></li
      >
      <li
        ><button class="tl-shot" type="button" commandfor="tl-viewer" command="show-modal" data-slide="5"
          ><figure
            ><img
              src="https://picsum.photos/id/674/600/600"
              alt="Two hands holding out a bunch of dark blue grapes"
            /><figcaption>Garnatxa<small>The grape behind the house red</small></figcaption></figure
          ></button
        ></li
      >
      <li
        ><button class="tl-shot" type="button" commandfor="tl-viewer" command="show-modal" data-slide="6"
          ><figure
            ><img
              src="https://picsum.photos/id/429/600/600"
              alt="Fresh raspberries piled in a white cup on a saucer"
            /><figcaption>Summer's last raspberries<small>With the crema, in September</small></figcaption></figure
          ></button
        ></li
      >
      <li
        ><button class="tl-shot" type="button" commandfor="tl-viewer" command="show-modal" data-slide="7"
          ><figure
            ><img
              src="https://picsum.photos/id/195/600/600"
              alt="String lights over a narrow lane of shopfronts at night"
            /><figcaption>The lane in August<small>Twenty seats outside, May to September</small></figcaption></figure
          ></button
        ></li
      >
    </ul>
    <dialog class="mk-media-gallery-viewer tl-viewer" id="tl-viewer" aria-label="From the pass - photos">
      <div class="mk-media-gallery-viewer-inner">
        <ul class="mk-media-gallery-track" tabindex="0" aria-label="Photos - scroll sideways">
          <li
            ><img
              src="https://picsum.photos/id/488/1400/933"
              alt="A clay bowl of salad with red onion, red and green peppers and herbs on a wooden board"
            /><p>1 / 8 · Amanida in the cassola - the salad comes in the clay dish it was dressed in.</p></li
          >
          <li
            ><img
              src="https://picsum.photos/id/490/1400/933"
              alt="A dark wooden worktop from above: a chopping board, a mortar and pestle, a cast-iron pan, a cleaver and small bowls of spices"
            /><p>2 / 8 · Before service - the mortar is for the romesco and the picada that thickens the suquet.</p></li
          >
          <li
            ><img
              src="https://picsum.photos/id/292/1400/933"
              alt="A halved red onion, a parsnip, a cabbage and parsley with scattered peppercorns on a wooden chopping board"
            /><p>3 / 8 · Tuesday's vegetables from the Vierlande, the day the kitchen reopens.</p></li
          >
          <li
            ><img
              src="https://picsum.photos/id/999/1400/933"
              alt="A cream-topped cake crowned with poached pears on a dark wooden table, small bowls of almonds and biscuits around it"
            /><p
              >4 / 8 · Pear and mató cake - fresh cheese, pears poached in moscatel, toasted almonds. On Sundays.</p
            ></li
          >
          <li
            ><img
              src="https://picsum.photos/id/835/1400/933"
              alt="Almond biscuits in a dark bowl beside lemon slices and yellow daffodils on a black table"
            /><p>5 / 8 · Carquinyolis, the hard almond biscuits that come with every coffee.</p></li
          >
          <li
            ><img
              src="https://picsum.photos/id/674/1400/933"
              alt="Two hands holding out a bunch of dark blue grapes"
            /><p>6 / 8 · Garnatxa from Montsant, the grape in the porró.</p></li
          >
          <li
            ><img
              src="https://picsum.photos/id/429/1400/933"
              alt="Fresh raspberries piled in a white cup on a saucer"
            /><p>7 / 8 · The last raspberries of the summer, with crema catalana.</p></li
          >
          <li
            ><img
              src="https://picsum.photos/id/195/1400/933"
              alt="String lights over a narrow lane of shopfronts at night"
            /><p>8 / 8 · The lane in August, twenty seats under the lights.</p></li
          >
        </ul>
        <div class="tl-viewer-steps">
          <button class="tl-viewer-step" type="button" data-viewer-step="-1" aria-label="Previous photo"
            ><i data-lucide="arrow-left"></i
          ></button>
          <p class="mk-media-gallery-hint">Swipe, scroll or use ← → · Esc closes</p>
          <button class="tl-viewer-step" type="button" data-viewer-step="1" aria-label="Next photo"
            ><i data-lucide="arrow-right"></i
          ></button>
        </div>
        <form method="dialog"
          ><button class="mk-media-gallery-close" aria-label="Close"><i data-lucide="x"></i></button
        ></form>
      </div>
    </dialog>
  </section>

  <section class="tl-band" id="tl-reviews" aria-labelledby="tl-reviews-title">
    <header class="mk-section-header">
      <div class="mk-section-header-copy">
        <span class="mk-section-header-eyebrow">The guest book by the door</span>
        <h2 class="mk-section-header-title" id="tl-reviews-title">What people wrote on the way out</h2>
      </div>
    </header>
    <div class="mk-testimonial-cards">
      <figure class="mk-testimonial-card" data-variant="quote">
        <blockquote class="mk-testimonial-card-text"
          ><p
            >We came for the black rice and stayed for the porró lesson. My father has not stopped talking about it.</p
          ></blockquote
        >
        <figcaption class="mk-testimonial-card-author"
          ><span class="avatar"><span class="avatar-fallback">HM</span></span
          ><span class="mk-testimonial-card-info"
            ><span class="mk-testimonial-card-name">Hanna M.</span
            ><span class="mk-testimonial-card-role">A birthday at the long table, October</span></span
          ></figcaption
        >
      </figure>
      <figure class="mk-testimonial-card" data-variant="quote">
        <blockquote class="mk-testimonial-card-text"
          ><p
            >I can't eat gluten and nobody made a face. Jordi came out and told me which three dishes he would change
            for me.</p
          ></blockquote
        >
        <figcaption class="mk-testimonial-card-author"
          ><span class="avatar"><span class="avatar-fallback">TK</span></span
          ><span class="mk-testimonial-card-info"
            ><span class="mk-testimonial-card-name">Tobias K.</span
            ><span class="mk-testimonial-card-role">Dinner for two, September</span></span
          ></figcaption
        >
      </figure>
      <figure class="mk-testimonial-card" data-variant="quote">
        <blockquote class="mk-testimonial-card-text"
          ><p
            >The menu del migdia is the best €23 in Ottensen. Back at my desk by 13:15, which is the whole point.</p
          ></blockquote
        >
        <figcaption class="mk-testimonial-card-author"
          ><span class="avatar"><span class="avatar-fallback">AR</span></span
          ><span class="mk-testimonial-card-info"
            ><span class="mk-testimonial-card-name">Ana R.</span
            ><span class="mk-testimonial-card-role">Lunch, most Thursdays</span></span
          ></figcaption
        >
      </figure>
    </div>
  </section>

  <section class="tl-band" data-tone="alt" id="tl-visit" aria-labelledby="tl-visit-title">
    <header class="mk-section-header">
      <div class="mk-section-header-copy">
        <span class="mk-section-header-eyebrow">Visit</span>
        <h2 class="mk-section-header-title" id="tl-visit-title">Five minutes from Altona station</h2>
      </div>
    </header>
    <div class="tl-visit">
      <section class="mk-opening-hours" aria-labelledby="tl-hours-title">
        <h3 class="mk-opening-hours-title" id="tl-hours-title">Opening hours</h3>
        <p class="mk-opening-hours-status" data-tl-status>Tuesday to Sunday</p>
        <dl class="mk-opening-hours-days">
          <div data-day="1" data-closed><dt>Monday</dt><dd>Closed</dd></div>
          <div data-day="2"
            ><dt>Tuesday</dt><dd>12:00 - 14:30, 18:00 - 23:00<small>Kitchen: last orders 14:00 · 21:45</small></dd></div
          >
          <div data-day="3"
            ><dt>Wednesday</dt
            ><dd>12:00 - 14:30, 18:00 - 23:00<small>Kitchen: last orders 14:00 · 21:45</small></dd></div
          >
          <div data-day="4"
            ><dt>Thursday</dt
            ><dd>12:00 - 14:30, 18:00 - 23:00<small>Kitchen: last orders 14:00 · 21:45</small></dd></div
          >
          <div data-day="5"
            ><dt>Friday</dt><dd>12:00 - 14:30, 18:00 - 23:00<small>Kitchen: last orders 14:00 · 21:45</small></dd></div
          >
          <div data-day="6"
            ><dt>Saturday</dt><dd>17:30 - 23:30<small>Kitchen: last orders 22:15</small></dd></div
          >
          <div data-day="0"
            ><dt>Sunday</dt><dd>12:00 - 16:00<small>Kitchen: last orders 15:00</small></dd></div
          >
        </dl>
        <ul class="mk-opening-hours-exceptions" aria-label="Exceptions">
          <li><time datetime="2026-12-24">24 Dec</time><span>Closed</span></li>
          <li><time datetime="2026-12-25">25 - 26 Dec</time><span>Lunch only, 12:00 - 16:00</span></li>
          <li><time datetime="2026-12-31">31 Dec</time><span>One sitting, 19:30</span></li>
        </ul>
      </section>
      <div>
        <section class="mk-location-map" aria-labelledby="tl-map-title">
          <h3 id="tl-map-title" class="sr-only">How to find us</h3>
          <div class="mk-location-map-layout">
            <div class="mk-location-map-canvas">
              <svg
                class="mk-location-map-art"
                viewBox="0 0 800 500"
                preserveAspectRatio="xMidYMid slice"
                aria-hidden="true"
              >
                <rect width="800" height="500" class="mk-location-map-land" />
                <path class="mk-location-map-water" d="M0 410 C140 392 260 440 400 425 S640 380 800 400 V500 H0 Z" />
                <path
                  class="mk-location-map-park"
                  d="M80 290 h150 a18 18 0 0 1 18 18 v50 a18 18 0 0 1 -18 18 h-150 a18 18 0 0 1 -18 -18 v-50 a18 18 0 0 1 18 -18 Z"
                />
                <g class="mk-location-map-roads">
                  <path d="M0 140 C200 150 420 120 800 135" />
                  <path d="M560 0 V400" />
                  <path d="M250 0 C260 120 300 260 330 420" />
                  <path d="M0 250 H800" />
                </g>
                <g class="mk-location-map-streets">
                  <path d="M0 70 H800" />
                  <path d="M0 200 H800" />
                  <path d="M0 330 H800" />
                  <path d="M120 0 V400" />
                  <path d="M420 0 V400" />
                  <path d="M690 0 V400" />
                </g>
              </svg>
              <button
                class="mk-location-map-pin"
                type="button"
                popovertarget="tl-pin-1"
                style="--x: 46%; --y: 44%; anchor-name: --tl-pin-1"
                aria-label="Taula Llarga"
                ><i data-lucide="map-pin"></i
              ></button>
              <div class="mk-location-map-popup" id="tl-pin-1" popover style="position-anchor: --tl-pin-1">
                <strong>Taula Llarga</strong><address>Holzmarktgang 7, 22765 Hamburg</address
                ><button
                  class="btn"
                  data-size="sm"
                  data-variant="outline"
                  type="button"
                  data-tl-copy="Holzmarktgang 7, 22765 Hamburg"
                  ><i data-lucide="copy"></i> <span data-tl-copy-label>Copy address</span></button
                >
              </div>
              <button
                class="mk-location-map-pin"
                type="button"
                popovertarget="tl-pin-2"
                style="--x: 72%; --y: 22%; anchor-name: --tl-pin-2"
                aria-label="Altona station"
                ><i data-lucide="map-pin"></i
              ></button>
              <div class="mk-location-map-popup" id="tl-pin-2" popover style="position-anchor: --tl-pin-2">
                <strong>Altona station</strong><address>S-Bahn and regional trains</address
                ><span>Five minutes on foot: leave by the Ottensen exit and walk south.</span>
              </div>
              <button
                class="mk-location-map-pin"
                type="button"
                popovertarget="tl-pin-3"
                style="--x: 30%; --y: 86%; anchor-name: --tl-pin-3"
                aria-label="Elbe riverside path"
                ><i data-lucide="map-pin"></i
              ></button>
              <div class="mk-location-map-popup" id="tl-pin-3" popover style="position-anchor: --tl-pin-3">
                <strong>The Elbe</strong><address>Riverside path</address
                ><span>Ten minutes downhill - the walk after the rice.</span>
              </div>
            </div>
            <ol class="mk-location-map-list">
              <li><b>1</b><strong>Taula Llarga</strong><span>Holzmarktgang 7 · level entrance</span></li>
              <li><b>2</b><strong>Altona station</strong><span>S-Bahn S1, S3, S5 · five minutes on foot</span></li>
              <li><b>3</b><strong>The Elbe</strong><span>Ten minutes downhill to the river</span></li>
            </ol>
          </div>
        </section>
        <div class="tl-address">
          <address
            ><b>Taula Llarga</b><br />Holzmarktgang 7, 22765 Hamburg<br />Phone 040 3861 2207 ·
            hola@taula-llarga.example</address
          >
          <button
            class="btn"
            data-variant="outline"
            type="button"
            data-tl-copy="Taula Llarga, Holzmarktgang 7, 22765 Hamburg"
            ><i data-lucide="copy"></i> <span data-tl-copy-label>Copy address</span></button
          >
        </div>
      </div>
    </div>
  </section>

  <footer class="mk-footer tl-footer">
    <div class="mk-footer-inner">
      <nav class="mk-footer-nav" aria-label="Footer">
        <div class="mk-footer-col">
          <h3 class="mk-footer-heading">Visit</h3>
          <ul class="mk-footer-list">
            <li
              ><address>Holzmarktgang 7<br />22765 Hamburg-Ottensen</address></li
            >
            <li><a href="#tl-visit">Map and directions</a></li>
          </ul>
        </div>
        <div class="mk-footer-col">
          <h3 class="mk-footer-heading">Hours</h3>
          <ul class="mk-footer-list">
            <li><span>Tue - Fri 12:00 - 14:30, 18:00 - 23:00</span></li>
            <li><span>Sat 17:30 - 23:30 · Sun 12:00 - 16:00</span></li>
            <li><span>Closed on Mondays</span></li>
          </ul>
        </div>
        <div class="mk-footer-col">
          <h3 class="mk-footer-heading">Reserve</h3>
          <ul class="mk-footer-list">
            <li><a href="#tl-book">Book a table</a></li>
            <li><a href="#tl-private">The long table</a></li>
            <li><span>040 3861 2207, from 11:00</span></li>
          </ul>
        </div>
        <div class="mk-footer-col">
          <h3 class="mk-footer-heading">Legal</h3>
          <ul class="mk-footer-list">
            <li
              ><button class="tl-linkish" type="button" commandfor="tl-imprint" command="show-modal"
                >Imprint</button
              ></li
            >
            <li
              ><button class="tl-linkish" type="button" commandfor="tl-privacy" command="show-modal"
                >Privacy</button
              ></li
            >
            <li><a href="#tl-legend">Allergen information</a></li>
          </ul>
        </div>
      </nav>
      <hr class="separator mk-footer-rule" />
      <div class="mk-footer-bottom">
        <a class="mk-footer-brand" href="#tl-top">Taula Llarga</a>
        <div class="mk-footer-meta">
          <p class="mk-footer-copy">© 2026 Taula Llarga GmbH · Cuina catalana in Hamburg since 2016</p>
        </div>
      </div>
    </div>
  </footer>

  <dialog class="dialog tl-enquiry" id="tl-enquiry" data-size="lg" aria-labelledby="tl-enquiry-title">
    <div class="dialog-content">
      <form data-tl-enquiry>
        <div class="dialog-header">
          <h2 class="dialog-title" id="tl-enquiry-title">The long table - ask about a date</h2>
          <p class="dialog-description">We answer within one working day, with a menu and a price for your group.</p>
        </div>
        <div class="dialog-body">
          <div class="tl-pair">
            <div class="tl-row"
              ><label class="label" for="tl-e-date">Date</label
              ><input class="input" type="date" id="tl-e-date" name="date" required
            /></div>
            <div class="tl-row"
              ><label class="label" for="tl-e-guests">Guests</label
              ><input class="input" type="number" id="tl-e-guests" name="guests" min="9" max="48" value="12" required
            /></div>
          </div>
          <div class="tl-row"
            ><label class="label" for="tl-e-occasion">Occasion</label
            ><select class="select" id="tl-e-occasion" name="occasion">
              <option>A birthday</option>
              <option>A team dinner</option>
              <option>A family gathering</option>
              <option>A wedding or an engagement</option>
              <option>Something else</option>
            </select></div
          >
          <fieldset class="tl-choice">
            <legend>Menu</legend>
            <label><input class="radio" type="radio" name="menu" value="Menú de la taula" checked /> Taula, €58</label>
            <label><input class="radio" type="radio" name="menu" value="Menú llarg" /> Llarg, €74</label>
            <label><input class="radio" type="radio" name="menu" value="not decided" /> Not sure yet</label>
          </fieldset>
          <div class="tl-pair">
            <div class="tl-row"
              ><label class="label" for="tl-e-name">Name</label
              ><input class="input" id="tl-e-name" name="name" autocomplete="name" required
            /></div>
            <div class="tl-row"
              ><label class="label" for="tl-e-email">Email</label
              ><input class="input" id="tl-e-email" type="email" name="email" autocomplete="email" required
            /></div>
          </div>
          <div class="tl-row"
            ><label class="label" for="tl-e-text">Anything else?</label><textarea
              class="textarea"
              id="tl-e-text"
              name="message"
              rows="3"
              placeholder="Allergies, a speech, a cake you bring yourself..."
            ></textarea
          ></div
          >
        </div>
        <div class="dialog-footer">
          <button class="btn" data-variant="ghost" type="button" commandfor="tl-enquiry" command="close">Cancel</button>
          <button class="btn" type="submit"><i data-lucide="send"></i> Send the enquiry</button>
        </div>
      </form>
      <div class="dialog-body tl-enquiry-done" tabindex="-1">
        <i data-lucide="check"></i>
        <h2 class="dialog-title">Thank you<span data-tl-e-name></span>!</h2>
        <p data-tl-e-line>We write back within one working day.</p>
        <p style="font-size: 0.8125rem">A demo - nothing left this page.</p>
        <div class="dialog-footer" style="justify-content: center">
          <button class="btn" type="button" commandfor="tl-enquiry" command="close">Close</button>
        </div>
      </div>
    </div>
  </dialog>

  <dialog class="dialog" id="tl-imprint" data-size="lg" aria-labelledby="tl-imprint-title">
    <div class="dialog-content">
      <div class="dialog-header">
        <h2 class="dialog-title" id="tl-imprint-title">Imprint</h2>
        <p class="dialog-description">Information under § 5 of the German Digital Services Act (DDG).</p>
      </div>
      <div class="dialog-body">
        <dl>
          <dt>Operator</dt>
          <dd>Taula Llarga GmbH, Holzmarktgang 7, 22765 Hamburg</dd>
          <dt>Managing director</dt>
          <dd>Núria Ferrer Brandt</dd>
          <dt>Register</dt>
          <dd>Amtsgericht Hamburg, HRB 141 207</dd>
          <dt>VAT ID</dt>
          <dd>DE 318 664 029</dd>
          <dt>Contact</dt>
          <dd>Phone 040 3861 2207 · hola@taula-llarga.example</dd>
          <dt>Content</dt>
          <dd>Núria Ferrer Brandt, address as above</dd>
        </dl>
        <p
          >Food business registered with the Bezirksamt Altona, consumer protection department. The allergen codes on
          this page follow Annex II of EU Regulation 1169/2011; ask the staff for the written list of every dish.</p
        >
      </div>
      <div class="dialog-footer">
        <button class="btn" type="button" commandfor="tl-imprint" command="close">Close</button>
      </div>
    </div>
  </dialog>

  <dialog class="dialog" id="tl-privacy" data-size="lg" aria-labelledby="tl-privacy-title">
    <div class="dialog-content">
      <div class="dialog-header">
        <h2 class="dialog-title" id="tl-privacy-title">Privacy</h2>
        <p class="dialog-description">What happens to the details you give us.</p>
      </div>
      <div class="dialog-body">
        <h3>Bookings and enquiries</h3>
        <p
          >We use your name, phone number, email and notes only to hold your table or plan your dinner (Art. 6 (1) (b)
          GDPR). Notes about allergies go to the kitchen on the day and nowhere else. We delete a booking 30 days after
          the visit.</p
        >
        <h3>No cookies, no tracking</h3>
        <p
          >This site sets no cookies and counts no visitors - that is why there is no banner. The look and the dark mode
          you pick are not stored.</p
        >
        <h3>Your rights</h3>
        <p
          >You can ask what we hold about you, have it corrected or deleted, and complain to the Hamburg Commissioner
          for Data Protection. Write to hola@taula-llarga.example.</p
        >
      </div>
      <div class="dialog-footer">
        <button class="btn" type="button" commandfor="tl-privacy" command="close">Close</button>
      </div>
    </div>
  </dialog>
</div>
<script type="module">
  // df$ comes with the component bundle - a full-screen page loads it after this module
  addEventListener('DOMContentLoaded', () => {
    const ROOT = '#in-restaurant';

    // light or dark: the switch writes the page's dark class (every look has both palettes); it follows the class when
    // something else sets it (the docs card follows the site's mode)
    const siteMode = df$(`${ROOT} [data-site-mode]`);
    const syncMode = () => siteMode.prop('checked', document.documentElement.classList.contains('dark'));
    siteMode.on('change', () => {
      document.documentElement.classList.toggle('dark', siteMode.prop('checked'));
      document.dispatchEvent(new CustomEvent('defuss-theme-change'));
    });
    new MutationObserver(syncMode).observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
    syncMode();

    // the look: one of the site's designs. An element with data-look-set takes that look's attributes
    const root = df$(ROOT).get(0);
    const look = df$(`${ROOT} [data-site-look]`);
    look.val(root.dataset.look).on('change', () => {
      root.dataset.look = look.val();
      df$(`${ROOT} [data-look-set]`).each((_i, el) => {
        const sets = JSON.parse(el.dataset.lookSet);
        for (const [attr, value] of Object.entries({ ...sets.default, ...sets[root.dataset.look] }))
          df$(el).attr(attr, value);
      });
      document.dispatchEvent(new CustomEvent('defuss-theme-change'));
    });

    // the header marks the section in view: the one that shows the most of itself
    const links = df$(`${ROOT} .mk-header-nav a`);
    const shown = new Map();
    const spy = new IntersectionObserver(
      (entries) => {
        for (const e of entries) shown.set(e.target.id, e.isIntersecting ? e.intersectionRect.height : 0);
        let best = '';
        let most = 0;
        for (const [id, h] of shown)
          if (h > most) {
            best = id;
            most = h;
          }
        links.each((_i, a) => {
          df$(a).attr('aria-current', a.getAttribute('href') === `#${best}` ? 'true' : null);
        });
      },
      { threshold: [0, 0.1, 0.25, 0.5, 0.75, 1] },
    );
    // every band takes part, so the hero or the gallery in view marks no link
    df$(`${ROOT} > section[id]`).each((_i, section) => {
      spy.observe(section);
    });

    // the time in Hamburg: what is open now, today's row, today's board
    const TZ = 'Europe/Berlin';
    const DAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    const WEEK = { Sun: 0, Mon: 1, Tue: 2, Wed: 3, Thu: 4, Fri: 5, Sat: 6 };
    const TWO = [
      { open: '12:00', close: '14:30', last: '14:00' },
      { open: '18:00', close: '23:00', last: '21:45' },
    ];
    const HOURS = {
      0: [{ open: '12:00', close: '16:00', last: '15:00' }],
      1: [],
      2: TWO,
      3: TWO,
      4: TWO,
      5: TWO,
      6: [{ open: '17:30', close: '23:30', last: '22:15' }],
    };
    const mins = (t) => Number(t.slice(0, 2)) * 60 + Number(t.slice(3));
    const hamburg = () => {
      const p = Object.fromEntries(
        new Intl.DateTimeFormat('en-GB', {
          timeZone: TZ,
          weekday: 'short',
          hour: '2-digit',
          minute: '2-digit',
          hourCycle: 'h23',
        })
          .formatToParts(new Date())
          .map((x) => [x.type, x.value]),
      );
      return { day: WEEK[p.weekday], minute: Number(p.hour) * 60 + Number(p.minute) };
    };
    const isoToday = () => new Intl.DateTimeFormat('en-CA', { timeZone: TZ }).format(new Date());
    const status = () => {
      const now = hamburg();
      const open = HOURS[now.day].find((r) => now.minute >= mins(r.open) && now.minute < mins(r.close));
      if (open)
        return now.minute < mins(open.last)
          ? {
              short: `Open · orders until ${open.last}`,
              long: `Open now · the kitchen takes orders until ${open.last}`,
            }
          : {
              short: `Bar open until ${open.close}`,
              long: `Open now · last orders have gone, the bar is open until ${open.close}`,
            };
      for (let ahead = 0; ahead < 8; ahead++) {
        const day = (now.day + ahead) % 7;
        const next = HOURS[day].find((r) => ahead > 0 || mins(r.open) > now.minute);
        if (next) {
          const when = ahead === 0 ? 'today' : ahead === 1 ? 'tomorrow' : DAYS[day];
          return { short: `Opens ${when} ${next.open}`, long: `Closed now · opens ${when} at ${next.open}` };
        }
      }
      return { short: '', long: '' };
    };
    const tick = () => {
      const s = status();
      df$(`${ROOT} [data-tl-status]`).text(s.long);
      df$(`${ROOT} [data-tl-today]`).text(s.short);
      const today = hamburg().day;
      df$(`${ROOT} .mk-opening-hours-days > div`).each((_i, row) => {
        df$(row).attr('aria-current', Number(row.dataset.day) === today ? 'date' : null);
      });
      const date = new Date(`${isoToday()}T12:00:00`).toLocaleDateString('en-GB', {
        weekday: 'long',
        day: 'numeric',
        month: 'long',
      });
      df$(`${ROOT} [data-tl-board-date]`).text(
        today === 1 ? 'Monday - we are closed. This is the board for Tuesday.' : date,
      );
    };
    tick();
    setInterval(tick, 60_000);

    // the allergen legend: the CSS fades the dishes, this line says how many
    const NAMES = {
      A: 'gluten',
      B: 'crustaceans',
      C: 'eggs',
      D: 'fish',
      E: 'peanuts',
      F: 'soya',
      G: 'milk',
      H: 'nuts',
      L: 'celery',
      M: 'mustard',
      N: 'sesame',
      O: 'sulphites',
      P: 'lupin',
      R: 'molluscs',
    };
    const listOf = new Intl.ListFormat('en-GB', { type: 'conjunction' });
    const avoid = df$(`${ROOT} .tl-allergens input`);
    avoid.on('change', () => {
      const codes = [];
      avoid.each((_i, el) => {
        if (el.checked) codes.push(el.value);
      });
      const out = df$(`${ROOT} [data-tl-avoid]`);
      if (!codes.length) {
        out.text('Nothing ticked - every dish is shown.');
        return;
      }
      let n = 0;
      df$(`${ROOT} .tl-dish`).each((_i, el) => {
        const al = (el.dataset.al || '').split(' ');
        if (codes.some((c) => al.includes(c))) n++;
      });
      out.text(
        `Without ${listOf.format(codes.map((c) => NAMES[c]))}: ${n} ${n === 1 ? 'dish fades' : 'dishes fade'}. Ask us - some can be made without.`,
      );
    });

    // the booking: the day decides which times are served; a full slot or a past one is struck out
    const form = df$('#tl-book-form');
    const date = df$('#tl-date');
    const LUNCH = [0, 2, 3, 4, 5];
    const DINNER = [2, 3, 4, 5, 6];
    const FULL = { 5: ['19:30', '20:00'], 6: ['19:30', '20:00'], 0: ['13:00'] };
    const longDate = (v) =>
      new Date(`${v}T12:00:00`).toLocaleDateString('en-GB', { weekday: 'long', day: 'numeric', month: 'long' });
    const addDays = (iso, n) => {
      const d = new Date(`${iso}T12:00:00`);
      d.setDate(d.getDate() + n);
      return d.toLocaleDateString('en-CA');
    };
    date.attr('min', isoToday()).attr('max', addDays(isoToday(), 60));
    const syncSlots = () => {
      const v = date.val();
      const out = df$(`${ROOT} [data-tl-slot-status]`);
      const slots = df$(`${ROOT} #tl-book-form [name="slot"]`);
      if (!v) {
        slots.each((_i, el) => {
          df$(el).prop('disabled', false);
          df$(el).parent().attr('title', null);
        });
        date.get(0).setCustomValidity('');
        out.text('Pick a day to see the free times.');
        return;
      }
      const day = new Date(`${v}T12:00:00`).getDay();
      const full = FULL[day] ?? [];
      const late = v === isoToday() ? hamburg().minute + 60 : -1;
      let free = 0;
      slots.each((_i, el) => {
        const served = (el.dataset.meal === 'lunch' ? LUNCH : DINNER).includes(day);
        const booked = full.includes(el.value);
        const past = mins(el.value) < late;
        const off = !served || booked || past;
        df$(el).prop('disabled', off);
        if (off) df$(el).prop('checked', false);
        else free++;
        df$(el)
          .parent()
          .attr(
            'title',
            !served ? 'Not served on this day' : booked ? 'Fully booked' : past ? 'Too late for today' : null,
          );
      });
      const name = longDate(v);
      const what =
        day === 0
          ? 'the long Sunday lunch, 12:00 to 16:00'
          : day === 6
            ? 'dinner only, from 17:30'
            : 'lunch from 12:00, dinner from 18:00';
      const gone = full.length ? ` ${listOf.format(full)} ${full.length === 1 ? 'is' : 'are'} fully booked.` : '';
      if (day === 1) {
        date.get(0).setCustomValidity('We are closed on Mondays - please pick another day.');
        out.text(`${name}: we are closed on Mondays.`);
      } else if (!free) {
        date.get(0).setCustomValidity('No tables left on this day - please pick another.');
        out.text(`${name}: no tables left for today.`);
      } else {
        date.get(0).setCustomValidity('');
        out.text(`${name}: ${what}.${gone}`);
      }
    };
    date.on('change', syncSlots).on('input', syncSlots);
    syncSlots();

    // nine or more: the long table
    const party = df$('#tl-party');
    party.on('change', () => {
      const many = party.val() === '9';
      party.get(0).setCustomValidity(many ? 'For nine or more guests, please ask for the long table.' : '');
      df$(`${ROOT} [data-tl-party-hint]`).prop('hidden', !many);
    });

    // sending shows the ticket that names the booking (a demo - nothing leaves the page)
    const book = df$('#tl-book');
    form.on('submit', (event) => {
      event.preventDefault();
      const data = new FormData(event.currentTarget);
      const v = String(data.get('date'));
      const time = String(data.get('slot'));
      const who = String(data.get('name')).trim();
      const ref = `TL-${String((v + time + who).split('').reduce((h, c) => (h * 31 + c.charCodeAt(0)) % 9000, 7) + 1000)}`;
      const guests = Number(data.get('party'));
      df$(`${ROOT} [data-tl-t-ref]`).text(ref);
      df$(`${ROOT} [data-tl-t-party]`).text(`${guests} ${guests === 1 ? 'guest' : 'guests'}`);
      df$(`${ROOT} [data-tl-t-day]`).text(longDate(v));
      df$(`${ROOT} [data-tl-t-time]`).text(time);
      df$(`${ROOT} [data-tl-t-name]`).text(who);
      df$(`${ROOT} [data-tl-t-notes]`).text(String(data.get('notes')).trim() || 'none');
      df$(`${ROOT} [data-tl-t-line]`).text(
        `Fins aviat, ${who.split(/\s+/)[0]} - a table for ${guests} on ${longDate(v)} at ${time}. We hold it for 15 minutes.`,
      );
      book.attr('data-sent', '');
      df$(`${ROOT} [data-tl-ticket]`).get(0).focus();
    });
    df$(`${ROOT} [data-tl-again]`).on('click', () => {
      form.get(0).reset();
      party.get(0).setCustomValidity('');
      df$(`${ROOT} [data-tl-party-hint]`).prop('hidden', true);
      book.attr('data-sent', null);
      syncSlots();
      date.get(0).focus();
    });

    // the long table: the enquiry sends to a thank-you, closing resets it
    const enquiry = df$('#tl-enquiry');
    df$('#tl-e-date').attr('min', addDays(isoToday(), 7));
    df$(`${ROOT} [data-tl-enquiry]`).on('submit', (event) => {
      event.preventDefault();
      const data = new FormData(event.currentTarget);
      const first = String(data.get('name') ?? '')
        .trim()
        .split(/\s+/)[0];
      df$(`${ROOT} [data-tl-e-name]`).text(first ? `, ${first}` : '');
      df$(`${ROOT} [data-tl-e-line]`).text(
        `We write back within one working day about ${longDate(String(data.get('date')))} for ${data.get('guests')} guests - ${String(data.get('occasion')).toLowerCase()}, menu ${data.get('menu')}.`,
      );
      enquiry.attr('data-sent', '');
      enquiry.find('.tl-enquiry-done').get(0).focus();
    });
    enquiry.on('close', () => {
      enquiry.attr('data-sent', null);
      enquiry.find('form').get(0).reset();
    });

    // the photo viewer: a photo's command opens it, the click scrolls it to that photo
    const track = df$('#tl-viewer .mk-media-gallery-track');
    const still = () => matchMedia('(prefers-reduced-motion: reduce)').matches;
    df$(`${ROOT} [data-slide]`).on('click', (event) => {
      const n = Number(event.currentTarget.dataset.slide);
      setTimeout(() => track.children().get(n)?.scrollIntoView({ block: 'nearest', inline: 'start' }));
    });
    df$('#tl-viewer [data-viewer-step]').on('click', (event) => {
      const el = track.get(0);
      el.scrollBy({
        left: Number(event.currentTarget.dataset.viewerStep) * el.clientWidth,
        behavior: still() ? 'instant' : 'smooth',
      });
    });

    // copy the address; the label says whether it worked
    df$(`${ROOT} [data-tl-copy]`).on('click', async (event) => {
      const button = event.currentTarget;
      const label = df$(button).find('[data-tl-copy-label]');
      try {
        await navigator.clipboard.writeText(button.dataset.tlCopy);
        label.text('Copied');
      } catch {
        label.text(button.dataset.tlCopy);
      }
      setTimeout(() => label.text('Copy address'), 2500);
    });
  });
</script>
Built from Site Header (its Sheet holds the navigation on a phone), Section Header, Tabs for the services, Booking Form, Card, Media Gallery and its viewer, Testimonials with Avatar, Opening Hours, Location Map, Site Footer and three Dialogs with Input, Select, Radio Group and Textarea. The allergen legend filters the menu with :has() alone; the script only counts. The board, the circled words and the booking ticket are the page's own CSS, drawn differently in each look.
Comments, ideas or improvements? Edit this page's source on GitHub