/* ============================================================================
   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;

    /* 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);
}

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

/* 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;
}

/* --------------------------------------------------------------- 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;
    }
}

/* ================================================================ 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; }