/* Utah AI Safety Hub. Colors are tokens so light and dark themes stay in sync.
   Sections are separated by space and soft color bands, never by rules. Corners are square throughout. */
:root {
    --bg: #f7f8f4;
    --surface: #ffffff;
    --band: #edf2ea;
    --text: #1f241f;
    --muted: #5a6359;
    --border: #dfe4dc;
    --accent: #3d6b4f;        /* Wasatch pine green */
    --accent-strong: #2c5039;
    --accent-soft: #e2ece4;
    --on-accent: #ffffff;
    --shadow: 0 1px 2px rgba(31, 36, 31, 0.05), 0 4px 16px rgba(31, 36, 31, 0.05);
    --serif: "Newsreader", Georgia, "Times New Roman", serif;
    --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #141813;
        --surface: #1b201a;
        --band: #1a2119;
        --text: #e5e8e3;
        --muted: #a0a99e;
        --border: #2c332b;
        --accent: #82bf96;
        --accent-strong: #a6d4b3;
        --accent-soft: #1d2c21;
        --on-accent: #0e170f;
        --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.25);
    }
}

:root[data-theme="dark"] {
    --bg: #141813;
    --surface: #1b201a;
    --band: #1a2119;
    --text: #e5e8e3;
    --muted: #a0a99e;
    --border: #2c332b;
    --accent: #82bf96;
    --accent-strong: #a6d4b3;
    --accent-soft: #1d2c21;
    --on-accent: #0e170f;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.25);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.65;
}

a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-strong); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

h1, h2, h3 {
    font-family: var(--serif);
    font-weight: 400;
    line-height: 1.2;
    margin: 0 0 0.5em;
    text-wrap: balance;
}
h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.1rem); margin-top: 0; }
h3 { font-size: 1.3rem; }

.wrap {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 24px;
}
.narrow { max-width: 760px; }

/* Skip link and announcement bar */
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 8px; z-index: 10; background: var(--surface); padding: 6px 12px; }
.announce {
    background: var(--accent);
    color: var(--on-accent);
    font-size: 0.9rem;
    padding: 8px 0;
    text-align: center;
}
.announce a { color: var(--on-accent); font-weight: 600; }

/* Header and navigation */
.site-header .wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    max-width: 1280px;
    padding: 26px 60px;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--serif);
    font-size: 1.25rem;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
}
.brand img { display: block; }
/* Header logo sized like Kairos's: a large serif name with the tile about its cap height. */
.site-header .brand { font-size: 2.125rem; line-height: 1.2; gap: 13px; letter-spacing: -0.01em; }
.site-header .brand img { width: 28px; height: 28px; }
/* Pine tile on light pages, mint tile on dark. */
.brand .logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .brand .logo-light { display: none; }
    :root:not([data-theme="light"]) .brand .logo-dark { display: block; }
}
:root[data-theme="dark"] .brand .logo-light { display: none; }
:root[data-theme="dark"] .brand .logo-dark { display: block; }
.site-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 22px;
    font-size: 0.95rem;
}
.site-nav a { color: var(--text); text-decoration: none; }
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--accent); }
.site-nav a.button { color: var(--on-accent); padding: 5px 16px; font-size: 0.9rem; }
.theme-toggle {
    background: none;
    border: 0;
    color: var(--muted);
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
    padding: 2px 4px;
}
.theme-toggle:hover { color: var(--text); }

/* Full-screen home hero: centered headline over real Mount Timpanogos contours. */
.hero {
    position: relative;
    display: grid;
    place-items: center;
    min-height: calc(100svh - 132px);
    padding: 64px 0 96px;
    overflow: hidden;
    text-align: center;
}
.hero .wrap { position: relative; z-index: 1; }
.hero h1 {
    font-size: clamp(2.8rem, 8vw, 5.8rem);
    font-weight: 300;
    line-height: 1.04;
    letter-spacing: -0.015em;
    max-width: 13ch;
    margin: 0 auto 0.4em;
}
.hero .lede {
    color: var(--muted);
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    max-width: 38ch;
    margin: 0 auto;
}
.topo {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* Clear in the middle for the headline, contours framing the edges. */
    -webkit-mask-image: radial-gradient(ellipse 40% 44% at 50% 50%, transparent 68%, #000 100%);
    mask-image: radial-gradient(ellipse 40% 44% at 50% 50%, transparent 68%, #000 100%);
}
.topo-lines {
    position: absolute;
    inset: 0;
    background: var(--accent);
    opacity: 0.55;
    -webkit-mask: url("images/contours-timpanogos.svg") center / cover no-repeat;
    mask: url("images/contours-timpanogos.svg") center / cover no-repeat;
}
/* A brighter copy of the lines, shown only in a soft circle around the pointer (set by site.js). */
.topo-lines.topo-glow {
    opacity: 0;
    transition: opacity 0.35s;
    -webkit-mask:
        url("images/contours-timpanogos.svg") center / cover no-repeat,
        radial-gradient(circle 210px at var(--mx, 50%) var(--my, 50%), #000 35%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask:
        url("images/contours-timpanogos.svg") center / cover no-repeat,
        radial-gradient(circle 210px at var(--mx, 50%) var(--my, 50%), #000 35%, transparent 100%);
    mask-composite: intersect;
}
.topo-lines { transition: opacity 0.35s; }
.topo-lines.topo-glow { background: var(--accent-strong); }
.hero.is-pointing .topo-lines { opacity: 0.35; }
.hero.is-pointing .topo-lines.topo-glow { opacity: 1; }
#topo-elev { font-variant-numeric: tabular-nums; }
.topo-legend {
    position: absolute;
    right: 20px;
    bottom: 16px;
    color: var(--muted);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    background: var(--bg);
    padding: 1px 6px;
}
.not-found .actions { justify-content: center; }
.not-found .eyebrow { margin-bottom: 16px; }
.scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    z-index: 1;
    color: var(--muted);
    font-size: 0.85rem;
    text-decoration: none;
}
.scroll-cue:hover { color: var(--accent); }

/* Inner page heading */
.page-head { padding: 72px 0 8px; }
.page-head h1 { font-size: clamp(2.4rem, 5.5vw, 3.8rem); font-weight: 300; }
.page-head .lede { font-size: 1.15rem; color: var(--muted); max-width: 640px; }

/* Buttons */
.button {
    display: inline-block;
    background: var(--accent);
    color: var(--on-accent);
    border: 0;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    padding: 11px 24px;
    text-decoration: none;
}
.button:hover { background: var(--accent-strong); color: var(--on-accent); }
.button.secondary {
    background: transparent;
    color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
}
.button.secondary:hover { background: var(--accent-soft); color: var(--accent-strong); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Sections: space between, no rules */
section { padding: 72px 0; }
.page-head + section { padding-top: 32px; }
.section-head { margin-bottom: 32px; max-width: 640px; }
.section-head p, .section-lede { color: var(--muted); max-width: 640px; }
section .wrap > p { max-width: 68ch; }
.eyebrow {
    display: block;
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.band { background: var(--band); }

/* Cards */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}
.cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card {
    background: var(--surface);
    box-shadow: var(--shadow);
    padding: 26px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.card h3 { margin-bottom: 0.35em; }
.card p { margin: 0; color: var(--muted); }
a.card { color: var(--text); text-decoration: none; transition: transform 0.15s, box-shadow 0.15s; }
a.card:hover { color: var(--text); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { a.card:hover { transform: none; } }
.card .arrow,
.card .text-link { color: var(--accent); font-weight: 600; margin-top: auto; padding-top: 16px; text-decoration: none; }
.card .facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}
.card .facts li {
    background: var(--band);
    color: var(--muted);
    font-size: 0.82rem;
    padding: 2px 10px;
}
.card .facts.link-chips li { padding: 0; }
.card .facts.link-chips a { display: block; padding: 4px 12px; color: var(--accent-strong); font-weight: 500; text-decoration: none; }
.card .facts.link-chips a:hover { background: var(--accent-soft); }
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a:hover { color: var(--accent); }
/* Fellowship progression on the Resources page */
.ladder { margin-top: 20px; }
.stage > p { margin-bottom: 16px; }
.programs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.programs-list a { font-weight: 600; text-decoration: none; }
.programs-list a:hover { text-decoration: underline; }
.programs-list .meta { display: block; font-size: 0.86rem; }
.card-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }

.tag {
    display: inline-block;
    align-self: flex-start;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 2px 10px;
    margin-bottom: 12px;
    text-transform: uppercase;
}
.status {
    display: inline-block;
    background: var(--band);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 2px 10px;
    white-space: nowrap;
}
.status.open { background: var(--accent-soft); color: var(--accent-strong); }

/* Three-column text blocks (mission, why now, how we work) */
.numbered {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 32px;
}
.numbered h3 { margin-bottom: 0.3em; color: var(--accent); }
.numbered p { margin: 0; color: var(--muted); }

/* Callout panel */
.callout {
    background: var(--accent);
    color: var(--on-accent);
    padding: 48px 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 40px;
}
.callout h2 { margin-bottom: 0.25em; }
.callout p { margin: 0; max-width: 52ch; opacity: 0.9; }
.callout .button { background: var(--on-accent); color: var(--accent); }
.callout .button:hover { background: var(--accent-soft); color: var(--accent-strong); }

/* People */
.person { flex-direction: row; gap: 18px; align-items: flex-start; }
.avatar {
    flex: none;
    width: 56px;
    height: 56px;
    background: var(--accent-soft);
    color: var(--accent-strong);
    display: grid;
    place-items: center;
    font-family: var(--serif);
    font-size: 1.2rem;
}
.avatar.open { background: var(--band); color: var(--muted); }
.card .role, .person .role { color: var(--muted); font-size: 0.9rem; margin-bottom: 10px; }

/* Lists: spacing instead of rules */
ul.plain { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.meta { color: var(--muted); font-size: 0.92rem; }

/* Programs page list */
.programs { display: grid; gap: 20px; }
.program {
    background: var(--surface);
    box-shadow: var(--shadow);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 24px;
    align-items: start;
    padding: 26px;
    scroll-margin-top: 24px;
}
.program h3 { margin-bottom: 0.2em; }
.program p { margin: 0.2em 0 0; color: var(--muted); }
.program .side { text-align: right; }
.program .side a { display: block; margin-top: 10px; font-size: 0.92rem; font-weight: 600; text-decoration: none; }

/* Events */
.events { display: grid; gap: 20px; }
.event {
    background: var(--surface);
    box-shadow: var(--shadow);
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 20px;
    padding: 26px;
}
.event-date { font-family: var(--serif); color: var(--accent); line-height: 1.3; }
.event h3 { margin-bottom: 0.2em; }
.event p { margin: 0.2em 0 0; }

/* FAQ */
.faq-list { display: grid; gap: 12px; }
.faq details { background: var(--surface); box-shadow: var(--shadow); padding: 16px 22px; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details p { color: var(--muted); margin: 10px 0 0; }

/* Airtable sign-up form */
.signup-embed { max-width: 720px; background: var(--surface); box-shadow: var(--shadow); }
.airtable-embed { display: block; width: 100%; height: 1500px; border: 0; background: transparent; }
.form-note { color: var(--muted); font-size: 0.9rem; margin-top: 12px; }
@media (max-width: 640px) { .airtable-embed { height: 1700px; } }

/* Form */
.signup {
    background: var(--surface);
    box-shadow: var(--shadow);
    padding: 32px;
    max-width: 640px;
}
.field { margin-bottom: 18px; }
.field > label,
fieldset legend { display: block; font-weight: 600; margin-bottom: 6px; }
fieldset { border: 0; margin: 0 0 18px; padding: 0; }
.optional { color: var(--muted); font-weight: 400; }
input[type="text"],
input[type="email"],
select,
textarea {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    font: inherit;
    padding: 10px 12px;
}
/* Browsers round form controls by default; keep them square like everything else. */
input, select, textarea, button { border-radius: 0; }
select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238a9388' stroke-width='1.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.choices { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.choices label { display: flex; align-items: center; gap: 6px; font-weight: 400; }
.form-status { margin-top: 12px; font-weight: 600; }

/* Footer */
.site-footer {
    background: var(--band);
    color: var(--muted);
    font-size: 0.9rem;
    padding: 56px 0 48px;
    margin-top: 48px;
}
.footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 24px; }
.footer-grid h4 { color: var(--text); font-size: 0.9rem; margin: 0 0 8px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 4px; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--text); }

@media (max-width: 640px) {
    body { font-size: 16px; }
    .wrap { padding: 0 16px; }
    section { padding: 56px 0; }
    .hero { min-height: calc(100svh - 160px); padding: 48px 0 88px; }
    .site-header .wrap { padding: 18px 16px; }
    .site-header .brand { font-size: 1.6rem; gap: 10px; }
    .site-header .brand img { width: 24px; height: 24px; }
    .topo { -webkit-mask-image: linear-gradient(to bottom, #000, transparent 30%, transparent 70%, #000); mask-image: linear-gradient(to bottom, #000, transparent 30%, transparent 70%, #000); }
    .cards.two, .program, .event { grid-template-columns: 1fr; }
    .scroll-cue { bottom: 40px; }
    .topo-legend { right: auto; left: 50%; transform: translateX(-50%); bottom: 10px; white-space: nowrap; }
    .program .side { text-align: left; }
    .callout { padding: 32px 24px; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-grid > :first-child { grid-column: 1 / -1; }
}