/* Marc lädt ein 2027 design system, documented in docs/DESIGN-SYSTEM.md. Lives in the `mle` cascade layer, declared before Tailwind's `utilities` layer in the page head, so JS-toggled utilities (hidden …) still win. Rules of the house: - Raw colour values only in the palette (section 1). Everything else uses tokens. - Components read the semantic theme colours (--color-text, --color-border …) from section 2, so they work on dark, light and yellow surfaces without per-theme overrides. - Class names follow BEM (block__element--modifier), states are is-*. - Sizes in rem. px only for hairlines up to 2px, shadows/blur and media-query breakpoints. */ @font-face{font-family:"TT Norms Pro";src:url(../fonts/tt_norms_pro_regular.woff2) format("woff2");font-weight:400;font-display:swap} @font-face{font-family:"TT Norms Pro";src:url(../fonts/tt_norms_pro_medium.woff2) format("woff2");font-weight:500;font-display:swap} @font-face{font-family:"TT Norms Pro";src:url(../fonts/tt_norms_pro_demibold.woff2) format("woff2");font-weight:600;font-display:swap} @font-face{font-family:"TT Norms Pro";src:url(../fonts/tt_norms_pro_bold.woff2) format("woff2");font-weight:700;font-display:swap} @layer mle { /* ───────────── 1. Tokens ───────────── Naming follows the CSS property: --color-*, --font-*, --line-height-*, --letter-spacing-*, --space-*, --size-*, --radius-*, --shadow-*, --duration-*, --z-*, --icon-*. The names stay clear of Tailwind's theme variables in main.css. */ :root{ /* Colour palette: the only raw colour values in this file */ --color-neutral-0:#FFFFFF; --color-neutral-50:#F4F4F1; --color-neutral-100:#ECECEA; --color-neutral-200:#D6D6D1; --color-neutral-300:#C4C4BF; --color-neutral-400:#9A9A95; --color-neutral-500:#8A8A8A; --color-neutral-600:#6B6B6B; --color-neutral-700:#4A4A4A; --color-neutral-800:#2A2A2A; --color-neutral-850:#1E1E1E; --color-neutral-900:#141414; --color-neutral-950:#0A0A0A; --color-brand-100:#FFFBD1;--color-brand-300:#FFF36A;--color-brand-500:#FDE900; --color-success-100:#DCF5E6;--color-success-300:#5FDC96;--color-success-500:#1FA35B;--color-success-600:#168046;--color-success-700:#11673A; --color-danger-100:#FDE3E4;--color-danger-300:#FF8A8D;--color-danger-500:#E5484D;--color-danger-600:#BE1E24;--color-danger-700:#A1161B; --color-warning-100:#FFF0D6;--color-warning-300:#FFC266;--color-warning-500:#F5A524;--color-warning-600:#C47F00;--color-warning-700:#8A5A00; --color-info-100:#E3ECFF;--color-info-700:#1D4BB8; --color-vip-100:#EFE3FF;--color-vip-700:#5B21B6; --color-scrim:color-mix(in srgb,var(--color-neutral-950) 75%,transparent); --color-glass:color-mix(in srgb,var(--color-neutral-950) 86%,transparent); /* Typography */ --font-family-sans:"TT Norms Pro",ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; --font-family-mono:ui-monospace,SFMono-Regular,Menlo,monospace; --font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700; /* Fixed scale, 9 steps */ --font-size-2xs:.75rem;--font-size-xs:.8125rem;--font-size-sm:.875rem;--font-size-md:.9375rem;--font-size-base:1rem; --font-size-lg:1.0625rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem; --font-size-intro:clamp(1.0625rem,1.4vw,1.1875rem); --font-size-lead:clamp(1.125rem,1.6vw,1.3125rem); --font-size-subheading:clamp(1.375rem,2.2vw,1.75rem); --font-size-heading:clamp(1.75rem,3vw,2.5rem); --font-size-title:clamp(1.875rem,3.8vw,3.25rem); --font-size-h2:clamp(2.125rem,5.2vw,4.5rem); --font-size-h1:clamp(2.5rem,6vw,5.25rem); --font-size-display:clamp(2.75rem,6.6vw,6.25rem); --line-height-display:.98;--line-height-tight:1.04;--line-height-heading:1.12;--line-height-snug:1.25; --line-height-normal:1.35;--line-height-body:1.55;--line-height-prose:1.7; --letter-spacing-tight:-.01em;--letter-spacing-tighter:-.02em;--letter-spacing-tightest:-.03em;--letter-spacing-display:-.04em; --letter-spacing-caps:.14em;--letter-spacing-caps-sm:.08em; /* Spacing: --space-N = N × .25rem */ --space-0-5:.125rem;--space-1:.25rem;--space-1-5:.375rem;--space-2:.5rem;--space-2-5:.625rem;--space-3:.75rem; --space-3-5:.875rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-7:1.75rem;--space-8:2rem;--space-9:2.25rem; --space-10:2.5rem;--space-11:2.75rem;--space-12:3rem;--space-14:3.5rem;--space-16:4rem;--space-20:5rem; /* Fluid layout rhythm */ --space-gutter:clamp(1rem,4vw,3rem); --space-section:clamp(4rem,6.5vw,7rem); --space-band:clamp(3.5rem,7vw,6.5rem); --space-block:clamp(3rem,5vw,5rem); --space-head:clamp(2.5rem,4.5vw,4rem); --space-grid:clamp(2.75rem,4vw,3rem); --space-feature:clamp(2rem,4.5vw,4rem); --space-panel:clamp(1.5rem,3.4vw,2.75rem); /* Sizes */ --size-container:82.5rem;--size-container-narrow:47.5rem; --size-nav:4.75rem;--space-sticky:calc(var(--size-nav) + var(--space-6)); /* Controls: buttons, inputs and steppers share one height. .admin-body switches to compact density. */ --size-control:3.25rem;--size-control-sm:2.5rem;--size-control-lg:3.625rem;--size-textarea:7.5rem; --space-control:var(--space-5);--space-btn:var(--space-7);--space-btn-sm:var(--space-5);--space-btn-lg:var(--space-8); --font-size-control:var(--font-size-base);--font-size-btn-lg:var(--font-size-lg); /* Shape, depth, motion, stacking */ --radius-sm:.25rem;--radius:.375rem;--radius-full:100rem; --shadow-sm:0 1px 3px color-mix(in srgb,var(--color-neutral-950) 25%,transparent); --shadow-md:0 18px 40px color-mix(in srgb,var(--color-neutral-950) 16%,transparent); --shadow-lg:0 18px 50px color-mix(in srgb,var(--color-neutral-950) 40%,transparent); --ease:cubic-bezier(.2,.7,.2,1);--duration-fast:.2s;--duration:.3s;--duration-slow:.5s;--duration-reveal:.9s; --z-menu:49;--z-nav:50;--z-drawer:60;--z-modal:70;--z-toast:80; /* Icons (SVG data URIs). Used as mask on .icon (takes currentColor) or as background image. */ --icon-mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 148 33.6'%3E%3Cpath transform='translate(-166.4 294) rotate(-90)' d='M269.7,175.2c1.8,1.5,3.7,2.9,5.5,4.2,1.9,1.4,3.7,2.8,5.4,4.1,1.8,1.5,3.9,3.9,3.9,6.8s-2,5.3-3.7,6.7c-1.8,1.6-3.8,3.1-5.9,4.6-1.4,1-2.7,1.9-4,3-5.1,4.1-8.3,8.4-9.5,13.5-2.4,9.6.9,18,9.8,24.8,1.3,1,2.5,1.9,3.7,2.8,2.2,1.6,4.4,3.2,6.3,4.9,2.2,2,3.3,4.2,3.2,6.5,0,2.3-1.3,4.6-3.6,6.6-1.8,1.5-3.7,3-5.8,4.5-1.4,1.1-3,2.2-4.5,3.4-5,4-8.1,8.5-9.4,13.6-1.9,8-.7,19.4,16.2,28.7.7.5,1.5.6,2.3.6h0c1.7,0,3.4-.9,4.3-2.6,1.3-2.4.5-5.4-2-6.6-13.8-7.5-12-15.2-11.3-17.7.7-3,2.6-5.6,5.9-8.2,1.4-1.1,2.7-2.1,4.2-3.1,2.1-1.5,4.3-3.1,6.4-4.9,4.4-3.8,6.9-8.7,7-13.8s-2.2-10.1-6.5-13.9c-2.3-2.1-4.8-4-7.2-5.7-1.3-.9-2.3-1.7-3.5-2.6-5.8-4.5-7.7-9-6.3-14.7.7-2.9,2.6-5.5,6-8.1,1.2-.9,2.4-1.8,3.7-2.8,2.2-1.6,4.5-3.2,6.6-5.1,4.6-4.1,7-9.1,7-14.3s-2.6-10.2-7.3-14.3c-1.9-1.6-4-3.1-5.8-4.6-1.8-1.4-3.3-2.4-5.1-3.6,0,0-2.5-1.6-4.2-1.4-1.8.3-3.7,1.7-4.3,4-.5,2.3,2.4,4.9,2.4,4.9h0Z' fill='%23FDE900'/%3E%3C/svg%3E"); --icon-waves:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='212 0 128 316'%3E%3Cg fill='%230A0A0A' fill-opacity='.12'%3E%3Cpath d='M233.6,247.6c-.8,0-1.6-.2-2.3-.6-16.9-9.2-18.2-20.7-16.2-28.7,1.3-5.1,4.3-9.5,9.4-13.6,1.3-1,2.5-1.9,3.6-2.7l.9-.6c2.1-1.5,4-2.9,5.8-4.5,2.2-2,3.5-4.2,3.6-6.6,0-2.2-1.1-4.5-3.2-6.5-1.9-1.7-4.1-3.3-6.3-4.9-1.3-.9-2.5-1.8-3.7-2.8-8.9-6.9-12.2-15.3-9.8-24.8,1.3-5,4.4-9.5,9.5-13.5,1.4-1,2.7-2,4-3,2.2-1.5,4.1-3,5.9-4.6,1.7-1.4,3.7-3.9,3.7-6.8s-2.2-5.4-3.9-6.8c-1.7-1.4-3.5-2.8-5.4-4.2-1.8-1.3-3.7-2.7-5.5-4.2-5.8-4.8-9.1-11.2-9.2-17.6s2.9-12.8,8.5-17.8c2.2-1.9,4.4-3.6,6.6-5.1,1.4-1,2.7-2,4.1-3.1,2.2-1.8,4.9-4.6,4.9-7.8s-2.6-6-4.8-7.7c-1.4-1.1-2.9-2.2-4.4-3.3-1.4-1.1-2.9-2.1-4.4-3.2-8.3-6.6-11.9-15.2-9.9-23.5,1.3-5.4,4.8-10.6,9.6-14.5,1.2-.9,2.3-1.8,3.4-2.6,2.2-1.6,5.3-1.2,6.8,1.1,1.5,2.2,1.2,5.2-1,6.8-1,.7-2.1,1.5-3.1,2.3-3.1,2.4-5.3,5.8-6.1,9-1.4,5.9,2.8,10.7,6.5,13.7,1.3,1,2.6,2,4,3,1.6,1.2,3.2,2.3,4.9,3.6,7,5.7,8.4,11.5,8.4,15.5s-1.5,9.8-8.5,15.5c-1.4,1.2-2.9,2.2-4.3,3.2-2.1,1.5-4.1,3-5.8,4.6-3.5,3.2-5.3,6.7-5.2,10.3,0,3.7,2.1,7.2,5.7,10.2,1.6,1.3,3.2,2.6,5,3.9,2,1.4,4,3,5.9,4.6,4.7,4,7.3,9.1,7.3,14.3s-2.4,10.2-7,14.3c-2.2,1.9-4.4,3.5-6.6,5.1-1.3,1-2.5,1.8-3.7,2.8-3.4,2.6-5.3,5.2-6,8.1-1.4,5.7.5,10.2,6.3,14.7,1.1.9,2.2,1.7,3.5,2.6,2.4,1.7,4.9,3.6,7.2,5.7,4.2,3.9,6.6,8.8,6.5,13.9,0,5.1-2.6,10.1-7,13.8-2.1,1.8-4.2,3.4-6.4,4.9l-.9.6c-1.1.8-2.2,1.6-3.3,2.5-3.3,2.6-5.2,5.2-5.9,8.2-.6,2.5-2.4,10.2,11.3,17.7,2.3,1.3,3.2,4.3,2,6.6-1.2,1.6-2.9,2.5-4.6,2.5h0Z'/%3E%3Cpath d='M269.7,175.2c1.8,1.5,3.7,2.9,5.5,4.2,1.9,1.4,3.7,2.8,5.4,4.1,1.8,1.5,3.9,3.9,3.9,6.8s-2,5.3-3.7,6.7c-1.8,1.6-3.8,3.1-5.9,4.6-1.4,1-2.7,1.9-4,3-5.1,4.1-8.3,8.4-9.5,13.5-2.4,9.6.9,18,9.8,24.8,1.3,1,2.5,1.9,3.7,2.8,2.2,1.6,4.4,3.2,6.3,4.9,2.2,2,3.3,4.2,3.2,6.5,0,2.3-1.3,4.6-3.6,6.6-1.8,1.5-3.7,3-5.8,4.5-1.4,1.1-3,2.2-4.5,3.4-5,4-8.1,8.5-9.4,13.6-1.9,8-.7,19.4,16.2,28.7.7.5,1.5.6,2.3.6h0c1.7,0,3.4-.9,4.3-2.6,1.3-2.4.5-5.4-2-6.6-13.8-7.5-12-15.2-11.3-17.7.7-3,2.6-5.6,5.9-8.2,1.4-1.1,2.7-2.1,4.2-3.1,2.1-1.5,4.3-3.1,6.4-4.9,4.4-3.8,6.9-8.7,7-13.8s-2.2-10.1-6.5-13.9c-2.3-2.1-4.8-4-7.2-5.7-1.3-.9-2.3-1.7-3.5-2.6-5.8-4.5-7.7-9-6.3-14.7.7-2.9,2.6-5.5,6-8.1,1.2-.9,2.4-1.8,3.7-2.8,2.2-1.6,4.5-3.2,6.6-5.1,4.6-4.1,7-9.1,7-14.3s-2.6-10.2-7.3-14.3c-1.9-1.6-4-3.1-5.8-4.6-1.8-1.4-3.3-2.4-5.1-3.6,0,0-2.5-1.6-4.2-1.4-1.8.3-3.7,1.7-4.3,4-.5,2.3,2.4,4.9,2.4,4.9h0Z'/%3E%3Cpath d='M269.3,41.4c-9-7.5-9.2-17.6-9.2-17.6,0-6.4,1.6-11.6,8.5-17.8,2.2-1.9,4.4-3.6,6.4-5,2.2-1.6,5.3-1.1,6.8,1.1,1.6,2.2,1.1,5.3-1.1,6.8-1.8,1.4-3.9,2.8-5.6,4.4-.7.7-5.4,4.8-5.2,10.3,0,0,.2,5.6,5.7,10.2,0,0,.7.6,1.5,1.3,1.7,1.3,3.1,2.3,3.5,2.6,2.2,1.5,5.8,4.3,7.2,5.7.7.7,6.6,6.2,6.5,13.9,0,7.7-6.1,13-7,13.8-1.2,1-3.6,2.8-6.4,4.9-3.3,2.5-3.4,2.4-4.2,3.2-2,1.7-5.4,4.8-6.1,9-1.1,6.8,5.4,12.8,6.5,13.6,1.7,1.3,4,3,4,3,0,0,.1.1.2.2,2.4,1.7,4.4,3.3,4.6,3.5,8.5,6.8,8.5,15.5,8.5,15.5,0,8.6-7.6,14.6-8.5,15.5-.6.4-1.8,1.4-4.3,3.2-3.7,2.9-5.6,4.3-5.8,4.6s-1,1.1-2.2,1.8c-.5.3-1.3.6-2.2.7-1.2,0-2-.3-2.3-.4-.5-.2-1.9-.9-2.5-2.5-.5-1.3-.3-2.3-.2-2.7.3-1.1.8-2.2,3.1-4.2,2.2-2.1,4.4-3.6,6.6-5.1.4-.3,1.4-1,2.8-2.1.6-.4,1.1-.9,1.2-.9.9-.7,4.8-3.9,4.9-7.8,0-3.9-3.6-6.8-4.8-7.7-.3-.2-1.9-1.5-4.1-3.2,0,0-.1-.1-.2-.2,0,0-2.4-1.7-4.4-3.2-1.2-.9-12.4-11.3-9.9-23.5,1.5-7.6,7.6-12.9,9.6-14.5,2.7-2.1,4.5-3.4,4.5-3.4,4-3,4.6-3.2,5.8-4.4,1.6-1.7,3.5-3.8,3.6-6.6,0-2.8-1.8-4.9-3.2-6.5-1.1-1.3-2.8-2.4-6.3-4.9-.6-.5-2-1.3-3.7-2.8-.3-.3-1.4-1-2.2-1.7h0Z'/%3E%3Cpath d='M323.8,247.6c-.8,0-1.6-.2-2.3-.6-16.9-9.2-18.2-20.7-16.2-28.7,1.3-5.1,4.3-9.5,9.4-13.6,1.3-1,2.5-1.9,3.6-2.7l.9-.6c2.1-1.5,4-3,5.8-4.5,2.2-2,3.5-4.2,3.6-6.6,0-2.2-1.1-4.5-3.2-6.5-1.9-1.7-4-3.3-6.3-4.9-1.3-.9-2.5-1.8-3.7-2.8-8.9-6.9-12.2-15.3-9.8-24.8,1.3-5,4.4-9.5,9.5-13.5,1.4-1,2.7-2,4-3,2.2-1.5,4.1-3,5.9-4.6,1.7-1.4,3.7-3.9,3.7-6.8s-2.2-5.4-3.9-6.8-3.5-2.8-5.4-4.2c-1.8-1.3-3.7-2.7-5.5-4.2-5.8-4.8-9.1-11.2-9.2-17.6,0-6.5,2.9-12.8,8.5-17.8,2.2-1.9,4.4-3.6,6.6-5.1,1.4-1,2.7-2,4-3.1,2.2-1.8,4.9-4.6,4.9-7.8s-2.6-6-4.8-7.7c-1.4-1.1-2.9-2.2-4.4-3.3-1.4-1.1-2.9-2.1-4.4-3.2-8.3-6.6-11.9-15.2-9.9-23.5,1.3-5.4,4.8-10.6,9.6-14.5,1.2-.9,2.3-1.8,3.4-2.6,2.2-1.6,5.3-1.2,6.8,1.1,1.5,2.2,1.2,5.2-1,6.8-1,.7-2.1,1.5-3.1,2.3-3.1,2.4-5.4,5.8-6.1,9-1.4,5.9,2.7,10.7,6.5,13.7,1.3,1,2.6,2,4,3,1.6,1.2,3.2,2.3,4.9,3.6,7,5.7,8.5,11.5,8.5,15.5s-1.5,9.8-8.5,15.5c-1.4,1.2-2.9,2.2-4.3,3.2-2.1,1.5-4,3-5.8,4.6-3.5,3.2-5.3,6.7-5.2,10.3s2.1,7.2,5.7,10.2c1.6,1.3,3.2,2.6,5,3.9,2,1.4,4,3,5.9,4.6,4.7,4,7.3,9.1,7.3,14.3s-2.4,10.2-7,14.3c-2.2,1.9-4.4,3.5-6.6,5.1-1.3,1-2.5,1.8-3.7,2.8-3.4,2.6-5.3,5.2-6,8.1-1.4,5.7.5,10.2,6.3,14.7,1.1.9,2.2,1.7,3.5,2.6,2.4,1.7,4.9,3.6,7.2,5.7,4.2,3.9,6.6,8.8,6.5,13.9,0,5.1-2.6,10.1-7,13.8-2.1,1.8-4.2,3.4-6.4,4.9l-.9.6c-1.1.8-2.2,1.6-3.3,2.5-3.3,2.6-5.2,5.2-5.9,8.2-.6,2.5-2.4,10.2,11.3,17.7,2.3,1.3,3.2,4.3,2,6.6-1.3,1.6-3,2.5-4.7,2.5h0Z'/%3E%3C/g%3E%3C/svg%3E"); --icon-check-white:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); --icon-chevron-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23FFFFFF' stroke-width='1.6'/%3E%3C/svg%3E"); --icon-chevron-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230A0A0A' stroke-width='1.6'/%3E%3C/svg%3E"); --icon-arrow-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); --icon-arrow-left:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E"); --icon-chevron-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 9l-7 7-7-7'/%3E%3C/svg%3E"); --icon-close:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 18 18 6M6 6l12 12'/%3E%3C/svg%3E"); --icon-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); --icon-cart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath d='M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5M3.102 4l.84 4.479 9.144-.459L13.89 4zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4m7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4m-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2m7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2'/%3E%3C/svg%3E"); --icon-account:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10s-3.516.68-4.168 1.332c-.678.678-.83 1.418-.832 1.664z'/%3E%3C/svg%3E"); --icon-logout:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000' fill-rule='evenodd'%3E%3Cpath d='M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0z'/%3E%3Cpath d='M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708z'/%3E%3C/svg%3E"); --icon-download:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath d='M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5'/%3E%3Cpath d='M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708z'/%3E%3C/svg%3E"); --icon-expand:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 2.5h4v4M6.5 13.5h-4v-4M13.5 2.5l-4.5 4.5M2.5 13.5l4.5-4.5'/%3E%3C/svg%3E"); --icon-qr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath d='M0 .5A.5.5 0 0 1 .5 0h3a.5.5 0 0 1 0 1H1v2.5a.5.5 0 0 1-1 0zm12 0a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0V1h-2.5a.5.5 0 0 1-.5-.5M.5 12a.5.5 0 0 1 .5.5V15h2.5a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 .5-.5m15 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1 0-1H15v-2.5a.5.5 0 0 1 .5-.5M4 4h1v1H4z'/%3E%3Cpath d='M7 2H2v5h5zM3 3h3v3H3zm2 8H4v1h1z'/%3E%3Cpath d='M7 9H2v5h5zm-4 1h3v3H3zm8-6h1v1h-1z'/%3E%3Cpath d='M9 2h5v5H9zm1 1v3h3V3zM8 8v2h1v1H8v1h2v-2h1v2h1v-1h2v-1h-3V8zm2 2H9V9h1zm4 2h-1v1h-2v1h3zm-4 2v-1H8v1z'/%3E%3Cpath d='M12 9h2V8h-2z'/%3E%3C/svg%3E"); --icon-menu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M4 8h16M4 16h16'/%3E%3C/svg%3E"); --icon-bell:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9a6 6 0 1 1 12 0c0 5 2 6 2 6H4s2-1 2-6Z'/%3E%3Cpath d='M10 19a2 2 0 0 0 4 0'/%3E%3C/svg%3E"); --icon-calendar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E"); --icon-user:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); --icon-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8h.01M11 12h1v4h1'/%3E%3C/svg%3E"); --icon-alert:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E"); --icon-trash:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M19 7l-.87 12.14A2 2 0 0 1 16.14 21H7.86a2 2 0 0 1-2-1.86L5 7m5 4v6m4-6v6m1-10V4a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v3M4 7h16'/%3E%3C/svg%3E"); --icon-mail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'/%3E%3C/svg%3E"); --icon-play:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E"); --icon-pause:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M9 6v12M15 6v12'/%3E%3C/svg%3E"); --icon-resume:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M8 6v12l10-6z'/%3E%3C/svg%3E"); --icon-play-rounded:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='4.2' stroke-linejoin='round'%3E%3Cpath d='M9.2 6.8v10.4l8.4-5.2z'/%3E%3C/svg%3E"); --icon-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E"); } /* ───────────── 2. Themes ───────────── Dark is the default. A theme class sets the semantic colour tokens and every component inside picks them up, so no component needs per-theme overrides. The nearest theme wins. */ :root,.theme-dark,.panel,.modal__card,.cart,.countdown__unit, .admin__sidebar,.admin__mobilebar,.admin-login,.stat--dark,.scanner__prompt,#scanner-status,#zoom-controls{ --color-text:var(--color-neutral-0); --color-text-secondary:color-mix(in srgb,var(--color-neutral-0) 78%,transparent); --color-text-muted:var(--color-neutral-500); --color-text-faint:color-mix(in srgb,var(--color-neutral-0) 45%,transparent); --color-surface:var(--color-neutral-900); --color-surface-sunken:var(--color-neutral-850); --color-border-subtle:color-mix(in srgb,var(--color-neutral-0) 7%,transparent); --color-border:color-mix(in srgb,var(--color-neutral-0) 12%,transparent); --color-border-strong:color-mix(in srgb,var(--color-neutral-0) 28%,transparent); --color-field:color-mix(in srgb,var(--color-neutral-0) 5%,transparent); --color-fill:color-mix(in srgb,var(--color-neutral-0) 8%,transparent); --color-focus:var(--color-brand-500); --color-ring:color-mix(in srgb,var(--color-brand-500) 18%,transparent); --color-link:var(--color-brand-500); --color-accent:var(--color-brand-500);--color-on-accent:var(--color-neutral-950); --color-accent-soft:color-mix(in srgb,var(--color-brand-500) 10%,transparent); --color-success:var(--color-success-300);--color-success-bg:color-mix(in srgb,var(--color-success-500) 15%,transparent); --color-danger:var(--color-danger-300);--color-danger-bg:color-mix(in srgb,var(--color-danger-500) 15%,transparent); --color-warning:var(--color-warning-300);--color-warning-bg:color-mix(in srgb,var(--color-warning-500) 15%,transparent); --icon-chevron:var(--icon-chevron-light); } .theme-light,.section--light,.section--off,body.site dialog,.admin-body,.modal__card--light{ --color-text:var(--color-neutral-950); --color-text-secondary:var(--color-neutral-700); --color-text-muted:var(--color-neutral-600); --color-text-faint:var(--color-neutral-400); --color-surface:var(--color-neutral-0); --color-surface-sunken:var(--color-neutral-50); --color-border-subtle:color-mix(in srgb,var(--color-neutral-950) 7%,transparent); --color-border:color-mix(in srgb,var(--color-neutral-950) 12%,transparent); --color-border-strong:color-mix(in srgb,var(--color-neutral-950) 22%,transparent); --color-field:var(--color-neutral-0); --color-fill:var(--color-neutral-100); --color-focus:var(--color-neutral-950); --color-ring:color-mix(in srgb,var(--color-neutral-950) 10%,transparent); --color-link:var(--color-neutral-950); --color-accent:var(--color-neutral-950);--color-on-accent:var(--color-brand-500); --color-accent-soft:var(--color-brand-100); --color-success:var(--color-success-700);--color-success-bg:var(--color-success-100); --color-danger:var(--color-danger-700);--color-danger-bg:var(--color-danger-100); --color-warning:var(--color-warning-700);--color-warning-bg:var(--color-warning-100); --icon-chevron:var(--icon-chevron-dark); } .theme-brand,.band,.ticket-card__side,.shop-banner{ --color-text:var(--color-neutral-950); --color-text-secondary:color-mix(in srgb,var(--color-neutral-950) 75%,transparent); --color-text-muted:color-mix(in srgb,var(--color-neutral-950) 55%,transparent); --color-text-faint:var(--color-neutral-400); --color-surface:var(--color-neutral-0); --color-surface-sunken:var(--color-neutral-0); --color-border-subtle:color-mix(in srgb,var(--color-neutral-950) 7%,transparent); --color-border:color-mix(in srgb,var(--color-neutral-950) 18%,transparent); --color-border-strong:color-mix(in srgb,var(--color-neutral-950) 22%,transparent); --color-field:var(--color-neutral-0); --color-fill:color-mix(in srgb,var(--color-neutral-950) 8%,transparent); --color-focus:var(--color-neutral-950); --color-ring:color-mix(in srgb,var(--color-neutral-950) 14%,transparent); --color-link:var(--color-neutral-950); --color-accent:var(--color-neutral-950);--color-on-accent:var(--color-brand-500); --color-accent-soft:color-mix(in srgb,var(--color-neutral-950) 6%,transparent); --color-success:var(--color-success-700);--color-success-bg:var(--color-success-100); --color-danger:var(--color-danger-700);--color-danger-bg:var(--color-danger-100); --color-warning:var(--color-warning-700);--color-warning-bg:var(--color-warning-100); --icon-chevron:var(--icon-chevron-dark); } /* Status borders are the base colour at 45 % in every theme */ :root{ --color-success-border:color-mix(in srgb,var(--color-success-500) 45%,transparent); --color-danger-border:color-mix(in srgb,var(--color-danger-500) 45%,transparent); --color-warning-border:color-mix(in srgb,var(--color-warning-500) 45%,transparent); } /* ───────────── 3. Base ───────────── */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:var(--space-sticky);-webkit-text-size-adjust:100%} body.site{margin:0;background:var(--color-neutral-950);color:var(--color-neutral-0);font-family:var(--font-family-sans);font-size:var(--font-size-lg);line-height:var(--line-height-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden} body.site main{flex:1 0 auto} :where(body.site) img{display:block;max-width:100%} :where(body.site) a{color:inherit} :where(body.site) button{font:inherit;color:inherit;cursor:pointer} .wrapper{max-width:var(--size-container);margin:0 auto;padding:0 var(--space-gutter)} .wrapper--narrow{max-width:var(--size-container-narrow)} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ───────────── 4. Type ───────────── */ /* Caps / overline: one treatment everywhere, the size depends on the role */ .eyebrow,.hero__facts dt,.ticket-card__date small,.countdown-wrap__label,.countdown__label,.footer__heading,.ticket-offer__day,.legal__toc h2,.slot__kind, .steps,.admin-nav__label,.admin__eyebrow,.stat__label,.table th,.form__section,.list-card__metrics dt{text-transform:uppercase;letter-spacing:var(--letter-spacing-caps)} .eyebrow{font-size:var(--font-size-2xs);display:inline-flex;align-items:center;gap:var(--space-3);font-weight:var(--font-weight-medium)} .eyebrow::before{content:"";width:2.5rem;height:.5625rem;flex:none;background:no-repeat center/contain var(--icon-mark)} .ticket-card__main .eyebrow::before,.vip__main .eyebrow::before,.auth__card .eyebrow::before{display:none} /* Eyebrow label → heading: one gap everywhere unless a component sets its own */ .eyebrow + .h2{margin-top:var(--space-6)} :where(body.site) :is(h1,h2,h3){margin:0;font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-tightest);line-height:var(--line-height-tight)} .h1{font-size:var(--font-size-h1)} .h2{font-size:var(--font-size-h2)} .h3{font-size:var(--font-size-subheading);letter-spacing:var(--letter-spacing-tighter);line-height:var(--line-height-snug)} .lead{font-size:var(--font-size-lead);line-height:var(--line-height-body)} mark{background:linear-gradient(transparent 58%,var(--color-brand-500) 58%);color:inherit;padding:0 .08em} /* ───────────── 4b. Icons ───────────── . The SVG is a mask, so the icon takes the current text colour. Size it with width/height from the surrounding component. */ .icon{display:inline-block;flex:none;width:1em;height:1em;background:currentColor;vertical-align:middle;-webkit-mask:var(--icon) no-repeat center/contain;mask:var(--icon) no-repeat center/contain} .icon--arrow-right{--icon:var(--icon-arrow-right)}.icon--arrow-left{--icon:var(--icon-arrow-left)}.icon--chevron-down{--icon:var(--icon-chevron-down)}.icon--close{--icon:var(--icon-close)}.icon--check{--icon:var(--icon-check)}.icon--cart{--icon:var(--icon-cart)}.icon--user{--icon:var(--icon-user)}.icon--menu{--icon:var(--icon-menu)}.icon--bell{--icon:var(--icon-bell)}.icon--calendar{--icon:var(--icon-calendar)}.icon--account{--icon:var(--icon-account)}.icon--logout{--icon:var(--icon-logout)}.icon--download{--icon:var(--icon-download)}.icon--expand{--icon:var(--icon-expand)}.icon--qr{--icon:var(--icon-qr)}.icon--info{--icon:var(--icon-info)}.icon--alert{--icon:var(--icon-alert)}.icon--trash{--icon:var(--icon-trash)}.icon--mail{--icon:var(--icon-mail)}.icon--play{--icon:var(--icon-play)}.icon--pause{--icon:var(--icon-pause)}.icon--resume{--icon:var(--icon-resume)}.icon--play-rounded{--icon:var(--icon-play-rounded)} /* ───────────── 5. Buttons ───────────── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2-5);height:var(--size-control);padding:0 var(--space-btn);border-radius:var(--radius);font-weight:var(--font-weight-semibold);font-size:var(--font-size-control);line-height:1;text-decoration:none;border:1px solid transparent;transition:transform var(--duration-fast) var(--ease),background var(--duration-fast),color var(--duration-fast),border-color var(--duration-fast),opacity var(--duration-fast);white-space:nowrap;cursor:pointer;background:none} .btn:disabled,.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed;transform:none} .btn--primary{background:var(--color-brand-500);color:var(--color-neutral-950)} .btn--primary:hover{background:var(--color-brand-300)} .btn--outline{border-color:var(--color-border-strong);color:var(--color-text)} .btn--outline:hover{border-color:var(--color-text)} .btn--outline-brand{border-color:var(--color-brand-500);color:var(--color-brand-500)} .btn--outline-brand:hover{background:var(--color-brand-500);border-color:var(--color-brand-500);color:var(--color-neutral-950)} .btn--dark{background:var(--color-neutral-950);color:var(--color-neutral-0)} .btn--dark:hover{background:var(--color-neutral-850)} .btn--danger{background:transparent;border-color:var(--color-danger-border);color:var(--color-danger)} .btn--danger:hover{background:var(--color-danger-500);border-color:var(--color-danger-500);color:var(--color-neutral-0)} .btn--ghost{height:auto;padding:var(--space-1-5) var(--space-2);border:0;border-radius:var(--radius);background:none;color:var(--color-text-secondary);font-weight:var(--font-weight-semibold)} .btn--ghost:hover{transform:none;background:var(--color-fill);color:var(--color-text)} .btn .icon{width:1.125rem;height:1.125rem;flex:none} .btn--sm{height:var(--size-control-sm);padding:0 var(--space-btn-sm);font-size:var(--font-size-sm)} .btn--lg{height:var(--size-control-lg);padding:0 var(--space-btn-lg);font-size:var(--font-size-btn-lg)} .btn--block{display:flex;width:100%} .icon-btn{position:relative;width:2.5rem;height:2.5rem;border-radius:var(--radius);border:1px solid var(--color-border);background:none;display:grid;place-items:center;text-decoration:none;transition:border-color var(--duration-fast);color:inherit;flex:none} .icon-btn:hover{border-color:var(--color-border-strong)} .icon-btn .icon{width:1.125rem;height:1.125rem} /* ───────────── 6. Nav ───────────── */ .nav{position:fixed;inset:0 0 auto 0;z-index:var(--z-nav);transition:background var(--duration),border-color var(--duration);border-bottom:1px solid transparent} .nav.is-scrolled,.nav--solid{background:var(--color-glass);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-color:var(--color-border)} .nav .wrapper{display:flex;align-items:center;justify-content:space-between;height:var(--size-nav);gap:var(--space-6)} .nav__logo img{height:2.875rem;width:auto;transition:opacity var(--duration)} .nav--hero:not(.is-scrolled) .nav__logo img{opacity:0} .nav__links{display:flex;gap:var(--space-8);list-style:none;margin:0;padding:0} .nav__links a{text-decoration:none;font-size:var(--font-size-md);font-weight:var(--font-weight-medium);opacity:.78;transition:opacity var(--duration-fast)} .nav__links a{position:relative} .nav__links a:hover,.nav__links a.is-active{opacity:1} .nav__links a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:calc(var(--space-1-5) * -1);height:2px;background:var(--color-brand-500)} .nav__actions{display:flex;align-items:center;gap:var(--space-0-5)} .nav__actions .btn{margin-inline:.6875rem} .nav__cart,.nav__account{position:relative;display:grid;place-items:center;width:2.75rem;height:2.75rem;color:inherit;text-decoration:none;flex:none} .nav__cart .icon{width:1.4rem;height:1.4rem} .nav__account .icon{width:1.75rem;height:1.75rem} .nav__cart-count{position:absolute;top:var(--space-0-5);right:0;min-width:1.1875rem;height:1.1875rem;padding:0 var(--space-1-5);border-radius:var(--radius-full);background:var(--color-brand-500);color:var(--color-neutral-950);font-size:var(--font-size-2xs);font-weight:var(--font-weight-bold);display:grid;place-items:center;line-height:1} .nav__burger{display:none} .nav__burger{place-items:center;width:2.75rem;height:2.75rem;padding:0;border:0;background:none;color:inherit;cursor:pointer;flex:none} .burger{display:flex;flex-direction:column;gap:var(--space-1-5);width:1.375rem} .burger span{display:block;height:2px;border-radius:2px;background:currentColor;transition:transform var(--duration) var(--ease),opacity var(--duration-fast)} .nav__burger[aria-expanded="true"] .burger span:nth-child(1){transform:translateY(calc(var(--space-1-5) + 2px)) rotate(45deg)} .nav__burger[aria-expanded="true"] .burger span:nth-child(2){opacity:0} .nav__burger[aria-expanded="true"] .burger span:nth-child(3){transform:translateY(calc((var(--space-1-5) + 2px) * -1)) rotate(-45deg)} .site-menu{position:fixed;inset:0;z-index:var(--z-menu);background:var(--color-neutral-950);padding:calc(var(--size-nav) + var(--space-6)) var(--space-gutter) var(--space-10);display:flex;flex-direction:column;gap:var(--space-1-5);opacity:0;pointer-events:none;transition:opacity var(--duration);overflow-y:auto} .site-menu.is-open{opacity:1;pointer-events:auto} .site-menu a:not(.btn){font-size:var(--font-size-2xl);font-weight:var(--font-weight-medium);letter-spacing:var(--letter-spacing-tighter);text-decoration:none;padding:var(--space-3) 0;border:0;border-bottom:1px solid var(--color-border);background:none;text-align:left;color:var(--color-neutral-0)} .site-menu__top{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-5)} .site-menu__actions{display:none} .site-menu__account{display:flex;gap:var(--space-3)} .site-menu__account>*{flex:1 1 0} .site-menu__account .btn{width:100%} .site-menu form{margin:0} /* ───────────── 7. Page shell ───────────── */ .page-head{margin-bottom:var(--space-head)} .page-head .h1,.page-head .h2{margin-top:var(--space-5)} .page-head p{margin:var(--space-5) 0 0;max-width:60ch} :where(body.site) section{position:relative} .section{padding:var(--space-section) 0} .section--page{padding-top:calc(var(--size-nav) + var(--space-section))} .section--light{background:var(--color-neutral-0);color:var(--color-neutral-950)} .section--off{background:var(--color-neutral-50);color:var(--color-neutral-950)} .section__head{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-10);align-items:end;margin-bottom:var(--space-head)} .section__head .h2{margin-top:var(--space-6)} .section__head p{margin:0;max-width:46ch;justify-self:end;font-size:var(--font-size-base)} /* ───────────── 8. Hero ───────────── */ .hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate} .hero__media{position:absolute;inset:0;z-index:-1} .hero__media img{width:100%;height:100%;object-fit:cover;object-position:72% 30%;transform:scale(1.04);animation:heroZoom 14s var(--ease) forwards} .hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--color-neutral-950) 92%,transparent) 0%,color-mix(in srgb,var(--color-neutral-950) 60%,transparent) 28%,transparent 50%),linear-gradient(0deg,var(--color-neutral-950) 0%,color-mix(in srgb,var(--color-neutral-950) 70%,transparent) 30%,transparent 60%)} @keyframes heroZoom{to{transform:scale(1)}} .hero__inner{width:100%;padding-top:calc(var(--size-nav) + var(--space-11));padding-bottom:var(--space-11)} .hero__title{margin:0 0 var(--space-9);line-height:0} .hero__logo{width:clamp(12.5rem,19vw,18.125rem);height:auto} .hero__jubilee{font-size:var(--font-size-display);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-tightest);line-height:var(--line-height-display);margin:0 0 var(--space-5);color:var(--color-brand-500)} .hero .lead{max-width:40ch;color:var(--color-text-secondary);margin:0 0 var(--space-8)} .hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-3)} .hero__facts{margin:var(--space-12) 0 0;border-top:1px solid var(--color-border);display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 clamp(2.5rem,6vw,6rem)} .hero__facts div{padding:var(--space-6) 0 0} .hero__facts dt{font-size:var(--font-size-xs);color:var(--color-text-muted);margin-bottom:var(--space-1-5)} .hero__facts dd{margin:0;font-size:clamp(1.375rem,2.4vw,2.25rem);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-tighter);line-height:var(--line-height-snug)} /* ───────────── 9. Ticket teaser (landing) ───────────── */ .ticket-card{display:grid;grid-template-columns:1.2fr 1fr;border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden;background:var(--color-neutral-900)} .ticket-card__main{padding:var(--space-feature)} .ticket-card__main .h2{font-size:var(--font-size-title);margin:var(--space-6) 0 var(--space-5)} .ticket-card__main mark{background:none;color:var(--color-brand-500);padding:0} .ticket-card__main p{color:var(--color-text-secondary);max-width:44ch;margin:0 0 var(--space-8)} .ticket-card__main p :is(strong,a){color:var(--color-text)} .ticket-card__side{background:var(--color-brand-500);color:var(--color-neutral-950);padding:var(--space-feature);display:flex;flex-direction:column;justify-content:flex-start;gap:clamp(2.25rem,4vw,3.5rem);position:relative;overflow:hidden} .ticket-card--presale{margin-bottom:var(--space-band)} .ticket-card__side .remind,.ticket-card__side .remind-success{position:relative;z-index:1} .ticket-card__side::after{content:"";position:absolute;right:calc(var(--space-2-5) * -1);bottom:calc(var(--space-16) * -1);width:11.25rem;height:27.8125rem;background:no-repeat center/contain var(--icon-waves);pointer-events:none} .ticket-card__date{font-size:clamp(2.375rem,4.4vw,3.75rem);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-tightest);line-height:var(--line-height-display);position:relative;z-index:1} .ticket-card__date small{display:block;font-size:var(--font-size-2xs);font-weight:var(--font-weight-medium);margin-bottom:var(--space-3-5)} .price-list{list-style:none;margin:0;padding:0;position:relative;z-index:1;border-top:1px solid var(--color-border)} .price-list li{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);padding:var(--space-3-5) 0;border-bottom:1px solid var(--color-border);font-weight:var(--font-weight-semibold);font-size:var(--font-size-lg)} .price-list s{font-weight:var(--font-weight-medium);opacity:.55;margin-right:var(--space-2)} .price-list__regular{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--color-text-muted);margin-right:var(--space-1)} .price-list li > span:last-child{flex-shrink:0;white-space:nowrap} .countdown-wrap{position:relative;z-index:1} .countdown-wrap__label{margin:0 0 var(--space-3-5);font-size:var(--font-size-2xs);font-weight:var(--font-weight-medium)} .countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2-5);position:relative;z-index:1} .countdown__unit{background:var(--color-neutral-950);color:var(--color-text);border-radius:var(--radius);padding:clamp(1rem,2vw,1.5rem) var(--space-1-5) clamp(.875rem,1.6vw,1.25rem);text-align:center} .countdown__value{display:block;font-size:var(--font-size-title);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-tighter);line-height:1;font-variant-numeric:tabular-nums} .countdown__label{display:block;font-size:var(--font-size-2xs);color:var(--color-text-muted);margin-top:var(--space-2)} .countdown__link{color:inherit} .countdown--live{display:block;background:var(--color-neutral-950);color:var(--color-brand-500);border-radius:var(--radius);padding:var(--space-5);font-weight:var(--font-weight-semibold);text-align:center} /* ───────────── 10. Reminder form (dark, yellow band and ticket side via surface tokens) ───────────── */ .remind{max-width:32.5rem;position:relative} .remind__row{display:flex;gap:var(--space-2-5);flex-wrap:wrap} .remind input[type=email]{flex:1 1 15rem;min-width:0;height:var(--size-control);padding:0 var(--space-6);border-radius:var(--radius);border:1px solid var(--color-border-strong);background:var(--color-field);color:var(--color-text);font:inherit;font-size:var(--font-size-control);transition:border-color var(--duration-fast),background var(--duration-fast),box-shadow var(--duration-fast)} .remind input[type=email]::placeholder{color:var(--color-text-faint)} .remind input[type=email]:focus{outline:none;border-color:var(--color-focus);background:var(--color-field);box-shadow:0 0 0 4px var(--color-ring)} .remind input[aria-invalid=true]{border-color:var(--color-danger)} .remind .remind__hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);opacity:0} .remind .remind__consent{margin:var(--space-5) 0 0;font-size:var(--font-size-2xs);font-weight:var(--font-weight-regular);line-height:var(--line-height-body);color:var(--color-text-muted);max-width:52ch} .remind__consent a{color:var(--color-text);text-decoration-thickness:.06em;text-underline-offset:.2em} .remind .remind__error,.remind__error{margin:var(--space-3) 0 0;font-size:var(--font-size-sm);color:var(--color-danger)} .remind-success{display:flex;gap:var(--space-4);align-items:flex-start;max-width:32.5rem;animation:okIn var(--duration-slow) var(--ease)} .remind-success[hidden],.remind[hidden],.remind__error[hidden]{display:none} .remind-success .remind-success__icon{flex:none;width:2.75rem;height:2.75rem;border-radius:var(--radius-full);background:var(--color-accent);color:var(--color-on-accent);display:grid;place-items:center} .remind-success .remind-success__icon .icon{width:1.375rem;height:1.375rem} .remind-success strong{display:block;font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-tight)} .remind-success p{margin:var(--space-1-5) 0 var(--space-3);color:var(--color-text-secondary)} .remind-success a{color:var(--color-link);font-weight:var(--font-weight-semibold);text-underline-offset:.1875rem} @keyframes okIn{from{opacity:0;transform:translateY(.625rem)}} /* ───────────── 11. Intro ───────────── */ .intro{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2.5rem,5vw,4rem) clamp(2.5rem,7vw,6.875rem);align-items:start} .intro__head{grid-column:1/-1} .intro__text{margin:0 0 var(--space-11);max-width:54ch;font-size:var(--font-size-intro);color:var(--color-text-secondary)} .intro__text p{margin:0 0 var(--space-4)} .intro__text p:last-child{margin:0} .intro__text strong{color:var(--color-text);font-weight:var(--font-weight-semibold)} .intro__image{margin:0;border-radius:var(--radius);overflow:hidden;aspect-ratio:2/3;position:relative} .intro__image img{width:100%;height:100%;object-fit:cover} .intro__image--focus-right img{object-position:69% 50%} .expect{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-8) clamp(1.5rem,3vw,3rem);margin:0 0 var(--space-11)} .expect li{display:grid;grid-template-columns:1fr;gap:var(--space-3);align-content:start;padding:0;font-size:var(--font-size-lg);line-height:var(--line-height-normal)} .expect li::before{content:"";width:3.75rem;height:.85rem;background:no-repeat left center/contain var(--icon-mark);margin:var(--space-1) 0 0} .expect strong{font-weight:var(--font-weight-semibold)} .signoff{display:flex;align-items:center;gap:var(--space-5)} .signoff p{margin:0;font-size:var(--font-size-intro);line-height:var(--line-height-body);color:var(--color-text-secondary)} .signoff img{width:clamp(9.5rem,14vw,12.5rem);height:auto;transform:translateY(.75rem)} /* ───────────── 12. Video ───────────── */ .video{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:var(--color-neutral-850)} .video iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .video--framed{border:1px solid var(--color-border)} .video__poster,.video__loop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .video__play{position:absolute;inset:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(.75rem,2vw,1.25rem);border:0;background:linear-gradient(color-mix(in srgb,var(--color-neutral-950) 25%,transparent),color-mix(in srgb,var(--color-neutral-950) 45%,transparent));color:var(--color-neutral-0);cursor:pointer;font:inherit} .video__play-icon{position:relative;display:grid;place-items:center;width:clamp(4.5rem,14vw,11.5rem);aspect-ratio:1;border-radius:var(--radius-full);background:var(--color-brand-500);color:var(--color-neutral-950);transition:transform var(--duration) var(--ease)} .video__play-icon::before,.video__play-icon::after{content:"";position:absolute;inset:0;border-radius:var(--radius-full);background:var(--color-brand-500);opacity:.5;animation:play-pulse 2.4s ease-out infinite;pointer-events:none} .video__play-icon::after{animation-delay:1.2s} .video__play-icon .icon{position:relative;z-index:1;width:60%;height:60%;margin-left:2%} @keyframes play-pulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.7);opacity:0}} @media (prefers-reduced-motion:reduce){.video__play-icon,.video__play-icon:hover,.video__play-icon::before,.video__play-icon::after,.video__play-icon:hover::before,.video__play-icon:hover::after{animation:none!important}.video__play-icon::before,.video__play-icon::after{opacity:.25;transform:scale(1.25)}} .video__play-text{font-weight:var(--font-weight-semibold);font-size:clamp(.875rem,1.6vw,1.0625rem);letter-spacing:var(--letter-spacing-tight);text-shadow:0 1px 12px color-mix(in srgb,var(--color-neutral-950) 50%,transparent)} .video__play-icon:hover,.video__play:focus-visible .video__play-icon{transform:scale(1.18);animation:play-beat .7s ease-in-out infinite} .video__play-icon:hover::before,.video__play-icon:hover::after,.video__play:focus-visible .video__play-icon::before,.video__play:focus-visible .video__play-icon::after{animation:play-pulse-fast .75s ease-out infinite;opacity:.6} .video__play-icon:hover::after,.video__play:focus-visible .video__play-icon::after{animation-delay:.25s} @keyframes play-beat{0%,100%{transform:scale(1.18)}30%{transform:scale(1.28)}60%{transform:scale(1.2)}} @keyframes play-pulse-fast{0%{transform:scale(1);opacity:.65}100%{transform:scale(2.1);opacity:0}} .video__play:focus-visible{outline:2px solid var(--color-brand-500);outline-offset:-.25rem} /* ───────────── 13. Speakers & dialog ───────────── */ .speakers{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.75rem,1.6vw,1.375rem)} .speaker{background:none;border:0;padding:0;text-align:left;display:flex;flex-direction:column;gap:var(--space-3-5);color:inherit} .speaker__image{position:relative;aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;background:var(--color-neutral-850)} .speaker__image img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter var(--duration-slow) var(--ease),transform var(--duration-slow) var(--ease)} .speaker__image::after{content:"+";position:absolute;right:var(--space-3);bottom:var(--space-3);width:2.25rem;height:2.25rem;border-radius:var(--radius);background:var(--color-brand-500);color:var(--color-neutral-950);display:grid;place-items:center;font-size:var(--font-size-2xl);font-weight:var(--font-weight-medium);line-height:1;transform:scale(.6);opacity:0;transition:all var(--duration) var(--ease)} .speakers > .speaker:nth-child(4n+2){transition-delay:60ms}.speakers > .speaker:nth-child(4n+3){transition-delay:120ms}.speakers > .speaker:nth-child(4n+4){transition-delay:180ms} .speaker:hover .speaker__image img,.speaker:focus-visible .speaker__image img{filter:grayscale(0);transform:scale(1.03)} .speaker:hover .speaker__image::after,.speaker:focus-visible .speaker__image::after{transform:scale(1);opacity:1} .speaker__name{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-tight);line-height:var(--line-height-snug)} .speaker__role{font-size:var(--font-size-sm);color:var(--color-text-muted);margin-top:var(--space-1);line-height:var(--line-height-normal)} .speaker--host .speaker__image{outline:2px solid var(--color-brand-500);outline-offset:-2px} .badge{position:absolute;left:var(--space-3);top:var(--space-3);background:var(--color-brand-500);color:var(--color-neutral-950);font-size:var(--font-size-2xs);font-weight:var(--font-weight-bold);letter-spacing:var(--letter-spacing-caps-sm);text-transform:uppercase;padding:var(--space-1-5) var(--space-2-5);border-radius:var(--radius-full);z-index:1} body.site dialog{position:fixed;inset:0;margin:auto;height:fit-content;max-height:calc(100svh - 2rem);border:0;padding:0;max-width:min(60rem,calc(100vw - 2rem));width:100%;border-radius:var(--radius);background:var(--color-neutral-0);color:var(--color-neutral-950);overscroll-behavior:contain} html.scroll-locked,html:has(body.site dialog[open]),html:has(#cart-sidebar:not(.translate-x-full)){overflow:hidden;scrollbar-gutter:stable} body.site dialog::backdrop,.modal__backdrop,.cart__overlay,.admin__scrim{background:var(--color-scrim);backdrop-filter:blur(6px)} body.site dialog[open]{animation:dlg var(--duration) var(--ease)} @keyframes dlg{from{opacity:0;transform:translateY(1rem)}} .dialog__grid{display:grid;grid-template-columns:.85fr 1.15fr} .dialog__grid img{width:100%;height:100%;object-fit:cover;min-height:26.25rem} .dialog__body{padding:var(--space-panel);max-height:min(80vh,45rem);overflow:auto} .dialog__name{font-size:var(--font-size-heading);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-tightest);line-height:var(--line-height-tight);margin:var(--space-4) 0 var(--space-1-5)} .dialog__body .dialog__role{color:var(--color-text-muted);margin:0 0 var(--space-6)} .dialog__body p{margin:0 0 var(--space-3-5)} .dialog__controls{position:absolute;right:var(--space-3-5);top:var(--space-3-5);display:flex;gap:var(--space-2);z-index:2} .dialog__btn{width:2.25rem;height:2.25rem;display:grid;place-items:center;border-radius:var(--radius);border:1px solid var(--color-border);background:var(--color-neutral-0);color:var(--color-text-muted);cursor:pointer;transition:border-color var(--duration-fast),color var(--duration-fast)} .dialog__btn:hover{border-color:var(--color-neutral-950);color:var(--color-neutral-950)} .dialog__btn .icon{width:1rem;height:1rem} /* ───────────── 14. Programme ───────────── */ .program__block + .program__block{margin-top:var(--space-block)} .program__day-title{font-size:var(--font-size-heading);letter-spacing:var(--letter-spacing-tightest);line-height:var(--line-height-heading);margin:0 0 var(--space-7)} .program__grid{display:grid;grid-template-columns:1.75fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start} .program__track-title{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:var(--space-3-5);border-bottom:2px solid var(--color-text)} .program__track-title h3{font-size:var(--font-size-xl);letter-spacing:var(--letter-spacing-tight)} .slot{position:relative;display:grid;grid-template-columns:4.75rem 1fr;gap:var(--space-4);padding:var(--space-5) 0;border-bottom:1px solid var(--color-border-subtle)} .slot time{font-size:var(--font-size-base);font-weight:var(--font-weight-medium);padding-top:2px} .slot h4{margin:0;font-size:clamp(1.3125rem,1.9vw,1.625rem);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-tight);line-height:var(--line-height-normal)} .slot p{margin:var(--space-1-5) 0 0;color:var(--color-text-secondary);font-size:var(--font-size-base);white-space:pre-line} .slot::before{content:"";position:absolute;left:5.25rem;top:0;bottom:0;width:1px;background:var(--color-border-subtle)} .slot::after{content:"";position:absolute;left:5.25rem;top:var(--space-7);width:.625rem;height:.625rem;margin-left:calc(var(--space-1-5) * -1);border-radius:var(--radius-full);background:var(--color-brand-500);box-shadow:0 0 0 2px var(--color-neutral-50)} .slot__kind{display:block;margin:0 0 var(--space-2);font-size:var(--font-size-2xs);font-weight:var(--font-weight-semibold);line-height:var(--line-height-snug);color:var(--color-text-muted)} .slot--has-kind::after{top:var(--space-10)} .slot--has-kind time{padding-top:var(--space-6)} .slot mark{-webkit-box-decoration-break:clone;box-decoration-break:clone} .program__side .slot:not(.slot--highlight) mark{background:none;padding:0} .slot > div{padding-left:var(--space-2)} .slot:last-child{border-bottom:0} .slot--minor::after{top:var(--space-6);width:.375rem;height:.375rem;margin-left:calc(var(--space-1) * -1);background:var(--color-neutral-300)} .slot--minor time,.slot--minor h4,.slot--minor p{color:var(--color-text-muted)} .slot--minor time,.slot--minor p{font-size:var(--font-size-md)} .slot--minor h4{font-size:var(--font-size-lg);font-weight:var(--font-weight-medium)} .program__photo{margin:0 0 var(--space-head);border-radius:var(--radius);overflow:hidden;aspect-ratio:21/8} .program__photo img{width:100%;height:100%;object-fit:cover;display:block} .program__side{position:sticky;top:var(--space-sticky)} /* ───────────── 15. Gallery ───────────── */ .gallery__head{display:flex;justify-content:space-between;align-items:end;gap:var(--space-6);margin-bottom:var(--space-10)} .gallery__controls{display:flex;gap:var(--space-2-5)} .gallery{display:grid;grid-auto-flow:column;grid-auto-columns:min(84vw,77.5rem,calc((100svh - 8.75rem) * 1.5));gap:var(--space-5);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;margin:0 calc(50% - 50vw);padding:0 8vw} .gallery::-webkit-scrollbar{display:none} .gallery figure{margin:0;scroll-snap-align:center;scroll-snap-stop:always;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/2;background:var(--color-neutral-850);opacity:.35;transition:opacity var(--duration-slow) var(--ease)} .gallery figure.is-current{opacity:1} .gallery img{width:100%;height:100%;object-fit:cover} .gallery:focus-visible{outline:2px solid var(--color-brand-500);outline-offset:.375rem} .gallery__count{font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-caps);color:var(--color-text-muted);align-self:center;min-width:4rem;text-align:center;font-variant-numeric:tabular-nums} .gallery__count b{color:var(--color-text);font-weight:var(--font-weight-medium)} .gallery__btn{width:var(--size-control);height:var(--size-control)} .gallery__btn--pause{margin-right:var(--space-3)} /* ───────────── 16. Venue & FAQ ───────────── */ .venue{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:end} .venue__video{margin-top:var(--space-8)} .venue__video .video__play-icon{width:clamp(3.5rem,8vw,5.5rem)} .venue__info h2{font-size:var(--font-size-heading);margin:var(--space-6) 0 0} .venue__list,.timeline{list-style:none;margin:0 0 var(--space-8);padding:0;border-top:1px solid var(--color-border)} .venue__list li,.timeline li{display:grid;grid-template-columns:8.125rem 1fr;gap:var(--space-4);padding:var(--space-4) 0;border-bottom:1px solid var(--color-border);font-size:var(--font-size-base)} .venue__list b,.timeline b{font-weight:var(--font-weight-semibold)} .venue__list span,.timeline span{color:var(--color-text-secondary)} .faq__grid{display:grid;grid-template-columns:1fr 1.6fr;gap:clamp(2rem,6vw,6.25rem);align-items:start} .faq__side{position:sticky;top:var(--space-sticky)} .faq__side p{margin:var(--space-6) 0 var(--space-7);max-width:34ch} .faq details{border-bottom:1px solid var(--color-border)} .faq details:first-child{border-top:1px solid var(--color-border)} .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:var(--space-6);padding:var(--space-6) 0;font-size:clamp(1.125rem,1.5vw,1.25rem);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-tight)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"";flex:none;width:1.875rem;height:1.875rem;background:currentColor;-webkit-mask:var(--icon-plus) no-repeat center/.875rem;mask:var(--icon-plus) no-repeat center/.875rem;opacity:.55;transition:transform var(--duration) var(--ease),opacity var(--duration)} .faq details.is-open summary::after{transform:rotate(45deg);opacity:1} .faq .faq__answer{padding:0 var(--space-16) var(--space-7) 0;color:var(--color-text-secondary);overflow:hidden} .faq .faq__answer p{margin:0 0 var(--space-2-5)} .faq .faq__answer ul{margin:0;padding-left:var(--space-5)} .faq .faq__answer a{color:var(--color-text);text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.2em} .faq .faq__answer a:hover{text-decoration-color:var(--color-brand-500);text-decoration-thickness:.12em} /* ───────────── 17. CTA band ───────────── */ .band{background:var(--color-brand-500);color:var(--color-neutral-950);padding:clamp(4rem,8vw,6.875rem) 0;overflow:hidden} .band .wrapper{display:flex;justify-content:space-between;align-items:center;gap:var(--space-8);flex-wrap:wrap} .band .wrapper>div:first-child{min-width:0} @media (min-width:861px){.band .wrapper{flex-wrap:nowrap}} .band h2{font-size:clamp(2.25rem,5.2vw,4rem);letter-spacing:var(--letter-spacing-display);line-height:var(--line-height-display);max-width:14ch} .band p{margin:var(--space-6) 0 0;font-size:var(--font-size-lead);font-weight:var(--font-weight-medium);max-width:38ch} .band__remind{flex:0 1 30rem;min-width:min(100%,18.75rem)} .band__remind:has(> .btn){flex:0 0 auto;min-width:0} /* ───────────── 18. Footer ───────────── */ .footer{padding:var(--space-20) 0 var(--space-9);border-top:1px solid var(--color-border);background:var(--color-neutral-950);color:var(--color-neutral-0)} .footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--space-10);padding-bottom:var(--space-16)} .footer__grid img{height:5.25rem;width:auto;margin-bottom:var(--space-6)} .footer__heading{font-weight:var(--font-weight-medium);font-size:var(--font-size-2xs);color:var(--color-text-muted);margin:0 0 var(--space-5)} .footer__grid ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2-5)} .footer__grid a{text-decoration:none;opacity:.85} .footer__grid a:hover{opacity:1;color:var(--color-brand-500)} .footer__claim{margin:0;max-width:30ch;color:var(--color-text-secondary)} .footer__bottom{display:flex;justify-content:space-between;gap:var(--space-5);flex-wrap:wrap;padding-top:var(--space-7);border-top:1px solid var(--color-border);font-size:var(--font-size-sm);color:var(--color-text-muted)} .footer__bottom a{text-decoration:none} .footer__bottom a:hover{color:var(--color-text)} /* ───────────── 19. Panels, cards, auth ───────────── */ .panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-panel)} .panel + .panel{margin-top:var(--space-5)} .panel__title{font-size:var(--font-size-2xl);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-tighter);margin:0 0 var(--space-5)} .divider{height:1px;background:var(--color-border);border:0;margin:var(--space-7) 0} .auth{min-height:calc(100svh - 5rem);display:grid;place-items:center;padding:calc(var(--size-nav) + var(--space-14)) var(--space-gutter) var(--space-20)} .auth__card{width:100%;max-width:30rem} .auth__card.auth__card--wide{max-width:35rem} .auth__card .h2{font-size:var(--font-size-heading);margin:var(--space-5) 0 var(--space-2-5)} .auth__foot{margin-top:var(--space-6);text-align:center;font-size:var(--font-size-md);color:var(--color-text-muted)} /* Text link, also for