:root{
  --paper:#fbfaf8; --surface:#ffffff; --ink:#1a1a1a; --ink-2:#44423e; --muted:#6b6b6b;
  --line:#e2ded8; --line-2:#cfcac2; --accent:#4b7f52; --accent-ink:#3d6b44; --accent-wash:#eef4ee;
  --list-underline:50%;
  --display:-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --body:-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#141513; --surface:#1b1c1a; --ink:#eceae5; --ink-2:#c9c6bf; --muted:#9a978f;
    --line:#2c2e2b; --line-2:#3c3f3b; --accent:#8fbf96; --accent-ink:#8fbf96; --accent-wash:#1d2a1f;
    --list-underline:65%;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#141513; --surface:#1b1c1a; --ink:#eceae5; --ink-2:#c9c6bf; --muted:#9a978f;
  --line:#2c2e2b; --line-2:#3c3f3b; --accent:#8fbf96; --accent-ink:#8fbf96; --accent-wash:#1d2a1f;
  --list-underline:65%;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.6;margin:0}
a{color:var(--accent-ink);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}
a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}

.wrap{max-width:760px;margin:0 auto;padding-inline:16px}
header.top{padding-top:56px}

h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;line-height:1.1}
h1{font-size:clamp(2.5rem,7vw,3.75rem);font-weight:760;letter-spacing:-0.015em}
h2{font-size:.875rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:20px}
h3{font-size:1.1875rem;font-weight:700}
p{margin:0 0 14px}

.name{display:flex;align-items:center;gap:20px}
.avatar{width:88px;height:88px;border-radius:50%;object-fit:cover;flex:none;background:var(--line);box-shadow:0 0 0 1px var(--line)}
/* Tagline: two label lines (current title; past employers), each balanced when it wraps */
.tagline{font-size:1.3125rem;line-height:1.4;color:var(--ink-2);margin:18px 0 20px}
.tagline span{display:block;text-wrap:balance}
.tagline span+span{margin-top:8px}
.links{display:flex;flex-wrap:wrap;gap:0 20px;padding:0;margin:-8px 0;list-style:none;font-size:.9375rem}
/* Taller tap targets (about 40px) without changing where the row sits */
.links a{display:inline-block;padding-block:8px}

section{margin-top:56px}
.bio p{max-width:64ch}
/* Marks text Carl still has to write; build.sh refuses to build while one is on the page */
.placeholder{border:2px dashed var(--accent);background:var(--accent-wash);border-radius:8px;padding:12px 16px;color:var(--ink-2);font-style:italic}
.placeholder .tag{font-style:normal;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);margin-right:6px}

/* Career: one entry per era */
.era{display:grid;grid-template-columns:120px minmax(0,1fr);gap:4px 24px;padding:20px 0;border-top:1px solid var(--line)}
.era:last-child{border-bottom:1px solid var(--line)}
.era .when{font-size:.875rem;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:3px}
.era h3{margin-bottom:6px}
.era p{color:var(--ink-2);font-size:1rem;margin-bottom:12px}
.work{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.work li{font-size:1rem;line-height:1.45}
.work .meta{color:var(--muted);font-size:.875rem}
/* Meta stays on the title's last line when it fits, otherwise moves down whole */
.work .meta,.plain .meta{display:inline-block}
/* Quieter underlines in long link lists (still the main cue that marks a link); full strength on hover */
.work a,.plain a{text-decoration-color:color-mix(in srgb,currentColor var(--list-underline),transparent)}
.work a:hover,.plain a:hover{text-decoration-color:currentColor}

/* Selected work */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px 20px;display:flex;flex-direction:column;gap:8px}
.card:hover,.card:focus-within{border-color:var(--accent)}
.card .meta{font-size:.8125rem;color:var(--muted);margin:0;letter-spacing:.01em}
.card .meta span{white-space:nowrap}
.card h3{font-size:1.125rem;line-height:1.3}
.card h3 a{color:var(--ink);text-decoration-color:var(--accent);text-decoration-color:color-mix(in srgb,var(--accent) 80%,transparent)}
/* The title link covers the whole card, so the card is one click target */
.card h3 a::after{content:"";position:absolute;inset:0;border-radius:10px}
.card h3 a:hover{color:var(--accent-ink);text-decoration:underline}
/* Keyboard focus outlines the whole card (the stretched link), not just the title text */
.card h3 a:focus-visible{outline:none}
.card h3 a:focus-visible::after{outline:2px solid var(--accent);outline-offset:2px}
.card p:last-child{font-size:.9375rem;line-height:1.5;color:var(--ink-2);margin:0}

.era .role{font-size:.9375rem;color:var(--muted);margin:0 0 10px}
.era .note{font-size:.875rem;color:var(--muted);margin:10px 0 0}
figure.quote{margin:4px 0 16px;padding:2px 0 2px 16px;border-left:3px solid var(--accent)}
blockquote{margin:0}
.era blockquote p{font-size:1.125rem;line-height:1.45;color:var(--ink);margin:0 0 6px}
figcaption{font-size:.875rem;color:var(--muted)}

.plain{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;font-size:1rem}
.plain .meta{color:var(--muted);font-size:.875rem}

.more{margin:14px 0 0;font-size:.9375rem}

footer{font-size:.875rem;color:var(--muted);padding-bottom:64px}
.foot{margin-top:64px;padding-top:20px;border-top:1px solid var(--line)}

/* Clips page (clips.html): one era per outlet; each year or outlet is a collapsed list */
.back{margin:0 0 6px;font-size:.9375rem}
.back a{display:inline-block;padding-block:8px}
.clips{margin-top:48px}
section.era{margin-top:0}
.era h2{font-size:1.1875rem;letter-spacing:0;text-transform:none;color:var(--ink);margin-bottom:6px}
.years{border-top:1px solid var(--line)}
.years details{border-bottom:1px solid var(--line)}
.years summary{cursor:pointer;padding:10px 0;font-weight:600;font-variant-numeric:tabular-nums}
.years summary::marker{color:var(--accent)}
.years summary:hover{color:var(--accent-ink)}
.years summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
.years summary .n{font-weight:400;color:var(--muted);font-size:.875rem;margin-left:6px}
.years .work{padding:2px 0 18px}
.surveyor{margin:0 0 12px}

/* Read by screen readers, not shown (era years inside each heading) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Cards go to one column before they get too narrow for their meta lines */
@media (max-width:700px){
  .cards{grid-template-columns:1fr}
}
@media (max-width:600px){
  header.top{padding-top:36px}
  .name{gap:14px}
  .avatar{width:64px;height:64px}
  .era{grid-template-columns:1fr}
  .era .when{padding-top:0;margin:0}
  .tagline{font-size:1.1875rem}
}