@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap");

@import url("reset/reset-S_J5ii1.css");
@import url("include/cookie-banner-3TdtAvu.css");
@import url("include/nav-rdQYY7Q.css");
@import url("include/footer-M8i8j3Q.css");
@import url("include/flashes-ugFIN_e.css");
@import url("pages/home/home-yaQXko_.css");
@import url("pages/biography/biography-yLavtMk.css");
@import url("pages/fundation/fundation-W6jP_sO.css");
@import url("pages/history-legacy/history-legacy-9LxlN3C.css");
@import url("pages/projects/projects-K3fP1cq.css");
@import url("pages/projects/project/project-EMjrXjT.css");
@import url("pages/publications/publications-c5EIzdG.css");
@import url("pages/publications/publication/publication-i437Y1j.css");
@import url("pages/events/events-JiVii6g.css");
@import url("pages/events/event/event-LNhWutp.css");
@import url("pages/gallery/gallery-2SHes2O.css");
@import url("pages/gallery/album/album-OIicm4j.css");
@import url("pages/contact/contact-4FpXdyT.css");
@import url("form/registration-login-forms-MMq7XHb.css");
@import url("pages/legal/legal-_RknYJ1.css");

/* =========================
   Global Tokens (Palette + Core UI)
   ========================= */
:root {
    /* Brand & accents */
    --color-primary: #002d62; /* brand, headings, base links */
    --color-secondary: #fabd00; /* subtle accents / highlights */
    --color-tertiary: #ad1519; /* small attention accents */

    /* Surfaces */
    --color-bg: #ffffff; /* main background */
    --color-bg-soft: #f6f0e8; /* alternate sections/cards */

    /* Text & lines */
    --color-text: #2b2b2b; /* body text */
    --color-muted: #6b7280; /* meta, captions */
    --color-border: #e5e7eb; /* dividers, input borders */

    /* Links */
    --color-link: var(--color-primary);
    --color-link-hover: var(--color-tertiary);

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;

    /* Shadows (kept subtle and reusable) */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 10px 24px rgba(0, 0, 0, 0.1);

    /* Motion */
    --transition-base: 0.2s ease;

    /* Focus ring (institutional: soft blue) */
    --ring: 2px solid rgba(0, 45, 98, 0.35);

    /* Typography */
    --font-heading: "Merriweather", Georgia, "Times New Roman", serif;
    --font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu,
        Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

    /* Heading Accent */
    --h-accent-w: 4px;
    --h-accent-r: 2px;
    --h-accent-gap: 0.5rem;
}

/* =========================
   Global Base
   ========================= */
html {
    font-size: 100%; /* 16px base */
}

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

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Constrain images and media */
img,
svg,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Global container for page content */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* =========================
   Typography (Institutional)
   ========================= */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--color-primary);
    margin: 0 0 0.65rem 0;
    line-height: 1.2;
    font-weight: 650;
}

h1 {
    font-size: 2.2rem; /* ~35px */
    font-weight: 720;
}

h2 {
    font-size: 1.75rem; /* ~28px */
}

h3 {
    font-size: 1.4rem; /* ~22px */
}

h4 {
    font-size: 1.2rem; /* ~19px */
    font-weight: 600;
}

h5 {
    font-size: 1.05rem; /* ~17px */
    font-weight: 600;
}

h6 {
    font-size: 1rem; /* ~16px */
    font-weight: 600;
}

/* Body text */
p {
    margin: 0 0 1rem 0;
    font-size: 1rem; /* ~16px */
    line-height: 1.7;
    color: var(--color-text);
}

/* NEW: Global text elements (lists, quotes, labels, captions) */
ul,
ol {
    margin: 0 0 1rem 0;
    padding-left: 1.25rem; /* stable indentation */
    color: var(--color-text);
}

li {
    margin: 0.25rem 0;
    line-height: 1.7;
}

blockquote {
    margin: 1.25rem 0;
    padding: 0.85rem 1rem;
    border-left: 4px solid var(--color-secondary);
    background: rgba(246, 240, 232, 0.7); /* matches --color-bg-soft family */
    border-radius: var(--radius-md);
    color: var(--color-text);
}

blockquote p {
    margin: 0;
}

figcaption {
    margin-top: 0.5rem;
    font-size: 0.95rem;
    color: var(--color-muted);
}

label {
    display: inline-block;
    margin-bottom: 0.35rem;
    color: var(--color-text);
}

/* Optional reusable quote class (for highlighted phrases) */
.quote {
    margin: 1.25rem 0;
    padding: 0.85rem 1rem;
    border-left: 4px solid var(--color-secondary);
    background: rgba(246, 240, 232, 0.7);
    border-radius: var(--radius-md);
    color: var(--color-text);
}

.quote__text {
    margin: 0;
    font-style: italic;
    color: var(--color-text);
}

.quote__meta {
    margin-top: 0.5rem;
    font-size: 0.95rem;
    color: var(--color-muted);
}

small,
.muted {
    color: var(--color-muted);
}

/* =========================
   Links
   ========================= */
a {
    color: var(--color-link);
    text-decoration: none;
    transition: color var(--transition-base);
}

a:hover {
    color: var(--color-link-hover);
}

a:focus-visible {
    outline: var(--ring);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Selection color for better UX */
::selection {
    background: var(--color-secondary);
    color: #000;
}

/* Horizontal rule */
hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 1.5rem 0;
}

/* Keep forms consistent */
input,
textarea,
select,
button {
    font-family: var(--font-body);
}

/* NEW: Uniform focus ring for form controls */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible {
    outline: var(--ring);
    outline-offset: 2px;
    border-radius: 6px;
}

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

/* =========================
   Responsive Typography
   ========================= */
@media (max-width: 768px) {
    h1 {
        font-size: 1.95rem; /* ~31px */
    }
    h2 {
        font-size: 1.55rem; /* ~25px */
    }
    h3 {
        font-size: 1.25rem; /* ~20px */
    }
    p {
        font-size: 0.98rem;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 1.75rem; /* ~28px */
    }
    h2 {
        font-size: 1.4rem; /* ~22px */
    }
    h3 {
        font-size: 1.2rem; /* ~19px */
    }
    p {
        font-size: 0.95rem; /* ~15px */
    }
}

/* =========================
   Ultra-small devices (real iPhone viewport)
   ========================= */
@media (max-width: 420px) {
    h1 {
        font-size: 1.65rem; /* ~26px */
    }

    h2 {
        font-size: 1.3rem; /* ~21px */
    }

    h3 {
        font-size: 1.15rem; /* ~18px */
    }

    p {
        font-size: 0.93rem; /* ~14.8px */
    }
}

/* =========================
   Motion Preferences
   ========================= */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================
   Heading Accent (Global)
   - Stable for multiline titles (iOS Safari)
   ========================= */

.heading-accent {
    position: relative;
    display: inline-block;
    padding-left: var(--h-accent-gap);
}

.heading-accent::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15em;
    bottom: 0.15em;
    width: var(--h-accent-w);
    border-radius: var(--h-accent-r);
    background: linear-gradient(
        to bottom,
        var(--color-secondary),
        var(--color-primary)
    );
}

/* Optional: tighter accent gap on small screens (feels more "attached") */
@media (max-width: 480px) {
    :root {
        --h-accent-gap: 0.4rem;
    }
}

/* =========================
   Buttons (Global)
   - CSS-only waterfill hover
   - Stable, performant, institutional
   - HTML structure:
     .btn
       .btn__label
       .btn__fill
   ========================= */
.btn {
    /* Color tokens */
    --btn-ink: var(--color-primary);
    --btn-border: var(--color-primary);
    --btn-fill: var(--color-primary);
    --btn-ink-on-fill: #ffffff;

    /* Sizing */
    --btn-radius: var(--radius-md);
    --btn-border-w: 1.5px;
    --btn-py: 0.75rem;
    --btn-px: 1.5rem;

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: var(--btn-py) var(--btn-px);
    border-radius: var(--btn-radius);
    border: var(--btn-border-w) solid var(--btn-border);

    background: transparent;
    background-clip: padding-box;
    color: var(--btn-ink);

    font-family: var(--font-body);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    user-select: none;

    overflow: hidden;
    transform: translateZ(0); /* prevents sub-pixel gaps */
}

/* Text layer (always above fill) */
.btn__label {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

/* Fill layer (animated) */
.btn__fill {
    position: absolute;
    inset: -1px; /* avoids thin edge gaps */

    background: var(--btn-fill);
    border-radius: calc(var(--btn-radius) + 1px);

    transform: translateY(105%);
    z-index: 1;
    pointer-events: none;

    transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

/* Hover / focus interaction */
.btn:hover .btn__fill,
.btn:focus .btn__fill,
.btn:focus-visible .btn__fill {
    transform: translateY(0);
}

.btn:hover,
.btn:focus,
.btn:focus-visible {
    color: var(--btn-ink-on-fill);
}

/* Focus ring */
.btn:focus-visible {
    outline: var(--ring);
    outline-offset: 2px;
}

/* Press feedback */
.btn:active {
    transform: translateY(1px) translateZ(0);
}

/* Disabled state */
.btn[aria-disabled="true"],
.btn.is-disabled {
    opacity: 0.55;
    pointer-events: none;
    cursor: not-allowed;
}

/* Variants (colors only) */
.btn--secondary {
    --btn-fill: var(--color-secondary);
    --btn-ink-on-fill: #111111;
}

.btn--danger {
    --btn-ink: var(--color-tertiary);
    --btn-border: var(--color-tertiary);
    --btn-fill: var(--color-tertiary);
    --btn-ink-on-fill: #ffffff;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .btn__fill {
        transition: none !important;
    }
}

/* =========================
   CTA Section (Global)
   - Reusable full-width block
   - White base + primary/secondary gradient overlay
   - Centered content + flexible actions row
   ========================= */
.cta-section {
    padding: 3.5rem 0;
    background-color: #ffffff;
    position: relative;
    overflow: hidden;
}

/* Soft gradient overlay (keeps white base) */
.cta-section::before {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        180deg,
        rgba(250, 189, 0, 0.14),
        /* secondary */ rgba(0, 45, 98, 0.14) /* primary */
    );

    pointer-events: none;
}

/* Content wrapper */
.cta-section__inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 820px;
    margin: 0 auto;
}

/* Title */
.cta-section__title {
    margin-bottom: 0.75rem;
    color: var(--color-primary);
}

/* Phrase / quote */
.cta-section__phrase {
    margin: 0.25rem 0 1.25rem;
    font-style: italic;
    color: var(--color-muted);
}

/* Main text */
.cta-section__text {
    margin-bottom: 1.75rem;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text);
}

/* Buttons row */
.cta-section__actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 768px) {
    .cta-section {
        padding: 3rem 0;
    }

    .cta-section__inner {
        padding: 0 1rem;
    }
}

/* =========================================================
   Global background system (Bernarda)
   - Stable approach using pseudo-elements on body
   - More visible background (higher opacity, lighter overlay)
   ========================================================= */
html,
body {
    height: 100%;
}

.site-body {
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
    background: transparent;

    /* JS will animate this variable */
    --bg-pan-y: 0px;
}

/* Background image layer */
.site-body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;

    background-image: url("/images/bg/bernarda-lines-vertical1.png");

    /* IMPORTANT: do NOT repeat, we want to reach the real end of the image */
    background-repeat: no-repeat;

    /* Scale to full width and preserve full height (no cropping) */
    background-size: 100% auto;

    /* IMPORTANT: Y is driven by CSS variable */
    background-position: center var(--bg-pan-y);

    opacity: 0.4;
    filter: saturate(1) contrast(1);
    pointer-events: none;
}

/* Overlay layer to preserve readability */
.site-body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;

    /* Lighter veil so the background shows more */
    background: rgba(251, 247, 242, 0.55);
    pointer-events: none;
}

/* Site content above background layers */
.site-shell {
    position: relative;
    z-index: 2;
}

/* Mobile tweaks: a bit more veil for legibility + performance */
@media (max-width: 768px) {
    .site-body::before {
        opacity: 0.32;
    }

    .site-body::after {
        background: rgba(251, 247, 242, 0.66);
    }
}