/* ===========================================================
   Kristen Schumacher Aloh — personal academic site
   Design: "Dark field"

   Every polarization animation is rendered on pure black. The site is
   therefore built dark, so those animations sit flush against the page
   with no visible frame — they read as the design rather than as
   embedded media. Media surfaces are true #000 to match the source.

   The orange accent is sampled from the sphere in the Einstein's
   Spacetime logo, and recurs in the POINT logo, the OzGrav black-hole
   render and the Hanford trace of the GW150914 figure.
   =========================================================== */

/* ---------- Tokens ---------- */
:root {
  --page:       #0B0E14;   /* near-black page ground        */
  --surface:    #12161F;   /* cards, panels                 */
  --surface-2:  #1A1F2B;   /* raised / hover                */
  --plate:      #000000;   /* media surfaces — matches source */

  --ink:        #E8ECF3;   /* body text                     */
  --ink-soft:   #B7C0CF;   /* secondary                     */
  --muted:      #838D9E;   /* metadata, captions            */

  --rule:       rgba(232, 236, 243, .13);
  --rule-soft:  rgba(232, 236, 243, .07);
  --rule-firm:  rgba(232, 236, 243, .26);

  --flare:      #F0813C;   /* accent — the sphere           */
  --flare-soft: #F8A26B;   /* light tint                    */
  --flare-dim:  #B85E24;   /* pressed / borders             */
  --flare-tint: rgba(240, 129, 60, .13);

  --serif: "Source Serif 4", "Source Serif Pro", Charter, "Iowan Old Style",
           Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* No container cap: the page fills the browser window at whatever width it is
     opened to. Type scales with the viewport so it stays proportionate. */
  --pad-x: clamp(1.25rem, 4vw, 4.5rem);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--page); }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 0.30vw + 1.02rem, 1.375rem);
  line-height: 1.72;
  font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; display: block; }
img, svg { height: auto; }
figure { margin: 0; }
::selection { background: var(--flare); color: #10130A; }

/* ---------- Links ---------- */
a {
  color: var(--flare-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(248, 162, 107, .35);
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
a:hover { color: #FFCBA4; border-bottom-color: var(--flare-soft); background: var(--flare-tint); }
a:focus-visible { outline: 2px solid var(--flare); outline-offset: 3px; border-radius: 2px; }

/* ---------- Layout ---------- */
.wrap  { width: 100%; padding-inline: var(--pad-x); }
.prose { max-width: none; }
.section { padding-block: clamp(3rem, 7vw, 6rem); }
.section--raised { background: var(--surface); border-block: 1px solid var(--rule); }

/* ---------- Skip link ---------- */
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--flare); color: #12130C;
  padding: .6rem 1rem; z-index: 100; border: 0; font-family: var(--sans);
}
.skip:focus { left: .5rem; top: .5rem; }

/* ---------- Masthead ---------- */
.masthead {
  border-bottom: 1px solid var(--rule);
  background: rgba(11, 14, 20, .86);
  backdrop-filter: saturate(150%) blur(10px);
  position: sticky; top: 0; z-index: 40;
}
.masthead__inner {
  width: 100%; padding: .95rem var(--pad-x);
  display: flex; align-items: baseline; gap: 1.5rem;
  flex-wrap: wrap; justify-content: space-between;
}
.wordmark, .wordmark:hover { border: 0; background: none; }
.wordmark__name {
  font-size: 1.18rem; font-weight: 600; letter-spacing: .004em;
  color: var(--ink); display: block; line-height: 1.2;
}
.wordmark__role {
  display: block; font-family: var(--sans);
  font-size: .67rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--flare); margin-top: .32rem; font-weight: 500;
}

/* ---------- Nav ---------- */
.nav ul {
  list-style: none; display: flex; flex-wrap: wrap;
  gap: clamp(.85rem, 2vw, 1.7rem); margin: 0; padding: 0;
}
.nav a {
  font-family: var(--sans); font-size: .78rem; font-weight: 500;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-soft); border-bottom: 1px solid transparent;
  padding-bottom: 3px; background: none;
}
.nav a:hover { color: var(--flare-soft); border-bottom-color: var(--flare); background: none; }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--flare); }

/* ===========================================================
   HERO — animation on the right, its black edge dissolving
   into the text column via a mask. Works only because the
   source footage is pure black.
   =========================================================== */
.hero {
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--rule);
  background: var(--plate);
}
/* The source animation is 800x450, cropped to 760x450 to remove the Unity
   editor axis gizmo that was baked into the top-right corner. This box used to
   use object-fit: cover, which scaled it up ~1.6x on a wide screen and made it
   look grainy. It is now capped at its native width, so it is never upscaled.
   The unused space either side is pure black, which is also the page ground. */
.hero__media {
  position: absolute; inset: 0 0 0 auto;
  width: 66%; z-index: 0; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.hero__media video, .hero__media img {
  width: 100%; max-width: 760px; height: auto; aspect-ratio: 760 / 428;
  object-fit: contain;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 26%, #000 58%);
          mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 26%, #000 58%);
}
.hero__inner {
  position: relative; z-index: 1;
  width: 100%; padding-inline: var(--pad-x);
  padding-block: clamp(3rem, 9vw, 7.5rem);
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 940px) {
  .hero__inner { grid-template-columns: minmax(0, 32rem) minmax(0, 1fr); align-items: center; }
}
@media (max-width: 939px) {
  /* stack: the animation becomes a band beneath the text */
  .hero__media {
    position: relative; width: auto; inset: auto;
    margin-top: 2.25rem; border-top: 1px solid var(--rule-soft);
  }
  .hero__media video, .hero__media img {
    height: auto; aspect-ratio: 760 / 428; max-width: 100%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 22%);
  }
  .hero__inner { padding-bottom: 0; }
}
.hero h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.6rem, 7vw, 4.4rem);
  line-height: 1.02; letter-spacing: -.022em;
  margin: 0 0 1.1rem; color: #FFF;
}
.hero__rule { width: 104px; height: 3px; background: var(--flare); margin: 0 0 1.3rem; border: 0; }
.hero__title {
  font-family: var(--sans); font-size: .84rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--flare); margin: 0 0 .6rem;
}
.hero__affil { font-size: 1rem; color: var(--muted); margin: 0 0 1.7rem; font-style: italic; }
.hero__lede {
  font-size: clamp(1.1rem, 2vw, 1.24rem); line-height: 1.62;
  margin: 0 0 2rem; color: var(--ink-soft);
}
.hero__lede strong { font-weight: 600; color: var(--ink); }
.hero__credit {
  font-family: var(--sans); font-size: .72rem; letter-spacing: .04em;
  color: var(--muted); margin-top: 1.75rem;
}

/* ---------- Portrait ---------- */
.portrait { border: 1px solid var(--rule); padding: .45rem; background: var(--surface); }
.portrait img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.portrait figcaption {
  font-family: var(--sans); font-size: .69rem; color: var(--muted);
  letter-spacing: .07em; text-transform: uppercase;
  margin-top: .55rem; text-align: center;
}

/* ---------- Identity links ---------- */
.idlinks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem .55rem; }
.idlinks a {
  display: inline-block; font-family: var(--sans);
  font-size: .77rem; font-weight: 500; letter-spacing: .05em;
  padding: .45rem .9rem; border: 1px solid var(--rule-firm); border-radius: 2px;
  color: var(--ink-soft); background: rgba(232, 236, 243, .04);
}
.idlinks a:hover { border-color: var(--flare); color: var(--flare-soft); background: var(--flare-tint); }
.idlinks a.is-primary { background: var(--flare); color: #14150D; border-color: var(--flare); font-weight: 600; }
.idlinks a.is-primary:hover { background: var(--flare-soft); border-color: var(--flare-soft); color: #14150D; }

/* ---------- Headings ---------- */
.eyebrow {
  font-family: var(--sans); font-size: .71rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--flare); margin: 0 0 .8rem;
  display: flex; align-items: center; gap: .8rem;
}
.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.75rem, 3.6vw, 2.4rem);
  line-height: 1.14; letter-spacing: -.014em; margin: 0 0 1.15rem; color: #FFF;
}
h3 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.16rem, 2.2vw, 1.38rem);
  line-height: 1.26; margin: 0 0 .6rem; color: var(--ink);
}
h4 {
  font-family: var(--sans); font-weight: 600; font-size: .8rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 .55rem;
}
p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }
.deck { font-size: 1.16rem; color: var(--ink-soft); margin-bottom: 2.5rem; }

/* .introrow — kept as a simple stack. It used to be a two-column layout that
   filled the empty right margin left by capped prose; with the narrower page
   the prose fills the width on its own, so no column split is needed. */
.introrow { margin-bottom: clamp(2rem, 4vw, 2.75rem); }
.introrow > .deck, .introrow > .prose { margin-bottom: 1.5rem; }
.introrow__side { display: flex; flex-direction: column; gap: 1.1rem; }
.introrow__side p { font-size: .92rem; color: var(--muted); margin: 0; }

/* ---------- Research cards ---------- */
.cards {
  display: grid; gap: clamp(1.25rem, 2.5vw, 1.9rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  margin-top: 2.5rem;
}
.card {
  background: var(--surface); border: 1px solid var(--rule);
  padding: 1.7rem 1.7rem 1.85rem;
  display: flex; flex-direction: column; position: relative;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.card:hover { border-color: var(--flare-dim); background: var(--surface-2); transform: translateY(-3px); }
.card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--flare);
}
.card__num {
  font-family: var(--serif); font-size: 1.9rem; line-height: 1;
  color: var(--flare); margin-bottom: .55rem; display: block;
  font-variant-numeric: lining-nums; opacity: .85;
}
.card h3 { font-size: 1.14rem; }
.card p { font-size: .99rem; color: var(--ink-soft); }
.card__more {
  margin-top: auto; padding-top: 1.1rem; border: 0; background: none;
  font-family: var(--sans); font-size: .76rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--flare-soft);
}
.card__more:hover { background: none; color: #FFCBA4; }
.card__more::after { content: " \2192"; }

/* ===========================================================
   MEDIA PLATES — true black, no border, so the source footage
   has no visible edge.
   =========================================================== */
.plate { background: var(--plate); }
.plate video, .plate img { width: 100%; display: block; background: var(--plate); }

.animfig { margin-block: 0; }
.animfig__stage {
  background: var(--plate); display: grid; gap: 1px;
  grid-template-columns: minmax(0, 1fr);
}
.animfig__stage--pair { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) {
  .animfig__stage--pair { grid-template-columns: 1fr 1fr; }
}
.animfig__stage video { width: 100%; height: auto; background: var(--plate); }
.animfig__cap { padding: 1rem .15rem 0; }
.animfig__cap h3 { margin-bottom: .3rem; display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.animfig__cap p { font-size: .96rem; color: var(--muted); margin: 0; }

.badge {
  font-family: var(--sans); font-size: .64rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--flare); border: 1px solid var(--flare-dim);
  padding: .16rem .5rem; border-radius: 2px; white-space: nowrap;
}
.badge--gr { color: var(--ink); border-color: var(--rule-firm); }

.animgrid {
  display: grid; gap: clamp(2rem, 4vw, 3.25rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  margin-top: 2.75rem;
}

/* Photo / render figure */
.mediafig { border: 1px solid var(--rule); background: var(--surface); padding: .5rem; }
.mediafig img, .mediafig video { width: 100%; }
.mediafig figcaption {
  font-family: var(--sans); font-size: .8rem; color: var(--muted);
  margin: .7rem .35rem .25rem; line-height: 1.55;
}

/* ---------- Research topic blocks ---------- */
.topic { padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--rule); }
.topic:first-of-type { border-top: 0; padding-top: 0; }
.topic__grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 920px) { .topic__grid { grid-template-columns: 12ch minmax(0, 1fr); } }
.topic__label {
  font-family: var(--sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: var(--flare); padding-top: .5rem;
}
.topic__label b {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: 2.8rem; line-height: 1; letter-spacing: -.02em;
  color: var(--flare); opacity: .75; margin-bottom: .3rem; font-variant-numeric: lining-nums;
}
.topic__body { min-width: 0; }
.topic__body p { font-size: 1.07rem; color: var(--ink-soft); }

/* ---------- Keywords, affiliations ---------- */
.keywords { font-family: var(--sans); font-size: .86rem; color: var(--muted); line-height: 1.95; }
.keywords strong {
  color: var(--ink); font-weight: 600; display: block; margin-bottom: .35rem;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
}
.affils { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.affils li {
  font-family: var(--sans); font-size: .77rem; letter-spacing: .04em;
  padding: .32rem .72rem; border: 1px solid var(--rule); background: var(--surface); color: var(--ink-soft);
}

/* ---------- Publications ---------- */
.pubyear {
  display: grid; gap: clamp(.75rem, 3vw, 2.5rem);
  grid-template-columns: minmax(0, 1fr); padding-block: 2.25rem;
  border-top: 1px solid var(--rule);
}
@media (min-width: 780px) { .pubyear { grid-template-columns: 7ch minmax(0, 1fr); } }
.pubyear__y {
  font-family: var(--serif); font-size: 2rem; color: var(--flare); opacity: .8;
  font-variant-numeric: lining-nums; line-height: 1.2;
}
.pub { margin-bottom: 2.5rem; }
.pub:last-child { margin-bottom: 0; }
.pub__title { font-size: 1.13rem; font-weight: 600; line-height: 1.38; margin: 0 0 .4rem; color: var(--ink); }
.pub__authors { font-size: .96rem; color: var(--muted); margin: 0 0 .35rem; }
.pub__authors b { color: var(--ink); font-weight: 600; }
.pub__ref { font-family: var(--sans); font-size: .83rem; color: var(--ink-soft); margin: 0 0 .6rem; }
/* Dormant: gloss paragraphs were removed from publications.html in Aug 2026.
   Rule kept so they can be reinstated without rebuilding the style. */
.pub__gloss {
  font-size: 1rem; color: var(--ink-soft);
  border-left: 2px solid var(--flare-dim); padding-left: 1rem; margin: .7rem 0 .85rem;
}
.pub__abstract { margin: 0 0 .9rem; }
.pub__abstract summary {
  font-family: var(--sans); font-size: .74rem; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase; color: var(--flare-soft);
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .45rem;
  padding: .2rem 0;
}
.pub__abstract summary::-webkit-details-marker { display: none; }
.pub__abstract summary::before {
  content: "\25B8"; font-size: .8em; transition: transform .15s ease; display: inline-block;
}
.pub__abstract[open] summary::before { transform: rotate(90deg); }
.pub__abstract summary:hover { color: #FFCBA4; }
.pub__abstract summary:focus-visible { outline: 2px solid var(--flare); outline-offset: 3px; }
.pub__abstract > p {
  font-size: .97rem; color: var(--ink-soft); margin: .8rem 0 0;
  padding-left: 1rem; border-left: 1px solid var(--rule);
}

.pub__links { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.pub__links a {
  font-family: var(--sans); font-size: .72rem; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase;
  padding: .28rem .62rem; border: 1px solid var(--rule-firm);
  background: rgba(232, 236, 243, .04); color: var(--ink-soft);
}
.pub__links a:hover { border-color: var(--flare); color: var(--flare-soft); background: var(--flare-tint); }
.tag {
  display: inline-block; font-family: var(--sans);
  font-size: .65rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--flare); background: var(--flare-tint); border: 1px solid var(--flare-dim);
  padding: .13rem .45rem; margin-left: .5rem; vertical-align: .12em;
}

/* ---------- Entry lists ---------- */
.entrylist { list-style: none; margin: 0; padding: 0; }
.entrylist > li {
  display: grid; gap: .25rem 1.5rem; grid-template-columns: minmax(0, 1fr);
  padding: 1rem 0; border-top: 1px solid var(--rule-soft);
}
@media (min-width: 700px) { .entrylist > li { grid-template-columns: 8ch minmax(0, 1fr); } }
.entrylist > li:first-child { border-top: 0; }
.entrylist .yr { font-family: var(--mono); font-size: .79rem; color: var(--flare); padding-top: .3rem; opacity: .9; }
.entrylist .what { font-size: 1.01rem; color: var(--ink); }
.entrylist .where {
  display: block; font-family: var(--sans); font-size: .83rem; color: var(--muted); margin-top: .18rem;
}

/* ---------- Rule-separated stacked items ---------- */
.stackitem {
  padding-block: clamp(1.85rem, 4vw, 3rem); border-top: 1px solid var(--rule);
}
.stackitem:first-of-type { border-top: 0; padding-top: 0; }
.stackitem__body { min-width: 0; }

/* ---------- CV ---------- */
.cvblock {
  display: grid; gap: .5rem 2rem; grid-template-columns: minmax(0, 1fr);
  padding-block: 1.4rem; border-top: 1px solid var(--rule-soft);
}
@media (min-width: 760px) { .cvblock { grid-template-columns: 13ch minmax(0, 1fr); } }
.cvblock__when { font-family: var(--mono); font-size: .79rem; color: var(--flare); padding-top: .3rem; opacity: .9; }
.cvblock__what h3 { font-size: 1.08rem; margin-bottom: .25rem; }
.cvblock__what .org { font-family: var(--sans); font-size: .86rem; color: var(--muted); margin: 0 0 .5rem; }
.cvblock__what ul { margin: .5rem 0 0; padding-left: 1.15rem; }
.cvblock__what li { margin-bottom: .38rem; font-size: 1rem; color: var(--ink-soft); }
.cvblock__what li::marker { color: var(--flare); }

.plainlist { list-style: none; margin: 0; padding: 0; }
.plainlist li {
  padding: .55rem 0 .55rem 1.2rem; position: relative;
  border-top: 1px solid var(--rule-soft); font-size: 1.01rem; color: var(--ink-soft);
}
.plainlist li:first-child { border-top: 0; }
.plainlist li::before {
  content: "\25AA"; position: absolute; left: 0; top: .6rem; color: var(--flare); font-size: .68rem;
}
.plainlist strong { color: var(--ink); }

/* ---------- Callout ---------- */
.callout {
  border: 1px solid var(--flare-dim); background: var(--flare-tint);
  padding: 1.3rem 1.55rem; margin-block: 2rem;
}
.callout h4 { color: var(--flare-soft); }
.callout p { font-size: .99rem; color: var(--ink-soft); }

/* ---------- Split ---------- */
.split { display: grid; gap: clamp(1.75rem, 4vw, 3.25rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 880px) { .split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.split--wide-first { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 880px) { .split--wide-first { grid-template-columns: 1.35fr 1fr; } }

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--rule); background: var(--surface);
  padding-block: clamp(2.5rem, 5vw, 3.5rem); margin-top: clamp(3rem, 7vw, 5rem);
}
.footer__grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.footer h4 { margin-bottom: .75rem; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: .42rem; font-size: .96rem; color: var(--ink-soft); }
.footer__note {
  margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule);
  font-family: var(--sans); font-size: .78rem; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
}

/* ---------- Utilities ---------- */
.mt-0 { margin-top: 0; }
.mb-lg { margin-bottom: 2.5rem; }
.small { font-size: .9rem; color: var(--muted); }
.nowrap { white-space: nowrap; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Print ---------- */
@media print {
  .masthead, .nav, .footer__note, .idlinks, .hero__media { display: none; }
  html, body { background: #fff; color: #000; font-size: 11pt; }
  h1, h2, h3, .hero h1 { color: #000; }
  p, li, .deck, .topic__body p, .pub__gloss { color: #000; }
  a { color: #000; border: 0; }
  .section, .hero__inner { padding-block: 1rem; }
  .hero, .section--raised, .section--plate, .card, .footer { background: #fff; border-color: #ccc; }
  .card { transform: none; }
  video { display: none; }
}

/* ---------- Reduced motion: pause the animations ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}