/**
 * Design tokens — the single source of truth for every visual decision.
 *
 * Every value comes from the Pen document `foodtuck.pen`, frame
 * "1. Restaurant" (gJaIc), drawn on a 1920 x 8479 canvas. Each area keeps the
 * raw number measured on that frame as `--<area>-design-*` next to the fluid
 * token derived from it, so a value can always be traced back to the design.
 *
 * `--fluid-unit: calc(100vw / var(--design-reference-width))` means
 * "1 design px": a token such as `clamp(min, calc(300 * var(--fluid-unit)), max)`
 * reads the design measurement directly and still scales with the viewport.
 */
@layer tokens {
    :root {
        color-scheme: dark;
        /* Reference canvas the fluid sizes are derived from. */
        --design-reference-width: 1920;
        --fluid-unit: calc(100vw / var(--design-reference-width));
        /* --- Palette, measured on the design frame -------------------------- */
        --color-page: #0d0d0d;
        --color-surface: #1e1e1e;
        --color-surface-strong: #333333;
        --color-surface-soft: #464646;
        --color-heading: #ffffff;
        --color-body-text: #c4c4c4;
        --color-muted: #828282;
        /* Text over the light testimonial card. */
        --color-on-light: #4f4f4f;
        --color-on-light-strong: #333333;
        --color-accent: #ff9f0d;
        --color-accent-hover: color-mix(
            in oklab,
            var(--color-accent) 86%,
            black
        );
        /* The design writes white over the accent; dark text is the accessible
           pairing on this light orange and is used for every accent surface. */
        --color-accent-contrast: var(--color-page);
        --color-accent-subtle: #ff9f0d4d;
        --color-divider: color-mix(
            in oklab,
            var(--color-heading) 14%,
            transparent
        );
        --color-overlay-soft: #0d0d0dd9;
        --color-focus-ring: var(--color-accent);
        --color-danger: #ff8a7a;
        --color-success: #7ad39a;
        /* Stand-in for the photographs of the design, which are not part of the
           repository yet: every image renders as a tinted block. */
        --color-media: color-mix(
            in oklab,
            var(--color-surface-strong) 74%,
            var(--color-page)
        );
        --color-media-strong: color-mix(
            in oklab,
            var(--color-surface-soft) 80%,
            var(--color-page)
        );
        /* Monogram avatars of the testimonials: the palette Google paints the
           initial of an account with, picked for a review by a hash of its name.
           These are not brand colours; they only ever fill the avatar circle. */
        --color-avatar-1: #1a73e8;
        --color-avatar-2: #188038;
        --color-avatar-3: #d93025;
        --color-avatar-4: #e37400;
        --color-avatar-5: #9334e6;
        --color-avatar-6: #007b83;
        --color-avatar-7: #3949ab;
        --color-avatar-8: #b80672;
        --color-avatar-ink: #ffffff;
        /* --- Typography ------------------------------------------------------
           Inter and Great Vibes load from Google Fonts; the headings keep the
           Helvetica stack the design was drawn with. */
        --font-family-base:
            "Inter",
            ui-sans-serif,
            system-ui,
            -apple-system,
            "Segoe UI",
            sans-serif;
        --font-family-heading:
            "Helvetica Neue",
            Helvetica,
            Arial,
            var(--font-family-base);
        --font-family-script: "Great Vibes", "Segoe Script", cursive;
        --font-weight-medium: 500;
        --font-weight-bold: 700;
        /* Type scale of the frame: 60 / 48 / 40 / 32 / 24 / 20 / 18 / 16 / 14. */
        --text-display: clamp(2rem, calc(60 * var(--fluid-unit)), 3.75rem);
        --text-h2: clamp(1.5rem, calc(48 * var(--fluid-unit)), 3rem);
        --text-script: clamp(1.25rem, calc(32 * var(--fluid-unit)), 2rem);
        --text-h3: clamp(1.125rem, calc(24 * var(--fluid-unit)), 1.5rem);
        --text-tab: clamp(1rem, calc(20 * var(--fluid-unit)), 1.25rem);
        --text-card-title: clamp(1rem, calc(18 * var(--fluid-unit)), 1.125rem);
        --text-body: clamp(0.875rem, calc(16 * var(--fluid-unit)), 1rem);
        --text-meta: clamp(0.8125rem, calc(14 * var(--fluid-unit)), 0.875rem);
        /* Navigation copy of the header: the design draws it at 16px and it may
           follow the frame down to 12px without hurting legibility, which keeps
           the seven links of the design inside the container. */
        --text-nav: clamp(0.75rem, calc(16 * var(--fluid-unit)), 1rem);
        --font-size-body: var(--text-body);
        --font-size-label: var(--text-meta);
        --line-height-display: 1.13;
        --line-height-heading: 1.17;
        --line-height-body: 1.5;
        --line-height-label: 1.43;
        --line-height-solid: 1;
        /* --- Spacing scale — one unit is 4px at the default root font size. -- */
        --space-unit: 0.25rem;
        --space-1: var(--space-unit);
        --space-2: calc(var(--space-unit) * 2);
        --space-3: calc(var(--space-unit) * 3);
        --space-4: calc(var(--space-unit) * 4);
        --space-5: calc(var(--space-unit) * 5);
        --space-6: calc(var(--space-unit) * 6);
        --space-8: calc(var(--space-unit) * 8);
        --space-10: calc(var(--space-unit) * 10);
        --space-12: calc(var(--space-unit) * 12);
        --space-16: calc(var(--space-unit) * 16);
        --space-20: calc(var(--space-unit) * 20);
        /* --- Shape ---------------------------------------------------------- */
        --border-width: 1px;
        --radius-control: calc(var(--space-unit) * 1.5);
        --radius-card: calc(var(--space-unit) * 1.5);
        --radius-pill: calc(var(--space-unit) * 7.5);
        --radius-round: 50%;
        /* --- Touch targets --------------------------------------------------
           Sizes the platforms and the accessibility guidelines agree on: 44 is what
           Apple and Material ask for a primary control, 24 is the minimum of WCAG
           2.5.8 for any target. */
        --touch-target: calc(var(--space-unit) * 11);
        --touch-target-min: calc(var(--space-unit) * 6);
        /* --- Icon tile ------------------------------------------------------
           The rounded tile a small glyph sits in, shared by the contact details
           and the opening hours of the footer. */
        --icon-tile-design-size: 40;
        --icon-tile-design-glyph-size: 18;
        --icon-tile-size: clamp(
            var(--space-8),
            calc(var(--icon-tile-design-size) * var(--fluid-unit)),
            var(--space-10)
        );
        --icon-tile-glyph-size: clamp(
            var(--space-4),
            calc(var(--icon-tile-design-glyph-size) * var(--fluid-unit)),
            calc(var(--space-unit) * 5.5)
        );
        /* --- Actions: the 60 design px pill button of the frame ------------- */
        --action-block-size: clamp(
            var(--space-10),
            calc(60 * var(--fluid-unit)),
            var(--space-16)
        );
        --action-padding-inline: clamp(
            var(--space-4),
            calc(40 * var(--fluid-unit)),
            var(--space-10)
        );
        /* --- Motion --------------------------------------------------------- */
        --duration-fast: 120ms;
        /* Motion of the counting stats: short enough that nobody waits for it. */
        --duration-reveal: 400ms;
        --duration-count: 700ms;
        /* Change of testimonial: long enough to read as a settle, short enough
           that the chosen review is already there. */
        --duration-swap: 250ms;
        /* A swap fades the old review out and the new one in, one half each. */
        --duration-swap-step: calc(var(--duration-swap) / 2);
        --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
        /* --- Focus ---------------------------------------------------------- */
        --focus-ring-width: 2px;
        --focus-ring-width-thin: var(--border-width);
        --focus-ring-offset: 2px;
        /* --- Page grid: 1320 of content inside the 1920 frame --------------- */
        --section-max-width: clamp(
            calc(var(--space-unit) * 200),
            calc(1320 * var(--fluid-unit)),
            calc(var(--space-unit) * 330)
        );
        /* The design gutter is 15.6% of the frame; the inner `min()` stops it from
           squeezing the content below 40rem once the viewport gets narrow. */
        --section-inline-gutter: clamp(
            var(--space-4),
            min(calc(300 * var(--fluid-unit)), calc((100vw - 40rem) / 2)),
            calc(var(--space-unit) * 75)
        );
        /* Frames sit 120 design px apart, split between their block paddings. */
        --section-padding-block: clamp(
            var(--space-8),
            calc(60 * var(--fluid-unit)),
            var(--space-unit) * 15
        );
        --section-heading-gap: clamp(
            var(--space-1),
            calc(8 * var(--fluid-unit)),
            var(--space-2)
        );
        --section-content-gap: clamp(
            var(--space-6),
            calc(56 * var(--fluid-unit)),
            calc(var(--space-unit) * 14)
        );
        --section-text-max: clamp(
            calc(var(--space-unit) * 60),
            calc(526 * var(--fluid-unit)),
            calc(var(--space-unit) * 131.5)
        );
        /* Rhythm — one value per relationship, shared by every section, so an
           action never sits far away in one place and tight in another:
           --stack-gap   block -> block inside a column (including before actions)
           --list-gap    item -> item of a list (links, bullets, hours, socials)
           --field-gap   control -> control and control -> action in a form
           --split-gap   media column <-> text column of a split section
           A label stays --space-2 from its own control. */
        --stack-gap: clamp(
            var(--space-4),
            calc(24 * var(--fluid-unit)),
            var(--space-6)
        );
        --list-gap: clamp(
            var(--space-2),
            calc(12 * var(--fluid-unit)),
            var(--space-3)
        );
        --field-gap: clamp(
            var(--space-3),
            calc(16 * var(--fluid-unit)),
            var(--space-4)
        );
        --field-block-size: clamp(
            var(--space-10),
            calc(56 * var(--fluid-unit)),
            calc(var(--space-unit) * 14)
        );
        /* Action that lives inside a field (the newsletter): it follows the height
           of the control it sits in, so it never outgrows the field. */
        --field-action-size: calc(var(--field-block-size) - var(--space-2));
        --field-action-glyph-size: clamp(
            var(--space-4),
            calc(18 * var(--fluid-unit)),
            calc(var(--space-unit) * 5.5)
        );
        --split-design-gap: 91;
        --split-gap: clamp(
            var(--space-6),
            calc(var(--split-design-gap) * var(--fluid-unit)),
            calc(var(--space-unit) * 22.75)
        );
        /* Distance a revealed block rises from. */
        --reveal-design-offset: 10;
        --reveal-offset: clamp(
            calc(var(--space-unit) * 1.5),
            calc(var(--reveal-design-offset) * var(--fluid-unit)),
            var(--space-3)
        );
        /* --- Site header: 1320 x 87 inside the hero band -------------------- */
        --header-design-block-size: 87;
        --header-design-gap: 30;
        --header-design-icon-size: 24;
        --header-design-logo-size: 128;
        --header-block-size: clamp(
            var(--space-12),
            calc(var(--header-design-block-size) * var(--fluid-unit)),
            calc(var(--space-unit) * 21.75)
        );
        --header-gap: clamp(
            var(--space-2),
            calc(var(--header-design-gap) * var(--fluid-unit)),
            calc(var(--space-unit) * 7.5)
        );
        --header-icon-size: clamp(
            var(--space-4),
            calc(var(--header-design-icon-size) * var(--fluid-unit)),
            var(--space-6)
        );
        --header-logo-size: clamp(
            calc(var(--space-unit) * 11),
            calc(var(--header-design-logo-size) * var(--fluid-unit)),
            calc(var(--space-unit) * 28)
        );
        --header-panel-gap: var(--space-3);
        /* --- Hero: 1920 x 950 ----------------------------------------------- */
        --hero-padding-block-start: clamp(
            var(--space-12),
            calc(210 * var(--fluid-unit)),
            calc(var(--space-unit) * 52.5)
        );
        --hero-padding-block-end: clamp(
            var(--space-10),
            calc(140 * var(--fluid-unit)),
            calc(var(--space-unit) * 35)
        );
        --hero-column-gap: clamp(
            var(--space-6),
            calc(76 * var(--fluid-unit)),
            calc(var(--space-unit) * 19)
        );
        --hero-text-max: clamp(
            calc(var(--space-unit) * 70),
            calc(489 * var(--fluid-unit)),
            calc(var(--space-unit) * 122.25)
        );
        --hero-plate-size: clamp(
            calc(var(--space-unit) * 60),
            calc(578 * var(--fluid-unit)),
            calc(var(--space-unit) * 144.5)
        );
        --hero-chip-size: clamp(
            var(--space-8),
            calc(75 * var(--fluid-unit)),
            calc(var(--space-unit) * 18.75)
        );
        --hero-chip-gap: clamp(
            var(--space-2),
            calc(16 * var(--fluid-unit)),
            var(--space-4)
        );
        --hero-rail-gap: clamp(
            var(--space-4),
            calc(40 * var(--fluid-unit)),
            var(--space-10)
        );
        --hero-rail-icon-size: clamp(
            var(--space-4),
            calc(25 * var(--fluid-unit)),
            var(--space-6)
        );
        /* --- About us: 1320 x 562 ------------------------------------------- */
        --about-text-max: clamp(
            calc(var(--space-unit) * 70),
            calc(569 * var(--fluid-unit)),
            calc(var(--space-unit) * 142.25)
        );
        --about-media-gap: clamp(
            var(--space-2),
            calc(16 * var(--fluid-unit)),
            var(--space-4)
        );
        --about-feature-ratio: 660 / 330;
        --about-thumb-ratio: 322 / 194;
        --about-check-size: clamp(
            var(--space-4),
            calc(20 * var(--fluid-unit)),
            var(--space-5)
        );
        /* --- Food category: four 306 x 329 tiles, 32 apart ------------------ */
        --food-design-tile-gap: 32;
        --food-tile-gap: clamp(
            var(--space-2),
            calc(var(--food-design-tile-gap) * var(--fluid-unit)),
            var(--space-8)
        );
        --food-tile-ratio: 306 / 329;
        --food-badge-gap: clamp(
            var(--space-1),
            calc(8 * var(--fluid-unit)),
            var(--space-2)
        );
        --food-badge-padding-inline: clamp(
            var(--space-2),
            calc(16 * var(--fluid-unit)),
            var(--space-4)
        );
        --food-badge-padding-block: clamp(
            var(--space-1),
            calc(8 * var(--fluid-unit)),
            var(--space-2)
        );
        --food-badge-inset: clamp(
            var(--space-2),
            calc(16 * var(--fluid-unit)),
            var(--space-4)
        );
        /* --- Why choose us: media collage left, copy right ------------------ */
        --why-design-column-gap: 78;
        --why-design-stat-block-size: 92;
        --why-design-feature-size: 114;
        --why-design-feature-glyph-size: 27;
        --why-column-gap: clamp(
            var(--space-6),
            calc(var(--why-design-column-gap) * var(--fluid-unit)),
            calc(var(--space-unit) * 19.5)
        );
        --why-text-max: clamp(
            calc(var(--space-unit) * 70),
            calc(526 * var(--fluid-unit)),
            calc(var(--space-unit) * 131.5)
        );
        --why-media-gap: clamp(
            var(--space-2),
            calc(16 * var(--fluid-unit)),
            var(--space-4)
        );
        /* The collage of the frame (HW4M8) is a 658 x 716 composition of six
           photographs, drawn at fixed positions. Each tile below keeps the share of
           that canvas the design gives it, so the arrangement scales as one piece:
           x / 658 and y / 716 for the offset, w / 658 and h / 716 for the size. */
        --why-collage-ratio: 658 / 716;
        --why-collage-inline-size: clamp(
            calc(var(--space-unit) * 60),
            calc(658 * var(--fluid-unit)),
            calc(var(--space-unit) * 164.5)
        );
        --why-tile-a-inline-start: 0%; /* x 0 */
        --why-tile-a-block-start: 0%; /* y 0 */
        --why-tile-a-inline-size: 55.02%; /* w 362 */
        --why-tile-a-block-size: 49.72%; /* h 356 */
        --why-tile-b-inline-start: 0%; /* x 0 */
        --why-tile-b-block-start: 51.96%; /* y 372 */
        --why-tile-b-inline-size: 37.08%; /* w 244 */
        --why-tile-b-block-size: 42.74%; /* h 306 */
        --why-tile-c-inline-start: 57.45%; /* x 378 */
        --why-tile-c-block-start: 16.76%; /* y 120 */
        --why-tile-c-inline-size: 42.71%; /* w 281 */
        --why-tile-c-block-size: 32.26%; /* h 231 */
        --why-tile-d-inline-start: 39.51%; /* x 260 */
        --why-tile-d-block-start: 51.96%; /* y 372 */
        --why-tile-d-inline-size: 33.59%; /* w 221 */
        --why-tile-d-block-size: 31.56%; /* h 226 */
        --why-tile-e-inline-start: 75.53%; /* x 497 */
        --why-tile-e-block-start: 51.12%; /* y 366 */
        --why-tile-e-inline-size: 24.47%; /* w 161 */
        --why-tile-e-block-size: 23.46%; /* h 168 */
        --why-tile-f-inline-start: 75.53%; /* x 497 */
        --why-tile-f-block-start: 76.82%; /* y 550 */
        --why-tile-f-inline-size: 24.47%; /* w 161 */
        --why-tile-f-block-size: 23.18%; /* h 166 */
        --why-stat-block-size: clamp(
            calc(var(--space-unit) * 12),
            calc(var(--why-design-stat-block-size) * var(--fluid-unit)),
            calc(var(--space-unit) * 23)
        );
        --why-stat-stripe-width: calc(var(--space-unit) * 2.5);
        --why-feature-size: clamp(
            calc(var(--space-unit) * 16),
            calc(var(--why-design-feature-size) * var(--fluid-unit)),
            calc(var(--space-unit) * 28.5)
        );
        /* Stacked, the row owns the full width of the section instead of the narrow
           copy column, so the tile can take a bigger share of it. */
        --why-feature-size-stacked: clamp(
            calc(var(--space-unit) * 18),
            calc(var(--why-design-feature-size) * var(--fluid-unit)),
            calc(var(--space-unit) * 28.5)
        );
        /* The glyph keeps a quarter of the tile at every width, as in the frame, so
           it never looks lost inside the square. */
        --why-feature-glyph-size: clamp(
            calc(var(--space-unit) * 5),
            calc(var(--why-design-feature-glyph-size) * var(--fluid-unit)),
            calc(var(--space-unit) * 6.75)
        );
        /* --- Category carousel: 312 x 364 pictures, 24 apart ---------------- */
        --category-design-card-gap: 24;
        --category-design-arrow-size: 54;
        --category-design-arrow-gap: 34;
        /* Cards per page: the frame shows four, and the count drops as the
           container narrows. The card is sized from the page, so a card is never
           cut at the edge of the carousel. */
        --category-page-wide: 4;
        --category-page-medium: 3;
        --category-page-narrow: 2;
        --category-page-phone: 1;
        --category-media-ratio: 312 / 364;
        --category-card-gap: clamp(
            var(--space-3),
            calc(var(--category-design-card-gap) * var(--fluid-unit)),
            var(--space-6)
        );
        --category-arrow-size: clamp(
            var(--space-10),
            calc(var(--category-design-arrow-size) * var(--fluid-unit)),
            calc(var(--space-unit) * 13.5)
        );
        --category-arrow-gap: clamp(
            var(--space-3),
            calc(var(--category-design-arrow-gap) * var(--fluid-unit)),
            calc(var(--space-unit) * 8.5)
        );
        /* --- Our menu: 1320 x 656, two item columns ------------------------- */
        --menu-design-column-gap: 32;
        --menu-design-item-media-size: 80;
        --menu-design-tab-gap: 48;
        --menu-column-gap: clamp(
            var(--space-4),
            calc(var(--menu-design-column-gap) * var(--fluid-unit)),
            var(--space-8)
        );
        --menu-columns-gap: clamp(
            var(--space-4),
            calc(21 * var(--fluid-unit)),
            calc(var(--space-unit) * 5.25)
        );
        /* The gallery takes 515 of the 1320 design px of the row. */
        --menu-gallery-inline-size: 39%;
        --menu-item-media-size: clamp(
            var(--space-10),
            calc(var(--menu-design-item-media-size) * var(--fluid-unit)),
            var(--space-20)
        );
        --menu-item-gap: clamp(
            var(--space-3),
            calc(16 * var(--fluid-unit)),
            var(--space-4)
        );
        --menu-tab-gap: clamp(
            var(--space-4),
            calc(var(--menu-design-tab-gap) * var(--fluid-unit)),
            calc(var(--space-unit) * 12)
        );
        /* --- Testimonials: white 868-wide card ------------------------------ */
        --testimonial-design-card-inline-size: 868;
        --testimonial-design-avatar-size: 134;
        --testimonial-card-inline-size: clamp(
            calc(var(--space-unit) * 70),
            calc(
                var(--testimonial-design-card-inline-size) * var(--fluid-unit)
            ),
            calc(var(--space-unit) * 217)
        );
        --testimonial-avatar-size: clamp(
            var(--space-12),
            calc(var(--testimonial-design-avatar-size) * var(--fluid-unit)),
            calc(var(--space-unit) * 33.5)
        );
        /* The avatar rides half outside the top edge of the card, so that half is
           kept as padding inside the card and as room above it, clear of the
           heading. */
        --testimonial-avatar-overhang: calc(var(--testimonial-avatar-size) / 2);
        /* The initial of the monogram fills a bit under half of the circle, as in
           the Google avatar. */
        --testimonial-avatar-letter-size: calc(
            var(--testimonial-avatar-size) * 0.42
        );
        --testimonial-text-max: clamp(
            calc(var(--space-unit) * 60),
            calc(697 * var(--fluid-unit)),
            calc(var(--space-unit) * 174.25)
        );
        --testimonial-padding-inline: clamp(
            var(--space-4),
            calc(56 * var(--fluid-unit)),
            calc(var(--space-unit) * 14)
        );
        --testimonial-padding-block: clamp(
            var(--space-6),
            calc(64 * var(--fluid-unit)),
            var(--space-16)
        );
        --testimonial-gap: clamp(
            var(--space-2),
            calc(16 * var(--fluid-unit)),
            var(--space-4)
        );
        --testimonial-quote-size: clamp(
            var(--space-6),
            calc(48 * var(--fluid-unit)),
            var(--space-12)
        );
        --star-size: clamp(
            var(--space-4),
            calc(24 * var(--fluid-unit)),
            var(--space-6)
        );
        --dot-size: clamp(
            var(--space-2),
            calc(15 * var(--fluid-unit)),
            calc(var(--space-unit) * 3.75)
        );
        /* --- Reservations: details on one side, the form on the other ------
           1320 of content split into a 680-wide details column, a 120 gap and a
           520-wide form; 56-tall fields, 16 apart, with a 140-tall message. */
        --contact-design-column-gap: 120;
        --contact-design-form-inline-size: 520;
        --contact-design-message-block-size: 140;
        --contact-column-gap: clamp(
            var(--space-8),
            calc(var(--contact-design-column-gap) * var(--fluid-unit)),
            calc(var(--space-unit) * 30)
        );
        --contact-form-inline-size: clamp(
            calc(var(--space-unit) * 80),
            calc(var(--contact-design-form-inline-size) * var(--fluid-unit)),
            calc(var(--space-unit) * 130)
        );
        --contact-message-block-size: clamp(
            calc(var(--space-unit) * 24),
            calc(var(--contact-design-message-block-size) * var(--fluid-unit)),
            calc(var(--space-unit) * 35)
        );
        /* --- Footer: newsletter band, link columns and the orange bar ------- */
        --footer-design-bar-block-size: 100;
        --footer-bar-block-size: clamp(
            var(--space-12),
            calc(var(--footer-design-bar-block-size) * var(--fluid-unit)),
            calc(var(--space-unit) * 25)
        );
        /* On a wide frame the band is taller than its row, so the content is
           centred with room to spare; once the copyright and the social buttons
           wrap into two rows the band grows with them and needs that room to be
           explicit, or the text ends up against the edge. */
        --footer-design-bar-padding-block: 32;
        --footer-bar-padding-block: clamp(
            var(--space-4),
            calc(var(--footer-design-bar-padding-block) * var(--fluid-unit)),
            var(--space-8)
        );
        --footer-padding-block-start: clamp(
            var(--space-8),
            calc(80 * var(--fluid-unit)),
            var(--space-20)
        );
        --footer-padding-block-end: clamp(
            var(--space-6),
            calc(48 * var(--fluid-unit)),
            var(--space-12)
        );
        /* Wide enough that the three columns read as three, not as one block. */
        --footer-column-gap: clamp(
            var(--space-6),
            calc(72 * var(--fluid-unit)),
            calc(var(--space-unit) * 22.5)
        );
        /* Measure of the footer copy, taken from the 312-wide text of the frame:
           it keeps the ink of a column clear of the gutter next to it. */
        --footer-design-text-max: 312;
        --footer-text-max: clamp(
            calc(var(--space-unit) * 50),
            calc(var(--footer-design-text-max) * var(--fluid-unit)),
            calc(var(--space-unit) * 78)
        );
        /* The newsletter needs room for a usable e-mail field. */
        --footer-design-newsletter-width: 300;
        --footer-newsletter-width: clamp(
            calc(var(--space-unit) * 60),
            calc(var(--footer-design-newsletter-width) * var(--fluid-unit)),
            calc(var(--space-unit) * 75)
        );
        --social-size: clamp(
            var(--space-6),
            calc(36 * var(--fluid-unit)),
            var(--space-10)
        );
    }
}