/* ==========================================================================
   base.css — Site-wide element defaults and shared components
   --------------------------------------------------------------------------
   Anything here applies to EVERY page. Page-specific rules belong in that
   page's own stylesheet (about.css, index.css, experience.css).

   Load order: tokens.css → base.css → <page>.css

   THEME: Garnet & Brass. Serif display type, sans body.
     brass  = decorative (borders, rules, bullets, glows)
     garnet = active     (links, buttons, eyebrow labels)
   Keep that distinction — it's the main thing holding the design together.
   ========================================================================== */

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

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
}

/* <main> holds all page content. Stated explicitly because css/style.css puts
   a dark background somewhere up the tree — that's what produced dark-navy
   body copy on a dark-navy panel on About. Sections that want dark opt in
   with .on-dark or their own background. */
main {
    background-color: var(--color-bg);
    color: var(--color-text);
}

img {
    max-width: 100%;
    display: block;
}

/* Display type is serif across the site. Page stylesheets override sizes,
   not the family.

   NOTE the explicit `text-transform: none`. css/style.css sets headings to
   uppercase somewhere, and load order alone doesn't fix that: a property a
   later rule never mentions is simply inherited from the earlier one. You have
   to declare it to beat it. Same reason `letter-spacing` is stated here. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    color: var(--color-brand);
    letter-spacing: var(--tracking-tight);
    text-transform: none;
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding-x);
}

.section {
    padding: var(--section-padding-y) 0;
}

.section--tight {
    padding: var(--section-padding-y-sm) 0;
}

.section--surface {
    background-color: var(--color-bg-raised);
}

.section--tinted {
    background: var(--gradient-surface-alt);
}

.section--brand {
    background: var(--gradient-brand);
    color: var(--color-text-inverse);
}

/* --------------------------------------------------------------------------
   Language selector
   Appears on every page, so it lives here. The markup is identical
   everywhere — see js/i18n.js, which wires it up automatically.
   -------------------------------------------------------------------------- */
.lang {
    text-align: right;
    padding: var(--space-3) var(--container-padding-x);
    background: var(--color-bg-raised);
    border-bottom: 1px solid var(--color-border);
}

.lang label {
    margin-right: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    letter-spacing: var(--tracking-wide);
}

.lang select {
    padding: 7px var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xs);
    background: var(--color-bg-raised);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-brand);
}

/* --------------------------------------------------------------------------
   Section headers (centred, with a brass rule)
   -------------------------------------------------------------------------- */
.section-header {
    text-align: center;
    margin-bottom: var(--space-12);
}

.section-header h2 {
    position: relative;
    display: inline-block;
    font-size: var(--text-4xl);
    margin: 0 0 var(--space-4);
    padding-bottom: var(--space-4);
}

.section-header h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: var(--gradient-rule);
}

.section-header p {
    max-width: var(--measure);
    margin: 0 auto;
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Eyebrow label — small uppercase heading above a list
   -------------------------------------------------------------------------- */
.subhead {
    margin: var(--space-5) 0 var(--space-1);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: var(--weight-black);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-action);
}

/* --------------------------------------------------------------------------
   Eyebrow + seal — the "§ SIGNATURE KEYNOTE" / "§ EXECUTIVE ADVISORY" mark
   --------------------------------------------------------------------------
   Promoted here from speaker.css and advisor.php, which had defined it twice
   with slightly different letter-spacing (.22em vs .24em) and gap (10px vs
   11px). Nobody would consciously notice; everybody would feel it.
   -------------------------------------------------------------------------- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: var(--weight-black);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-action);
}

.eyebrow .seal {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1.4px solid var(--color-accent);
    border-radius: var(--radius-round);
    font-family: var(--font-display);
    font-size: 15px;
    line-height: 1;
    color: var(--color-accent);
}

/* On navy, garnet goes muddy — brass reads. */
.on-dark .eyebrow,
.adv-hero .eyebrow {
    color: var(--color-accent-soft);
}

.on-dark .eyebrow .seal,
.adv-hero .eyebrow .seal {
    border-color: var(--color-accent-soft);
    color: var(--color-accent-soft);
}

/* --------------------------------------------------------------------------
   Section label — left-aligned rule that runs to the edge.
   For document-like pages (speaker, advisory). The centred .section-header
   above is for the brochure-like ones.
   -------------------------------------------------------------------------- */
.lbl {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.lbl .t,
.lbl .txt {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: var(--weight-black);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-action);
    white-space: nowrap;
}

.lbl .r,
.lbl .rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--color-accent) 0%, transparent 92%);
}

.on-dark .lbl .t,
.on-dark .lbl .txt {
    color: var(--color-accent-soft);
}

/* --------------------------------------------------------------------------
   Section title — the big serif heading inside a band
   -------------------------------------------------------------------------- */
.stitle {
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.12;
    letter-spacing: var(--tracking-tight);
    color: var(--color-brand);
}

.on-dark .stitle { color: var(--color-text-inverse); }

/* --------------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------------
   NOTE: about.php previously defined its own unscoped `.card` with a
   different border, radius and shadow. Two definitions of one class name is
   how you get a design that drifts. This is the only `.card` now — the
   about.php version won, since that design is canonical.
   -------------------------------------------------------------------------- */
.card {
    background: var(--color-bg-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 38px var(--space-8);
    text-align: left;
    transition:
        transform var(--duration-base) var(--ease),
        box-shadow var(--duration-base) var(--ease),
        border-color var(--duration-base) var(--ease);
}

.card:hover {
    transform: var(--lift-md);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--color-accent-soft);
}

.card h3 {
    font-size: var(--text-xl);
    margin: 0 0 var(--space-2);
}

.card > p {
    color: var(--color-text-body);
    font-size: var(--text-md);
    line-height: var(--leading-card);
    margin: 0 0 var(--space-4);
}

/* Card modifiers */
.card--wide {
    grid-column: 1 / -1;
}

/* --------------------------------------------------------------------------
   .card--list — the reference-list card (hairline separators, § markers)
   --------------------------------------------------------------------------
   Deliberately a MODIFIER, not the .card default. Other pages put lists
   inside cards with their own markers (◆ on experience.php's education
   cards), and if these rules applied to every .card they'd fight over
   ::before at equal specificity — whichever stylesheet happened to load last
   would win. Opting in avoids that entirely.
   -------------------------------------------------------------------------- */
.card--list img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-5);
}

.card--list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.card--list li {
    position: relative;
    padding: 11px 0 11px var(--space-6);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
}

.card--list li:last-child {
    border-bottom: none;
}

.card--list li::before {
    content: "\00A7";              /* § */
    position: absolute;
    left: 0;
    top: 11px;
    color: var(--color-accent);
    font-family: var(--font-display);
    font-size: 14px;
}

.card--list li strong {
    color: var(--color-brand);
}

.card--edge-left {
    border-left: 4px solid var(--color-border-strong);
}

.card--edge-top {
    border-top: 4px solid var(--color-border-strong);
}

/* Short garnet rule under a card heading */
.rule {
    width: 44px;
    height: 2px;
    background: var(--color-action);
    margin: 0 0 var(--space-5);
}

/* --------------------------------------------------------------------------
   Links
   -------------------------------------------------------------------------- */
.link,
.card a {
    color: var(--color-action);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--duration-fast) var(--ease);
}

.link:hover,
.link:focus,
.card a:hover,
.card a:focus {
    border-bottom-color: var(--color-action);
}

/* For links on a dark background */
.link--inverse {
    color: var(--color-accent-soft);
}

.link--inverse:hover,
.link--inverse:focus {
    border-bottom-color: var(--color-accent-soft);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-block;
    padding: 14px var(--space-8);
    background: var(--gradient-accent);
    color: var(--color-text-inverse);
    font-family: var(--font-body);
    font-weight: var(--weight-semibold);
    font-size: var(--text-lg);
    text-decoration: none;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-accent);
    transition:
        transform var(--duration-base) var(--ease),
        box-shadow var(--duration-base) var(--ease),
        background var(--duration-base) var(--ease);
}

.btn:hover,
.btn:focus {
    transform: var(--lift-sm);
    box-shadow: var(--shadow-accent-hover);
    background: var(--gradient-accent-hover);
}

/* Outline alternative — for secondary actions beside a primary .btn. */
.btn--secondary {
    background: transparent;
    color: var(--color-text-inverse);
    border: 1px solid var(--color-accent-soft);
    box-shadow: none;
}

.btn--secondary:hover,
.btn--secondary:focus {
    background: rgba(176, 141, 79, 0.15);
    border-color: var(--color-accent);
    box-shadow: none;
}

/* Outline on a light background */
.btn--ghost {
    background: transparent;
    color: var(--color-action);
    border: 1px solid var(--color-action);
    box-shadow: none;
}

.btn--ghost:hover,
.btn--ghost:focus {
    background: var(--color-action);
    color: var(--color-text-inverse);
    box-shadow: none;
}

.btn--sm {
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-md);
}

/* --------------------------------------------------------------------------
   Pills / badges
   -------------------------------------------------------------------------- */
.pill {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    border-radius: 25px;
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
}

.pill--accent {
    color: var(--color-accent);
    background: rgba(176, 141, 79, 0.12);
}

.pill--brand {
    background: var(--gradient-brand);
    color: var(--color-text-inverse);
}

.pill--outline {
    background: var(--color-bg-raised);
    border: 1px solid var(--color-border);
    color: var(--color-brand);
    transition:
        border-color var(--duration-base) var(--ease),
        background-color var(--duration-base) var(--ease);
}

.pill--outline:hover {
    border-color: var(--color-accent);
    background: rgba(176, 141, 79, 0.08);
}

/* --------------------------------------------------------------------------
   Accessibility helpers
   -------------------------------------------------------------------------- */

/* Visible keyboard focus. Never remove without a replacement. */
a:focus-visible,
button:focus-visible,
select:focus-visible {
    outline: 2px solid var(--color-action);
    outline-offset: 2px;
}

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

/* --------------------------------------------------------------------------
   Motion preferences — site-wide. Keep last so it wins.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
    body {
        background: #fff;
        color: #000;
    }

    .card,
    .section {
        box-shadow: none;
        break-inside: avoid;
    }

    .btn,
    .lang,
    .cta-section,
    .video-container {
        display: none;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        word-break: break-all;
    }
}