/* LA.IO features hub. Direction A.
   Brand values from https://assets.la.io/colors/laio-tokens.json.
   Every asset path in this folder is relative: a root-absolute path dies in WordPress. */

@font-face{font-family:'Aktiv Grotesk';src:url('https://assets.la.io/fonts/AktivGrotesk_Rg.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Aktiv Grotesk';src:url('https://assets.la.io/fonts/AktivGrotesk_Bd.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  /* Color families */
  --blue-dark:#01233C;    --blue-easy:#63DCDE;    --blue-electric:#00B9FE;
  --green-dark:#172708;   --green-easy:#C8ED5D;   --green-electric:#96F90B;
  --orange-dark:#302511;  --orange-easy:#F1DC43;  --orange-electric:#F5C124;
  --magenta-dark:#101948; --magenta-easy:#E385FE; --magenta-electric:#F629CB;
  --gray-dark:#231F20;    --gray-mid:#929497;     --gray-light:#E3E6E7;

  /* LA.IO Presents pane and the footer. Black and grey for now: point these at the blue stops to switch. */
  --presents-bg:#000;
  --presents-bar:var(--gray-dark);
  --presents-accent:var(--gray-mid);
  --presents-easy:var(--gray-light);

  --sans:'Aktiv Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --bar:48px;
  --bar-hover:76px;
  --row:52px;
  --pad:clamp(32px,3.6vw,56px);
  --rule:rgba(255,255,255,.1);
  --shadow:0 2px 24px rgba(0,0,0,.6);
  --media-tint:.32;           /* film's dark stop laid over every frame and video */

  /* ============ MOTION: tune everything here ============ */
  --hover-dur:420ms;
  --hover-ease:cubic-bezier(.2,.8,.2,1);
  --open-dur:640ms;
  --open-ease:cubic-bezier(.3,0,.1,1);   /* moves on the click, long settle; no dwell */
  --close-fade:420ms;         /* the pane being replaced fades out while the new one opens */

  /* Intro: the universe fills frame by frame (its pace is in the block at the top of
     hub/universe.js), then the bars come in, then LA.IO Presents' copy fades in. */
  --intro-ease:cubic-bezier(.2,0,0,1);
  --intro-cap:6000ms;         /* the bars start by now even if the universe is still filling */
  --intro-land-cap:5000ms;    /* then wait for every screen still flying in or falling to land, at most this long ... */
  --intro-bars-after:200ms;   /* ... and hold the finished state this long so it registers before the bars */
  --intro-bars:720ms;         /* each bar rises from the bottom edge into its column ...     */
  --intro-bars-vary:.25;      /* ... its duration varied by up to this fraction either way  */
  --intro-bars-spread:640ms;  /* each bar starts at a random moment within this long         */
  --intro-rows-x:-100%;       /* rows under 900px: -100% grows in from the left edge, 100% from the right */
  --intro-bars-settle-at:.8;  /* a bar arrives filled with its accent; this far through its rise ...     */
  --intro-bars-settle:560ms;  /* ... the fill flows on up and out through the top of the bar, this long */
  --intro-content:900ms;      /* the Presents copy fades in ...                              */
  --intro-content-stagger:90ms; /* ... logo, then text, then foot ...                        */
  --intro-content-after:450ms; /* ... starting this long after the last bar lands            */
  --intro-reduced:400ms;      /* reduced motion: everything fades in, nothing moves          */

  --cycle:14s;                /* a film's dwell before the idle cycle moves on, and its foot-line drain */
  --cycle-presents:30s;       /* LA.IO Presents' dwell: room for one explode and reform of the universe */
  --cycle-pause:30s;          /* quiet time after any interaction      */
  --row-stagger:60ms;         /* mobile rows fade-in                   */

  /* Hub <-> feature push-out: the open pane takes the screen and the page becomes the
     feature. The feature side's timings live in _shared/hub-transition.js. */
  --push-ease:cubic-bezier(.2,0,0,1);
  --push-out:420ms;           /* hub -> feature: each bar leaves its edge            */
  --push-in:480ms;            /* feature -> hub: each bar returns                    */
  --push-stagger:40ms;        /* per bar: nearest the pane first out, outermost in   */
  --push-stagger-rows:30ms;   /* the same, rows under 900px                          */
  --push-text-out:200ms;      /* the pane's type lifts off                           */
  --push-text-at:200ms;       /* return: the type rises from here                    */
  --push-text-in:300ms;
  --push-video-ease:cubic-bezier(.4,0,.6,1); /* the loop freezes on click and dissolves to its poster across the whole push */
  --push-wait:800ms;          /* return: longest wait for the poster and fonts       */
  --push-reduced:200ms;       /* reduced motion: fades only                          */
  --cycle-resume:8s;          /* idle cycle starts again after a return              */
  /* ====================================================== */
}

*,*::before,*::after{box-sizing:border-box;border-radius:0}
html{background:#000;color:#fff;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--presents-bg);font-family:var(--sans);font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg{display:block}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent,var(--presents-easy));outline-offset:3px}

/* ---------------------------------------------------------------- stage */

.stage{
  --n:6;
  position:relative;z-index:1;display:flex;
  height:100vh;height:100dvh;
  overflow:hidden;background:transparent; /* the universe shows through LA.IO Presents */
  container-type:size;
  -webkit-tap-highlight-color:transparent; /* the open pane is one big link: no grey-blue flash on tap */
}

.pane{
  --dark:var(--blue-dark);--easy:var(--blue-easy);--electric:var(--blue-electric);--accent:var(--electric);
  position:relative;flex:0 0 var(--bar);min-width:0;min-height:0;
  overflow:hidden;background:var(--dark);
  border-left:1px solid var(--rule);
  transition:flex-basis var(--hover-dur) var(--hover-ease);
}
.pane.is-open{flex:0 1 calc(100% - var(--n) * var(--bar))}
/* The pane being replaced gives up the space while the new one grows, so a hovered bar
   opens from its hover width instead of snapping back to 48px first. */
.stage.is-moving .pane.was-open{flex-shrink:1}
.stage.is-moving .pane.is-open{flex-shrink:0}
/* Keeps the bars pinned right while LA.IO Presents is narrower than its slot (intro). */
.pane--presents + .pane{margin-left:auto}
.stage.is-moving .pane{transition-duration:var(--open-dur);transition-timing-function:var(--open-ease)}
.stage.is-instant .pane,.stage.is-instant .pane *{transition:none !important}

@media (hover:hover) and (min-width:900px){
  .stage:not(.is-moving):not(.is-pushing) .pane:not(.is-open):hover{flex-basis:var(--bar-hover)}
}
@media (min-width:900px){
  .stage:not(.is-moving):not(.is-pushing) .pane:not(.is-open):has(.bar:focus-visible){flex-basis:var(--bar-hover)}
}

.pane--presents{--dark:var(--presents-bg);--easy:var(--presents-easy);--accent:var(--presents-accent);border-left:0;background:transparent}

/* ------------------------------------------------------------------ bar */

.bar{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;
  /* The numbers share one line with the open pane's category and Close (centred at --pad + 8px). */
  padding-top:calc(var(--pad) + 2px);
  background:var(--dark);color:#fff;
  /* Closing: the bar face only returns once the outgoing pane has faded. */
  transition:opacity 240ms ease-out calc(var(--open-dur) - 260ms),visibility 0s;
}
.pane.is-open > .bar{opacity:0;visibility:hidden;transition:opacity 180ms linear,visibility 0s linear 180ms}
.bar:focus-visible{outline:2px solid var(--accent);outline-offset:-8px}

.bar__num{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.08em;line-height:1;color:var(--accent)}
.bar__title{
  margin:auto 0 28px;
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-weight:700;font-size:18px;line-height:1;letter-spacing:-.005em;white-space:nowrap;
}
.bar__foot{position:absolute;left:0;right:0;bottom:0;z-index:1;height:3px;background:var(--accent)}

/* Audit H2: the accent does more work. It fills the bar from its foot line on hover and focus
   (and carries the bar in during the intro); number and title turn to the dark stop over it. */
.pane--film > .bar::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--accent);
  transform:scaleY(0);transform-origin:50% 100%;transition:transform var(--hover-dur) var(--hover-ease)}
.pane--film > .bar > .bar__num,.pane--film > .bar > .bar__title{position:relative;z-index:2;transition:color var(--hover-dur) var(--hover-ease)}
.pane--film > .bar > .bar__foot{z-index:2}
@media (hover:hover) and (min-width:900px){
  .stage:not(.is-moving):not(.is-pushing) .pane--film:not(.is-open) > .bar:hover::after{transform:none}
  .stage:not(.is-moving):not(.is-pushing) .pane--film:not(.is-open) > .bar:hover > .bar__num,
  .stage:not(.is-moving):not(.is-pushing) .pane--film:not(.is-open) > .bar:hover > .bar__title{color:var(--dark)}
}
.pane--film > .bar:focus-visible::after{transform:none}
.pane--film > .bar:focus-visible > .bar__num,.pane--film > .bar:focus-visible > .bar__title{color:var(--dark)}

.bar--presents{background:var(--presents-bar)}
/* The mark, then PRESENTS, reading up the bar like the film titles. */
.bar__word{order:1;margin:auto 0 14px;writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--mono);font-weight:700;font-size:11px;line-height:1;letter-spacing:.12em;color:var(--presents-accent)}
.bar--presents .bar__mark{order:2;margin-top:0}
.bar__mark{position:relative;width:24px;height:99px;margin:auto 0 28px}
.bar__mark svg{position:absolute;left:50%;top:50%;width:99px;height:24px;transform:translate(-50%,-50%) rotate(-90deg);color:#fff}

/* ---------------------------------------------------------------- panel */

.panel{
  position:absolute;top:0;left:0;
  width:calc(100cqw - var(--n) * var(--bar));height:100%;
  opacity:0;visibility:hidden;
  transition:opacity var(--close-fade) ease-out,visibility 0s linear var(--open-dur);
}
.pane.is-open > .panel{opacity:1;visibility:visible;transition:opacity 0s,visibility 0s}
.panel:focus{outline:none}

/* Frame and film share one box. */
.panel__media{position:absolute;inset:0;overflow:hidden}
/* A slight wash of the film's own dark stop, so type holds over any frame of the loop. */
.panel__media::after{content:"";position:absolute;inset:0;background:var(--dark);opacity:var(--media-tint);pointer-events:none}
.panel__hero,.panel__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.panel__hero{opacity:0;transition:opacity 400ms linear}
.panel__hero.is-loaded{opacity:1}
.panel__video{opacity:0;transition:opacity 400ms ease-out}
.panel__video.is-playing{opacity:1}
/* Anywhere on an open film's pane goes to its feature. */
.pane.has-url.is-open .panel{cursor:pointer}

.panel__inner{
  position:absolute;inset:0;padding:var(--pad);
  display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;
}
/* Closed: children hold still while the panel fades, then reset out of sight. */
.panel__inner > *{opacity:0;transform:translateY(14px);
  transition:opacity 0s linear var(--open-dur),transform 0s linear var(--open-dur)}
.pane.is-open .panel__inner > *{opacity:1;transform:none;
  transition:opacity 420ms linear 300ms,transform 640ms var(--hover-ease) 300ms}
.pane.is-open .panel__inner > .panel__body{transition-delay:380ms}

.panel__meta{margin:0;font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);text-shadow:var(--shadow)}
.panel__close{position:absolute;top:calc(var(--pad) - 12px);right:calc(var(--pad) - 14px);padding:12px 14px;
  font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);text-shadow:var(--shadow)}
.panel__close:hover{color:#fff}

.panel__body{padding-bottom:8px}
.panel__eyebrow{margin:0 0 16px;font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);text-shadow:var(--shadow)}
.panel__title{margin:0;max-width:12ch;font-weight:700;font-size:clamp(64px,8.3vw,120px);
  line-height:.9;letter-spacing:-.03em;text-wrap:balance;text-shadow:var(--shadow)}
.panel__stand{margin:28px 0 0;max-width:560px;font-size:20px;line-height:1.45;text-shadow:var(--shadow)}

.cta{display:inline-flex;align-items:center;gap:12px;margin-top:36px;padding:16px 22px 15px;
  background:#fff;color:var(--dark);text-decoration:none;
  font-family:var(--mono);font-weight:700;font-size:12px;line-height:1;letter-spacing:.1em;text-transform:uppercase;
  transition:background-color 200ms ease-out}
.cta svg{width:11px;height:11px;flex:none}
.cta:hover{background:var(--easy)}
.cta[aria-disabled="true"]{background:rgba(255,255,255,.4);cursor:default}
.cta[aria-disabled="true"]:hover{background:rgba(255,255,255,.4)}

/* The open pane's foot line. Drains left to right in the family's Easy stop while the idle cycle counts. */
.pane__foot{position:absolute;left:0;right:0;bottom:0;z-index:1;height:5px;overflow:hidden;background:var(--accent)}
.pane__foot i{position:absolute;inset:0;background:var(--easy);transform:scaleX(0);transform-origin:100% 50%}
.pane__foot.is-counting{background:rgba(255,255,255,.14)}
.pane__foot.is-counting i{animation:drain var(--cycle) linear forwards}
.pane--presents > .pane__foot.is-counting i{animation-duration:var(--cycle-presents)}
@keyframes drain{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* ------------------------------------------------------- LA.IO Presents */

/* The universe is the background; the copy carries the same shadow type over footage does. */
.panel--presents{background:transparent}
.presents{align-items:stretch;text-shadow:var(--shadow)}
.presents__logo{display:block;align-self:flex-start;margin-top:-5px;color:#fff} /* centred on the bar numbers' line */
.presents__logo svg{height:26px;width:auto}
.presents__body{max-width:1100px}
.eyebrow{margin:0 0 30px;font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.12em;color:var(--presents-accent)}
/* Two set lines, sized from the Presents panel's width so "When Louisiana builds," always fits on one. */
.presents__line{display:block}
.presents__head{margin:0;font-weight:700;font-size:clamp(36px,calc((100cqw - var(--n) * var(--bar) - 2 * var(--pad)) / 12.5),84px);
  line-height:.94;letter-spacing:-.03em;text-wrap:balance}
.presents__sub{margin:34px 0 0;max-width:34em;font-size:20px;line-height:1.45}
.presents__foot{display:flex;justify-content:flex-end;gap:24px;padding-bottom:4px;
  font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.1em;color:var(--presents-easy)}

/* ---------------------------------------------------------------- intro */
/* hub.js runs it; universe.js fills the universe. Once per tab session (?intro forces it), at
   every width. Before and during the fill the page is black: LA.IO Presents at its resting width
   with its copy hidden, and each bar in its own column but pushed below the stage, which is where
   it rises from. */

.intro-pending .pane.is-open .presents > *,.intro-quiet .pane.is-open .presents > *{opacity:0}
.intro .pane.is-open .panel__inner > *{transition:none}
.intro-pending .pane--film,.intro-hold .pane--film{transform:translateY(100vh);transform:translateY(100cqh)}
.intro .stage{pointer-events:none}
.intro .pane{transition:none}
/* If hub.js never runs, the hub shows anyway. */
.intro-pending .pane--film,.intro-pending .pane.is-open .presents > *{animation:intro-failsafe 0s linear 8s forwards}
@keyframes intro-failsafe{to{transform:none;opacity:1}}

/* ------------------------------------------------------------- universe */
/* hub/universe.js. Frames from the films floating in a 3D world behind LA.IO Presents; film panes
   and bars paint over it. It is pinned to the stage at the top of the page rather than fixed, so
   it never shows through the footer on scroll. */

/* clip, not hidden: a hidden box is still a scroll container, and the frames overflowing it got it scrolled. */
.universe{position:absolute;left:0;top:0;z-index:0;width:100%;height:100vh;height:100dvh;overflow:hidden;overflow:clip;pointer-events:none}
.universe__view{position:absolute;inset:0;overflow:hidden;overflow:clip;perspective:1200px;perspective-origin:50% 50%}
/* The world: its origin is the screen centre; universe.js places each frame in it. */
.universe__cam{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
/* A slight curve on each frame's corners (Dylan's call over the brand's square default). */
.universe__frame{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;background:#000;
  border-radius:6px;backface-visibility:hidden}
.universe__frame img{width:100%;height:auto;max-width:none;user-select:none;-webkit-user-drag:none}
/* Dark at the edges and the foot; a scrim from the left holds the Presents copy over bright frames. */
.universe__vignette{position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,0) 70%,#000 100%),
    linear-gradient(to right,rgba(0,0,0,.62) 0%,rgba(0,0,0,.45) 42%,rgba(0,0,0,0) 70%),
    radial-gradient(ellipse at 50% 50%,rgba(0,0,0,0) 45%,#000 100%)}

/* -------------------------------------------------------------- push-out */
/* Hub <-> feature. hub.js animates the panes; these rules hold the states in between. */

.stage.is-pushing .pane,.stage.is-pushing .panel__hero{transition:none}
.stage.is-pushing .pane.is-open{flex-grow:1;border-color:transparent}
.stage.is-pushing .pane.is-open > .panel{width:100%;height:100%}
/* A leaving bar keeps its own width while its slot collapses, pinned to the pane side,
   so it slides off rather than squeezing. */
.stage.is-pushing .pane.is-before > .bar{left:auto;width:var(--bar)}
.stage.is-pushing .pane.is-after > .bar{right:auto;width:var(--bar)}
/* The film's dark wash comes off, so the pane lands on the bare poster. */
.stage.is-pushing .panel__media::after{transition:opacity var(--push-text-in) ease-out}
.pane.is-bare .panel__media::after{opacity:0}

/* Returning from a feature page: its poster covers the first paint until hub.js has built
   the full-bleed pane over it. The failsafe shows the page if hub.js never runs. */
/* The feature's own hero, framed as its page frames it: the pane dissolves into this as a
   push-out lands, and a return starts on it. hub.js sets the framing inline. */
.panel__handoff{position:absolute;inset:0;background:var(--dark);pointer-events:none}
.panel__handoff i{position:absolute;display:block;background-size:cover;background-repeat:no-repeat}

/* A return's first paint: the same frame, over the film's dark stop, sized to the viewport. */
html.returning{background:var(--rp-dark,#000)}
html.returning::after{content:"";position:fixed;z-index:2147483646;pointer-events:none;
  inset:var(--rp-inset,0);bottom:var(--rp-bottom,var(--rp-inset,0));height:var(--rp-height,auto);
  background:var(--return-poster,none) var(--rp-pos,50% 50%)/cover no-repeat;transform:scale(var(--rp-scale,1))}
/* Opacity, not visibility: an open or closing panel sets visibility:visible and would paint through. */
html.returning body{opacity:0;animation:hub-failsafe-show 0s linear 3s forwards}
@keyframes hub-failsafe-show{to{opacity:1}}

/* ---------------------------------------------------------------- footer */

/* One segment per film, in film order, drawn from films.json: the series index,
   standing between the films and the footer. */
.series-band{display:flex;height:4px;background:var(--presents-bar)}
.series-band span{flex:1 1 0;background:var(--c)}

.site-foot{
  display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"logo tagline division" "cookies cookies cookies";
  align-items:end;gap:40px 64px;
  padding:88px var(--pad) 64px;
  background:var(--presents-bg);
}
.site-foot__logo{grid-area:logo;display:block;color:#fff}
.site-foot__logo svg{height:48px;width:auto}

.site-foot__tagline{grid-area:tagline;margin:0;justify-self:center;
  font-weight:700;font-size:clamp(26px,2.6vw,40px);line-height:1;letter-spacing:-.02em;text-wrap:balance;text-align:center}

.division{grid-area:division;justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:16px;text-align:right}
.division__led{display:block;color:#fff}
/* Cookies sits on its own line under everything, centred, in LA.IO gray. */
.site-foot__cookies{grid-area:cookies;justify-self:center;margin-top:8px;
  font-family:var(--mono,'JetBrains Mono',ui-monospace,Menlo,monospace);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:#929497;text-decoration:none}
.site-foot__cookies:hover{color:#E3E6E7}
.site-foot__cookies:focus-visible{outline:2px solid #E3E6E7;outline-offset:3px}
.division__led svg{height:52px;width:auto}

@media (max-width:1199.98px){
  .site-foot{grid-template-columns:auto 1fr;grid-template-areas:"logo division" "tagline tagline" "cookies cookies"}
  .site-foot__tagline{justify-self:stretch;text-align:left;padding-top:40px;border-top:1px solid var(--rule)}
}

/* ---------------------------------------------------------------- mobile */

@media (max-width:899.98px){
  .stage{flex-direction:column;--bar:var(--row)}
  .pane{border-left:0;border-top:1px solid var(--rule)}
  .pane--presents{border-top:0}
  .pane--presents + .pane{margin-left:0}

  .panel{width:100%;height:calc(100cqh - var(--n) * var(--row))}

  .bar{flex-direction:row;align-items:center;justify-content:space-between;padding:0 20px 0 23px}
  .bar__num{order:2;font-size:12px}
  .bar__title{order:1;margin:0;writing-mode:horizontal-tb;transform:none;font-size:17px}
  .bar__foot{top:0;right:auto;width:3px;height:auto}
  .bar__mark{width:auto;height:auto;margin:0}
  .bar__mark svg{position:static;width:84px;height:20px;transform:none}
  .bar--presents{justify-content:flex-start;gap:12px}
  .bar__word{order:2;margin:2px 0 0;writing-mode:horizontal-tb;transform:none}
  .bar--presents .bar__mark{order:1}

  .panel__inner{padding:24px 20px 26px}
  .panel__close{top:12px;right:6px}
  .panel__eyebrow{margin-bottom:10px;font-size:11px}
  .panel__title{font-size:clamp(40px,11.5vw,64px)}
  .panel__stand{margin-top:18px;font-size:17px;line-height:1.4}
  .cta{margin-top:22px}

  .presents__logo svg{height:20px}
  .eyebrow{margin-bottom:18px;font-size:11px}
  .presents__head{font-size:clamp(24px,calc((100cqw - 40px) / 12.5),56px)}
  .presents__sub{margin-top:18px;font-size:16px}
  .presents__foot{font-size:11px}

  /* Rows: the accent fills from the left edge. */
  .pane--film > .bar::after{transform:scaleX(0);transform-origin:0 50%}

  /* Intro: rows come in from the side instead of rising. */
  .intro-pending .pane--film,.intro-hold .pane--film{transform:translateX(var(--intro-rows-x))}

  .stage.is-pushing .pane.is-before > .bar{left:0;right:0;top:auto;width:auto;height:var(--row)}
  .stage.is-pushing .pane.is-after > .bar{left:0;right:0;bottom:auto;width:auto;height:var(--row)}

  .rows-in .pane--film{animation:row-in 420ms ease-out both;animation-delay:calc((var(--i0) + 1) * var(--row-stagger))}
  @keyframes row-in{from{opacity:0}to{opacity:1}}

  .site-foot{grid-template-columns:1fr;grid-template-areas:"logo" "tagline" "division" "cookies";gap:40px;padding:64px 20px 48px}
  .site-foot__tagline{justify-self:start;text-align:left;padding-top:0;border-top:0;font-size:32px}
  .division{justify-self:stretch;align-items:flex-start;text-align:left;padding-top:32px;border-top:1px solid var(--rule)}
  .division__led svg{height:48px}
}

@media (prefers-reduced-motion:reduce){
  .pane,.bar,.bar::after,.bar__num,.bar__title,.panel,.panel__hero,.panel__inner > *,.pane.is-open .panel__inner > *{transition:none !important}
}