/* tune.css — smaller headings, no italics anywhere (loaded last) */
*,*::before,*::after{font-style:normal !important}
html body .h1{font-size:clamp(34px,5.2vw,80px)}
html body .h2{font-size:clamp(30px,4.1vw,64px)}
html body .h3{font-size:clamp(24px,2.5vw,38px)}
html body section.hero .h1{font-size:clamp(34px,5.4vw,82px);line-height:1}
html body .door-copy .h1,html body section.door .door-copy .h1{font-size:clamp(34px,5vw,80px)}
html body .deck,html body .hero .deck{font-size:clamp(18px,1.7vw,26px)}
html body .wk-ttl{font-size:clamp(28px,3.4vw,54px)}
html body .row .ttl{font-size:clamp(22px,2.4vw,36px)}
html body .row.feature .ttl{font-size:clamp(28px,3.6vw,54px)}
html body .sh-n{font-size:clamp(32px,4vw,60px)}
html body .gapword{font-size:clamp(200px,22vw,380px)}
html body #plateNum,html body .plate .num{font-size:clamp(80px,10vw,150px)}
/* selected-work heading line: larger */
html body section.work .work-head .kicker{font-size:clamp(15px,1.25vw,18px)}
html body section.work .work-head .note{font-size:clamp(16px,1.35vw,20px);line-height:1.55;max-width:30em;color:var(--ink-2)}
/* SafeSpace phone: smaller and standing tilted, like a product shot */
html body .wk-3 .phone{width:min(236px,100%);rotate:17deg;margin:clamp(14px,2vw,28px) 0}
html body .wk-3:hover .phone{transform:perspective(1100px) rotateY(-4deg) rotateX(2deg)}
@media (max-width:900px){html body .wk-3 .phone{width:min(200px,56vw);rotate:15deg;margin:20px 0 28px}}
@media (prefers-reduced-motion:reduce){html body .wk-3 .phone{rotate:17deg}}

/* diagnose / field notes: two calm columns instead of three */
html body #gridAnchor{grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(40px,7vw,120px)}
html body #gridAnchor .a-cols{display:flex;flex-direction:column;gap:clamp(40px,5vw,72px)}
html body #gridAnchor .a-col:nth-child(2){order:-1}
html body #gridAnchor .a-col .label{margin-bottom:clamp(14px,1.6vw,22px);font-size:13px}
html body #gridAnchor .think{font-size:clamp(24px,2.3vw,34px);line-height:1.34;max-width:26em}
html body #gridAnchor .qs{max-width:34em}
html body #gridAnchor .qs li{padding:clamp(14px,1.5vw,20px) 0;font-size:clamp(16px,1.2vw,18px);line-height:1.6}
html body #gridAnchor .qs li:first-child{padding-top:0}
html body .sym{padding:clamp(20px,2.3vw,30px) 4px}
html body .sym .t{font-size:clamp(20px,1.7vw,26px)}
html body #diagnose .n-head{margin-bottom:clamp(48px,6vw,96px)}
@media (max-width:900px){html body #gridAnchor{grid-template-columns:minmax(0,1fr);row-gap:44px}}

/* patient journey: intro text stacks under the heading; larger guide */
html body .j-head{grid-template-columns:minmax(0,1fr);row-gap:clamp(20px,2.4vw,32px);align-items:start}
html body .j-aside{max-width:36em;padding-bottom:0}
html body .walker{--ch:clamp(250px,18vw,300px)}
html body #journeyChar{--h:var(--ch) !important}
html body .tl-wrap{margin-top:clamp(120px,11vw,170px)}
@media (max-width:900px){html body .walker{--ch:clamp(210px,54vw,260px)}html body .tl-wrap{margin-top:clamp(150px,40vw,220px)}}

/* journey guide: a major element, not a small figure */
html body .walker{--ch:clamp(320px,23vw,400px)}
html body .tl-wrap{margin-top:clamp(150px,13vw,200px)}
@media (max-width:900px){html body .walker{--ch:clamp(260px,68vw,330px)}html body .tl-wrap{margin-top:clamp(190px,50vw,260px)}}
html body #tl{overflow:visible !important}

html body .j-aside .src{font-size:13.5px;line-height:1.55;margin-top:14px}

/* journey: intro under the heading, note under the stages (both always visible, same left edge as the heading) */
html body .j-intro{margin:28px 0 0;max-width:560px;font:300 22px/1.5 'Newsreader',Georgia,serif;color:#3f3a36;text-align:left}
html body .j-note{margin:20px 0 0;max-width:640px;display:flex;align-items:baseline;gap:16px;text-align:left;font:400 13px/1.6 'IBM Plex Mono',ui-monospace,monospace;color:#5a524b}
html body .j-note-k{flex:none;font:400 11px/1.6 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#2a6f75}
:root[data-theme="dark"] body .j-intro{color:#cfc8bc}
:root[data-theme="dark"] body .j-note{color:#A5B0B5}
:root[data-theme="dark"] body .j-note-k{color:#79C3BC}
@media (max-width:700px){html body .j-intro{font-size:18px;max-width:none}html body .j-note{max-width:none}}
html body .j-head h2 .ln:last-child{margin-bottom:0}   /* so the intro sits exactly 28px under the heading box */

/* field notes: the line on the right now sits under the heading, on the same left edge */
html body #diagnose .n-head{grid-template-columns:minmax(0,1fr);row-gap:24px;align-items:start}
html body #diagnose .n-head .lede{max-width:30em;margin:0}
html body #diagnose .n-head h2 .ln:last-child{margin-bottom:0}   /* so the line sits a clean 24px under the heading */

/* Beyond Health header: the line on the right sits under the heading, on the same left edge */
html body .hd:has(> .deck){grid-template-columns:minmax(0,1fr);row-gap:22px;align-items:start}
html body .hd:has(> .deck) .h1 .ln:last-child{margin-bottom:0}
html body .hd .deck{max-width:24em;margin:0}