:root{
  --ink:#101413; --ink-70:rgba(16,20,19,.7); --ink-60:rgba(16,20,19,.6); --ink-50:rgba(16,20,19,.5);
  --line:rgba(16,20,19,.1); --line-strong:rgba(16,20,19,.18);
  --dark:#0d1b18; --paper:#fff; --wash:#f3f6f4;
  --accent:oklch(0.72 0.12 175); --accent-ink:oklch(0.5 0.09 175); --accent-mid:oklch(0.55 0.09 175); --accent-light:oklch(0.82 0.09 175);
  --wrap:1240px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:16px;line-height:1.5}
img{max-width:100%;height:auto}
a{color:var(--accent-ink)}
a:hover{color:oklch(0.42 0.09 175)}
h1,h2,h3{letter-spacing:-.028em;text-wrap:pretty}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,4.6vw,40px)}
.skip{position:absolute;left:-9999px;top:0;background:var(--dark);color:#fff;padding:12px 18px;z-index:50}
.skip:focus{left:12px;top:12px}

/* header */
.site-head{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:16px;padding-bottom:16px}
.brand{text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:1px}
.brand b{font-size:16px;font-weight:800;letter-spacing:-.02em}
.brand span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-50)}
.nav{display:flex;align-items:center;gap:26px;font-size:13.5px;font-weight:500}
.nav a{text-decoration:none;color:var(--ink-60)}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);font-weight:700}
/* shown only on narrow screens (see responsive block). .btn.call-sm needs the
   extra specificity to beat the .btn display rule further down. */
.nav-toggle{display:none}
.btn.call-sm{display:none}
.nav-toggle{background:transparent;border:1px solid var(--line-strong);border-radius:9px;padding:0;margin:0;width:44px;height:44px;flex:none;align-items:center;justify-content:center;cursor:pointer;color:var(--ink)}
.nav-toggle:hover{background:var(--wash)}
.nav-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nav-toggle .bars{position:relative;display:block;width:18px;height:2px;background:currentColor;border-radius:2px;transition:background-color .18s ease}
.nav-toggle .bars::before,.nav-toggle .bars::after{content:"";position:absolute;left:0;display:block;width:18px;height:2px;background:currentColor;border-radius:2px;transition:transform .18s ease}
.nav-toggle .bars::before{top:-6px}
.nav-toggle .bars::after{top:6px}
.nav-toggle[aria-expanded="true"] .bars{background:transparent}
.nav-toggle[aria-expanded="true"] .bars::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bars::after{transform:translateY(-6px) rotate(-45deg)}
.btn{display:inline-block;text-decoration:none;background:var(--accent);color:#06110e;padding:15px 26px;border-radius:8px;font-size:14px;font-weight:700}
.btn:hover{background:oklch(0.66 0.12 175);color:#06110e}
.btn-sm{padding:11px 20px;font-size:13px}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line-strong)}
.btn-ghost:hover{background:var(--wash);color:var(--ink)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000;color:#fff}

/* type + layout helpers */
.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--accent-mid)}
.lede{font-size:16.5px;line-height:1.7;color:var(--ink-70)}
.section{padding-block:clamp(40px,6.4vw,64px)}
.section-sm{padding-block:clamp(32px,4.4vw,44px)}
.page-head{padding-top:clamp(34px,5.4vw,64px)}
.page-head h1{margin:18px 0 0;font-size:clamp(29px,5.6vw,54px);line-height:1.04;font-weight:800}
.h2-big{margin:0;font-size:clamp(26px,3.8vw,38px);line-height:1.12;font-weight:700}
.split{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:end}
.two{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.prose p{font-size:16px;line-height:1.8;color:rgba(16,20,19,.76);margin:0}
.prose h2{margin:14px 0 0;font-size:24px;font-weight:700}
.stack{display:flex;flex-direction:column;gap:20px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.serif-lead{margin:0;font-family:'Newsreader',Georgia,serif;font-size:clamp(19px,2.6vw,26px);line-height:1.5;font-weight:300}
.bio-split{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:start}
/* Source photos top out at ~447px, so these blocks are capped to keep every
   image at or near its native size. Raise the caps when higher-res art lands. */
.img-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:900px}
.img-row img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:12px;display:block}
/* keeps the award headline and Dr. Tripp's own listing in frame, rather than
   cropping to the other physicians listed further down the poster */
.img-row img.top{object-position:center top}
.photo-figure{margin:0;max-width:440px;display:flex;flex-direction:column;gap:10px}
.photo-figure img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:16px;display:block}
.photo-figure figcaption{font-size:12px;line-height:1.5;color:var(--ink-50)}
/* for a figure that closes a page with nothing beside it */
.photo-figure.center{margin-inline:auto;text-align:center}

/* hero */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;padding:70px 0 62px}
.hero h1{margin:0;font-size:clamp(32px,6vw,58px);line-height:1.02;font-weight:800;letter-spacing:-.038em}
.hero p{margin:0;font-size:17px;line-height:1.68;color:var(--ink-70);max-width:47ch}
.pill{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;border:1px solid rgba(16,20,19,.15);border-radius:999px;padding:7px 15px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--accent-ink)}
.dot{width:5px;height:5px;border-radius:50%;background:var(--accent)}
.hero-media{position:relative}
/* 1:1 matches the source exactly — a 4/5 crop both cropped and upscaled it */
.hero-media img{width:100%;aspect-ratio:1;object-fit:cover;object-position:center 22%;display:block;border-radius:14px}
.badge{position:absolute;left:-24px;bottom:26px;background:var(--dark);color:#f2f5f3;padding:18px 24px;border-radius:12px;max-width:214px}
.badge b{display:block;font-size:clamp(24px,3.4vw,30px);line-height:1;font-weight:800;letter-spacing:-.03em}
.badge span{display:block;font-size:11.5px;line-height:1.45;color:rgba(242,245,243,.72);margin-top:6px}

/* stat strip */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip-in{display:grid;grid-template-columns:repeat(4,1fr)}
.strip-in div{padding:28px 24px;border-right:1px solid var(--line)}
.strip-in div:last-child{border-right:0}
.strip-in b{display:block;font-size:clamp(26px,3.6vw,32px);line-height:1;font-weight:800;letter-spacing:-.03em}
.strip-in span{display:block;font-size:11.5px;color:var(--ink-60);margin-top:6px;line-height:1.45}

/* cards */
.panel{background:var(--wash);border-radius:18px;padding:44px 46px;display:flex;flex-direction:column;gap:26px}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px}
.panel-head h2{margin:0;font-size:clamp(22px,3.4vw,30px);font-weight:700}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.card{background:var(--paper);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:9px}
.card.invert{background:var(--dark);color:#f2f5f3}
.card .yr{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;color:var(--accent-mid)}
.card.invert .yr{color:var(--accent-light)}
.card b{font-size:16px;font-weight:700;line-height:1.32}
.card span{font-size:13px;line-height:1.55;color:var(--ink-60)}
.card.invert span{color:rgba(242,245,243,.6)}
.photos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.photos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;display:block}
.photos img.wide{grid-column:span 2;aspect-ratio:2.2}

/* ledger */
.ledger-block{display:grid;grid-template-columns:220px 1fr;gap:48px;padding-top:52px}
.ledger-block>h2{margin:0;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-50);padding-top:6px}
.ledger{display:flex;flex-direction:column}
.ledger .item{display:grid;grid-template-columns:1fr 110px;gap:24px;padding:18px 0;border-bottom:1px solid var(--line)}
.ledger .item b{font-size:17px;font-weight:700;line-height:1.35;display:block}
.ledger .item span{font-size:14px;color:rgba(16,20,19,.62);margin-top:3px;line-height:1.5;display:block}
.ledger .item .yr{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12.5px;color:var(--ink-50);text-align:right;padding-top:4px}

/* certificate gallery */
.scans{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.scans figure{margin:0;display:flex;flex-direction:column;gap:8px}
.scans .frame{background:var(--paper);border-radius:10px;padding:10px;height:190px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;text-decoration:none;color:inherit;cursor:zoom-in}
.scans .frame img{max-height:170px;object-fit:contain;display:block;transition:transform .35s ease}
.scans .frame:hover img{transform:scale(1.035)}
.scans .frame::after{content:"⤢";position:absolute;right:9px;bottom:9px;width:27px;height:27px;border-radius:50%;background:rgba(13,27,24,.84);color:#fff;font-size:12px;line-height:27px;text-align:center;opacity:0;transform:translateY(5px);transition:opacity .2s ease,transform .2s ease}
.scans .frame:hover::after,.scans .frame:focus-visible::after{opacity:1;transform:none}
.scans .frame:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.scans figcaption{font-size:11.5px;line-height:1.45;color:var(--ink-60)}
@media (hover:none){.scans .frame::after{opacity:1;transform:none}}

/* lightbox */
.lb[hidden]{display:none}
.lb{position:fixed;inset:0;z-index:60;background:rgba(8,16,14,.975);backdrop-filter:blur(6px);display:grid;grid-template-rows:auto minmax(0,1fr) auto;opacity:0;transition:opacity .18s ease}
.lb.is-open{opacity:1}
.lb-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px}
.lb-count{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.06em;color:rgba(242,245,243,.55)}
.lb-tools{display:flex;align-items:center;gap:8px}
.lb button{font-family:inherit;font-weight:600;background:rgba(242,245,243,.11);color:#f2f5f3;border:0;border-radius:9px;cursor:pointer;align-self:auto;padding:0;width:38px;height:38px;font-size:17px;line-height:1;display:flex;align-items:center;justify-content:center}
.lb button:hover{background:rgba(242,245,243,.2)}
.lb button:disabled{opacity:.3;cursor:default}
.lb button:disabled:hover{background:rgba(242,245,243,.11)}
.lb button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lb-close{font-size:15px}
.lb-zoom{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;color:rgba(242,245,243,.6);min-width:44px;text-align:center}
.lb-stage{position:relative;overflow:hidden;overflow:clip;display:flex;align-items:center;justify-content:center;padding:0 18px;touch-action:none;cursor:zoom-in}
.lb-stage img{max-width:100%;max-height:100%;display:block;border-radius:4px;background:#fff;transform-origin:center center;will-change:transform;user-select:none;-webkit-user-drag:none}
.lb-stage.is-zoomed{cursor:grab}
.lb-stage.is-dragging{cursor:grabbing}
.lb-stage.is-loading img{opacity:.25}
.lb-spin{position:absolute;left:50%;top:50%;margin:-14px 0 0 -14px;width:28px;height:28px;border:2px solid rgba(242,245,243,.25);border-top-color:#f2f5f3;border-radius:50%;opacity:0;pointer-events:none;animation:lb-spin .7s linear infinite}
.lb-stage.is-loading .lb-spin{opacity:1}
@keyframes lb-spin{to{transform:rotate(360deg)}}
.lb button.lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;font-size:22px;background:rgba(8,16,14,.62);box-shadow:0 2px 12px rgba(0,0,0,.3)}
.lb button.lb-nav:hover{background:rgba(8,16,14,.88)}
.lb-prev{left:14px}
.lb-next{right:14px}
.lb-cap{margin:0;padding:16px 20px 24px;text-align:center;font-size:13.5px;line-height:1.5;color:rgba(242,245,243,.72)}
.lb-hint{display:block;margin-top:5px;font-size:11.5px;color:rgba(242,245,243,.4)}
@media (max-width:700px){
  .lb-stage{padding:0 8px}
  .lb button.lb-nav{width:38px;height:38px;font-size:19px}
  .lb-prev{left:6px}
  .lb-next{right:6px}
  .lb-hint{display:none}
}

/* books */
.book{border:1px solid rgba(16,20,19,.12);border-radius:16px;padding:32px;display:grid;grid-template-columns:190px 1fr;gap:36px;align-items:start;margin-bottom:18px}
.book>img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:8px;display:block;box-shadow:0 10px 26px rgba(16,20,19,.16)}
.book h2{margin:0;font-size:clamp(22px,3.4vw,30px);font-weight:700;line-height:1.15}
.book .sub{font-size:14.5px;color:var(--ink-60);margin-top:6px}
.book p{margin:0;font-size:16px;line-height:1.75;color:rgba(16,20,19,.74);max-width:62ch}
.book ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.book li{display:flex;gap:11px;align-items:baseline;font-size:15px;line-height:1.6;color:rgba(16,20,19,.76)}
.book li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none;transform:translateY(-3px)}
.mini-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-50)}

/* books band + dark cta */
.band{background:var(--dark);color:#f2f5f3}
.band-in{padding-block:58px;display:flex;gap:44px;align-items:center;flex-wrap:wrap}
.band h2{margin:0;font-size:clamp(25px,4.2vw,36px);line-height:1.1;font-weight:700}
.band p{margin:0;font-size:15px;line-height:1.75;color:rgba(242,245,243,.7);max-width:40ch}
.covers{display:flex;gap:18px;flex:none}
.covers img{width:150px;aspect-ratio:2/3;object-fit:cover;display:block;border-radius:8px;box-shadow:0 12px 30px rgba(0,0,0,.4)}
.cta{background:var(--dark);color:#f2f5f3;border-radius:18px;padding:44px;display:flex;justify-content:space-between;align-items:center;gap:36px;flex-wrap:wrap}
.cta h2{margin:0;font-size:clamp(22px,3.2vw,28px);font-weight:700}
.cta p{margin:0;font-size:15px;line-height:1.7;color:rgba(242,245,243,.7);max-width:52ch}

/* aside + contact */
.with-aside{display:grid;grid-template-columns:1fr 340px;gap:64px;align-items:start}
.aside{background:var(--wash);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:20px;position:sticky;top:96px}
.aside dl{margin:0;display:flex;flex-direction:column;gap:14px}
.aside dt{font-size:11.5px;color:rgba(16,20,19,.55);font-family:'JetBrains Mono',ui-monospace,monospace}
.aside dd{margin:3px 0 0;font-size:15px;font-weight:600;line-height:1.4}
.boxes{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.box{border:1px solid rgba(16,20,19,.12);border-radius:16px;padding:34px;display:flex;flex-direction:column;gap:18px}
.box.wash{background:var(--wash)}
.tel{text-decoration:none;font-size:clamp(29px,7.2vw,40px);font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.tel:hover{color:var(--accent-ink)}
form{display:flex;flex-direction:column;gap:10px}
input,textarea{font-family:inherit;font-size:15px;padding:13px 15px;border:1px solid rgba(16,20,19,.2);border-radius:8px;background:#fff;color:var(--ink)}
input:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
textarea{resize:vertical}
button{font-family:inherit;background:var(--ink);color:#fff;border:0;padding:14px 24px;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;align-self:flex-start}

/* footer */
.site-foot{background:var(--dark);color:#f2f5f3}
.foot-in{padding-block:52px;display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.foot-in b{font-size:22px;font-weight:800;letter-spacing:-.02em;display:block;margin-bottom:10px}
.foot-in p{margin:0;font-size:14px;color:rgba(242,245,243,.7);line-height:1.7}
.foot-in a{color:var(--accent-light)}
.legal{font-size:11.5px;color:rgba(242,245,243,.45);text-align:right;line-height:1.7}

/* ---------- responsive ---------- */

/* tablet: tighten the wide two-column layouts before collapsing them */
@media (max-width:1080px){
  .hero{gap:44px}
  .two{gap:44px}
  .with-aside{grid-template-columns:1fr 300px;gap:44px}
  .bio-split{grid-template-columns:250px 1fr;gap:40px}
  .ledger-block{grid-template-columns:180px 1fr;gap:36px}
  .panel{padding:36px 32px}
  .book{gap:30px}
  .covers img{width:132px}
}

@media (max-width:1000px){
  .hero,.split,.two,.with-aside,.bio-split,.ledger-block,.book{grid-template-columns:1fr}
  .hero{gap:34px;padding:52px 0 48px}
  .split{gap:20px;align-items:start}
  .two,.with-aside,.bio-split{gap:32px}
  .ledger-block{gap:16px;padding-top:44px}
  .ledger-block>h2{padding-top:0}
  .book{gap:26px;padding:28px}
  .book>img{width:190px}
  .aside{position:static}
  .grid4,.scans{grid-template-columns:repeat(2,1fr)}
  /* once stacked, a full-width 4:5 portrait would run ~960px tall on a tablet */
  .hero-media{max-width:540px}
  .badge{left:16px;bottom:16px}
  .band-in{gap:34px}
}

/* mobile navigation — collapses into a toggle. The .js gate keeps the nav
   visible (wrapping onto its own line) if the script never runs. */
@media (max-width:860px){
  .head-in{flex-wrap:wrap;gap:10px}
  .js .nav-toggle{display:inline-flex}
  .js .btn.call-sm{display:inline-block;margin-left:auto}
  .js .nav{display:none;order:3;flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;font-size:15px;padding-bottom:8px}
  .js .nav.is-open{display:flex}
  .js .nav a{padding:14px 2px;border-top:1px solid var(--line)}
  .js .nav a[aria-current="page"]{color:var(--accent-ink)}
  .js .nav .btn{margin-top:14px;border-top:0;text-align:center;padding:15px 20px;font-size:14px}
}

@media (max-width:700px){
  .grid3,.grid4,.boxes{grid-template-columns:1fr}

  /* 2x2 reads far better than four stacked full-width rows */
  .strip-in{grid-template-columns:1fr 1fr}
  .strip-in div{padding:20px 16px;border-bottom:1px solid var(--line)}
  .strip-in div:nth-child(2n){border-right:0}
  .strip-in div:nth-last-child(-n+2){border-bottom:0}

  .hero{padding:34px 0 40px;gap:26px}
  .hero p{font-size:16px}
  .badge{left:12px;right:12px;bottom:12px;max-width:none;padding:14px 16px;border-radius:10px}

  .two,.with-aside,.bio-split{gap:24px}
  .panel{padding:24px 20px;gap:22px;border-radius:14px}
  .panel-head{flex-direction:column;align-items:flex-start;gap:8px}
  .card{padding:20px}
  .img-row{gap:10px}

  .book{padding:22px 20px;gap:22px;border-radius:14px}
  .book>img{width:150px}
  .book p{font-size:15.5px;line-height:1.7}

  /* year moves under the entry instead of holding a 110px column hostage */
  .ledger .item{grid-template-columns:1fr;gap:2px;padding:16px 0}
  .ledger .item .yr{text-align:left;padding-top:5px}

  .scans{gap:12px}
  .scans .frame{height:150px;padding:8px}
  .scans .frame img{max-height:132px}

  .box{padding:24px 20px;border-radius:14px}
  .cta{padding:28px 22px;gap:22px;border-radius:14px}
  .aside{padding:22px;border-radius:14px}
  /* squares read better than a thin 3:2 strip at phone width */
  .img-row img{aspect-ratio:1}

  /* nowrap matters: a *wrapping* column flex container sizes its line from
     content, so stretch can't hold children to the container width */
  .band-in{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:26px;padding-block:44px}
  /* grid divides the row deterministically instead of relying on flex growth */
  .covers{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .covers img{width:100%}

  /* 16px stops iOS zooming the page on focus */
  input,textarea{font-size:16px}
  form button{width:100%;align-self:stretch}

  .foot-in{padding-block:40px;gap:26px}
  .legal{text-align:left}
}

@media (max-width:440px){
  .row .btn{flex:1 1 100%;text-align:center}
  .brand span{display:none}
  .scans .frame{height:132px}
  .scans .frame img{max-height:116px}
}
@media print{
  .site-head,.nav,.btn{display:none}
  body{color:#000}
}