/* ==========================================================================
 Malina Nig Ltd, design tokens, reset, base typography
 Anchor: SWISS
 surface pure white / neutral #F7F7F8, never warm paper, never grain
 type Helvetica Neue / Akzidenz-Grotesk lineage, one family, sans
 for display AND body
 accent one, used deliberately. Malina green (see note)
 structure visible grid lines and 1px hairline rules, left-aligned,
 asymmetric; numerals treated as composition elements

 Accent note: Swiss canonically takes Swiss Red, International Orange or
 Yves Klein Blue. Malina's registered brand colour is green, so green takes
 that slot. It is the single deliberate accent, nothing else is chromatic.
 ========================================================================== */

:root {
 /* --- surface ---------------------------------------------------------- */
 --white: #FFFFFF;
 --off: #F7F7F8; /* neutral alternate ground */
 --off-2: #EFEFF1; /* table head, inset */

 /* --- ink -------------------------------------------------------------- */
 --ink: #111111; /* headings, primary text, 18.9:1 on white */
 --ink-2: #3A3A3C; /* body copy, 10.4:1 */
 --ink-muted: #626266; /* secondary, 5.9:1 */
 --ink-faint: #66666B; /* tertiary, 5.7:1 on white, 5.0:1 on the neutral panels it also lands on */

 /* Swiss structure: hairlines, not shadows */
 --rule: rgba(17, 17, 17, 0.15);
 --rule-strong: rgba(17, 17, 17, 0.32);
 --rule-black: #111111;

 /* --- accent, the one deliberate colour ------------------------------- */
 --accent: #1BAA42; /* deepened green, blocks, rules, limit marks. Black on it: 6.18:1 */
 --accent-bright: #26CE51;/* logo green, kept for marks that sit on dark imagery */
 --accent-ink: #0B6E2A; /* the accent where it must carry text on white: 6.0:1 */
 --accent-wash: #E9F7ED;
 --accent-deep: #052E14; /* the ground the glass imagery sits on */

 /* Semantic, not decorative: the only non-green in the palette, reserved for
 a failed submission. On white: 6.5:1 */
 --danger: #B3261E;
 --danger-wash: #FDF2F1;

 /* --- glass ------------------------------------------------------------
 Only ever rendered over imagery. Glass over a flat surface is just a
 grey box, so these are scoped to the image-backed bands. */
 /* Dark-tinted, not white-tinted: a white frost lifts the ground behind the
 type and breaks contrast over bright artwork. */
 --glass-fill: rgba(7, 26, 14, 0.46);
 --glass-fill-strong: rgba(7, 26, 14, 0.66);
 --glass-edge: rgba(255, 255, 255, 0.26);
 --glass-edge-soft: rgba(255, 255, 255, 0.15);
 --glass-blur: blur(20px) saturate(140%);

 /* type that sits on the glass / imagery bands */
 --on-image: #FFFFFF;
 --on-image-2: rgba(255, 255, 255, 0.82);
 --on-image-muted: rgba(255, 255, 255, 0.68);

 /* --- type ------------------------------------------------------------- */
 /* The Swiss face. No webfont: this stack is the real thing where it exists
 and degrades to the correct grotesque everywhere else. */
 --font-display: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
 --font-body: var(--font-display);
 --font-mono: var(--font-display);

 --text-micro: 0.6875rem;
 --text-mono: 0.6875rem;
 --text-sm: 0.8125rem;
 --text-base: clamp(0.9375rem, 0.9rem + 0.14vw, 1rem);
 --text-lead: clamp(1rem, 0.94rem + 0.32vw, 1.1875rem);
 --text-h4: clamp(1rem, 0.95rem + 0.26vw, 1.125rem);
 --text-h3: clamp(1.125rem, 1.03rem + 0.48vw, 1.5rem);
 --text-h2: clamp(1.625rem, 1.25rem + 1.7vw, 3rem);
 --text-h1: clamp(2.25rem, 1.4rem + 3.9vw, 5rem);
 --text-display: clamp(2.5rem, 1.3rem + 5.4vw, 6.25rem);
 --text-stat: clamp(2.25rem, 1.5rem + 3.1vw, 4rem);

 /* --- space ------------------------------------------------------------ */
 --space-section: clamp(4rem, 2.8rem + 5.4vw, 8.5rem);
 --space-block: clamp(2.25rem, 1.6rem + 2.8vw, 4rem);
 --gutter: clamp(1.125rem, 0.5rem + 2.4vw, 2.75rem);
 --measure: 66ch;

 /* --- shape. Swiss is flat ------------------------------------------- */
 --radius: 0;
 --radius-lg: 0;

 /* --- motion, spring physics (Kowalski) ------------------------------- */
 --spring: cubic-bezier(0.22, 1, 0.36, 1);
 --spring-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
 --spring-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
 --dur-fast: 140ms;
 --dur: 300ms;
 --dur-slow: 620ms;
 --ease: var(--spring);
 --ease-inout: var(--spring);

 --header-h: 72px;

 /* --- aliases used across components ---------------------------------- */
 --bg: var(--white);
 --bg-sunken: var(--off);
 --surface: var(--white);
 --body: var(--ink-2);
 --muted: var(--ink-muted);
 --line: var(--rule);
 --line-strong: var(--rule-strong);
 --on-dark: #FFFFFF;
 --on-dark-muted: rgba(255, 255, 255, 0.76);
 --line-dark: var(--rule);
 --fg: var(--ink);
 --fg-2: var(--ink-2);
 --fg-muted: var(--ink-muted);
 --fg-faint: var(--ink-faint);
 --signal: var(--accent);
 --panel: var(--off);
 --panel-2: var(--off-2);
 --black: var(--white);
 --deep-975: var(--white);
 --deep-950: var(--off);
 --deep-900: var(--off);
 --deep-800: var(--ink);
 --deep-700: var(--ink-2);
 --green-500: var(--accent);
 --green-600: var(--accent-ink);
 --green-700: var(--accent-ink);
 --green-300: var(--accent);
 --green-100: var(--accent-wash);
 --paper: var(--white);
 --paper-2: var(--off);
}

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

html {
 -webkit-text-size-adjust: 100%;
 scroll-behavior: smooth;
 scroll-padding-top: calc(var(--header-h) + 1rem);
 background: var(--white);
}

body {
 margin: 0;
 background: var(--white);
 color: var(--ink-2);
 font-family: var(--font-body);
 font-size: var(--text-base);
 line-height: 1.62;
 font-variant-numeric: tabular-nums;
 font-feature-settings: "kern" 1, "tnum" 1;
 -webkit-font-smoothing: antialiased;
 overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, h5 {
 font-family: var(--font-display);
 color: var(--ink);
 font-weight: 700;
 line-height: 1.04;
 letter-spacing: -0.035em;
 margin: 0 0 0.6em;
 text-wrap: balance;
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); line-height: 1.18; letter-spacing: -0.026em; }
h4 { font-size: var(--text-h4); line-height: 1.28; letter-spacing: -0.018em; }

p { margin: 0 0 1.15em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-ink); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }

ul, ol { margin: 0 0 1.15em; padding-left: 1.15em; }
li { margin-bottom: 0.4em; }

strong { color: var(--ink); font-weight: 700; }

hr { border: 0; border-top: 1px solid var(--rule); margin: var(--space-block) 0; }

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

:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }

/* --- type helpers --------------------------------------------------------- */
.mono {
 font-family: var(--font-display);
 font-size: var(--text-mono);
 letter-spacing: 0.16em;
 text-transform: uppercase;
 font-weight: 500;
}

.lead { font-size: var(--text-lead); line-height: 1.58; color: var(--ink-2); }

.visually-hidden {
 position: absolute;
 width: 1px; height: 1px;
 padding: 0; margin: -1px;
 overflow: hidden;
 clip: rect(0 0 0 0);
 white-space: nowrap;
 border: 0;
}

.skip-link {
 position: absolute;
 top: 0; left: 2rem;
 z-index: 200;
 transform: translateY(-140%);
 background: var(--ink);
 color: var(--white);
 padding: 0.7rem 1.2rem;
 font-weight: 700;
 text-decoration: none;
 transition: transform var(--dur) var(--spring);
}
.skip-link:focus { transform: none; color: var(--white); }

@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 *, *::before, *::after {
 animation-duration: 0.01ms !important;
 animation-iteration-count: 1 !important;
 transition-duration: 0.01ms !important;
 }
}