/* =========================================================================
   C. Edward Whitman — cewhitman.com
   A quiet, classical design. Cinzel for titling, EB Garamond for prose.
   Light / dark themes follow the system and honour a saved preference.
   ========================================================================= */

/* ----------------------------------------------------------------- Fonts */
@font-face {
    font-family: 'Cinzel';
    src: url('/fonts/cinzel-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'EB Garamond';
    src: url('/fonts/eb-garamond.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* -------------------------------------------------------------- Palette */
:root {
    /* Light tokens (the canonical surface) */
    --l-bg:        #f4f7f0;
    --l-bg-elev:   #fbfcf8;
    --l-ink:       #1a1a1a;
    --l-ink-soft:  #43433c;
    --l-ink-faint: #6c6c62;
    --l-brass:     #a47b3a;
    --l-brass-deep:#7a5c2c;
    --l-rule:      rgba(26, 26, 26, 0.12);
    --l-rule-firm: rgba(26, 26, 26, 0.22);
    --l-control-border: #8a8578;
    --l-select:    rgba(164, 123, 58, 0.18);
    --l-globe-line:      #1a1a1a;
    --l-globe-graticule: rgba(26, 26, 26, 0.16);

    /* Dark tokens — warm near-black, desaturated brass (per Material guidance) */
    --d-bg:        #14130e;
    --d-bg-elev:   #1e1c15;
    --d-ink:       #ece6d8;
    --d-ink-soft:  #bcb6a6;
    --d-ink-faint: #8c8678;
    --d-brass:     #cda968;
    --d-brass-deep:#bb9a5d;
    --d-rule:      rgba(236, 230, 216, 0.14);
    --d-rule-firm: rgba(236, 230, 216, 0.26);
    --d-control-border: #787161;
    --d-select:    rgba(205, 169, 104, 0.24);
    --d-globe-line:      #ece6d8;
    --d-globe-graticule: rgba(236, 230, 216, 0.20);

    /* Active mapping — defaults to light */
    color-scheme: light;
    --bg: var(--l-bg);
    --bg-elev: var(--l-bg-elev);
    --ink: var(--l-ink);
    --ink-soft: var(--l-ink-soft);
    --ink-faint: var(--l-ink-faint);
    --brass: var(--l-brass);
    --brass-deep: var(--l-brass-deep);
    --rule: var(--l-rule);
    --rule-firm: var(--l-rule-firm);
    --control-border: var(--l-control-border);
    --select: var(--l-select);
    --globe-line: var(--l-globe-line);
    --globe-graticule: var(--l-globe-graticule);

    /* Type */
    --font-display: 'Cinzel', 'Trajan Pro', 'Optima', Georgia, 'Times New Roman', serif;
    --font-body: 'EB Garamond', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;

    --measure: 38rem;     /* readable line length for prose */
    --gap: clamp(3.5rem, 9vw, 6.5rem);  /* vertical rhythm between sections */
}

/* System dark — applies unless the visitor has explicitly chosen light */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: var(--d-bg);
        --bg-elev: var(--d-bg-elev);
        --ink: var(--d-ink);
        --ink-soft: var(--d-ink-soft);
        --ink-faint: var(--d-ink-faint);
        --brass: var(--d-brass);
        --brass-deep: var(--d-brass-deep);
        --rule: var(--d-rule);
        --rule-firm: var(--d-rule-firm);
        --control-border: var(--d-control-border);
        --select: var(--d-select);
        --globe-line: var(--d-globe-line);
        --globe-graticule: var(--d-globe-graticule);
    }
}

/* Explicit choice — overrides the system */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: var(--d-bg);
    --bg-elev: var(--d-bg-elev);
    --ink: var(--d-ink);
    --ink-soft: var(--d-ink-soft);
    --ink-faint: var(--d-ink-faint);
    --brass: var(--d-brass);
    --brass-deep: var(--d-brass-deep);
    --rule: var(--d-rule);
    --rule-firm: var(--d-rule-firm);
    --control-border: var(--d-control-border);
    --select: var(--d-select);
    --globe-line: var(--d-globe-line);
    --globe-graticule: var(--d-globe-graticule);
}

/* ----------------------------------------------------------------- Base */
*, *::before, *::after { 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-color: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.1875rem);
    line-height: 1.68;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.4s ease, color 0.4s ease;
}

::selection { background: var(--select); }

a { color: inherit; }

.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;
}

:focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: 3px;
    border-radius: 1px;
}

.container {
    width: 100%;
    max-width: 52rem;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

/* --------------------------------------------------------------- Top bar */
.topbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(0.75rem, 2vw, 1.25rem);
    padding: 1rem clamp(1.25rem, 5vw, 2.5rem);
}

.control {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid var(--control-border);
    color: var(--ink-soft);
    font: inherit;
    line-height: 1;
    cursor: pointer;
    border-radius: 999px;
    transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}
.control:hover { border-color: var(--brass-deep); color: var(--ink); }

/* Theme toggle */
.theme-toggle {
    width: 2.4rem; height: 2.4rem;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
}
.theme-toggle svg { width: 1.05rem; height: 1.05rem; display: block; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
    :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

/* Language switcher (endonyms, no flags — per NN/g) */
.lang { position: relative; }
.lang summary { list-style: none; cursor: pointer; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary::marker { content: ''; }
.lang-toggle {
    height: 2.4rem;
    padding: 0 0.95rem;
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-family: var(--font-display);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.lang-toggle .chev { width: 0.6rem; height: 0.6rem; transition: transform 0.3s ease; }
.lang[open] .lang-toggle .chev,
.lang-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

.lang-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    min-width: 11rem;
    margin: 0; padding: 0.4rem 0;
    list-style: none;
    background: var(--bg-elev);
    border: 1px solid var(--rule);
    border-radius: 0.6rem;
    box-shadow: 0 14px 40px -18px rgba(0, 0, 0, 0.45);
    z-index: 30;
}
.lang-menu li { margin: 0; }
.lang-menu a {
    display: block;
    padding: 0.5rem 1.1rem;
    text-decoration: none;
    color: var(--ink-soft);
    font-size: 1rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.lang-menu a:hover { background: var(--select); color: var(--ink); }
.lang-menu a[aria-current="true"] {
    color: var(--brass-deep);
    text-decoration: underline;
    text-underline-offset: 0.22em;
    text-decoration-thickness: 1px;
}
.lang-menu a[aria-current="true"]::after { content: ' ·'; color: var(--brass-deep); }

/* --------------------------------------------------------------- Layout */
main { display: block; }

.hero {
    text-align: center;
    padding-top: clamp(1rem, 3vw, 2.5rem);
}

.cypher {
    width: clamp(132px, 26vw, 196px);
    height: auto;
    display: block;
    margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
}

.name {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(2.3rem, 1.4rem + 4vw, 3.9rem);
    line-height: 1.05;
    letter-spacing: 0.01em;
    color: var(--ink);
}

.tagline {
    margin: clamp(1rem, 2vw, 1.4rem) 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(0.72rem, 0.62rem + 0.4vw, 0.86rem);
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--brass-deep);
}

.diamond {
    display: inline-block;
    width: 5px; height: 5px;
    background: var(--brass);
    transform: rotate(45deg);
    flex: none;
}

.credo {
    max-width: 34rem;
    margin: clamp(1.6rem, 3vw, 2.2rem) auto 0;
    color: var(--ink-soft);
    font-size: 1.12em;
}

.epigraph {
    margin: clamp(1.6rem, 3vw, 2.1rem) auto 0;
    max-width: 32rem;
    color: var(--ink-faint);
}
.epigraph i { display: block; font-style: italic; font-size: 1.05em; color: var(--ink-soft); }
.epigraph-tr { display: block; margin-top: 0.5rem; font-size: 0.95em; color: var(--ink-faint); }
.epigraph cite {
    display: block;
    margin-top: 0.7rem;
    font-style: normal;
    font-family: var(--font-display);
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brass-deep);
}

/* Divider — hairline with a centred lozenge, echoing the cypher mark */
.rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: var(--gap) auto;
    max-width: 22rem;
    color: var(--rule-firm);
}
.rule::before, .rule::after {
    content: '';
    height: 1px;
    flex: 1 1 auto;
    background: linear-gradient(to var(--_dir, right), transparent, currentColor);
}
.rule::after { --_dir: left; }
.rule .diamond { width: 6px; height: 6px; }

/* Globe — kept as requested, now theme-aware */
.globe-stage {
    display: flex;
    justify-content: center;
    margin-top: clamp(2.25rem, 5vw, 3.5rem);
}
.loader {
    position: relative;
    width: clamp(210px, 56vw, 280px);
    aspect-ratio: 1 / 1;
}
.loader .globe,
.whirl svg { width: 100%; height: 100%; display: block; }
.whirl { position: absolute; inset: -8%; pointer-events: none; }
.whirl .ring {
    animation: spin 17s linear infinite;
    transform-origin: 50% 50%;
}
.whirl .ring--reverse { animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------- Pursuits */
.section-head { text-align: center; }
.section-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.4rem);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink);
}
.section-lede {
    margin: 0.9rem auto 0;
    max-width: var(--measure);
    color: var(--ink-faint);
    font-size: 1.02em;
}

.pursuits {
    margin: clamp(2.75rem, 6vw, 4rem) auto 0;
    max-width: var(--measure);
    display: grid;
    gap: clamp(2.25rem, 5vw, 3.25rem);
}
.pursuit { display: block; }
.pursuit-head {
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
    margin-bottom: 0.7rem;
}
.pursuit-num {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    color: var(--brass-deep);
    flex: none;
    min-width: 2.4rem;
}
.pursuit-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(0.92rem, 0.82rem + 0.4vw, 1.06rem);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink);
}
.pursuit-body {
    margin: 0;
    padding-left: 3.25rem;
    color: var(--ink-soft);
}
.pursuit-body em { font-style: italic; color: var(--ink); }
@media (max-width: 33rem) {
    .pursuit-body { padding-left: 0; }
}

/* -------------------------------------------------------------- Contact */
.contact { text-align: center; }
.contact-list {
    margin: clamp(1.5rem, 3vw, 2rem) 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(1.25rem, 3vw, 2rem);
}
.contact-list a {
    position: relative;
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    padding: 0.3rem 0.1rem;
    transition: color 0.3s ease;
}
.contact-list a::after {
    content: '';
    position: absolute;
    left: 50%; right: 50%; bottom: -1px;
    height: 1px;
    background: var(--brass);
    transition: left 0.35s ease, right 0.35s ease;
}
.contact-list a:hover,
.contact-list a:focus-visible { color: var(--brass-deep); }
.contact-list a:hover::after,
.contact-list a:focus-visible::after { left: 0; right: 0; }

/* --------------------------------------------------------------- Footer */
.site-footer {
    margin-top: var(--gap);
    padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
    text-align: center;
    color: var(--ink-soft);
}
.footer-mark {
    width: 34px; height: auto;
    margin: 0 auto 1.25rem;
    display: block;
    opacity: 0.85;
}
.footer-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.65rem 0.95rem;
    font-size: 0.92rem;
}
.footer-meta .est {
    font-family: var(--font-display);
    letter-spacing: 0.18em;
    color: var(--brass-deep);
}
.footer-langs {
    margin: 1.4rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.55rem 0.95rem;
    font-size: 0.95rem;
}
.footer-langs a {
    display: inline-block;
    padding: 0.2rem 0.15rem;
    text-decoration: none;
    color: var(--ink-soft);
    transition: color 0.25s ease;
}
.footer-langs a:hover { color: var(--ink); }
.footer-langs a[aria-current="true"] {
    color: var(--brass-deep);
    text-decoration: underline;
    text-underline-offset: 0.22em;
    text-decoration-thickness: 1px;
}
.footer-copy {
    margin: 1.4rem 0 0;
    font-size: 0.86rem;
    color: var(--ink-soft);
}

/* ------------------------------------------------------------------ 404 */
.notfound { text-align: center; }
.notfound-code {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(3.5rem, 2rem + 9vw, 7rem);
    line-height: 1;
    letter-spacing: 0.12em;
    color: var(--brass);
}
.notfound-title {
    margin: 1rem 0 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1rem, 0.85rem + 0.6vw, 1.25rem);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink);
}
.notfound-body {
    margin: 1.25rem auto 0;
    max-width: 30rem;
    color: var(--ink-soft);
}

/* ------------------------------------------------------ Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .whirl .ring { animation: none; }
    body, .control, .lang-menu a, .contact-list a { transition: none; }
}

/* Windows High Contrast / forced colours — keep controls and rules perceivable */
@media (forced-colors: active) {
    .control { border-color: ButtonText; }
    .control:hover { border-color: Highlight; }
    .diamond { background: CanvasText; }
    .rule { color: CanvasText; }
    :focus-visible { outline-color: Highlight; }
}