/* Crimson Pro + Atkinson Hyperlegible, with Fraunces/Inter retained for older inline overrides. */
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Crimson+Pro:ital,wght@0,400..700;1,400..700&family=Fraunces:ital,opsz,wght,SOFT@0,9..144,400..700,0..100;1,9..144,400..700,0..100&family=Inter:wght@400;500;600;700&display=swap');

/*
 * Arina Zhurakovskaia — brand tokens (psych-student fork)
 * Direction: portrait-led academic applicant portfolio.
 */

:root,
[data-theme="dark"] {
    --bg: #0D1424;
    --bg-elevated: #171F33;
    --bg-deep: #080C16;

    --text: #F5F0E6;
    --text-soft: #C9C3B5;
    --text-muted: #8A8778;

    --accent: #C9A094;
    --accent-soft: #7D8F83;

    --border: #2A3349;
    --focus: #D4B59E;

    /* template-kit compatibility shims */
    --color-accent: var(--accent);
    --color-accent-hover: #D4B59E;
    --color-accent-light: #E0C4B8;
    --bg-body: var(--bg);
    --bg-surface: var(--bg-elevated);
    --bg-surface-alt: var(--bg-deep);
    --bg-hero: var(--bg);
    --text-muted-rgb: 138 135 120;
}

[data-theme="light"] {
    --bg: #F8F4EC;
    --bg-elevated: #FFFFFF;
    --bg-deep: #EFE9DE;

    --text: #1E2A3A;
    --text-soft: #455268;
    --text-muted: #7A8597;

    --accent: #B8755A;
    --accent-soft: #6B7F73;

    --border: #D9CFBF;
    --focus: #A56548;

    --color-accent: var(--accent);
    --color-accent-hover: #A56548;
    --color-accent-light: #C48670;
    --bg-body: var(--bg);
    --bg-surface: var(--bg-elevated);
    --bg-surface-alt: var(--bg-deep);
    --bg-hero: var(--bg);
    --text-muted-rgb: 122 133 151;
}

:root,
[data-theme="dark"] {
    --font-heading: 'Crimson Pro', Georgia, 'Times New Roman', serif;
    --font-body: 'Atkinson Hyperlegible', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --bg: #111111;
    --bg-elevated: #1A1916;
    --bg-deep: #080807;

    --paper: #F7F5F0;
    --paper-soft: #ECE7DC;
    --paper-ink: #18181B;
    --paper-muted: #5B6472;

    --text: #FAFAFA;
    --text-soft: #DEDAD1;
    --text-muted: #9EA3AE;

    --accent: #8DB9E2;
    --accent-strong: #2563EB;
    --accent-soft: #9EB58A;
    --accent-warm: #C78F73;

    --border: #34322D;
    --paper-border: #D8D1C4;
    --focus: #8DB9E2;

    --color-accent: var(--accent);
    --color-accent-hover: #B8D9F3;
    --color-accent-light: #CBE4F8;
    --bg-body: var(--bg);
    --bg-surface: var(--bg-elevated);
    --bg-surface-alt: var(--bg-deep);
    --bg-hero: var(--bg);
    --text-muted-rgb: 158 163 174;
}

[data-theme="light"] {
    --font-heading: 'Crimson Pro', Georgia, 'Times New Roman', serif;
    --font-body: 'Atkinson Hyperlegible', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --bg: #FAFAFA;
    --bg-elevated: #FFFFFF;
    --bg-deep: #F0F3F5;

    --paper: #FFFFFF;
    --paper-soft: #F1F4F6;
    --paper-ink: #18181B;
    --paper-muted: #4B5563;

    --text: #18181B;
    --text-soft: #3F3F46;
    --text-muted: #667085;

    --accent: #2563EB;
    --accent-strong: #1D4ED8;
    --accent-soft: #5F7C68;
    --accent-warm: #B8755A;

    --border: #D8DEE6;
    --paper-border: #D8DEE6;
    --focus: #2563EB;

    --color-accent: var(--accent);
    --color-accent-hover: #1D4ED8;
    --color-accent-light: #BFDBFE;
    --bg-body: var(--bg);
    --bg-surface: var(--bg-elevated);
    --bg-surface-alt: var(--bg-deep);
    --bg-hero: var(--bg);
    --text-muted-rgb: 102 112 133;
}

/* Typography — Fraunces (headings, variable serif with SOFT optical size)
 * + Inter (body). Loaded via Google Fonts URL set on SiteSettings. */
body {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.7;
    font-weight: 400;
    background: var(--bg);
    color: var(--text);
}

h1, h2, h3, h4, h5, h6,
.heading {
    font-family: var(--font-heading);
}

h1 { font-size: 3.75rem; line-height: 1.05; font-weight: 600; }
h2 { font-size: 2.5rem;  line-height: 1.15; font-weight: 600; }
h3 { font-size: 1.5rem;  line-height: 1.3;  font-weight: 500; }

.caption, .eyebrow {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    line-height: 1.4;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

/* Focus ring — mandatory on all interactive elements (brand.md §Accessibility) */
.arina-kicker { margin: 0 0 1.25rem; color: var(--accent); font: 700 0.8125rem/1.4 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; }
.arina-hero { position: relative; overflow: hidden; color: var(--text); background: linear-gradient(90deg, rgba(8, 8, 7, 0.96), rgba(8, 8, 7, 0.82)), var(--bg-deep); }
.arina-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.08; background-image: linear-gradient(var(--text) 1px, transparent 1px); background-size: 100% 3.25rem; }
.arina-hero-inner { position: relative; z-index: 1; width: min(100% - 3rem, 72rem); box-sizing: border-box; min-height: 92vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 27rem); gap: 4rem; align-items: center; padding: 7rem 0 5rem; }
#hero .arina-hero-inner { width: min(100% - 3rem, 72rem) !important; padding-left: 0 !important; padding-right: 0 !important; }
.arina-hero-inner > *, .arina-page-hero-grid > * { min-width: 0; }
.arina-hero-title, .arina-page-title { margin: 0; color: var(--text); font-family: var(--font-heading); font-weight: 600; letter-spacing: 0; overflow-wrap: anywhere; }
.arina-hero-title { max-width: 11ch; font-size: 4.75rem; line-height: 0.95; }
.arina-page-title { max-width: 13ch; font-size: 4rem; line-height: 1; }
.arina-hero-lede, .arina-page-lede { margin: 1.5rem 0 0; color: var(--text-soft); font-family: var(--font-body); line-height: 1.65; overflow-wrap: break-word; }
.arina-hero-lede { max-width: 42rem; font-size: 1.2rem; }
.arina-page-lede { max-width: 40rem; font-size: 1.125rem; }
.arina-hero-actions, .arina-action-row { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; margin-top: 2rem; }
.arina-button, .arina-button-outline { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; border-radius: 0.5rem; padding: 0.9rem 1.2rem; font: 700 0.9375rem/1.3 var(--font-body); text-decoration: none; transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease; }
.arina-button { color: #101010; background: var(--accent); border: 1px solid var(--accent); }
.arina-button-outline { color: var(--text); border: 1px solid rgba(250, 250, 250, 0.28); }
.arina-button:hover, .arina-button-outline:hover { transform: translateY(-1px); }
.arina-button-outline:hover { color: var(--accent); border-color: var(--accent); }
.arina-portrait-panel { color: var(--paper-ink); background: var(--paper); border: 1px solid var(--paper-border); box-shadow: 0 32px 70px -45px rgba(0, 0, 0, 0.65); }
.arina-portrait-panel img { display: block; width: 100%; height: 100%; min-height: 28rem; object-fit: cover; object-position: 50% 20%; }
.arina-portrait-caption { display: grid; gap: 0.4rem; padding: 1rem 1.15rem; border-top: 1px solid var(--paper-border); font-family: var(--font-body); }
.arina-portrait-caption strong { font-family: var(--font-heading); font-size: 1.25rem; line-height: 1.1; }
.arina-meta-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; max-width: 43rem; margin-top: 2.5rem; }
.arina-meta-item { padding-top: 0.9rem; border-top: 1px solid rgba(250, 250, 250, 0.2); font-family: var(--font-body); }
.arina-meta-item b { display: block; color: var(--text); font-size: 0.95rem; }
.arina-meta-item span { display: block; margin-top: 0.2rem; color: var(--text-muted); font-size: 0.8125rem; line-height: 1.45; }
.arina-page-hero { padding: 8rem 0 5rem; color: var(--text); background: var(--bg-deep); }
.arina-page-hero-grid { width: min(100% - 3rem, 72rem); box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 20rem); gap: 3rem; align-items: center; padding-left: 0; padding-right: 0; }
.arina-page-hero .arina-page-hero-grid { width: min(100% - 3rem, 72rem) !important; padding-left: 0 !important; padding-right: 0 !important; }
#hero.arina-reveal,
.arina-page-hero.arina-reveal {
    opacity: 1;
    transform: none;
}
.arina-paper-card { color: var(--paper-ink); background: var(--paper); border: 1px solid var(--paper-border); box-shadow: 0 24px 55px -42px rgba(0, 0, 0, 0.7); }
.arina-paper-card p, .arina-paper-card li { color: var(--paper-muted); }
.arina-list { list-style: none; padding: 0; margin: 0; }
.arina-list li + li { border-top: 1px solid var(--paper-border); }
.arina-input { width: 100%; min-height: 44px; padding: 0.85rem 1rem; color: var(--text); background: var(--bg-deep); border: 1px solid var(--border); border-radius: 0.5rem; font: 0.95rem/1.45 var(--font-body); }
.arina-input::placeholder { color: var(--text-muted); }
.arina-error { margin-top: 0.4rem; color: #FCA5A5; font-size: 0.875rem; }
[data-theme="light"] .navbar { background-color: rgba(255, 255, 255, 0.92); border-color: var(--border); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
[data-theme="light"] .navbar-brand,
[data-theme="light"] .navbar-brand:hover,
[data-theme="light"] .navbar-nav a,
[data-theme="light"] .theme-toggle,
[data-theme="light"] .navbar-toggle { color: var(--text); }
[data-theme="light"] .navbar-nav a.active { color: #fff !important; background-color: var(--accent-strong); }
[data-theme="light"] .arina-hero { color: var(--text); background: linear-gradient(125deg, #FAFAFA 0%, #F4F7FA 54%, #E8EEF5 100%); }
[data-theme="light"] .arina-hero::before { opacity: 0.55; background-image: linear-gradient(rgba(24, 24, 27, 0.08) 1px, transparent 1px); }
[data-theme="light"] .arina-kicker { color: var(--accent-strong); }
[data-theme="light"] .arina-button { color: #fff; background: var(--accent-strong); border-color: var(--accent-strong); }
[data-theme="light"] .arina-button-outline { color: var(--text); border-color: rgba(24, 24, 27, 0.24); background: rgba(255, 255, 255, 0.66); }
[data-theme="light"] .arina-button-outline:hover { color: var(--accent-strong); border-color: var(--accent-strong); }
[data-theme="light"] .arina-meta-item { border-top-color: var(--border); }
[data-theme="light"] .arina-portrait-panel { box-shadow: 0 28px 60px -42px rgba(24, 24, 27, 0.45); }
@media (max-width: 900px) { .arina-hero-inner, .arina-page-hero-grid { grid-template-columns: 1fr; gap: 2rem; } .arina-hero-inner { min-height: auto; padding-top: 6rem; padding-bottom: 4rem; } .arina-portrait-panel img { min-height: 22rem; max-height: 34rem; } .arina-meta-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .arina-hero-title { font-size: 2.85rem; } .arina-page-title { font-size: 2.55rem; } .arina-hero-actions, .arina-action-row { align-items: stretch; flex-direction: column; } .arina-button, .arina-button-outline { width: 100%; } }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

/* Nav hover: underline-draw (300ms cubic-bezier 0.2, 0.8, 0.2, 1) — brand.md §Motion */
nav a {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
nav a:hover,
nav a:focus-visible {
    background-size: 100% 1px;
}
nav a.active {
    color: #101010;
}
.navbar .navbar-nav a.active {
    color: #101010 !important;
}

/* Faint grid texture overlay preserved from her current site (~3% opacity). */
.hero-texture::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.03;
    background-image:
        linear-gradient(var(--text) 1px, transparent 1px),
        linear-gradient(90deg, var(--text) 1px, transparent 1px);
    background-size: 48px 48px;
}

/* Reveal-on-scroll (brand.md §Motion) — fade-up 8px over 300ms.
 * Respects prefers-reduced-motion. Hooks: .reveal class on any section. */
.reveal {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 300ms ease-out, transform 300ms ease-out;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Section-level reveal for the psych-student fork. Paired with the
 * IntersectionObserver in templates/overrides/base.html (extra_js block)
 * which uses rootMargin: '0px 0px 160px 0px' to fire ~160px before the
 * section enters the viewport — so by the time the user scrolls to it,
 * the fade is already complete. 16px translate, 380ms. */
.arina-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 700ms cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
}
.arina-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal.is-visible,
    .arina-reveal,
    .arina-reveal.is-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }
    nav a {
        transition: none;
    }
}

/* Upstream style.css ships no default-hide rule for .mobile-drawer,
 * so the hamburger's drawer renders as a visible block under the main
 * nav at desktop widths. Hide it; keep mobile behaviour via max-height. */
.mobile-drawer {
    display: none;
}
@media (max-width: 768px) {
    .mobile-drawer {
        display: block;
        max-height: 0;
        overflow: hidden;
        transition: max-height 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .mobile-drawer.open {
        max-height: 28rem;
    }
    .mobile-drawer .navbar-nav {
        position: static;
        transform: none;
        flex-direction: column;
        gap: 0;
        padding: 0.5rem 1rem 1rem;
        background: var(--bg-deep);
        border-bottom: 1px solid var(--border, rgba(245, 240, 230, 0.08));
    }
}