/* Hero · Plain words (chosen 2026-10-03).
   A discharge note in chart shorthand is rewritten, line by line, into what the patient
   hears, with AFTER as the thing the doctor points to. Name and face are on screen from
   the first frame. Each row carries --t (0 = as charted, 1 = in plain words); the pen
   stroke, the shrinking shorthand and the arriving words all derive from it. */
@property --t{syntax:'<number>';inherits:true;initial-value:1}

.opening-b{--b-ground:#faf9f6;--b-ink:#14243d;--b-soft:#52647b;--b-line:#d6dce2;--b-pen:#741620;background:var(--b-ground);color:var(--b-ink)}
html[data-theme='dark'] .opening-b{--b-ground:#101925;--b-ink:#e8edf5;--b-soft:#b9c5d5;--b-line:#435268;--b-pen:#f0b6bf}
html[data-motion='on'] .opening-b{height:290svh}
body.hero-light .masthead{color:var(--ink)}
body.hero-light .about-portrait{display:none}

.opening-b .opening-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.32fr);column-gap:clamp(36px,6vw,112px);max-width:1600px;margin-inline:auto;padding:clamp(122px,17svh,176px) var(--gutter) clamp(32px,6svh,64px);overflow:visible}

.b-id{display:flex;flex-direction:column;min-height:0}
.opening-b .b-name{font-size:clamp(40px,4.7vw,88px);line-height:.94;letter-spacing:-.04em;font-weight:500;color:var(--b-ink)}
.opening-b .b-name span{display:block;color:inherit;white-space:nowrap}
.b-role{margin-top:clamp(14px,2.2svh,24px);font-size:15px;line-height:1.5;letter-spacing:.02em;color:var(--b-soft)}
.b-portrait{flex:1;min-height:0;margin-top:clamp(22px,4.5svh,48px);max-width:350px;border-radius:3px;overflow:hidden;box-shadow:0 30px 60px -30px #14243d4d}
.b-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}

.b-note{display:flex;flex-direction:column;min-height:0}
.b-switch{align-self:flex-start;display:inline-flex;gap:2px;padding:3px;border:1px solid var(--b-line);border-radius:999px}
.b-switch button{min-height:40px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:var(--b-soft);font:500 13px/1 var(--body);letter-spacing:.01em;cursor:pointer;transition:background-color .16s cubic-bezier(.23,1,.32,1),color .16s cubic-bezier(.23,1,.32,1)}
.b-switch button:active{transform:scale(.97)}
.b-switch button[aria-pressed='true']{background:var(--b-ink);color:var(--b-ground)}
@media(hover:hover) and (pointer:fine){.b-switch button[aria-pressed='false']:hover{color:var(--b-ink);background:color-mix(in srgb,var(--b-ink) 8%,transparent)}}
.opening-b .b-switch button:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

.rx{list-style:none;margin:clamp(16px,3.4svh,34px) 0 0;padding:0;flex:1;min-height:0;display:grid;grid-auto-rows:1fr}
.rx li{--t:1;--k:clamp(0,calc(var(--t)*3.2),1);--shrink:.4;position:relative;min-height:0;padding-top:2.5rem;border-top:1px solid var(--b-line)}
.rx-code{position:absolute;left:0;top:.7rem;margin:0;white-space:nowrap;font:500 clamp(18px,1.75vw,27px)/1.2 ui-monospace,'Cascadia Mono','SF Mono',Menlo,Consolas,monospace;letter-spacing:-.02em;color:var(--b-ink);transform-origin:0 0;transform:translateY(calc((1 - var(--k))*1.15rem)) scale(calc(1 - var(--k)*var(--shrink)));opacity:calc(1 - var(--k)*.3);will-change:transform}
/* The pen stroke that crosses the shorthand out as the plain sentence arrives. */
.rx-code::after{content:'';position:absolute;left:-.15em;right:-.15em;top:52%;height:.09em;min-height:1.5px;background:var(--b-pen);transform-origin:0 50%;transform:scaleX(clamp(0,calc(var(--t)*3.2 - .25),1))}
.rx-plain{margin:0;max-width:34ch;text-wrap:balance;font:500 clamp(20px,min(2.2vw,4.3svh),40px)/1.08 var(--display);letter-spacing:-.03em;color:var(--b-ink)}
.rx-plain .w{--on:clamp(0,calc((var(--t)*(var(--n) + 5) - var(--i) - 1.6)/2.6),1);display:inline-block;opacity:var(--on);transform:translateY(calc((1 - var(--on))*.3em))}

/* Motion off: the switch still works; it simply swaps the two readings. */
.opening-b[data-rx='chart'] .rx li{--t:0}

@media(max-width:1000px) and (min-width:701px){.opening-b .opening-stage{column-gap:36px}.b-portrait{max-width:260px}}
@media(max-width:700px){
  html[data-motion='on'] .opening-b{height:250svh}
  .opening-b .opening-stage{display:flex;flex-direction:column;padding:108px 24px 22px;min-height:620px}
  .b-id{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:14px;row-gap:14px;align-items:center}
  .opening-b .b-name{font-size:clamp(36px,11vw,46px);grid-column:1 / -1}
  .b-role{grid-column:2;grid-row:2;margin-top:0;font-size:13px}
  .b-portrait{grid-column:1;grid-row:2;flex:none;width:64px;height:80px;margin-top:0;box-shadow:none}
  .b-note{flex:1;margin-top:20px}
  .b-switch button{min-height:44px}
  .rx{margin-top:14px}
  .rx li{--shrink:.1;padding-top:2.1rem}
  .rx-code{top:.55rem;font-size:14px}
  .rx-plain{font-size:clamp(18px,min(5.6vw,2.7svh),24px);line-height:1.1}
}
/* Short phones: the note needs the room more than the thumbnail does. */
@media(max-width:700px) and (max-height:760px){
  .opening-b .opening-stage{padding-top:98px}
  .opening-b .b-name{font-size:34px}
  .b-id{row-gap:10px}
  .b-portrait{display:none}
  .b-role{grid-column:1 / -1}
  .b-note{margin-top:16px}
  .rx{margin-top:12px}
  .rx li{padding-top:1.9rem}
}
@media print{.b-switch{display:none}}