@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&display=swap');

/* ------------------------------------------------------------------ *
 * Warm humanist theme. Edit the variables below to retune everything. *
 * ------------------------------------------------------------------ */

:root {
    --bg:        #faf8f4;   /* warm paper */
    --text:      #211f1c;   /* warm near-black */
    --muted:     #6b665f;   /* secondary text */
    --faint:     #9a938a;   /* dates, separators */
    --accent:    #b4502a;   /* warm clay */
    --accent-hi: #8f3d1f;   /* link hover */
    --rule:      #e6e0d6;   /* hairlines */
    --measure:   48rem;     /* content width */
}

body.dark {
    --bg:        #1a1916;
    --text:      #e7e2d9;
    --muted:     #a39c91;
    --faint:     #726b61;
    --accent:    #e0915f;
    --accent-hi: #efad81;
    --rule:      #322e29;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.65;
    font-feature-settings: "ss01", "cv05";
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: background 0.25s ease, color 0.25s ease;
}

a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a:hover {
    color: var(--accent-hi);
    text-decoration-color: currentColor;
}

.container {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 0 1.5rem;
    width: 100%;
}

/* Nav -------------------------------------------------------------- */
header {
    padding: 2rem 0 0;
    margin-bottom: 3rem;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: -0.01em;
    color: var(--text);
    text-decoration: none;
}

.nav-links {
    display: flex;
    gap: 1.5rem;
}

.nav-links a {
    font-size: 0.92rem;
    color: var(--muted);
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 1.5px solid transparent;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--text);
    border-bottom-color: var(--accent);
}

/* Headings --------------------------------------------------------- */
h1 {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin-bottom: 0.4rem;
}

h2,
.section-title {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 1.25rem;
}

h3 {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.subtitle {
    color: var(--muted);
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
}

/* Intro — avatar beside name */
.intro {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--rule);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.intro-text h1 {
    margin-bottom: 0.25rem;
}

.intro-text .subtitle {
    margin-bottom: 0;
}

@media (max-width: 480px) {
    .intro {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}

section {
    margin-bottom: 3rem;
}

.bio-text {
    color: var(--text);
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
}

.bio-text p {
    margin-bottom: 0.9rem;
}

.links {
    color: var(--muted);
    font-size: 0.95rem;
    margin-top: 1.25rem;
}

/* Experience — narrative, not a resume grid ------------------------ */
.experience-item {
    margin-bottom: 1.6rem;
}

.experience-item:last-child {
    margin-bottom: 0;
}

.exp-header {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35rem 0.6rem;
}

.exp-date {
    font-size: 0.82rem;
    color: var(--faint);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.exp-org {
    font-size: 0.92rem;
    color: var(--muted);
    margin: 0.05rem 0 0.35rem;
}

.exp-details {
    list-style: none;
    padding-left: 0;
    color: var(--text);
    font-size: 0.97rem;
}

.exp-details li {
    position: relative;
    padding-left: 1rem;
    margin-bottom: 0.25rem;
}

.exp-details li::before {
    content: "–";
    position: absolute;
    left: 0;
    color: var(--faint);
}

/* Interests — inline prose, not a symmetric bullet grid ------------ */
.interests-grid {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.interest-group h3 {
    margin-bottom: 0.45rem;
    color: var(--muted);
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.interest-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.55rem;
    color: var(--text);
    font-size: 0.97rem;
}

.interest-group li:not(:last-child)::after {
    content: "·";
    margin-left: 0.55rem;
    color: var(--faint);
}

/* Now page --------------------------------------------------------- */
.now-header {
    margin-bottom: 1.5rem;
}

.now-header h1 {
    font-size: 1.7rem;
    margin-bottom: 0.4rem;
}

.now-header p {
    color: var(--muted);
    font-size: 0.95rem;
}

.now-meta {
    font-size: 0.95rem;
    color: var(--muted);
    margin-bottom: 2rem;
}

.now-section h3 {
    margin-top: 1.75rem;
    margin-bottom: 0.6rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 0.9rem;
}

.now-section h3:first-child {
    margin-top: 0;
}

.now-section ul {
    list-style: none;
    padding-left: 0;
    color: var(--text);
    margin-bottom: 1rem;
}

.now-section li {
    position: relative;
    padding-left: 1.1rem;
    margin-bottom: 0.6rem;
}

.now-section li::before {
    content: "–";
    position: absolute;
    left: 0;
    color: var(--faint);
}

/* Meet page ------------------------------------------------------- */
.meet-option h3 {
    font-size: 1.3rem;
    margin-bottom: 0.15rem;
}

/* Divider ---------------------------------------------------------- */
.section-divider {
    border: none;
    border-top: 1px solid var(--rule);
    margin: 3rem 0;
}

/* Footer ----------------------------------------------------------- */
footer {
    padding: 2.5rem 0;
    color: var(--faint);
    font-size: 0.82rem;
    margin-top: auto;
}

footer p {
    border-top: 1px solid var(--rule);
    padding-top: 1.5rem;
}

/* Webring ---------------------------------------------------------- */
/* The embed is a cross-origin iframe: it inherits none of the CSS above.
   Its colours are set with query params on the src (see the footer markup),
   and its background defaults to transparent, so the page shows through. */
.webring {
    margin-top: 1.25rem;
}

.webring iframe {
    display: block;
    width: 100%;
    height: 44px;
    border: 0;
}

/* Dark-mode toggle ------------------------------------------------- */
.toggle {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    display: inline-block;
    width: 36px;
    height: 20px;
    z-index: 10;
}

.toggle input {
    display: none;
}

.slider {
    position: absolute;
    inset: 0;
    background: var(--rule);
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.2s;
}

.slider::before {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    left: 3px;
    top: 3px;
    background: var(--bg);
    border-radius: 50%;
    transition: transform 0.2s;
}

.toggle input:checked + .slider {
    background: var(--accent);
}

.toggle input:checked + .slider::before {
    transform: translateX(16px);
}

/* Party easter egg ------------------------------------------------- */
.party-link {
    color: var(--faint);
    text-decoration: none;
    font-size: 0.82rem;
}

.party-link:hover {
    color: var(--muted);
    text-decoration: none;
}

body.party {
    animation: bgCycle 3s linear infinite;
}

body.party h1,
body.party h2,
body.party h3 {
    animation: rainbow 2s linear infinite;
}

body.party a {
    animation: rainbow 2s linear infinite;
    animation-delay: 0.5s;
}

body.party .exp-date {
    animation: rainbow 2s linear infinite;
    animation-delay: 1s;
}

@keyframes rainbow {
    0% { color: #ff6b6b; }
    20% { color: #ffa94d; }
    40% { color: #51cf66; }
    60% { color: #339af0; }
    80% { color: #cc5de8; }
    100% { color: #ff6b6b; }
}

@keyframes bgCycle {
    0% { background: #fff5f5; }
    25% { background: #f3ffe3; }
    50% { background: #e7f5ff; }
    75% { background: #faf4ff; }
    100% { background: #fff5f5; }
}

body.dark.party {
    animation-name: bgCycleDark;
}

@keyframes bgCycleDark {
    0% { background: #2a1a1a; }
    25% { background: #1a2a1a; }
    50% { background: #1a1a2a; }
    75% { background: #2a1a2a; }
    100% { background: #2a1a1a; }
}

/* Mobile ----------------------------------------------------------- */
@media (max-width: 640px) {
    body { font-size: 16px; }
    h1 { font-size: 1.7rem; }
    .container { padding: 0 1.25rem; }
    /* Logo above the links so five links fit; toggle moves out of their way */
    nav { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
    .nav-links { gap: 1.1rem; }
    .toggle { top: auto; bottom: 1.25rem; right: 1.25rem; }
}