/* ============================================================
   pg-index.css - index.html only (the round 9 home).
   Loaded last. Builds on fable.css tokens and the R9 foundation
   (.hsplit, data-settle, data-fade, data-readlight), kit4.css
   (M1 gradient text, M2 buttons), usmap.css (the real US map) and
   medart.css (the six real medical illustrations).

   Rules this file keeps (REQUIREMENTS P1 to P7):
   - photos run edge to edge and are never cut; text sits directly
     on a photo or beside it, never under a scrim, fade or tint
   - no line-drawing art, no icons in circles or tiles, no ghost
     numerals, no hairlines, no accent bars
   - a box answers hover and focus with the shared ring only

   Zero em or en dashes in this file, comments included.
   ============================================================ */

body.pg-home{
  --hx-navy:var(--navy-ground,#0C1833);
  --hx-ink:#F4F7FB;
  --hx-soft:#B7C2D6;
  --hx-crimson:#E23A46;
  --hx-coral:#FF6B75;
  --hx-deep:#9C1B27;
  --hx-ease:var(--ease-snap,cubic-bezier(.16,1,.3,1));
  --hx-side:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)));
  /* the heading scale (REQUIREMENTS S3): section h2, card titles, item titles, statement headings */
  --hx-t-h2:clamp(2.4rem,6vw,5.75rem);
  --hx-t-card:clamp(1.5rem,2.6vw,2.25rem);
  --hx-t-item:clamp(1.3rem,2.4vw,2rem);
  --hx-t-stmt:clamp(2rem,1.2rem + 3.2vw,4rem);
}

/* ---------- shared bits ---------- */
.hx-h2{
  font-family:var(--display);font-weight:800;font-size:var(--hx-t-h2);line-height:1.03;
  letter-spacing:-.03em;margin:0 0 1.2rem;max-width:15ch;color:var(--hx-ink);text-wrap:balance;
}
.hx-h2--wide{max-width:none;}
.sec-paper .hx-h2{color:var(--ink);}
.hx-lede{font-size:var(--t-body);line-height:1.65;color:var(--hx-soft);max-width:46ch;margin:0 0 1.5rem;}
.hx-lede--big{font-size:var(--t-lede);line-height:1.45;color:var(--on-dark);}
.hx-lede b{color:#fff;font-weight:700;}
.hx-lede--ink{color:var(--ink-soft);max-width:60ch;}
.hx-actions{margin:0;display:flex;flex-wrap:wrap;gap:.9rem 1.4rem;align-items:center;}

/* text links on navy: coral reads (crimson is only 3.3:1 there) */
.sec-dark .k4-btn--text,.on-dark .k4-btn--text{color:var(--hx-coral);}

/* ---------- M1: one gradient across the whole accent phrase ----------
   fable.js splits a heading into one span per word, so a plain gradient
   would restart on every word. pg-index.js measures each line's accent
   words and gives every word the same gradient window (--gw wide, --gx
   in from the line start), so the colour flows through the phrase. The
   slow drift only runs while the heading is on screen. */
body.pg-home em.k4-grad{font-style:normal;}
body.pg-home em.k4-grad.hx-flow{
  background-image:var(--k4-grad-text);
  background-size:var(--gw) 100%;
  background-position:calc(var(--gx,0px) * -1) 50%;
  background-repeat:no-repeat;
  animation:hxFlow 9s ease-in-out infinite alternate;
  animation-play-state:paused;
}
body.pg-home em.k4-grad--light.hx-flow{background-image:var(--k4-grad-text-light);}
.hx-grad-run em.k4-grad.hx-flow{animation-play-state:running;}
@keyframes hxFlow{
  from{background-position:calc(var(--gx,0px) * -1) 50%;}
  to{background-position:calc(var(--gx,0px) * -1 - var(--gw,0px) * .36) 50%;}
}
@media (prefers-reduced-motion:reduce){body.pg-home em.k4-grad.hx-flow{animation:none;}}

/* a plain word of colour inside a sentence that already carries the gradient elsewhere */
.hx-coral{font-style:inherit;font-weight:700;color:var(--hx-coral);}

/* the photo sections carry their own padding; the shared section pad keeps one rhythm */
.hx-mission .sec-inner,.hx-record .sec-inner{padding-block:var(--sec-pad,clamp(4.5rem,8vw,7.5rem));}
@media(max-width:640px){.hx-h2{max-width:none;}}

/* ============================================================
   #top  the hero: one full viewport photo (mirrored, T6), the
   copy on the left (REQUIREMENTS P1, P5, P6, T6)
   No scrim, fade, peel, plate or cutout. The copy is placed in
   photo coordinates (data-photo-region, tracked by window.PHOTO);
   the CSS below is the same cover math, used until the runtime
   writes its own numbers and when JS is off.
   ============================================================ */
body.pg-home #top{
  padding:0;background-color:var(--navy-ground,#0C1833);
}
body.pg-home #top .sec-inner{position:static;max-width:none;padding:0;}
/* white roles line, sentence case, four real links */
body.pg-home #top .phero__roles{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.2em .75em;margin:0 0 .85em;
  font:600 clamp(.85rem,3.1cqw,1.12rem)/1.2 var(--body);letter-spacing:.01em;text-transform:none;
}
body.pg-home #top .phero__roles i{display:block;width:4px;height:4px;padding:0;border-radius:50%;background:currentColor;opacity:.55;flex:none;}
body.pg-home #top .phero__roles a{color:inherit;padding-bottom:.28em;}
body.pg-home #top .phero__roles a::after{height:1px;background:currentColor;}
body.pg-home #top .phero__roles a:hover,body.pg-home #top .phero__roles a:focus-visible{color:inherit;}
body.pg-home #top .phero__roles a:focus-visible{outline:2px solid #FF6B75;outline-offset:4px;}
/* the headline: two balanced lines, the accent on the last */
body.pg-home #top .phero__title{
  max-width:none;margin:0;font-size:clamp(1.6rem,9.6cqw,6.4rem);line-height:.96;
  letter-spacing:-.025em;text-wrap:balance;
}
body.pg-home #top .phero__title em.k4-grad{
  background-image:var(--k4-grad-text-photo,linear-gradient(100deg,#E23A46 0%,#FF6B75 55%,#FF8F6B 80%,#E23A46 100%));
  filter:none;
}
/* the gradient flows once, then rests (it is not allowed to shimmer behind a reader) */
body.pg-home #top .phero__title em.k4-grad.hx-flow{animation-iteration-count:1;animation-fill-mode:forwards;animation-duration:5s;background-image:var(--k4-grad-text-photo,linear-gradient(100deg,#E23A46 0%,#FF6B75 55%,#FF8F6B 80%,#E23A46 100%));}
/* the one primary action: M2 glow on hover, a quiet white ring at rest */
body.pg-home #top .hx-herocta .k4-btn--primary{padding:1.05rem 1.8rem;font-size:1rem;}
body.pg-home #top .hx-herocta .k4-btn--primary:not(:hover):not(:focus-visible){box-shadow:0 0 0 1px rgb(244 247 251 / .28),0 14px 30px -18px rgb(0 0 0 / .6);}
body.pg-home #top .hx-herocta .k4-btn--primary:focus-visible{outline:2px solid #F4F7FB;outline-offset:3px;}
/* the photo settles once on arrival (the scale property composes with the shared drift) */
@media (prefers-reduced-motion:no-preference){
  .js body.pg-home #top:not(.is-in) .phero__bg img{scale:1.06;}
  body.pg-home #top.is-in .phero__bg img{scale:1;transition:scale 1.6s cubic-bezier(.2,.7,.2,1);}
}

/* desktop and landscape tablet: the T6-HERO-MIRROR block at the end of this file */

/* phones and portrait: a full height photo block, then the headline on navy under it */
@media (max-width:900px),(max-aspect-ratio:1/1){
  body.pg-home #top{
    --hx-ph:calc(100svh - clamp(120px,16svh,150px));
    display:block;height:auto;min-height:0;container-type:normal;
  }
  body.pg-home #top .phero__bg{position:relative!important;inset:auto!important;width:100%!important;height:var(--hx-ph)!important;min-height:360px;}
  body.pg-home #top .sec-inner{position:relative;padding:1.15rem var(--gutter) 2.4rem;}
  body.pg-home #top .hx-herocopy,body.pg-home #top .hx-herocta{position:static;width:auto;height:auto;display:block;text-align:center;}
  body.pg-home #top .phero__roles{font-size:.95rem;margin-bottom:.6rem;}
  body.pg-home #top .phero__title{font-size:clamp(2.4rem,11.3vw,6.25rem);}
  body.pg-home #top .hx-herocta{margin-top:1.4rem;display:flex;justify-content:center;}
  html:not(.photo-ink) body.pg-home #top .hx-herocopy{color:#F4F7FB;}
}

/* ============================================================
   #lead  the statement under the hero
   ============================================================ */
.hx-lead{background:var(--navy-ground,#0C1833);}
.hx-lead .sec-inner{padding-block:clamp(4.5rem,8vw,7.5rem) clamp(2.2rem,4vw,3.4rem);}
.hx-lead__deck{
  font:500 clamp(1.5rem,2.4vw,2.4rem)/1.35 var(--body);letter-spacing:-.005em;
  color:#fff;max-width:1100px;margin:0 0 clamp(1.6rem,3vw,2.4rem);text-wrap:pretty;
}
.hx-lead__links{margin:0;display:flex;flex-wrap:wrap;gap:.7rem 2.2rem;align-items:center;}

/* ============================================================
   #mission  What is Heart Success? and the real map. The map sits
   flat on the navy ground (no glass frame, no glow); the heading
   column is narrow and the map runs to the right edge of the screen.
   ============================================================ */
.hx-mission{background:var(--navy-ground,#0C1833);overflow:hidden;isolation:isolate;}
.hx-mission .sec-inner{padding-top:72px;}
.hx-mission__grid{
  display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,.66fr);
  gap:clamp(2rem,4vw,4.5rem);align-items:center;
}
.hx-mission__grid>*{min-width:0;}
/* the heading runs the full width above the copy and the map: the narrow copy column cannot hold a heading this size */
.hx-mission .sec-inner>.hx-h2{max-width:none;margin-bottom:clamp(1.6rem,3vw,2.6rem);}
.hx-resolve{
  margin:0 0 1.2rem;max-width:25ch;
  font:500 italic clamp(1.25rem,1.05rem + .8vw,1.65rem)/1.32 var(--body);color:var(--hx-ink);
}
.hx-resolve em{font-style:italic;}
.hx-mission__map{min-width:0;}
.hx-mission .maplab-stage{max-width:none;width:100%;}
/* the R8 map plate (usmap.css) rendered inside this layout: labels print at a constant size (the svg is scaled by --mm-s) and Tupelo and Nashville get their R8 offsets back */
.hx-mission .mm-pin-label{font-size:calc(14px / var(--mm-s,.78));stroke-width:calc(4px / var(--mm-s,.78));}
.hx-mission .mm-hub-label{font-size:calc(17px / var(--mm-s,.78));}
.hx-mission .mm-pin-g[data-city="tupelo"] .mm-pin-label{transform:translate(calc(8px / var(--mm-s,.78)),calc(17px / var(--mm-s,.78)));}
.hx-mission .mm-pin-g[data-city="nashville"] .mm-pin-label{transform:translate(calc(4px / var(--mm-s,.78)),calc(-3px / var(--mm-s,.78)));}
/* motion-kit wraps every b in a highlight wash; the map tooltip title is a block, not body copy */
.hx-mission .mm-tip .mkx-strong{display:block;}
.hx-mission .mm-tip .mkx-strong__wash{display:none;}
/* the restored R8 tooltip carries a 2px accent bar on its top edge: a decorative line on a box, so it stays off */
.hx-mission .mm-tip::before{content:none;display:none;}
.hx-mission .mm-cap{margin-top:1.1rem;text-transform:none;letter-spacing:0;font-size:15px;font-weight:500;color:rgb(244 247 251 / .78);}
.hx-mission .mm-list li{border:0;}
@media(max-width:700px){.hx-mission .mm-pin-label{display:none;}}
@media(min-width:1024px){
  /* the map runs toward the screen edge but stops 3rem short, so the Boston and New York labels stay inside the page */
  .hx-mission__map{margin-right:calc(var(--hx-side) * -1 + 3rem);}
}
@media(max-width:980px){
  .hx-mission__grid{grid-template-columns:minmax(0,1fr);gap:2.2rem;}
  .hx-resolve{max-width:30ch;}
}

/* ============================================================
   #record  Impact at a glance (paper). The numbers are the picture:
   no cards, no line art, no hairlines, no ghost numeral.
   ============================================================ */
.hx-record{background:#F4F7FB;color:var(--ink);isolation:isolate;}
.hx-record .hx-h2{max-width:none;margin-bottom:clamp(1.8rem,3.4vw,3rem);}
.hx-stat__k{margin:0;font:700 1rem/1.25 var(--body);color:var(--ink);}
.hx-bignum{
  margin:.12em 0 .14em;display:block;
  font:800 clamp(5rem,2rem + 10vw,11rem)/.9 var(--display);letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.hx-bignum--md{font-size:clamp(4rem,1.5rem + 8vw,9rem);}
.hx-bignum__plus{font-size:.55em;margin-left:.05em;color:var(--hx-crimson,#E23A46);vertical-align:baseline;}
.hx-stat__n{margin:0;font-size:1.1rem;line-height:1.5;color:var(--ink-soft);max-width:30ch;}
.hx-stat__n b{color:var(--ink);font-weight:700;}
.hx-stat .k4-btn--text{margin-top:1rem;}
.hx-stat__side{padding-bottom:clamp(.6rem,1.6vw,1.6rem);}
.hx-stat__side .k4-btn--text{margin-top:.9rem;}
.hx-stats__pair{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(2rem,5vw,5rem);margin-top:clamp(2.4rem,5vw,4.4rem);
}
.hx-creds{list-style:none;margin:clamp(3rem,6vw,5.5rem) 0 0;padding:0;}
.hx-cred{
  display:grid;grid-template-columns:minmax(0,3fr) minmax(0,6fr) minmax(0,3fr);
  gap:.6rem clamp(1.2rem,3vw,3rem);align-items:center;padding:1.6rem 0;
}
.hx-cred__k{margin:0;font:700 1rem/1.25 var(--body);color:var(--ink-soft);}
.hx-cred__v{
  margin:0;font:800 var(--hx-t-stmt)/1.04 var(--display);letter-spacing:-.025em;
  color:var(--ink);text-wrap:balance;
}
.hx-cred__vwrap .hx-cred__n{margin-top:.5rem;}
.hx-cred__n{margin:0;font-size:1.05rem;line-height:1.5;color:var(--ink-soft);}
.hx-cred__side .k4-btn--text{margin-top:.6rem;}
.hx-roles{
  list-style:none;margin:clamp(2.6rem,5vw,4.4rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.4rem,2.6vw,2.6rem);
}
.hx-roles li{display:flex;flex-direction:column;gap:.4rem;}
.hx-role__t{font:800 clamp(1.2rem,2.4vw,2rem)/1.1 var(--display);color:var(--ink);letter-spacing:-.015em;}
@media(min-width:701px){.hx-role__t{min-height:2.2em;}}
.hx-role__d{font-size:.95rem;line-height:1.5;color:var(--ink-soft);}
@media(max-width:900px){
  .hx-cred{grid-template-columns:minmax(0,1fr);gap:.35rem;padding:1.3rem 0;}
  .hx-stats__pair{grid-template-columns:minmax(0,1fr);gap:2.2rem;}
}
@media(max-width:700px){.hx-roles{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:480px){
  .hx-bignum{font-size:clamp(4.5rem,24vw,6rem);}
  .hx-bignum--md{font-size:clamp(4rem,21vw,5.4rem);}
}

/* the R8 record drawings, each beside its own number (no cards, no bars): rise 85 ms apart, strokes draw in, the dot crowd fills, and on hover the drawing answers inside its block */
.js .reveal-sec:not(.is-in) .hx-rise{opacity:0;}
.js .reveal-sec.is-in .hx-rise{animation:hxRise .85s var(--hx-ease) backwards;animation-delay:calc(var(--i,0) * 85ms + 120ms);}
@keyframes hxRise{from{opacity:0;transform:translateY(26px);}}
@media (prefers-reduced-motion:reduce){.js .reveal-sec:not(.is-in) .hx-rise{opacity:1;}.js .reveal-sec.is-in .hx-rise{animation:none;}}

.hx-record .hx-art{height:auto;margin:0;min-width:0;aspect-ratio:200/92;width:100%;}
.hx-record .hx-art svg{display:block;width:100%;height:100%;overflow:visible;}
.hx-record .hx-art .k4-draw{stroke:rgb(11 27 51 / .4);}
.hx-record .hx-art .k4-draw--accent{stroke:var(--hx-crimson);}
.hx-record .hx-art .k4-fill--accent{fill:var(--hx-crimson);}
.hx-record .hx-art .k4-fill--dim{fill:rgb(11 27 51 / .2);}
.hx-record .hx-art svg text{fill:var(--ink);}

/* lead stat: number | words | drawing */
.hx-stat--lead .hx-stat__body{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,clamp(240px,27vw,340px));align-items:end;column-gap:clamp(1.6rem,4vw,3.6rem);}
.hx-stat--lead .hx-art--reach{align-self:end;margin-bottom:clamp(.6rem,1.6vw,1.6rem);}

/* the two stats under it: number on top, then words left and drawing right */
.hx-stat--art{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);column-gap:clamp(1rem,2.4vw,2rem);align-items:start;}
.hx-stat--art>.hx-stat__k,.hx-stat--art>.hx-bignum{grid-column:1 / -1;}
.hx-stat--art>.hx-stat__foot{grid-column:1;grid-row:3;}
.hx-stat--art>.hx-art{grid-column:2;grid-row:3;align-self:center;width:100%;max-width:300px;}
.hx-stat__foot .k4-btn--text{margin-top:1rem;}

/* credentials: label with its drawing, the big word, words and link */
.hx-cred{grid-template-columns:minmax(0,2.8fr) minmax(0,6.6fr) minmax(0,2.8fr);}
.hx-cred__lead{display:flex;flex-direction:column;gap:.9rem;align-items:flex-start;}
.hx-cred__lead .hx-art{width:min(100%,200px);}

/* four roles, each its own object */
.hx-roles li{gap:.4rem;}
.hx-record .hx-role__art{width:calc(92px * 120 / 84);aspect-ratio:120/84;height:92px;margin-bottom:.35rem;}
@media(max-width:900px){
  .hx-stat--lead .hx-stat__body{grid-template-columns:auto minmax(0,1fr);}
  .hx-stat--lead .hx-art--reach{grid-column:1 / -1;max-width:340px;margin-top:1rem;}
  .hx-cred{grid-template-columns:minmax(0,1fr);}
}
@media(max-width:560px){
  .hx-stat--lead .hx-stat__body{grid-template-columns:minmax(0,1fr);}
  .hx-stat--art{grid-template-columns:minmax(0,1fr);row-gap:.4rem;}
  .hx-stat--art>.hx-stat__foot,.hx-stat--art>.hx-art{grid-column:1;}
  .hx-stat--art>.hx-stat__foot{grid-row:3;}
  .hx-stat--art>.hx-art{grid-row:4;max-width:260px;margin-top:1rem;}
}
@media(hover:hover) and (pointer:fine){
  .hx-record [data-k4-host]:hover .hx-art .k4-draw{stroke:rgb(11 27 51 / .62);}
  .hx-record [data-k4-host]:hover .hx-art .k4-draw--accent{stroke:var(--hx-deep);}
}
@media(max-width:560px){.hx-stat--lead .hx-art--reach{max-width:260px;}}

/* ============================================================
   #background  the diploma wall: a half-bleed photo on the left,
   the ledger on navy. No text over the photo, so no scrim is needed.
   ============================================================ */
.hx-bg{--hs-w:44vw;background:var(--navy-ground,#0C1833);}
.hx-bg .hsplit__ph{--drift-origin:50% 40%;}
.hx-bg .hsplit__copy{padding-left:clamp(2rem,5vw,5.5rem);padding-right:max(var(--gutter),4vw);max-width:62rem;box-sizing:content-box;}
.hx-bg .hx-h2{max-width:12ch;margin-bottom:clamp(1.6rem,3vw,2.6rem);}
.bgcol{display:flex;flex-direction:column;gap:1.8rem;}
body.pg-home .hx-bg .bgrow{border:0;padding:0;margin:0;}
body.pg-home .hx-bg .bgrow__k{margin:0 0 .5rem;font:700 .84rem/1.2 var(--body);letter-spacing:0;text-transform:none;color:rgb(255 255 255 / .72);}
/* background marquee (self-contained: the shared fable.css also ships .marq rules for navy-on-paper pages, so these use their own class names) */
.hx-marq{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);}
.hx-marq__track{flex:0 0 auto;display:flex;align-items:center;animation:hxMarq var(--marq-dur,32s) linear infinite;will-change:transform;}
.hx-marq:hover .hx-marq__track{animation-play-state:paused;}
.hx-marq.is-off .hx-marq__track{animation-play-state:paused;}
.hx-marq__i{white-space:nowrap;font:500 clamp(.95rem,.9rem + .25vw,1.08rem)/1.4 var(--body);color:#fff;display:inline-flex;align-items:center;transition:color .3s ease,transform .3s var(--ease-snap);}
.hx-marq__i::after{content:'';width:4px;height:4px;border-radius:50%;background:#FF6B75;margin:0 1.6rem;flex:0 0 auto;transition:transform .3s var(--ease-snap);}
@media(hover:hover) and (pointer:fine){
  .hx-marq:has(.hx-marq__i:hover) .hx-marq__i:not(:hover){color:rgb(255 255 255 / .5);}
  .hx-marq__i:hover{color:#FF6B75;transform:translateY(-2px);}
  .hx-marq__i:hover::after{transform:scale(1.4);}
}
@keyframes hxMarq{to{transform:translateX(-100%);}}
@media(prefers-reduced-motion:reduce){.hx-marq{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none;}.hx-marq__track{animation:none;flex:1 1 100%;flex-wrap:wrap;min-width:0;}.hx-marq__track+.hx-marq__track{display:none;}}
@media(prefers-reduced-motion:reduce){.hx-marq__track:first-child .hx-marq__i:last-child::after{display:none;}}
/* no JS: the rows are a plain wrapped list, the same as under reduced motion */
html.no-js .hx-marq{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none;}
html.no-js .hx-marq__track{animation:none;flex:1 1 100%;flex-wrap:wrap;min-width:0;}
html.no-js .hx-marq__track:first-child .hx-marq__i:last-child::after{display:none;}

/* ============================================================
   #work  six domains, six real illustrations, one big stage.
   The art stands alone on the navy ground: no card, no bloom,
   no glow field. Tabs are border-only boxes; hover and focus are
   the shared ring (class box), selection is click, Enter or arrows.
   ============================================================ */
.hx-work{background:var(--navy-ground,#0C1833);isolation:isolate;overflow:clip;}
.hx-work .sec-inner{padding-block:var(--sec-pad,clamp(4.5rem,8vw,7.5rem));}
.hx-work__grid{
  display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
  column-gap:clamp(1.8rem,4vw,4.2rem);row-gap:clamp(1.6rem,3vw,2.6rem);align-items:start;
}
/* the heading runs the full width above the tabs and the stage: the tab column cannot hold a heading this size */
.hx-work__col{display:contents;}
.hx-work__col .hx-h2{grid-column:1 / -1;grid-row:1;max-width:none;margin:0;}
.hx-work__col .hx-tabs{grid-column:1;grid-row:2;}
.hx-work__grid>.hx-stage{grid-column:2;grid-row:2;}
.hx-tabs{list-style:none;margin:0;padding:0;display:grid;grid-auto-rows:1fr;gap:.5rem;border:0;}
.hx-tab{
  position:relative;display:grid;grid-template-columns:2.1rem minmax(0,1fr) auto;align-items:center;column-gap:.3rem;
  width:100%;min-height:64px;text-align:left;padding:1rem 1.1rem;
  border:1px solid var(--line-dark,rgb(244 247 251 / .16));border-radius:var(--box-r,14px);
  background:none;color:#B7C2D6;cursor:pointer;font:inherit;
  transition:border-color .25s ease;
}
.hx-tabs>li{display:flex;}
.hx-tab::before{content:none;}
.hx-tab__n{font:600 .85rem/1 var(--body);letter-spacing:0;color:rgb(244 247 251 / .55);}
.hx-tab__t{font:700 var(--hx-t-item)/1.15 var(--display);letter-spacing:-.015em;}
.hx-tab.is-active{border-color:#FF6B75;background:none;color:#fff;}
.hx-tab.is-active .hx-tab__n{color:#FF6B75;}
/* the arrow slides in on hover, focus and the active tab (it moves inside the box; the box shows only its ring) */
.hx-tab__go{margin-left:.2rem;color:#FF6B75;opacity:.35;transform:translateX(-5px);transition:opacity .3s ease,transform .4s var(--hx-ease);}
.hx-tab.is-active .hx-tab__go{opacity:1;transform:none;}
@media(hover:hover) and (pointer:fine){.hx-tab:hover{color:#fff;}.hx-tab:hover .hx-tab__go{opacity:1;transform:none;}}
.hx-tab:focus-visible .hx-tab__go{opacity:1;transform:none;}

.hx-stage{position:relative;display:flex;flex-direction:column;min-height:clamp(560px,50vw,700px);}
.hx-pane{display:none;flex:1;flex-direction:column;}
.hx-pane.is-active{display:flex;animation:hxPane .7s var(--hx-ease) both;}
@keyframes hxPane{from{opacity:0;transform:translateY(14px) scale(.985);}}
@media (prefers-reduced-motion:reduce){.hx-pane.is-active{animation:none;}}
.hx-stage .mp-panel{
  flex:1;min-height:0;padding:0;background:transparent;border:0;
  display:flex;align-items:center;justify-content:center;overflow:visible;
}
.hx-stage .mp-stage{width:100%;min-height:clamp(440px,44vw,660px);}
.hx-stage .mp-art{height:clamp(400px,40vw,600px);}
.hx-stage .mp-art--ph{width:min(440px,86%);height:auto;}
.hx-stage .mp-canister{height:clamp(440px,43vw,640px);}
.hx-pane__cap{padding:clamp(1rem,1.8vw,1.6rem) 0 0;min-height:9rem;}
.hx-pane__lead{margin:0 0 .5rem;font:500 clamp(1.15rem,1rem + .6vw,1.4rem)/1.35 var(--body);color:#fff;max-width:30ch;}
.hx-pane__desc{margin:0;font-size:1rem;line-height:1.55;color:#B7C2D6;max-width:46ch;}
.hx-stage__more{margin:.6rem 0 0;}

@media(max-width:900px){
  .hx-work__grid{grid-template-columns:minmax(0,1fr);gap:1.4rem;}
  .hx-work__col .hx-h2,.hx-work__col .hx-tabs,.hx-work__grid>.hx-stage{grid-column:1;grid-row:auto;}
  .hx-tabs{grid-template-columns:repeat(2,minmax(0,1fr));margin:0;overflow:visible;}
  .hx-tab{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;white-space:normal;padding:.8rem .9rem;min-height:56px;}
  .hx-tab__n{display:block;}
  .hx-tab__go{display:none;}
  .hx-tab__t{font-size:clamp(1.125rem,2.8vw,1.5rem);}
  .hx-stage{min-height:0;}
  .hx-stage .mp-stage{min-height:0;}
  .hx-stage .mp-art{height:clamp(300px,82vw,440px);}
  .hx-stage .mp-art--ph{height:auto;}
  .hx-stage .mp-canister{height:clamp(320px,88vw,460px);}
  .hx-pane__cap{min-height:0;}
}

/* no JS: every domain shows, stacked, instead of a tab nobody can switch */
html.no-js .hx-pane{display:flex;}
html.no-js .hx-tabs{display:none;}
html.no-js .hx-stage{min-height:0;}

/* ============================================================
   #stories  one patient sentence, a rhythm that steadies, one photo
   with a hard seam at 50 percent. The photo is a link: it zooms a
   little inside its frame and shows an inset ring on focus.
   ============================================================ */
.hx-story{background:var(--navy-ground,#0C1833);}
.hx-story .hsplit__ph{--drift-origin:50% 30%;}
.hx-story__copy{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  padding-block:var(--sec-pad,clamp(4.5rem,8vw,7.5rem));
  padding-left:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)));
  padding-right:clamp(1.5rem,4vw,4rem);
}
.hx-story__quote{
  margin:0 0 2.2rem;max-width:none;color:#fff;
  font:500 italic clamp(2.4rem,6.2vw,5.25rem)/1.05 var(--body);letter-spacing:-.02em;text-wrap:balance;
}
.hx-story__quote em.k4-grad{font-style:italic;font-weight:600;}
.hx-story__more{margin:0;}
/* stories ecg */
.hx-ecg{width:min(100%,520px);height:clamp(88px,12vh,132px);margin:.4rem 0 1.6rem;}
.hx-ecg svg{display:block;width:100%;height:100%;overflow:visible;}
.hx-ecg__base{stroke:rgb(255 255 255 / .16);stroke-width:1.4;vector-effect:non-scaling-stroke;}
.hx-ecg__line{fill:none;stroke:#FF6B75;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 6px rgb(255 107 117 / .5));transition:filter .4s ease;}
.hx-ecg__dot{fill:#FF6B75;filter:drop-shadow(0 0 6px rgb(255 107 117 / .8));}
.hx-ecg-ready .hx-ecg__line{stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200);}
.hx-ecg-ready .hx-ecg__dot{opacity:0;}
.hx-ecg-ready.is-in .hx-ecg__line{stroke-dashoffset:0;transition:stroke-dashoffset 2.6s cubic-bezier(.4,0,.2,1) .45s,filter .4s ease;}
.hx-ecg-ready.is-in .hx-ecg__dot{opacity:1;transition:opacity .5s ease 2.9s;}
@media(prefers-reduced-motion:no-preference){.hx-ecg-ready.is-in.hx-live .hx-ecg__dot{animation:hxBlink 2.4s ease-in-out 3.4s infinite;}}
@keyframes hxBlink{0%,100%{opacity:.45;}50%{opacity:1;}}
@media(hover:hover) and (pointer:fine){.hx-ecg:hover .hx-ecg__line{filter:drop-shadow(0 0 12px rgb(255 107 117 / .85));}}
.hx-story__photo{display:block;}
.hx-story__photo>img{transition:transform .9s var(--ease-snap),opacity .6s ease,scale .9s var(--ease-snap);}
@media(hover:hover) and (pointer:fine){.hx-story__photo:hover>img{scale:1.05;}}
.hx-story__more .k4-btn--primary{padding:1.1rem 2.1rem;font-size:1.02rem;}
.hx-story__note{margin:1.4rem 0 0;font-size:.95rem;line-height:1.5;color:rgb(244 247 251 / .7);max-width:34ch;}
@media(max-width:900px){
  .hx-story__copy{padding:2.6rem var(--gutter) 3rem;}
}

/* ============================================================
   #media  a real photo on the left, the teaching on the right.
   The four chapters are real links in plain boxes: the ring is the
   box hover, the arrow inside nudges (shared motion-kit rule).
   ============================================================ */
.hx-media{background:var(--navy-ground,#0C1833);}
.hx-media .hsplit__ph{--drift-origin:54% 30%;}
.hx-media__copy{padding-left:clamp(2rem,5vw,5rem);padding-right:max(var(--gutter),4vw);max-width:62rem;box-sizing:content-box;}
.hx-media__copy .hx-h2{max-width:13ch;}
.hx-media .hx-lede--big{max-width:36ch;}
.hx-whyreach{
  margin:0 0 clamp(1.8rem,3vw,2.6rem);max-width:34ch;
  font:600 clamp(1.15rem,1rem + .6vw,1.4rem)/1.45 var(--body);color:#F4F7FB;
}
.hx-whyreach b{font-weight:700;}
.hx-media__h{margin:0 0 1.1rem;font:800 var(--hx-t-card)/1.12 var(--display);letter-spacing:-.01em;color:#fff;}
.hx-chapters{list-style:none;margin:0;padding:0;display:grid;gap:.75rem;}
.hx-chapter{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:1rem;row-gap:.4rem;align-items:baseline;
  padding:1.2rem 1.4rem;color:inherit;text-decoration:none;
  border:1px solid var(--line-dark,rgb(244 247 251 / .16));border-radius:var(--box-r,14px);
}
.hx-chapter__n{font:600 .8rem/1 var(--body);color:#FF6B75;}
.hx-chapter__t{font:700 var(--hx-t-item)/1.15 var(--display);letter-spacing:-.015em;color:#fff;}
.hx-chapter__go{color:#FF6B75;}
.hx-chapter__d{grid-column:2 / 4;font-size:.95rem;line-height:1.55;color:#B7C2D6;}
@media(max-width:900px){
  /* heading, lede and statement, then the photo, then the chapters */
  .hx-media{display:flex;flex-direction:column;}
  .hx-media__copy{display:contents;}
  .hx-media__intro{order:1;padding:2.6rem var(--gutter) 2rem;}
  .hx-media .hsplit__ph{order:2;}
  .hx-media__chapters{order:3;padding:2rem var(--gutter) 3.2rem;}
  .hx-media__copy .hx-h2{max-width:none;}
  .hx-chapter{min-height:56px;padding:1.1rem 1.1rem;}
}

/* ============================================================
   #explore  five photo tiles on paper. The photo is flush to the
   card edge and carries no text. The box answers with the shared
   ring only; inside it the photo zooms a little, the arrow nudges,
   the underline draws and the title warms. All five cards are equal.
   ============================================================ */
.hx-explore{background:#F4F7FB;color:var(--ink);isolation:isolate;}
.hx-explore .sec-inner{padding-block:var(--sec-pad,clamp(4.5rem,8vw,7.5rem));}
.hx-explore__head{
  display:grid;grid-template-columns:minmax(0,1fr);row-gap:1.3rem;margin-bottom:clamp(2rem,4vw,3.4rem);
}
.hx-explore__head .hx-h2{margin:0;max-width:none;}
.hx-explore__head .hx-lede{margin:0;max-width:52ch;font-size:clamp(1.05rem,.95rem + .4vw,1.2rem);}
.hx-navcards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(1rem,1.6vw,1.4rem);}
.hx-navcard{
  grid-column:span 2;display:flex;flex-direction:column;padding:0;overflow:hidden;
  background:#fff;color:var(--ink);text-decoration:none;
  border:1px solid var(--line-light,rgb(11 27 51 / .14));border-radius:var(--box-r,14px);box-shadow:none;
}
.hx-navcard:nth-child(4){grid-column:2 / span 2;}
.hx-navcard:nth-child(5){grid-column:4 / span 2;}
.hx-navcard__ph{display:block;position:relative;overflow:hidden;aspect-ratio:4/5;background:#E9EEF6;}
.hx-navcard__ph picture{display:contents;}
.hx-navcard__ph img{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:var(--op,50% 30%);
}
.hx-navcard__ph--plate{background:var(--navy-ground,#0C1833);}
.hx-navcard__ph--plate img{object-fit:contain;object-position:50% 50%;padding:9%;box-sizing:border-box;}
.hx-navcard__body{display:flex;flex-direction:column;gap:.5rem;padding:1.2rem 1.4rem 1.4rem;flex:1;}
.hx-navcard__t{font:800 var(--hx-t-card)/1.1 var(--display);letter-spacing:-.02em;color:var(--ink);}
.hx-navcard__note{font-size:1rem;line-height:1.5;color:rgb(11 27 51 / .78);}
.hx-navcard__go{position:relative;align-self:flex-start;margin-top:auto;padding-top:.4rem;font:700 .95rem/1 var(--body);color:var(--k4-deep,#9C1B27);}
.hx-navcard__go::after{content:'';position:absolute;left:0;right:100%;bottom:-3px;height:2px;background:var(--k4-grad-text);transition:right .35s var(--hx-ease);}
.hx-navcard__t{transition:color .3s ease;}
@media(hover:hover) and (pointer:fine){
  .hx-navcard:hover .hx-navcard__go::after{right:0;}
  .hx-navcard:hover .hx-navcard__t{color:var(--k4-deep,#9C1B27);}
}
.hx-navcard:focus-visible .hx-navcard__go::after{right:0;}
.hx-navcard:focus-visible .hx-navcard__t{color:var(--k4-deep,#9C1B27);}
.hx-navcard .hx-navcard__go .arr{display:inline-block;}
/* each photo settles once, one after another */
.hx-explore.is-in .hx-navcard__ph>img,.hx-explore.is-in .hx-navcard__ph>picture>img{transition-delay:calc(var(--i,0) * 90ms);}
@media(min-width:1500px){
  .hx-navcards{grid-template-columns:repeat(5,minmax(0,1fr));}
  .hx-navcard,.hx-navcard:nth-child(4),.hx-navcard:nth-child(5){grid-column:auto;}
  /* five across: the longest word ("Collaboration") must stay inside the narrower card */
  .hx-navcard__t{font-size:1.75rem;}
  .hx-navcard__body{padding-inline:1.15rem;}
}
@media(max-width:900px){
  .hx-explore__head{grid-template-columns:minmax(0,1fr);}
  .hx-navcards{grid-template-columns:repeat(12,minmax(0,1fr));}
  .hx-navcard,.hx-navcard:nth-child(4){grid-column:span 6;}
  .hx-navcard:nth-child(5){grid-column:4 / span 6;}
  .hx-navcard__ph img{object-position:var(--op-m,50% 30%);}
  .hx-navcard__ph--plate img{object-position:50% 50%;}
}
@media(max-width:560px){
  .hx-navcards{grid-template-columns:minmax(0,1fr);}
  .hx-navcard,.hx-navcard:nth-child(4),.hx-navcard:nth-child(5){grid-column:auto;}
  .hx-navcard .hx-navcard__ph{aspect-ratio:4/3;}
}

/* ============================================================
   #contact  a half-bleed portrait on the right, the call to action
   on navy beside it. Nothing sits over the photo.
   ============================================================ */
.hx-contact{background:var(--navy-ground,#0C1833);}
.hx-contact .hsplit__ph{--drift-origin:60% 30%;}
.hx-contact__copy{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  padding-left:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)));
  padding-right:clamp(1.5rem,4vw,4rem);
}
.hx-contact .hx-h2{max-width:16ch;}
.hx-contact .hx-lede--big{font-size:clamp(1.05rem,.8rem + .45vw,1.3rem);line-height:1.55;color:#fff;max-width:34ch;margin-bottom:1.8rem;}
.hx-contact .hx-actions{margin:0;}
.hx-contact .k4-btn--primary{padding:1.1rem 2.1rem;font-size:1.02rem;}
.hx-contact__meta{margin:1.8rem 0 0;display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;font-size:1rem;}
.hx-contact__meta a{
  display:block;width:max-content;color:#fff;
  text-decoration:underline;text-decoration-color:rgb(255 255 255 / .5);text-decoration-thickness:1px;text-underline-offset:.28em;
  transition:text-decoration-color .2s ease;
}
@media(hover:hover) and (pointer:fine){
  .hx-contact__meta a:hover{text-decoration-color:#FF6B75;text-decoration-thickness:2px;}
}
.hx-contact__meta a:focus-visible{text-decoration-color:#FF6B75;text-decoration-thickness:2px;}
/* the glow of the one action plays once, after the sentences have lit */
@media (prefers-reduced-motion:no-preference){
  .js .hx-contact.is-in .k4-btn--primary:not(:hover):not(:focus-visible) .k4-btn__glow{animation:hxGlowOnce 1.3s ease 1.8s 1 both;}
}
@keyframes hxGlowOnce{0%,100%{opacity:0;}45%{opacity:1;}}
@media(max-width:900px){
  .hx-contact__copy{padding:2.4rem var(--gutter) 3.4rem;}
}

/* ============================================================
   #newsletter  the dispatch band: same heading size as the band
   on the other pages (the shared size sits in fable.css)
   ============================================================ */
body.pg-home #newsletter .nl__title{font-size:clamp(3rem,7.15vw,6.1rem);}
@media(max-width:900px){
  body.pg-home #newsletter .nl__title{font-size:clamp(2.6rem,11vw,4.6rem);}
}

/* T3-STAT-BOXES:BEGIN */
/* ============================================================
   #record stat boxes (Dev T3). Each of the three stats sits in its own
   box: a really light red gradient under a soft glossy sheen, a 1px
   crimson tint border, the site box radius. A light band crosses each
   box once on arrival (staggered with the rises), then again every 9 s
   while the section is on screen (pg-index.js toggles .hx-live, paused
   off screen and in a hidden tab). Hover and keyboard focus: the border
   warms to crimson, the arrow nudges, the paper stack fans out, and
   pg-index.js adds .hx-play for ONE pass of the band, a shine across the
   numeral, the bars regrowing and the dots rippling (a pass always
   finishes, so leaving early never cuts it). No lift, no tilt, no outer
   glow, no accent line. Reduced motion: the static sheen only.
   ============================================================ */
.hx-stats{--t3-pad:clamp(1.25rem,3vw,2.75rem);--t3-gap:clamp(1rem,1.6vw,1.4rem);}
.hx-stat{
  position:relative;isolation:isolate;overflow:hidden;
  padding:var(--t3-pad);border-radius:var(--box-r,14px);
  border:1px solid rgb(226 58 70 / .18);
  background:
    radial-gradient(130% 95% at 0% 0%,rgb(255 255 255 / .7) 0%,rgb(255 255 255 / .22) 35%,rgb(255 255 255 / 0) 60%),
    linear-gradient(135deg,#FFF8F8 0%,#FEEFF1 50%,#FCE4E8 100%);
  transition:border-color .35s ease;
}
/* the lead box ends on its link and bar baseline, which already sit one step above the row end */
.hx-stat--lead{padding-bottom:max(.75rem,calc(var(--t3-pad) - clamp(.6rem,1.6vw,1.6rem)));}
.hx-stats__pair{gap:var(--t3-gap);margin-top:var(--t3-gap);container-type:inline-size;}
/* the pair numerals scale with their boxes: 650,000+ is about 4.05 em wide, so it
   never takes more than 94% of its box (the cap only bites just above the 900px stack and on phones) */
@media(min-width:901px){
  .hx-stats__pair .hx-bignum--md{font-size:min(clamp(4rem,1.5rem + 8vw,9rem),calc(((100cqi - var(--t3-gap)) * 7 / 12 - 2 * var(--t3-pad) - 2px) / 4.3));}
}
@media(max-width:900px){
  .hx-stats__pair .hx-bignum--md{font-size:min(clamp(4rem,1.5rem + 8vw,9rem),calc((100cqi - 2 * var(--t3-pad) - 2px) / 4.3));}
}
@media(max-width:480px){
  .hx-stats__pair .hx-bignum--md{font-size:min(clamp(4rem,21vw,5.4rem),calc((100cqi - 2 * var(--t3-pad) - 2px) / 4.3));}
}

/* the light band: ::before is the arrival pass and the slow loop, ::after the hover pass.
   Both sit under the words (z-index -1 inside the isolated box), so text stays crisp */
.hx-stat::before,.hx-stat::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(115deg,rgb(255 255 255 / 0) 30%,rgb(255 255 255 / .4) 42%,rgb(255 255 255 / .95) 50%,rgb(255 255 255 / .4) 58%,rgb(255 255 255 / 0) 70%);
  transform:translateX(-101%);
}
/* the numeral shine: a coral glint clipped to the digits, parked off to the left */
.hx-numshine{
  background-image:linear-gradient(105deg,rgb(255 107 117 / 0) 42%,rgb(255 107 117 / .8) 47%,rgb(255 196 200 / .9) 50%,rgb(255 107 117 / .8) 53%,rgb(255 107 117 / 0) 58%);
  background-size:300% 100%;background-repeat:no-repeat;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;
}
/* the bars regrow from the baseline; the dots pop from their centres */
.hx-record [data-hx-draw="reach"] rect{transform-box:fill-box;transform-origin:50% 100%;}
.hx-record [data-k4-draw="docs"] :is(rect,line){
  transform-box:fill-box;transform-origin:50% 50%;
  transition:stroke-dashoffset 1.15s var(--k4-ease),stroke .35s ease,stroke-width .35s ease,transform .7s var(--hx-ease);
}

/* hover (fine pointers) and keyboard focus: the border warms, the arrow nudges, the stack fans */
.hx-stat:focus-within{border-color:var(--hx-crimson);--t3-fan:1;}
.hx-stat:focus-within .k4-btn--text .arr{transform:translateX(3px);}
@media(hover:hover) and (pointer:fine){
  .hx-stat:hover{border-color:var(--hx-crimson);--t3-fan:1;}
  .hx-stat:hover .k4-btn--text .arr{transform:translateX(3px);}
}
@media(prefers-reduced-motion:no-preference){
  /* the paper stack: the four sheets under it fan to the left, the top sheet lifts */
  .hx-record [data-k4-draw="docs"] rect:nth-of-type(1){transform:translate(calc(var(--t3-fan,0) * -5px),calc(var(--t3-fan,0) * 4px)) rotate(calc(var(--t3-fan,0) * -4.5deg));}
  .hx-record [data-k4-draw="docs"] rect:nth-of-type(2){transform:translate(calc(var(--t3-fan,0) * -3.6px),calc(var(--t3-fan,0) * 2.9px)) rotate(calc(var(--t3-fan,0) * -3deg));}
  .hx-record [data-k4-draw="docs"] rect:nth-of-type(3){transform:translate(calc(var(--t3-fan,0) * -2.2px),calc(var(--t3-fan,0) * 1.8px)) rotate(calc(var(--t3-fan,0) * -1.6deg));}
  .hx-record [data-k4-draw="docs"] rect:nth-of-type(4){transform:translate(calc(var(--t3-fan,0) * -1px),calc(var(--t3-fan,0) * .8px)) rotate(calc(var(--t3-fan,0) * -.6deg));}
  .hx-record [data-k4-draw="docs"] :is(rect:nth-of-type(5),line){transform:translate(calc(var(--t3-fan,0) * 3px),calc(var(--t3-fan,0) * -5px));}

  /* arrival pass, then every 9 s while on screen */
  .js .hx-record.is-in .hx-stat::before{animation:t3Sweep 9s linear calc(var(--i,0) * 160ms + .75s) infinite;animation-play-state:paused;}
  .js .hx-record.is-in.hx-live .hx-stat::before{animation-play-state:running;}

  /* one hover pass */
  .hx-stat.hx-play::after{animation:t3SweepOnce .9s cubic-bezier(.45,.05,.3,1) both;}
  .hx-stat.hx-play .hx-numshine{animation:t3NumShine .85s cubic-bezier(.45,.05,.3,1) .1s both;}
  .hx-stat.hx-play [data-hx-draw="reach"] rect{animation:t3Regrow .62s linear calc(var(--t3-d,0) * 1ms) both;}
  .hx-stat.hx-play [data-k4-draw="dots"] circle{animation:t3Dot .5s cubic-bezier(.3,.7,.3,1) calc(var(--t3-d,0) * 1ms) both;}
  .hx-stat.hx-play [data-k4-draw="dots"] .k4-fill--accent{animation-name:t3DotLit;}
}
@keyframes t3Sweep{
  0%{transform:translateX(-101%);animation-timing-function:cubic-bezier(.45,.05,.3,1);}
  16%,100%{transform:translateX(101%);}
}
@keyframes t3SweepOnce{from{transform:translateX(-101%);}to{transform:translateX(101%);}}
@keyframes t3NumShine{from{background-position:100% 0;}to{background-position:0 0;}}
@keyframes t3Regrow{
  0%{transform:scaleY(1);animation-timing-function:cubic-bezier(.5,0,.9,.45);}
  26%{transform:scaleY(.06);animation-timing-function:cubic-bezier(.2,.75,.25,1);}
  100%{transform:scaleY(1);}
}
@keyframes t3Dot{0%,100%{transform:scale(1);}40%{transform:scale(1.5);fill:rgb(226 58 70 / .5);}}
@keyframes t3DotLit{0%,100%{transform:scale(1);}40%{transform:scale(1.9);}}
/* T3-STAT-BOXES:END */
/* T6-HERO-MIRROR:BEGIN */
/* Dev T6: "mirror the image and move to the centre on the left hand side".
   Desktop and landscape tablet: the photo is mirrored (he stands right of
   centre) and the copy is ONE block in the left column of the photo
   (data-photo-region "0 0 0.47 1", which the runtime clamps to the visible
   picture under the nav, so it follows the cover crop at every width).
   Inside it the copy starts at the page gutter (the nav brand's left edge)
   and is centred vertically. The fallbacks are the same cover math, used
   until the runtime writes its numbers and when JS is off. */
@media (min-width:901px) and (min-aspect-ratio:1/1){
  body.pg-home #top{
    container-type:size;height:100svh;min-height:100svh;
    --hx-iw:max(100cqw,150cqh);
    --hx-ix:calc((100cqw - var(--hx-iw)) * .5);
    --hx-nav:92px;
  }
  body.pg-home #top .hx-herocopy{
    position:absolute;z-index:3;box-sizing:border-box;margin:0;
    left:var(--pr-x,0px);
    top:var(--pr-y,var(--hx-nav));
    width:var(--pr-w,calc(var(--hx-ix) + .47 * var(--hx-iw)));
    height:var(--pr-h,calc(100cqh - var(--hx-nav)));
    padding:0 0 0 var(--gutter);
    display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;
    container-type:inline-size;
  }
  body.pg-home #top .phero__roles{justify-content:flex-start;}
  body.pg-home #top .phero__title{font-size:clamp(2.4rem,13.6cqw,6.4rem);}
  body.pg-home #top .hx-herocta{margin-top:clamp(1.4rem,2.6cqw,2.2rem);display:flex;}
}
/* T6-HERO-MIRROR:END */
/* HERO FOCUS:BEGIN (Dev 2026-10-07: "zoom in to the hero section of the index page, that background image, and kind of slowly
   blur the background a bit so the text is more clear, he should not be blurred"). A second, pixel aligned copy of the photo
   with only the room blurred (he is cut out and kept sharp: index-hero-r*-blur.webp) fades in slowly over the sharp photo,
   while the whole ground slowly zooms in a little around him. It shares the img drift, so the two layers never part. */
body.pg-home #top .phero__bg .hx-focus{position:absolute;inset:0;display:block;}
body.pg-home #top .phero__bg .hx-focus img{position:absolute;inset:0;opacity:1;}
body.pg-home #top .phero__bg{transform-origin:64% 42%;transform:scale(1.06);}
@media (prefers-reduced-motion:no-preference){
  html.js body.pg-home #top .phero__bg .hx-focus img{opacity:0;transition:opacity 3.2s cubic-bezier(.4,0,.2,1) .6s;}
  html.js body.pg-home #top.is-in .phero__bg .hx-focus img{opacity:1;}
  html.js body.pg-home #top .phero__bg{transform:scale(1);transition:transform 7s cubic-bezier(.2,.6,.2,1) .2s;}
  html.js body.pg-home #top.is-in .phero__bg{transform:scale(1.06);}
}
/* HERO FOCUS:END */
/* MEETING 1007:BEGIN (Dev 2026-10-07: "remove that map from there since its already on the other page and instead just centre the text";
   "move the peer reviewed articles thing to sit below the 650K card and in the right where there will be empty space, the pinned reel
   on dr dmitrys page should be playing ... and it should play on auto") */
body.pg-home #mission .hx-h2{text-align:center;margin-inline:auto;}
body.pg-home #mission .hx-mission__grid{display:block;max-width:58rem;margin-inline:auto;text-align:center;}
body.pg-home #mission .hx-mission__copy{display:flex;flex-direction:column;align-items:center;}
body.pg-home #mission :is(.hx-resolve,.hx-lede){margin-inline:auto;text-align:center;}
body.pg-home #mission .hx-actions{justify-content:center;}
body.pg-home #record .hx-stats__pair--reel{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.5fr);gap:var(--t3-gap,1.2rem);align-items:stretch;}
body.pg-home #record .hx-stats__col{display:grid;gap:var(--t3-gap,1.2rem);min-width:0;container-type:inline-size;}
body.pg-home #record .hx-reel{margin:0;position:relative;min-height:100%;border-radius:var(--box-r,14px);overflow:hidden;background:#0C1833;}
body.pg-home #record .hx-reel__link{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:.5rem;padding:clamp(1.2rem,2.4vw,2rem);color:#F4F7FB;text-decoration:none;
  background:radial-gradient(120% 70% at 50% 0%,#1B2F5C 0%,#0C1833 70%);}
body.pg-home #record .hx-reel__k{font:600 .78rem/1 var(--label);letter-spacing:.16em;text-transform:uppercase;color:#FF6B75;}
body.pg-home #record .hx-reel__t{font:800 clamp(1.6rem,2.4vw,2.3rem)/1.05 var(--display);letter-spacing:-.02em;}
body.pg-home #record .hx-reel__go{font:600 .95rem/1.2 var(--body);color:rgb(244 247 251 / .85);}
body.pg-home #record .hx-reel__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
@media(max-width:900px){
  body.pg-home #record .hx-stats__pair--reel{grid-template-columns:minmax(0,1fr);}
  body.pg-home #record .hx-reel{width:min(100%,360px);aspect-ratio:9 / 16;min-height:0;margin-inline:auto;}
}
/* MEETING 1007:END */
/* REEL EMBED:BEGIN (Dev 2026-10-07: test reel https://www.instagram.com/reel/DJr-UZhSOJY/ must play on its own, embedded from
   Instagram). The video streams from Instagram's CDN through /api/reel (server/reel.cjs keeps the signed link fresh); muted loop,
   plays only while on screen, a sound button, a link to the reel. */
body.pg-home #record .hx-reel--video{background:#0C1833;}
body.pg-home #record .hx-reel__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#0C1833;}
body.pg-home #record .hx-reel__snd{position:absolute;top:.8rem;right:.8rem;z-index:2;width:42px;height:42px;border-radius:50%;border:0;display:grid;place-items:center;
  background:rgb(12 24 51 / .72);color:#F4F7FB;cursor:pointer;transition:background-color .2s ease,transform .2s ease;}
body.pg-home #record .hx-reel__snd svg{width:22px;height:22px;fill:currentColor;}
body.pg-home #record .hx-reel__snd .hx-reel__snd-on{display:none;}
body.pg-home #record .hx-reel__snd[aria-pressed="true"] .hx-reel__snd-on{display:inline;}
body.pg-home #record .hx-reel__snd[aria-pressed="true"] .hx-reel__snd-off{display:none;}
body.pg-home #record .hx-reel__snd:hover,body.pg-home #record .hx-reel__snd:focus-visible{background:#E23A46;}
body.pg-home #record .hx-reel__snd:focus-visible{outline:2px solid #F4F7FB;outline-offset:2px;}
body.pg-home #record .hx-reel__on-ig{position:absolute;left:.8rem;bottom:.8rem;z-index:2;padding:.55rem .9rem;border-radius:999px;background:rgb(12 24 51 / .72);
  color:#F4F7FB;font:600 .85rem/1 var(--body);text-decoration:none;transition:background-color .2s ease;}
body.pg-home #record .hx-reel__on-ig:hover,body.pg-home #record .hx-reel__on-ig:focus-visible{background:#E23A46;}
@media(max-width:900px){body.pg-home #record .hx-reel--video{aspect-ratio:9 / 16;height:auto;}}
/* REEL EMBED:END */
/* ALTERNATION 1007:BEGIN (Dev 2026-10-07: "make alternating sections light and dark so that the paper cut design is smooth").
   #lead and #work turn LIGHT (sec-paper k4-sec--light in the markup); the page now runs photo, light, navy, light, split, light,
   split, split, light, split, crimson, footer. The work stage keeps its navy grade: it is one navy torn paper sheet (class on-dark,
   its own navy fill, papered by fable.js) standing on the light ground beside the six tabs, which become white torn paper. */
body.pg-home .hx-lead{background:#F4F7FB;}
body.pg-home .hx-lead__deck{color:#0B1B33;}
body.pg-home .hx-work{background:#F4F7FB;}
/* the six tabs on light: navy ink, the active and hover marks in crimson #C9303D (coral is 2.6:1 on light) */
body.pg-home .hx-work .hx-tab{color:rgb(11 27 51 / .72);border-color:rgb(11 27 51 / .14);}
body.pg-home .hx-work .hx-tab__n{color:rgb(11 27 51 / .55);}
body.pg-home .hx-work .hx-tab.is-active{color:#0B1B33;border-color:#C9303D;}
body.pg-home .hx-work .hx-tab.is-active .hx-tab__n,body.pg-home .hx-work .hx-tab__go{color:#C9303D;}
@media(hover:hover) and (pointer:fine){body.pg-home .hx-work .hx-tab:hover{color:#0B1B33;}}
body.pg-home .hx-work .hx-tab:focus-visible{outline:2px solid #9C1B27;outline-offset:3px;}
/* the stage: a navy sheet with room round the art */
body.pg-home .hx-stage{background:#0C1833;color:#F4F7FB;padding:clamp(1.2rem,2.4vw,2.4rem) clamp(1.2rem,2.6vw,2.6rem) clamp(1.2rem,2vw,2rem);}
body.pg-home .hx-stage .hx-pane__cap{padding-top:clamp(.6rem,1.2vw,1rem);}
/* the six white sheets fill the height of the navy sheet beside them, with room between their torn edges */
@media(min-width:901px){body.pg-home .hx-work__col .hx-tabs{align-self:stretch;gap:clamp(.7rem,1vw,1rem);}}
@media(max-width:900px){body.pg-home .hx-work__col .hx-tabs{gap:.75rem;}}
/* ALTERNATION 1007:END */
/* PASS1 1007:BEGIN (100x pass 1 on the light lead, the stories to media join and the record drawings)
   #lead: the three promises of the statement (understandable, accessible, actionable) sit on strips of torn crimson tint paper, the
   kit's paper with its white fibre rim. Each strip is laid in, left to right, at the moment the reading light reaches its word, so the
   sentence is read and then marked. No JS, no IntersectionObserver or reduced motion: the strips are simply there. */
body.pg-home .hx-tape{position:relative;z-index:0;background:none;color:inherit;white-space:nowrap;padding:0 .06em;}
body.pg-home .hx-tape::before{content:'';position:absolute;z-index:-1;left:-.16em;right:-.2em;top:.1em;bottom:-.04em;pointer-events:none;
  background:var(--hx-tape) center/100% 100% no-repeat;filter:drop-shadow(0 1.5px 2px rgb(22 38 76 / .26));
  clip-path:inset(-30% -8% -40% -8%);transform:rotate(var(--hx-tape-r,-.8deg));}
body.pg-home .hx-tape--1{--hx-tape-r:-1.1deg;--hx-tape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 48' preserveAspectRatio='none'%3E%3Cpath d='M5.6 7.5L12.7 7.4L16.4 7.6L20.1 6.9L23.8 7.3L27.5 6.8L31.2 7.3L34.9 6.0L38.6 7.2L42.3 6.4L46.0 5.5L49.7 5.9L53.4 6.0L57.1 6.3L60.8 6.3L64.5 5.9L68.2 5.9L71.9 5.6L75.6 6.6L79.3 6.0L83.0 5.5L86.7 5.7L90.4 6.3L94.1 6.1L97.8 6.7L101.5 5.7L105.2 6.2L108.9 6.7L112.6 6.8L116.3 6.3L120.0 6.7L123.7 7.3L127.4 6.8L131.1 6.6L134.8 7.2L138.5 7.5L142.2 7.7L145.9 7.8L149.6 8.0L153.3 7.7L157.0 8.3L160.7 8.8L164.4 8.3L168.1 8.7L171.8 9.2L175.5 8.4L179.2 8.2L182.9 8.2L186.6 8.4L190.3 8.6L194.0 8.6L197.7 8.7L201.4 9.0L205.1 8.3L208.8 9.0L212.5 7.9L216.2 8.6L219.9 8.7L223.6 8.0L227.3 7.7L233.8 8.7L238.5 11.3L236.3 15.3L237.1 19.1L235.0 27.5L236.3 31.7L235.8 36.0L236.7 38.8L233.6 43.9L227.3 43.9L223.6 44.4L219.9 46.5L216.2 44.8L212.5 46.3L208.8 43.8L205.1 45.6L201.4 43.5L197.7 45.1L194.0 44.8L190.3 43.9L186.6 43.2L182.9 42.0L179.2 43.1L175.5 43.6L171.8 42.0L168.1 40.5L164.4 43.1L160.7 41.2L157.0 40.7L153.3 42.7L149.6 40.0L145.9 40.2L142.2 40.8L138.5 41.5L134.8 41.4L131.1 43.5L127.4 41.7L123.7 41.7L120.0 44.7L116.3 41.6L112.6 43.5L108.9 42.1L105.2 45.4L101.5 46.1L97.8 43.2L94.1 45.3L90.4 46.5L86.7 46.0L83.0 44.5L79.3 45.0L75.6 46.9L71.9 46.3L68.2 44.4L64.5 44.6L60.8 44.6L57.1 44.7L53.4 43.8L49.7 43.1L46.0 44.2L42.3 42.0L38.6 44.1L34.9 45.3L31.2 42.7L27.5 41.2L23.8 41.3L20.1 42.4L16.4 40.7L12.7 41.6L6.5 42.2L9.2 39.5L2.6 35.7L6.1 32.1L-0.8 27.6L4.4 19.4L3.1 15.0L4.3 11.5Z' fill='%23FDFDFB'/%3E%3Cpath d='M9.0 8.8L12.7 8.6L16.4 8.6L20.1 8.4L23.8 8.5L27.5 7.9L31.2 8.3L34.9 7.4L38.6 8.3L42.3 7.8L46.0 7.0L49.7 7.0L53.4 7.1L57.1 7.3L60.8 7.7L64.5 7.4L68.2 7.4L71.9 7.0L75.6 7.7L79.3 7.4L83.0 6.9L86.7 6.8L90.4 7.2L94.1 7.3L97.8 7.8L101.5 7.2L105.2 7.6L108.9 7.6L112.6 8.0L116.3 7.7L120.0 7.9L123.7 8.5L127.4 8.1L131.1 8.0L134.8 8.2L138.5 8.7L142.2 9.1L145.9 9.1L149.6 9.0L153.3 9.0L157.0 9.6L160.7 9.8L164.4 9.4L168.1 9.7L171.8 10.2L175.5 9.4L179.2 9.6L182.9 9.3L186.6 9.9L190.3 9.9L194.0 9.7L197.7 9.8L201.4 10.1L205.1 9.3L208.8 10.0L212.5 9.2L216.2 10.0L219.9 9.9L223.6 9.4L227.3 8.8L231.0 9.6L236.3 12.4L233.1 16.4L233.7 20.3L232.4 24.2L233.3 28.2L233.3 32.1L233.6 36.1L231.0 40.8L227.3 40.3L223.6 41.5L219.9 42.9L216.2 40.9L212.5 42.4L208.8 40.9L205.1 42.7L201.4 40.3L197.7 41.3L194.0 42.2L190.3 40.2L186.6 39.5L182.9 38.8L179.2 39.1L175.5 40.2L171.8 38.3L168.1 37.7L164.4 39.8L160.7 37.7L157.0 37.8L153.3 39.7L149.6 37.4L145.9 37.1L142.2 37.1L138.5 37.4L134.8 38.6L131.1 39.5L127.4 37.6L123.7 37.9L120.0 40.7L116.3 38.3L112.6 40.7L108.9 38.9L105.2 41.9L101.5 41.9L97.8 39.5L94.1 42.6L90.4 42.4L86.7 42.4L83.0 41.0L79.3 41.2L75.6 42.8L71.9 43.3L68.2 41.6L64.5 41.6L60.8 41.5L57.1 41.1L53.4 39.7L49.7 39.9L46.0 40.7L42.3 39.3L38.6 40.5L34.9 41.2L31.2 40.0L27.5 38.0L23.8 37.7L20.1 39.1L16.4 37.6L12.7 38.4L9.0 39.5L11.7 36.1L5.7 32.1L9.4 28.2L2.2 24.2L6.9 20.3L5.6 16.4L7.4 12.4Z' fill='%23F7CDD2'/%3E%3Ccircle cx='182.9' cy='34.7' r='.7' fill='%23fff' fill-opacity='0.17'/%3E%3Ccircle cx='222.3' cy='14.4' r='.7' fill='%239C1B27' fill-opacity='0.15'/%3E%3Ccircle cx='204.8' cy='35.5' r='.7' fill='%23fff' fill-opacity='0.21'/%3E%3Ccircle cx='181.6' cy='19.7' r='.7' fill='%239C1B27' fill-opacity='0.18'/%3E%3Ccircle cx='31.5' cy='22.6' r='.7' fill='%23fff' fill-opacity='0.24'/%3E%3Ccircle cx='117.3' cy='12.7' r='.7' fill='%239C1B27' fill-opacity='0.19'/%3E%3Ccircle cx='21.4' cy='24.8' r='.7' fill='%239C1B27' fill-opacity='0.20'/%3E%3Ccircle cx='226.0' cy='33.6' r='.7' fill='%23fff' fill-opacity='0.27'/%3E%3Ccircle cx='118.4' cy='34.8' r='.7' fill='%239C1B27' fill-opacity='0.24'/%3E%3Ccircle cx='107.2' cy='25.4' r='.7' fill='%239C1B27' fill-opacity='0.20'/%3E%3Ccircle cx='192.8' cy='25.4' r='.7' fill='%23fff' fill-opacity='0.23'/%3E%3Ccircle cx='216.4' cy='32.9' r='.7' fill='%239C1B27' fill-opacity='0.17'/%3E%3Ccircle cx='43.9' cy='25.1' r='.7' fill='%23fff' fill-opacity='0.21'/%3E%3Ccircle cx='56.6' cy='24.9' r='.7' fill='%239C1B27' fill-opacity='0.22'/%3E%3C/svg%3E");}
body.pg-home .hx-tape--2{--hx-tape-r:.7deg;--hx-tape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 48' preserveAspectRatio='none'%3E%3Cpath d='M6.3 7.0L12.7 6.6L16.4 6.9L20.1 6.9L23.8 7.4L27.5 7.5L31.2 7.0L34.9 7.3L38.6 7.8L42.3 7.2L46.0 7.9L49.7 8.5L53.4 8.0L57.1 8.2L60.8 8.7L64.5 8.0L68.2 8.8L71.9 8.6L75.6 8.3L79.3 8.1L83.0 8.4L86.7 8.3L90.4 8.5L94.1 8.8L97.8 8.7L101.5 8.5L105.2 8.5L108.9 7.9L112.6 8.3L116.3 7.8L120.0 8.5L123.7 8.3L127.4 8.7L131.1 7.5L134.8 8.2L138.5 7.8L142.2 8.1L145.9 8.0L149.6 6.8L153.3 6.8L157.0 6.2L160.7 6.4L164.4 6.8L168.1 6.2L171.8 5.8L175.5 6.6L179.2 6.2L182.9 6.2L186.6 6.4L190.3 6.4L194.0 5.7L197.7 6.4L201.4 5.9L205.1 6.0L208.8 6.1L212.5 6.2L216.2 6.0L219.9 6.3L223.6 5.9L227.3 5.6L234.0 6.2L237.9 11.0L233.4 15.0L234.5 19.4L235.7 27.1L239.8 31.8L234.8 35.0L237.9 39.8L233.9 44.0L227.3 43.8L223.6 45.1L219.9 44.2L216.2 42.2L212.5 42.3L208.8 42.4L205.1 43.0L201.4 41.4L197.7 42.5L194.0 43.0L190.3 42.1L186.6 43.0L182.9 41.9L179.2 43.5L175.5 41.3L171.8 41.4L168.1 42.0L164.4 41.4L160.7 44.2L157.0 41.9L153.3 41.7L149.6 44.4L145.9 43.3L142.2 43.8L138.5 44.3L134.8 45.3L131.1 42.7L127.4 42.7L123.7 44.0L120.0 44.7L116.3 44.7L112.6 46.2L108.9 45.8L105.2 44.2L101.5 45.3L97.8 44.6L94.1 44.6L90.4 44.3L86.7 43.8L83.0 42.4L79.3 44.5L75.6 42.1L71.9 43.4L68.2 43.9L64.5 43.5L60.8 41.7L57.1 41.9L53.4 43.5L49.7 43.6L46.0 41.8L42.3 42.1L38.6 41.8L34.9 42.3L31.2 41.8L27.5 41.0L23.8 41.0L20.1 41.0L16.4 42.0L12.7 42.6L6.6 44.1L6.1 40.1L0.6 34.8L3.9 32.0L-0.3 26.9L5.6 19.2L3.6 15.3L6.5 11.4Z' fill='%23FDFDFB'/%3E%3Cpath d='M9.0 8.4L12.7 7.5L16.4 8.0L20.1 7.8L23.8 8.3L27.5 8.5L31.2 8.2L34.9 8.7L38.6 9.2L42.3 8.5L46.0 9.2L49.7 9.4L53.4 9.2L57.1 9.3L60.8 9.7L64.5 9.1L68.2 9.9L71.9 9.7L75.6 9.4L79.3 9.6L83.0 9.5L86.7 9.4L90.4 9.5L94.1 10.1L97.8 9.6L101.5 9.5L105.2 9.7L108.9 9.1L112.6 9.7L116.3 9.1L120.0 9.7L123.7 9.6L127.4 9.6L131.1 8.8L134.8 9.1L138.5 9.2L142.2 9.0L145.9 8.9L149.6 8.1L153.3 8.0L157.0 7.6L160.7 7.6L164.4 8.3L168.1 7.3L171.8 7.2L175.5 7.9L179.2 7.3L182.9 7.3L186.6 7.7L190.3 7.7L194.0 7.1L197.7 7.6L201.4 6.9L205.1 7.1L208.8 7.3L212.5 7.6L216.2 7.4L219.9 7.4L223.6 7.1L227.3 7.0L231.0 7.6L235.4 12.4L230.7 16.4L231.8 20.3L232.8 24.2L237.4 28.2L232.2 32.1L234.7 36.1L231.0 40.3L227.3 41.0L223.6 41.9L219.9 41.3L216.2 39.5L212.5 38.5L208.8 39.6L205.1 40.0L201.4 38.3L197.7 39.1L194.0 39.1L190.3 38.9L186.6 39.2L182.9 37.7L179.2 39.4L175.5 37.5L171.8 38.5L168.1 38.5L164.4 37.8L160.7 40.1L157.0 39.0L153.3 38.4L149.6 41.0L145.9 40.6L142.2 40.3L138.5 41.4L134.8 41.3L131.1 39.5L127.4 39.9L123.7 40.4L120.0 41.8L116.3 41.8L112.6 42.8L108.9 42.7L105.2 41.1L101.5 42.6L97.8 41.0L94.1 41.0L90.4 41.5L86.7 39.7L83.0 39.7L79.3 41.5L75.6 39.3L71.9 40.4L68.2 40.0L64.5 39.3L60.8 38.6L57.1 39.1L53.4 39.5L49.7 39.9L46.0 38.8L42.3 39.1L38.6 37.8L34.9 38.2L31.2 38.9L27.5 36.9L23.8 37.6L20.1 37.7L16.4 38.9L12.7 39.3L9.0 40.5L8.5 36.1L2.9 32.1L7.1 28.2L2.7 24.2L8.2 20.3L6.4 16.4L8.8 12.4Z' fill='%23F7CDD2'/%3E%3Ccircle cx='55.8' cy='20.3' r='.7' fill='%23fff' fill-opacity='0.16'/%3E%3Ccircle cx='74.3' cy='23.8' r='.7' fill='%23fff' fill-opacity='0.17'/%3E%3Ccircle cx='170.7' cy='17.3' r='.7' fill='%239C1B27' fill-opacity='0.13'/%3E%3Ccircle cx='179.5' cy='15.4' r='.7' fill='%239C1B27' fill-opacity='0.23'/%3E%3Ccircle cx='79.8' cy='18.0' r='.7' fill='%239C1B27' fill-opacity='0.25'/%3E%3Ccircle cx='217.9' cy='12.8' r='.7' fill='%23fff' fill-opacity='0.27'/%3E%3Ccircle cx='148.0' cy='24.3' r='.7' fill='%23fff' fill-opacity='0.21'/%3E%3Ccircle cx='103.4' cy='27.2' r='.7' fill='%239C1B27' fill-opacity='0.26'/%3E%3Ccircle cx='55.9' cy='29.6' r='.7' fill='%239C1B27' fill-opacity='0.23'/%3E%3Ccircle cx='41.9' cy='32.0' r='.7' fill='%23fff' fill-opacity='0.13'/%3E%3Ccircle cx='154.5' cy='15.4' r='.7' fill='%239C1B27' fill-opacity='0.22'/%3E%3Ccircle cx='95.9' cy='13.1' r='.7' fill='%23fff' fill-opacity='0.25'/%3E%3Ccircle cx='148.9' cy='15.3' r='.7' fill='%239C1B27' fill-opacity='0.18'/%3E%3Ccircle cx='137.8' cy='24.3' r='.7' fill='%23fff' fill-opacity='0.12'/%3E%3C/svg%3E");}
body.pg-home .hx-tape--3{--hx-tape-r:-.5deg;--hx-tape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 48' preserveAspectRatio='none'%3E%3Cpath d='M6.4 5.6L12.7 6.2L16.4 5.8L20.1 6.0L23.8 5.4L27.5 6.4L31.2 5.7L34.9 5.7L38.6 6.8L42.3 5.4L46.0 6.0L49.7 6.6L53.4 6.6L57.1 6.6L60.8 6.4L64.5 6.9L68.2 6.8L71.9 6.5L75.6 6.6L79.3 7.0L83.0 7.4L86.7 7.1L90.4 7.8L94.1 8.0L97.8 7.5L101.5 8.2L105.2 8.5L108.9 8.4L112.6 7.9L116.3 7.6L120.0 8.1L123.7 9.3L127.4 8.4L131.1 8.3L134.8 8.5L138.5 8.6L142.2 8.5L145.9 8.6L149.6 9.0L153.3 8.5L157.0 7.9L160.7 8.2L164.4 7.8L168.1 7.8L171.8 8.2L175.5 8.5L179.2 7.9L182.9 7.1L186.6 8.1L190.3 7.9L194.0 7.1L197.7 7.3L201.4 7.3L205.1 6.6L208.8 7.3L212.5 7.2L216.2 7.4L219.9 6.6L223.6 6.3L227.3 7.1L233.4 6.2L238.4 11.4L232.0 15.4L239.0 19.1L233.8 27.7L239.1 32.2L234.6 34.9L240.1 40.0L233.5 39.8L227.3 41.9L223.6 42.6L219.9 41.1L216.2 43.4L212.5 43.7L208.8 43.6L205.1 44.5L201.4 43.1L197.7 42.6L194.0 43.8L190.3 42.8L186.6 44.2L182.9 45.8L179.2 46.6L175.5 44.9L171.8 46.8L168.1 46.5L164.4 46.3L160.7 45.3L157.0 45.8L153.3 45.4L149.6 44.0L145.9 43.9L142.2 45.1L138.5 43.5L134.8 43.8L131.1 43.3L127.4 43.0L123.7 42.0L120.0 41.4L116.3 43.4L112.6 43.0L108.9 42.0L105.2 40.7L101.5 40.2L97.8 42.0L94.1 41.9L90.4 41.9L86.7 42.4L83.0 43.3L79.3 43.0L75.6 41.3L71.9 42.7L68.2 44.1L64.5 40.8L60.8 42.7L57.1 41.6L53.4 44.5L49.7 44.7L46.0 44.4L42.3 43.7L38.6 45.8L34.9 45.6L31.2 46.4L27.5 44.9L23.8 45.9L20.1 45.3L16.4 45.5L12.7 46.5L5.6 44.8L3.9 38.7L2.9 35.4L4.6 31.7L-1.0 27.5L8.8 19.4L-0.2 15.3L3.7 11.5Z' fill='%23FDFDFB'/%3E%3Cpath d='M9.0 6.8L12.7 7.6L16.4 7.2L20.1 7.1L23.8 6.8L27.5 7.3L31.2 7.1L34.9 7.2L38.6 7.8L42.3 6.9L46.0 7.2L49.7 7.8L53.4 7.7L57.1 7.8L60.8 7.9L64.5 7.8L68.2 8.2L71.9 7.7L75.6 7.8L79.3 8.1L83.0 8.8L86.7 8.4L90.4 9.0L94.1 9.4L97.8 8.8L101.5 9.2L105.2 9.4L108.9 9.3L112.6 8.9L116.3 9.1L120.0 9.5L123.7 10.2L127.4 9.4L131.1 9.5L134.8 9.8L138.5 9.8L142.2 9.5L145.9 9.7L149.6 10.2L153.3 9.5L157.0 9.2L160.7 9.5L164.4 9.2L168.1 8.9L171.8 9.6L175.5 9.4L179.2 9.2L182.9 8.5L186.6 9.1L190.3 9.3L194.0 8.1L197.7 8.5L201.4 8.5L205.1 8.0L208.8 8.2L212.5 8.4L216.2 8.3L219.9 7.7L223.6 7.6L227.3 8.1L231.0 7.6L236.0 12.4L228.7 16.4L236.5 20.3L231.6 24.2L236.5 28.2L232.3 32.1L237.8 36.1L231.0 37.0L227.3 38.8L223.6 38.9L219.9 37.4L216.2 40.0L212.5 40.2L208.8 40.8L205.1 40.5L201.4 39.8L197.7 38.9L194.0 39.9L190.3 40.2L186.6 40.2L182.9 42.3L179.2 42.7L175.5 41.2L171.8 42.9L168.1 42.7L164.4 43.2L160.7 41.2L157.0 42.4L153.3 41.8L149.6 39.9L145.9 41.3L142.2 41.6L138.5 40.1L134.8 40.7L131.1 40.3L127.4 39.9L123.7 38.3L120.0 37.9L116.3 39.5L112.6 39.3L108.9 38.8L105.2 37.1L101.5 37.5L97.8 38.9L94.1 38.6L90.4 38.2L86.7 38.9L83.0 39.6L79.3 39.6L75.6 38.2L71.9 39.1L68.2 40.4L64.5 37.9L60.8 38.8L57.1 38.6L53.4 40.7L49.7 41.5L46.0 40.4L42.3 39.8L38.6 42.3L34.9 42.8L31.2 42.3L27.5 41.1L23.8 42.3L20.1 41.9L16.4 42.2L12.7 42.7L9.0 41.9L6.9 36.1L6.1 32.1L6.9 28.2L2.4 24.2L11.8 20.3L2.1 16.4L6.0 12.4Z' fill='%23F7CDD2'/%3E%3Ccircle cx='47.4' cy='14.9' r='.7' fill='%239C1B27' fill-opacity='0.21'/%3E%3Ccircle cx='119.2' cy='28.1' r='.7' fill='%239C1B27' fill-opacity='0.18'/%3E%3Ccircle cx='53.3' cy='35.0' r='.7' fill='%239C1B27' fill-opacity='0.27'/%3E%3Ccircle cx='169.1' cy='13.6' r='.7' fill='%23fff' fill-opacity='0.24'/%3E%3Ccircle cx='39.3' cy='33.4' r='.7' fill='%239C1B27' fill-opacity='0.17'/%3E%3Ccircle cx='81.1' cy='26.4' r='.7' fill='%23fff' fill-opacity='0.15'/%3E%3Ccircle cx='219.7' cy='25.8' r='.7' fill='%23fff' fill-opacity='0.13'/%3E%3Ccircle cx='65.8' cy='13.3' r='.7' fill='%23fff' fill-opacity='0.25'/%3E%3Ccircle cx='71.4' cy='31.6' r='.7' fill='%23fff' fill-opacity='0.25'/%3E%3Ccircle cx='134.1' cy='27.9' r='.7' fill='%23fff' fill-opacity='0.19'/%3E%3Ccircle cx='224.5' cy='20.2' r='.7' fill='%23fff' fill-opacity='0.24'/%3E%3Ccircle cx='219.8' cy='23.3' r='.7' fill='%23fff' fill-opacity='0.19'/%3E%3Ccircle cx='38.7' cy='16.0' r='.7' fill='%239C1B27' fill-opacity='0.19'/%3E%3Ccircle cx='109.9' cy='22.9' r='.7' fill='%239C1B27' fill-opacity='0.20'/%3E%3C/svg%3E");}
@media (prefers-reduced-motion:no-preference){
  body.pg-home [data-readlight].rl-armed .hx-tape::before{clip-path:inset(-30% 108% -40% -8%);transition:clip-path .75s cubic-bezier(.2,.7,.2,1) .12s;}
  body.pg-home [data-readlight].rl-armed .hx-tape.is-lit::before{clip-path:inset(-30% -8% -40% -8%);}
  /* a pointer on a marked word lays its strip down again, once */
  @media(hover:hover) and (pointer:fine){body.pg-home .hx-tape:hover::before{animation:hxTape .6s cubic-bezier(.2,.7,.2,1);}}
}
@keyframes hxTape{from{clip-path:inset(-30% 108% -40% -8%);}to{clip-path:inset(-30% -8% -40% -8%);}}
/* the visually hidden heading of #stories sizes to its words (the shared 1px box made it report an overflow in the sweeps) */
body.pg-home #stories h2.sr-only{width:auto;height:auto;clip:auto;clip-path:inset(50%);}
/* the stories photo starts at 50vw and the media photo ends at 46vw; the torn half edges between them are laid out on a 4px grid,
   so the media photo is held to a width on that grid (otherwise a hair of photo shows up past the end of the tear) */
@supports (width:round(down,10px,4px)){
  @media(min-width:901px){body.pg-home #media{--hs-w:round(down,46vw,4px) !important;}body.pg-home #stories{--hs-w:round(up,50vw,4px) !important;}}
}
/* PASS1 1007:END */
/* PASS2 1007:BEGIN (100x pass 2, fresh eyes) the four chapter sheets on navy had 12px between them, so their white fibre rims ran
   together into one busy double line; each sheet now has room to read as its own torn page */
body.pg-home .hx-chapters{gap:clamp(1rem,1.5vw,1.35rem);}
/* PASS2 1007:END */