:root {
    --hue: 165;
    --bg: #fbfaf7;
    --fg: #1c1d1f;
    --muted: #5f6368;
    --rule: #e4e1da;
    --accent: oklch(0.52 0.11 var(--hue));
    --topo: 0.4;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* Aspen seasons, set by the script in <head> */
:root[data-season="fall"] { --hue: 75; }
:root[data-season="winter"] { --hue: 245; }
:root[data-season="mud"] { --hue: 40; }
:root[data-season="summer"] { --hue: 145; }

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #121413;
        --fg: #e7e5e0;
        --muted: #9aa09c;
        --rule: #2a2d2b;
        --accent: oklch(0.8 0.12 var(--hue));
        --topo: 0.32;
    }
}

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font: 1.0625rem/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-text-size-adjust: 100%;
}

/* Contour-map backdrop: strongest at the top and edges, quieter behind the text column */
html { overflow-x: clip; }
body { position: relative; }
body::before {
    content: "";
    position: absolute;
    top: -6vh;
    left: -6%;
    right: -6%;
    height: 125vh;
    z-index: -1;
    pointer-events: none;
    background: var(--accent);
    opacity: var(--topo);
    -webkit-mask: url(../img/topo.svg) center / cover no-repeat, linear-gradient(#000 30%, transparent), linear-gradient(90deg, #000, rgb(0 0 0 / 0.3) 28%, rgb(0 0 0 / 0.3) 72%, #000);
    -webkit-mask-composite: source-in, source-in;
    mask: url(../img/topo.svg) center / cover no-repeat, linear-gradient(#000 30%, transparent), linear-gradient(90deg, #000, rgb(0 0 0 / 0.3) 28%, rgb(0 0 0 / 0.3) 72%, #000);
    mask-composite: intersect, intersect;
    animation: drift 120s ease-in-out infinite alternate;
}

@keyframes drift {
    to { transform: translate(-4%, 3%) rotate(2deg) scale(1.06); }
}

main {
    max-width: 46rem;
    margin: 0 auto;
    padding: 0 1rem 4rem;
}

a { color: var(--accent); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

h1, h2, h3 { line-height: 1.2; margin: 0; }
h1 { font-size: clamp(1.75rem, 6vw, 2.5rem); letter-spacing: -0.02em; }
h2 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 1.5rem;
}
h3 { font-size: 1.05rem; }
h3 a { color: inherit; }

section { margin: 3.5rem 0; }

.intro {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    padding-top: 4rem;
}
.intro img {
    border-radius: 50%;
    flex: none;
    box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent);
}
.coords {
    margin: 0 0 0.35rem;
    font: 0.75rem var(--mono);
    letter-spacing: 0.05em;
    color: var(--accent);
}
:root[data-season="fall"] .coords::after { content: " · fall in aspen"; }
:root[data-season="winter"] .coords::after { content: " · winter in aspen"; }
:root[data-season="mud"] .coords::after { content: " · mud season"; }
:root[data-season="summer"] .coords::after { content: " · summer in aspen"; }
.tagline { margin: 0.35rem 0 0.75rem; color: var(--muted); }
.email { user-select: all; }
.links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; font-weight: 500; }

/* Experience elevation profile: oldest job at the trailhead, current job at the summit */
.profile {
    position: relative;
    height: 170px;
    margin: 2.5rem 0 4rem;
}
.profile svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    animation: reveal 2.4s cubic-bezier(.4, 0, .2, 1) both;
}
.area { fill: url(#bands); }
.band-bg { fill: color-mix(in oklch, var(--accent) 10%, transparent); }
.band { stroke: color-mix(in oklch, var(--accent) 40%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.line {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}
@keyframes reveal {
    from { clip-path: inset(-20% 100% -20% 0); }
    to { clip-path: inset(-20% 0 -20% 0); }
}

.wp {
    position: absolute;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: var(--bg);
    border: 2px solid var(--accent);
    animation: pop 0.4s calc(var(--i) * 0.22s + 0.15s) both;
    transition: transform 0.15s;
}
.wp:hover, .wp:focus-visible { transform: scale(1.3); outline: none; }
.wp:has(+ .year:last-child) { background: var(--accent); width: 18px; height: 18px; margin: -9px 0 0 -9px; }
@keyframes pop {
    from { opacity: 0; transform: scale(0); }
}
.label {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    translate: -50% 0;
    white-space: nowrap;
    font: 600 0.75rem system-ui, sans-serif;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background: var(--fg);
    color: var(--bg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}
.wp:hover .label, .wp:focus-visible .label, .wp:has(+ .year:last-child) .label { opacity: 1; }
.year {
    position: absolute;
    bottom: -1.6rem;
    translate: -50% 0;
    font: 0.7rem var(--mono);
    color: var(--muted);
}

/* Trail down the experience list, one marker per job */
.trail { position: relative; }
.trail::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 0.6rem;
    bottom: 0.6rem;
    border-left: 2px dashed color-mix(in oklch, var(--accent) 45%, transparent);
}
.trail .entry { position: relative; padding-left: 1.9rem; scroll-margin-top: 2rem; }
.trail .entry::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.3rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--bg);
    border: 2px solid var(--accent);
}
.trail .entry:first-child::before { background: var(--accent); }
.trail .entry:target h3 { color: var(--accent); }

.entry {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: 0 1.5rem;
    margin-bottom: 2rem;
}
.entry p { margin: 0.5rem 0 0; }
.entry ul { margin: 0.5rem 0 0; padding-left: 1.1rem; }
.when, .where { font-size: 0.9rem; color: var(--muted); }
.when { font-family: var(--mono); font-size: 0.8rem; padding-top: 0.2rem; margin: 0 !important; }
.where { margin-top: 0.15rem !important; }
.at { font-weight: 400; color: var(--muted); }

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before { animation: none !important; transition: none !important; }
}

@media (max-width: 600px) {
    .intro { flex-direction: column; align-items: flex-start; padding-top: 2.5rem; }
    .intro img { width: 88px; height: 88px; }
    .entry { grid-template-columns: 1fr; }
    .profile { height: 130px; }
    .year:nth-of-type(even) { display: none; }
}