/* ───────────────────────────────────────────────────────────────────────────
   Fonts
   Display: system neo-grotesque (Helvetica Neue / Arial) — zero-cost match for
   the cargo.site original. Swap to a licensed grotesque later if desired.
   Serif: Newsreader (variable) — reserved for case-study body copy.
   ─────────────────────────────────────────────────────────────────────────── */
/* Trialing self-hosted ABC Monument Grotesk (only the Regular/400 cut so far) */
@font-face {
  font-family: "ABC Monument Grotesk";
  src: url("/fonts/ABCMonumentGrotesk-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/fonts/Newsreader-Variable.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/fonts/Newsreader-Italic-Variable.ttf") format("truetype");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

/* ───────────────────────────────────────────────────────────────────────────
   Design tokens
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  /* Display = big type (hero, index); Text = UI/body; Serif = case-study copy */
  --font-display: "ABC Monument Grotesk", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-text: "ABC Monument Grotesk", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "Newsreader", Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, monospace;

  /* Index tree connector — spine offset, branch length, and the gap before the
     row copy. --tree-indent is their sum, i.e. where each row's text starts.
     Branch/space scale off --fit so the tree stays proportional to the type. */
  --tree-gap: 4px;
  --tree-branch: calc(var(--fit, 4rem) * 0.61425);
  --tree-space: calc(var(--fit, 4rem) * 0.289);
  --tree-indent: calc(var(--tree-gap) + var(--tree-branch) + var(--tree-space));
  /* effective content width: the live drag width (--container-w), capped at the
     viewport so mobile stays correct. Drives every width-adaptive corner/stroke;
     each caps at width 1600px. */
  --w-eff: min(var(--container-w, 860px), 100vw);
  /* index-hover pill/cap corners: ~11px narrow → 20px at 1600px */
  --idx-radius: clamp(11px, calc(var(--w-eff) * 0.0125), 20px);
  /* content-container corners: ~12px narrow → 20px at 1600px */
  --container-radius: clamp(12px, calc(var(--w-eff) * 0.0125), 20px);
  --tree-radius: clamp(3px, calc(var(--w-eff) * 0.009 - 0.37px), 14px);
  --tree-color: #5A5A5A;
  --tree-stroke: clamp(2px, calc(var(--w-eff) * 0.0049 + 0.16px), 7px);
  /* trims the vertical above the first branch. Based on --fit (not em) so it
     resolves to the same px for the spine and the first elbow, which live in
     different font-size contexts. */
  --tree-trim: calc(var(--fit, 4rem) * 0.13);

  /* One value drives the vertical gap between every main section
     (intro → index → lab → footer) so they read as evenly spaced. */
  --section-gap: clamp(5rem, 16vh, 12rem);

  /* color-scheme flips with the theme so Safari re-picks the matching
     media-scoped theme-color meta and repaints the browser toolbar live */
  color-scheme: dark;

  /* Dark theme (default) — values taken from the original cargo.site CSS */
  --bg: #131313;
  --surface: #171717;             /* modal / raised surfaces */
  --fg: rgba(255,255,255,0.90);   /* index rows, name, bright text */
  --fg-soft: rgba(255,255,255,0.5);   /* hero statement + section ledes (homepage body) */
  --fg-muted: rgba(255,255,255,0.65);  /* hero description / secondary */
  --fg-dim: rgba(255,255,255,0.28);    /* coming-soon / LAB items */
  --hl: #373737;                  /* sliding index-hover highlight (solid) */
  --hl-ink: #ffffff;              /* text/arrow on the highlight (white, full) */
  --chip-bg: rgba(255,255,255,0.1); /* hero brand/product chip band */
  --hairline: rgba(255,255,255,0.1);
  --glass: rgb(255,255,255);           /* filter bar / bio button (opaque) */
  --glass-ink: rgba(19,19,19,0.9);
  --glass-pill: #DFDFDF;

  /* Fluid type scale — grows with viewport width */
  --step-hero: clamp(1.7rem, 5.4vw, 5.5rem);
  --step-index: clamp(1.5rem, 6vw, 8rem);
  --step-section: clamp(1.7rem, 5.4vw, 5.5rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --fg: rgba(0,0,0,0.90);
  --fg-soft: rgba(0,0,0,0.5);
  --fg-muted: rgba(0,0,0,0.65);
  --fg-dim: rgba(0,0,0,0.28);
  --hl: rgba(0,0,0,0.1);
  --hl-ink: #000000;
  --chip-bg: rgba(0,0,0,0.08);
  --hairline: rgba(0,0,0,0.12);
  --glass: rgb(20,20,20);
  --glass-ink: rgba(255,255,255,0.92);
  --glass-pill: #4a4a4a;
}

/* Mobile: tighten the shared main-section gap (a further ~20% less, then -30%) */
@media (max-width: 820px) {
  :root {
    --section-gap: clamp(2.24rem, 7.168vh, 5.376rem);
    --tree-gap: 1px; /* nudge the file tree 3px left on mobile */
    --tree-stroke: 2px; /* thin file-tree lines on mobile (whole px = even vertical/horizontal) */
  }
}

/* Scroll reveal — content fades in with a subtle upward slide as it enters view.
   The .reveal class is added by JS, so with JS off (or before it runs) content
   stays visible. Fully disabled when the viewer prefers reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  /* hidden state carries no transition, so adding .reveal hides instantly (no
     flash); the transition lives on .in-view so only the reveal-in animates */
  .reveal { opacity: 0; transform: translateY(10px); }
  .reveal.in-view { opacity: 1; transform: none; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
}

/* ───────────────────────────────────────────────────────────────────────────
   Base
   ─────────────────────────────────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Theme transition */
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}

body { min-height: 100vh; }
/* Mobile: the theme bg on the BODY is what iOS Safari samples for the browser
   toolbar / status bar (it re-samples on a system-appearance change). It follows
   the theme, which on mobile follows the system — so page + toolbar flip together.
   Desktop keeps the body transparent so the fixed .page-field shows in the margins. */
@media (max-width: 820px) { body { background: var(--bg); } }

/* While a drag-handle's white line is showing (hover/hint/drag), drop the thin
   hairline rule on that side so the two don't double up. JS toggles the class on
   <html>. Unscoped + higher specificity so it wins over the scoped border. */
:root.col-active-left .wrap,
:root.col-active-left .site-footer { border-left-color: transparent; }
:root.col-active-right .wrap,
:root.col-active-right .site-footer { border-right-color: transparent; }

a { color: inherit; text-decoration: none; }

img, video { display: block; max-width: 100%; border-radius: 12px; }

::selection { background: rgba(0, 143, 240, 0.3); }

/* container padding, shared so the gallery gaps can match it */
:root { --wrap-pad: clamp(0.5rem, 1.25vw, 1rem); }        /* mobile */
@media (min-width: 821px) { :root { --wrap-pad: clamp(0.9rem, 2.25vw, 1.8rem); } }  /* +80% desktop */
.wrap { padding: var(--wrap-pad); }

/* Scrollable modal panels: a slim, translucent, theme-aware scrollbar
   (replaces the chunky default bar so it reads like the rest of the page). */
.smodal, .bio-panel, .nengine-panel {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--fg) 30%, transparent) transparent;
}
.smodal::-webkit-scrollbar, .bio-panel::-webkit-scrollbar, .nengine-panel::-webkit-scrollbar { width: 10px; }
.smodal::-webkit-scrollbar-track, .bio-panel::-webkit-scrollbar-track, .nengine-panel::-webkit-scrollbar-track { background: transparent; }
.smodal::-webkit-scrollbar-thumb, .bio-panel::-webkit-scrollbar-thumb, .nengine-panel::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--fg) 28%, transparent);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
.smodal::-webkit-scrollbar-thumb:hover, .bio-panel::-webkit-scrollbar-thumb:hover, .nengine-panel::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--fg) 45%, transparent);
  background-clip: padding-box;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ───────────────────────────────────────────────────────────────────────────
   Hero hover-reel — these elements are created in JS, so their styles must be
   global (Astro's scoped component styles would never match them).
   ─────────────────────────────────────────────────────────────────────────── */
.reel-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9997;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.reel-backdrop.is-on { opacity: 1; }

.reel-slot {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 92vmin;
  height: 92vmin;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.reel-slot.is-on { opacity: 1; }
.reel-slot img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

.reel-tip {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  padding: 0.4em 0.7em;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.45);
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -170%);
  transition: opacity 0.15s ease;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.reel-tip.is-on { opacity: 1; }

/* ───────────────────────────────────────────────────────────────────────────
   Case-study blocks — injected via JS, so styled globally (scoped selectors
   would not match). The 2-column grid lives on .case (scoped); these are its
   items: text in the right column, images span full width.
   ─────────────────────────────────────────────────────────────────────────── */
/* font-size −10% from the original 1.05rem. Base spacing between blocks comes
   from the .case grid row-gap (== --gut, the modal gutter); extra separation
   between sections is added via .case__section (see below). */
.case__text { grid-column: 2; }
.case__text, .case__text2col-col, .case__figrow-text { font-size: 0.945rem; line-height: 1.3; }
.case__text p, .case__text2col-col p, .case__figrow-text p { margin-bottom: 1rem; }
.case__text p:last-child, .case__text2col-col p:last-child, .case__figrow-text p:last-child { margin-bottom: 0; }
.case__text em, .case__text i, .case__text2col-col em, .case__figrow-text em { font-style: italic; }
/* bulleted lists inside case-study copy (preserved from the source <ul>) */
.case__bullets { margin: 0; padding-left: 1.1em; list-style: disc; }
.case__bullets li { margin-bottom: 0.5rem; }
.case__bullets li:last-child { margin-bottom: 0; }
.case__heading { font-size: 1.035rem; font-weight: 500; margin: 0 0 0.6rem; }

/* Inline links in case-study copy: underline + the site's NE arrow */
.case__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: text-decoration-color 0.2s ease;
}
.case__link:hover { text-decoration-color: currentColor; }
.case__link::after {
  content: "";
  display: inline-block;
  width: 0.6em; height: 0.6em;
  margin-left: 0.08em;
  vertical-align: 0.02em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M 6.70 23.72 L 8.28 25.30 L 20.50 13.08 L 22.48 10.93 L 22.24 14.02 L 22.19 20.14 L 24.36 20.14 L 24.52 7.49 L 11.86 7.64 L 11.88 9.83 L 18.01 9.75 L 21.10 9.53 L 18.92 11.50 L 6.70 23.72 Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M 6.70 23.72 L 8.28 25.30 L 20.50 13.08 L 22.48 10.93 L 22.24 14.02 L 22.19 20.14 L 24.36 20.14 L 24.52 7.49 L 11.86 7.64 L 11.88 9.83 L 18.01 9.75 L 21.10 9.53 L 18.92 11.50 L 6.70 23.72 Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* a bare inline link (underline only, no NE arrow) — declared after the base
   ::after so it wins the source order */
.case__link--bare::after { content: none; }
.case__heading i { font-weight: 300; color: var(--fg-muted); }
.case__fig { grid-column: 1 / -1; margin: 0; }
.case__fig img, .case__fig video { width: 100%; display: block; }

/* Embedded interactive demo (e.g. Nengine) inside a case study */
.case__widget {
  grid-column: 1 / -1;
  border-radius: 12px;
  overflow: hidden; /* clip the iframe to the rounded corners */
  aspect-ratio: 4 / 3.55; /* stage + button + caption inside the iframe */
}
.case__widget iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 560px) {
  .case__widget { aspect-ratio: 1 / 1.25; } /* more room for the artboard when narrow */
}
/* Divider after the intro — space above it matches the between-section gap */
.case__rule { grid-column: 1 / -1; border: 0; height: 1px; background: var(--hairline); margin: 3.75rem 0 0; }

/* Case-study galleries: grids (columns from cargo) + inline slideshows/carousels.
   Gutter == --gut so image-to-image spacing matches the image-to-edge margin. */
.case__grid-imgs {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(var(--cols, 1), 1fr);
  gap: var(--gut, 1rem);
  margin: 0;
}
.case__grid-imgs img, .case__grid-imgs video { width: 100%; display: block; }
.case__slideshow { grid-column: 1 / -1; position: relative; margin: 0; }
.case__slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 0;
}
.case__slideshow img.is-current { opacity: 1; }

/* A media block that begins a new section (media following body text, or a
   grid) gets extra space above it. Declared AFTER .case__fig/.case__grid-imgs/
   .case__slideshow so its margin-top wins over their `margin: 0` (same
   specificity → source order decides). */
.case__section { margin-top: 3.75rem; }

/* Image beside text (cargo two-column figure row) */
.case__figrow {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gut, 1rem);
  align-items: center;
}
.case__figrow-media img { width: 100%; display: block; }

/* Two columns of text (e.g. Methodology | Key Considerations) */
.case__text2col {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(1.25rem, 2.5vw, 2.25rem);
  row-gap: var(--gut, 1rem);
}
@media (max-width: 820px) {
  /* image-beside-text (figrow) and two text columns stack on mobile … */
  .case__figrow, .case__text2col { grid-template-columns: 1fr; }
  /* … but two assets (image/video) side by side stay side by side on mobile —
     .case__grid-imgs keeps its --cols (no override here). */
}

/* Carousel images — created in JS, so styled globally. Crossfade, full width. */
.carousel__track img,
.carousel__track video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 0;
}
.carousel__track img.is-current,
.carousel__track video.is-current { opacity: 1; }

@media (max-width: 820px) {
  .case__text, .case__fig { grid-column: 1; }
  /* case-study body copy −20% from original (vs −10% on desktop); looser
     line height + no kerning for better mobile readability */
  .case__text, .case__text2col-col, .case__figrow-text { font-size: 0.945rem; line-height: 1.35; font-kerning: none; }
  .case__heading { font-size: 0.92rem; }
}
#loading-screen[data-astro-cid-hkbrpulz] {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999999;
  transition: opacity .4s;
}

#loading-screen[data-astro-cid-hkbrpulz].is-done {
  opacity: 0;
  pointer-events: none;
}

#loader-percentage[data-astro-cid-hkbrpulz] {
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--fg);
  background: color-mix(in srgb, var(--fg) 12%, transparent);
  width: 44px;
  text-align: center;
  padding: .2rem 0;
  border-radius: 4px;
}

.site-footer[data-astro-cid-hkbrpulz] {
  max-width: var(--container-w, 860px);
  margin-left: auto;
  margin-right: auto;
  background: var(--bg);
  border-left: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
  padding-top: calc(var(--section-gap) - .7rem);
  padding-bottom: clamp(7rem, 14vh, 10rem);
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--fg-muted);
}

@media (width >= 821px) {
  .site-footer[data-astro-cid-hkbrpulz] {
    padding-bottom: clamp(3rem, 6vh, 5rem);
  }
}

.footer-signature[data-astro-cid-hkbrpulz] {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 8px;
}

.signature[data-astro-cid-hkbrpulz] {
  width: clamp(58px, 6.6vw, 79px);
  height: auto;
  display: block;
  color: #acacac;
  overflow: visible;
}

.signature[data-astro-cid-hkbrpulz] path[data-astro-cid-hkbrpulz] {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.008px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

@media (width <= 820px) {
  .footer-signature[data-astro-cid-hkbrpulz] {
    margin-top: -11.4px;
    padding-top: .75rem;
  }

  .signature[data-astro-cid-hkbrpulz] {
    width: 62px;
  }
}

.footer-rule[data-astro-cid-hkbrpulz] {
  background: var(--hairline);
  height: 1px;
  border: 0;
  margin: .7rem 0 18px;
}

.footer-cols[data-astro-cid-hkbrpulz] {
  display: grid;
  grid-template-columns: 4fr 3fr 3fr;
  gap: 1.5rem;
  align-items: start;
}

@media (width >= 821px) {
  .footer-cols[data-astro-cid-hkbrpulz] {
    grid-template-columns: 2fr 4fr 4fr;
  }

  .footer-signature[data-astro-cid-hkbrpulz] {
    order: -1;
  }
}

@media (width <= 820px) {
  .footer-cols[data-astro-cid-hkbrpulz] {
    grid-template-columns: 1fr 1fr;
  }

  .footer-disclaimer[data-astro-cid-hkbrpulz] {
    grid-column: 1;
    grid-row: 1;
  }

  .footer-links[data-astro-cid-hkbrpulz] {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .footer-signature[data-astro-cid-hkbrpulz] {
    grid-column: 1;
    grid-row: 2;
  }
}

.footer-disclaimer[data-astro-cid-hkbrpulz] p[data-astro-cid-hkbrpulz] {
  margin-bottom: 1.1rem;
}

.footer-disclaimer[data-astro-cid-hkbrpulz] p[data-astro-cid-hkbrpulz]:last-child {
  margin-bottom: 0;
}

.footer-disclaimer[data-astro-cid-hkbrpulz] {
  color: #ffffffa6;
}

:root[data-theme="light"] .footer-disclaimer[data-astro-cid-hkbrpulz] {
  color: #000000a6;
}

@media (width >= 701px) {
  .footer-disclaimer[data-astro-cid-hkbrpulz] p[data-astro-cid-hkbrpulz]:first-child {
    max-width: 260px;
  }
}

.footer-links[data-astro-cid-hkbrpulz] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-links[data-astro-cid-hkbrpulz] a[data-astro-cid-hkbrpulz] {
  display: inline-flex;
  align-items: center;
  color: #ffffffa6;
  transition: color .2s var(--ease);
}

.footer-links[data-astro-cid-hkbrpulz] a[data-astro-cid-hkbrpulz]:hover {
  color: #fff;
}

.footer-links[data-astro-cid-hkbrpulz] a[data-astro-cid-hkbrpulz]:last-child {
  margin-bottom: 2rem;
}

.ne-arrow[data-astro-cid-hkbrpulz] {
  width: .9em;
  height: .9em;
  margin-left: .04em;
}

.footer-toggle[data-astro-cid-hkbrpulz] {
  display: none;
}

.footer-sound[data-astro-cid-hkbrpulz] {
  background: none;
  border: 0;
  padding: 0;
  color: #ffffffa6;
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: color .2s var(--ease);
}

.sound-icon[data-astro-cid-hkbrpulz] {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
  overflow: visible;
  flex: none;
  position: relative;
  top: -1px;
}

.sound-label[data-astro-cid-hkbrpulz] {
  margin-left: .45em;
}

.sound-slash[data-astro-cid-hkbrpulz], .sound-slash-cut[data-astro-cid-hkbrpulz] {
  stroke-dasharray: 23;
  transition: stroke-dashoffset .32s var(--ease);
}

.footer-sound[data-astro-cid-hkbrpulz][aria-pressed="true"] .sound-slash[data-astro-cid-hkbrpulz], .footer-sound[data-astro-cid-hkbrpulz][aria-pressed="true"] .sound-slash-cut[data-astro-cid-hkbrpulz] {
  stroke-dashoffset: 23px;
}

.footer-sound[data-astro-cid-hkbrpulz][aria-pressed="false"] .sound-slash[data-astro-cid-hkbrpulz], .footer-sound[data-astro-cid-hkbrpulz][aria-pressed="false"] .sound-slash-cut[data-astro-cid-hkbrpulz] {
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .sound-slash[data-astro-cid-hkbrpulz], .sound-slash-cut[data-astro-cid-hkbrpulz] {
    transition: none;
  }
}

.footer-sound[data-astro-cid-hkbrpulz]:hover {
  color: #fff;
}

:root[data-theme="light"] .footer-sound[data-astro-cid-hkbrpulz] {
  color: #000000a6;
}

:root[data-theme="light"] .footer-sound[data-astro-cid-hkbrpulz]:hover {
  color: #000;
}

.footer-toggle[data-astro-cid-hkbrpulz] {
  background: none;
  border: 0;
  padding: 0;
  color: #ffffffa6;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color .2s var(--ease);
}

.footer-toggle[data-astro-cid-hkbrpulz]:hover {
  color: #fff;
}

:root[data-theme="light"] .footer-links[data-astro-cid-hkbrpulz] a[data-astro-cid-hkbrpulz], :root[data-theme="light"] .footer-toggle[data-astro-cid-hkbrpulz] {
  color: #000000a6;
}

:root[data-theme="light"] .footer-links[data-astro-cid-hkbrpulz] a[data-astro-cid-hkbrpulz]:hover, :root[data-theme="light"] .footer-toggle[data-astro-cid-hkbrpulz]:hover {
  color: #000;
}

.footer-clock[data-astro-cid-hkbrpulz] {
  font-variant-numeric: tabular-nums;
}

.weather-orb[data-astro-cid-hkbrpulz] {
  display: inline-block;
  position: relative;
  width: 1.05em;
  height: 1.05em;
  margin-right: .5em;
  vertical-align: -.16em;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 45% 38%,
          var(--orb-l, #9bdcff), var(--orb-m, #2b9bff) 47%, var(--orb-d, #0b3aa8) 100%);
  box-shadow: inset -.08em -.11em .18em #00000057;
  animation: 9s ease-in-out infinite orb-breathe;
}

.weather-orb__glint[data-astro-cid-hkbrpulz] {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 39% 28%,
          var(--orb-g, #ffffffb8) 0%, #fff0 32%);
  animation: 8s ease-in-out infinite orb-drift;
}

@keyframes orb-drift {
  0%, 100% {
    transform: translate(0);
  }

  50% {
    transform: translate(.06em, .045em);
  }
}

@keyframes orb-breathe {
  0%, 100% {
    filter: brightness();
  }

  50% {
    filter: brightness(1.09);
  }
}

@media (prefers-reduced-motion: reduce) {
  .weather-orb[data-astro-cid-hkbrpulz], .weather-orb__glint[data-astro-cid-hkbrpulz] {
    animation: none;
  }
}

@media (width <= 820px) {
  .site-footer[data-astro-cid-hkbrpulz] {
    border-left: 0;
    border-right: 0;
  }
}

@media (width <= 700px) {
  .footer-cols[data-astro-cid-hkbrpulz] {
    gap: 1rem;
  }
}