/* ====================================================================
   PG-LEARN.CSS
   Page stylesheet. Scope: learn.html (body.pg-learn), newsletter.html
   (body.pg-newsletter) and the four issue-*.html Heart School lessons
   (bare body, sections 5 to 10 of THE FOUR LESSONS only).
   Loaded right after fable.css on those pages only. Adds to the
   foundation's tokens and components; never redefines them.
   Zero em dashes or en dashes anywhere, including these comments.
   ==================================================================== */

/* ====================================================================
   ROUND 9 (REQUIREMENTS P, 2026-10-06): learn.html and newsletter.html.
   Everything above THE FOUR LESSONS is scoped to body.pg-learn and
   body.pg-newsletter, so the four lesson pages (bare body) never see it.
   Photos sit under the copy with nothing on top: no scrim, fade, mask,
   vignette, tint or grain (the runtime in fable.js picks navy or white
   ink from the pixels under each block). A box answers hover and focus
   with the shared 1.5px ring only (motion-kit.css), so no :hover rule of
   a box lives here. Buttons keep their M2 glow. Motion is transform and
   opacity only, paused off screen (pg-learn.js adds .is-live), resolved
   to its finished state under reduced motion, and every hover sits under
   (hover:hover) and (pointer:fine) with a :focus-visible twin.
   ==================================================================== */

body.pg-learn,body.pg-newsletter{
  --pl-ease:var(--ease-snap,cubic-bezier(.16,1,.3,1));
  --pl-soft:var(--ease-soft,cubic-bezier(.4,0,.15,1));
  --pl-navy:#0C1833;
  --pl-navy-2:#13244A;
  --pl-crimson:#E23A46;
  --pl-coral:#FF6B75;
  --pl-deep:#9C1B27;
  --pl-ink:#F4F7FB;
  --pl-soft-ink:rgb(244 247 251 / .74);
}
body.pg-learn #signup,body.pg-newsletter #signup{scroll-margin-top:92px;}
/* headings that are pre split into lines (data-split) must not stay hidden without JS */
.no-js body.pg-learn .rl-clip>span,.no-js body.pg-newsletter .rl-clip>span{transform:none;}

/* ---------------------------------------------------------------
   1. LEARN #top: a full viewport photograph. Landscape screens get the
   native 3:2 frame (he stands right of centre, the calm dark wood is on
   the left), the copy is placed on that wood by the runtime
   (data-photo-region). Portrait screens get the portrait frame and the
   copy rests low, on the lectern front. The old plate era rules in
   fable.css (spread flex, bottom pinned copy, scrim pad) are overridden.
   --------------------------------------------------------------- */
body.pg-learn #top{align-items:center;}
body.pg-learn #top .sec-inner{display:block;max-width:none;padding:0 var(--gutter);}
/* the runtime places the copy over a region of the photo; the left edge is pinned to the page gutter (the nav brand's edge), the top and the width follow the picture */
body.pg-learn #top .phero__copy{left:var(--gutter);width:var(--pr-w,min(34rem,40vw));max-width:none;margin:0;padding:0;}
body.pg-learn #top .phero__title{font-size:clamp(2.7rem,5.2vw,5.4rem);line-height:.98;letter-spacing:-.035em;max-width:none;margin:0;}
body.pg-learn #top .phero__title em.k4-grad{background-image:var(--k4-grad-text-photo);background-size:230% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
body.pg-learn #top .phero__deck{max-width:30ch;margin:1.2rem 0 0;font-size:clamp(1.05rem,1.5vw,1.35rem);font-weight:500;line-height:1.45;}
body.pg-learn #top .row-cta{margin-top:1.5rem;gap:1rem 1.6rem;}
/* the link under the primary button: its underline draws in coral */
body.pg-learn .pgl-herolink::after{background:var(--pl-coral);}
body.pg-learn .pgl-herolink:focus-visible,body.pg-learn #top .k4-btn--primary:focus-visible{outline:2px solid #fff;outline-offset:4px;}
/* one slow settle on the picture: the camera comes to rest on him while the headline lands */
@keyframes pglSettle{from{transform:scale(1.04);}to{transform:scale(1);}}
@media(prefers-reduced-motion:no-preference){
  body.pg-learn #top .phero__bg.is-live img{animation:pglSettle 2.4s cubic-bezier(.2,.7,.2,1) 1 both;transform-origin:var(--drift-origin,62% 30%);will-change:auto;}
}
/* narrow landscape (phones turned sideways): the left column stays clear of his face */
@media(max-width:900px) and (min-aspect-ratio:101/100){
  body.pg-learn #top .phero__copy{width:min(24rem,52vw);}
}
@media(max-height:520px) and (orientation:landscape){
  body.pg-learn #top{padding-top:76px;}
  body.pg-learn #top .phero__title{font-size:min(6.5vw,9vh);}
  body.pg-learn #top .phero__deck{font-size:1rem;margin-top:.8rem;}
  body.pg-learn #top .row-cta{margin-top:1rem;}
}
/* portrait screens (phones, tablets standing up): the portrait frame, the copy low on the lectern front */
@media(max-aspect-ratio:1/1){
  body.pg-learn #top{--photo-pos:66% 50%;--photo-pos-m:70% 50%;align-items:flex-end;padding-top:0;}
  body.pg-learn #top .sec-inner{padding-bottom:max(6svh,env(safe-area-inset-bottom));}
  body.pg-learn #top .phero__copy{position:static!important;width:auto!important;height:auto!important;max-width:30rem;}
  body.pg-learn #top .phero__title{font-size:clamp(2.4rem,9vw,3.2rem);}
  body.pg-learn #top .phero__deck{max-width:28ch;font-size:1.05rem;margin-top:1rem;}
  body.pg-learn #top .row-cta{display:grid;grid-template-columns:1fr;gap:.9rem;margin-top:1.4rem;}
  body.pg-learn #top .row-cta .k4-btn--primary{width:100%;}
  body.pg-learn #top .row-cta .pgl-herolink{justify-self:start;}
}
@media(hover:none) and (pointer:coarse){
  body.pg-learn .pgl-herolink{min-height:44px;display:inline-flex;align-items:center;}
}

/* ---------------------------------------------------------------
   2. LEARN #turning: the signature phone. An upright, sharp handset
   built in CSS (metal rim, bezel, dynamic island) standing on the paper
   ground with only a contact shadow. His two real posts sit on a matched
   blurred field of their own colour (no black bars); the four lessons
   show their plate flush to the edge. Arrows beside the phone on wide
   screens, under it on narrow ones. Autoplay dwells per slide and the
   active dot is the timer.
   --------------------------------------------------------------- */
body.pg-learn .pgl-turn{overflow:hidden;}
body.pg-learn .pgl-turn__grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(2.4rem,5vw,5.4rem);align-items:center;padding-block:clamp(2.5rem,5vw,4.25rem);}
body.pg-learn .pgl-turn__copy{grid-column:1;grid-row:1;min-width:0;}
body.pg-learn .pgl-turn__copy .lead-stmt{max-width:15ch;text-wrap:balance;}
body.pg-learn .pgl-stage{--w:clamp(240px,calc((100svh - 9.5rem) / 2.155),380px);grid-column:2;grid-row:1;position:relative;min-width:0;display:grid;place-items:center;}

/* the quote, set large */
body.pg-learn .pgl-quote{margin:clamp(1.8rem,3vw,2.6rem) 0 0;}
body.pg-learn .pgl-quote blockquote{margin:0;}
body.pg-learn .pgl-quote p{font-family:var(--display);font-weight:500;font-size:clamp(1.2rem,1.8vw,1.55rem);line-height:1.35;letter-spacing:-.01em;color:var(--ink);max-width:32ch;}
body.pg-learn .pgl-quote__tail{color:var(--ink-soft);}
body.pg-learn .pgl-quote figcaption{margin-top:1.1rem;font:600 .95rem/1.2 var(--body);color:var(--ink-soft);}
body.pg-learn .pgl-turn__cta{margin:1.8rem 0 0;}

/* the handset */
body.pg-learn .phn{position:relative;width:var(--w);margin:0 auto;font-size:calc(var(--w) / 20);}
body.pg-learn .phn__floor{position:absolute;left:2%;right:-12%;bottom:-2.6em;height:5em;border-radius:50%;pointer-events:none;opacity:.35;
  background:radial-gradient(closest-side,rgb(0 0 0 / .62),rgb(0 0 0 / .3) 55%,transparent 100%);filter:blur(.7em);transform:scaleY(.55);}
body.pg-learn .phn__tilt{position:relative;}
body.pg-learn .phn__body{position:relative;width:100%;aspect-ratio:9 / 19.4;border-radius:3.3em;padding:.3em;
  background:linear-gradient(145deg,#8f9ab6 0%,#3a4562 14%,#1a2240 50%,#3a4562 86%,#8f9ab6 100%);
  box-shadow:inset 0 0 0 .07em rgb(255 255 255 / .22),0 2.6em 3.4em -2em rgb(12 24 51 / .45);}
body.pg-learn .phn__bezel{position:absolute;inset:.3em;border-radius:3.05em;background:#05070d;}
body.pg-learn .phn__screen{position:absolute;inset:.82em;border-radius:2.55em;overflow:hidden;display:flex;flex-direction:column;background:#070b16;color:#fff;isolation:isolate;}
body.pg-learn .phn__island{position:absolute;z-index:6;top:.72em;left:50%;width:5.5em;height:1.62em;margin-left:-2.75em;border-radius:1em;background:#000;display:flex;justify-content:flex-end;align-items:center;padding-right:.5em;}
body.pg-learn .phn__island i{display:block;width:.62em;height:.62em;border-radius:50%;background:radial-gradient(circle at 35% 35%,#3b4a82 0%,#10173a 55%,#05070f 100%);box-shadow:0 0 0 .1em #0a0d18;}
body.pg-learn .phn__head{position:relative;z-index:5;flex:none;display:flex;align-items:center;gap:.7em;margin-top:2.7em;padding:.35em 1.1em .65em;}
body.pg-learn .phn__ava{flex:none;width:2.1em;height:2.1em;border-radius:50%;background:url(../images/bg3/learn-post-1.webp) 25% 29% / 420% auto no-repeat #1a2442;box-shadow:0 0 0 .14em #070b16,0 0 0 .26em var(--pl-coral);}
body.pg-learn .phn__handle{font:700 .85em/1.1 var(--body);letter-spacing:.005em;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
body.pg-learn .phn__count{margin-left:auto;font:600 .8em/1 var(--body);color:rgb(255 255 255 / .62);}
body.pg-learn .phn__count b{color:#fff;font-weight:700;}
body.pg-learn .phn__view{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:#0C1833;}
body.pg-learn .phn__track{position:absolute;inset:0;display:flex;margin:0;padding:0;list-style:none;transition:transform .8s var(--pl-ease);will-change:transform;}
body.pg-learn .phn__slide{position:relative;flex:0 0 100%;min-width:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;}
body.pg-learn .phn__post{display:block;width:100%;height:auto;max-height:100%;object-fit:contain;}
/* his posts: the sharp post edge to edge, the letterbox above and below it painted in the picture's own edge colours (sampled from the files), so no black bars and no seam */
body.pg-learn .phn__slide--post{background:linear-gradient(180deg,#dde5eb 0,#dde5eb 30%,#cde5fb 70%,#cde5fb 100%);}
body.pg-learn .phn__slide--post:nth-child(2){background:linear-gradient(180deg,#d1dcdb 0,#d1dcdb 30%,#eae8e5 70%,#eae8e5 100%);}
body.pg-learn .phn__post{position:relative;z-index:1;}
body.pg-learn .phn__tap{position:absolute;inset:0;z-index:3;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;}
body.pg-learn .phn__tap:focus-visible{outline:2px solid var(--pl-coral);outline-offset:-3px;}
/* the four lesson slides: the plate flush under the header, the words below it */
body.pg-learn .phn__slide--lesson{align-items:stretch;justify-content:flex-start;background:#0C1833;}
body.pg-learn .lsl__art{position:relative;flex:1 1 auto;min-height:0;display:block;}
body.pg-learn .lsl__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;filter:none;}
body.pg-learn .lsl__txt{flex:none;display:grid;gap:.5em;padding:.95em 1.3em 1.2em;}
body.pg-learn .lsl__k{font:700 .8em/1 var(--body);color:var(--pl-coral);}
body.pg-learn .lsl__t{font-family:var(--display);font-weight:800;font-size:1.4em;line-height:1.1;letter-spacing:-.02em;color:#fff;}
body.pg-learn .lsl__m{font:600 .8em/1 var(--body);color:rgb(255 255 255 / .62);}
/* dots: the active one is a story style timer that fills over the slide's own dwell */
body.pg-learn .phn__dots{position:relative;z-index:5;flex:none;display:flex;justify-content:center;align-items:center;gap:.1em;height:3.3em;padding-bottom:.9em;background:#070b16;}
body.pg-learn .phn__dot{position:relative;width:1.2em;height:1.5em;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;}
body.pg-learn .phn__dot::before{content:"";position:absolute;left:50%;top:50%;width:.46em;height:.46em;margin:-.23em 0 0 -.23em;border-radius:.3em;background:rgb(255 255 255 / .34);transition:width .35s var(--pl-ease),margin .35s var(--pl-ease),background .3s ease;}
body.pg-learn .phn__dot[aria-current="true"]::before{width:1.3em;margin-left:-.65em;}
body.pg-learn .phn__dot::after{content:"";position:absolute;left:50%;top:50%;width:1.3em;height:.46em;margin:-.23em 0 0 -.65em;border-radius:.3em;background:var(--pl-coral);transform:scaleX(0);transform-origin:0 50%;opacity:0;}
body.pg-learn .phn__dot[aria-current="true"]::after{opacity:1;transform:scaleX(1);}
@media(prefers-reduced-motion:no-preference){
  body.pg-learn .phn.is-playing .phn__dot[aria-current="true"]::after{animation:phnFill var(--dwell,4200ms) linear 1 both;}
  body.pg-learn .phn.is-playing.is-held .phn__dot[aria-current="true"]::after{animation-play-state:paused;}
}
@keyframes phnFill{from{transform:scaleX(0);}to{transform:scaleX(1);}}
body.pg-learn .phn__dot:focus-visible{outline:2px solid var(--pl-coral);outline-offset:1px;border-radius:.4em;}
@media(hover:hover) and (pointer:fine){body.pg-learn .phn__dot:hover::before{background:#fff;}}
@media(prefers-reduced-motion:reduce){body.pg-learn .phn__track{transition:none;}}
/* arrows: beside the phone on wide screens */
body.pg-learn .phn__ctl{display:flex;justify-content:center;gap:.8rem;margin-top:clamp(2rem,3vw,2.7rem);}
body.pg-learn .phn__arrow{width:44px;height:44px;border-radius:12px;border:1.5px solid rgb(12 24 51 / .28);background:transparent;color:var(--ink);font:600 1.15rem/1 var(--body);cursor:pointer;display:grid;place-items:center;-webkit-tap-highlight-color:transparent;
  transition:border-color .22s ease,transform .2s var(--pl-ease);}
body.pg-learn .phn__arrow span{display:block;transition:transform .3s var(--pl-ease);}
@media(hover:hover) and (pointer:fine){
  body.pg-learn .phn__arrow:hover{border-color:var(--pl-deep);}
  body.pg-learn #phnNext:hover span{transform:translateX(3px);}
  body.pg-learn #phnPrev:hover span{transform:translateX(-3px);}
}
body.pg-learn .phn__arrow:focus-visible{outline:none;border-color:var(--pl-deep);box-shadow:0 0 0 1.5px var(--pl-deep);}
body.pg-learn .phn__arrow:active{transform:scale(.96);}
@media(min-width:901px){
  body.pg-learn .phn__ctl{position:absolute;left:50%;top:50%;width:calc(var(--w) + 2 * (44px + 20px));margin:0;transform:translate(-50%,-50%);justify-content:space-between;gap:0;pointer-events:none;}
  body.pg-learn .phn__arrow{pointer-events:auto;}
}
@media(max-width:900px){
  body.pg-learn .pgl-turn__grid{grid-template-columns:1fr;}
  body.pg-learn .pgl-turn__copy{display:contents;}
  body.pg-learn .pgl-turn__h{grid-row:1;grid-column:1;}
  body.pg-learn .pgl-stage{grid-column:1;grid-row:2;--w:clamp(240px,68vw,300px);}
  body.pg-learn .pgl-turn__q{grid-row:3;grid-column:1;}
  body.pg-learn .pgl-turn__cta{grid-row:4;grid-column:1;}
  body.pg-learn .pgl-turn__copy .lead-stmt{max-width:18ch;}
}

/* ---------------------------------------------------------------
   3. LEARN #arc: one sticky stage. The three real plates stack in one
   figure on the right; the three rows on the left light as they cross
   the middle of the screen and the matching plate fades in. Flat navy,
   no glow, no numerals. The visible heart beats (stages 01 and 03). With
   no JS the first plate shows.
   --------------------------------------------------------------- */
body.pg-learn .pgl-arc{background:var(--pl-navy);}
body.pg-learn .arc2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(2rem,5vw,5rem);padding-block:clamp(3.5rem,6vw,5.5rem);}
body.pg-learn .arc2__copy{min-width:0;display:grid;gap:clamp(1rem,2vw,1.6rem);align-content:start;}
body.pg-learn .arc2__head{margin-bottom:clamp(.6rem,1.5vw,1.2rem);}
body.pg-learn .arc2__head .lead-stmt{max-width:12ch;}
body.pg-learn .arc2__lede{margin:1.1rem 0 0;color:var(--on-dark-soft);font-size:clamp(1.1rem,1.5vw,1.3rem);max-width:30ch;}
body.pg-learn .stg{position:relative;display:flex;flex-direction:column;justify-content:center;gap:.9rem;min-height:clamp(260px,36svh,360px);padding:1.4rem 1.6rem;border:1px solid var(--line-dark);border-radius:18px;background:none;color:var(--pl-ink);text-decoration:none;scroll-margin-top:110px;}
body.pg-learn .stg__t{font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1.1;letter-spacing:-.02em;color:#fff;margin:0;}
body.pg-learn .stg__d{display:block;font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.55;color:var(--pl-soft-ink);}
body.pg-learn .stg__go{position:relative;display:inline-flex;align-self:flex-start;align-items:center;gap:.45rem;padding-bottom:.3rem;font:700 .95rem/1 var(--body);color:var(--pl-ink);background:linear-gradient(currentColor,currentColor) no-repeat 0 100% / 0 1.5px;transition:background-size .35s var(--pl-ease);}
body.pg-learn a.stg:hover .stg__go,body.pg-learn a.stg:focus-visible .stg__go{background-size:100% 1.5px;}
/* stage 02 is not written yet: a plain muted label, not a box and not a link looking row */
body.pg-learn .stg[data-box="off"]{border-color:transparent;cursor:default;}
body.pg-learn .stg__go--soon{color:rgb(244 247 251 / .6);font-weight:600;background:none;}
.js body.pg-learn .stg:not(.is-on) :is(.stg__t,.stg__d,.stg__go){opacity:.55;}
body.pg-learn .stg :is(.stg__t,.stg__d,.stg__go){transition:opacity .4s ease;}
body.pg-learn .stg__mini{display:none;margin:0;}
body.pg-learn .stg__credit{margin:.7rem 0 0;font-size:.8125rem;line-height:1.5;color:var(--on-dark-soft);}
body.pg-learn .stg__credit a,body.pg-learn .arc2__credit a{color:inherit;text-decoration:underline;text-underline-offset:.18em;}
body.pg-learn .arc2__right{min-width:0;position:relative;}
body.pg-learn .arc2__stage{position:sticky;top:max(110px,calc(50svh - 330px));display:grid;gap:.9rem;}
body.pg-learn .arc2__art{position:relative;margin:0;height:min(600px,72svh);}
body.pg-learn .arc2__img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 50%;opacity:0;transition:opacity .6s ease;transform-origin:50% 58%;filter:drop-shadow(0 1.4rem 1.6rem rgb(0 0 0 / .45));}
body.pg-learn #arc[data-stage="1"] .arc2__img--1,body.pg-learn #arc[data-stage="2"] .arc2__img--2,body.pg-learn #arc[data-stage="3"] .arc2__img--3{opacity:1;}
body.pg-learn .arc2__credits{position:relative;min-height:2.8em;}
body.pg-learn .arc2__credit{position:absolute;inset:0 0 auto 0;margin:0;font-size:.8125rem;line-height:1.5;color:var(--on-dark-soft);text-align:center;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s;}
body.pg-learn #arc[data-stage="1"] .arc2__credit--1,body.pg-learn #arc[data-stage="2"] .arc2__credit--2,body.pg-learn #arc[data-stage="3"] .arc2__credit--3{opacity:1;visibility:visible;transition-delay:0s;}
/* the visible heart beats; stage 02 (continuous flow pump) stays still */
@keyframes arcBeat{0%,56%,100%{transform:scale(1);}14%{transform:scale(1.022);}28%{transform:scale(1);}42%{transform:scale(1.012);}}
@media(prefers-reduced-motion:no-preference){
  body.pg-learn .pgl-arc.is-live[data-stage="1"] .arc2__img--1,body.pg-learn .pgl-arc.is-live[data-stage="3"] .arc2__img--3{animation:arcBeat 1.3s ease-in-out infinite;}
}
@media(prefers-reduced-motion:reduce){body.pg-learn .arc2__img,body.pg-learn .arc2__credit{transition:none;}}
@media(max-width:900px){
  body.pg-learn .arc2{display:block;}
  body.pg-learn .arc2__right{display:none;}
  body.pg-learn .arc2__copy{gap:clamp(2.4rem,8vw,3.4rem);}
  body.pg-learn .stg-item{display:grid;gap:1rem;}
  body.pg-learn .stg__mini{display:block;}
  body.pg-learn .stg__mini img{display:block;width:100%;height:clamp(300px,78vw,380px);object-fit:contain;filter:drop-shadow(0 1.2rem 1.4rem rgb(0 0 0 / .45));}
  body.pg-learn .stg__credit{text-align:center;}
  body.pg-learn .stg{min-height:0;}
  .js body.pg-learn .stg:not(.is-on) :is(.stg__t,.stg__d,.stg__go){opacity:1;}
}
:is(body.pg-learn,body.pg-newsletter) .pgl-credit{margin:clamp(2rem,4vw,3rem) 0 0;max-width:90ch;font-size:.84rem;line-height:1.6;color:var(--on-dark-faint);}
:is(body.pg-learn,body.pg-newsletter) .pgl-credit a{color:inherit;text-decoration:underline;text-underline-offset:.18em;}
@media(hover:hover) and (pointer:fine){:is(body.pg-learn,body.pg-newsletter) .pgl-credit a:hover{color:#fff;}}
:is(body.pg-learn,body.pg-newsletter) .pgl-credit--light{color:var(--ink-soft);}
@media(hover:hover) and (pointer:fine){:is(body.pg-learn,body.pg-newsletter) .pgl-credit--light a:hover{color:var(--ink);}}

/* ---------------------------------------------------------------
   4. THE LESSON CARD (learn #issues and newsletter #issues share it):
   a flat navy card on the paper, the lesson's own plate flush to its
   edge (every plate edge is picture, nothing floats), a plain solid
   numeral. The card is a link and answers hover and focus with the
   shared ring only. The "writing next" card is not a link and has a
   real photo of him.
   --------------------------------------------------------------- */
:is(body.pg-learn,body.pg-newsletter) .pgl-issues .sec-inner{padding-block:clamp(3.5rem,7vw,6rem);}
:is(body.pg-learn,body.pg-newsletter) .pgl-issues__head{display:grid;grid-template-columns:1fr;gap:1.6rem clamp(2rem,6vw,5rem);align-items:end;margin-bottom:clamp(2.2rem,4vw,3.4rem);}
:is(body.pg-learn,body.pg-newsletter) .pgl-issues__head .lead-stmt{max-width:13ch;text-wrap:balance;}
:is(body.pg-learn,body.pg-newsletter) .pgl-issues__intro .prose{font-size:clamp(1.06rem,1.5vw,1.2rem);max-width:none;}
@media(min-width:1100px){
  :is(body.pg-learn,body.pg-newsletter) .pgl-issues__head{grid-template-columns:minmax(0,1fr) minmax(0,27rem);}
}
:is(body.pg-learn,body.pg-newsletter) .lgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(1rem,1.8vw,1.5rem);}
:is(body.pg-learn,body.pg-newsletter) .lcard{position:relative;grid-column:span 2;display:flex;flex-direction:column;overflow:hidden;min-width:0;border-radius:18px;color:var(--pl-ink);text-decoration:none;scroll-margin-top:110px;
  background:var(--pl-navy);border:1px solid var(--line-dark);}
:is(body.pg-learn,body.pg-newsletter) .lcard--wide{grid-column:span 4;}
:is(body.pg-learn,body.pg-newsletter) .lcard__art{position:relative;display:block;flex:none;aspect-ratio:4 / 3;background:var(--pl-navy);overflow:hidden;}
:is(body.pg-learn,body.pg-newsletter) .lcard--wide .lcard__art{aspect-ratio:2.2 / 1;}
:is(body.pg-learn,body.pg-newsletter) .lcard__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:none;}
:is(body.pg-learn,body.pg-newsletter) .lcard__body{position:relative;display:flex;flex-direction:column;flex:1 1 auto;padding:1.3rem 1.6rem 1.5rem;}
:is(body.pg-learn,body.pg-newsletter) .lcard__top{display:flex;align-items:baseline;justify-content:flex-start;gap:.8rem;}
:is(body.pg-learn,body.pg-newsletter) .lcard__n{font:800 1.4rem/1 var(--display);letter-spacing:-.02em;color:var(--pl-coral);}
:is(body.pg-learn,body.pg-newsletter) .lcard__stage{display:block;font:600 .88rem/1.2 var(--body);color:rgb(244 247 251 / .72);}
:is(body.pg-learn,body.pg-newsletter) .lcard__t{font-family:var(--display);font-weight:800;font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.1;letter-spacing:-.02em;color:#fff;margin:.7rem 0 .7rem;text-wrap:balance;}
:is(body.pg-learn,body.pg-newsletter) .lcard__d{display:block;font-size:.98rem;line-height:1.55;color:var(--pl-soft-ink);max-width:46ch;}
:is(body.pg-learn,body.pg-newsletter) .lcard__foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:auto;padding-top:1.3rem;}
:is(body.pg-learn,body.pg-newsletter) .lcard__meta{font:600 .88rem/1 var(--body);color:rgb(244 247 251 / .72);}
:is(body.pg-learn,body.pg-newsletter) .lcard__go{position:relative;display:inline-flex;align-items:center;gap:.45rem;padding-bottom:.3rem;font:700 .95rem/1 var(--body);color:var(--pl-coral);background:linear-gradient(currentColor,currentColor) no-repeat 0 100% / 0 1.5px;transition:background-size .35s var(--pl-ease);}
:is(body.pg-learn,body.pg-newsletter) a.lcard:hover .lcard__go,:is(body.pg-learn,body.pg-newsletter) a.lcard:focus-visible .lcard__go{background-size:100% 1.5px;}
:is(body.pg-learn,body.pg-newsletter) .lgrid__stage{grid-column:1 / -1;margin:clamp(.6rem,1.5vw,1.2rem) 0 -.2rem;font:800 1.15rem/1.2 var(--display);letter-spacing:-.01em;color:var(--pl-deep);}
/* the lead card: title and stage left, the description and the foot right */
@media(min-width:901px){
  :is(body.pg-learn,body.pg-newsletter) .lcard--wide .lcard__body{display:grid;grid-template-columns:1.1fr .9fr;column-gap:2rem;align-items:end;padding:1.6rem 1.8rem 1.7rem;}
  :is(body.pg-learn,body.pg-newsletter) .lcard--wide .lcard__top{grid-column:1;grid-row:1;}
  :is(body.pg-learn,body.pg-newsletter) .lcard--wide .lcard__t{grid-column:1;grid-row:2;margin:.6rem 0 0;font-size:clamp(1.9rem,3vw,2.6rem);max-width:16ch;}
  :is(body.pg-learn,body.pg-newsletter) .lcard--wide .lcard__d{grid-column:2;grid-row:1 / 3;align-self:start;}
  :is(body.pg-learn,body.pg-newsletter) .lcard--wide .lcard__foot{grid-column:2;grid-row:3;padding-top:1rem;}
}
/* the honest placeholder: a white card, a real photo of him, no number, no read time, not a link */
:is(body.pg-learn,body.pg-newsletter) .lcard--soon{background:#fff;color:var(--ink);border:1px solid var(--line-light);}
:is(body.pg-learn,body.pg-newsletter) .lcard--soon .lcard__art img{object-position:50% 38%;}
:is(body.pg-learn,body.pg-newsletter) .lcard--soon .lcard__top{justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.4rem 1rem;}
:is(body.pg-learn,body.pg-newsletter) .lcard--soon .lcard__stage{color:var(--ink-soft);}
:is(body.pg-learn,body.pg-newsletter) .lcard__chip{font:800 .95rem/1.2 var(--body);color:var(--pl-deep);}
:is(body.pg-learn,body.pg-newsletter) .lcard--soon .lcard__t{color:var(--ink);}
:is(body.pg-learn,body.pg-newsletter) .lcard--soon .lcard__d{color:var(--ink-soft);margin:0 0 1.2rem;font-size:1rem;}
:is(body.pg-learn,body.pg-newsletter) .lcard--soon .k4-btn{align-self:flex-start;}
@media(max-width:1000px){
  :is(body.pg-learn,body.pg-newsletter) .lgrid{grid-template-columns:repeat(2,minmax(0,1fr));}
  :is(body.pg-learn,body.pg-newsletter) .lcard,:is(body.pg-learn,body.pg-newsletter) .lcard--wide{grid-column:span 1;}
  :is(body.pg-learn,body.pg-newsletter) .lcard--wide,:is(body.pg-learn,body.pg-newsletter) .lcard--soon{grid-column:1 / -1;}
  body.pg-learn .lcard--soon{flex-direction:row;}
  body.pg-learn .lcard--soon .lcard__art{width:45%;aspect-ratio:auto;}
}
@media(max-width:640px){
  :is(body.pg-learn,body.pg-newsletter) .lgrid{grid-template-columns:1fr;}
  :is(body.pg-learn,body.pg-newsletter) .lcard__art,:is(body.pg-learn,body.pg-newsletter) .lcard--wide .lcard__art{aspect-ratio:16 / 10;}
  body.pg-learn .lcard--soon{flex-direction:column;}
  body.pg-learn .lcard--soon .lcard__art{width:auto;aspect-ratio:16 / 10;}
}
/* the lesson on breathing breathes at its own rhythm: four in, two hold, six out */
@keyframes pglBreathe{0%{transform:scale(1);}33.3%{transform:scale(1.04);}50%{transform:scale(1.04);}100%{transform:scale(1);}}
@media(prefers-reduced-motion:no-preference){
  body.pg-learn .lgrid.is-live #stage-3 .lcard__art img{animation:pglBreathe 12s ease-in-out infinite;}
}

/* ---------------------------------------------------------------
   5. LEARN #method: a lesson page rendered as a real article card,
   one cited sentence, a highlighter sweep, and the real reference
   sliding in as a footnote card. The word sweep is built from
   per-word transform layers (pg-learn.js splits the sentence), so it
   runs on the compositor; without JS the sentence simply reads
   highlighted and the footnote simply shows. Straight, flat, nothing
   tilted; the sequence plays once and holds.
   --------------------------------------------------------------- */
body.pg-learn .pgl-method{overflow:hidden;background:var(--pl-navy);}
body.pg-learn .pgl-method .sec-inner{padding-block:clamp(3rem,6vw,5rem);}
body.pg-learn .pgl-method__grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(2.4rem,5vw,5.4rem);align-items:center;}
body.pg-learn .pgl-method__copy{min-width:0;}
body.pg-learn .pgl-method__copy .lead-stmt{max-width:12ch;margin-bottom:1.6rem;}
body.pg-learn .pgl-method__copy .prose{max-width:44ch;font-size:clamp(1.15rem,1.5vw,1.4rem);color:var(--pl-ink);}
body.pg-learn .pgl-method__copy .prose + .prose{font-size:1rem;color:var(--pl-soft-ink);}
body.pg-learn .pgl-method__copy .ulink{display:inline;padding:0;}
body.pg-learn .pgl-method__cta{margin:2rem 0 0;}
body.pg-learn .pgl-article{position:relative;min-width:0;padding:0 0 clamp(7.75rem,10.5vw,8.5rem);}
body.pg-learn .pgl-page{position:relative;isolation:isolate;max-width:37rem;margin-left:auto;padding:clamp(1.5rem,2.6vw,2.3rem) clamp(1.5rem,2.8vw,2.6rem) clamp(4rem,5vw,4.6rem);border-radius:18px;background:#fff;color:var(--ink);
  box-shadow:0 30px 60px -34px rgb(0 0 0 / .6);}
@media(min-width:1600px){body.pg-learn .pgl-page{max-width:clamp(34rem,40vw,44rem);}body.pg-learn .pgl-page__p{font-size:1.2rem;}}
/* the whole page is a link to the lesson; it answers with a border only */
body.pg-learn .pgl-page__go{position:absolute;inset:0;z-index:3;border-radius:inherit;border:2px solid transparent;transition:border-color .2s ease;}
@media(hover:hover) and (pointer:fine){body.pg-learn .pgl-page__go:hover{border-color:#E23A46;}}
body.pg-learn .pgl-page__top{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;font:600 .86rem/1.2 var(--body);color:var(--ink-faint);margin-bottom:1.3rem;}
body.pg-learn .pgl-page__top span:first-child{color:var(--pl-deep);}
body.pg-learn .pgl-page__t{font-family:var(--display);font-weight:800;font-size:clamp(1.55rem,2.5vw,2.1rem);line-height:1.04;letter-spacing:-.025em;color:var(--ink);margin:0 0 .6rem;max-width:16ch;}
body.pg-learn .pgl-page__by{font:600 .8rem/1 var(--body);color:var(--ink-faint);margin:0 0 1.4rem;}
body.pg-learn .pgl-page__p{font:400 clamp(.95rem,1.15vw,1.06rem)/1.68 var(--body);color:#26334d;margin:0;}
body.pg-learn .pgl-page__gap{margin:.35rem 0;font:700 1.2rem/1 var(--body);letter-spacing:.3em;color:var(--ink-faint);}
/* the highlighter: opaque, so overlapping word layers leave no seam and each line reads as one stroke */
body.pg-learn .pgl-hl{color:inherit;background:#FFC9CE;border-radius:.2em;}
body.pg-learn .pgl-hl.is-split{background:none;}
body.pg-learn .pgl-hl .w{position:relative;display:inline;}
body.pg-learn .pgl-hl .w::before{content:"";position:absolute;z-index:-1;left:-.14em;right:-.34em;top:.08em;bottom:-.08em;border-radius:.14em;background:#FFC9CE;transform:scaleX(0);transform-origin:0 50%;transition:transform .18s linear;}
body.pg-learn .pgl-article.is-hl .pgl-hl .w::before{transform:scaleX(1);transition-duration:.3s;transition-delay:calc(var(--i,0) * 34ms);}
body.pg-learn .pgl-sup{position:relative;z-index:4;display:inline-block;margin-left:.14em;font-size:.8em;font-weight:800;line-height:1;vertical-align:super;color:#C0343C;transform-origin:50% 100%;cursor:default;}
body.pg-learn .pgl-sup:focus-visible{outline:2px solid #E23A46;outline-offset:3px;border-radius:2px;}
body.pg-learn .pgl-article.is-cite .pgl-sup{animation:pglSup .8s var(--pl-ease) 1;}
@keyframes pglSup{0%{transform:scale(1);}35%{transform:scale(2.1);}100%{transform:scale(1);}}
body.pg-learn .pgl-foot{position:absolute;right:0;bottom:0;width:min(29rem,94%);display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:1rem;padding:1.2rem 1.4rem 1.3rem;border-radius:18px;z-index:4;
  background:#13244A;border:1px solid rgb(244 247 251 / .2);color:var(--pl-ink);
  box-shadow:0 30px 50px -30px rgb(0 0 0 / .7);transition:opacity .5s ease,transform .6s var(--pl-ease),border-color .22s ease,visibility 0s;}
body.pg-learn .pgl-foot__n{font:800 2.6rem/.9 var(--display);color:var(--pl-coral);}
body.pg-learn .pgl-foot__b{min-width:0;}
body.pg-learn .pgl-foot__k{display:block;font:800 1.05rem/1.2 var(--display);color:#fff;margin-bottom:.55rem;}
body.pg-learn .pgl-foot p{margin:0;font-size:.92rem;line-height:1.5;color:var(--on-dark);}
body.pg-learn .pgl-foot__a{position:relative;display:inline-flex;align-items:center;gap:.4rem;margin-top:.8rem;padding-bottom:.28rem;font:700 .9rem/1 var(--body);color:var(--pl-coral);text-decoration:none;background:linear-gradient(currentColor,currentColor) no-repeat 0 100% / 0 1.5px;transition:background-size .35s var(--pl-ease);}
body.pg-learn .pgl-foot__a .arr{transition:transform .3s var(--pl-ease);}
@media(hover:hover) and (pointer:fine){
  body.pg-learn .pgl-foot__a:hover{background-size:100% 1.5px;}
  body.pg-learn .pgl-foot__a:hover .arr{transform:translateX(4px);}
  body.pg-learn .pgl-article:has(.pgl-sup:hover) .pgl-foot{border-color:var(--pl-coral);}
  body.pg-learn .pgl-article:has(.pgl-foot:hover) .pgl-sup{color:#FFB3BA;}
}
body.pg-learn .pgl-foot__a:focus-visible{outline:2px solid var(--pl-coral);outline-offset:3px;background-size:100% 1.5px;}
body.pg-learn .pgl-article:has(.pgl-sup:focus-visible) .pgl-foot{border-color:var(--pl-coral);}
/* the footnote slides in only when JS is driving the sequence, and is never an invisible focus stop */
.js body.pg-learn .pgl-article:not(.is-foot) .pgl-foot{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(24px);transition:opacity .5s ease,transform .6s var(--pl-ease),visibility 0s linear .5s;}
.js body.pg-learn .pgl-article.is-foot .pgl-foot{opacity:1;visibility:visible;transform:none;}
@media(prefers-reduced-motion:reduce){
  .js body.pg-learn .pgl-article:not(.is-foot) .pgl-foot{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:none;}
  body.pg-learn .pgl-hl .w::before{transform:scaleX(1);transition:none;}
  body.pg-learn .pgl-article.is-cite .pgl-sup{animation:none;}
}
@media(max-width:900px){
  body.pg-learn .pgl-method__grid{grid-template-columns:1fr;}
  body.pg-learn .pgl-page{margin-inline:auto;padding-bottom:clamp(3rem,6vw,4rem);}
  body.pg-learn .pgl-article{padding-bottom:0;}
  body.pg-learn .pgl-foot{position:relative;right:auto;bottom:auto;width:auto;margin:-2.5rem .75rem 0 2rem;}
}

/* ---------------------------------------------------------------
   6. LEARN #close: his own photograph, full viewport. The left half is a
   calm cream wall: the copy sits on it directly, navy ink chosen by the
   runtime from the pixels (static navy ink as the no-JS fallback). On
   portrait screens (has-stack) the whole photo shows first and the copy
   follows on navy in white.
   --------------------------------------------------------------- */
@media(min-width:901px) and (min-aspect-ratio:101/100){
  body.pg-learn .pgl-close{display:flex;align-items:flex-start;min-height:100vh;min-height:100svh;overflow:hidden;}
  body.pg-learn .pgl-close__in{width:100%;max-width:none;padding-top:clamp(6rem,14svh,9rem);padding-bottom:clamp(3rem,6vw,5rem);}
  body.pg-learn .pgl-close__copy{margin:0 auto 0 0;width:min(36rem,46%);}
  html:not(.photo-ink) body.pg-learn .pgl-close__copy :is(h2,p,.k4-btn--text){color:#0C1833;}
  html:not(.photo-ink) body.pg-learn .pgl-close__copy .k4-grad{background-image:var(--pi-grad-dark);}
}
body.pg-learn .pgl-close__copy .lead-stmt{font-size:clamp(2.4rem,4.6vw,4.4rem);line-height:1.02;max-width:none;margin-bottom:0;}
/* the headline is pre split into its three lines (data-split in the markup): the title splitter in fable.js wraps greedily and would orphan 'people.' */
body.pg-learn .pgl-close__copy .row-cta{margin-top:2rem;gap:.9rem 1.6rem;}
@media(prefers-reduced-motion:no-preference){body.pg-learn .pgl-close .bgphoto.is-live img{transform-origin:var(--drift-origin,100% 50%);}}

/* ---------------------------------------------------------------
   7. NEWSLETTER #top: his own photograph at the laptop, the full 3:2
   frame at every width, nothing on top of it. The copy sits in the wall
   pocket between the monitor and his head (data-photo-region) and the
   deck and buttons continue over the silver laptop lid. Portrait
   screens get a portrait crop of the same frame and the copy rests low.
   --------------------------------------------------------------- */
body.pg-newsletter .pgn-hero{align-items:center;}
body.pg-newsletter .pgn-hero .sec-inner{display:block;max-width:none;padding:0 var(--gutter);}
body.pg-newsletter .pgn-hero .phero__copy{width:var(--pr-w,31vw);max-width:none;margin:0;padding:0;}
/* ultrawide screens crop the frame hard top and bottom, so the block is lifted a little to keep its last lines off the laptop rim */
@media(min-width:901px) and (min-aspect-ratio:21/10){body.pg-newsletter .pgn-hero .phero__copy{margin-top:-4vh;}}
/* no JS: the copy starts where the wall pocket starts (the runtime does this by region) */
html:not(.photo-ink) body.pg-newsletter .pgn-hero .phero__copy{margin-left:calc(10.5vw - var(--gutter));position:relative;top:7vh;}
body.pg-newsletter .pgn-hero .phero__title{font-size:clamp(2.3rem,3.9vw,4.4rem);line-height:1;letter-spacing:-.028em;max-width:none;margin:0;}
body.pg-newsletter .pgn-hero .phero__title em.k4-grad{background-image:var(--k4-grad-text-photo);background-size:230% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
body.pg-newsletter .pgn-hero .phero__deck{max-width:36ch;margin:1rem 0 0;font-size:clamp(1rem,1.5vw,1.3rem);font-weight:500;line-height:1.45;}
body.pg-newsletter .pgn-hero .row-cta{margin-top:1.3rem;gap:.8rem 1.5rem;flex-wrap:nowrap;width:max-content;}
/* crop by aspect: wide screens keep the whole head, squarer ones let the cabinet leave first */
body.pg-newsletter .pgn-hero{--photo-pos:50% 38%;--photo-pos-m:50% 38%;}
@media(max-aspect-ratio:3/2){body.pg-newsletter .pgn-hero{--photo-pos:25% 40%;--photo-pos-m:25% 40%;}}
@media(min-width:901px) and (min-aspect-ratio:101/100){
  /* no JS: the copy is on the pale wall, so navy ink is the static fallback (the runtime then decides per block) */
  html:not(.photo-ink) body.pg-newsletter .pgn-hero .phero__copy :is(h1,p,.k4-btn--text){color:#0C1833;}
}
/* portrait screens: his portrait crop shows whole at the top (a hard edge, nothing over it, has-stack), the copy follows on navy in white.
   The frame has no calm area for words below his face, only hands, laptop and coat. */
@media(max-width:900px),(max-aspect-ratio:1/1){
  body.pg-newsletter .pgn-hero{--stack-ar:4/5;--photo-pos:50% 50%;--photo-pos-m:50% 50%;padding-top:0;background:var(--pl-navy);}
  body.pg-newsletter .pgn-hero .sec-inner{padding:2rem 20px 3rem;}
  html:not(.photo-ink) body.pg-newsletter .pgn-hero .phero__copy,body.pg-newsletter .pgn-hero .phero__copy{margin-left:0;top:0;}
  body.pg-newsletter .pgn-hero .phero__copy{position:static!important;width:auto!important;height:auto!important;max-width:30rem;}
  body.pg-newsletter .pgn-hero .phero__title{font-size:clamp(2.3rem,8.4vw,3.2rem);}
  body.pg-newsletter .pgn-hero .phero__deck{font-size:1rem;}
  body.pg-newsletter .pgn-hero .row-cta{display:grid;grid-template-columns:1fr;gap:.8rem;width:auto;}
  body.pg-newsletter .pgn-hero .row-cta .k4-btn--primary{width:100%;}
  body.pg-newsletter .pgn-hero .row-cta .pgn-herolink{justify-self:start;}
}
/* narrow landscape (a phone turned sideways): the 3:2 frame in the stacked block, the head kept in view */
@media(max-width:900px) and (min-aspect-ratio:101/100){
  body.pg-newsletter .pgn-hero{--stack-ar:3/2;--photo-pos:50% 38%;--photo-pos-m:50% 38%;}
}
body.pg-newsletter .pgn-herolink::after{background:var(--pl-coral);}
body.pg-newsletter .pgn-herolink:focus-visible,body.pg-newsletter .pgn-hero .k4-btn--primary:focus-visible{outline:2px solid #fff;outline-offset:4px;}

/* ---------------------------------------------------------------
   8. NEWSLETTER #issues (Dev 2026-10-06: "attach that specific image to that newsletter on the left hand side
   as a thumbnail ... clean and distinct"). No shared stage any more: every issue is its own white box with its
   own plate as a thumbnail on the left and the words beside it. The box answers with the shared ring only; the
   thumbnail pushes in slowly inside its frame and the "Read the issue" arrow slides (motion-kit inner answers).
   Phones: a square thumbnail beside the kicker and title, the summary and the link under them.
   --------------------------------------------------------------- */
body.pg-newsletter .pgn-issues .sec-inner{padding-block:clamp(3.5rem,7vw,6rem);}
body.pg-newsletter .pgn-issues .pgl-issues__head .lead-stmt{max-width:none;font-size:clamp(2.4rem,4.4vw,3.5rem);}
@media(min-width:1100px){body.pg-newsletter .pgn-issues .pgl-issues__head{grid-template-columns:minmax(0,1.35fr) minmax(0,26rem);}}
body.pg-newsletter .iwrap{display:flex;flex-direction:column;gap:clamp(1.2rem,2.4vw,1.8rem);}
body.pg-newsletter .ilist{display:grid;gap:clamp(.9rem,1.5vw,1.2rem);}
body.pg-newsletter .ilist .lcard{
  grid-column:auto;display:grid;grid-template-columns:clamp(190px,25%,300px) minmax(0,1fr);align-items:center;
  column-gap:clamp(1.4rem,2.8vw,2.6rem);padding:clamp(.85rem,1.3vw,1.1rem) clamp(1.4rem,2.6vw,2.4rem) clamp(.85rem,1.3vw,1.1rem) clamp(.85rem,1.3vw,1.1rem);
  background:#fff;color:var(--ink);border:1px solid var(--line-light);border-radius:var(--box-r);
}
body.pg-newsletter .ilist .lcard__art{display:block;width:100%;aspect-ratio:4 / 3;border-radius:10px;background:var(--pl-navy);}
body.pg-newsletter .ilist .lcard__art img{object-position:var(--thumb-pos,50% 50%);transform-origin:var(--thumb-pos,50% 50%);transition:scale .9s var(--pl-ease);}
body.pg-newsletter .ilist .lcard__body{padding:0;gap:.55rem;justify-content:center;}
body.pg-newsletter .ilist .lcard__line{display:block;font:500 .9rem/1.3 var(--body);color:var(--ink-faint);}
body.pg-newsletter .ilist .lcard__t{font-size:clamp(1.3rem,1.9vw,1.6rem);color:var(--pl-navy);margin:0;}
body.pg-newsletter .ilist .lcard__d{font-size:1rem;line-height:1.55;color:var(--ink-soft);max-width:62ch;}
body.pg-newsletter .ilist .lcard__foot{justify-content:flex-start;padding-top:.35rem;margin-top:0;}
body.pg-newsletter .ilist .lcard__go{color:var(--pl-deep);font-size:.95rem;}
@media(hover:hover) and (pointer:fine){
  body.pg-newsletter .ilist a.lcard:hover .lcard__art img{scale:1.06;}
}
body.pg-newsletter .ilist a.lcard:focus-visible .lcard__art img{scale:1.06;}
body.pg-newsletter .pgn-issues .pgl-credit{max-width:56ch;margin-top:.2rem;}
@media(max-width:700px){
  body.pg-newsletter .ilist .lcard{
    grid-template-columns:clamp(84px,25vw,104px) minmax(0,1fr);grid-template-rows:min-content 1fr auto auto;
    align-items:start;column-gap:1rem;row-gap:.35rem;padding:.9rem;
  }
  body.pg-newsletter .ilist .lcard__art{grid-column:1;grid-row:1 / span 2;aspect-ratio:1 / 1;border-radius:9px;}
  body.pg-newsletter .ilist .lcard__body{display:contents;}
  body.pg-newsletter .ilist .lcard__line{grid-column:2;grid-row:1;font-size:.82rem;}
  body.pg-newsletter .ilist .lcard__t{grid-column:2;grid-row:2;align-self:start;font-size:1.18rem;line-height:1.15;}
  body.pg-newsletter .ilist .lcard__d{grid-column:1 / -1;grid-row:3;margin-top:.55rem;font-size:.97rem;}
  body.pg-newsletter .ilist .lcard__foot{grid-column:1 / -1;grid-row:4;padding-top:.3rem;}
}
@media(prefers-reduced-motion:reduce){body.pg-newsletter .ilist .lcard__art img{transition:none;scale:1 !important;}}

/* ---------------------------------------------------------------
   9. NEWSLETTER #close: a navy statement, no photograph. The headline
   left, the two paragraphs right (they light word by word as they cross
   the screen), then the two buttons under them.
   --------------------------------------------------------------- */
body.pg-newsletter .pgn-close{background:var(--pl-navy);}
body.pg-newsletter .pgn-close__in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1.5rem,3vw,3rem);row-gap:2rem;align-items:center;padding-block:var(--sec-pad,clamp(4.5rem,8vw,7.5rem));}
body.pg-newsletter .pgn-close__h{grid-column:1 / 7;max-width:none;font-size:clamp(2.6rem,5vw,4.6rem);line-height:1.02;text-wrap:balance;}
body.pg-newsletter .pgn-close__r{grid-column:7 / 13;min-width:0;}
body.pg-newsletter .pgn-close__r .prose{font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.6;font-weight:400;max-width:34rem;color:var(--pl-ink);text-wrap:pretty;}
body.pg-newsletter .pgn-close__r .prose + .prose{margin-top:1.1rem;}
body.pg-newsletter .pgn-close__r .row-cta{margin-top:2rem;gap:.9rem 1.6rem;}
@media(max-width:900px){
  body.pg-newsletter .pgn-close__h,body.pg-newsletter .pgn-close__r{grid-column:1 / -1;}
}

/* ====================================================================
   R10-RESTORE (round 10, REQUIREMENTS Q8, 2026-10-06 night): the hover answers,
   the living illustrations and the arrival motion of round 8 come back
   inside the round 9 layout. A box still answers with its ring only
   (motion-kit.css); what is INSIDE a box may move; nothing below lifts,
   tilts, washes, glows or shines a box, and no photo gets a scrim or gloss.
   ==================================================================== */

/* R10-1. #turning: the handset has depth again. At rest it stands straight
   and sharp (identity transform, no re-rasterising of the posts); pointing
   at it, or tabbing into it, leans it into 3D so its thickness and its
   side keys show. The arrows live outside .phn, so they never trigger it. */
body.pg-learn .phn{perspective:1600px;perspective-origin:50% 38%;}
body.pg-learn .phn__tilt{transform-style:preserve-3d;transition:transform .9s var(--pl-ease);}
body.pg-learn .phn__body{transform-style:preserve-3d;}
body.pg-learn .phn__slab{position:absolute;inset:0;border-radius:inherit;pointer-events:none;}
body.pg-learn .phn__slab--a{transform:translateZ(-.4em);background:#323c5c;}
body.pg-learn .phn__slab--b{transform:translateZ(-.85em);background:#141b30;box-shadow:0 0 0 .05em rgb(255 255 255 / .06);}
body.pg-learn .phn__key{position:absolute;width:.3em;border-radius:.14em;pointer-events:none;transform:translateZ(-.42em);background:linear-gradient(90deg,#8a95b0,#323c5c);}
body.pg-learn .phn__key--mute{left:-.22em;top:15%;height:3%;}
body.pg-learn .phn__key--up{left:-.22em;top:21.5%;height:6.2%;}
body.pg-learn .phn__key--dn{left:-.22em;top:29.6%;height:6.2%;}
body.pg-learn .phn__key--pw{right:-.22em;top:25%;height:10.4%;background:linear-gradient(270deg,#8a95b0,#323c5c);}
@media(hover:hover) and (pointer:fine){
  body.pg-learn .phn:hover .phn__tilt{transform:rotateY(-16deg) rotateX(4deg) rotateZ(1.4deg) translateY(-.4em);}
}
body.pg-learn .phn:has(:focus-visible) .phn__tilt{transform:rotateY(-16deg) rotateX(4deg) rotateZ(1.4deg) translateY(-.4em);}
@media(prefers-reduced-motion:reduce){
  body.pg-learn .phn__tilt{transition:none;}
  body.pg-learn .phn:hover .phn__tilt,body.pg-learn .phn:has(:focus-visible) .phn__tilt{transform:none;}
}

/* R10-2. #arc: the hearts float (round 8 stgFloat) on their own wrapper, the
   beat stays on the images; pointing at a row lifts the visible heart 8px and
   zooms it 6 percent, as round 8 did (the individual scale and translate
   properties, so they compose with the beat and the float). */
@keyframes arcFloat{0%,100%{transform:translate3d(0,0,0);}50%{transform:translate3d(0,-.55rem,0);}}
@media(prefers-reduced-motion:no-preference){
  body.pg-learn .arc2__art{animation:arcFloat 8s ease-in-out infinite;animation-play-state:paused;}
  body.pg-learn .pgl-arc.is-live .arc2__art{animation-play-state:running;}
}
body.pg-learn .arc2__img{transition:opacity .6s ease,scale .8s var(--pl-ease),translate .8s var(--pl-ease);}
@media(hover:hover) and (pointer:fine){
  body.pg-learn #arc:has(a.stg:not([data-box="off"]):hover) .arc2__img{scale:1.06;translate:0 -.5rem;}
}
body.pg-learn #arc:has(a.stg:not([data-box="off"]):focus-visible) .arc2__img{scale:1.06;translate:0 -.5rem;}
@media(prefers-reduced-motion:reduce){
  body.pg-learn .arc2__img{transition:none;}
  body.pg-learn #arc .arc2__img{scale:1 !important;translate:none !important;}
}

/* R10-3. the "go" arrows: motion-kit.css (inner answers) already slides the whole __go span 5px on .stg and .lcard
   hover and focus and draws its underline, so nothing is added here (a second nudge on .arr would stack to 9px). */

/* R10-4. (retired 2026-10-06: the shared stage is gone; each issue now carries its own thumbnail, section 8) */

/* R10-5. newsletter #close: the sample email arrives in an inbox (round 8 nlmail), moved out of the photo hero so
   the picture stays clean. A solid card on the navy ground, no blur, straight. It slides in once (data-rise on
   .nlmail), the unread dot pops, then the card floats slowly and the dot rings; both loops pause off screen. */
@media(min-width:901px){
  body.pg-newsletter .pgn-close__h{grid-row:1;align-self:end;}
  body.pg-newsletter .nlmail{grid-column:1 / 7;grid-row:2;align-self:start;}
  body.pg-newsletter .pgn-close__r{grid-row:1 / 3;align-self:center;}
}
@media(max-width:900px){body.pg-newsletter .nlmail{grid-column:1 / -1;}}
body.pg-newsletter .nlmail{width:min(100%,22rem);}
body.pg-newsletter .nlmail__card{padding:1.15rem 1.15rem 1rem;border-radius:var(--box-r);color:#fff;background:#13244A;border:1px solid var(--line-dark);}
body.pg-newsletter .nlmail__bar{padding:.1rem .35rem .8rem;font:600 .9rem/1 var(--body);color:rgb(244 247 251 / .72);}
body.pg-newsletter .nlmail__row{display:flex;gap:.95rem;align-items:flex-start;padding:.2rem .35rem 0;}
body.pg-newsletter .nlmail__ava{flex:none;width:44px;height:44px;border-radius:50%;background:#0C1833;box-shadow:0 0 0 2px rgb(244 247 251 / .16);}
body.pg-newsletter .nlmail__main{min-width:0;flex:1 1 auto;}
body.pg-newsletter .nlmail__from{display:flex;align-items:center;justify-content:space-between;gap:.7rem;}
body.pg-newsletter .nlmail__name{font:700 .95rem/1.2 var(--body);color:#fff;}
body.pg-newsletter .nlmail__dot{position:relative;flex:none;width:11px;height:11px;border-radius:50%;background:var(--pl-coral);}
body.pg-newsletter .nlmail__dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid rgb(255 107 117 / .65);opacity:0;}
body.pg-newsletter .nlmail__subj{margin:.35rem 0 0;font-family:var(--display);font-weight:800;font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.12;letter-spacing:-.015em;color:#fff;}
body.pg-newsletter .nlmail__pre{margin:.5rem 0 0;font-size:.92rem;line-height:1.5;color:rgb(244 247 251 / .74);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
body.pg-newsletter .nlmail__art{position:relative;margin:1rem .35rem 0;aspect-ratio:1280 / 582;border-radius:10px;overflow:hidden;background:#0C1833;}
body.pg-newsletter .nlmail__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
body.pg-newsletter .nlmail__foot{display:flex;justify-content:space-between;gap:1rem;margin:.85rem .35rem 0;font:600 .88rem/1.2 var(--body);color:rgb(244 247 251 / .72);}
.js body.pg-newsletter .reveal-sec .nlmail__dot{transform:scale(0);}
.js body.pg-newsletter .reveal-sec.is-in .nlmail__dot{transform:scale(1);transition:transform .6s cubic-bezier(.3,1.8,.5,1) 1.45s;}
@keyframes nlDot{0%{transform:scale(.7);opacity:.9;}70%,100%{transform:scale(2.1);opacity:0;}}
@keyframes nlFloat{0%,100%{transform:translate3d(0,0,0);}50%{transform:translate3d(0,-.5rem,0);}}
@media(prefers-reduced-motion:no-preference){
  body.pg-newsletter .nlmail__card{animation:nlFloat 7s ease-in-out 1.6s infinite;animation-play-state:paused;}
  body.pg-newsletter .nlmail.is-live .nlmail__card{animation-play-state:running;}
  body.pg-newsletter .nlmail__dot::after{animation:nlDot 2.6s var(--pl-soft) 2.2s infinite;animation-play-state:paused;}
  body.pg-newsletter .nlmail.is-live .nlmail__dot::after{animation-play-state:running;}
}
@media(prefers-reduced-motion:reduce){
  .js body.pg-newsletter .reveal-sec .nlmail__dot{transform:none;transition:none;}
  body.pg-newsletter .nlmail__dot::after{display:none;}
}

/* ====================================================================
   THE FOUR LESSONS (sections 5 to 10, untouched by rounds 8 and 9)
   ==================================================================== */

/* ---------------------------------------------------------------
   5. THE FOUR LESSONS, hero flipped to navy (sec-dark on-dark on
   the existing .ihero banner). .ihero is only ever used on these
   four pages, so its full dark variant lives here. The section's
   own background already resolves to navy for free (fable.css's
   later, unconditional .sec-dark{background:...} redeclaration
   wins the cascade over .ihero's own paper background by source
   order); only the child text colors need a fix here.
   --------------------------------------------------------------- */
.sec-dark.ihero,.on-dark.ihero{border-bottom-color:rgb(var(--paper-rgb) / .18);}
.sec-dark.ihero .ihero__k,.on-dark.ihero .ihero__k{color:var(--gold-soft);}
.sec-dark.ihero .ihero__t,.on-dark.ihero .ihero__t{color:var(--paper);}
.sec-dark.ihero .ihero__t em,.on-dark.ihero .ihero__t em{color:var(--crimson-bright);}
.sec-dark.ihero .ihero__d,.on-dark.ihero .ihero__d{color:var(--on-dark);}
.sec-dark.ihero .ihero__meta,.on-dark.ihero .ihero__meta{color:var(--on-dark-faint);}
.sec-dark.ihero .iback,.on-dark.ihero .iback{color:var(--on-dark-soft);}
@media(pointer:fine){
  .sec-dark.ihero .iback:hover,.on-dark.ihero .iback:hover{color:var(--crimson-bright);}
}

/* ---------------------------------------------------------------
   6. THE FOUR LESSONS, drop cap on the opening paragraph only.
   --------------------------------------------------------------- */
.ibody>p:first-of-type::first-letter{
  initial-letter:3;
  font-family:var(--display);
  font-weight:800;
  color:var(--crimson);
}
@supports not (initial-letter:3){
  .ibody>p:first-of-type::first-letter{
    float:left;
    font-family:var(--display);
    font-weight:800;
    color:var(--crimson);
    font-size:3.3em;
    line-height:.86;
    padding-right:.1em;
    margin-top:.03em;
  }
}

/* ---------------------------------------------------------------
   7. THE FOUR LESSONS, ghost numeral at the second h3, desktop only.
   Every lesson body has exactly two h3 elements; the numeral sits
   just above the second one so it never collides with the reading
   column's own edges at in-between widths.
   --------------------------------------------------------------- */
@media(min-width:901px){
  .ibody h3:nth-of-type(2){position:relative;z-index:1;}
  .ibody h3:nth-of-type(2)::before{
    content:"02";
    position:absolute;
    left:-.04em;
    bottom:100%;
    transform:translateY(.24em);
    font-family:var(--display);
    font-weight:800;
    font-size:3.3rem;
    line-height:1;
    color:var(--ink);
    opacity:.08;
    pointer-events:none;
    white-space:nowrap;
    z-index:-1;
  }
}

/* ---------------------------------------------------------------
   8. THE FOUR LESSONS, inline citation numerals. .irefs stays the
   accessible, printable source of truth; pg-learn.js reads its li
   text at runtime to build each popover, so the two can never drift
   out of sync. The popover reveals on (pointer:fine) hover or on
   keyboard focus; on touch, pg-learn.js scrolls to and briefly lights
   the matching reference instead. Timing matches .qa__a's existing
   max-height disclosure.
   --------------------------------------------------------------- */
.cite{position:relative;color:var(--crimson);font-weight:700;cursor:pointer;
  padding:0 .05em;border-radius:2px;}
.cite:focus-visible{outline:2px solid var(--crimson-bright);outline-offset:2px;}
.cite__pop{position:absolute;left:50%;bottom:100%;transform:translate(-50%,-8px);
  width:max(220px,min(300px,68vw));max-height:0;opacity:0;overflow:hidden;pointer-events:none;
  background:var(--paper-2);color:var(--ink-soft);border:1px solid var(--hair-strong);
  border-radius:var(--r-sm);padding:0 .9rem;margin:0;
  font-family:var(--body);font-weight:400;font-style:normal;font-size:.8rem;line-height:1.55;
  text-align:left;box-shadow:0 20px 48px -24px rgb(var(--ink-rgb) / .4);
  transition:max-height var(--t-slow) var(--ease-snap),opacity var(--t-slow),padding var(--t-slow);
  z-index:30;}
.cite:focus-visible .cite__pop{max-height:14em;opacity:1;padding:.75rem .9rem;pointer-events:auto;}
@media(pointer:fine){
  .cite:hover .cite__pop{max-height:14em;opacity:1;padding:.75rem .9rem;pointer-events:auto;}
}
@media(max-width:860px){
  /* Below this width a citation can sit anywhere along a line, including
     near the right edge, so a popover anchored to the citation's own x
     position can push the page wider than the viewport. Anchoring to the
     viewport instead (a small fixed bar near the bottom) keeps the same
     disclosure mechanism (max-height from 0) without ever overflowing. */
  .cite__pop{position:fixed;left:1rem;right:1rem;top:auto;bottom:1rem;
    transform:none;width:auto;max-width:none;}
}
.irefs li{transition:background-color .6s var(--ease-soft),border-radius .6s var(--ease-soft);
  border-radius:4px;}
.irefs li.is-lit{background-color:rgb(var(--crimson-rgb) / .12);}

/* ---------------------------------------------------------------
   9. THE FOUR LESSONS, lede-gauge label. fable.css ships the track,
   fill and numeral; the small unit label is this page's own addition
   to the same shared component, additive only.
   --------------------------------------------------------------- */
.lede-gauge__lbl{font-family:var(--label);font-size:var(--t-nano);font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);}

/* ---------------------------------------------------------------
   10. THE FOUR LESSONS, one small inline data diagram per lesson.
   Shared frame, shared draw-on mechanism, four path variants written
   directly into each lesson's own markup. Hidden-until-drawn state is
   scoped under .js so a no-js load renders every line fully drawn;
   reduced motion forces the same fully drawn state with no transition.
   --------------------------------------------------------------- */
.ldiagram{margin:2.2rem 0 2.4rem;padding:1.2rem 1.3rem 1rem;
  border:1px solid var(--hair-strong);border-radius:var(--r-md);background:var(--paper-3);}
.ldiagram svg{width:100%;height:auto;max-width:420px;margin:0 auto;display:block;overflow:visible;}
.ldiagram figcaption{margin-top:.7rem;font-family:var(--label);font-size:var(--t-nano);
  font-weight:500;letter-spacing:.02em;color:var(--ink-faint);text-align:center;}

.ld-outline{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.ld-cuff,.ld-needle,.ld-exhale{fill:none;stroke:var(--crimson);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;}
/* the plaque itself is a thick stroked arc, not a line: at this radius a
   24 unit stroke reads as a deposit against part of the wall, medically
   closer to what a non-obstructive plaque actually looks like in cross
   section than a thin crimson outline would. */
.ld-plaque{fill:none;stroke:var(--crimson);stroke-width:24;stroke-linecap:butt;}
.ld-guide{fill:none;stroke:var(--ink-faint);stroke-width:1.3;stroke-dasharray:3 5;}
.ld-strap{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;}
.ld-flow{fill:var(--ink-faint);opacity:.55;}
.ld-cut{fill:none;stroke:var(--crimson);stroke-width:1.5;stroke-dasharray:3 4;}
.ld-cutlabel{font-family:var(--label);font-size:8.5px;font-weight:600;fill:var(--crimson);
  letter-spacing:.02em;}
.ld-dim{opacity:.4;}

.js .ld-draw{stroke-dasharray:100;stroke-dashoffset:100;}
.js .reveal-sec.is-in .ld-draw{transition:stroke-dashoffset 1.15s var(--ease-snap);stroke-dashoffset:0;}
.js .reveal-sec.is-in .ldiagram .ld-cuff.ld-draw,
.js .reveal-sec.is-in .ldiagram .ld-plaque.ld-draw{transition-delay:.35s;}
.js .reveal-sec.is-in .ldiagram .ld-tube.ld-draw{transition-delay:.6s;}
.js .reveal-sec.is-in .ldiagram .ld-gauge-face.ld-draw{transition-delay:.75s;}
.js .reveal-sec.is-in .ldiagram .ld-dim.ld-draw{transition-delay:.5s;}
.js .reveal-sec.is-in .ldiagram .ld-exhale.ld-draw{transition-delay:.5s;}
@media(prefers-reduced-motion:reduce){
  .js .ld-draw{stroke-dashoffset:0;transition:none!important;}
}

/* Lead fix 2026-10-06 (Dev: "only in this section, remove that faint white glow around the black text"):
   learn #close only. On the light wall the adaptive ink sets navy text with a soft white halo (stronger on busy
   ground); here the halo reads as a glow, so dark ink in this section has no shadow and no filter at all. */
body.pg-learn #close [data-ink="dark"],
body.pg-learn #close [data-ink="dark"] *{
  --ink-sh:none!important;
  --ink-fd:none!important;
  text-shadow:none!important;
}
body.pg-learn #close [data-ink="dark"] :is(em,.k4-grad,.grad-word),
body.pg-learn #close [data-ink="dark"]:is(em,.k4-grad,.grad-word){
  filter:none!important;
}

/* Dev 2026-10-06: "move the text a bit more up so it is sitting comfortably over his laptop": the heading starts
   just under the framed diploma and finishes above the laptop lid (the region is top aligned, not centred). */
html.photo-ink body.pg-newsletter .pgn-hero .phero__copy[data-photo-region]{justify-content:flex-start;}

/* Dev 2026-10-06 (second note): "move this a bit more up and make the heading text bigger". The hero now uses a closer
   crop of the same photograph (newsletter-top-c, from the original KGP26-30) so the clear wall between the framed
   diploma and the laptop is tall enough: the heading, 20 percent larger and sized to the photograph (it scales with the
   picture, so it keeps its place at every width), starts just under the diploma's frame and the buttons end on the
   line of the laptop lid. */
@media(min-width:901px) and (min-aspect-ratio:101/100){
  body.pg-newsletter .pgn-hero .phero__title{font-size:calc(max(100vw,150vh) * .047);line-height:1;}
  body.pg-newsletter .pgn-hero .row-cta{margin-top:1rem;}
  body.pg-newsletter .pgn-hero .row-cta .k4-btn{min-height:48px;padding-block:0;}
  html.photo-ink body.pg-newsletter .pgn-hero .phero__copy{margin-top:0;}
}

/* ====================================================================
   S3 HEADING SCALE (Dev 2026-10-06 night: "just increase the size of the headings everywhere to fit comfortably and so
   that its easily readible, not like we are rationing the space of the website"). Fluid, one rule per heading, scoped to
   this page's body class (the lesson pages also load this file). Section headings run about 72px at 1200, card titles
   about 30px, and every heading is given the column it needs so none breaks into one or two word lines. Paragraph
   sizes, fonts, weights, the gradient words and the line breaks are unchanged. The newsletter hero (#top) is not
   touched: it is sized to its photograph above.
   ==================================================================== */
:is(body.pg-learn,body.pg-newsletter){--s3-h2:clamp(2.4rem,6vw,5.25rem);}

/* learn #top. The copy block has to fit on the calm wall between the screen's lower edge and the lectern top, left of
   him, so the size follows the photograph's displayed width (the same unit the runtime uses to place the region). */
@media(min-width:901px) and (min-aspect-ratio:101/100){
  body.pg-learn #top .phero__title{font-size:clamp(2.75rem,calc(max(100vw,150vh) * .0625),7.25rem);}
  body.pg-learn #top .phero__deck{margin-top:1rem;}
  body.pg-learn #top .row-cta{margin-top:1.2rem;}
}
@media(max-width:900px) and (min-aspect-ratio:101/100) and (min-height:521px){
  body.pg-learn #top .phero__title{font-size:clamp(2.2rem,5.6vw,3.2rem);}
  body.pg-learn #top .phero__deck{margin-top:1rem;}
  body.pg-learn #top .row-cta{margin-top:1.2rem;}
  body.pg-learn #top .phero__copy{position:relative;left:0;top:-5vh;}
}
@media(max-aspect-ratio:1/1){
  body.pg-learn #top .phero__title{font-size:clamp(2.5rem,11.4vw,4.4rem);}
}
@media(max-height:520px) and (orientation:landscape){
  body.pg-learn #top .phero__title{font-size:min(7.8vw,10.8vh);}
}

/* learn #turning: the heading column is widened so the longer lines fit at the larger size; the handset keeps its room */
@media(min-width:901px){
  body.pg-learn .pgl-turn__grid{grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);gap:clamp(2rem,4vw,4.4rem);}
  body.pg-learn .pgl-turn__copy .lead-stmt{max-width:none;}
}
body.pg-learn .pgl-turn__copy .lead-stmt{font-size:clamp(2.4rem,5.8vw,5.05rem);}

/* learn #arc */
@media(min-width:901px){
  body.pg-learn .arc2{grid-template-columns:minmax(0,6fr) minmax(0,6fr);}
}
body.pg-learn .arc2__head .lead-stmt{font-size:var(--s3-h2);max-width:none;text-wrap:balance;}
body.pg-learn .stg__t{font-size:clamp(1.65rem,2.8vw,2.25rem);}
body.pg-learn .stg__d{text-wrap:pretty;}

/* lesson cards (learn #issues and newsletter #issues) */
:is(body.pg-learn,body.pg-newsletter) .pgl-issues__head .lead-stmt{font-size:var(--s3-h2);max-width:none;}
body.pg-newsletter .pgn-issues .pgl-issues__head .lead-stmt{font-size:clamp(2.4rem,5.7vw,5rem);max-width:none;}
@media(min-width:1100px){
  :is(body.pg-learn,body.pg-newsletter) .pgl-issues__head{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:1.6rem clamp(2rem,4vw,4rem);}
  body.pg-newsletter .pgn-issues .pgl-issues__head{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);}
}
:is(body.pg-learn,body.pg-newsletter) .pgl-issues__intro .prose{text-wrap:pretty;}
:is(body.pg-learn,body.pg-newsletter) .lcard__t{font-size:clamp(1.35rem,2.35vw,2rem);}
body.pg-newsletter .ilist .lcard__t{font-size:clamp(1.35rem,2.5vw,2.1rem);}
@media(max-width:640px){
  body.pg-newsletter .ilist .lcard__t{font-size:1.3rem;}
}

/* learn #method */
@media(min-width:901px){
  body.pg-learn .pgl-method__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);}
  body.pg-learn .pgl-method__copy .lead-stmt{max-width:none;}
}
body.pg-learn .pgl-method__copy .lead-stmt{font-size:clamp(2.4rem,5.7vw,5rem);}
body.pg-learn .pgl-page__t{font-size:clamp(1.6rem,2.7vw,2.25rem);max-width:21ch;text-wrap:balance;}

/* learn #close: the copy stays on the cream wall left of his face; the face moves right on squarer screens so the
   headline can grow there too */
@media(min-width:901px) and (min-aspect-ratio:101/100){
  body.pg-learn .pgl-close__copy{width:min(64rem,54%);}
  body.pg-learn .pgl-close__copy .lead-stmt{font-size:clamp(2.4rem,calc(max(100vw,150vh) * .0225 + 100vw * .03125),6.5rem);}
}
/* squarer screens (4:3 tablets) crop the picture left to right: show more of its left so his face sits further right, off the headline */
@media(min-width:901px) and (min-aspect-ratio:101/100) and (max-aspect-ratio:3/2){
  body.pg-learn #close{--photo-pos:30% 25%!important;}
}
@media(max-width:900px),(max-aspect-ratio:1/1){
  body.pg-learn .pgl-close__copy .lead-stmt{font-size:clamp(2rem,10.4vw,4.5rem);}
}

/* newsletter #close */
body.pg-newsletter .pgn-close__h{font-size:clamp(2.6rem,6.2vw,5.4rem);}

/* the dispatch band (both pages) */
:is(body.pg-learn,body.pg-newsletter) #signup .nl__title{font-size:clamp(3rem,7.15vw,6.1rem);}
@media(max-width:900px){
  /* 11.6vw keeps "The Heart / Success dispatch." on two lines at every phone width (12.6vw broke it to three), as on contact */
  :is(body.pg-learn,body.pg-newsletter) #signup .nl__title{font-size:clamp(2.6rem,11.6vw,4.6rem);}
}

/* tablets and phones: one column, so the section headings follow one shared fluid size */
@media(max-width:900px){
  :is(body.pg-learn,body.pg-newsletter){--s3-h2:clamp(2.4rem,6.6vw,4.2rem);}
  body.pg-learn .pgl-turn__copy .lead-stmt,body.pg-learn .pgl-method__copy .lead-stmt,body.pg-newsletter .pgn-issues .pgl-issues__head .lead-stmt{font-size:var(--s3-h2);}
  body.pg-newsletter .pgn-close__h{font-size:clamp(2.8rem,8.4vw,4.75rem);}
}
/* SOCIAL ROW:BEGIN (Dev 2026-10-07: "Give all three options here, tiktok, facebook and also instagram with their symbols") */
body.pg-learn .pgl-social{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;}
body.pg-learn .pgl-social__btn{gap:.55rem;}
body.pg-learn .pgl-social__ico{display:inline-flex;width:1.15em;height:1.15em;position:relative;z-index:1;}
body.pg-learn .pgl-social__ico svg{display:block;width:100%;height:100%;fill:currentColor;}
@media(max-width:520px){body.pg-learn .pgl-social{gap:.55rem;}body.pg-learn .pgl-social__btn{padding-inline:1rem;}}
/* SOCIAL ROW:END */

/* PASS1-LEARN:BEGIN (Dev 2026-10-07, the 100x skill on the papercut pages, pass 1). Every box is torn kit paper (the shared PAPERCUT
   engine in fable.js); these rules make the paper do the talking.
   1. learn #arc: the three stages are three torn slips of the same paper (stage 02, not written yet, is a slip too, just not a link),
      shorter so no slip is mostly empty paper, with navy between them. The stage the plate is showing has its border in coral, so
      the engine tears that slip with a coral rim: the picker and the plate read as one. */
body.pg-learn .stg[data-box="off"]{border-color:var(--line-dark);}
body.pg-learn .stg.is-on{border-color:var(--pl-coral);}
/* the border colour switches at once: the engine reads it the moment the class changes (mid transition it read the old colour) */
body.pg-learn .stg.stg{transition-property:opacity,transform,outline-color,outline-width;}
@media(min-width:901px){
  body.pg-learn .stg{min-height:clamp(200px,25svh,270px);padding:1.6rem 1.9rem;}
  body.pg-learn .arc2__copy{gap:clamp(2.6rem,8svh,5.2rem);}
}
/* 2. learn #issues: the plate inside a lesson card pushes in slowly while the card is pointed at or focused (the card itself only
      answers with its rim) */
body.pg-learn .lcard .lcard__art img{transition:scale .9s var(--pl-ease);}
@media(hover:hover) and (pointer:fine){body.pg-learn a.lcard:hover .lcard__art img{scale:1.05;}}
body.pg-learn a.lcard:focus-visible .lcard__art img{scale:1.05;}
@media(prefers-reduced-motion:reduce){body.pg-learn .lcard .lcard__art img{transition:none;scale:1 !important;}}
/* 3. learn #method: the lesson page is torn paper whose rim answers hover, so its link layer draws no crisp border of its own */
body.pg-learn .pgl-page__go,body.pg-learn .pgl-page__go:hover{border:0;}
/* the footnote card is visible to the paper engine's first pass (still transparent), so it slides in already torn (pg-learn.js) */
.js body.pg-learn .pgl-article.pgl-scan:not(.is-foot) .pgl-foot{visibility:visible;transition:none;}
/* 4. newsletter #close: the headline, the two paragraphs and the buttons read down the left; the inbox card is the picture on the
      right, larger, centred against them (it used to sit under the headline and leave the top right empty) */
@media(min-width:901px){
  body.pg-newsletter .pgn-close__in{align-items:center;}
  body.pg-newsletter .pgn-close__h{grid-column:1 / 8;grid-row:1;align-self:end;}
  body.pg-newsletter .pgn-close__r{grid-column:1 / 8;grid-row:2;align-self:start;}
  body.pg-newsletter .nlmail{grid-column:8 / 13;grid-row:1 / 3;align-self:center;justify-self:end;width:min(100%,27rem);}
  body.pg-newsletter .nlmail__subj{font-size:clamp(1.15rem,1.6vw,1.45rem);}
}
/* PASS1-LEARN:END */

/* PASS2-LEARN:BEGIN (Dev 2026-10-07, the 100x skill, pass 2)
   newsletter #issues: the thumbnail is its own torn paper sheet and its picture is masked to that tear, so scaling the picture took
   the torn edge out of the frame and left a crisp rectangle on hover. The picture now pushes in by cropping inside its own box
   (object-view-box), so the tear stays put; browsers without it simply keep the still picture. */
body.pg-newsletter .ilist .lcard__art img{scale:1 !important;object-view-box:inset(0%);transition:object-view-box .9s var(--pl-ease);}
@media(hover:hover) and (pointer:fine){body.pg-newsletter .ilist a.lcard:hover .lcard__art img{object-view-box:inset(3.5%);}}
body.pg-newsletter .ilist a.lcard:focus-visible .lcard__art img{object-view-box:inset(3.5%);}
@media(prefers-reduced-motion:reduce){body.pg-newsletter .ilist .lcard__art img{transition:none;object-view-box:none !important;}}
/* PASS2-LEARN:END */