/* ============================================================================
   Lion's Bites Design System, palette "Notte verde".
   Deep pine night, muted gold, cream. Every colour is sampled from the brand
   photography (logo, olive-oil bottle, limoncello bottle).

   Self-contained by design: fonts are self-hosted, no CDN, no third-party
   request. Everything is driven through --lb-* custom properties.
   ========================================================================== */

/* --------------------------------------------------------------- webfonts */
/* Cinzel for display caps (matches the logo's inscriptional letters),
   Cormorant Garamond for editorial voice. Both OFL, self-hosted.
   If the files are absent the stacks below fall back to Palatino/Georgia. */
/* One variable file covers the whole 400 to 600 range, so there is nothing to
   load for the second weight.

   font-display: block, not swap. Swap paints the fallback stack first and then
   reflows into Cinzel/Cormorant, and that flash of Palatino is exactly what the
   site should never show. Block keeps the text invisible until the face is ready.
   That is only safe because all three files are preloaded in the head and cached
   immutably (see Program.cs), so in practice the block period is the same request
   as the stylesheet on a first visit and zero on every navigation after it. */
@font-face {
    font-family: "Cinzel";
    src: url("../fonts/cinzel.woff2") format("woff2");
    font-weight: 400 600;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: "Cormorant Garamond";
    src: url("../fonts/cormorant-garamond-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: "Cormorant Garamond";
    src: url("../fonts/cormorant-garamond-400-italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: block;
}

/* ------------------------------------------------------------------ tokens */
:root {
    color-scheme: dark;

    /* Neutrals: pine night to deep moss */
    --lb-ink-900: #0a1410; /* page background                    */
    --lb-ink-850: #0e1a15; /* sunken / disabled surface          */
    --lb-ink-800: #12211a; /* raised surface                     */
    --lb-ink-700: #16281f; /* card surface                       */
    --lb-ink-600: #24402f; /* hairline border (brand green)      */
    --lb-ink-500: #33553e; /* strong border / muted line         */

    /* Foreground */
    --lb-cream: #f4ecdb; /* brightest text                     */
    --lb-champagne: #ece3d1; /* headings, brand ink                */
    --lb-muted: #a8b3a5; /* body / secondary text              */
    --lb-faint: #8a9788; /* captions / tertiary text (AA)      */
    --lb-field-border: #5c7a66; /* form-control boundary (>=3:1)      */

    /* Accents: the gold from the lion mark */
    --lb-gold: #c89043;
    --lb-gold-bright: #e0b060;
    --lb-gold-deep: #a5732f;
    --lb-gold-ink: #1a1206; /* text on a gold fill                */
    /* Channels of --lb-gold and --lb-ink-600, so translucent washes stay on palette. */
    --lb-gold-rgb: 200, 144, 67;
    --lb-ink-600-rgb: 36, 64, 47;
    /* The page ground as components, needed for the hero scrim: a gradient cannot
       fade a hex to nothing, it needs the channels to put an alpha behind. */
    --lb-ink-900-rgb: 10, 20, 16;

    /* Semantic, kept inside the palette */
    --lb-success: #8fae83;
    --lb-warning: #dcb35d;
    --lb-danger: #d1826d;
    --lb-danger-deep: #7d3c2c;
    --lb-info: #9fb6bf;

    /* The lion silhouette used by .lb-mark. Override once per consumer when the
       stylesheet does not sit next to wwwroot/images. */
    --lb-mark-src: url("../images/lion-mask.png");

    /* Typography */
    --lb-font-display: "Cinzel", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --lb-font-voice: "Cormorant Garamond", "Palatino Linotype", Palatino, Georgia, serif;
    --lb-font-body: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;

    --lb-fs-xs: 0.75rem; /* 12 */
    --lb-fs-sm: 0.875rem; /* 14 */
    --lb-fs-base: 1rem; /* 16 */
    --lb-fs-md: 1.125rem; /* 18 */
    --lb-fs-lg: 1.375rem; /* 22 */
    --lb-fs-xl: 1.75rem; /* 28 */
    --lb-fs-2xl: 2.25rem; /* 36 */
    --lb-fs-3xl: 3rem; /* 48 */
    --lb-fs-4xl: 4rem; /* 64 */

    --lb-lh-tight: 1.15;
    --lb-lh-snug: 1.35;
    --lb-lh-normal: 1.7;
    --lb-tracking-caps: 0.18em; /* the letterspacing of the logo wordmark */
    --lb-tracking-wide: 0.08em;

    /* Spacing (4px base) */
    --lb-space-1: 4px;
    --lb-space-2: 8px;
    --lb-space-3: 12px;
    --lb-space-4: 16px;
    --lb-space-5: 24px;
    --lb-space-6: 32px;
    --lb-space-7: 48px;
    --lb-space-8: 64px;
    --lb-space-9: 96px;
    --lb-space-10: 128px;

    /* Radii: crisp, not soft. Chique reads as square. */
    --lb-r-sm: 2px;
    --lb-r-md: 4px;
    --lb-r-lg: 8px;
    --lb-r-xl: 14px;
    --lb-r-pill: 999px;

    --lb-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --lb-shadow-md: 0 10px 28px -10px rgba(0, 0, 0, .6);
    --lb-shadow-lg: 0 28px 70px -24px rgba(0, 0, 0, .72);
    --lb-glow-gold: 0 0 60px -12px rgba(200, 144, 67, .34);

    --lb-ease: 200ms cubic-bezier(.4, 0, .2, 1);
    --lb-container: 1140px;
    --lb-measure: 68ch; /* comfortable reading width */
}

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

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

body {
    margin: 0;
    background: var(--lb-ink-900);
    color: var(--lb-muted);
    font-family: var(--lb-font-body);
    font-size: var(--lb-fs-base);
    line-height: var(--lb-lh-normal);
}

h1, h2, h3, h4 {
    font-family: var(--lb-font-display);
    color: var(--lb-champagne);
    font-weight: 400;
    line-height: var(--lb-lh-tight);
    margin: 0 0 var(--lb-space-4);
}

h1 {
    font-size: var(--lb-fs-3xl);
    letter-spacing: 0.04em;
}

h2 {
    font-size: var(--lb-fs-2xl);
    letter-spacing: 0.04em;
}

h3 {
    font-size: var(--lb-fs-lg);
    letter-spacing: 0.05em;
}

h4 {
    font-size: var(--lb-fs-md);
    letter-spacing: var(--lb-tracking-wide);
}

p {
    margin: 0 0 var(--lb-space-4);
    max-width: var(--lb-measure);
}

a {
    color: var(--lb-gold-bright);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--lb-cream);
}

/* height: auto keeps the width/height attributes as an aspect-ratio hint
   (no layout shift) without letting them stretch a scaled-down image. */
img, svg {
    max-width: 100%;
    height: auto;
}

hr {
    border: 0;
    border-top: 1px solid var(--lb-ink-600);
    margin: var(--lb-space-7) 0;
}

code, kbd, samp {
    font-family: ui-monospace, "Cascadia Code", Consolas, Menlo, monospace;
    font-size: 0.9em;
}

::selection {
    background: var(--lb-gold);
    color: var(--lb-gold-ink);
}

:focus-visible {
    outline: 2px solid var(--lb-gold-bright);
    outline-offset: 2px;
}

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

/* ------------------------------------------------------------------ layout */
.lb-container {
    width: 100%;
    max-width: var(--lb-container);
    margin-inline: auto;
    padding-inline: var(--lb-space-5);
}

.lb-section {
    padding-block: var(--lb-space-9);
}

.lb-section--tight {
    padding-block: var(--lb-space-7);
}

/* A raised band to separate a section from the page without a hard border. */
.lb-section--raised {
    background: var(--lb-ink-850);
    border-block: 1px solid var(--lb-ink-600);
}

.lb-section-head {
    max-width: var(--lb-measure);
    margin-bottom: var(--lb-space-7);
}

.lb-section-head--center {
    margin-inline: auto;
    text-align: center;
}

.lb-eyebrow {
    display: block;
    font-family: var(--lb-font-display);
    font-size: var(--lb-fs-xs);
    letter-spacing: var(--lb-tracking-caps);
    text-transform: uppercase;
    color: var(--lb-gold);
    margin-bottom: var(--lb-space-3);
}

.lb-lead {
    font-family: var(--lb-font-voice);
    font-size: var(--lb-fs-lg);
    line-height: var(--lb-lh-snug);
    color: var(--lb-champagne);
}

.lb-prose {
    max-width: var(--lb-measure);
}

.lb-prose > p:last-child {
    margin-bottom: 0;
}

.lb-prose--voice p {
    font-family: var(--lb-font-voice);
    font-size: var(--lb-fs-md);
    line-height: 1.65;
}

/* A single line set apart, the "Van de olijfgaard naar de fles" moment. */
.lb-statement {
    font-family: var(--lb-font-voice);
    font-size: var(--lb-fs-xl);
    line-height: var(--lb-lh-snug);
    color: var(--lb-champagne);
    text-align: center;
    max-width: 34ch;
    margin: var(--lb-space-7) auto;
}

.lb-quote {
    margin: var(--lb-space-6) 0;
    padding-left: var(--lb-space-5);
    border-left: 1px solid var(--lb-gold);
    border-radius: 0;
    font-family: var(--lb-font-voice);
    font-size: var(--lb-fs-lg);
    font-style: italic;
    color: var(--lb-champagne);
}

/* ------------------------------------------------------------------- rules */
/* The gold hairline with a centred diamond, straight off the printed matter. */
.lb-rule {
    display: flex;
    align-items: center;
    gap: var(--lb-space-3);
    margin-block: var(--lb-space-5);
}

.lb-rule::before,
.lb-rule::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--lb-gold) 35%, var(--lb-gold) 65%, transparent);
}

.lb-rule__diamond {
    width: 7px;
    height: 7px;
    flex: none;
    background: var(--lb-gold);
    transform: rotate(45deg);
}

.lb-rule--short {
    max-width: 220px;
}

.lb-rule--center {
    margin-inline: auto;
}

/* ----------------------------------------------------------------- buttons */
.lb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--lb-space-2);
    padding: 12px 24px;
    border: 1px solid transparent;
    border-radius: var(--lb-r-md);
    font-family: var(--lb-font-display);
    font-size: var(--lb-fs-sm);
    letter-spacing: var(--lb-tracking-wide);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--lb-ease), color var(--lb-ease), border-color var(--lb-ease);
}

.lb-btn--primary {
    background: var(--lb-gold);
    border-color: var(--lb-gold);
    color: var(--lb-gold-ink);
}

.lb-btn--primary:hover {
    background: var(--lb-gold-bright);
    border-color: var(--lb-gold-bright);
    color: var(--lb-gold-ink);
}

.lb-btn--secondary {
    background: transparent;
    border-color: var(--lb-gold);
    color: var(--lb-gold-bright);
}

.lb-btn--secondary:hover {
    background: rgba(var(--lb-gold-rgb), .12);
    color: var(--lb-cream);
}

.lb-btn--ghost {
    background: transparent;
    border-color: var(--lb-ink-500);
    color: var(--lb-champagne);
}

.lb-btn--ghost:hover {
    background: var(--lb-ink-800);
    border-color: var(--lb-field-border);
}

.lb-btn--sm {
    padding: 8px 16px;
    font-size: var(--lb-fs-xs);
}

.lb-btn--lg {
    padding: 15px 32px;
    font-size: var(--lb-fs-base);
}

.lb-btn[disabled],
.lb-btn--disabled {
    opacity: .5;
    pointer-events: none;
}

/* Busy state: a CSS-only spinner beside the label, clicks suppressed. */
.lb-btn--loading {
    pointer-events: none;
    position: relative;
}

.lb-btn--loading::before {
    content: "";
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: lb-spin 700ms linear infinite;
}

@keyframes lb-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lb-btn--loading::before {
        animation-duration: 2s;
    }
}

.lb-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lb-space-3);
}

.lb-btn-row--center {
    justify-content: center;
}

/* Inline text link with the arrow that reads as "verder lezen". */
.lb-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--lb-space-2);
    font-family: var(--lb-font-display);
    font-size: var(--lb-fs-sm);
    letter-spacing: var(--lb-tracking-wide);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--lb-gold-bright);
}

.lb-link-arrow::after {
    content: "";
    width: 18px;
    height: 1px;
    background: currentColor;
    transition: width var(--lb-ease);
}

.lb-link-arrow:hover::after {
    width: 28px;
}

/* -------------------------------------------------------------------- tags */
.lb-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--lb-space-2);
    padding: 4px 12px;
    border: 1px solid var(--lb-ink-600);
    border-radius: var(--lb-r-pill);
    background: var(--lb-ink-800);
    color: var(--lb-muted);
    font-size: var(--lb-fs-xs);
    letter-spacing: var(--lb-tracking-wide);
}

.lb-tag--gold {
    border-color: var(--lb-gold-deep);
    background: rgba(var(--lb-gold-rgb), .12);
    color: var(--lb-gold-bright);
}

.lb-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lb-space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ------------------------------------------------------------------- cards */
.lb-card {
    background: var(--lb-ink-700);
    border: 1px solid var(--lb-ink-600);
    border-radius: var(--lb-r-lg);
    padding: var(--lb-space-6);
}

.lb-card--flush {
    padding: 0;
    overflow: hidden;
}

.lb-card--interactive {
    transition: border-color var(--lb-ease), transform var(--lb-ease);
}

.lb-card--interactive:hover {
    border-color: var(--lb-gold-deep);
    transform: translateY(-2px);
}

.lb-card__body {
    padding: var(--lb-space-5) var(--lb-space-6);
}

.lb-card__title {
    font-family: var(--lb-font-display);
    font-size: var(--lb-fs-lg);
    color: var(--lb-champagne);
    letter-spacing: 0.04em;
    margin: 0 0 var(--lb-space-2);
}

/* Second line under a card title, for the Italian product name. Italic voice rather
   than more display caps, so it reads as a subtitle and not as a second heading. */
.lb-card__subtitle {
    font-family: var(--lb-font-voice);
    font-style: italic;
    font-size: var(--lb-fs-md);
    color: var(--lb-gold);
    margin: 0 0 var(--lb-space-3);
}

.lb-card__meta {
    font-size: var(--lb-fs-sm);
    color: var(--lb-faint);
    margin: 0;
}

/* A framed panel: gold hairline inset, the look of the printed recipe card. */
.lb-panel {
    position: relative;
    background: var(--lb-ink-800);
    border: 1px solid var(--lb-ink-600);
    border-radius: var(--lb-r-lg);
    padding: var(--lb-space-7);
}

.lb-panel::before {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(var(--lb-gold-rgb), .34);
    border-radius: var(--lb-r-md);
    pointer-events: none;
}

.lb-grid {
    display: grid;
    gap: var(--lb-space-5);
}

.lb-grid--2 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.lb-grid--3 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

/* ---------------------------------------------------------------- callouts */
.lb-callout {
    display: flex;
    gap: var(--lb-space-4);
    padding: var(--lb-space-5);
    background: var(--lb-ink-800);
    border: 1px solid var(--lb-ink-600);
    border-radius: var(--lb-r-lg);
}

.lb-callout__mark {
    flex: none;
    width: 6px;
    align-self: stretch;
    background: var(--lb-gold);
    border-radius: var(--lb-r-sm);
}

.lb-callout--danger .lb-callout__mark {
    background: var(--lb-danger);
}

.lb-callout--success .lb-callout__mark {
    background: var(--lb-success);
}

.lb-callout p:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------------------ inputs */
.lb-field {
    display: block;
    margin-bottom: var(--lb-space-5);
}

.lb-label {
    display: block;
    font-size: var(--lb-fs-sm);
    font-weight: 600;
    letter-spacing: var(--lb-tracking-wide);
    color: var(--lb-champagne);
    margin-bottom: var(--lb-space-2);
}

.lb-required {
    color: var(--lb-gold);
    margin-left: 2px;
}

.lb-help {
    display: block;
    font-size: var(--lb-fs-xs);
    color: var(--lb-faint);
    margin-top: var(--lb-space-2);
}

.lb-input,
.lb-select,
.lb-textarea {
    width: 100%;
    padding: 11px 14px;
    background: var(--lb-ink-850);
    border: 1px solid var(--lb-field-border);
    border-radius: var(--lb-r-md);
    color: var(--lb-cream);
    font-family: var(--lb-font-body);
    font-size: var(--lb-fs-base);
    line-height: 1.4;
    transition: border-color var(--lb-ease), background var(--lb-ease);
}

.lb-input::placeholder,
.lb-textarea::placeholder {
    color: var(--lb-faint);
}

.lb-input:hover,
.lb-select:hover,
.lb-textarea:hover {
    border-color: var(--lb-gold-deep);
}

/* background-color, not the shorthand: the shorthand would wipe the select arrow. */
.lb-input:focus,
.lb-select:focus,
.lb-textarea:focus {
    border-color: var(--lb-gold);
    background-color: var(--lb-ink-800);
    outline: 2px solid var(--lb-gold-bright);
    outline-offset: 1px;
}

.lb-textarea {
    min-height: 120px;
    resize: vertical;
}

.lb-select {
    appearance: none;
    padding-right: 40px;
    background-image: linear-gradient(45deg, transparent 50%, var(--lb-gold) 50%),
    linear-gradient(135deg, var(--lb-gold) 50%, transparent 50%);
    background-position: calc(100% - 20px) center, calc(100% - 14px) center;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.lb-fieldset {
    border: 1px solid var(--lb-ink-600);
    border-radius: var(--lb-r-lg);
    padding: var(--lb-space-5);
    margin: 0 0 var(--lb-space-5);
}

.lb-legend {
    padding-inline: var(--lb-space-3);
    font-family: var(--lb-font-display);
    font-size: var(--lb-fs-sm);
    letter-spacing: var(--lb-tracking-wide);
    text-transform: uppercase;
    color: var(--lb-gold);
}

.lb-check {
    display: flex;
    align-items: flex-start;
    gap: var(--lb-space-3);
    padding: var(--lb-space-2) 0;
    cursor: pointer;
}

.lb-check input {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 3px 0 0;
    accent-color: var(--lb-gold);
}

.lb-check__text {
    color: var(--lb-muted);
}

.lb-check__text b {
    display: block;
    font-weight: 600;
    color: var(--lb-champagne);
}

/* Validation: paired with aria-invalid and aria-describedby on the control. */
.lb-input--error,
.lb-select--error,
.lb-textarea--error {
    border-color: var(--lb-danger);
}

.lb-error {
    display: flex;
    align-items: center;
    gap: var(--lb-space-2);
    font-size: var(--lb-fs-sm);
    color: var(--lb-danger);
    margin: var(--lb-space-2) 0 0;
}

.lb-error::before {
    content: "!";
    flex: none;
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--lb-danger);
    color: var(--lb-ink-900);
    font-size: var(--lb-fs-xs);
    font-weight: 700;
}

/* Honeypot: off-screen for humans, present in the DOM for bots. */
.lb-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ------------------------------------------------------------------- table */
.lb-table-scroll {
    overflow-x: auto;
}

.lb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--lb-fs-base);
}

.lb-table th,
.lb-table td {
    text-align: left;
    padding: var(--lb-space-4) var(--lb-space-3);
    border-bottom: 1px solid var(--lb-ink-600);
}

.lb-table th {
    font-family: var(--lb-font-display);
    font-size: var(--lb-fs-xs);
    letter-spacing: var(--lb-tracking-caps);
    text-transform: uppercase;
    color: var(--lb-gold);
    font-weight: 400;
}

.lb-table td:last-child,
.lb-table th:last-child {
    text-align: right;
}

.lb-table__name {
    color: var(--lb-champagne);
}

/* A dotted-leader price row, the menu-card device. */
.lb-price-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lb-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--lb-space-3);
    padding: var(--lb-space-3) 0;
    border-bottom: 1px solid var(--lb-ink-600);
}

.lb-price__name {
    font-family: var(--lb-font-display);
    color: var(--lb-champagne);
    letter-spacing: 0.03em;
}

.lb-price__leader {
    flex: 1;
    border-bottom: 1px dotted var(--lb-ink-500);
    transform: translateY(-4px);
}

.lb-price__value {
    flex: none;
    color: var(--lb-gold-bright);
    font-variant-numeric: tabular-nums;
}

.lb-price__note {
    flex-basis: 100%;
    margin: var(--lb-space-1) 0 0;
    font-size: var(--lb-fs-sm);
    color: var(--lb-faint);
}

/* -------------------------------------------------------------------- steps */
.lb-steps {
    counter-reset: lb-step;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--lb-space-5);
}

.lb-step {
    display: flex;
    gap: var(--lb-space-4);
}

.lb-step::before {
    counter-increment: lb-step;
    content: counter(lb-step);
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--lb-gold-deep);
    border-radius: 50%;
    font-family: var(--lb-font-display);
    color: var(--lb-gold);
}

.lb-step h3 {
    margin-bottom: var(--lb-space-1);
}

.lb-step p {
    margin: 0;
}

/* ------------------------------------------------------------- empty state */
.lb-empty {
    text-align: center;
    padding: var(--lb-space-8) var(--lb-space-5);
    border: 1px dashed var(--lb-ink-500);
    border-radius: var(--lb-r-lg);
    color: var(--lb-faint);
}

.lb-empty__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--lb-space-4);
    color: var(--lb-ink-500);
}

.lb-empty h3 {
    color: var(--lb-muted);
}

/* ------------------------------------------------------------- brand marks */
/* The lion head is a mask so a single CSS colour themes it. Size comes from a
   --lb-mark-* class or the consumer; 40px keeps it usable on its own. */
.lb-mark {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: currentColor;
    -webkit-mask: var(--lb-mark-src) center / contain no-repeat;
    mask: var(--lb-mark-src) center / contain no-repeat;
}

.lb-mark--sm {
    width: 28px;
    height: 28px;
}

.lb-mark--lg {
    width: 72px;
    height: 72px;
}

.lb-mark--xl {
    width: 140px;
    height: 140px;
}

.lb-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--lb-space-3);
    text-decoration: none;
    color: var(--lb-gold);
}

.lb-logo__mark {
    flex: none;
}

.lb-logo__text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.lb-logo__word {
    font-family: var(--lb-font-display);
    font-size: var(--lb-fs-md);
    letter-spacing: var(--lb-tracking-caps);
    text-transform: uppercase;
    color: var(--lb-champagne);
    white-space: nowrap;
}

.lb-logo__tagline {
    font-family: var(--lb-font-display);
    font-size: 10px;
    letter-spacing: var(--lb-tracking-caps);
    text-transform: uppercase;
    color: var(--lb-gold);
    margin-top: 5px;
    white-space: nowrap;
}

/* ------------------------------------------------------------------ header */
.lb-header {
    display: flex;
    align-items: center;
    gap: var(--lb-space-5);
    padding-block: var(--lb-space-4);
}

.lb-header__logo {
    margin-right: auto;
}

.lb-nav {
    display: flex;
    align-items: center;
    gap: var(--lb-space-5);
}

.lb-nav a {
    font-family: var(--lb-font-display);
    font-size: var(--lb-fs-sm);
    letter-spacing: var(--lb-tracking-wide);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: var(--lb-champagne);
    padding-block: var(--lb-space-2);
    border-bottom: 1px solid transparent;
}

.lb-nav a:hover {
    color: var(--lb-gold-bright);
    border-bottom-color: var(--lb-gold);
}

.lb-nav a[aria-current="page"] {
    color: var(--lb-gold);
    border-bottom-color: var(--lb-gold);
}

.lb-nav .lb-btn {
    border-bottom: 1px solid var(--lb-gold);
}

/* `.lb-nav a` is one point more specific than `.lb-btn--primary`, so without this the
   champagne link colour lands on top of the gold fill and the label reads at 2.2:1 where
   the button was drawn for gold ink. Restated here rather than reordered, because the nav
   rules have to keep winning for the links around it. */
.lb-nav a.lb-btn--primary,
.lb-nav a.lb-btn--primary:hover {
    color: var(--lb-gold-ink);
}

/* CSS-only mobile navigation: a checkbox drives the panel. */
.lb-nav-toggle {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.lb-nav-btn {
    display: none;
    padding: var(--lb-space-2);
    border: 1px solid var(--lb-ink-600);
    border-radius: var(--lb-r-md);
    color: var(--lb-champagne);
    cursor: pointer;
}

.lb-nav-toggle:focus-visible + .lb-nav-btn {
    outline: 2px solid var(--lb-gold-bright);
    outline-offset: 2px;
}

.lb-lang {
    display: flex;
    gap: var(--lb-space-2);
    font-size: var(--lb-fs-xs);
}

.lb-lang a {
    text-decoration: none;
    color: var(--lb-faint);
    letter-spacing: var(--lb-tracking-wide);
    padding: 2px 6px;
    border: 1px solid transparent;
    border-radius: var(--lb-r-sm);
}

.lb-lang a:hover {
    color: var(--lb-champagne);
}

.lb-lang a[aria-current="true"] {
    color: var(--lb-gold);
    border-color: var(--lb-ink-600);
}

/* ------------------------------------------------------------------ footer */
.lb-footer {
    border-top: 1px solid var(--lb-ink-600);
    background: var(--lb-ink-850);
    padding-block: var(--lb-space-8);
    color: var(--lb-faint);
    font-size: var(--lb-fs-sm);
}

.lb-footer h4 {
    color: var(--lb-gold);
    font-size: var(--lb-fs-xs);
    letter-spacing: var(--lb-tracking-caps);
    text-transform: uppercase;
    margin-bottom: var(--lb-space-4);
}

.lb-footer a {
    color: var(--lb-muted);
    text-decoration: none;
}

.lb-footer a:hover {
    color: var(--lb-gold-bright);
}

.lb-footer__cols {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--lb-space-7);
}

.lb-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--lb-space-2);
}

.lb-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lb-space-4);
    justify-content: space-between;
    margin-top: var(--lb-space-7);
    padding-top: var(--lb-space-5);
    border-top: 1px solid var(--lb-ink-600);
    font-size: var(--lb-fs-xs);
}

/* ------------------------------------------------------------- decoration */
/* Olive-grove wash: two soft radial pools of warm light, no image request. */
.lb-glow {
    position: relative;
    isolation: isolate;
}

.lb-glow::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(60% 45% at 18% 8%, rgba(var(--lb-gold-rgb), .10), transparent 70%),
        radial-gradient(50% 40% at 88% 78%, rgba(var(--lb-ink-600-rgb), .55), transparent 72%);
    pointer-events: none;
}

/* The illustrations carry their own gold stroke, so only opacity applies here:
   a CSS colour cannot reach inside an <img>. Inline the SVG if you need to theme it. */
.lb-ornament {
    display: block;
    opacity: .55;
}

.lb-ornament--center {
    margin-inline: auto;
}

/* -------------------------------------------------------------------- hero */
/* A full-bleed photograph with the copy sitting low over it. The photo is an <img>,
   not a CSS background: the content security policy allows no inline styles, so a
   per-page background-image cannot be set on the element, and an <img> also gets a
   proper srcset and a loading priority, which a background never does. */
.lb-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: end;
    min-height: clamp(28rem, 78vh, 44rem);
    overflow: hidden;
}

.lb-hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.lb-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Off-centre on purpose: it keeps the food and the bottles in frame when a wide
       photo is cropped to a narrow viewport, and lets the sky go first. */
    object-position: 55% 62%;
}

/* Three gradients, not one flat wash, because each solves a different problem.
   Top-down: a short fade that seats the header on the photograph. Deliberately light,
   because the frosted bar itself carries the legibility of the navigation; this only has
   to stop the photograph from butting hard against the bar's lower edge.
   Bottom-up carries the copy. Left-to-right keeps the first words legible without
   dulling the whole photograph. */
.lb-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(to bottom,
            rgba(var(--lb-ink-900-rgb), .34) 0,
            rgba(var(--lb-ink-900-rgb), .12) 96px,
            rgba(var(--lb-ink-900-rgb), 0) 180px),
        linear-gradient(to top,
            rgba(var(--lb-ink-900-rgb), .94) 0%,
            rgba(var(--lb-ink-900-rgb), .72) 26%,
            rgba(var(--lb-ink-900-rgb), .20) 58%,
            rgba(var(--lb-ink-900-rgb), 0) 100%),
        linear-gradient(to right,
            rgba(var(--lb-ink-900-rgb), .60),
            rgba(var(--lb-ink-900-rgb), 0) 62%);
}

.lb-hero__inner {
    padding-block: var(--lb-space-9) var(--lb-space-8);
}

.lb-hero__content {
    max-width: 36rem;
}

/* The cover variant: the photograph is the page for one full screen, the header sits on
   top of it, and the copy is centred in the frame instead of sitting in the bottom. */
.lb-hero--cover {
    min-height: 100svh;
    align-items: center;
}

/* svh, not vh: on a phone vh counts the address bar as if it were never there, so a
   100vh hero is taller than the screen and the button falls below the fold. */
@supports not (height: 100svh) {
    .lb-hero--cover {
        min-height: 100vh;
    }
}

/* Parallax, without moving the photograph at all.
   The photograph is pinned to the viewport and the page scrolls over it. That reads as
   depth for the same reason a moving parallax does, the backdrop lagging behind the
   foreground, except the lag is total instead of partial.

   Total is the one amount that is free. This photograph is 16:9 in a frame that is
   taller in proportion, so `cover` sizes it by height and there is no vertical slack in
   it whatsoever: every percent of drift has to be paid for with a percent of scale first,
   or the bottom edge walks into the frame. Pinning it sidesteps that, because a pinned
   photograph never moves inside its own frame; the hero's clip shrinks around it instead.
   So there is no transform here, no scale, and nothing for a scroll timeline to drive.

   It is not clipped by the hero, since a fixed element ignores an ancestor's overflow. It
   is covered instead, by the sections below, which is why they are given a ground of their
   own further down. Nothing above may take a transform, a filter or `contain`, because any
   of those would make it the containing block and the photograph would scroll along with
   the page again. */
.lb-hero--cover .lb-hero__media {
    position: fixed;
}

/* Reduced motion asks for less relative movement between layers, and a pinned backdrop is
   nothing but relative movement. So it goes back to scrolling with the page, which is the
   same framing standing still and no parallax at all. */
@media (prefers-reduced-motion: reduce) {
    .lb-hero--cover .lb-hero__media {
        position: absolute;
    }
}

/* Two things put the rest of the page over the photograph, and both are easy to lose.

   A position, because paint order puts every positioned element above every static one no
   matter what the document order says. The hero is positioned and the sections after it are
   not, so left alone the hero paints over all of them and the pinned photograph covers the
   whole page. Positioned and later in the tree is what puts them back on top. The footer
   needs the same and is not a sibling, hence the separate rule.
   Pushing the hero down with a negative index instead looks like the tidier fix and is not:
   it drops the hero below the in-flow content for hit testing too, and the buttons in the
   hero stop being clickable.

   And a ground of their own, because the body's background is the canvas and paints below
   all of it, so a section with nothing of its own is transparent and would show the
   photograph rather than the page. */
.lb-hero--cover ~ * {
    position: relative;
    background-color: var(--lb-ink-900);
}

.lb-hero--cover ~ .lb-section--raised {
    background-color: var(--lb-ink-850);
}

body:has(.lb-hero--cover) .lb-footer {
    position: relative;
}

/* The display line of a cover hero. Bigger than h1 and set in two colours, so the last
   word carries the gold. clamp keeps it from swallowing a phone screen. */
.lb-display {
    font-family: var(--lb-font-display);
    font-size: clamp(2.5rem, 8.5vw, 6rem);
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--lb-cream);
    margin: 0 0 var(--lb-space-5);
}

.lb-display__accent {
    color: var(--lb-gold);
}

/* The line under the rule in a cover hero. Same typographic treatment as .lb-payoff, in
   the reading colour, because this one is a sentence and not the brand speaking. */
.lb-kicker {
    display: block;
    font-family: var(--lb-font-display);
    font-size: var(--lb-fs-md);
    letter-spacing: var(--lb-tracking-caps);
    text-transform: uppercase;
    color: var(--lb-champagne);
    margin: 0 0 var(--lb-space-4);
}

/* The payoff from the logo. Bigger and wider tracked than .lb-eyebrow, because here it
   is the brand speaking rather than a label above a heading. */
.lb-payoff {
    display: block;
    font-family: var(--lb-font-display);
    font-size: var(--lb-fs-md);
    font-weight: 600;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--lb-gold);
    margin-bottom: var(--lb-space-4);
}

/* ---------------------------------------------------------------- meta row */
/* A short list read as one line, separated by the same gold diamond as .lb-rule.
   For things like Pizza, BBQ, Focaccia under a heading. */
.lb-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lb-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--lb-font-display);
    font-size: var(--lb-fs-sm);
    letter-spacing: var(--lb-tracking-caps);
    text-transform: uppercase;
    color: var(--lb-champagne);
}

.lb-meta-row li {
    display: flex;
    align-items: center;
    gap: var(--lb-space-3);
}

.lb-meta-row li + li::before {
    content: "";
    width: 5px;
    height: 5px;
    flex: none;
    background: var(--lb-gold);
    transform: rotate(45deg);
}

/* ------------------------------------------------------------ brand band */
/* The closing note of a page: the mark, the payoff, nothing else competing. */
.lb-brand-band {
    display: grid;
    justify-items: center;
    gap: var(--lb-space-5);
    padding-block: var(--lb-space-9);
    text-align: center;
    color: var(--lb-gold);
}

.lb-brand-band .lb-payoff {
    margin-bottom: 0;
}

/* --------------------------------------------------------------- responsive */
/* Between the mobile panel and a roomy desktop the bar is tight: tighten the
   gap and drop the nav call to action, which the hero repeats anyway. */
@media (min-width: 901px) and (max-width: 1200px) {
    .lb-nav {
        gap: var(--lb-space-4);
    }

    .lb-nav .lb-btn {
        display: none;
    }
}

@media (max-width: 900px) {
    :root {
        --lb-fs-3xl: 2.25rem;
        --lb-fs-2xl: 1.75rem;
        --lb-fs-xl: 1.5rem;
    }

    .lb-section {
        padding-block: var(--lb-space-7);
    }

    .lb-footer__cols {
        grid-template-columns: 1fr;
        gap: var(--lb-space-6);
    }

    .lb-nav-btn {
        display: inline-flex;
    }

    .lb-nav {
        display: none;
        order: 3;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding-top: var(--lb-space-3);
        border-top: 1px solid var(--lb-ink-600);
    }

    .lb-nav a {
        padding: var(--lb-space-3) 0;
        border-bottom: 1px solid var(--lb-ink-600);
    }

    .lb-nav .lb-btn {
        margin-top: var(--lb-space-3);
        border: 1px solid var(--lb-gold);
    }

    .lb-nav-toggle:checked ~ .lb-nav {
        display: flex;
    }

    .lb-header {
        flex-wrap: wrap;
    }
}

/* The hero stops being an overlay on a narrow screen. A wide photograph cropped to a
   phone keeps the sky and the sun, which is the brightest part of the frame, and the
   copy would sit right on it. No honest amount of scrim makes gold on a sunset legible
   without dulling the photograph into mud, so the photo takes a frame of its own and the
   copy moves underneath it, onto the page ground where the contrast is a known quantity. */
@media (max-width: 700px) {
    .lb-hero:not(.lb-hero--cover) {
        min-height: 0;
        align-items: start;
    }

    .lb-hero:not(.lb-hero--cover) .lb-hero__media {
        position: static;
        z-index: auto;
    }

    .lb-hero:not(.lb-hero--cover) .lb-hero__media img {
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .lb-hero:not(.lb-hero--cover) .lb-hero__scrim {
        display: none;
    }

    .lb-hero__inner {
        padding-block: var(--lb-space-7) var(--lb-space-6);
    }

    .lb-hero__content {
        max-width: none;
    }

    /* A cover stays a cover on a phone, so the contrast has to be solved inside the
       frame instead of by moving the copy out of it. Two changes: the crop swings to the
       oven, which is the dark half of the photograph, and the copy drops to the bottom
       where the scrim is heaviest. */
    .lb-hero--cover {
        align-items: end;
    }

    .lb-hero--cover .lb-hero__media img {
        object-position: 30% 55%;
    }

    .lb-hero--cover .lb-hero__scrim {
        background:
            linear-gradient(to bottom,
                rgba(var(--lb-ink-900-rgb), .34) 0,
                rgba(var(--lb-ink-900-rgb), .12) 88px,
                rgba(var(--lb-ink-900-rgb), 0) 170px),
            linear-gradient(to top,
                rgba(var(--lb-ink-900-rgb), .95) 0%,
                rgba(var(--lb-ink-900-rgb), .82) 38%,
                rgba(var(--lb-ink-900-rgb), .40) 72%,
                rgba(var(--lb-ink-900-rgb), .10) 100%);
    }
}

/* ================================================================ utilities
   Deliberately last in the file so a utility always beats a component rule.
   Every value comes off the token scale: there is no way to write an
   off-scale number with these classes, which is the whole point.

   Scale: 1=4  2=8  3=12  4=16  5=24  6=32  7=48  8=64  9=96  10=128
   ========================================================================== */

/* Vertical rhythm. Prefer .lb-stack-N on a wrapper over margins per element. */
.lb-stack-2 > * + * { margin-top: var(--lb-space-2); }
.lb-stack-3 > * + * { margin-top: var(--lb-space-3); }
.lb-stack-4 > * + * { margin-top: var(--lb-space-4); }
.lb-stack-5 > * + * { margin-top: var(--lb-space-5); }
.lb-stack-6 > * + * { margin-top: var(--lb-space-6); }
.lb-stack-7 > * + * { margin-top: var(--lb-space-7); }
.lb-stack-8 > * + * { margin-top: var(--lb-space-8); }

/* A stack resets the default paragraph/heading margins it governs. */
[class*="lb-stack-"] > * {
    margin-bottom: 0;
}

.lb-mt-0 { margin-top: 0; }
.lb-mt-1 { margin-top: var(--lb-space-1); }
.lb-mt-2 { margin-top: var(--lb-space-2); }
.lb-mt-3 { margin-top: var(--lb-space-3); }
.lb-mt-4 { margin-top: var(--lb-space-4); }
.lb-mt-5 { margin-top: var(--lb-space-5); }
.lb-mt-6 { margin-top: var(--lb-space-6); }
.lb-mt-7 { margin-top: var(--lb-space-7); }
.lb-mt-8 { margin-top: var(--lb-space-8); }

.lb-mb-0 { margin-bottom: 0; }
.lb-mb-1 { margin-bottom: var(--lb-space-1); }
.lb-mb-2 { margin-bottom: var(--lb-space-2); }
.lb-mb-3 { margin-bottom: var(--lb-space-3); }
.lb-mb-4 { margin-bottom: var(--lb-space-4); }
.lb-mb-5 { margin-bottom: var(--lb-space-5); }
.lb-mb-6 { margin-bottom: var(--lb-space-6); }
.lb-mb-7 { margin-bottom: var(--lb-space-7); }
.lb-mb-8 { margin-bottom: var(--lb-space-8); }

.lb-mx-auto { margin-inline: auto; }

.lb-p-4 { padding: var(--lb-space-4); }
.lb-p-5 { padding: var(--lb-space-5); }
.lb-p-6 { padding: var(--lb-space-6); }
.lb-p-7 { padding: var(--lb-space-7); }

.lb-py-5 { padding-block: var(--lb-space-5); }
.lb-py-6 { padding-block: var(--lb-space-6); }
.lb-py-7 { padding-block: var(--lb-space-7); }
.lb-py-8 { padding-block: var(--lb-space-8); }
.lb-py-9 { padding-block: var(--lb-space-9); }

.lb-gap-2 { gap: var(--lb-space-2); }
.lb-gap-3 { gap: var(--lb-space-3); }
.lb-gap-4 { gap: var(--lb-space-4); }
.lb-gap-5 { gap: var(--lb-space-5); }
.lb-gap-6 { gap: var(--lb-space-6); }
.lb-gap-7 { gap: var(--lb-space-7); }

/* Type scale. Headings already carry their size; use these for body copy. */
.lb-text-xs { font-size: var(--lb-fs-xs); }
.lb-text-sm { font-size: var(--lb-fs-sm); }
.lb-text-base { font-size: var(--lb-fs-base); }
.lb-text-md { font-size: var(--lb-fs-md); }
.lb-text-lg { font-size: var(--lb-fs-lg); }
.lb-text-xl { font-size: var(--lb-fs-xl); }

.lb-text-cream { color: var(--lb-cream); }
.lb-text-champagne { color: var(--lb-champagne); }
.lb-text-muted { color: var(--lb-muted); }
.lb-text-faint { color: var(--lb-faint); }
.lb-text-gold { color: var(--lb-gold); }

.lb-caps {
    font-family: var(--lb-font-display);
    letter-spacing: var(--lb-tracking-caps);
    text-transform: uppercase;
}

.lb-center { text-align: center; }

/* Reading width. Anything longer than --lb-measure gets hard to track. */
.lb-measure { max-width: var(--lb-measure); }
.lb-measure-narrow { max-width: 46ch; }
.lb-measure-none { max-width: none; }

/* Flex row that wraps, for button and tag groups. */
.lb-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lb-space-3);
}

.lb-cluster--center { justify-content: center; }
.lb-cluster--between { justify-content: space-between; }

/* Illustration sizes. Four steps, so ornaments never drift out of scale. */
.lb-ill-sm { width: 64px; }
.lb-ill-md { width: 96px; }
.lb-ill-lg { width: 140px; }
.lb-ill-xl { width: 220px; }
.lb-ill-band { width: 100%; max-width: 640px; }

.lb-ill-sm, .lb-ill-md, .lb-ill-lg, .lb-ill-xl, .lb-ill-band {
    height: auto;
    display: block;
}

.lb-hidden { display: none; }