/* Dr. Wagner Okai · fable2 · Sobre as one notebook sheet. Loaded after v3.css.
   The red thread ("fio condutor") runs down the margin as you read; three interactive atlas plates explain what he observes; the portrait enters as ink inside a brush ring. Everything is complete without JS or motion. */
.sb{position:relative;--mx:calc(max(14px,(100vw - var(--wrap))/2 - 14px) - 20px);
  background-image:repeating-linear-gradient(180deg,transparent 0 37px,rgba(42,71,166,.085) 37px 38px);background-position:0 18px}
.sb section{padding:clamp(64px,9vw,120px) 0;position:relative}
.sb-k{display:block;font:600 1.6rem/1 var(--script);color:var(--red);margin-bottom:14px;letter-spacing:0}
.sb h2,.sb-look h2,.sb-visit h2{font-size:clamp(2rem,3.6vw,3.1rem);line-height:1.05;letter-spacing:-.02em;margin:0 0 .4em;max-width:none}
.sb h2 em,.sb-look h2 em,.sb-visit h2 em{color:var(--red)}
.sb .lead,.sb-look .lead{max-width:34em}
/* the red margin thread keeps clear air from the text: content starts at least 36px right of it */
.sb .wrap{padding-left:max(20px,calc(50px - max(0px,(100vw - var(--wrap))/2)))}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the thread down the margin */
.sb-thread{position:absolute;left:var(--mx);top:0;width:40px;height:100%;overflow:visible;z-index:1;pointer-events:none}
.sb-thread .th{fill:none;stroke:var(--red);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:var(--th,1);vector-effect:non-scaling-stroke}
.sb-thread .st{fill:var(--paper);stroke:var(--red);stroke-width:1.8;transition:fill .5s,r .5s}
.sb-thread .st.on{fill:var(--red)}

/* ---------- opening ---------- */
.sb-open{padding-top:clamp(28px,5vw,64px)!important}
.sb-open-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,96px);align-items:center}
.sb-port{position:relative;width:min(38vw,440px);aspect-ratio:1;margin:0;justify-self:center}
.sb-photo{position:absolute;inset:10%;border-radius:50%;overflow:hidden;background:var(--paper-2)}
.sb-photo img{position:absolute;width:150%;max-width:none;height:auto;left:-25%;top:-22%} /* head and shoulders; the coat embroidery stays outside the circle */
.sb-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.sb-ring path{fill:none;stroke:var(--ink);stroke-linecap:round;stroke-dasharray:1 1}
.sb-ring .s1{stroke-width:15;opacity:.92}.sb-ring .s2{stroke-width:3.5;opacity:.35}
.sb-seal{position:absolute;right:3%;bottom:8%;width:17%;height:auto;transform:rotate(-6deg);filter:drop-shadow(0 1px 0 rgba(184,58,38,.25))}
.sb-hi{font:600 clamp(1.6rem,2.4vw,2.1rem)/1 var(--script);color:var(--red);display:block;margin-bottom:8px;transform:rotate(-2deg);transform-origin:left}
.sb-open-tx h1{font-size:clamp(2rem,4.3vw,4.5rem);line-height:1;letter-spacing:-.03em;margin:0 0 .45em}
.sb-open-tx h1 .l1,.sb-open-tx h1 .l2{display:block;white-space:nowrap}
.sb-open-tx h1 .l2{padding-left:clamp(18px,3vw,56px);font-style:italic;font-weight:500;color:var(--blue)}
.sb-facts{display:flex;flex-wrap:wrap;gap:14px 36px;margin:28px 0 0;padding-top:18px;border-top:1px solid var(--rule)}
.sb-facts div{margin:0}
.sb-facts dt{font:600 .72rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.sb-facts dd{margin:0;font:italic 500 1.12rem/1.3 var(--serif);color:var(--ink)}
/* entrance: the ring draws, the ink of the portrait bleeds in, the seal is stamped */
.js .sb-ring path{stroke-dashoffset:1}
.sb-go .sb-ring .s1{animation:sbDraw 1.8s cubic-bezier(.65,0,.35,1) .3s both}
.sb-go .sb-ring .s2{animation:sbDraw 1.8s cubic-bezier(.65,0,.35,1) .5s both}
@keyframes sbDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.js:not(.sb-go) .sb-photo{opacity:0}
.sb-go .sb-photo{animation:sbBleed 2.2s cubic-bezier(.3,.6,.2,1) .15s both;-webkit-mask:var(--blob) 50% 50%/0% 0% no-repeat;mask:var(--blob) 50% 50%/0% 0% no-repeat}
@keyframes sbBleed{0%{opacity:0;filter:blur(10px);-webkit-mask-size:0% 0%;mask-size:0% 0%}30%{opacity:1}100%{opacity:1;filter:none;-webkit-mask-size:340% 340%;mask-size:340% 340%}}
.js:not(.sb-go) .sb-seal{opacity:0;transform:rotate(-14deg) scale(1.35)}
.sb-go .sb-seal{animation:sbStamp .7s cubic-bezier(.3,1.35,.5,1) 2s both}
@keyframes sbStamp{from{opacity:0;transform:rotate(-14deg) scale(1.35)}60%{opacity:1}to{opacity:1;transform:rotate(-6deg) scale(1)}}
.js:not(.sb-go) .sb-ring path,.js:not(.sb-go) .sb-photo,.js:not(.sb-go) .sb-seal{animation:sbSafe .6s ease 10s forwards}
@keyframes sbSafe{to{opacity:1;transform:none;stroke-dashoffset:0}}

/* ---------- why ---------- */
.sb-big{font:italic 500 clamp(2.2rem,5.4vw,4.8rem)/1.04 var(--serif);letter-spacing:-.03em;color:var(--ink);margin:0 0 clamp(28px,4vw,48px);max-width:none}
.sb-big .hl{color:var(--red)}
.sb-why-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,5vw,80px);align-items:start}
.sb-verb{margin:0;padding-left:22px;border-left:2px solid var(--red)}
.sb-verb p{font:500 clamp(1.3rem,2vw,1.6rem)/1.35 var(--serif);color:var(--ink);margin:0 0 12px}
.sb-verb cite{font:400 .95rem/1.4 var(--sans);font-style:normal;color:var(--ink-3)}
.sb-why-p p{color:var(--ink-2);font-size:1.12rem}

/* ---------- what he looks at: interactive engraved plates ---------- */
.sb-sk-row{list-style:none;margin:clamp(28px,4vw,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px)}
.sb-sk:nth-child(2){margin-top:34px}.sb-sk:nth-child(3){margin-top:10px}
/* Generated engravings share registered viewports; overlays remain in anatomical coordinates. */
.study-figure{margin:0 0 18px;width:100%;max-width:340px}
.study-stage{position:relative;aspect-ratio:1;isolation:isolate;mix-blend-mode:darken}
.study-stage picture,.study-stage img{display:block;width:100%;height:auto;max-width:none}
.study-layer,.study-jaw picture{mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,#000 58%,transparent 100%)}
.study-layer{position:absolute;inset:0;overflow:hidden;transition:opacity .85s ease}
.study-layer picture{width:200%}
.study-secondary{opacity:0}
.study-secondary picture{transform:translateX(-50%)}
[data-state="mouth"] .study-secondary,[data-state="low"] .study-secondary{opacity:1}
[data-state="mouth"] .study-primary,[data-state="low"] .study-primary{opacity:0}
.study-overlay{position:absolute;inset:0;width:100%;height:100%;fill:none;pointer-events:none}
.balance{color:var(--ink);stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.balance-beam{transform-origin:500px 835px;transition:transform .9s cubic-bezier(.3,.6,.2,1)}
.balance-load{fill:url(#balance-hatch);transition:transform .9s,opacity .9s,color .9s}
.balance-pivot{fill:var(--paper)}
[data-state="one"] .balance-beam{transform:rotate(9deg)}
[data-state="one"] .right-load{color:var(--red);transform:translateY(-18px) scaleY(1.02);transform-origin:730px 884px}
[data-state="one"] .balance-right{stroke:var(--red)}
[data-state="one"] .left-load{opacity:.18}
.bite-attention{stroke:var(--red);stroke-width:8;opacity:0;transition:opacity .6s}
[data-state="one"] .bite-attention{opacity:.9}
.airflow{stroke:var(--red);stroke-width:2.6;stroke-linecap:round}
.airflow path{stroke-dasharray:.035 .965;stroke-dashoffset:0;opacity:0}
.study-seen[data-state="nose"] .air-nose,.study-seen[data-state="mouth"] .air-mouth{animation:studyAir 2.4s ease-in-out 2}
.study-animate[data-state="nose"] .air-nose,.study-animate[data-state="mouth"] .air-mouth{animation:studyAirReplay 2.4s ease-in-out 2}
@keyframes studyAir{0%{stroke-dashoffset:0;opacity:0}15%,85%{opacity:1}100%{stroke-dashoffset:-1;opacity:0}}
@keyframes studyAirReplay{0%{stroke-dashoffset:0;opacity:0}15%,85%{opacity:1}100%{stroke-dashoffset:-1;opacity:0}}
.tongue-guides{stroke:var(--ink);stroke-width:2}
.tongue-guides circle{fill:var(--paper)}
.tongue-guide{stroke:var(--red);transition:transform .85s ease}
[data-state="low"] .tongue-guide{transform:translateY(90px)}
.anatomy-label{position:absolute;right:2%;padding:2px 5px;background:var(--paper);font:500 .78rem/1.2 var(--sans);color:var(--ink)}
.label-palate{top:17%}.label-tongue{top:36%;color:var(--red);transition:top .85s ease}
[data-state="low"] .label-tongue{top:46%}
.study-seen .palate-guide,.study-seen .label-palate{animation:studyLabel .7s ease .15s both}
.study-seen .tongue-guide,.study-seen .label-tongue{animation:studyLabel .7s ease .65s both}
@keyframes studyLabel{from{opacity:0}to{opacity:1}}
.study-controls{display:none;flex-wrap:wrap;gap:5px;margin-top:18px;padding-top:12px;border-top:1px solid var(--rule)}
.study-ready .study-controls{display:flex}
.study-controls button{min-height:44px;padding:9px 12px;border:1px solid var(--rule);border-radius:3px;background:transparent;color:var(--ink);font:500 .83rem/1.2 var(--sans);cursor:pointer;touch-action:manipulation;transition:background .2s,color .2s,border-color .2s}
.study-controls button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.study-controls button:focus-visible{outline:2px solid var(--red);outline-offset:3px}
@media(hover:hover){.study-controls button:hover{border-color:var(--red)}}
.sb-sk .study-caption{font:400 .9rem/1.5 var(--sans);color:var(--ink);margin:10px 0 0;min-height:4.5em;padding-left:12px;border-left:2px solid var(--red)}
.sb-n{display:block;font:600 1.5rem/1 var(--script);color:var(--red);margin-bottom:8px}
.sb-sk h3{font-size:1.45rem;margin:0 0 .4em}
.sb-sk p{color:var(--ink-2);margin:0;font-size:1.02rem}

/* ---------- first visit ---------- */
.sb-visit-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,56px);align-items:center}
.sb-visit-ph{margin:0;width:clamp(150px,17vw,220px);background:#FFFDF8;padding:10px;box-shadow:var(--shadow-paper);transform:rotate(3deg)}
.sb-visit-ph .zw{aspect-ratio:1}
.sb-steps{list-style:none;position:relative;margin:clamp(28px,4vw,48px) 0 0;padding:34px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.sb-steps-line{position:absolute;left:0;right:0;top:0;width:100%;height:20px;overflow:visible}
.sb-steps-line path{fill:none;stroke:var(--red);stroke-width:2.4;stroke-linecap:round;vector-effect:non-scaling-stroke}
.js .sb-steps-line path{stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 2.2s var(--ease-io)}
.js .sb-steps-line.in path{stroke-dashoffset:0}
.sb-steps li{position:relative;padding-top:8px}
.sb-steps li::before{content:"";position:absolute;left:0;top:-38px;width:11px;height:11px;border-radius:50%;background:var(--paper);border:2px solid var(--red)}
.sb-steps b{font:italic 500 2rem/1 var(--serif);color:var(--blue);display:block;margin-bottom:8px}
.sb-steps h3{font-size:1.25rem;margin:0 0 .35em}
.sb-steps p{color:var(--ink-2);margin:0;font-size:1rem}
.sb-note{margin:clamp(24px,3vw,36px) 0 0;max-width:40em;color:var(--ink-3);font-size:1rem}
.sb-visit .btns{margin-top:18px}

/* ---------- credentials / where / voice / end ---------- */
.sb-cred-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px);align-items:start}
.sb-cred .index-card{margin-top:0}
.sb-where .pinned-cities{margin-top:clamp(28px,4vw,48px)}
.sb-voice .filmstrip-wrap{margin-top:clamp(24px,3vw,40px)}
.sb-end{padding-top:clamp(40px,6vw,80px)!important}
.sb-ps{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;color:var(--ink-2);margin:6px 0 0}
.sb-ps .hand{font-size:1.5rem}
.sb-end .letter h2{font-size:clamp(1.9rem,3.4vw,2.6rem)}
.sb-why-p .textlink{display:inline-block;margin-top:6px}

@media (max-width:1000px){.sb-sk-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.sb-steps{grid-template-columns:1fr 1fr;gap:28px 24px}.sb-steps-line{display:none}.sb-steps li::before{display:none}.sb-steps{padding-top:0;border-top:1.5px solid var(--red)}.sb-steps li{padding-top:22px}}
@media (max-width:860px){
  .sb{--mx:-12px;background-image:repeating-linear-gradient(180deg,transparent 0 37px,rgba(42,71,166,.075) 37px 38px)}
  .sb .wrap{padding-left:28px}
  .sb-open-grid,.sb-why-grid,.sb-cred-grid{grid-template-columns:minmax(0,1fr)}
  .sb-port{width:min(66vw,320px);justify-self:start}
  .sb-open-tx h1{font-size:clamp(1.95rem,8.4vw,2.9rem)}
  .sb-sk-row{grid-template-columns:minmax(0,1fr);gap:40px}
  .sb-sk:nth-child(n){margin-top:0}
  .sb-sk{display:grid;grid-template-columns:minmax(0,1fr);gap:0;align-items:start}
  .study-figure{width:min(100%,340px);justify-self:center}
  .study-controls{margin-top:16px}
  .sb-sk .study-caption{min-height:3em}
  .sb-visit-head{grid-template-columns:minmax(0,1fr)}
  .sb-visit-ph{width:min(46vw,200px);transform:rotate(2deg)}
  .sb-steps{grid-template-columns:1fr}
}
@media (max-width:560px){.sb-sk h3{font-size:1.25rem}.sb-facts{gap:12px 24px}}
@media (prefers-reduced-motion:reduce){
  .sb-thread .th{stroke-dashoffset:0}
  .sb-thread .st{fill:var(--red)}
  .js .sb-ring path,.sb-go .sb-ring path{animation:none;stroke-dashoffset:0}
  .js:not(.sb-go) .sb-photo,.sb-go .sb-photo{animation:none;opacity:1;-webkit-mask:none;mask:none}
  .js:not(.sb-go) .sb-seal,.sb-go .sb-seal{animation:none;opacity:1;transform:rotate(-6deg)}
  .js .sb-steps-line path{transition:none;stroke-dashoffset:0}
  .sb-sk *, .sb-sk *::before, .sb-sk *::after{animation:none!important;transition:none!important}
  .airflow path{opacity:0}
}
/* 2026-10-08: new photos, five-step first visit, practical notes, teaching photo */
.sb-photo--fit img{position:absolute;inset:0;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 14%;transform:scale(1.25);transform-origin:50% 12%}
@media (min-width:1001px){.sb-steps{grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}}
.sb-prep{margin:clamp(28px,4vw,44px) 0 0;max-width:46em;background:#FFFDF8;box-shadow:var(--shadow-paper);padding:clamp(20px,3vw,30px)}
.sb-prep h3{font-size:1.3rem;margin:0 0 .6em}
.sb-prep ul{margin:0;padding-left:20px;color:var(--ink-2)}
.sb-prep li{margin:6px 0;line-height:1.55}
.sb-prep strong{color:var(--ink);font-weight:600}
.sb-teach{margin:clamp(22px,3vw,34px) 0 0;width:min(300px,60vw);aspect-ratio:4/5;overflow:hidden;background:#FFFDF8;padding:8px;box-shadow:var(--shadow-paper);transform:rotate(-1.5deg)}
.sb-teach img{width:100%;height:100%;object-fit:cover;display:block}
.index-card .ic-t2{margin:26px 0 12px}
.index-card .ic-p{margin:0;color:var(--ink);line-height:1.6}

/* phones: stamp sits above the title instead of on it */
@media (max-width:560px){.index-card .crosp{position:static;display:inline-block;margin:0 0 14px -2px;font-size:.74rem}.index-card .ic-t{margin-bottom:22px}}