/* Page background (r26h pencil, r5 ink pass 11 Nov), drawn by pencil-r26.js. Pat 9 Nov: hand drawn, moving, not so perfect, clean and subtle; no seam between sections. */

/* no seam between dark sections: the per-section glows that ran past a section edge and were cut off are gone (Areas, Results, footer);
   Research keeps only its centre glow behind the ring, which fades out well inside the section */
#areas.sec.dk::before,#results.sec.dk::before,footer.ft::before{background-image:none!important}
#research.sec.dk::before{background-image:radial-gradient(46% 40% at 50% 54%,rgba(143,203,176,.12),rgba(143,203,176,0) 70%)!important}

/* once the pencil sheet is in, the old ruled grid steps aside */
.pg-on::after{background-image:none!important}

.sec>.pg26.tseg,.ft>.pg26.tseg,.eml>.pg26.tseg{position:absolute;inset:0;left:0;top:0;right:0;bottom:0;width:auto;height:auto;z-index:0;overflow:hidden;pointer-events:none;transform:none}
/* Light ground, "clean ink" (r5 ink pass): two canvases per section drawn by pencil-r26.js in page coordinates.
   .pgw drifts a few px with scroll (one global offset, so sections still join); .g is the faint second pass and breathes on 9 s. */
.pg26 .pgw{position:absolute;left:0;top:0;width:100%;height:100%;will-change:transform}
.pg26 .pgc{position:absolute;display:block;pointer-events:none}
.pg26 .pgc.m{animation:pg26dm 13s ease-in-out infinite}
.pg26 .pgc.g{animation:pg26g 7s ease-in-out infinite,pg26dg 9s ease-in-out infinite}
@keyframes pg26g{0%,100%{opacity:.15}50%{opacity:1}}
/* the pen's two passes sway a little against each other (about 3 px), so the plan is never quite still */
@keyframes pg26dm{0%,100%{transform:translate3d(-1.6px,1.2px,0)}50%{transform:translate3d(1.8px,-1.4px,0)}}
@keyframes pg26dg{0%,100%{transform:translate3d(1.8px,-1.2px,0)}50%{transform:translate3d(-1.8px,1.6px,0)}}
.pg26.pg-off .pgc,html.pg-hid .pg26 .pgc{animation-play-state:paused}
.pg26.pg-still .pgc.g,.pg26.pg-still .pgc.m{animation:none;opacity:1;transform:none}
/* the feathered gap around words is a mask set by the script; no repeat, stretched to the section */
.pg26.tseg:not(.gl26){-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.eml{position:relative;isolation:isolate}
.eml>.pg26.tseg{z-index:-1}

/* one ink mark at a time (a hand loop, a tick, a dashed walk, tree loops): held a moment, then fades */
.pg26 .pgm{position:absolute;display:block;opacity:1;transition:opacity 1.6s ease}
.pg26 .pgm.out{opacity:0}

/* Dark green, glossy (Pat 9 Nov 2:31pm: "nice, shiny, glossy look… clean… natural and unique", not the paper's lines).
   A fixed layer clipped to each dark section: the light belongs to the screen, so it never breaks at a join. */
.pg26.gl26{-webkit-clip-path:inset(0);clip-path:inset(0)}
.gl26 .gl-f{position:fixed;inset:0;display:block;pointer-events:none;
  background:linear-gradient(180deg,rgba(143,203,176,.055) 0%,rgba(143,203,176,0) 45%,rgba(0,0,0,.12) 100%)}
.gl26.gl-off .gl-f{visibility:hidden}
.gl26 .gl-f i{position:absolute;display:block;opacity:1}
.gl26 .gl-bloom{inset:-20%;
  background:radial-gradient(42% 34% at 28% 22%,rgba(160,215,190,.23),rgba(160,215,190,0) 72%),
             radial-gradient(38% 30% at 80% 82%,rgba(143,203,176,.08),rgba(143,203,176,0) 72%);
  transform:translate3d(.5%,.5%,0) scale(1.04)}
/* perf3 (12 Nov): the bloom no longer drifts. It was a 140%-of-screen layer re-composited every frame for ever (idle frames went from ~17 ms to ~50 ms with the gloss on).
   It now rests at the middle of its old drift (translate .5%, scale 1.04), painted once. */
/* r27 (item 34): the travelling shine is removed on every dark section (Sohrab: "looks like Windows 98... forced"). Still gloss, bloom, spot and grain stay. */
.gl26 .gl-sheen{display:none!important;animation:none!important}
.gl26 .gl-spot{left:0;top:0;width:620px;height:620px;
  background:radial-gradient(closest-side,rgba(175,230,205,.09),rgba(175,230,205,0));
  transform:translate3d(calc(var(--glx,30vw) - 310px),calc(var(--gly,25vh) - 310px),0)}
/* perf3: the grain was an feTurbulence svg tile at 5% with mix-blend-mode:overlay over the whole screen (a blend over a full-screen layer, every frame). pencil-r26.js now bakes the same noise tile once
   (canvas -> data URL, set as this rule's background) with the overlay worked out into plain alpha (overlay of white on this dark green is a lift of under one 8-bit level, so a plain faint white tile is the same pixels). */
.gl26 .gl-f .gl-grain{inset:0;background-size:180px 180px}
@media (hover:none){.gl26 .gl-spot{display:none}}

@media (prefers-reduced-motion:reduce){
  .gl26 .gl-bloom,.gl26 .gl-sheen{animation:none}
  .gl26 .gl-sheen{display:none}
  .pg26 .pgc.g,.pg26 .pgc.m{animation:none;opacity:1;transform:none}
}

/* 11 Nov: the light-section ink sheet sits UNDER the content (it crossed the team photos and cards).
   The section becomes its own stacking context so z-index:-1 stays above the section's paper but below every child. */
.sec:has(>.pg26.tseg:not(.gl26)),.ft:has(>.pg26.tseg:not(.gl26)){isolation:isolate}
.sec>.pg26.tseg:not(.gl26),.ft>.pg26.tseg:not(.gl26){z-index:-1}
/* team photo cards were a 7% green tint you could see the ink through: same tint, now solid on the paper */
#team .pp img{background:linear-gradient(rgba(17,65,54,.07),rgba(17,65,54,.07)),#F6F4EE}

/* crit fix (11 Nov): a section reached by a nav link or anchor stops below the fixed nav, so its label ("RESEARCH", "LOCATION"...) is not hidden under it.
   Beats the older section[id] and #research rules (r18, r27). 96 px laptop, 72 px phone (the layout's phone breakpoint, 860 px). */
html section[id]:not(#x),html footer[id]:not(#x){scroll-margin-top:96px}
@media (max-width:860px){html section[id]:not(#x),html footer[id]:not(#x){scroll-margin-top:72px}}