/* howardroutman.com — shared styles
   Palette and type per the build handoff. No build step; edit this file directly.
   Fonts are self-hosted in assets/fonts so the site has no third-party
   dependency and no request leaves the visitor's browser to load type. */

@font-face{
  font-family:"Fraunces";
  src:url("/assets/fonts/fraunces-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"IBM Plex Sans";
  src:url("/assets/fonts/plex-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"IBM Plex Sans";
  src:url("/assets/fonts/plex-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"IBM Plex Sans";
  src:url("/assets/fonts/plex-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
}

:root{
  --ground:#fbfaf6;
  --ink:#1a1a1a;
  --muted:#6b6868;
  --rule:#d8d4c8;
  --accent:#7a2d2d;
  --accent-deep:#5e2222;
  --sand:#f4f1e8;          /* panel fill, sits a step off --ground */
  --col:880px;
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* Fraunces italic has a swash J and a fused ffi that read as typos in clinical
   text. Georgia italic instead, matching the CV. */
em,i,.italic{font-family:Georgia,"Times New Roman",serif;font-style:italic}

h1,h2,h3{
  font-family:var(--display);
  font-weight:600;
  letter-spacing:-0.021em;
  line-height:1.1;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2.1rem,5.4vw,3.35rem)}
h2{font-size:clamp(1.55rem,3.3vw,2.1rem)}
h3{font-size:clamp(1.12rem,2vw,1.3rem);line-height:1.25}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}

a{color:var(--accent);text-underline-offset:.18em;text-decoration-thickness:.06em}
a:hover{color:var(--accent-deep)}

:focus-visible{
  outline:2.5px solid var(--accent);
  outline-offset:3px;
  border-radius:3px;
}

img{max-width:100%;height:auto;display:block}

.wrap{width:100%;max-width:var(--col);margin-inline:auto;padding-inline:24px}

.eyebrow{
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 .9rem;
}

/* ---------- header ---------- */
.site-head{
  border-bottom:1px solid var(--rule);
  background:var(--ground);
  position:sticky;top:0;z-index:20;
}
/* The header used to be 88% opaque with backdrop-filter blur. Both are gone on
   purpose: backdrop-filter makes its element the containing block for every
   position:fixed descendant, which confined the site menu's click-away layer
   below to the header strip instead of the whole page. Solid header, working
   dismiss. If the frosted look is ever wanted back, the click-away goes with
   it — they cannot both be had without JavaScript. */
.site-head .wrap{
  display:flex;align-items:center;gap:18px;
  min-height:66px;
}
.brand{
  font-family:var(--display);font-weight:600;font-size:1.02rem;
  letter-spacing:-.01em;color:var(--ink);text-decoration:none;
  margin-right:auto;white-space:nowrap;
}
.brand span{color:var(--muted);font-weight:400}
.nav{display:flex;align-items:center;gap:22px}
/* Scoped to .nav-link, NOT to `.nav a` — a bare `.nav a` rule outranks
   .btn-primary on specificity and silently repaints the Call button's text
   dark and squashes its box. Keep it off the buttons. */
.nav .nav-link{
  color:var(--ink);text-decoration:none;font-size:.925rem;
  padding:10px 0;border-bottom:2px solid transparent;
}
.nav .nav-link:hover{border-bottom-color:var(--rule)}
.nav .nav-link[aria-current="page"]{border-bottom-color:var(--accent)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:48px;padding:.72em 1.5em;
  border-radius:999px;
  font-family:var(--body);font-size:1rem;font-weight:500;
  text-decoration:none;cursor:pointer;
  border:1.5px solid transparent;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}
/* border must clear 3:1 as a control boundary, so it is --accent, not --rule */
.btn-secondary{background:transparent;color:var(--accent);border-color:var(--accent)}
.btn-secondary:hover{background:var(--accent);color:#fff}
.btn-sm{min-height:44px;padding:.45em 1.15em;font-size:.9rem}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.6rem}

/* ---------- hero ---------- */
.hero{padding:clamp(38px,7vw,72px) 0 clamp(34px,6vw,60px)}
.hero-grid{display:grid;grid-template-columns:1fr 300px;gap:clamp(28px,5vw,52px);align-items:start}
.hero h1{margin-bottom:.5rem}
.creds{
  font-family:var(--body);font-size:.9rem;letter-spacing:.02em;
  color:var(--muted);margin:0 0 1.3rem;
}
.lede{font-size:clamp(1.06rem,1.7vw,1.2rem);line-height:1.55;max-width:34em}
.portrait{
  border-radius:6px;border:1px solid var(--rule);
  box-shadow:0 1px 2px rgba(26,26,26,.05),0 12px 30px -18px rgba(26,26,26,.28);
}
.portrait-cap{font-size:.78rem;color:var(--muted);margin-top:.6rem;line-height:1.4}

/* ---------- sections ---------- */
.section{padding:clamp(34px,5.5vw,56px) 0;border-top:1px solid var(--rule)}
.section-lede{max-width:34em;color:var(--muted);margin-top:.85rem}

/* 300px min forces a balanced 2x2 inside the 880px column rather than 3+1 */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin-top:2rem}
.card{
  background:var(--sand);border:1px solid var(--rule);border-radius:10px;
  padding:22px 22px 24px;
}
.card h3{margin-bottom:.5rem}
.card p{font-size:.955rem;color:var(--muted);margin-bottom:0}
.card-lead{background:#fff;border-color:var(--accent)}
.card-lead .tagline{
  font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:.55rem;
}

/* fact list */
.facts{list-style:none;margin:1.8rem 0 0;padding:0;border-top:1px solid var(--rule)}
.facts li{
  display:grid;grid-template-columns:180px 1fr;gap:6px 26px;
  padding:15px 0;border-bottom:1px solid var(--rule);
}
.facts dt,.facts .k{color:var(--muted);font-size:.86rem;letter-spacing:.02em;padding-top:.15em}
.facts .v{font-size:1rem}

/* locations */
.locs{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:20px;margin-top:1.9rem}
.loc{border:1px solid var(--rule);border-radius:10px;padding:22px;background:#fff}
.loc h3{font-size:1.08rem;margin-bottom:.45rem}
.loc address{font-style:normal;color:var(--muted);font-size:.955rem;line-height:1.55}
.loc .btn{margin-top:1.1rem}

/* call band */
.callband{background:var(--sand);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.callband .wrap{padding-block:clamp(30px,4.5vw,44px)}
.callband h2{margin-bottom:.6rem}
.tel{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.6rem,4vw,2.15rem);letter-spacing:-.02em;
  color:var(--accent);text-decoration:none;display:inline-block;
}
.tel:hover{color:var(--accent-deep);text-decoration:underline}

/* form */
form{margin-top:1.7rem;max-width:33rem}
.field{margin-bottom:1.05rem}
label{display:block;font-size:.88rem;font-weight:500;margin-bottom:.4rem}
.hint{font-size:.82rem;color:var(--muted);font-weight:400;margin-top:.3rem}
input[type=text],input[type=tel],input[type=email],textarea,select{
  width:100%;font-family:var(--body);font-size:1rem;color:var(--ink);
  background:#fff;border:1px solid #b9b3a4;border-radius:8px;
  padding:.72em .85em;min-height:48px;
}
textarea{min-height:110px;resize:vertical}
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2.5px solid var(--accent);outline-offset:1px;border-color:var(--accent);
}
.formnote{font-size:.85rem;color:var(--muted);margin-top:1rem;line-height:1.5;max-width:33rem}

/* prose blocks */
.prose{max-width:34em}
.prose h2{margin-top:2.4rem;margin-bottom:.7rem}
.prose h3{margin-top:1.9rem;margin-bottom:.45rem}
.prose ul{padding-left:1.15em;margin:0 0 1.05em}
.prose li{margin-bottom:.42em}

/* condition entry */
.cond{padding-top:2.2rem;margin-top:2.2rem;border-top:1px solid var(--rule)}
.cond:first-of-type{border-top:0;margin-top:1.4rem;padding-top:0}
.cond h2{margin-bottom:.6rem}
.cond .body{max-width:34em}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--rule);margin-top:clamp(40px,6vw,72px);background:var(--sand)}
.site-foot .wrap{padding-block:34px}
.foot-grid{display:flex;flex-wrap:wrap;gap:14px 30px;align-items:baseline}
.site-foot a{color:var(--accent)}
.foot-links{display:flex;flex-wrap:wrap;gap:12px 22px;font-size:.92rem;margin-right:auto}
.copyright{font-size:.85rem;color:var(--muted)}
.disclosure{
  font-size:.82rem;color:var(--muted);line-height:1.55;
  margin-top:20px;padding-top:18px;border-top:1px solid var(--rule);max-width:52em;
}

.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--accent);color:#fff;padding:12px 18px;border-radius:0 0 8px 0;z-index:50;
}
.skip:focus{left:0}

@media (max-width:720px){
  .hero-grid{grid-template-columns:1fr}
  .portrait-wrap{max-width:280px}
  .btn-row .btn{width:100%}
  .facts li{grid-template-columns:1fr;gap:2px}
  .nav{gap:16px}
  .nav a{font-size:.88rem}
  .brand{font-size:.95rem}
  .site-head .wrap{gap:12px}
}

/* Below 520px the header becomes two rows — brand and Call on top, the section
   links beneath — so navigation never disappears on a phone. */
@media (max-width:520px){
  .site-head .wrap{
    flex-wrap:wrap;
    padding-block:10px;
    row-gap:2px;
  }
  .brand{flex:1 1 auto}
  .nav{
    order:3;
    flex:1 0 100%;
    gap:20px;
    border-top:1px solid var(--rule);
    margin-top:6px;
    padding-top:2px;
  }
  .nav .btn{
    order:-1;position:absolute;right:24px;top:12px;
  }
  .site-head .wrap{position:relative}
  body{font-size:1.02rem}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ---------- video ---------- */
.video{margin:1.9rem 0 0;max-width:37rem}
.video video{
  width:100%;height:auto;display:block;
  /* --sand, not black: the videos are 4:3 in a 4:3 box so nothing letterboxes,
     and the fallback text inside <video> stays readable if playback fails. */
  background:var(--sand);color:var(--ink);
  border-radius:10px;border:1px solid var(--rule);
  padding:0;
}
.video video:not([controls]){padding:1.2rem}
.video figcaption{font-size:.88rem;color:var(--muted);margin-top:.7rem;line-height:1.5}
.video .note{
  font-size:.85rem;color:var(--muted);margin-top:.5rem;line-height:1.5;
  padding-left:.9rem;border-left:2px solid var(--rule);
}

/* ---------- callouts (post-operative pages) ---------- */
.callout{
  border:1.5px solid var(--accent);border-radius:10px;
  padding:20px 22px;margin:1.9rem 0;background:#fff;
}
.callout h2,.callout h3{color:var(--accent);margin-bottom:.55rem}
.callout ul{margin:.6rem 0 0;padding-left:1.15em}
.callout li{margin-bottom:.3em}
.doc-actions{display:flex;flex-wrap:wrap;gap:12px;margin:1.7rem 0 0}
.step{padding-top:1.9rem;margin-top:1.9rem;border-top:1px solid var(--rule)}
.step:first-of-type{border-top:0;margin-top:1rem;padding-top:0}
.step h2{display:flex;gap:.6rem;align-items:baseline}
.step h2 .num{
  font-family:var(--body);font-size:.78rem;font-weight:600;letter-spacing:.1em;
  color:var(--accent);flex:0 0 auto;padding-top:.15rem;
}
.pathway{background:var(--sand);border:1px solid var(--rule);border-radius:10px;padding:18px 20px;margin:1.1rem 0}
.pathway h3{font-size:1.05rem;margin-bottom:.4rem}

/* ---------- print ---------- */
@media print{
  :root{--ground:#fff;--sand:#fff}
  .site-head,.site-foot .foot-links,.doc-actions,.skip,.btn{display:none!important}
  body{font-size:11pt;line-height:1.45;background:#fff}
  .wrap{max-width:none;padding-inline:0}
  .hero{padding:0 0 12pt}
  h1{font-size:22pt}
  h2{font-size:14pt}
  h3{font-size:12pt}
  .section{padding:8pt 0;border-top:0}
  .step{page-break-inside:avoid;border-top:1px solid #ccc;padding-top:12pt;margin-top:12pt}
  .callout,.pathway{border:1px solid #999;page-break-inside:avoid}
  a{color:#000;text-decoration:none}
  .callout a[href^="tel:"]{font-weight:600}
  .site-foot{border-top:1px solid #999;margin-top:16pt;background:#fff}
  .disclosure{font-size:9pt}
}

/* ================= topic cards (conditions hub) ================= */
.topics{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin-top:2rem}
.topic{
  display:flex;flex-direction:column;
  background:var(--sand);border:1px solid var(--rule);border-radius:10px;
  padding:22px 22px 24px;text-decoration:none;color:var(--ink);
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease,border-color .22s ease,background-color .22s ease;
}
.topic h3{margin-bottom:.5rem;color:var(--ink)}
.topic p{font-size:.955rem;color:var(--muted);margin-bottom:0}
.topic .more{
  margin-top:1rem;font-size:.88rem;font-weight:500;color:var(--accent);
  display:inline-flex;align-items:center;gap:.4em;
}
.topic .more::after{
  content:"→";display:inline-block;
  transition:transform .22s cubic-bezier(.2,.7,.3,1);
}
.topic:hover,.topic:focus-visible{
  background:#fff;border-color:var(--accent);
  transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(26,26,26,.04),0 16px 34px -22px rgba(26,26,26,.45);
}
.topic:hover .more::after,.topic:focus-visible .more::after{transform:translateX(5px)}
.topic-lead{background:#fff;border-color:var(--accent)}
.topic-lead .tagline{
  font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:.55rem;
}

/* ================= breadcrumbs ================= */
.crumbs{font-size:.85rem;color:var(--muted);margin:0 0 1.1rem}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45em}
.crumbs li:not(:last-child)::after{content:"/";margin-left:.45em;color:var(--rule)}
.crumbs a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--rule)}
.crumbs a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* ================= related links ================= */
.related{margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid var(--rule)}
.related h2{font-size:1.15rem;margin-bottom:.9rem}
.related ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 14px}
.related a{
  display:inline-block;font-size:.92rem;text-decoration:none;
  border:1px solid var(--rule);border-radius:999px;padding:.42em 1em;
  transition:border-color .18s ease,background-color .18s ease,color .18s ease;
}
.related a:hover{border-color:var(--accent);background:var(--accent);color:#fff}

/* ================= pull quote ================= */
.pull{
  margin:2.2rem 0;padding:0 0 0 1.15rem;
  border-left:3px solid var(--accent);
  font-family:var(--display);font-weight:600;letter-spacing:-.015em;
  font-size:clamp(1.18rem,2.4vw,1.42rem);line-height:1.35;
  max-width:26em;text-wrap:balance;
}
.pull cite{
  display:block;margin-top:.6rem;
  font-family:var(--body);font-weight:400;font-style:normal;
  font-size:.85rem;letter-spacing:0;color:var(--muted);
}

/* ================= diagrams ================= */
.dia-fig{margin:2rem 0 0;max-width:37rem}
.dia{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--rule);border-radius:10px}
.dia .bone{fill:#e8e3d5;stroke:#8f8874;stroke-width:1.7;stroke-linejoin:round}
.dia .cart{fill:#cfc7b0}
.dia .imp{fill:var(--accent)}
.dia .imp2{fill:var(--accent-deep)}
.dia .tendon{fill:#c9a1a1;stroke:#a97c7c;stroke-width:1.4}
.dia .lbl{font-family:var(--body);font-size:9.5px;font-weight:500;fill:#5c5854}
.dia .lbl-em{fill:var(--accent);font-weight:600}
.dia .cap{font-family:var(--body);font-size:11px;font-weight:600;fill:var(--ink)}
.dia .lead{stroke:#8f8874;stroke-width:1;fill:none}
.dia .bare{fill:none;stroke:var(--accent);stroke-width:8;stroke-linecap:round;opacity:.9}

/* ================= motion =================
   The site ships no JavaScript and the CSP blocks it (script-src 'none'), so
   every animation here is CSS. Scroll-linked effects use view()/scroll()
   timelines, wrapped in @supports so a browser without them simply shows the
   finished state, and inside prefers-reduced-motion:no-preference so nobody is
   made to watch anything. The global reduce rule higher up in this file also
   kills all of it with !important, which is the belt to this pair of braces. */

/* thin reading-progress rule across the very top of the window */
.progress{
  position:fixed;inset:0 0 auto 0;height:3px;z-index:30;
  background:var(--accent);transform:scaleX(0);transform-origin:0 50%;
  pointer-events:none;
}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .progress{animation:progress-grow linear both;animation-timeline:scroll(root block)}
  }
}
@keyframes progress-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes rise-far{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes settle{from{opacity:0;transform:translateY(20px) scale(.985)}to{opacity:1;transform:none}}

/* page entrance — runs on load, no timeline needed */
@media (prefers-reduced-motion:no-preference){
  .hero .eyebrow{animation:rise .5s .04s cubic-bezier(.2,.7,.3,1) both}
  .hero h1{animation:rise .6s .10s cubic-bezier(.2,.7,.3,1) both}
  .hero .creds{animation:rise .6s .17s cubic-bezier(.2,.7,.3,1) both}
  .hero .lede{animation:rise .6s .23s cubic-bezier(.2,.7,.3,1) both}
  .hero .btn-row{animation:rise .6s .30s cubic-bezier(.2,.7,.3,1) both}
  .hero .crumbs{animation:fade .5s .02s ease-out both}
  .portrait-wrap{animation:settle .85s .16s cubic-bezier(.2,.7,.3,1) both}
  .site-head{animation:fade .4s ease-out both}
}

/* scroll-linked reveals — applied by selector so no markup carries a class */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .section > .wrap > .eyebrow,
    .section > .wrap > h2,
    .section > .wrap > .section-lede,
    .cards > .card,
    .topics > .topic,
    .locs > .loc,
    .facts li,
    .cond,
    .dia-fig,
    .figpair,
    .figsolo,
    figure.video,
    .callout,
    .pull,
    .related{
      animation:reveal linear both;
      animation-timeline:view();
      animation-range:entry 4% cover 26%;
    }
    /* stagger inside a row: later siblings start a little further along */
    .cards > .card:nth-child(2),.topics > .topic:nth-child(2),.locs > .loc:nth-child(2){animation-range:entry 9% cover 30%}
    .cards > .card:nth-child(3),.topics > .topic:nth-child(3){animation-range:entry 6% cover 28%}
    .cards > .card:nth-child(4),.topics > .topic:nth-child(4){animation-range:entry 11% cover 32%}
    .topics > .topic:nth-child(5){animation-range:entry 8% cover 30%}
    .topics > .topic:nth-child(6){animation-range:entry 13% cover 34%}
    .facts li:nth-child(even){animation-range:entry 7% cover 29%}
  }
}
@keyframes reveal{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* hover and press feedback */
.card,.loc{transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease,border-color .22s ease}
.loc:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(26,26,26,.04),0 14px 30px -22px rgba(26,26,26,.4)}
.btn:active{transform:translateY(1px)}
.tel{transition:color .15s ease,transform .18s cubic-bezier(.2,.7,.3,1)}
.tel:active{transform:scale(.985)}
.video video{transition:box-shadow .25s ease,border-color .25s ease}
.video:hover video{border-color:#c0b9a6;box-shadow:0 2px 5px rgba(26,26,26,.05),0 18px 36px -26px rgba(26,26,26,.5)}

/* diagram parts drift into position as the figure crosses the viewport */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .dia .in-l{animation:dia-l linear both;animation-timeline:view();animation-range:entry 55% cover 52%}
    .dia .in-r{animation:dia-r linear both;animation-timeline:view();animation-range:entry 55% cover 52%}
    .dia .in-f{animation:fade linear both;animation-timeline:view();animation-range:entry 70% cover 58%}
    .dia .band{animation:tear linear both;animation-timeline:view();animation-range:entry 48% cover 62%}
    .dia .bare{animation:bare-in linear both;animation-timeline:view();animation-range:entry 56% cover 58%}
  }
}
@keyframes dia-l{from{opacity:.15;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes dia-r{from{opacity:.15;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes tear{from{stroke-dasharray:100 100}to{stroke-dasharray:55 100}}
@keyframes bare-in{from{opacity:0}to{opacity:.9}}

@media print{
  *{animation:none!important}
  .progress{display:none!important}
  .dia-fig{page-break-inside:avoid}
  .related{display:none!important}
}
/* pathLength="100" on the path normalises the dash units, so 55 100 means
   "draw the first 55% of the tendon" — the torn state, and the state a
   browser without scroll timelines is left showing. */
.dia .band{fill:none;stroke:#a76a6a;stroke-width:15;stroke-linecap:round;stroke-dasharray:55 100}

/* ---------- prose column alignment ----------
   `.wrap.prose` used to be both the width limiter and the centering box, so a
   34em body block sat centered in the window while the hero above it started at
   the left edge of the 880px column — every page had two different left
   margins. Keep the wrap at --col and cap the line length on the children, so
   the left edges line up all the way down the page. */
.wrap.prose{max-width:var(--col)}
.prose > p,
.prose > h2,
.prose > h3,
.prose > ul,
.prose > ol,
.prose > .pull,
.prose > .formnote,
.prose > .section-lede{max-width:34em}
.prose > .callout,
.prose > .pathway,
.prose > .step,
.prose > .doc-actions,
.prose > .btn-row{max-width:37rem}

/* ---------- paired anatomical figures ----------
   Panels cropped from one published figure, sharing a single y-range so the
   two halves keep the scale and alignment they had in the source. Labels and
   credits are real text rather than baked into the image, so they stay sharp,
   translate, and are read out by a screen reader. */
.figpair{margin:2.2rem 0 0;max-width:34em}
.figpair .pair{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  background:#fff;border:1px solid var(--rule);border-radius:10px;
  padding:20px 20px 18px;
}
.figpair .half{margin:0;min-width:0}
.figpair img{display:block;width:100%;max-width:240px;height:auto;margin:0 auto}
.figpair .lbl{
  margin:.8rem 0 0;text-align:center;
  font-size:.9rem;font-weight:600;color:var(--ink);line-height:1.3;
}
.figpair .credit{
  margin:.4rem 0 0;text-align:center;
  font-size:.735rem;line-height:1.4;color:var(--muted);
}
.figpair figcaption{margin-top:.9rem;font-size:.86rem;line-height:1.55;color:var(--muted)}
.figpair figcaption .src{display:block;margin-top:.55rem;font-size:.79rem;line-height:1.45}
.figpair figcaption cite{font-style:italic}
@media (max-width:540px){
  .figpair .pair{grid-template-columns:1fr;gap:24px;padding:18px 16px 16px}
  .figpair img{max-width:210px}
}

/* three panels of one commissioned figure — intact, torn, repaired.
   Reuses every .figpair rule; only the track count and the widths change. */
.figpair.trio{max-width:40em}
.figpair.trio .pair{grid-template-columns:repeat(3,1fr);gap:14px}
.figpair.trio img{max-width:200px}
@media (max-width:720px){
  .figpair.trio .pair{grid-template-columns:1fr;gap:24px;padding:18px 16px 16px}
  .figpair.trio img{max-width:230px}
}

/* ---------- single published figure ---------- */
.figsolo{margin:2.2rem 0 0;max-width:34em}
.figsolo .plate{
  background:#fff;border:1px solid var(--rule);border-radius:10px;
  padding:20px 20px 18px;
}
.figsolo img{display:block;width:100%;max-width:340px;height:auto;margin:0 auto;border-radius:4px}
.figsolo .lbl{
  margin:.85rem 0 0;text-align:center;
  font-size:.9rem;font-weight:600;color:var(--ink);line-height:1.3;
}
.figsolo .credit{
  margin:.4rem 0 0;text-align:center;
  font-size:.735rem;line-height:1.4;color:var(--muted);
}
.figsolo figcaption{margin-top:.9rem;font-size:.86rem;line-height:1.55;color:var(--muted)}
.figsolo figcaption .src{display:block;margin-top:.55rem;font-size:.79rem;line-height:1.45}
.figsolo figcaption cite{font-style:italic}

/* a wide published figure that wants the full text column */
.figsolo.wide{max-width:none}
.figsolo.wide img{max-width:100%}

/* ================= video transcript, collapsed ================= */
.transcript{
  margin:1.6rem 0 0;max-width:34em;
  border:1px solid var(--rule);border-radius:8px;background:var(--sand);
}
.transcript > summary{
  cursor:pointer;list-style:none;padding:.85rem 1.1rem;
  font-size:.86rem;font-weight:600;letter-spacing:.01em;color:var(--accent);
  display:flex;align-items:center;gap:.55rem;border-radius:8px;
}
.transcript > summary::-webkit-details-marker{display:none}
.transcript > summary::before{
  content:"";width:0;height:0;flex:none;
  border-left:6px solid currentColor;border-block:4.5px solid transparent;
  transition:transform .18s ease;transform-origin:25% 50%;
}
.transcript[open] > summary::before{transform:rotate(90deg)}
.transcript > summary:hover{color:var(--accent-deep)}
.transcript > summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.transcript .body{padding:0 1.1rem 1.15rem;border-top:1px solid var(--rule)}
.transcript .body p{margin:1.05rem 0 0;font-size:.92rem;line-height:1.65;color:var(--ink);max-width:none}
.transcript .note{
  margin-top:1.3rem;padding-top:.9rem;border-top:1px solid var(--rule);
  font-size:.79rem;line-height:1.5;color:var(--muted);
}
@media (prefers-reduced-motion:reduce){.transcript > summary::before{transition:none}}

/* ---- research page: publication entries and the full bibliography ---- */
.pubs{list-style:none;margin:1.5em 0 0;padding:0;border-top:1px solid var(--rule)}
.pubs>li{padding:17px 0 16px;border-bottom:1px solid var(--rule)}
.pubs .sum{margin:0 0 .5em}
.pubs .src{margin:0;font-size:.86rem;color:var(--muted);line-height:1.5}
.pubs .src a{white-space:nowrap}

details.biblio-wrap{margin-top:2.4em;border-top:1px solid var(--rule);padding-top:1.3em}
details.biblio-wrap>summary{
  cursor:pointer;font-weight:500;color:var(--accent);
  font-size:1.02rem;padding:.2em 0;
}
details.biblio-wrap>summary:hover{color:var(--accent-deep)}
details.biblio-wrap>summary::marker{color:var(--rule)}
.biblio{margin:1.2em 0 0;padding-left:1.7em;font-size:.9rem;color:var(--muted)}
.biblio li{margin-bottom:.9em;line-height:1.5}
.biblio li a{white-space:nowrap}

/* ---------- the seal in the corner: a menu to everything ----------
   The mark is the Palm Beach Shoulder Service seal in its own navy and
   orange, from Howard's 3000px transparent original. It is NOT recolored:
   an earlier attempt to remap it to the site accent turned it to mud,
   because two tones of one hue cannot carry a design built on complementary
   colors. If it ever needs regenerating, resize the master at
   assets/pbss-seal.png — never the old white-background JPEG.
   No JavaScript on this site (CSP is script-src 'none'), so this is a
   native <details> disclosure, not a scripted dropdown. It closes by
   clicking the seal again, not by clicking away — that is the trade for
   having it work with no script at all. */
.sitemenu{position:relative;flex:0 0 auto}
.sitemenu>summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:5px;
  padding:3px 4px 3px 0;border-radius:5px;
  -webkit-tap-highlight-color:transparent;
}
.sitemenu>summary::-webkit-details-marker{display:none}
.sitemenu>summary img{width:52px;height:52px;display:block}
.sitemenu>summary::after{
  content:"";width:6px;height:6px;flex:0 0 auto;
  border-right:1.5px solid var(--muted);
  border-bottom:1.5px solid var(--muted);
  transform:translateY(-2px) rotate(45deg);
  transition:transform .16s ease,border-color .16s ease;
}
.sitemenu>summary:hover::after{border-color:var(--accent)}

/* Click anywhere outside to close. While the menu is open the summary grows an
   invisible layer over the whole viewport, sitting under the panel: a click out
   there lands on the summary, which toggles the details shut. No script.
   Consequence worth knowing: with the menu open, the first click anywhere is
   spent closing it, so reaching the Call button takes two. That is how every
   dropdown behaves. Escape does not close it — <details> has no such behavior
   natively and adding it would need JavaScript. */
.sitemenu[open]>summary::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:25;
}
.sitemenu[open]>summary::after{transform:translateY(1px) rotate(-135deg)}

.sitemenu-panel{
  position:absolute;top:calc(100% + 11px);left:-8px;
  width:max-content;max-width:min(540px,calc(100vw - 40px));
  background:var(--ground);
  border:1px solid var(--rule);border-radius:7px;
  box-shadow:0 16px 38px rgba(26,26,26,.15);
  padding:20px 24px 22px;
  display:grid;grid-template-columns:repeat(2,minmax(148px,auto));
  gap:0 38px;
  z-index:30;
}
.sm-group{display:flex;flex-direction:column;min-width:0}
.sm-head{
  font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 5px;
}
.sm-group>.sm-head~.sm-head{margin-top:17px}
.sm-group>a{
  color:var(--ink);text-decoration:none;font-size:.9rem;line-height:1.3;
  padding:5px 0;
}
.sm-group>a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:.18em}
.sm-social{display:flex;flex-wrap:wrap;gap:2px 15px;padding-top:1px}
.sm-social a{color:var(--muted);text-decoration:none;font-size:.83rem;padding:4px 0}
.sm-social a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:.18em}

@media (max-width:620px){
  .sitemenu-panel{
    grid-template-columns:1fr;gap:20px 0;left:-8px;
    padding:18px 20px 20px;
  }
  .sitemenu>summary img{width:44px;height:44px}
}
@media (prefers-reduced-motion:reduce){
  .sitemenu>summary::after{transition:none}
}