/* Folium grid hero: a field of pages, plates and objects; one tile at a time does something.
   Pages zoom to a highlighted line, plates are looked at closely, objects turn on a turntable.
   DOM only, no WebGL. .hgrid.dark for the night ground; the light ground is the site's cool white. */
.hgrid{position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-top:-1px;height:calc(100svh - 62px);min-height:520px;overflow:hidden;isolation:isolate;
  --cw:132px;--rh:184px;--gap:14px;--ground:#ffffff;--ground-2:#f1f2f5;--tile:#f4f5f7;--edge:rgba(20,25,60,.12);
  background:linear-gradient(180deg,var(--ground) 0%,var(--ground-2) 100%)}
.hgrid.dark{--ground:#1a1e30;--ground-2:var(--fo-night-brand,#0f1119);--tile:#1b1d28;--edge:rgba(255,255,255,.1);
  background:radial-gradient(1200px 700px at 62% 45%,#1c2033 0%,var(--fo-night-brand,#0f1119) 55%,#0a0b12 100%)}
.hg-field{position:absolute;inset:-6% -4% -6% -2%;z-index:1;will-change:transform}
.hg-grid{display:grid;grid-template-columns:repeat(var(--cols),var(--cw));grid-auto-rows:var(--rh);gap:var(--gap);animation:hgDrift 90s linear infinite alternate}
@keyframes hgDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-60px,-40px,0)}}
.hg-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.9) 24%,rgba(255,255,255,.42) 40%,rgba(255,255,255,0) 54%)}
.hgrid.dark .hg-scrim{background:linear-gradient(90deg,rgba(15,17,25,.95) 0%,rgba(15,17,25,.82) 24%,rgba(15,17,25,.36) 40%,rgba(15,17,25,0) 54%)}
.hg-wrap{position:absolute;inset:0;z-index:5;max-width:1520px;margin:0 auto;padding:0 32px;pointer-events:none}
.hg-copy{position:absolute;z-index:5;left:32px;top:50%;transform:translateY(-50%);max-width:430px;pointer-events:none}
.hg-copy .rail-cta{position:static;margin-top:22px;bottom:auto;left:auto}
.hgrid.boxed .hg-scrim{display:none}
.hgrid.boxed .hg-copy{width:min(490px,calc(100% - 64px));max-width:none;padding:34px 38px 32px;background:var(--fo-surface,#f4f5f7) radial-gradient(620px 440px at 88% -6%,rgba(39,66,201,.1),transparent 62%);border:1px solid rgba(20,25,60,.12);box-shadow:0 30px 60px -40px rgba(20,25,60,.35)}
.hgrid.boxed.dark .hg-copy{background:var(--fo-night-2,#23242c) radial-gradient(620px 440px at 88% -6%,rgba(39,66,201,.28),transparent 62%);border-color:var(--fo-night-edge,#26272f);box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.hgrid.boxed .hg-copy p{max-width:none}
.hg-copy .chip{margin-bottom:6px}
.hg-copy h1{font-size:clamp(32px,3.6vw,50px);font-weight:700;letter-spacing:-.035em;line-height:1.04;margin:14px 0 14px}
.hg-copy p{font-size:17px;line-height:1.5;color:var(--muted);max-width:400px}
.hg-copy .rail-cta,.hg-copy a{pointer-events:auto}
.hgrid.home .hg-copy{max-width:490px}
.hgrid.home .hg-copy h1{font-size:clamp(34px,3.9vw,58px)}
.hgrid.home .hg-copy p{max-width:430px}
.hgrid.dark .hg-copy h1{color:#fff}
.hgrid.dark .hg-copy p{color:rgba(255,255,255,.7)}
.hgrid.dark .hg-copy .chip{background:rgba(255,255,255,.1);color:#c9d1f5}
.hg-copy>*{opacity:0;transform:translateY(18px);animation:hgUp .8s cubic-bezier(.2,.7,.2,1) both}
.hg-copy>:nth-child(1){animation-delay:.5s}.hg-copy>:nth-child(2){animation-delay:.65s}.hg-copy>:nth-child(3){animation-delay:.82s}.hg-copy>:nth-child(4){animation-delay:1s}
@keyframes hgUp{to{opacity:1;transform:none}}

/* tiles */
.hg-t{position:relative;overflow:hidden;background:var(--tile);border:1px solid var(--edge);
  opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.hg-t.in{opacity:1;transform:none}
/* the scans come off the atlases warm and hard; at tile size that reads as saturation.
   Faces are levelled here so the field sits behind the copy as paper, not as photographs. */
.hg-t .face,.hg-t.page .pg img{filter:saturate(.72) contrast(.94) brightness(1.02)}
.hgrid.dark .hg-t .face,.hgrid.dark .hg-t.page .pg img{filter:saturate(.66) contrast(.92)}
.hg-t::after{content:'';position:absolute;inset:0;z-index:2;background:var(--ground-2);opacity:0;transition:opacity .8s;pointer-events:none}
.hgrid.dark .hg-t::after{opacity:.26}
.hgrid.dark .hg-t.go::after{opacity:0}
.hg-t .face{position:absolute;inset:0;background:center/cover no-repeat}
.hg-t .lb{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:26px 9px 8px;font-size:10.5px;line-height:1.35;color:rgba(255,255,255,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(4px);transition:opacity .4s,transform .4s;pointer-events:none;background:linear-gradient(180deg,rgba(10,11,16,0),rgba(10,11,16,.8))}
.hg-t .lb b{color:#fff;font-weight:600}
.hg-t .lb i{font-style:normal;display:block;white-space:normal;color:rgba(255,255,255,.72)}
.hg-t.go .lb{opacity:1;transform:none;transition-delay:.7s}

/* a page: the tile closes in on one line, which is highlighted and named (place, printer, date, a quote) */
.hg-t.page .pg{position:absolute;top:0;height:100%;aspect-ratio:var(--ar,.786);left:50%;translate:-50% 0;transform-origin:50% 50%;transition:transform 2.8s cubic-bezier(.25,.4,.15,1)}
.hg-t.page .pg img{display:block;width:100%;height:100%;object-fit:cover}
.hg-t.page .mk{position:absolute;background:rgba(39,66,201,.14);border-bottom:1.5px solid var(--fo-brand,#2742c9);transform-origin:left center;transform:scaleX(0);transition:transform 1s cubic-bezier(.2,.7,.2,1) 1s}
.hg-t.page.go .mk.on{transform:scaleX(1)}

/* a plate: looked at closely, a detection frame draws around the figure */
.hg-t.plate .face{transition:transform 3.6s cubic-bezier(.2,.5,.2,1)}
.hg-t.plate .det{position:absolute;left:14%;top:12%;right:14%;bottom:20%;border:1.5px solid var(--fo-brand,#2742c9);box-shadow:0 0 0 1px rgba(255,255,255,.7);opacity:0;transform:scale(1.08);transition:opacity .5s,transform .7s cubic-bezier(.2,.7,.2,1)}
.hg-t.plate .det::before{content:'figure';position:absolute;left:-1.5px;bottom:100%;font-size:8px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:var(--fo-brand,#2742c9);padding:1px 6px}
.hg-t.plate.go .det{opacity:1;transform:none;transition-delay:1.1s,1.1s}

/* an object: a turntable of 60 frames on a sprite sheet; it turns once when it performs */
.hg-t.obj{background:radial-gradient(70% 55% at 50% 38%,#2a2d3c,#15161e 80%)}
.hgrid:not(.dark) .hg-t.obj{background:radial-gradient(70% 55% at 50% 38%,#ffffff,#e6e8ee 80%)}
.hg-t.obj .tt{position:absolute;left:0;right:0;top:50%;translate:0 -50%;aspect-ratio:1;background:url(#) 0 0/1000% auto no-repeat}
.hg-t.obj .shadow{position:absolute;left:18%;right:18%;top:78%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);filter:none}
.hgrid:not(.dark) .hg-t.obj .shadow{background:radial-gradient(closest-side,rgba(20,25,60,.28),transparent)}

/* a cover from the atlas: rests, never performs */
.hg-t.rest .face{background-size:var(--bs)}

@media (max-width:820px){
  .hgrid{--cw:96px;--rh:134px;--gap:10px}
  .hg-scrim{background:linear-gradient(0deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.9) 30%,rgba(255,255,255,0) 52%)}
  .hgrid.dark .hg-scrim{background:linear-gradient(0deg,rgba(15,17,25,.97) 0%,rgba(15,17,25,.9) 30%,rgba(15,17,25,0) 52%)}
  .hg-wrap{padding:0 20px}
  .hg-copy{left:20px;right:20px;top:auto;bottom:40px;transform:none;max-width:none}
  .hgrid.boxed .hg-copy{width:auto;padding:24px 22px}
  .hg-copy h1,.hgrid.home .hg-copy h1{font-size:clamp(26px,7vw,34px);margin:8px 0}
  .hg-copy p{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .hg-grid{animation:none}
  .hg-t,.hg-copy>*{opacity:1;transform:none;transition:none;animation:none}
}
/* buttons over the dark field */
.hgrid.dark .btn.ghost{color:#fff;border-color:rgba(255,255,255,.45);background:rgba(15,17,25,.55)}
.hgrid.dark .btn.ghost:hover{background:rgba(255,255,255,.12)}