/* Tokens ----------------------------------------------------- */
:root{
  --ink:#17191B;
  --ink-soft:#242822;
  --paper:#F6F1E7;
  --paper-alt:#FBF9F4;
  --brass:#9C6B1F;
  --brass-deep:#7C5518;
  --muted:#5B564C;
  --line:#DED5C2;
  --line-dark:#3A3F37;
  --on-ink:#EDE7D8;
  --max:1100px;
  --serif:"Fraunces",Georgia,serif;
  --sans:"Archivo",system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important;animation:none!important} }

body{margin:0;font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.6;font-size:1.05rem}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.15;margin:0 0 .5em}
p{margin:0 0 1em;max-width:62ch;color:var(--muted)}
a{color:inherit}
ul,ol{margin:0;padding:0}

/* IMAGES: never force a crop ratio. Natural proportions only. */
img{max-width:100%;height:auto;display:block}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
section{padding:72px 0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--on-ink);padding:12px 18px;z-index:100}
.skip-link:focus{left:16px;top:16px}
a:focus-visible,button:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

/* Header ------------------------------------------------------ */
.site-header{position:sticky;top:0;z-index:20;background:rgba(246,241,231,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-family:var(--serif);font-size:1.15rem;font-weight:600;text-decoration:none;color:var(--ink)}
.site-nav{display:flex;gap:26px}
.site-nav a{text-decoration:none;font-size:.95rem;color:var(--muted);border-bottom:1px solid transparent}
.site-nav a:hover{color:var(--ink);border-color:var(--brass)}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px;cursor:pointer}
.nav-toggle span{width:22px;height:2px;background:var(--ink);display:block}

@media (max-width:760px){
  .nav-toggle{display:flex}
  .site-nav{position:absolute;top:64px;left:0;right:0;background:var(--paper-alt);border-bottom:1px solid var(--line);flex-direction:column;gap:0;display:none}
  .site-nav.open{display:flex}
  .site-nav a{padding:16px 24px;border-bottom:1px solid var(--line)}
}

/* Buttons & links ---------------------------------------------- */
.btn{display:inline-block;padding:14px 26px;font-size:.95rem;font-weight:600;text-decoration:none;border-radius:2px}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:var(--brass-deep)}
.btn-ghost{border:1.5px solid var(--ink);color:var(--ink)}
.btn-ghost:hover{border-color:var(--brass);color:var(--brass-deep)}
.text-link{display:inline-block;text-decoration:none;font-weight:600;color:var(--ink);border-bottom:1.5px solid var(--brass);padding-bottom:2px}
.text-link:hover{color:var(--brass-deep)}
.text-link-light{color:var(--on-ink)}

/* Hero ---------------------------------------------------------- */
.hero{padding:72px 0 60px}
.kicker{font-family:var(--sans);font-weight:600;color:var(--brass-deep);margin-bottom:20px;font-size:.92rem}
.hero h1{font-size:clamp(1.9rem,4.5vw,2.8rem);max-width:20ch;margin-bottom:.45em}
.hero-lede{max-width:60ch;font-size:1.1rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin:28px 0 24px}
.hero-links{display:flex;flex-wrap:wrap;gap:20px}
.hero-links a{text-decoration:none;font-weight:600;font-size:.9rem;color:var(--muted);border-bottom:1px solid var(--line)}
.hero-links a:hover{color:var(--brass-deep);border-color:var(--brass)}

/* Intro ---------------------------------------------------------- */
.intro{background:var(--paper-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.intro-grid{display:grid;gap:32px;align-items:start}
.intro-photo{width:100%;max-width:220px;border:1px solid var(--line)}

@media (min-width:700px){ .intro-grid{grid-template-columns:220px 1fr} }

/* Section titles --------------------------------------------------- */
.section-title{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:28px}

/* Areas of work grid ------------------------------------------------ */
.area-grid{display:grid;gap:0;border-top:1px solid var(--line)}
.area-card{padding:26px 0;border-bottom:1px solid var(--line)}
.area-card h3{font-size:1.1rem;margin-bottom:12px}
.area-card ul{list-style:none;display:grid;gap:7px}
.area-card li{color:var(--muted);font-size:.95rem;padding-left:15px;position:relative}
.area-card li::before{content:"";position:absolute;left:0;top:.65em;width:6px;height:1px;background:var(--brass)}
.card-note{font-size:.82rem;margin-top:14px;color:#847E70}

@media (min-width:860px){
  .area-grid{grid-template-columns:repeat(3,1fr);border-top:none}
  .area-card{border-top:1px solid var(--line);border-bottom:none;padding:24px 22px 0 0}
  .area-card:nth-child(3n+1),.area-card:nth-child(3n+2){border-right:1px solid var(--line);padding-right:22px}
}

/* Selected work ------------------------------------------------------ */
.work{background:var(--paper-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.work-item{display:grid;gap:24px;padding:32px 0;border-bottom:1px solid var(--line);align-items:start}
.work-item:last-child{border-bottom:none}
.work-thumb{width:100%;max-width:220px;border:1px solid var(--line)}
.work-item img.work-thumb[src*="nurseshift-logo"]{background:#fff;padding:14px}
.project-label{color:var(--brass-deep);font-weight:600;font-size:.84rem;margin-bottom:5px}
.work-item h3{font-size:1.3rem}
.sample-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px}

@media (min-width:700px){ .work-item{grid-template-columns:220px 1fr} }

/* NurseShift dark section ---------------------------------------- */
.nurseshift{background:var(--ink);color:var(--on-ink)}
.nurseshift-inner{max-width:720px}
.kicker-light{color:var(--brass);font-weight:600;margin-bottom:16px}
.nurseshift h2{color:var(--on-ink);font-size:clamp(1.7rem,3.6vw,2.3rem);max-width:16ch;margin-bottom:20px}
.lede-light{color:#C9C2AF;font-size:1.02rem;max-width:64ch}
.nurseshift-photo{width:100%;max-width:420px;border:1px solid var(--line-dark);margin:24px 0}
.stat-row{display:flex;flex-wrap:wrap;gap:32px;margin:10px 0 28px;padding-top:24px;border-top:1px solid var(--line-dark)}
.stat-row strong{display:block;font-family:var(--serif);font-size:1.8rem;color:var(--brass)}
.stat-row span{font-size:.82rem;color:#A79F8B}

/* Speaking ---------------------------------------------------------- */
.speaking-grid{display:grid;gap:22px;margin-bottom:40px}
.speaking-card img{border:1px solid var(--line);margin-bottom:14px}
.speaking-card h3{font-size:1.1rem;margin:2px 0 0}
.speaking-topics h3{font-size:1rem;color:var(--muted);font-family:var(--sans);font-weight:700;margin-bottom:14px}

@media (min-width:700px){ .speaking-grid{grid-template-columns:repeat(2,1fr)} }

.tag-list{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 1.4em}
.tag-list li{font-size:.84rem;color:var(--ink);background:var(--paper-alt);border:1px solid var(--line);padding:6px 12px}

/* About --------------------------------------------------------------- */
.about{background:var(--paper-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.about-block{max-width:62ch}
.about-credentials{font-size:.85rem;color:#847E70;margin-top:1.6em}

/* Collaboration / contact ----------------------------------------------- */
.collab{background:var(--ink);color:var(--on-ink)}
.collab-inner{max-width:640px}
.collab h2{color:var(--on-ink);font-size:clamp(1.7rem,3.6vw,2.3rem)}
.collab p{color:#C9C2AF;font-size:1.02rem}
.collab .btn-primary{background:var(--brass);color:var(--ink)}
.collab .btn-primary:hover{background:#B67E28}
.collab .btn-ghost{border-color:var(--on-ink);color:var(--on-ink)}
.collab .btn-ghost:hover{border-color:var(--brass);color:var(--brass)}
.collab-secondary{margin-top:6px}
.collab-secondary a{font-size:.9rem;color:#C9C2AF;text-decoration:none;border-bottom:1px solid var(--line-dark)}
.collab-secondary a:hover{color:var(--brass)}

/* Footer ----------------------------------------------------------------- */
.site-footer{background:var(--ink-soft);color:#A79F8B;padding:40px 0}
.footer-inner{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center}
.brand-footer{font-family:var(--serif);color:var(--on-ink);margin:0;font-size:1.05rem}
.footer-tag{margin:4px 0 0;font-size:.82rem}
.footer-links{display:flex;gap:18px}
.footer-links a{text-decoration:none;font-size:.88rem;color:#A79F8B}
.footer-links a:hover{color:var(--brass)}
.copyright{margin:0;font-size:.8rem;width:100%}

@media (min-width:760px){ .copyright{width:auto} }