/* Light, single-column-scroll design: a slate-tinted page, ink headings, azure used for emphasis. The color tokens below are the
   single source of truth; each page's tailwind-config block maps utility names (bg-surface, text-primary…) onto them. */
:root {
    --color-surface: #f8fafc;
    /* The raised surface a hovered card or item is lifted onto. */
    --color-surface-container-low: #ffffff;
    --color-on-surface: #0f172a;
    --color-on-surface-variant: #475569;
    --color-outline-variant: #cbd5e1;
    /* #0868d0 keeps ≥4.5:1 contrast on surface, surface-container-low and primary-container alike. */
    --color-primary: #0868d0;
    --color-on-primary: #ffffff;
    --color-primary-container: #e0efff;
    --color-on-primary-container: #0b4a8a;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--color-surface);
    color: var(--color-on-surface-variant);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Tailwind display utilities would otherwise win over the hidden attribute that main.js toggles. */
[hidden] {
    display: none !important;
}

/* Opacity modifiers (bg-surface/90) don't work on var()-based colors, so the translucent header mixes the token here. */
.header-glass {
    background-color: color-mix(in srgb, var(--color-surface) 80%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

b {
    font-weight: 500;
    color: var(--color-on-surface);
}

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

/* The section the visitor is reading (see observeSections in main.js): its nav line stretches and its label darkens. */
.nav-link.is-active .nav-indicator {
    width: 4rem;
    background-color: var(--color-on-surface);
}

.nav-link.is-active .nav-text {
    color: var(--color-on-surface);
}

/* A list item that lifts onto a raised surface on hover while its siblings recede (large screens, fine pointers only).
   The wash is a pseudo-element behind the content, so the item's own text and links stay above it. */
.lift-item {
    position: relative;
    transition: opacity 150ms ease-out;
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    .lift-item::before {
        content: "";
        position: absolute;
        inset: -1rem -1.5rem;
        z-index: 0;
        border-radius: 0.375rem;
        pointer-events: none;
        transition: background-color 150ms ease-out, box-shadow 150ms ease-out;
    }

    .lift-item:hover::before,
    .lift-item:focus-within::before {
        background-color: var(--color-surface-container-low);
        box-shadow: inset 0 1px 0 0 var(--color-outline-variant), 0 10px 25px -12px color-mix(in srgb, var(--color-on-surface) 25%, transparent);
    }

    .lift-list:hover > .lift-item:not(:hover):not(:focus-within) {
        opacity: 0.5;
    }
}

/* Horizontal gallery on the Griffin case study: no scrollbar (the dots below it navigate), and the step in the middle of the strip shown at full size
   while the others shrink and fade (--focus is set per step by the inline script on that page; 1 when it is unset, so the
   gallery is plain without the script). No snapping while a mouse drag is in progress, so the strip follows the pointer. */
.h-scroll {
    scrollbar-width: none;
}

.h-scroll::-webkit-scrollbar {
    display: none;
}

.h-scroll > li > figure {
    transform: scale(calc(0.8 + 0.2 * var(--focus, 1)));
    opacity: calc(0.45 + 0.55 * var(--focus, 1));
}

.h-scroll.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}