/* Bex Mills — "Red pencil on baize": a copy editor's proof, laid on a casino table */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=Public+Sans:wght@400;500;600&display=swap');

:root{
  --felt:#123D32;
  --felt-deep:#0C2C24;
  --felt-ink:#E9F0EA;
  --felt-soft:#B7CABF;
  --paper:#F4F6F1;
  --paper-2:#E8ECE5;
  --ink:#1A2420;
  --sage:#5B6D63;
  --rule:#CBD3CC;
  --pencil:#C22A2E;
  --serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:'Public Sans', -apple-system, 'Segoe UI', sans-serif;
  --measure:38em;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--serif); font-size:1.125rem; line-height:1.65; -webkit-font-smoothing:antialiased;}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration-thickness:1px; text-underline-offset:.18em;}
a:hover{color:var(--pencil);}
:focus-visible{outline:2px solid var(--pencil); outline-offset:3px; border-radius:2px;}
.wrap{max-width:1040px; margin:0 auto; padding:0 24px;}
.skip{position:absolute; left:-999px; top:8px; background:var(--ink); color:var(--paper); padding:8px 14px; font-family:var(--sans); font-size:.9rem; z-index:100;}
.skip:focus{left:8px;}

/* ---------- nav ---------- */
.topnav{background:var(--felt); color:var(--felt-ink); border-bottom:1px solid rgba(255,255,255,.08);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:18px; padding-bottom:18px; flex-wrap:wrap;}
.nav-logo{font-family:var(--serif); font-size:1.35rem; font-weight:500; text-decoration:none; letter-spacing:-.01em;}
.nav-logo:hover{color:var(--felt-ink);}
.nav-links{display:flex; gap:28px; font-family:var(--sans); font-size:.95rem;}
.nav-links a{text-decoration:none; color:var(--felt-soft); padding:4px 0; border-bottom:2px solid transparent;}
.nav-links a:hover{color:var(--felt-ink);}
.nav-links a.active{color:var(--felt-ink); border-bottom-color:var(--pencil);}
.nav-toggle{display:none; background:none; border:1px solid rgba(255,255,255,.25); border-radius:4px; padding:9px 8px; cursor:pointer;}
.nav-toggle span{display:block; width:20px; height:2px; background:var(--felt-ink); margin:4px 0;}

/* ---------- hero (home) ---------- */
.hero{background:var(--felt); color:var(--felt-ink); padding:64px 0 88px; position:relative; overflow:hidden;}
.hero::after{ /* the table edge: a thin rail where the baize meets the paper */
  content:""; position:absolute; left:0; right:0; bottom:0; height:6px; background:var(--felt-deep);}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:56px; align-items:center;}
.hero-name{font-family:var(--serif); font-weight:400; font-size:clamp(3.4rem,9vw,6.4rem); line-height:.95; letter-spacing:-.025em; margin:0 0 20px;}
.hero-role{font-family:var(--sans); font-size:1.1rem; font-weight:500; margin:0 0 28px; color:var(--felt-ink);}
.hero-lede{max-width:var(--measure); margin:0 0 20px; color:var(--felt-soft); font-size:1.2rem;}
.hero-proof{display:flex; gap:14px; align-items:flex-start; max-width:var(--measure); margin:0 0 36px; font-style:italic; font-size:1.2rem; color:var(--felt-ink);}
.hero-proof svg{flex:0 0 34px; margin-top:-2px;}
.hero-proof path{stroke:#FF8A80;} /* the pencil reads brighter on baize */
.hero-byline{display:inline-flex; align-items:center; gap:14px; font-family:var(--sans); font-size:.95rem; color:var(--felt-soft); text-decoration:none; padding:10px 16px 10px 10px; border:1px solid rgba(255,255,255,.18); border-radius:6px;}
.hero-byline img{width:36px; height:36px; object-fit:contain; background:#fff; border-radius:4px; padding:4px;}
.hero-byline strong{color:var(--felt-ink); font-weight:600;}
.hero-byline:hover{color:var(--felt-ink); border-color:rgba(255,255,255,.4);}
.hero-photo{justify-self:end; width:100%; max-width:340px;}
.hero-photo img{width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:3px; box-shadow:14px 14px 0 var(--felt-deep);}
.hero-photo figcaption{font-family:var(--sans); font-size:.8rem; color:var(--felt-soft); margin-top:22px;}

/* the one orchestrated moment: the tick is drawn once on load */
.tick path{fill:none; stroke:var(--pencil); stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round;}
.hero-proof .tick path{stroke-dasharray:60; stroke-dashoffset:60; animation:draw .7s .5s cubic-bezier(.6,0,.3,1) forwards;}
@keyframes draw{to{stroke-dashoffset:0;}}
@media (prefers-reduced-motion: reduce){ .hero-proof .tick path{animation:none; stroke-dashoffset:0;} }

/* ---------- inner page hero ---------- */
.page-hero{background:var(--felt); color:var(--felt-ink); padding:56px 0 64px; position:relative;}
.page-hero::after{content:""; position:absolute; left:0; right:0; bottom:0; height:6px; background:var(--felt-deep);}
.page-hero h1{font-weight:400; font-size:clamp(2.4rem,6vw,4rem); line-height:1.02; letter-spacing:-.02em; margin:0 0 16px;}
.page-hero p{max-width:var(--measure); color:var(--felt-soft); font-size:1.2rem; margin:0;}

/* ---------- sections ---------- */
section{padding:80px 0; border-bottom:1px solid var(--rule);}
section:last-of-type{border-bottom:none;}
h2{font-weight:400; font-size:clamp(2rem,4.2vw,2.8rem); line-height:1.1; letter-spacing:-.015em; margin:0 0 14px;}
h3{font-weight:500; font-size:1.3rem; line-height:1.3; margin:0;}
.lede{max-width:var(--measure); color:var(--sage); margin:0 0 36px;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:12px;}
.section-head .lede{margin-bottom:0;}

/* ---------- coverage: a proofed checklist ---------- */
.filter-bar{display:flex; flex-wrap:wrap; gap:4px 22px; font-family:var(--sans); font-size:.95rem;}
.filter-btn{background:none; border:none; padding:6px 0; font:inherit; color:var(--sage); cursor:pointer; border-bottom:2px solid transparent;}
.filter-btn:hover{color:var(--ink);}
.filter-btn.active{color:var(--ink); border-bottom-color:var(--pencil);}
.checklist{list-style:none; margin:28px 0 0; padding:0; border-top:1px solid var(--ink);}
.checklist li{display:grid; grid-template-columns:40px minmax(0,15rem) minmax(0,1fr) auto; gap:8px 24px; align-items:baseline; padding:22px 0; border-bottom:1px solid var(--rule);}
.checklist li.hidden{display:none;}
.checklist .tick{align-self:start; margin-top:2px;}
.checklist p{margin:0; color:var(--sage); max-width:var(--measure);}
.checklist .topic{font-family:var(--sans); font-size:.85rem; color:var(--sage); white-space:nowrap;}

/* ---------- about ---------- */
.about-grid{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:64px; align-items:start;}
.pull{margin:0; font-size:clamp(1.45rem,2.6vw,1.9rem); line-height:1.4; font-weight:400;}
.pull p{margin:0 0 18px;}
.pull footer{font-family:var(--sans); font-size:.9rem; color:var(--sage); background:none; padding:0; text-align:left;}
.pull footer a{color:var(--sage);}
.facts{margin:0; font-family:var(--sans); font-size:.95rem;}
.facts div{padding:16px 0; border-top:1px solid var(--rule);}
.facts div:last-child{border-bottom:1px solid var(--rule);}
.facts dt{color:var(--sage); margin-bottom:2px;}
.facts dd{margin:0; font-family:var(--serif); font-size:1.15rem;}

/* ---------- profiles ---------- */
.profiles{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); column-gap:40px;}
.profiles li{border-top:1px solid var(--rule);}
.profiles a{display:block; padding:18px 0 20px; text-decoration:none;}
.profiles .name{display:block; font-size:1.2rem; font-weight:500; text-decoration:underline; text-decoration-color:var(--rule); text-underline-offset:.2em;}
.profiles a:hover .name{text-decoration-color:var(--pencil);}
.profiles .what{display:block; font-family:var(--sans); font-size:.9rem; color:var(--sage); margin-top:2px;}
.profiles.compact{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));}

/* ---------- next steps ---------- */
.next{display:grid; grid-template-columns:1fr 1fr; gap:0 48px;}
.next a{display:block; padding:28px 0; border-top:2px solid var(--ink); text-decoration:none;}
.next h3{font-size:1.6rem; font-weight:400; margin-bottom:6px;}
.next p{margin:0; color:var(--sage);}
.next a:hover h3{color:var(--pencil);}

/* ---------- career ---------- */
.overview{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:64px; align-items:start;}
.overview p{margin:0 0 20px; max-width:var(--measure);}
.timeline{list-style:none; margin:0; padding:0; border-top:1px solid var(--ink);}
.timeline li{display:grid; grid-template-columns:44px minmax(0,11rem) minmax(0,1fr); gap:8px 24px; align-items:center; padding:22px 0; border-bottom:1px solid var(--rule);}
.timeline img{width:40px; height:40px; object-fit:contain; background:#fff; border:1px solid var(--rule); border-radius:4px; padding:4px;}
.timeline .when{font-family:var(--sans); font-size:.9rem; color:var(--sage);}
.timeline .now .when{color:var(--pencil); font-weight:600;}
.timeline p{margin:2px 0 0; color:var(--sage); font-size:1rem;}
.degree{max-width:var(--measure);}
.degree p{margin:4px 0 0; color:var(--sage);}
.back-link{display:inline-block; margin-top:40px; font-family:var(--sans); font-size:.95rem;}

/* ---------- contact ---------- */
.contact-layout{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:72px; align-items:start;}
.contact-form{max-width:560px;}
.form-row{margin-bottom:20px;}
.form-row label{display:block; font-family:var(--sans); font-size:.9rem; font-weight:500; margin-bottom:6px;}
.form-row input,.form-row textarea{width:100%; font:inherit; font-size:1.05rem; color:var(--ink); background:#fff; border:1px solid var(--rule); border-bottom:2px solid var(--ink); border-radius:3px 3px 0 0; padding:11px 12px;}
.form-row input:focus,.form-row textarea:focus{outline:none; border-bottom-color:var(--pencil); box-shadow:0 2px 0 0 var(--pencil);}
.consent{display:flex; align-items:flex-start; gap:10px; margin:6px 0 24px; font-family:var(--sans); font-size:.9rem; line-height:1.5; color:var(--sage);}
.consent input{margin-top:4px; flex-shrink:0; accent-color:var(--felt);}
.btn{display:inline-block; font-family:var(--sans); font-size:1rem; font-weight:600; text-decoration:none; padding:13px 26px; border-radius:4px; cursor:pointer; border:2px solid var(--felt); background:var(--felt); color:var(--felt-ink);}
.btn:hover{background:var(--felt-deep); border-color:var(--felt-deep); color:var(--felt-ink);}
.form-note{font-family:var(--sans); font-size:.85rem; color:var(--sage); margin:14px 0 0;}
.aside h3{margin-bottom:6px;}
.aside > p{color:var(--sage); margin:0 0 24px;}

/* ---------- footer ---------- */
.site-footer{background:var(--felt); color:var(--felt-soft); font-family:var(--sans); font-size:.9rem; padding:48px 0 56px;}
.site-footer .wrap{display:grid; grid-template-columns:1fr auto; gap:20px 40px;}
.site-footer .fname{font-family:var(--serif); font-size:1.3rem; color:var(--felt-ink); margin:0 0 4px;}
.site-footer p{margin:0;}
.site-footer nav{display:flex; gap:22px; flex-wrap:wrap; align-items:flex-start;}
.site-footer a{color:var(--felt-soft);}
.site-footer a:hover{color:var(--felt-ink);}
.site-footer .small{grid-column:1 / -1; font-size:.8rem; max-width:44em; line-height:1.55; padding-top:20px; border-top:1px solid rgba(255,255,255,.12);}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .hero-grid,.about-grid,.overview,.contact-layout{grid-template-columns:1fr; gap:44px;}
  .hero-photo{justify-self:start; max-width:260px; order:-1;}
  .hero{padding:44px 0 64px;}
  .checklist li{grid-template-columns:32px minmax(0,1fr); }
  .checklist li p,.checklist li .topic{grid-column:2;}
  .timeline li{grid-template-columns:44px minmax(0,1fr);}
  .timeline li > div{grid-column:2;}
  .next{grid-template-columns:1fr;}
  section{padding:60px 0;}
}
@media (max-width:640px){
  .nav-toggle{display:block;}
  .nav-links{display:none; width:100%; flex-direction:column; gap:0; padding:8px 0 4px;}
  .nav-links.open{display:flex;}
  .nav-links a{padding:12px 0; border-bottom:1px solid rgba(255,255,255,.08);}
  .nav-links a.active{border-bottom-color:var(--pencil);}
  .wrap{padding:0 16px;}
  .site-footer .wrap{grid-template-columns:1fr;}
}