:root{
  --ink:#14181f; --ink-2:#1d2330; --cream:#f6f1e8; --paper:#fbf8f2;
  --text:#22262e; --muted:#6a6f78; --line:#e4ddd0;
  --brass:#b8873b; --brass-soft:#e9d6b2;
  --serif:"Fraunces",Georgia,serif; --sans:"Inter",system-ui,-apple-system,sans-serif;
  --max:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--text);background:var(--paper);line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);font-weight:600}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.12;letter-spacing:-.01em}
h2{font-size:clamp(30px,4vw,44px);margin:10px 0 18px}
h3{font-size:21px}
.lede{font-size:19px;color:var(--muted);max-width:640px}
section{padding:96px 0}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:999px;font-weight:600;font-size:15px;text-decoration:none;transition:.2s}
.btn-primary{background:var(--brass);color:#fff}
.btn-primary:hover{background:#a2752f}
.btn-ghost{border:1px solid rgba(255,255,255,.3);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.08)}

/* Nav */
nav{position:fixed;inset:0 0 auto 0;z-index:50;transition:.25s}
nav.scrolled{background:rgba(20,24,31,.92);backdrop-filter:blur(10px)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{font-family:var(--serif);font-size:20px;color:#fff;text-decoration:none;font-weight:600}
.logo span{color:var(--brass)}
.logo{display:flex;align-items:center;gap:10px}.logo img{border-radius:50%}
.links{display:flex;gap:28px;list-style:none}
.links a{color:rgba(255,255,255,.8);text-decoration:none;font-size:14px;font-weight:500}
.links a:hover{color:#fff}
.menu-btn{display:none;background:none;border:0;color:#fff;font-size:15px;font-weight:600;cursor:pointer}

/* Hero */
.hero{background:linear-gradient(90deg,rgba(20,24,31,.96) 0%,rgba(20,24,31,.85) 45%,rgba(20,24,31,.6) 100%),url(images/banner-0.jpg) center/cover var(--ink);color:#fff;padding:150px 0 100px;position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center}
.hero h1{font-size:clamp(44px,6.5vw,78px);margin:16px 0 22px}
.hero h1 em{font-style:italic;color:var(--brass-soft);font-weight:400}
.hero p{font-size:19px;color:rgba(255,255,255,.75);max-width:540px;margin-bottom:34px}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.portrait{aspect-ratio:4/5;border-radius:20px;overflow:hidden;position:relative;background:linear-gradient(150deg,#3a3326,#1d2330 70%);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:22% center}
.portrait .mono{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:120px;color:rgba(233,214,178,.35)}
.portrait img + .mono{display:none}
.portrait.noimg img{display:none}.portrait.noimg .mono{display:flex}

/* Stats */
.stats{background:var(--ink-2);color:#fff;padding:0}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:34px 20px;border-left:1px solid rgba(255,255,255,.08)}
.stat:first-child{border-left:0}
.stat b{display:block;font-family:var(--serif);font-size:38px;color:var(--brass-soft);font-weight:600}
.stat span{font-size:14px;color:rgba(255,255,255,.65)}

/* Videos */
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.vcard{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;transition:.2s}
.vcard:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(20,24,31,.1)}
.thumb{aspect-ratio:16/9;background-color:#232938;background-size:cover;display:flex;align-items:center;justify-content:center;position:relative}
.thumb:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,24,31,.1),rgba(20,24,31,.55))}
.thumb .play{display:none;position:relative;width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center}
.thumb .play:after{content:"";border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.thumb small{position:absolute;left:14px;bottom:12px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-soft)}
.vbody{padding:18px 20px 22px}
.vbody h3{font-size:19px;margin-bottom:4px}
.vbody p{font-size:14px;color:var(--muted)}
.vgrid.feature .vcard:first-child{grid-column:span 2;grid-row:span 2}
.vgrid.feature .vcard:first-child .thumb{aspect-ratio:auto;height:calc(100% - 92px);min-height:260px}
figure.vcard:hover{transform:none;box-shadow:none}

/* Skills */
.skills{background:var(--cream)}
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.scard{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:28px}
.scard .ic{width:42px;height:42px;border-radius:10px;background:var(--ink);color:var(--brass-soft);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.scard h3{margin-bottom:12px}
.scard ul{list-style:none}
.scard li{font-size:15px;padding:7px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:10px}
.scard li:first-child{border-top:0}
.scard li em{font-style:normal;color:var(--muted);font-size:13px;white-space:nowrap}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px}
.tags span{font-size:13px;padding:7px 14px;border-radius:999px;background:var(--paper);border:1px solid var(--line)}

/* Experience */
.xp{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px}
.timeline{border-left:2px solid var(--line);padding-left:32px}
.role{position:relative;padding-bottom:40px}
.role:last-child{padding-bottom:0}
.role:before{content:"";position:absolute;left:-41px;top:6px;width:16px;height:16px;border-radius:50%;background:var(--paper);border:3px solid var(--brass)}
.role .when{font-size:13px;font-weight:600;color:var(--brass);letter-spacing:.06em}
.role h3{margin:4px 0 2px}
.role .where{font-size:15px;color:var(--muted);margin-bottom:10px}
.role p{font-size:16px}
.role ul{padding-left:18px;font-size:15.5px}.role li{margin:4px 0}
.edu{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px;padding:22px 24px;background:var(--cream);border-radius:14px;font-size:14.5px;color:var(--muted)}.edu b{display:block;color:var(--text);font-family:var(--serif);font-size:17px;margin-bottom:6px}
@media (max-width:600px){.edu{grid-template-columns:1fr}}

.teamfig{margin-top:36px}.teamfig img{border-radius:14px;width:100%}.teamfig figcaption{font-size:13px;color:var(--muted);margin-top:8px}
/* Setlist */
.setlist{background:var(--ink);color:#fff}
.setlist .lede{color:rgba(255,255,255,.65)}
.songs{columns:3;column-gap:40px;margin-top:40px;list-style:none;counter-reset:s}
.songs li{break-inside:avoid;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1);counter-increment:s;display:flex;gap:16px;align-items:baseline}
.songs li:before{content:counter(s,decimal-leading-zero);font-size:12px;color:var(--brass);font-weight:600}
.songs li span{font-family:var(--serif);font-size:19px}
.songs li small{display:block;font-size:13px;color:rgba(255,255,255,.5)}
.artists{margin-top:44px;font-size:15px;color:rgba(255,255,255,.6)}
.artists b{color:#fff;font-weight:600}

/* Philosophy */
.phil{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
blockquote{font-family:var(--serif);font-size:clamp(24px,2.8vw,32px);line-height:1.35;border-left:3px solid var(--brass);padding-left:26px;margin:20px 0 28px}
.pillars{display:grid;gap:16px}
.pillar{padding:22px 24px;border:1px solid var(--line);border-radius:14px;background:#fff}
.pillar h3{font-size:18px;margin-bottom:4px}
.pillar p{font-size:15px;color:var(--muted)}
.beliefs{margin-top:28px;padding:22px 24px;border-radius:14px;background:var(--cream);font-size:15px}
.beliefs b{display:block;font-family:var(--serif);font-size:18px;margin-bottom:6px}

/* Family */
.family{background:var(--cream)}
.fam{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center}
.fam-photo{aspect-ratio:1/1;border-radius:20px;overflow:hidden;background:linear-gradient(150deg,#e9d6b2,#cdb48a);position:relative}
.fam-photo img{width:100%;height:100%;object-fit:cover}
.fam-photo.noimg img{display:none}
.fam-photo .mono{display:none;position:absolute;inset:0;align-items:center;justify-content:center;font-family:var(--serif);font-size:64px;color:rgba(20,24,31,.25)}
.fam-photo.noimg .mono{display:flex}

/* Contact */
.contact{background:var(--ink);color:#fff;text-align:center}
.contact h2{font-size:clamp(34px,5vw,56px)}
.contact .lede{color:rgba(255,255,255,.65);margin:0 auto 36px}
.cards{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;margin-bottom:34px}
.ccard{padding:20px 28px;border:1px solid rgba(255,255,255,.14);border-radius:14px;text-decoration:none;min-width:240px}
.ccard:hover{border-color:var(--brass)}
.ccard small{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin-bottom:4px}
footer{background:var(--ink);color:rgba(255,255,255,.4);font-size:13px;text-align:center;padding:0 0 40px}

/* Reveal */
.r{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.r.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.r{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* Responsive */
@media (max-width:900px){
  section{padding:72px 0}
  .hero{padding:120px 0 70px}
  .hero .wrap,.xp,.phil,.fam{grid-template-columns:1fr;gap:40px}
  .portrait{max-width:380px}
  .hero{background:linear-gradient(rgba(20,24,31,.9),rgba(20,24,31,.94)),url(images/banner-0.jpg) center/cover var(--ink)}
  .vgrid,.sgrid{grid-template-columns:1fr 1fr}
  .vgrid.feature .vcard:first-child{grid-column:span 2;grid-row:auto}
  .vgrid.feature .vcard:first-child .thumb{height:auto;aspect-ratio:16/9;min-height:0}
  .songs{columns:2}
  .stats .wrap{grid-template-columns:1fr 1fr}
  .stat:nth-child(3){border-left:0}
  .stat{border-top:1px solid rgba(255,255,255,.08)}
  .links{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;gap:0;background:var(--ink);padding:8px 24px 20px}
  .links.open{display:flex}
  .links a{display:block;padding:12px 0}
  .menu-btn{display:block}
  nav.open{background:var(--ink)}
}
@media (max-width:600px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  .vgrid,.sgrid{grid-template-columns:1fr}
  .vgrid.feature .vcard:first-child{grid-column:auto}
  .songs{columns:1}
  .ccard{min-width:0;width:100%}
}

/* ---- Multi-page additions ---- */
nav.solid{background:var(--ink)}
.links a[aria-current=page]{color:#fff;box-shadow:inset 0 -2px 0 var(--brass)}
.hero .loc{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:rgba(255,255,255,.7);margin-top:10px}
.more{display:inline-block;margin-top:22px;font-weight:600;color:var(--brass);text-decoration:none}
.more:hover{text-decoration:underline}
.dark .more{color:var(--brass-soft)}
.teaser{background:var(--cream)}
.teaser blockquote{max-width:820px}
.conviction{margin-top:30px;font-size:16px;color:rgba(255,255,255,.75);max-width:760px;border-left:3px solid var(--brass);padding-left:18px}
.pagehead{background:var(--ink);color:#fff;padding:130px 0 60px}
.pagehead h1{font-size:clamp(36px,5vw,56px);margin:12px 0 14px}
.pagehead p{color:rgba(255,255,255,.7);max-width:640px;font-size:18px}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.toc a{font-size:13px;padding:7px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.85);text-decoration:none}
.toc a:hover{border-color:var(--brass)}
.prose{max-width:760px}
.prose p{margin-bottom:16px}
.prose h3{margin:26px 0 8px}
.prose ul{padding-left:20px;margin-bottom:16px}.prose li{margin:5px 0}
.block{padding:72px 0;border-top:1px solid var(--line)}
.block:first-of-type{border-top:0}
.block.alt{background:var(--cream);border-top:0}
.block h2{margin-top:6px}
.two{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
.creed{font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.6;border-left:3px solid var(--brass);padding:4px 0 4px 22px;margin:14px 0 18px;white-space:pre-line}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;margin-top:30px}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;background:var(--line)}
.gallery img.tall{aspect-ratio:3/4}
.gallery figcaption{font-size:13.5px;color:var(--muted);margin-top:7px;line-height:1.45}
.photo{border-radius:16px;width:100%}
.photo-cap{font-size:13.5px;color:var(--muted);margin-top:8px}
.faq dt{font-family:var(--serif);font-weight:600;font-size:19px;margin-top:24px}
.faq dd{margin:6px 0 0;color:var(--text)}
.faq dd img{max-width:280px;margin-top:8px;border-radius:12px;border:1px solid var(--line)}
.takes{list-style:none;padding:0;display:grid;gap:12px;max-width:820px}
.takes li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 20px}
.cols{columns:2;column-gap:40px}
.cols li{break-inside:avoid}
/* Videos */
.vlist{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:10px}
.vitem{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.vitem.lead{grid-column:span 2}
.vframe{position:relative;aspect-ratio:16/9;background:#000}
.vframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vmeta{padding:16px 20px 20px}
.vmeta h3{font-size:20px}
.vmeta p{font-size:14px;color:var(--muted);margin-top:2px}
.note{background:var(--cream);border-radius:12px;padding:16px 20px;font-size:14.5px;color:var(--muted);margin-top:30px;max-width:760px}
/* Resume */
.cv{max-width:860px}
.cv .role{padding-bottom:30px}
.cv h2{font-size:28px;margin:0 0 16px}
.cv section{padding:0;margin-bottom:46px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{font-size:13.5px;padding:6px 13px;border-radius:999px;background:var(--cream);border:1px solid var(--line)}
.cvgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.cvgrid div{font-size:15px}
.cvgrid b{display:block;font-family:var(--serif);font-size:17px}
/* Oct 23 updates */
figure.vcard .vbody{padding:12px 18px 14px}
figure.vcard .vbody h3{font-family:var(--sans);font-weight:400;font-size:14px;color:var(--muted);margin:0}
.stack{margin:0;display:grid;gap:14px}
.stack figcaption{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600}
.stack img{width:100%;border-radius:12px}
.cv .btn-primary,.pagehead .btn-primary{font-size:18px;font-weight:700;padding:17px 30px;gap:10px}
.dl-note{font-size:13px;color:var(--muted);margin-top:8px}
.pagehead .dl-note{color:rgba(255,255,255,.6);font-size:13px;margin-top:8px}
.vgrid.feature figure.vcard:first-child .thumb{height:calc(100% - 46px)}
@media (max-width:600px){.cv .btn-primary,.pagehead .btn-primary{display:flex;width:100%;justify-content:center}}
@media (max-width:900px){.two{grid-template-columns:1fr}.vlist{grid-template-columns:1fr}.vitem.lead{grid-column:auto}.cvgrid{grid-template-columns:1fr}.cols{columns:1}.pagehead{padding:110px 0 46px}.block{padding:56px 0}}

/* Custom video thumbnails (click to load player) */
.vplay{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;margin:0;cursor:pointer;background:#000;display:block}
.vplay img{width:100%;height:100%;object-fit:cover}
.vplay .pbtn{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:rgba(184,135,59,.94);box-shadow:0 8px 24px rgba(0,0,0,.35);transition:transform .2s}
.vplay .pbtn:after{content:"";position:absolute;left:30px;top:24px;border-left:22px solid #fff;border-top:14px solid transparent;border-bottom:14px solid transparent}
.vplay:hover .pbtn{transform:scale(1.08)}
.vplay:focus-visible{outline:3px solid var(--brass);outline-offset:-3px}

/* Oct 24: uncropped justified photo rows + vertical skills stack */
.jgal{display:grid;gap:18px;margin-top:30px}
.jrow{display:flex;gap:18px;align-items:flex-start}
.jrow figure{margin:0;min-width:0}
.jrow img{width:100%;height:auto;border-radius:12px;background:var(--line)}
.jrow figcaption,.vstack figcaption{font-size:13.5px;color:var(--muted);margin-top:7px;line-height:1.45}
.vstack{display:grid;gap:22px}
.vstack figure{margin:0}
.vstack img{width:100%;height:auto;border-radius:12px}
@media (max-width:600px){.jrow{flex-direction:column}.jrow figure{flex:none!important;width:100%}}

.lede .indent{display:inline-block;padding-left:2.2em}
@media (max-width:600px){.logo b{font-size:17px}}