/* Type-portal treatment inspired by Glyph Portal © 2026 Christian Katzmann, MIT.
   Adapted for JDP's existing static site and scroll sequence. */
.method-portal { background:#172b3a; height:216.667svh; position:relative; }
.method-portal-pin { position:sticky; top:0; height:100svh; overflow:hidden; background:#172b3a; }
.method-portal-art { width:100%; height:100%; display:block; }
.method-portal-label { position:absolute; top:15%; left:24px; right:24px; text-align:center; color:#172b3a; }
.method-portal-label p { font:500 14px/1.5 var(--ds-sans); margin:0 0 14px; }
.method-portal-label h2 { font:400 clamp(24px,3vw,40px)/1.4 var(--ds-serif,serif); margin:0; }
.method-portal-skip { position:absolute; bottom:12%; left:50%; transform:translateX(-50%); color:#345b73; font:400 14px/1.5 var(--ds-sans); white-space:nowrap; padding:12px; }
.method-portal-skip:focus-visible { outline:2px solid currentColor; outline-offset:4px; }
@media(max-width:767px) { .method-portal {height:200svh;} .method-portal-art {width:100%;} }
@media(prefers-reduced-motion:reduce) { .method-portal {height:65svh;} .method-portal-pin {position:relative;height:65svh;} }
html:not(.portal-ready) .method-portal {height:70svh;}
html:not(.portal-ready) .method-portal-pin {height:70svh;position:relative;}

/* Let real content enter the same viewport as the type finishes expanding. */
@media(prefers-reduced-motion:no-preference) {
 html.portal-ready .method-portal + .method-section {
  position:relative; z-index:1; margin-top:-100svh;
  opacity:var(--method-entry,0); visibility:var(--method-visibility,hidden);
  padding-top:clamp(40px,7svh,72px);
 }
}