/* ═══════════════════════════════════════════════════════════════════════════
   Erosion — stylesheet
   Two brand faces, four brand colours, one container width.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Fonts ───────────────────────────────────────────────────────────────────
   Both prefer a locally installed copy and fall back to the bundled binary.
   Gill Sans was already being downloaded by the old site but never referenced
   by any rule; it now carries the display type. */
@font-face {
    font-family: "Gill Sans";
    src: local("GillSans"), url(/assets/fonts/GillSans.ttc);
    font-display: swap;
}

@font-face {
    font-family: "Iowan Old Style";
    src: local("Iowan"), url(/assets/fonts/Iowan.otf);
    font-display: swap;
}

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
    /* Brand palette — unchanged. */
    --arena: #8e8684;
    --agua: #93cdce;
    --hueso: #daccbf;
    --negro: #005b7f;

    --primaryColor: var(--agua);
    --secondaryColor: var(--hueso);
    --bodyBackgroundColor: #fff;

    /* Semantic text colours. --arena on white is only 3.6:1, below the 4.5:1
       WCAG AA floor for body copy, so it stays decorative (rules, borders) and
       text is drawn from --negro (7.4:1) and a deepened sand (6.0:1). */
    --text: var(--negro);
    --text-soft: #6b625f;
    --hairline: color-mix(in srgb, var(--arena) 26%, transparent);

    --font-display: "Gill Sans", "Gill Sans MT", Optima, Candara, -apple-system,
        BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-body: "Iowan Old Style", Palatino, "Palatino Linotype", Georgia,
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, serif;

    /* One fluid rhythm, so nothing needs a breakpoint to stay sane. */
    --gutter: clamp(1rem, 4vw, 2.5rem);
    --container: 1120px;
    --stack: clamp(3rem, 9vw, 6rem);

    --radius: 14px;
    --radius-lg: 20px;

    --shadow-sm: 0 1px 2px rgb(107 98 95 / 0.08),
        0 4px 16px rgb(107 98 95 / 0.08);
    --shadow-md: 0 2px 4px rgb(107 98 95 / 0.10),
        0 18px 40px rgb(107 98 95 / 0.16);

    min-width: 300px;
}

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

body {
    margin: 0;
    color: var(--text);
    font-family: var(--font-body);
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    line-height: 1.6;
    /* A barely-there warm wash so white sections read as paper, not as a void. */
    background-color: var(--bodyBackgroundColor);
    background-image: linear-gradient(
        180deg,
        #fff 0%,
        color-mix(in srgb, var(--hueso) 15%, #fff) 100%
    );
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
}

/* A single shared measure, used by every band on the page. */
.App-header,
.SectionTitle.container,
.member-list.horizontal,
.map {
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
}

:where(a, [role="button"]):focus-visible,
.member-card .container:focus-visible {
    outline: 3px solid var(--agua);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ── App shell ───────────────────────────────────────────────────────────── */
.App {
    text-align: center;
}

/* Vertical rhythm injected between sibling sections by <Section>. */
.space {
    height: var(--stack);
}

/* ── Header / footer strata ──────────────────────────────────────────────────
   Banded sediment, top to bottom, in the four brand colours — a quiet nod to
   the name. Replaces the flat --hueso slab, and is the only place --negro
   appeared in the palette but nowhere in the old stylesheet.
   `width: 100%` rather than the old `100vw`, which overflowed by the width of
   the scrollbar and produced a horizontal scroll on desktop. */
.header-footer {
    width: 100%;
    height: clamp(56px, 11vh, 104px);
    background-image: linear-gradient(
        to bottom,
        var(--negro) 0 4%,
        var(--agua) 4% 18%,
        color-mix(in srgb, var(--agua) 45%, var(--hueso)) 18% 34%,
        var(--hueso) 34% 74%,
        color-mix(in srgb, var(--hueso) 82%, var(--arena)) 74% 100%
    );
}

/* Mirror the closing band so the page is bookended rather than repeated. */
.App > .header-footer:last-child {
    transform: scaleY(-1);
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.App-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: clamp(300px, 52vh, 540px);
    padding-block: clamp(2.5rem, 7vw, 5rem);
    color: var(--text);
}

.App-logo {
    width: min(560px, 80%);
    max-height: 44vh;
    height: auto;
    object-fit: contain;
    pointer-events: none;
}

/* ── Section title ───────────────────────────────────────────────────────────
   Was an 80%-wide slab with a hard 64px type size and a 20% left margin, which
   overflowed narrow screens and sat off-centre against everything else. Now it
   shares the page measure, scales fluidly, and carries a --negro edge. */
.SectionTitle.container {
    position: relative;
    overflow: hidden;
    background-color: var(--hueso);
    border-radius: var(--radius-lg);
}

.SectionTitle.container::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 10px;
    background-color: var(--negro);
}

.SectionTitle .title {
    margin: 0;
    padding: clamp(1.25rem, 4vw, 2.5rem) clamp(1.5rem, 5vw, 3rem);
    padding-left: calc(10px + clamp(1.5rem, 5vw, 3rem));
    color: var(--negro);
    font-family: var(--font-display);
    font-size: clamp(2rem, 6vw, 3.5rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.015em;
    text-align: left;
}

/* ── Member list ─────────────────────────────────────────────────────────────
   Grid rather than flex + space-around: equal columns, equal heights, and a
   gap that replaces the old 20px spacer <div> after every card. */
.member-list.horizontal {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: clamp(1.25rem, 3vw, 2rem);
    align-items: stretch;
}

/* ── Member card ─────────────────────────────────────────────────────────────
   The whole card is an <A> (a real, keyboard-reachable link) to
   /member/<slug> — not a styled div faking a button. */
.member-card {
    display: flex;
    min-width: 0;
}

.member-card .container {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.25rem, 3vw, 2rem);
    background-color: #fff;
    /* The old rule set border-color with no border-style, so no border ever
       painted. */
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.28s ease, box-shadow 0.28s ease,
        border-color 0.28s ease;
}

.member-card .container:hover,
.member-card .container:focus-visible {
    transform: translateY(-5px);
    border-color: var(--agua);
    box-shadow: var(--shadow-md);
}

.member-card .profile_picture {
    width: clamp(124px, 20vw, 168px);
    aspect-ratio: 1;
    height: auto;
    margin-bottom: 1.25rem;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--hueso);
    transition: box-shadow 0.28s ease;
}

.member-card .container:hover .profile_picture,
.member-card .container:focus-visible .profile_picture {
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--agua);
}

.member-card .name {
    margin-bottom: 0.5rem;
    color: var(--negro);
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.5vw, 1.6rem);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.member-card .about_me {
    color: var(--text-soft);
    font-size: 1rem;
    line-height: 1.65;
    text-align: center;
    text-wrap: pretty;
}

.member-card .about_me p {
    margin: 0 0 0.5rem;
}

.member-card .about_me p:last-child {
    margin-bottom: 0;
}

/* Makes the click target legible without repeating the card's own name. */
.member-card .view-profile {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--hairline);
    width: 100%;
    color: var(--negro);
    font-family: var(--font-display);
    font-size: 0.9rem;
    letter-spacing: 0.03em;
    opacity: 0.75;
    transition: opacity 0.28s ease, transform 0.28s ease;
}

.member-card .about_me + .view-profile {
    margin-top: 1.25rem;
}

.member-card .view-profile span {
    display: inline-block;
    transition: transform 0.28s ease;
}

.member-card .container:hover .view-profile,
.member-card .container:focus-visible .view-profile {
    opacity: 1;
}

.member-card .container:hover .view-profile span,
.member-card .container:focus-visible .view-profile span {
    transform: translateX(3px);
}

/* ── Map ─────────────────────────────────────────────────────────────────── */
.map {
    display: block;
}

.map .container {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.map-title {
    width: 100%;
    padding: clamp(1rem, 3vw, 1.5rem);
    background-color: var(--hueso);
    color: var(--negro);
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 600;
    text-align: center;
}

.map-component {
    width: 100%;
    height: clamp(320px, 45vh, 520px);
}

/* --agua on --hueso is roughly 1.3:1, so the link takes its colour from
   --negro and keeps --agua as the underline. */
.link {
    color: var(--negro);
    text-decoration: underline;
    text-decoration-color: var(--agua);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    transition: text-decoration-thickness 0.2s ease;
}

.link:hover {
    text-decoration-thickness: 4px;
}

/* Maps loader states. */
.map-status {
    margin: 0;
    padding: var(--stack) var(--gutter);
    color: var(--text-soft);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ── CV / member profile page ──────────────────────────────────────────────
   /member/<slug>. Shares the page measure and design tokens with the rest of
   the site; sections that have no data yet render a placeholder rather than
   collapsing to nothing, so the template reads intentionally, not broken. */
.cv-page {
    width: min(100% - 2 * var(--gutter), 840px);
    margin-inline: auto;
    padding-block: clamp(2rem, 6vw, 3.5rem) var(--stack);
}

.cv-nav {
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.cv-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    color: var(--negro);
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
}

.cv-back span {
    transition: transform 0.2s ease;
}

.cv-back:hover span {
    transform: translateX(-3px);
}

.cv-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 2.5rem);
    margin-bottom: clamp(2.5rem, 6vw, 3.5rem);
}

.cv-photo {
    flex-shrink: 0;
    width: clamp(120px, 18vw, 168px);
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--hueso);
}

.cv-heading {
    flex: 1;
    min-width: 240px;
    text-align: left;
}

.cv-name {
    margin: 0 0 0.15em;
    color: var(--negro);
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4.5vw, 2.5rem);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.cv-title {
    margin: 0 0 0.25em;
    color: var(--text);
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 2.5vw, 1.2rem);
    font-weight: 500;
}

.cv-location {
    margin: 0 0 1em;
    color: var(--text-soft);
    font-size: 0.95rem;
}

.cv-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.cv-button {
    display: inline-flex;
    align-items: center;
    padding: 0.65em 1.4em;
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.cv-button-primary {
    background-color: var(--negro);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

.cv-button-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.cv-button-secondary {
    background-color: #fff;
    color: var(--negro);
    border: 1px solid var(--hairline);
}

.cv-button-secondary:hover {
    border-color: var(--agua);
    transform: translateY(-2px);
}

.cv-section {
    margin-bottom: clamp(2rem, 5vw, 2.75rem);
    text-align: left;
}

.cv-section-title {
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--hueso);
    color: var(--negro);
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2.5vw, 1.35rem);
    font-weight: 600;
}

.cv-summary {
    color: var(--text);
    line-height: 1.7;
}

.cv-summary p {
    margin: 0 0 0.75em;
}

.cv-summary p:last-child {
    margin-bottom: 0;
}

.cv-entry {
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--hairline);
}

.cv-entry:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.cv-entry-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.cv-entry-head h3 {
    margin: 0;
    color: var(--text);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
}

.cv-period {
    flex-shrink: 0;
    color: var(--text-soft);
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

.cv-org {
    margin: 0.2em 0 0;
    color: var(--negro);
    font-size: 0.95rem;
    font-weight: 500;
}

.cv-desc {
    margin: 0.5em 0 0;
    color: var(--text-soft);
    line-height: 1.6;
}

.cv-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cv-skills li {
    padding: 0.45em 1em;
    background-color: color-mix(in srgb, var(--hueso) 55%, #fff);
    border-radius: 999px;
    color: var(--negro);
    font-size: 0.88rem;
    font-weight: 500;
}

/* Empty-section and not-found states share one quiet, dashed-box style so a
   template read as "not filled in yet," never as broken. */
.cv-placeholder {
    margin: 0;
    padding: 1.1rem 1.25rem;
    background-color: color-mix(in srgb, var(--hueso) 30%, #fff);
    border: 1px dashed var(--hairline);
    border-radius: var(--radius);
    color: var(--text-soft);
    font-size: 0.95rem;
    font-style: italic;
}

.cv-empty-state {
    padding: var(--stack) var(--gutter);
    text-align: center;
}

.cv-empty-state-title {
    margin: 0;
    color: var(--text-soft);
    font-family: var(--font-display);
    font-size: 1.1rem;
}

.cv-highlights {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cv-highlights li {
    position: relative;
    margin-bottom: 0.6rem;
    padding-left: 1.25rem;
    color: var(--text);
    line-height: 1.6;
}

.cv-highlights li:last-child {
    margin-bottom: 0;
}

.cv-highlights li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 6px;
    height: 6px;
    background-color: var(--agua);
    border-radius: 50%;
}

.cv-references {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cv-references li {
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--hairline);
}

.cv-references li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.cv-references a {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    color: var(--negro);
    font-size: 0.95rem;
    text-decoration: underline;
    text-decoration-color: var(--agua);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.cv-references a::after {
    content: "↗";
    font-size: 0.85em;
    opacity: 0.7;
}