/* Layout: single 1080px column; split hero (portrait + welcome), then a year-column ledger for the resume. Tide palette; Cormorant Garamond display + Plus Jakarta Sans body. */
:root {
  --deep-teal: #1E4040;
  --mid-teal: #3D7A7A;
  --pale-teal: #C2D8D8;
  --ink: #0D1F1F;
  --mist: #EEF4F4;
  --paper: #F7FAFA;
  --muted: #4A6262;
  --rule: #C2D8D8;
  --hero-bg: #1E4040;
  --hero-fg: #EEF4F4;
  --hero-muted: #A9C6C6;
  --hero-accent: #C2D8D8;
  --flag-bg: #FFF2CC;
  --flag-fg: #6B4E00;

  --display: 'Cormorant Garamond', Garamond, 'EB Garamond', Georgia, 'Times New Roman', serif;
  --body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-h3: 1.5rem;
  --step-2: 1.875rem;
  --step-3: clamp(2.75rem, 6vw, 4rem);
  --gutter: clamp(16px, 4vw, 40px);
  --max: 1080px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --deep-teal: #9FCACA; --mid-teal: #7FB8B8; --pale-teal: #2C4A4A; --ink: #E3EEEE;
    --mist: #0F1E1E; --paper: #142626; --muted: #9DB5B5; --rule: #2C4A4A;
    --hero-bg: #0A1717; --hero-fg: #E3EEEE; --hero-muted: #8FB0B0; --hero-accent: #B5D6D6;
    --flag-bg: #3D3214; --flag-fg: #F2D98A;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --deep-teal: #9FCACA; --mid-teal: #7FB8B8; --pale-teal: #2C4A4A; --ink: #E3EEEE;
  --mist: #0F1E1E; --paper: #142626; --muted: #9DB5B5; --rule: #2C4A4A;
  --hero-bg: #0A1717; --hero-fg: #E3EEEE; --hero-muted: #8FB0B0; --hero-accent: #B5D6D6;
  --flag-bg: #3D3214; --flag-fg: #F2D98A;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--mist);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.65;
}
img { max-width: 100%; display: block; }
a { color: var(--mid-teal); text-underline-offset: 3px; }
a:hover { color: var(--deep-teal); }
:focus-visible { outline: 2px solid var(--mid-teal); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--display); color: var(--deep-teal); text-wrap: balance; margin: 0; line-height: 1.15; }
p { margin: 0; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* Header / nav */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10;
  background: var(--hero-bg); color: var(--hero-fg);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-block: 14px; }
.wordmark { font-family: var(--display); font-weight: 700; font-size: 1.625rem; line-height: 1; color: var(--hero-fg); text-decoration: none; }
.wordmark:hover { color: var(--hero-fg); }
.nav { display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 0.875rem; font-weight: 500; }
.nav a { color: var(--hero-muted); text-decoration: none; padding-block: 4px; border-bottom: 1.5px solid transparent; }
.nav a:hover { color: var(--hero-fg); }
.nav a[aria-current="page"] { color: var(--hero-fg); border-bottom-color: var(--hero-accent); }

/* Hero (home) */
.hero { background: var(--hero-bg); color: var(--hero-fg); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 64px); align-items: end; padding-block: clamp(32px, 6vw, 72px) 0; }
.portrait { margin: 0; align-self: end; }
.portrait img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 20%; border-radius: 2px 2px 0 0; }
.hero-text { display: grid; gap: 18px; padding-bottom: clamp(32px, 6vw, 72px); min-width: 0; }
.eyebrow { font-size: var(--step--1); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hero-muted); }
.hero h1 { color: var(--hero-fg); font-size: var(--step-3); }
.tagline { font-family: var(--display); font-style: normal; font-weight: 500; font-size: 1.5rem; line-height: 1.25; color: var(--hero-accent); }
.hero-lede { color: var(--hero-muted); max-width: 52ch; }
.hero-links { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 6px; }
.btn { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 500; text-decoration: none; padding: 9px 16px; border-radius: 3px; border: 1px solid var(--hero-muted); color: var(--hero-fg); }
.btn:hover { background: rgba(255,255,255,0.08); color: var(--hero-fg); }
.btn.solid { background: var(--hero-fg); color: var(--hero-bg); border-color: var(--hero-fg); }
.btn.solid:hover { background: var(--hero-accent); color: var(--hero-bg); }
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Page hero (subpages) */
.page-hero { background: var(--hero-bg); color: var(--hero-fg); }
.page-hero .wrap { display: grid; gap: 14px; padding-block: clamp(36px, 6vw, 64px); }
.page-hero h1 { color: var(--hero-fg); font-size: var(--step-3); }
.page-hero p { color: var(--hero-muted); max-width: 60ch; }

/* Sections */
main { display: block; }
.section { padding-block: clamp(40px, 7vw, 80px); }
.section + .section { border-top: 1px solid var(--rule); }
.section-head { display: grid; align-content: start; gap: 8px; margin-bottom: 32px; }
.section-head h2, .cta h2 { font-size: clamp(2rem, 4vw, 2.5rem); font-weight: 600; }
.section-head p { color: var(--muted); max-width: 62ch; }
.label { font-size: var(--step--1); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mid-teal); }

.about { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 5vw, 64px); }
.prose { display: grid; gap: 1.1em; max-width: 65ch; }

/* Resume ledger */
.resume-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 32px; }
.ledger { list-style: none; margin: 0; padding: 0; display: grid; }
.role { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 8px 32px; padding-block: 24px; border-top: 1px solid var(--rule); }
.role:last-child { border-bottom: 1px solid var(--rule); }
.years { font-variant-numeric: tabular-nums; font-size: 0.9375rem; font-weight: 500; color: var(--muted); padding-top: 4px; }
.role-body { display: grid; gap: 6px; min-width: 0; }
.role h3 { font-size: var(--step-h3); font-weight: 600; }
.org { font-size: 0.9375rem; font-weight: 500; color: var(--mid-teal); }
.role p { max-width: 68ch; }
.result { color: var(--muted); }
.result strong { color: var(--ink); font-weight: 600; }
.result ul { margin: 4px 0 0; padding-left: 1.1em; display: grid; gap: 4px; }

.earlier { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.earlier li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 4px 32px; }
.earlier .what { min-width: 0; }
.earlier .what b { font-weight: 600; color: var(--deep-teal); }

.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; }
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.plain-list b { display: block; font-weight: 600; color: var(--deep-teal); }
.plain-list span { color: var(--muted); font-size: 0.9375rem; }
.inline-years { gap: 8px; }
.inline-years b { display: inline; }
.inline-years span { white-space: nowrap; }
.inline-years span::before { content: "\00b7\00a0"; }

.skills { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.skills li { font-size: 0.875rem; padding: 5px 12px; border: 1px solid var(--rule); border-radius: 999px; color: var(--deep-teal); background: var(--paper); }

/* Entries (subpages) */
.entries { display: grid; gap: 0; }
.entry { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 8px 32px; padding-block: 28px; border-top: 1px solid var(--rule); }
.entry:last-child { border-bottom: 1px solid var(--rule); }
.entry-body { display: grid; gap: 8px; min-width: 0; }
.entry h3 { font-size: var(--step-h3); font-weight: 600; }
.entry p { max-width: 66ch; }
.entry .links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.9375rem; font-weight: 500; }

.stat-row { display: flex; flex-wrap: wrap; gap: 12px 40px; margin-top: 4px; }
.stat { display: grid; }
.stat b { font-family: var(--display); font-size: var(--step-2); color: var(--deep-teal); line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat span { font-size: var(--step--1); color: var(--muted); }

.services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.service { padding-block: 22px; border-top: 1px solid var(--rule); display: grid; gap: 6px; }
.service h3 { font-size: var(--step-h3); font-weight: 600; }
.service p { color: var(--muted); }

.callout { background: var(--paper); border: 1px solid var(--rule); padding: clamp(20px, 4vw, 32px); border-radius: 3px; display: grid; gap: 10px; max-width: 760px; }
.callout .q { font-family: var(--display); font-style: italic; font-size: 1.5rem; color: var(--deep-teal); line-height: 1.4; }

.cta { display: grid; gap: 14px; justify-items: start; }
.email-line { font-family: var(--display); font-size: var(--step-2); color: var(--deep-teal); user-select: all; word-break: break-word; }

/* Draft placeholders: visible on purpose until filled in */
.todo { display: inline-block; max-width: 100%; white-space: normal !important; background: var(--flag-bg); color: var(--flag-fg); font-size: 0.8125rem; font-weight: 500; padding: 1px 7px; border-radius: 3px; }
.todo-block { background: var(--flag-bg); color: var(--flag-fg); font-size: 0.9375rem; padding: 12px 16px; border-radius: 3px; }

/* Music page sections + carousel */
.jump{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:.9375rem;font-weight:500;margin-top:6px}
.jump a{color:var(--hero-fg);text-decoration:none;border-bottom:1.5px solid var(--hero-accent);padding-bottom:2px}
.music-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,64px);align-items:center}
.music-sec.flip .music-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}.music-sec.flip .music-copy{order:2}
.music-copy{display:grid;gap:12px;min-width:0}
.music-copy h2{font-size:clamp(2rem,4vw,2.5rem);font-weight:600}
.carousel{min-width:0}
.slides{position:relative;aspect-ratio:1/1;max-width:100%;overflow:hidden;border-radius:3px;background:#162F2F;border:1px solid var(--rule)}
.slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .8s ease;pointer-events:none;display:flex;flex-direction:column}
.slide.is-on{opacity:1;pointer-events:auto}
.slide img{flex:1;min-height:0;width:100%;object-fit:contain;padding:14px 14px 0}
.slide figcaption{flex:none;padding:10px 16px 12px;font-size:.875rem;line-height:1.4;color:#E3EEEE;text-align:center}
.slide .cap-line{display:block}
.slide .cap-line + .cap-line{opacity:.8;font-size:.8125rem;margin-top:2px}
.ph-art{height:100%;display:grid;place-content:center;gap:8px;text-align:center;padding:24px;color:var(--muted);background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(61,122,122,.07) 14px 28px),var(--paper)}
.ph-art span{font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mid-teal)}
.ph-art b{font-family:var(--display);font-size:1.375rem;font-weight:600;color:var(--deep-teal);max-width:22ch;margin-inline:auto}
.car-ctrl{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.car-btn{font:inherit;font-size:1.125rem;line-height:1;width:40px;height:40px;border-radius:50%;border:1px solid var(--rule);background:var(--paper);color:var(--deep-teal);cursor:pointer}
.car-btn:hover{border-color:var(--mid-teal)}
.dots{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;flex:1;min-width:0}
.dot{width:9px;height:9px;padding:0;border-radius:50%;border:0;background:var(--rule);cursor:pointer}
.dot.is-on{background:var(--mid-teal)}
@media (max-width:760px){.music-grid,.music-sec.flip .music-grid{grid-template-columns:1fr}.music-sec.flip .music-copy{order:0}}
@media (prefers-reduced-motion: reduce){.slide{transition:none}}

/* Partner logos (Volunteering) */
.org-logo{display:inline-flex;align-items:center;justify-self:start;background:#FFFFFF;border:1px solid var(--rule);border-radius:3px;padding:10px 14px;margin-bottom:6px}
.org-logo img{width:auto;max-width:100%;display:block}
.org-logo:hover{border-color:var(--mid-teal)}

/* Footer */
.site-footer { background: var(--hero-bg); color: var(--hero-muted); font-size: 0.875rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-block: 28px; }
.site-footer a { color: var(--hero-fg); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .links { display: flex; flex-wrap: wrap; gap: 6px 20px; }

@media (max-width: 760px) {
  .hero .wrap { grid-template-columns: 1fr; align-items: start; padding-top: 28px; }
  .portrait { order: 2; max-width: 340px; }
  .hero-text { order: 1; padding-bottom: 8px; }
  .about, .two-col, .services { grid-template-columns: 1fr; }
  .role, .entry, .earlier li { grid-template-columns: 1fr; gap: 4px; }
  .years { padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
.links.connect{display:flex;flex-wrap:wrap;gap:8px 24px;font-weight:500}
/* Testimonials (home) */
.quotes{max-width:820px}
.quote-track{display:grid}
.quote{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility .8s;margin:0;background:var(--paper);border:1px solid var(--rule);border-left:3px solid var(--mid-teal);border-radius:3px;padding:clamp(20px,3vw,32px);display:grid;gap:16px;align-content:space-between}
.quote.is-on{opacity:1;visibility:visible}
.quote blockquote{margin:0}
.quote-excerpt{font-family:var(--display);font-size:clamp(1.375rem,2.4vw,1.75rem);line-height:1.35;font-weight:500;color:var(--deep-teal)}
.quote-full{margin-top:14px;font-size:1rem;line-height:1.65;color:var(--ink)}
.quote.is-open .quote-excerpt{display:none}
.quote.is-open .quote-full{margin-top:0}
.quote-toggle{justify-self:start;font:inherit;font-size:.9375rem;font-weight:500;color:var(--mid-teal);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.quote-toggle:hover{color:var(--deep-teal)}
.quote figcaption{display:grid;gap:2px}
.quote figcaption b{font-weight:600;color:var(--deep-teal)}
.quote figcaption span{font-size:.875rem;color:var(--muted)}

.resume-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.name-photo { margin: 8px 0 0; max-width: 420px; }
.name-photo img { width: 100%; height: auto; display: block; border-radius: 3px; }

.engagements { display: grid; gap: 20px; max-width: 760px; }
.callout h3 { font-size: var(--step-h3); font-weight: 600; }
.contact-lines { gap: 4px; }