/**
 * @file: global.css
 * @description: Global styling for SYSKEVASIA Expo - CSS variables, typography, buttons, cards, responsive design
 * @tags: #styles #global #responsive #design
 */

/* ========================================
   CSS VARIABLES
   ======================================== */
:root {
    /* ============================================================
       DESIGN SYSTEM — BRAND SCALE (single source of truth)
       Brand colour #f15b2a (brand-500, SYSK3-0027 redesign 2026-10-30;
       was #f15b2a). Mirrored in libs/tailwind-config.js (brand.50…900).
       Look: qwencloud.com-inspired — Inter, ink text, soft grey surfaces,
       pill buttons, 20–24px cards, pastel glow heroes (.specs/051).
       ============================================================ */
    --brand-50:  #fef4f0;
    --brand-100: #fde5db;
    --brand-200: #fbc8b6;
    --brand-300: #f8a486;
    --brand-400: #f47d56;
    --brand-500: #f15b2a; /* identity / brand color — ink #0b0c0f on it 5.84:1, never white text (3.35:1) */
    --brand-600: #ca4c27; /* AA-safe: ↔ white 4.59:1 */
    --brand-700: #a63f20; /* AA-safe hover / text-on-white 6.26:1 */
    --brand-800: #852f17;
    --brand-900: #5f2210;
    --ink:       #0b0c0f;
    --ink-soft:  #1f2329;
    --line:      #e6e9ef;
    --line-strong: #d1d7e2;
    --line-field: #858d9c;   /* form-field borders 3.34:1 on white (non-text contrast >= 3:1) */
    --canvas:    #f2f4f8;

    /* ---- Semantic tokens (WCAG-AA-safe pairings) ----
       primary (#ca4c27) on white  : 4.59:1  ✓ AA normal text
       white on primary (#ca4c27)  : 4.59:1  ✓ AA normal text
       muted  (#535b6b) on white   : 6.83:1  ✓ AA (6.20:1 on canvas #f2f4f8)
       text   (ink #0b0c0f) on white : 19.6:1 ✓ AAA
       ink on brand (#f15b2a)      : 5.84:1  ✓ AA — the orange pill CTA uses INK text
       link (#a63f20) on white     : 6.26:1  ✓ AA (#ca4c27 is only 4.17:1 on canvas → links use brand-700)
       brand  (#f15b2a) on white   : 3.33:1  → decorative / large text / graphics only */
    --color-brand: #f15b2a;            /* decorative brand accent (large text / graphics) */
    --color-primary: #ca4c27;          /* interactive: links, primary fills, focus (AA) */
    --color-primary-hover: #a63f20;
    --color-link: #a63f20;             /* text links: AA on white AND on canvas */
    --color-link-hover: #852f17;
    --color-primary-light: #f47d56;
    --color-on-primary: #ffffff;
    --color-surface: #ffffff;
    --color-surface-muted: #f2f4f8;
    --color-text: #0b0c0f;
    --color-muted: #535b6b;            /* secondary text, AA on white and canvas */
    --color-border: #e6e9ef;
    --color-focus-ring: #f15b2a;

    /* Legacy aliases (kept for backward compatibility) */
    --color-dark: #0b0c0f;
    --color-dark-gray: #1f2329;
    --color-light: #ffffff;
    --color-white: #ffffff;

    /* Gray Scale */
    --color-gray-100: #f8f9fa;
    --color-gray-200: #e9ecef;
    --color-gray-300: #dee2e6;
    --color-gray-400: #ced4da;
    --color-gray-500: #adb5bd;
    --color-gray-600: #6c757d;
    --color-gray-700: #495057;
    --color-gray-800: #343a40;
    --color-gray-900: #212529;

    /* Semantic Colors */
    --color-success: #28a745;
    --color-warning: #ffc107;
    --color-error: #dc3545;
    --color-info: #17a2b8;

    /* Typography */
    /* Inter (variable 100–900, self-hosted, Greek + Latin) — Noto Sans stays as the fallback */
    --font-family-primary: 'Inter', 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-heading: 'Inter', 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-lg: 1.125rem;     /* 18px */
    --font-size-xl: 1.25rem;      /* 20px */
    --font-size-2xl: 1.5rem;      /* 24px */
    --font-size-3xl: 1.875rem;    /* 30px */
    --font-size-4xl: 2.25rem;     /* 36px */
    --font-size-5xl: 3rem;        /* 48px */

    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* Spacing */
    --spacing-xs: 0.25rem;    /* 4px */
    --spacing-sm: 0.5rem;     /* 8px */
    --spacing-md: 1rem;       /* 16px */
    --spacing-lg: 1.5rem;     /* 24px */
    --spacing-xl: 2rem;       /* 32px */
    --spacing-2xl: 3rem;      /* 48px */
    --spacing-3xl: 4rem;      /* 64px */

    /* Border Radius */
    --radius-sm: 0.5rem;      /* 8px */
    --radius-md: 0.75rem;     /* 12px */
    --radius-lg: 1.25rem;     /* 20px — cards */
    --radius-xl: 1.5rem;      /* 24px — large panels, media */
    --radius-full: 9999px;

    /* Shadows */
    /* Soft, low-contrast shadows (ink-tinted) */
    --shadow-sm: 0 1px 2px 0 rgba(11, 12, 15, 0.04);
    --shadow-md: 0 1px 2px rgba(11, 12, 15, 0.04), 0 6px 16px -4px rgba(11, 12, 15, 0.08);
    --shadow-lg: 0 1px 2px rgba(11, 12, 15, 0.04), 0 12px 32px -8px rgba(11, 12, 15, 0.12);
    --shadow-xl: 0 2px 4px rgba(11, 12, 15, 0.04), 0 24px 48px -12px rgba(11, 12, 15, 0.16);
    --shadow-2xl: 0 32px 64px -16px rgba(11, 12, 15, 0.22);

    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-normal: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;

    /* Z-index */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* ========================================
   ALPINE.JS CLOAK (hide elements until Alpine initializes)
   ======================================== */
[x-cloak] { display: none !important; }

/* ========================================
   GLOBAL RESETS & BASE STYLES
   ======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    background-color: var(--color-light);
    font-feature-settings: 'cv11', 'ss01'; /* Inter: single-storey a, open digits */
}

/* ========================================
   TYPOGRAPHY
   ======================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    letter-spacing: -0.02em;
    color: var(--color-dark);
    margin-bottom: var(--spacing-md);
}

/* A heading inside a white-text block (coloured card, CTA band) follows the
   text around it instead of the dark default (SYSK3-0027 contrast fix).
   :where() keeps specificity at h3 level, so a text-* utility still wins.
   No ":is(...)" after a space here: AssetMinifier strips spaces before ":"
   and would turn the descendant selector into a compound one. */
:where(.text-white) h1, :where(.text-white) h2, :where(.text-white) h3,
:where(.text-white) h4, :where(.text-white) h5, :where(.text-white) h6 {
    color: inherit;
}

h1 {
    font-size: var(--font-size-5xl);
}

h2 {
    font-size: var(--font-size-4xl);
}

h3 {
    font-size: var(--font-size-3xl);
}

h4 {
    font-size: var(--font-size-2xl);
}

h5 {
    font-size: var(--font-size-xl);
}

h6 {
    font-size: var(--font-size-lg);
}

p {
    margin-bottom: var(--spacing-md);
    line-height: var(--line-height-relaxed);
}

a {
    color: var(--color-link);
    text-decoration: none;
    transition: color var(--transition-fast);
}

/* Use :where() to give zero specificity so Tailwind utility classes (text-white etc.)
   can override this on button-style anchors without needing hover: variants. */
:where(a):hover {
    color: var(--color-link-hover);
}

/* ========================================
   BUTTONS
   ======================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--radius-full); /* pill */
    cursor: pointer;
    transition: all var(--transition-normal);
    white-space: nowrap;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Primary Button — brand orange pill with INK text (5.84:1; white on #f15b2a is only 3.35:1) */
.btn-primary {
    background-color: var(--brand-500);
    color: var(--ink);
    border-color: var(--brand-500);
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--brand-400);
    border-color: var(--brand-400);
    color: var(--ink);
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

.btn-primary:active:not(:disabled) {
    transform: translateY(0);
}

/* Secondary Button (outline pill, qwencloud style) */
.btn-secondary {
    background-color: var(--color-white);
    color: var(--ink);
    border-color: var(--line-strong);
}

.btn-secondary:hover:not(:disabled) {
    background-color: var(--canvas);
    border-color: var(--ink);
    color: var(--ink);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Dark Button */
.btn-dark {
    background-color: var(--color-dark);
    color: var(--color-white);
    border-color: var(--color-dark);
}

.btn-dark:hover:not(:disabled) {
    background-color: var(--ink-soft);
    border-color: var(--ink-soft);
    color: var(--color-white);
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

/* Light Button */
.btn-light {
    background-color: var(--color-white);
    color: var(--color-dark);
    border-color: var(--line);
}

.btn-light:hover:not(:disabled) {
    background-color: var(--canvas);
    border-color: var(--line-strong);
    color: var(--color-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Button Sizes */
.btn-sm {
    padding: 0.5rem 1rem;
    font-size: var(--font-size-sm);
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: var(--font-size-lg);
}

.btn-block {
    width: 100%;
    display: flex;
}

/* ========================================
   CARDS
   ======================================== */
.card {
    background-color: var(--color-white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: all var(--transition-normal);
}

.card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.card-header {
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--color-gray-200);
}

.card-body {
    padding: var(--spacing-lg);
}

.card-footer {
    padding: var(--spacing-lg);
    border-top: 1px solid var(--color-gray-200);
    background-color: var(--color-gray-100);
}

.card-img-top {
    width: 100%;
    height: auto;
    display: block;
}

/* Card Variants */
.card-bordered {
    border: 1px solid var(--color-gray-300);
    box-shadow: none;
}

.card-flat {
    box-shadow: none;
}

.card-hover-primary:hover {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(241, 91, 42, 0.18);
}

/* ========================================
   FORMS
   ======================================== */
.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
}

.form-control {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: var(--font-size-base);
    line-height: 1.5;
    color: var(--color-text);
    background-color: var(--color-white);
    border: 1px solid var(--line-field);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus {
    outline: 0;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(241, 91, 42, 0.18);
}

.form-control:disabled {
    background-color: var(--color-gray-100);
    opacity: 0.6;
    cursor: not-allowed;
}

textarea.form-control {
    resize: vertical;
    min-height: 100px;
}

.form-text {
    display: block;
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}

.form-error {
    display: block;
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-error);
}

/* ========================================
   UTILITIES
   ======================================== */
.container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

.container-fluid {
    width: 100%;
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

/* Text Alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Text Colors */
.text-primary { color: var(--color-primary); }
.text-dark { color: var(--color-dark); }
.text-white { color: var(--color-white); }
.text-muted { color: var(--color-muted); }

/* Background Colors */
.bg-primary { background-color: var(--color-primary); }
.bg-dark { background-color: var(--color-dark); }
.bg-light { background-color: var(--color-light); }
.bg-white { background-color: var(--color-white); }

/* Spacing Utilities */
.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }
.mt-4 { margin-top: var(--spacing-lg); }
.mt-5 { margin-top: var(--spacing-xl); }

.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-lg); }
.mb-5 { margin-bottom: var(--spacing-xl); }

.pt-1 { padding-top: var(--spacing-xs); }
.pt-2 { padding-top: var(--spacing-sm); }
.pt-3 { padding-top: var(--spacing-md); }
.pt-4 { padding-top: var(--spacing-lg); }
.pt-5 { padding-top: var(--spacing-xl); }

.pb-1 { padding-bottom: var(--spacing-xs); }
.pb-2 { padding-bottom: var(--spacing-sm); }
.pb-3 { padding-bottom: var(--spacing-md); }
.pb-4 { padding-bottom: var(--spacing-lg); }
.pb-5 { padding-bottom: var(--spacing-xl); }

/* Display */
.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }

/* Flexbox */
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.align-start { align-items: flex-start; }
.align-center { align-items: center; }
.align-end { align-items: flex-end; }
.gap-1 { gap: var(--spacing-xs); }
.gap-2 { gap: var(--spacing-sm); }
.gap-3 { gap: var(--spacing-md); }
.gap-4 { gap: var(--spacing-lg); }

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }

    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .container {
        max-width: 720px;
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);
    }

    .d-md-block { display: block; }
    .d-md-flex { display: flex; }
    .d-md-none { display: none; }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }

    .d-lg-block { display: block; }
    .d-lg-flex { display: flex; }
    .d-lg-none { display: none; }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }

    .d-xl-block { display: block; }
    .d-xl-flex { display: flex; }
    .d-xl-none { display: none; }
}

/* ========================================
   ANIMATIONS & TRANSITIONS
   ======================================== */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn var(--transition-normal);
}

.slide-in-up {
    animation: slideInUp var(--transition-normal);
}

.slide-in-down {
    animation: slideInDown var(--transition-normal);
}

/* Hover Effects */
.hover-lift {
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.hover-scale {
    transition: transform var(--transition-normal);
}

.hover-scale:hover {
    transform: scale(1.05);
}

/* ========================================
   ACCESSIBILITY
   ======================================== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.focus-visible:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    *,
    *::before,
    *::after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]::after {
        content: " (" attr(href) ")";
    }

    img {
        page-break-inside: avoid;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

/* ========================================
   DESIGN SYSTEM — ICONS
   Default sizing for sprite icons rendered via Icon::svg() / icon().
   Prevents "giant SVG" flashes before utility classes apply.
   ======================================== */
.icon {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    vertical-align: middle;
    stroke: currentColor;
    fill: none;
    line-height: 0;
}

svg[class*="w-"],
svg[class*="h-"] {
    flex-shrink: 0;
}

/* ========================================
   ACCESSIBILITY & MOTION
   ======================================== */
/* Alpine.js: hide elements with x-cloak until Alpine initializes */
[x-cloak] {
    display: none !important;
}

/* Keyboard focus ring (only for keyboard users, not mouse clicks) */
:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ========================================
   COMPONENTS — SPONSORS
   (moved out of the inline <style> in main.php — single source of truth)
   ======================================== */
.sponsor-tab {
    background: var(--color-white);
    color: var(--ink);
    border: 1px solid var(--line-strong);
}

.sponsor-tab.active {
    /* SYSK3-0027: ink pill (white on #f15b2a is only 3.35:1) */
    background: var(--ink);
    color: var(--color-white);
    border-color: var(--ink);
}

.sponsor-tab:hover:not(.active) {
    border-color: var(--ink);
    color: var(--ink);
}

.sponsor-category {
    display: none;
}

.sponsor-category.active {
    display: block;
}

.sponsors-carousel {
    overflow: hidden;
    padding: 24px 0;
}

.sponsors-track {
    display: flex;
    gap: 48px;
    /* Alpine.js handles carousel movement via :style="trackStyle" */
}

.sponsor-item {
    flex-shrink: 0;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--color-white);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.sponsor-item img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.sponsor-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.sponsor-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

@media (max-width: 768px) {
    .sponsor-item {
        width: 160px;
        height: 160px;
    }

    .sponsors-track {
        gap: 24px;
    }

    .sponsor-tab {
        font-size: 0.875rem;
        padding: 0.625rem 1rem;
    }
}

/* ========================================
   COMPONENTS — PORTFOLIO
   ======================================== */
.portfolio-filter {
    background: var(--color-white);
    color: var(--ink);
    border: 2px solid var(--color-border);
}

.portfolio-filter.active {
    /* SYSK3-0027: ink pill (white on #f15b2a is only 3.35:1) */
    background: var(--ink);
    color: var(--color-white);
    border-color: var(--ink);
}

.portfolio-filter:hover:not(.active) {
    border-color: var(--color-brand);
    color: var(--color-primary); /* AA-safe text on white */
}

.portfolio-item {
    transition: all 0.3s ease;
}

.portfolio-item.hidden {
    display: none;
}

/* ========================================
   COMPONENTS — PRICING
   ======================================== */
.pricing-card {
    transition: all 0.3s ease;
}

.pricing-card:hover {
    transform: translateY(-4px);
}

.pricing-card.recommended {
    position: relative;
}

@media (max-width: 1024px) {
    .pricing-card.recommended {
        transform: none !important;
        border-width: 2px;
    }

    .pricing-card.recommended:hover {
        transform: translateY(-4px) !important;
    }
}

@media (max-width: 768px) {
    .portfolio-filter {
        font-size: 0.875rem;
        padding: 0.625rem 1rem;
    }
}

/* QA remediation: animated sponsor tracks must not contribute to page scroll width.
   NOTE: overflow-x only on html, NOT body — body overflow breaks position:sticky on header. */
html {
    max-width: 100%;
    overflow-x: clip;
}

.sponsors-carousel-container,
.sponsor-category,
.sponsors-carousel {
    max-width: 100%;
    overflow-x: clip;
    contain: paint;
}

/* ========================================
   HOMEPAGE — AREAS OF INTEREST (SYSK3-0025, spec .specs/044)
   Every effect here is decoration: the text is readable with no hover,
   no scroll and no motion. Text sits on opaque dark fills (contrast).
   ======================================== */
.ia-glow {
    background:
        radial-gradient(42rem 28rem at 8% 0%, rgba(241, 91, 42, 0.30), transparent 65%),
        radial-gradient(36rem 26rem at 100% 100%, rgba(202, 76, 39, 0.26), transparent 65%),
        radial-gradient(30rem 20rem at 85% 10%, rgba(248, 164, 134, 0.10), transparent 70%);
    background-size: 140% 140%;
    animation: ia-aurora 22s ease-in-out infinite alternate;
}

.ia-grid-bg {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%);
            mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%);
}

/* live dot in the eyebrow */
.ia-pulse {
    position: relative;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: #f15b2a;
    flex-shrink: 0;
}
.ia-pulse::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #f15b2a;
    animation: ia-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* title: solid brand-orange fallback, a slow shimmer where text clipping exists */
.ia-gradient-text {
    color: #f47d56;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .ia-gradient-text {
        background-image: linear-gradient(100deg, #f15b2a 0%, #f8a486 35%, #ffffff 50%, #f8a486 65%, #f15b2a 100%);
        background-size: 250% 100%;
        -webkit-background-clip: text;
                background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: ia-shimmer 7s ease-in-out infinite;
    }
}

/* big "21" */
.ia-counter__num {
    font-size: clamp(4.5rem, 9vw, 7.5rem);
    line-height: 0.85;
    letter-spacing: -0.04em;
    color: #f15b2a;
    text-shadow: 0 0 40px rgba(241, 91, 42, 0.45);
}

/* tiles */
.ia-tile {
    isolation: isolate;
    background-color: #242423;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
    border: 1px solid rgba(255, 255, 255, 0.10);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
/* spotlight that follows the pointer (--mx / --my set by the Alpine spot() helper) */
.ia-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(14rem circle at var(--mx, 50%) var(--my, 0%), rgba(241, 91, 42, 0.24), transparent 65%);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.ia-tile:hover {
    transform: translateY(-4px);
    border-color: rgba(241, 91, 42, 0.60);
    box-shadow: 0 18px 40px -18px rgba(241, 91, 42, 0.60);
}
.ia-tile:hover::before {
    opacity: 1;
}

.ia-tile__num {
    position: absolute;
    top: 0.75rem;
    right: 0.9rem;
    font-family: var(--font-family-heading);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #9b9b97;
}

.ia-tile__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.875rem;
    color: #f8a486;
    background: rgba(241, 91, 42, 0.14);
    border: 1px solid rgba(241, 91, 42, 0.35);
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.25s ease;
}
.ia-tile:hover .ia-tile__icon {
    color: #0b0c0f; /* ink on the brand fill 5.84:1 (white was 3.35:1) */
    background: #f15b2a;
    transform: rotate(-6deg) scale(1.06);
}

/* ribbon with every area, outlined, sliding sideways */
.ia-marquee {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1.1rem 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    contain: paint;
}
.ia-marquee__track {
    display: flex;
    width: max-content;
    animation: ia-marquee 70s linear infinite;
}
.ia-marquee:hover .ia-marquee__track {
    animation-play-state: paused;
}
.ia-marquee__group {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-right: 1.5rem;
}
.ia-marquee__item {
    font-size: clamp(1.75rem, 4vw, 3.25rem);
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.35);
}
.ia-marquee__item:nth-of-type(6n + 1) {
    color: #f15b2a;
    -webkit-text-stroke: 0;
}
.ia-marquee__star {
    color: #f15b2a;
    font-size: clamp(1rem, 2vw, 1.5rem);
}

/* call-to-action card with a slowly moving gradient border */
.ia-cta {
    background-image: linear-gradient(120deg, #f15b2a, rgba(255, 255, 255, 0.18), #ca4c27, rgba(255, 255, 255, 0.18), #f15b2a);
    background-size: 300% 300%;
    animation: ia-border 10s ease infinite;
    box-shadow: 0 30px 80px -40px rgba(241, 91, 42, 0.55);
}

@keyframes ia-aurora {
    0%   { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}
@keyframes ia-ping {
    75%, 100% { transform: scale(2.4); opacity: 0; }
}
@keyframes ia-shimmer {
    0%, 100% { background-position: 100% 0; }
    50%      { background-position: 0% 0; }
}
@keyframes ia-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes ia-border {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .ia-glow,
    .ia-pulse::after,
    .ia-gradient-text,
    .ia-marquee__track,
    .ia-cta {
        animation: none !important;
    }
    .ia-tile:hover,
    .ia-tile:hover .ia-tile__icon {
        transform: none;
    }
}

/* ========================================
   SYSK3-0027 REDESIGN (2026-10-30) — qwencloud.com-inspired surfaces
   Light canvas, soft pastel glow (brand orange + violet + sky), faint grid.
   Decorative only: text always sits on an opaque white / ink surface.
   NOTE: orange appears only as rgba(241, 91, 42, …) — mapped to the plastica
   blue by the standalone builders' PLASTICA palettes.
   ======================================== */
.hero-glow {
    isolation: isolate;
    background:
        radial-gradient(ellipse 55% 60% at 8% 0%, rgba(241, 91, 42, 0.16), transparent 70%),
        radial-gradient(ellipse 45% 55% at 92% 8%, rgba(167, 139, 250, 0.20), transparent 70%),
        radial-gradient(ellipse 60% 50% at 70% 100%, rgba(56, 189, 248, 0.14), transparent 70%),
        #ffffff;
}

.hero-glow__grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(11, 12, 15, 0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(11, 12, 15, 0.045) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
            mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
}

/* Soft glow inside dark (ink) panels */
.date-panel__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 45% 80% at 0% 0%, rgba(241, 91, 42, 0.28), transparent 70%),
        radial-gradient(ellipse 40% 80% at 100% 100%, rgba(167, 139, 250, 0.22), transparent 70%);
}

/* Section eyebrow (small pill label above a section title) */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-full);
    background: var(--color-white);
    color: var(--ink-soft);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}
.eyebrow::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
    background: var(--brand-500);
}

/* Exhibition-family logo strip: logos sit on white tiles with a hairline */
.brand-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 8.5rem;
    padding: 1.25rem 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
/* lift only when the tile is a link (no false affordance on plain logos) */
.brand-tile:has(a):hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
/* every family logo at the SAME WIDTH (user 2026-10-30); height follows each logo's own proportions */
.brand-tile img {
    width: min(100%, 11rem);
    height: auto;
    object-fit: contain;
}
/* the one exception the user named: automation + robotics keeps a fixed height (portrait mark) */
.brand-tile img.brand-tile__img--fixed-height {
    width: auto;
    height: 4rem;
}

@media (prefers-reduced-motion: reduce) {
    .brand-tile:has(a):hover { transform: none; }
}

/* Exhibition family as a ONE-ROW slider above the footer (SYSK3-0025, user 2026-10-31, spec 044 part D):
   two identical lists slide left by one list width (-50%) and loop without a gap. It stops on hover, on
   keyboard focus and with the pause button (.is-paused, WCAG 2.2.2). */
.brand-slider {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    contain: paint;
}
.brand-slider__track {
    display: flex;
    width: max-content;
    animation: brand-slide 45s linear infinite;
}
.brand-slider:hover .brand-slider__track,
.brand-slider:focus-within .brand-slider__track,
.brand-slider.is-paused .brand-slider__track {
    animation-play-state: paused;
}
.brand-slider__group {
    display: flex;
    gap: 1rem;
    margin: 0;
    padding: 0 1rem 0 0;
    list-style: none;
}
.brand-slider__group > .brand-tile {
    flex: 0 0 13rem;
}
@keyframes brand-slide {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.brand-slider__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0 1.125rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-full);
    background: var(--color-white);
    color: var(--ink);
    font-size: 0.9375rem;
    font-weight: 600;
    transition: border-color var(--transition-fast);
}
.brand-slider__toggle:hover {
    border-color: var(--ink);
}
.brand-slider__toggle:focus-visible {
    outline: 2px solid var(--brand-700);
    outline-offset: 2px;
}
@media (max-width: 640px) {
    .brand-slider__group > .brand-tile {
        flex-basis: 10.5rem;
        min-height: 6.5rem;
        padding: 1rem;
    }
}
/* reduced motion: no movement — a row the visitor can swipe / scroll instead */
@media (prefers-reduced-motion: reduce) {
    .brand-slider {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-mask-image: none;
                mask-image: none;
    }
    .brand-slider__track {
        animation: none;
    }
    .brand-slider__group[aria-hidden="true"],
    .brand-slider__toggle {
        display: none;
    }
    .brand-slider__group > .brand-tile {
        scroll-snap-align: start;
    }
}

/* ==========================================================================
   EXHIBITION BROCHURE BUTTON (SYSK3-0025 part E, user 2026-10-31 «… Dazzle me», spec 044)
   header menu (.brochure-btn--nav) + phone drawer (.brochure-btn--block) · markup: components/header.php
   An ink pill. An orange light circles its border: a conic gradient whose angle is animated through
   @property. An orange icon chip has a soft halo, and its arrow drops on hover. A light band sweeps
   across on hover. All movement stops with prefers-reduced-motion.
   (No space before ':' in selectors: AssetMinifier removes it.)
   ========================================================================== */
@property --brochure-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
.brochure-btn {
    --brochure-angle: 0deg;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 44px;
    min-height: 44px;
    padding: 3px 1.125rem 3px 3px;
    border: 1.5px solid transparent;
    border-radius: var(--radius-full);
    background:
        linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.18) 50%, transparent 62%) padding-box,
        linear-gradient(var(--ink), var(--ink)) padding-box,
        conic-gradient(from var(--brochure-angle), rgba(255, 255, 255, 0.16) 0deg 190deg, var(--brand-500) 270deg, var(--brand-300) 315deg, rgba(255, 255, 255, 0.16) 360deg) border-box;
    background-size: 250% 100%, auto, auto;
    background-position: 100% 0, 0 0, 0 0;
    background-repeat: no-repeat;
    /* Solid ink under the gradient layers: the fallback colour (and the colour contrast checkers read) */
    background-color: var(--ink);
    color: var(--color-white);
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 10px 24px -14px rgba(11, 12, 15, 0.6);
    animation: brochure-orbit 4.5s linear infinite;
    transition: background-position 700ms ease, transform var(--transition-fast), box-shadow 200ms ease;
}
.brochure-btn:hover,
.brochure-btn:focus-visible {
    color: var(--color-white);
    background-position: 0% 0, 0 0, 0 0;
    transform: translateY(-1px);
    box-shadow: 0 14px 30px -12px rgba(241, 91, 42, 0.6);
}
.brochure-btn:focus-visible {
    outline: 2px solid var(--brand-700);
    outline-offset: 3px;
}
.brochure-btn__chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: var(--radius-full);
    background: radial-gradient(circle at 30% 25%, var(--brand-400), var(--brand-600) 62%, var(--brand-700));
    color: var(--color-white);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
/* soft halo that breathes out of the chip */
.brochure-btn__chip::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1.5px solid rgba(241, 91, 42, 0.7);
    animation: brochure-halo 2.8s ease-out infinite;
    pointer-events: none;
}
.brochure-btn__icon {
    width: 1.125rem;
    height: 1.125rem;
}
.brochure-btn__arrow {
    transform-box: fill-box;
    transform-origin: center;
}
.brochure-btn:hover .brochure-btn__arrow,
.brochure-btn:focus-visible .brochure-btn__arrow {
    animation: brochure-drop 0.9s ease-in-out infinite;
}
.brochure-btn__text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    text-align: left;
}
.brochure-btn__label {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: -0.005em;
}
.brochure-btn__meta {
    margin-top: 2px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--brand-300);
}
@keyframes brochure-orbit {
    to { --brochure-angle: 360deg; }
}
@keyframes brochure-halo {
    0%        { transform: scale(0.9); opacity: 0.9; }
    70%, 100% { transform: scale(1.22); opacity: 0; }
}
@keyframes brochure-drop {
    0%, 100% { transform: translateY(-2px); }
    50%      { transform: translateY(2.5px); }
}
/* 1024–1279 px: the full label does not fit the menu row → only the chip (the text stays for screen readers,
   the title attribute names it for mouse users) */
@media (min-width: 1024px) and (max-width: 1279.98px) {
    .brochure-btn--nav {
        gap: 0;
        padding: 3px;
    }
    .brochure-btn--nav .brochure-btn__text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }
}
/* phone drawer: a full-width, taller version */
.brochure-btn--block {
    display: flex;
    width: 100%;
    min-height: 3.5rem;
    padding: 5px 1.25rem 5px 5px;
    gap: 0.875rem;
}
.brochure-btn--block .brochure-btn__chip {
    width: 2.625rem;
    height: 2.625rem;
}
.brochure-btn--block .brochure-btn__label {
    font-size: 1rem;
}
.brochure-btn--block .brochure-btn__meta {
    font-size: 0.75rem;
}
@media (prefers-reduced-motion: reduce) {
    .brochure-btn {
        animation: none;
        transition: none;
    }
    .brochure-btn:hover,
    .brochure-btn:focus-visible {
        transform: none;
    }
    .brochure-btn__chip::before,
    .brochure-btn:hover .brochure-btn__arrow,
    .brochure-btn:focus-visible .brochure-btn__arrow {
        animation: none;
    }
    .brochure-btn__chip::before {
        opacity: 0;
    }
}

/* ==========================================================================
   PRESS MAGAZINE (SYSK3-0027, 2026-10-30) — /typos, /en/press and every article
   pages/press.php · pages/press-single.php · pages/press/_*.php · assets/js/press-magazine.js
   NOTE: never a space before ":" in a selector (AssetMinifier strips it).
   ========================================================================== */
.press-magazine { padding: 0; }

/* ---- toolbar ---- */
.press-toolbar {
    position: relative;
    z-index: 30;
    margin-top: -1.75rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr); /* a grid item's min-content (the chip rows) must not widen the page on a phone */
    gap: 0.875rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: 0 1px 2px rgba(11, 12, 15, 0.04), 0 18px 40px -16px rgba(11, 12, 15, 0.18);
}
@media (min-width: 1024px) {
    .press-toolbar { position: sticky; top: 8.5rem; margin-top: -2.5rem; padding: 1.125rem 1.25rem; } /* below the 122px sticky header */
}
.press-toolbar__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 0; }
.press-search { position: relative; flex: 1 1 18rem; min-width: 0; }
.press-search__icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--color-muted); pointer-events: none; }
.press-search__input {
    width: 100%;
    height: 3rem;
    padding: 0 1rem 0 2.875rem;
    border: 1px solid var(--line-field);
    border-radius: var(--radius-full);
    background: #fff;
    color: var(--ink);
    font-size: 1rem;
}
.press-search__input::placeholder { color: var(--color-muted); opacity: 1; }
.press-search__input:focus { outline: none; border-color: var(--brand-600); box-shadow: 0 0 0 3px rgba(241, 91, 42, 0.28); }
.press-search__submit { height: 3rem; padding: 0 1.25rem; border-radius: var(--radius-full); background: var(--ink); color: #fff; font-weight: 600; }
.press-sort { position: relative; display: flex; align-items: center; }
.press-sort__label { position: absolute; left: 0.875rem; display: flex; color: var(--color-muted); pointer-events: none; }
.press-sort::after {
    content: "";
    position: absolute;
    right: 1rem;
    top: 50%;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid var(--ink-soft);
    border-bottom: 2px solid var(--ink-soft);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}
.press-sort__select {
    height: 3rem;
    padding: 0 2.5rem 0 2.5rem;
    border: 1px solid var(--line-field);
    border-radius: var(--radius-full);
    background: #fff;
    color: var(--ink);
    font-size: 0.9375rem;
    font-weight: 500;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.press-sort__select:focus { outline: none; border-color: var(--brand-600); box-shadow: 0 0 0 3px rgba(241, 91, 42, 0.28); }
.press-views {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    margin-left: auto;
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: var(--radius-full);
}
.press-views__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    border-radius: var(--radius-full);
    color: var(--ink-soft);
    font-size: 0.875rem;
    font-weight: 600;
    transition: background-color 150ms ease, color 150ms ease;
}
.press-views__btn:hover { background: #fff; color: var(--ink); }
.press-views__btn[aria-current="true"] { background: var(--ink); color: #fff; box-shadow: var(--shadow-md); }
@media (max-width: 1279px) {
    .press-views__text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
}
.press-toolbar__filters { display: flex; flex-direction: column; gap: 0.625rem; min-width: 0; }
@media (min-width: 1024px) {
    .press-toolbar__filters { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.75rem 2rem; }
}
.press-chips {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    padding: 0.125rem;
    margin: -0.125rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.press-chips::-webkit-scrollbar { display: none; }
.press-chips__label { flex: none; margin-right: 0.25rem; font-size: 0.8125rem; font-weight: 700; color: var(--color-muted); }
.press-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    height: 2.25rem;
    padding: 0 0.875rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-full);
    background: #fff;
    color: var(--ink-soft);
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.press-chip:hover { border-color: var(--ink-soft); color: var(--ink); }
.press-chip[aria-current="true"] { background: var(--brand-500); border-color: var(--brand-500); color: var(--ink); font-weight: 700; }
.press-toolbar__status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--line);
}
.press-count { margin: 0; font-size: 0.875rem; font-weight: 500; color: var(--color-muted); }
.press-reset { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2rem; font-size: 0.875rem; font-weight: 600; color: var(--color-link); }

/* ---- feed: one set of cards, four layouts ---- */
.press-feed { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-top: 2rem; }
@media (min-width: 768px) {
    .press-feed[data-view="magazine"],
    .press-feed[data-view="grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .press-feed[data-view="magazine"] .press-card[data-size="xl"] { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
    .press-feed { gap: 1.5rem; }
    .press-feed[data-view="magazine"] { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: dense; }
    .press-feed[data-view="magazine"] .press-card { grid-column: span 4; }
    .press-feed[data-view="magazine"] .press-card[data-size="xl"] { grid-column: span 8; grid-row: span 2; }
    .press-feed[data-view="grid"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- card ---- */
.press-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: 0 1px 2px rgba(11, 12, 15, 0.04);
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.press-card:hover { z-index: 5; transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-lg); }
.press-card:focus-within { z-index: 6; }
.press-card__cover { position: relative; display: block; overflow: hidden; border-radius: calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px) 0 0; }
.press-card__body { display: flex; flex: 1; flex-direction: column; gap: 0.625rem; padding: 1.25rem 1.375rem; }
.press-card__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem; margin: 0; font-size: 0.8125rem; font-weight: 600; line-height: 1.4; color: var(--color-muted); }
.press-card__dot { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--brand-500); box-shadow: 0 0 0 3px rgba(241, 91, 42, 0.22); }
.press-card__title { margin: 0; font-size: 1.1875rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; color: var(--ink); }
.press-card__title a {
    color: inherit;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 2px;
    transition: background-size 250ms ease;
}
.press-card__title a:hover { color: inherit; background-size: 100% 2px; }
/* the whole card opens the article; the share menu and "read" link sit above this layer */
.press-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.press-card__excerpt {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-muted);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.press-card__topics { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.press-card__topics li { padding: 0.25rem 0.625rem; border-radius: var(--radius-full); background: var(--canvas); color: var(--ink-soft); font-size: 0.75rem; font-weight: 600; line-height: 1.4; }
.press-card__actions {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--line);
}
.press-card__more { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; font-size: 0.9375rem; font-weight: 600; color: var(--color-link); }
.press-card__more svg { transition: transform 200ms ease; }
.press-card:hover .press-card__more svg { transform: translateX(3px); }

/* ---- cover (decorative typography on brand art — no stock photos) ---- */
.press-cover {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    isolation: isolate;
    container-type: inline-size;
}
.press-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(currentColor 1px, transparent 1.5px);
    background-size: 18px 18px;
    opacity: 0.12;
}
.press-cover__art {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: url("../images/hero-bg.jpg");
    background-position: 70% 40%;
    background-size: cover;
    mix-blend-mode: luminosity;
    opacity: 0.2;
    -webkit-mask-image: linear-gradient(110deg, transparent 20%, #000 85%);
    mask-image: linear-gradient(110deg, transparent 20%, #000 85%);
}
.press-cover--ink { background: radial-gradient(90% 120% at 100% 0%, rgba(241, 91, 42, 0.4), transparent 60%), var(--ink); color: #fff; }
.press-cover--brand { background: radial-gradient(90% 120% at 100% 0%, rgba(255, 255, 255, 0.3), transparent 55%), var(--brand-500); color: var(--ink); }
.press-cover--light { background: radial-gradient(90% 120% at 100% 0%, var(--brand-200), transparent 60%), var(--brand-50); color: var(--ink); }
.press-cover__month {
    position: absolute;
    top: 1rem;
    left: 1rem;
    display: inline-flex;
    align-items: center;
    height: 1.75rem;
    padding: 0 0.75rem;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.press-cover--brand .press-cover__month { background: var(--ink); color: #fff; }
.press-cover--light .press-cover__month { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(11, 12, 15, 0.08); }
.press-cover__year {
    position: absolute;
    right: -0.02em;
    bottom: -0.2em;
    font-size: 7rem;
    font-size: 44cqw;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.06em;
    color: transparent;
    -webkit-text-stroke: 2px var(--brand-500);
    transition: transform 400ms ease;
}
.press-cover--brand .press-cover__year { -webkit-text-stroke-color: var(--ink); }
.press-cover--light .press-cover__year { -webkit-text-stroke-color: var(--brand-600); }
.press-card:hover .press-cover__year { transform: translateX(-4px) scale(1.03); }
.press-cover__mark { position: absolute; left: 1rem; bottom: 1rem; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.32em; opacity: 0.75; }

/* ---- magazine sizes ---- */
.press-feed[data-view="magazine"] .press-card[data-size="md"] .press-cover { aspect-ratio: 2.2 / 1; }
.press-feed[data-view="magazine"] .press-card[data-size="md"] .press-card__excerpt { -webkit-line-clamp: 2; }
@media (min-width: 768px) {
    /* the cover story: ink card, art fills it, text on a dark gradient */
    .press-feed[data-view="magazine"] .press-card[data-size="xl"] { justify-content: flex-end; min-height: 32rem; background: var(--ink); border-color: var(--ink); color: #fff; }
    .press-feed[data-view="magazine"] .press-card[data-size="xl"] .press-card__cover { position: absolute; inset: 0; border-radius: inherit; }
    .press-feed[data-view="magazine"] .press-card[data-size="xl"] .press-cover {
        height: 100%;
        aspect-ratio: auto;
        background: radial-gradient(70% 80% at 92% 8%, rgba(241, 91, 42, 0.6), transparent 60%), radial-gradient(60% 60% at 0% 0%, rgba(241, 91, 42, 0.14), transparent 70%), var(--ink);
        color: #fff;
    }
    .press-feed[data-view="magazine"] .press-card[data-size="xl"] .press-cover__art { opacity: 0.28; }
    .press-feed[data-view="magazine"] .press-card[data-size="xl"] .press-cover__year { top: 1.5rem; right: 1.25rem; bottom: auto; font-size: 30cqw; -webkit-text-stroke: 2px var(--brand-500); }
    .press-feed[data-view="magazine"] .press-card[data-size="xl"] .press-cover__month { top: 1.5rem; left: 2.25rem; background: var(--brand-500); color: var(--ink); }
    .press-feed[data-view="magazine"] .press-card[data-size="xl"] .press-cover__mark { display: none; }
    .press-feed[data-view="magazine"] .press-card[data-size="xl"] .press-card__cover::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(11, 12, 15, 0) 25%, rgba(11, 12, 15, 0.82) 58%, rgba(11, 12, 15, 0.97) 100%);
    }
    .press-feed[data-view="magazine"] .press-card[data-size="xl"] .press-card__body { position: relative; flex: none; gap: 0.875rem; max-width: 48rem; padding: 2rem 2.25rem 1.75rem; }
    .press-feed[data-view="magazine"] .press-card[data-size="xl"] .press-card__kicker { color: rgba(255, 255, 255, 0.8); }
    .press-feed[data-view="magazine"] .press-card[data-size="xl"] .press-card__title { font-size: clamp(1.75rem, 2.8vw, 2.625rem); line-height: 1.1; letter-spacing: -0.03em; color: #fff; text-wrap: balance; }
    .press-feed[data-view="magazine"] .press-card[data-size="xl"] .press-card__excerpt { font-size: 1.0625rem; color: rgba(255, 255, 255, 0.82); }
    .press-feed[data-view="magazine"] .press-card[data-size="xl"] .press-card__topics li { background: rgba(255, 255, 255, 0.12); color: #fff; }
    .press-feed[data-view="magazine"] .press-card[data-size="xl"] .press-card__actions { border-top-color: rgba(255, 255, 255, 0.16); }
    .press-feed[data-view="magazine"] .press-card[data-size="xl"] .press-card__more { color: var(--brand-400); }
    .press-feed[data-view="magazine"] .press-card[data-size="xl"] .press-share__toggle { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.3); color: #fff; }
    .press-feed[data-view="magazine"] .press-card[data-size="xl"] .press-share__toggle:hover { background: #fff; border-color: #fff; color: var(--ink); }
}

/* ---- list view ---- */
.press-feed[data-view="list"] { gap: 1rem; }
.press-feed[data-view="list"] .press-card__excerpt { -webkit-line-clamp: 2; }
@media (max-width: 767px) {
    .press-feed[data-view="list"] .press-card__cover { display: none; }
}
@media (min-width: 768px) {
    .press-feed[data-view="list"] .press-card { flex-direction: row; }
    .press-feed[data-view="list"] .press-card__cover { flex: none; width: 15rem; border-radius: calc(var(--radius-xl) - 1px) 0 0 calc(var(--radius-xl) - 1px); }
    .press-feed[data-view="list"] .press-cover { height: 100%; min-height: 11rem; aspect-ratio: auto; }
    .press-feed[data-view="list"] .press-card__body { padding: 1.25rem 1.5rem; }
    .press-feed[data-view="list"] .press-card__title { font-size: 1.3125rem; }
}

/* ---- timeline view ---- */
.press-feed[data-view="timeline"] { position: relative; gap: 1.5rem; padding-left: 2rem; }
.press-feed[data-view="timeline"]::before {
    content: "";
    position: absolute;
    top: 0.5rem;
    bottom: 0.5rem;
    left: 0.5rem;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--brand-500), var(--line-strong));
}
.press-feed[data-view="timeline"] .press-card__cover { display: none; }
.press-feed[data-view="timeline"] .press-card::before {
    content: "";
    position: absolute;
    top: 1.5rem;
    left: -31px;
    width: 1rem;
    height: 1rem;
    border: 3px solid var(--brand-500);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 4px var(--canvas);
}
@media (min-width: 1024px) {
    .press-feed[data-view="timeline"] { padding-left: 11rem; }
    .press-feed[data-view="timeline"]::before { left: 9rem; }
    .press-feed[data-view="timeline"] .press-card::before { left: -39px; }
    .press-feed[data-view="timeline"] .press-card::after {
        content: attr(data-year);
        position: absolute;
        top: 0.875rem;
        right: calc(100% + 3.5rem);
        font-size: 2.75rem;
        font-weight: 900;
        line-height: 1;
        letter-spacing: -0.04em;
        color: transparent;
        -webkit-text-stroke: 1.5px var(--brand-600);
    }
    .press-feed[data-view="timeline"] .press-card__body { padding: 1.5rem 1.75rem; }
    .press-feed[data-view="timeline"] .press-card__title { font-size: 1.375rem; }
    .press-feed[data-view="timeline"] .press-card__excerpt { -webkit-line-clamp: 4; max-width: 60rem; }
}

/* ---- share menu (cards) ---- */
.press-share { position: relative; }
.press-share__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.75rem;
    padding: 0 1rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-full);
    background: #fff;
    color: var(--ink-soft);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}
.press-share__toggle:hover,
.press-share__toggle[aria-expanded="true"] { border-color: var(--ink); color: var(--ink); }
.press-share__menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    z-index: 40;
    width: 15.5rem;
    padding: 0.5rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 48px -12px rgba(11, 12, 15, 0.3);
}
.press-share__menu--right { right: 0; }
.press-share__menu--left { left: 0; }
.press-share__list { display: grid; gap: 0.125rem; margin: 0; padding: 0; list-style: none; }
.press-share__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 2.75rem;
    padding: 0 0.75rem;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--ink);
    font-size: 0.9375rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}
.press-share__item:hover,
.press-share__item:focus-visible { background: var(--canvas); color: var(--ink); }
.press-share__item svg { flex: none; color: var(--brand-700); }
.press-share__status { margin: 0; padding: 0.375rem 0.75rem 0.25rem; font-size: 0.8125rem; color: var(--brand-700); }
.press-share__status:empty { display: none; }

/* ---- empty state + journalist contact ---- */
.press-empty { margin-top: 2rem; padding: 3.5rem 1.5rem; text-align: center; background: #fff; border: 1px dashed var(--line-strong); border-radius: var(--radius-xl); }
.press-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--brand-50); color: var(--brand-700); }
.press-empty__title { margin: 1rem 0 0.5rem; font-size: 1.375rem; font-weight: 700; }
.press-empty__text { max-width: 32rem; margin: 0 auto 1.5rem; color: var(--color-muted); }
.press-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    margin-top: 4rem;
    padding: 2rem;
    border-radius: var(--radius-xl);
    background: radial-gradient(80% 140% at 100% 0%, rgba(241, 91, 42, 0.32), transparent 60%), var(--ink);
    color: #fff;
}
.press-contact--flush { margin-top: 0; }
@media (min-width: 768px) {
    .press-contact { flex-direction: row; align-items: center; justify-content: space-between; padding: 2.5rem 3rem; }
}
.press-contact__kicker { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 0.5rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; color: var(--brand-400); }
.press-contact__title { margin: 0; font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 800; color: #fff; }
.press-contact__text { max-width: 36rem; margin: 0.5rem 0 0; color: rgba(255, 255, 255, 0.82); }
.press-contact__cta { flex: none; }

/* ---- article page ---- */
.press-progress { position: fixed; top: 0; right: 0; left: 0; z-index: 60; height: 3px; pointer-events: none; }
.press-progress__bar { display: block; height: 100%; background: linear-gradient(90deg, var(--brand-500), var(--brand-300)); transform: scaleX(0); transform-origin: 0 50%; }
.press-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 0;
    background: radial-gradient(70% 90% at 92% 0%, rgba(241, 91, 42, 0.3), transparent 60%), radial-gradient(50% 60% at 0% 100%, rgba(241, 91, 42, 0.1), transparent 70%), var(--ink);
    color: #fff;
}
.press-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1.5px);
    background-size: 22px 22px;
    opacity: 0.12;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
    mask-image: linear-gradient(180deg, #000, transparent 85%);
}
.press-hero__numeral {
    position: absolute;
    right: -0.04em;
    bottom: -0.2em;
    z-index: -1;
    font-size: clamp(9rem, 26vw, 24rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.06em;
    color: transparent;
    -webkit-text-stroke: 2px rgba(241, 91, 42, 0.5);
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}
.press-hero__inner { position: relative; max-width: 80rem; margin: 0 auto; padding: 2.5rem 1rem 3rem; }
@media (min-width: 640px) { .press-hero__inner { padding: 3rem 1.5rem 3.5rem; } }
@media (min-width: 1024px) { .press-hero__inner { padding: 3.5rem 2rem 4.5rem; } }
.press-hero__crumbs ol { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 2rem; padding: 0; list-style: none; font-size: 0.875rem; color: rgba(255, 255, 255, 0.72); }
.press-hero__crumbs a { color: rgba(255, 255, 255, 0.88); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.3); text-underline-offset: 3px; }
.press-hero__crumbs a:hover { color: #fff; text-decoration-color: currentColor; }
.press-hero__crumb-current { max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.press-hero__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 1.25rem; font-size: 0.9375rem; font-weight: 700; color: var(--brand-400); }
.press-hero__title { max-width: 58rem; margin: 0; font-size: clamp(2rem, 4.6vw, 3.75rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; color: #fff; text-wrap: balance; }
.press-hero__dek { max-width: 46rem; margin: 1.5rem 0 0; font-size: clamp(1.0625rem, 1.6vw, 1.25rem); line-height: 1.6; color: rgba(255, 255, 255, 0.84); }
.press-hero__topics { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.press-hero__topics a {
    display: inline-flex;
    align-items: center;
    height: 2.25rem;
    padding: 0 0.875rem;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.press-hero__topics a:hover { background: var(--brand-500); border-color: var(--brand-500); color: var(--ink); }

.press-sharebar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-top: 2rem; }
.press-sharebar__label { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.875rem; font-weight: 600; }
.press-sharebar__list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.press-sharebar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}
.press-sharebar__btn:hover { transform: translateY(-2px); }
.press-sharebar--dark .press-sharebar__label { color: rgba(255, 255, 255, 0.82); }
.press-sharebar--dark .press-sharebar__btn { border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.06); color: #fff; }
.press-sharebar--dark .press-sharebar__btn:hover { border-color: var(--brand-500); background: var(--brand-500); color: var(--ink); }
.press-sharebar--light .press-sharebar__label { color: var(--color-muted); }
.press-sharebar--light .press-sharebar__btn { border-color: var(--line-strong); background: #fff; color: var(--ink-soft); }
.press-sharebar--light .press-sharebar__btn:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.press-sharebar__status { flex-basis: 100%; margin: 0; font-size: 0.875rem; font-weight: 600; }
.press-sharebar__status:empty { display: none; }
.press-sharebar--dark .press-sharebar__status { color: var(--brand-300); }
.press-sharebar--light .press-sharebar__status { color: var(--brand-700); }

.press-article__layout { display: grid; gap: 2.5rem; max-width: 80rem; margin: 0 auto; padding: 3rem 1rem 1rem; }
@media (min-width: 640px) { .press-article__layout { padding: 3.5rem 1.5rem 1.5rem; } }
@media (min-width: 1024px) {
    .press-article__layout { grid-template-columns: minmax(0, 1fr) 18rem; gap: 4rem; padding: 4.5rem 2rem 2rem; }
    .press-article__aside { position: sticky; top: 9rem; }
}
.press-article__aside { align-self: start; }
.press-facts { padding: 1.5rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }
.press-facts dl { display: grid; gap: 1rem; margin: 0; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.press-facts dt { font-size: 0.8125rem; font-weight: 500; color: var(--color-muted); }
.press-facts dd { margin: 0.125rem 0 0; font-size: 1rem; font-weight: 700; color: var(--ink); }
.press-facts .press-sharebar { margin-top: 1.25rem; }
.press-facts__back { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; margin-top: 1rem; font-weight: 600; color: var(--color-link); }

.press-prose { max-width: 44rem; font-size: 1.125rem; line-height: 1.75; color: var(--ink-soft); }
@media (max-width: 639px) { .press-prose { font-size: 1.0625rem; } }
.press-prose p { margin: 0 0 1.4em; line-height: inherit; }
.press-prose > p:first-of-type::first-letter { float: left; margin: 0.06em 0.12em 0 0; font-size: 4.2em; font-weight: 800; line-height: 0.82; color: var(--brand-600); }
.press-prose h3 { position: relative; margin: 2.25em 0 0.75em; padding-left: 1rem; font-size: 1.375rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); }
.press-prose h3::before { content: ""; position: absolute; top: 0.2em; bottom: 0.2em; left: 0; width: 4px; border-radius: 4px; background: var(--brand-500); }
.press-prose strong { font-weight: 700; color: var(--ink); }
.press-prose a { color: var(--color-link); text-decoration: underline; text-decoration-color: rgba(166, 63, 32, 0.4); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.press-prose a:hover { color: var(--color-link-hover); text-decoration-color: currentColor; }
.press-prose ul,
.press-prose ol { margin: 0 0 1.4em; padding-left: 0; }
.press-prose ul { list-style: none; }
.press-prose ul > li { position: relative; margin-bottom: 0.5em; padding-left: 1.5rem; }
.press-prose ul > li::before { content: ""; position: absolute; top: 0.7em; left: 0.25rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--brand-500); }
.press-prose ol { padding-left: 1.5rem; list-style: decimal; }
.press-prose ol > li { margin-bottom: 0.5em; padding-left: 0.25rem; }
.press-prose ol > li::marker { font-weight: 700; color: var(--brand-700); }
.press-prose figure { margin: 2em 0; }
.press-prose figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.press-prose figcaption { margin-top: 0.75rem; font-size: 0.9375rem; color: var(--color-muted); }
.press-prose sup { font-size: 0.65em; }

.press-pager { display: grid; gap: 1rem; max-width: 80rem; margin: 2rem auto 0; padding: 0 1rem 3.5rem; }
@media (min-width: 640px) { .press-pager { grid-template-columns: 1fr 1fr; padding: 0 1.5rem 4rem; } }
@media (min-width: 1024px) { .press-pager { padding: 0 2rem 5rem; } }
.press-pager__link {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    color: var(--ink);
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.press-pager__link:hover { transform: translateY(-2px); border-color: var(--ink); box-shadow: var(--shadow-lg); color: var(--ink); }
.press-pager__link--older { align-items: flex-end; text-align: right; }
.press-pager__dir { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 600; color: var(--color-muted); }
.press-pager__title { font-size: 1.125rem; font-weight: 700; line-height: 1.35; }

.press-related { padding: 4rem 0; background: #fff; border-top: 1px solid var(--line); }
.press-related__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.press-related__title { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -0.02em; }
.press-related__all { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; font-weight: 600; color: var(--color-link); }
.press-related__list { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .press-related__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.press-mini__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    color: var(--ink);
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.press-mini__link:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); color: var(--ink); }
.press-mini__body { display: flex; flex-direction: column; gap: 0.375rem; padding: 1.125rem 1.25rem 1.375rem; }
.press-mini__date { font-size: 0.8125rem; font-weight: 600; color: var(--color-muted); }
.press-mini__title { font-size: 1.0625rem; font-weight: 700; line-height: 1.35; }
.press-notfound__code { margin: 0; font-size: clamp(5rem, 14vw, 8rem); font-weight: 900; line-height: 1; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 2px var(--brand-600); }

@media (prefers-reduced-motion: reduce) {
    .press-card,
    .press-card:hover,
    .press-pager__link:hover,
    .press-mini__link:hover,
    .press-sharebar__btn:hover,
    .press-card:hover .press-cover__year,
    .press-card:hover .press-card__more svg { transform: none; transition: none; }
    .press-card__title a { transition: none; }
}

@media print {
    .press-progress,
    .press-hero__crumbs,
    .press-hero__topics,
    .press-hero__numeral,
    .press-sharebar,
    .press-article__aside,
    .press-pager,
    .press-related,
    .press-contact,
    [data-testid="main-header"],
    [data-testid="main-footer"] { display: none !important; }
    .press-hero { background: none !important; color: #000; }
    .press-hero::before { display: none; }
    .press-hero__kicker { color: #444; }
    .press-hero__title,
    .press-hero__dek { color: #000; }
    .press-article__layout { display: block; padding: 0; }
    .press-prose { max-width: none; font-size: 12pt; color: #000; }
    .press-prose a::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #444; }
}