/* Hero · Plain words (chosen 2026-10-03).
   A discharge note in chart shorthand is paired, line by line, with what the patient
   hears, with AFTER as the thing the doctor points to. The chart line is kept: the pen
   underlines it and it stays above the sentence. 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:.28;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)*.15);will-change:transform}
/* The pen underlines the shorthand as the plain sentence arrives. It is never struck out. */
.rx-code::after{content:'';position:absolute;left:-.15em;right:-.15em;top:calc(100% + .1em);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}.rx-code{font-size:min(16px,2vw)}}
@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}
  /* The chart lines never wrap. 23.6 is the longest line (41 characters) in ems, so it
     always fits between the 24px side paddings; shorten or lengthen that line and this changes. */
  .rx-code{top:.55rem;font-size:min(14px,calc((100vw - 48px)/23.6))}
  .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}
  /* With the thumbnail gone, the About portrait is the only picture on the page. */
  body.hero-light .about-portrait{display:block}
  .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}}