@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope-var.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Anybody";
  src: url("fonts/anybody-black-italic-wdth.woff2") format("woff2");
  font-weight: 900;
  font-style: italic;
  font-stretch: 50% 150%;
  font-display: swap;
}
@font-face {
  font-family: "Caveat";
  src: url("fonts/caveat-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
:root {
  --ground: #F5F0E6;
  --card: #FCFAF6;
  --tile: #ECE5D8;
  --ink: #17140F;
  --ink-2: #39332B;
  --body: #574F44;
  --muted: #685F54;
  --marker: #4E473E;
  --rule: #E4DCCD;
  --error: #A02016;

  --accent: #2B4ACB;
  --accent-strong: #17140F;
  --accent-tint: #E6E9F7;
  --accent-line: #8C8273;
  --on-accent: #FFFFFF;
  --pen: #2B4ACB;

  --dusk-deep: #0D1230;
  --dusk-mid:  #1B1A45;
  --dusk-rose: #8A3F68;
  --dusk-glow: #F2884B;
  --on-dusk:   #F7F2EA;
  --on-dusk-2: #D3CCDD;
  --chrome: linear-gradient(180deg, #B6DAF4 0%, #C3E1F6 40%, #D9ECF9 72%, #F3F8FC 100%);
  --sunset: linear-gradient(180deg, #EE3424 14%, #F2552C 32%, #F67E34 56%, #F9A743 80%);

  --car-blue:    #3F7DFF;
  --car-red:     #FF3B24;

  --shadow-1: 0 1px 2px rgba(40, 28, 12, 0.06), 0 8px 24px -8px rgba(40, 28, 12, 0.14);
  --shadow-2: 0 2px 4px rgba(40, 28, 12, 0.07), 0 20px 40px -12px rgba(40, 28, 12, 0.22);

  --glass-nav: rgba(245, 240, 230, 0.78);
  --glass-solid: rgba(245, 240, 230, 0.94);
  --glass-edge: rgba(255, 255, 255, 0.65);
  --glass-ring: rgba(255, 255, 255, 0.30);
  --edge-ring: rgba(14, 14, 16, 0.08);
  --glass-shadow: rgba(14, 14, 16, 0.08);
  --glass-hover: rgba(255, 255, 255, 0.40);
  --glass-bar: rgba(233, 233, 240, 0.5);
  --tab-on: var(--card);

  --sheen: rgba(255, 255, 255, 0.14);

  --grain-strength: 0.34;

  --nav-h: 4.25rem;

  --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --display: "Anybody", "Arial Black", Impact, sans-serif;
  --hand: "Caveat", "Bradley Hand", "Segoe Print", cursive;

  --t-poster:  clamp(2.25rem, 4.6vw, 4.25rem);
  --t-hand:    1.375rem;
  --t-card:    1.375rem;
  --t-hero:    3.5rem;
  --t-display: 2.5rem;
  --t-title:   1.75rem;
  --t-head:    1.25rem;
  --t-sub:     1.0625rem;
  --t-body:    1rem;
  --t-small:   0.9375rem;
  --t-label:   0.875rem;
  --t-micro:   0.75rem;

  --track-hero:    -0.02em;
  --track-display: -0.015em;

  --gutter: clamp(1.25rem, 5vw, 3rem);
  --step: 1.5rem;

  --frame: min(90vw, 72rem);
  --frame-read: min(90vw, 56.25rem);

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg:  20px;
  --radius-card: 22px;
  --radius-pill: 999px;

  --dur-fast: 100ms;
  --dur-base: 160ms;
  --dur-page: 460ms;
  --dur-lag:  100ms;
  --ease-out: cubic-bezier(.16, .84, .44, 1);
  --ease-io:  cubic-bezier(.4, 0, .2, 1);

  --dur-enter:    900ms;
  --dur-spring:   560ms;
  --dur-failsafe: 1600ms;
  --stagger:      45ms;
  --ease-long: cubic-bezier(.28, .11, .32, 1);
  --ease-spring: linear(0, 0.028, 0.099, 0.199, 0.315, 0.436, 0.555, 0.666, 0.765,
    0.85, 0.921, 0.977, 1.019, 1.049, 1.069, 1.08, 1.083, 1.082, 1.076, 1.068,
    1.059, 1.049, 1.039, 1.029, 1.021, 1.013, 1.007, 1.003, 0.999, 0.996, 0.994,
    0.993, 0.993, 0.993, 0.994, 0.994, 0.995, 0.996, 0.997, 0.998, 1);
}

*, *::before, *::after { box-sizing: border-box; }

::selection { background: color-mix(in srgb, var(--ink) 24%, transparent); color: var(--ink); }
input, textarea { caret-color: var(--accent); }
html { scrollbar-color: var(--muted) var(--ground); scrollbar-width: thin; }

html {
  -webkit-text-size-adjust: 100%;
  color-scheme: light;
  scroll-padding-top: calc(var(--nav-h) + 1.5rem);
  scroll-behavior: smooth;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  padding: 0.75rem 1.1rem;
  background: var(--card);
  color: var(--ink);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(28, 27, 25, 0.14);
  text-decoration: none;
}
.skip:focus { left: var(--gutter); top: 0.5rem; }

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

body {
  position: relative;
  margin: 0;
  background: var(--ground);
  color: var(--body);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 500;
  line-height: 1.45;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--glass-nav);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: 0 1px 0 var(--rule);
}
.nav--over {
  position: absolute;
  inset: 0 0 auto;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.nav__inner {
  max-width: calc(var(--frame) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: 0.75rem;
  display: flex;
}

.nav__pill {
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav { background: var(--glass-solid); }
  .nav--over { background: none; }
}

.nav a { text-decoration: none; }

.nav__home {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding-inline: 0.75rem;
  border-radius: calc(var(--radius-lg) - 4px);
  font-size: var(--t-label);
  line-height: 1.5;
  font-weight: 600;
  color: var(--ink);
}
.nav__home:focus-visible { border-radius: calc(var(--radius-lg) - 4px); }

.nav__avatar {
  flex: 0 0 auto;
  display: block;
  width: 24px;
  height: 24px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath d='M1 0.5C1 0.573 1.0016 0.6464 0.9953 0.7192C0.9891 0.791 0.9733 0.8676 0.9204 0.9204C0.8676 0.9733 0.791 0.9891 0.7192 0.9953C0.6464 1.0016 0.573 1 0.5 1C0.427 1 0.3536 1.0016 0.2808 0.9953C0.209 0.9891 0.1324 0.9733 0.0796 0.9204C0.0267 0.8676 0.0109 0.791 0.0047 0.7192C-0.0016 0.6464 0 0.573 0 0.5C0 0.427 -0.0016 0.3536 0.0047 0.2808C0.0109 0.209 0.0267 0.1324 0.0796 0.0796C0.1324 0.0267 0.209 0.0109 0.2808 0.0047C0.3536 -0.0016 0.427 0 0.5 0C0.573 0 0.6464 -0.0016 0.7192 0.0047C0.791 0.0109 0.8676 0.0267 0.9204 0.0796C0.9733 0.1324 0.9891 0.209 0.9953 0.2808C1.0016 0.3536 1 0.427 1 0.5Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath d='M1 0.5C1 0.573 1.0016 0.6464 0.9953 0.7192C0.9891 0.791 0.9733 0.8676 0.9204 0.9204C0.8676 0.9733 0.791 0.9891 0.7192 0.9953C0.6464 1.0016 0.573 1 0.5 1C0.427 1 0.3536 1.0016 0.2808 0.9953C0.209 0.9891 0.1324 0.9733 0.0796 0.9204C0.0267 0.8676 0.0109 0.791 0.0047 0.7192C-0.0016 0.6464 0 0.573 0 0.5C0 0.427 -0.0016 0.3536 0.0047 0.2808C0.0109 0.209 0.0267 0.1324 0.0796 0.0796C0.1324 0.0267 0.209 0.0109 0.2808 0.0047C0.3536 -0.0016 0.427 0 0.5 0C0.573 0 0.6464 -0.0016 0.7192 0.0047C0.791 0.0109 0.8676 0.0267 0.9204 0.0796C0.9733 0.1324 0.9891 0.209 0.9953 0.2808C1.0016 0.3536 1 0.427 1 0.5Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

.nav__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nav__links {
  list-style: none;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  gap: 0;
  margin: 0;
  padding: 0;
}
.nav__links > li:first-child,
.nav__links > li:last-child { margin-left: auto; }

.nav__links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 1.125rem;
  border-radius: calc(var(--radius-lg) - 4px);
  font-size: var(--t-label);
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink-2);
  position: relative;
  isolation: isolate;
  background: linear-gradient(currentColor, currentColor) right 1.125rem bottom 10px / 0 1.5px no-repeat;
  transition: color var(--dur-base) var(--ease-io),
              background-size var(--dur-page) var(--ease-long);
}
.nav__links a:hover { color: var(--ink); background-position: left 1.125rem bottom 10px; background-size: calc(100% - 2.25rem) 1.5px; }

.nav__links a[aria-current] {
  color: var(--ink);
}
.nav__links a[aria-current]:hover { background-size: 0 1.5px; }
.nav__current {
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: currentColor;
}

.nav__links > li:last-child a {
  margin-left: 1rem;
  padding-inline: 1.25rem;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--on-accent);
  transition: background-color var(--dur-base) var(--ease-io), transform var(--dur-base) var(--ease-out);
}
.nav__links > li:last-child a:hover { background: var(--ink-2); color: var(--on-accent); }
.nav__links > li:last-child .nav__current { bottom: -9px; background: var(--ink); }

.nav--over .nav__home { color: var(--on-dusk); }
.nav--over .nav__links a { color: var(--on-dusk-2); }
.nav--over .nav__links a:hover,
.nav--over .nav__links a[aria-current] { color: var(--on-dusk); }
.nav--over .nav__links > li:last-child a { background: var(--on-dusk); color: var(--ink); }
.nav--over .nav__links > li:last-child a:hover { background: var(--card); color: var(--ink); }

@media (max-width: 34rem) {
  .nav { position: static; }
  .nav__inner { padding-block: 0.9rem; }
  .nav__pill { width: 100%; flex-wrap: wrap; row-gap: 0.25rem; }
  .nav__home { margin-right: auto; }
  .nav__links { order: 2; flex-basis: 100%; }
  .nav__links > li:first-child { margin-left: -1.125rem; }
  .nav--over { position: absolute; }
}

@media (max-width: 44rem) {
  .nav__pill:has(.section-nav) { width: 100%; flex-wrap: wrap; row-gap: 0.25rem; }
  .nav__pill:has(.section-nav) .nav__home { margin-right: auto; }
  .nav__pill:has(.section-nav) .section-nav { order: 2; flex-basis: 100%; }
}

.wrap {
  max-width: calc(var(--frame-read) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap > * { max-width: none; }

.frame {
  max-width: calc(var(--frame) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.masthead { padding-block: clamp(2rem, 3.6vw, 3.25rem) 0; }

h1 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(2rem, 3.6vw, var(--t-display));
  line-height: 1.1;
  letter-spacing: var(--track-display);
  color: var(--ink);
  margin: 0 0 1.1rem;
  text-wrap: balance;
}

.meta {
  font-family: var(--sans);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--muted);
  letter-spacing: normal;
  margin: 0 0 2.5rem;
}
.meta span + span::before { content: "/"; margin-inline: 0.6rem; color: var(--rule); }

.masthead--feature .facts {
  display: grid;
  gap: 0.875rem;
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2rem);
  border-radius: var(--radius-lg);
  background: var(--tile);
}

.masthead--feature .facts > div {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 1rem;
  align-items: baseline;
  min-width: 0;
}

.masthead--feature .facts dt {
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1.4;
  color: var(--muted);
}

.masthead--feature .facts dd {
  margin: 0;
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}

.masthead--feature .facts dd a { padding-block: 0; }

@media (max-width: 55.99rem) {
  .masthead--feature .facts > div { grid-template-columns: 1fr; gap: 0.15rem; }
}

.brief {
  margin: 0;
  display: grid;
  gap: 1.25rem;
}

.brief > div { display: grid; gap: 0.25rem; }

.brief dt {
  font-size: var(--t-body);
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
}

.brief dd {
  margin: 0;
  font-size: var(--t-body);
  font-weight: 500;
  line-height: 1.45;
  color: var(--body);
  text-wrap: pretty;
}

.masthead--feature + article > *:first-child {
  margin-top: clamp(3.5rem, 8vw, 6.5rem);
}

.section {
  max-width: none;
  display: flow-root;
  clear: both;
}
.section > * { max-width: none; }
.section > * + * { margin-top: var(--step); }
.section > .fig-wide,
.section > .pull { max-width: none; }

.section + .section {
  margin-top: clamp(3.5rem, 8vw, 6.5rem);
  padding-top: clamp(3.5rem, 8vw, 6.5rem);
  border-top: 1px solid var(--rule);
}

.section-nav {
  min-width: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 0;
}

.section-nav a {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  min-height: 44px;
  padding-inline: 1.125rem;
  border-radius: calc(var(--radius-lg) - 4px);
  font-size: var(--t-label);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--ink-2);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: right 1.125rem bottom 10px;
  background-size: 0 1.5px;
  transition: background-color var(--dur-base) var(--ease-io),
              color var(--dur-base) var(--ease-io),
              background-size var(--dur-page) var(--ease-long);
}
.section-nav a:hover { color: var(--ink); background-position: left 1.125rem bottom 10px; background-size: calc(100% - 2.25rem) 1.5px; }
.section-nav a[aria-current]:hover,
.section-nav__back:hover { background-size: 0 1.5px; }
.section-nav__back svg { transition: transform var(--dur-spring) var(--ease-spring); }
.section-nav__back:hover svg { transform: translateX(-3px); }

.section-nav__back { position: relative; }
.section-nav__back::after {
  content: "";
  position: absolute;
  right: -0.125rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 20px;
  background: color-mix(in srgb, var(--ink) 18%, transparent);
}

.section-nav__tabs {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  margin: 0;
  padding: 0 0 0 0.375rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.section-nav__tabs::-webkit-scrollbar { display: none; }
.section-nav__tabs li { scroll-snap-align: end; }

.section-nav a[aria-current] {
  background-color: var(--tab-on);
  color: var(--accent);
  box-shadow: 0 1px 2px rgba(4, 17, 31, 0.07), inset 0 1px 0 var(--glass-edge);
}

.masthead--feature { padding-block: clamp(2rem, 4.4vw, 3.5rem) 0; }

.masthead__eyebrow {
  margin: 0 0 0.75rem;
  font-size: var(--t-label);
  font-weight: 600;
  line-height: 1.5;
  color: var(--muted);
}

.masthead--feature h1 {
  font-size: clamp(2rem, 4.4vw, var(--t-hero));
  line-height: 1.05;
  letter-spacing: var(--track-hero);
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.75rem);
  text-wrap: balance;
}

.masthead__grid { display: grid; gap: 2rem; }

@media (min-width: 56rem) {
  .masthead__grid {
    grid-template-columns: 0.72fr 1fr;
    gap: 4rem;
    align-items: stretch;
  }
}

.masthead__media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 15rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--radius-lg);
  background: var(--tile);
}

.masthead__media .cover {
  width: 100%;
  height: auto;
  max-width: 30rem;
  max-height: 100%;
}

.masthead__media:has(img.cover) {
  padding: 0;
  min-height: 0;
  overflow: hidden;
}
.masthead__media img.cover {
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
}

@media (max-width: 55.999rem) {
  .masthead__media { order: -1; }
}

.facts--strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem 1.25rem;
  margin: 0 0 2.5rem;
  max-width: none;
}
@media (min-width: 34rem) {
  .facts--strip { grid-template-columns: repeat(auto-fit, minmax(11rem, max-content)); column-gap: 2.5rem; }
  .facts--strip:has(> div:nth-child(3)) { grid-template-columns: 1fr 1fr; column-gap: 1.25rem; }
}
@media (min-width: 56rem) {
  .facts--strip:has(> div:nth-child(4)) { grid-template-columns: repeat(4, 1fr); }
  .facts--strip:has(> div:nth-child(3)):not(:has(> div:nth-child(4))) {
    grid-template-columns: 1fr 0.75fr 1.5fr;
  }

}
.facts--strip > div { min-width: 0; }
.facts--strip dt {
  font-size: var(--t-sub);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}
.facts--strip dd {
  margin: 0.4rem 0 0;
  font-size: var(--t-small);
  font-weight: 500;
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}

.masthead--dusk {
  position: relative;
  padding-block: calc(var(--nav-h) + clamp(1.5rem, 4vw, 3rem)) clamp(3rem, 7vw, 5.5rem);
  margin-top: calc(var(--nav-h) * -1);
  background:
    radial-gradient(60% 70% at 85% 30%, color-mix(in srgb, var(--dusk-glow) 30%, transparent) 0%, transparent 70%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--dusk-rose) 22%, var(--ground)) 0%,
      color-mix(in srgb, var(--dusk-glow) 20%, var(--ground)) 55%,
      var(--ground) 100%);
}
.masthead--dusk .masthead__grid,
.masthead--case .masthead__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 56rem) {
  .masthead--dusk .masthead__grid,
  .masthead--case .masthead__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}
.masthead__back {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  margin-bottom: 0.75rem;
  font-size: var(--t-label);
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
}
.masthead__back:hover { color: var(--ink); }
.masthead__back svg { transition: transform var(--dur-spring) var(--ease-spring); }
.masthead__back:hover svg { transform: translateX(-3px); }
.masthead--dusk h1,
.masthead--case h1 {
  display: block;
  font-size: clamp(2.5rem, 5.6vw, 4.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
  margin: 0;
  text-wrap: balance;
}
.masthead--dusk .masthead__media,
.masthead--case .masthead__media {
  min-height: 0;
  padding: 0;
  background: none;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-2), inset 0 0 0 1px var(--edge-ring);
  --tilt: perspective(1800px) rotateY(-7deg) rotateX(2deg);
  transform: var(--tilt);
  transform-origin: left center;
}
.masthead--dusk .masthead__media:not(:has(img)),
.masthead--case .masthead__media:not(:has(img)) {
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background: var(--card);
}
@media (max-width: 55.999rem) {
  .masthead--dusk .masthead__media,
  .masthead--case .masthead__media { order: 0; --tilt: translate(0); }
}
@media (max-width: 34rem) {
  .masthead--dusk { margin-top: 0; padding-top: clamp(1.5rem, 6vw, 2.5rem); }
}

.masthead--page { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.masthead--page .meta { margin: 1rem 0 0; color: var(--ink-2); }
article.wrap > p,
article.wrap > h2 { max-width: 44rem; }
article.wrap > h2 {
  font-size: var(--t-title);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.cs {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1rem, 3vw, 2rem);
}
@media (min-width: 75rem) {
  .cs {
    grid-template-columns: 13.5rem minmax(0, 1fr);
    column-gap: clamp(3rem, 5vw, 4.5rem);
    align-items: start;
  }
}

.cs__rail { display: contents; }
@media (min-width: 75rem) {
  .cs__rail {
    display: grid;
    gap: 2rem;
    position: sticky;
    top: calc(var(--nav-h) + 1.5rem);
    max-height: calc(100svh - var(--nav-h) - 3rem);
    overflow-y: auto;
    scrollbar-width: none;
  }
}

.cs .section-nav {
  position: sticky;
  top: var(--nav-h);
  z-index: 5;
  margin-inline: calc(var(--gutter) * -1);
  padding: 0.25rem var(--gutter);
  background: var(--glass-nav);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 1px 0 var(--rule);
}
@media (max-width: 34rem) { .cs .section-nav { top: 0; } }
.cs .section-nav__tabs { padding-left: 0; }

@media (min-width: 75rem) {
  .cs .section-nav {
    position: static;
    margin: 0;
    padding: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }
  .cs .section-nav__tabs {
    flex-direction: column;
    align-items: stretch;
    overflow: visible;
    border-left: 1px solid var(--rule);
  }
  .cs .section-nav__glider { display: none; }
  .cs .section-nav a {
    position: relative;
    min-height: 40px;
    padding-inline: 1.25rem 0;
    border-radius: 0;
    background: none;
    color: var(--muted);
  }
  .cs .section-nav a:hover { color: var(--ink); }
  .cs .section-nav a[aria-current] {
    background: none;
    box-shadow: none;
    color: var(--ink);
  }
  .cs .section-nav a[aria-current]::before {
    content: "";
    position: absolute;
    left: -4px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -3.5px;
    border-radius: 50%;
    background: var(--accent);
  }
}

.cs__body { min-width: 0; }
.cs__body .section > * { max-width: 44rem; }
.cs__body .section > figure,
.cs__body .section > .pull { max-width: none; }
.cs__body .section:first-child { margin-top: 0; }
.cs .fig-wide,
.cs .fig-pair { margin-inline: 0; }

.cs .section h2 {
  font-size: var(--t-title);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.cs .fig-wide,
.cs .fig-pair {
  padding: 0.75rem 0.75rem 0.9rem;
  background: var(--card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-1), inset 0 0 0 1px var(--edge-ring);
}
.cs .fig-wide img,
.cs .fig-pair img,
.cs .fig-wide video {
  border: 0;
  border-radius: calc(var(--radius-card) - 0.75rem);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.cs .fig-wide figcaption,
.cs .fig-pair figcaption {
  margin-top: 0.75rem;
  padding-inline: 0.25rem;
  max-width: 44rem;
}

.cs .pull {
  margin-inline: 0;
  min-height: 60svh;
}

@supports (animation-timeline: scroll()) {
  .nav--case {
    animation: nav-edge linear both;
    animation-timeline: scroll(root);
    animation-range: 0 4rem;
  }
  @keyframes nav-edge {
    from { box-shadow: 0 1px 0 transparent; }
    to   { box-shadow: 0 1px 0 var(--rule); }
  }
}

.masthead--case { padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3rem); }

.masthead--case .facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 2rem;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: 1.5rem 0 0;
  border-radius: 0;
  background: none;
  border-top: 1px solid var(--rule);
}
@media (min-width: 56rem) {
  .masthead--case .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.masthead--case .facts > div { display: block; }
.masthead--case .facts dt {
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.masthead--case .facts dd {
  margin: 0.3rem 0 0;
  font-size: var(--t-label);
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink-2);
}

@media (min-width: 75rem) {
  .cs--case .cs__rail { gap: 1.25rem; }
}

.cs--case .section-nav__tabs { counter-reset: tab; }
.cs--case .section-nav__tabs > li { counter-increment: tab; }
@media (min-width: 75rem) {
  .cs--case .section-nav a {
    align-items: baseline;
    gap: 0.75rem;
    min-height: 0;
    padding-block: 0.5rem;
    line-height: 1.35;
    white-space: normal;
    text-wrap: pretty;
  }
  .cs--case .section-nav a::after {
    content: counter(tab, decimal-leading-zero);
    content: counter(tab, decimal-leading-zero) / "";
    order: -1;
    flex: none;
    width: 1.25rem;
    font-size: var(--t-micro);
    font-variant-numeric: tabular-nums;
    color: var(--muted);
  }
  .cs--case .section-nav a[aria-current],
  .cs--case .section-nav a[aria-current]::after { color: var(--accent); }
  .cs--case .section-nav a[aria-current]::before { top: 0.5rem; margin-top: 0.45rem; }
}

.cs--case .cs__body { counter-reset: sec; }
.cs--case .section { position: relative; counter-increment: sec; }
.cs--case .section + .section {
  margin-top: clamp(4rem, 9vw, 7rem);
  padding-top: 0;
  border-top: 0;
}
.cs--case .section + .section::before { content: none; }
.cs--case .section > h2:first-child { margin-top: 0; }
.cs--case .section h2 {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  max-width: none;
}
.cs--case .section h2::before {
  content: counter(sec, decimal-leading-zero);
  content: counter(sec, decimal-leading-zero) / "";
  flex: none;
  font-size: var(--t-head);
  font-weight: 600;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.cs--case .section h2::after {
  content: "";
  flex: 1 1 2rem;
  align-self: center;
  height: 1px;
  background: var(--rule);
}
@media (min-width: 75rem) {
  .cs--case .section h2::before {
    position: absolute;
    right: calc(100% + 1.25rem);
    line-height: calc(var(--t-title) * 1.15);
  }
}
@media (max-width: 45.99rem) {
  .cs--case .section h2::after { content: none; }
  .cs--case .section + .section {
    margin-top: clamp(3rem, 12vw, 4rem);
    padding-top: clamp(3rem, 12vw, 4rem);
    border-top: 1px solid var(--rule);
  }
}

.cs__body .section > .split {
  max-width: none;
  margin-block: clamp(2rem, 4vw, 3rem);
}
.split > .fig-wide { margin-block: clamp(1.5rem, 4vw, 2rem) 0; }
@media (min-width: 64rem) {
  .split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
  }
  .split > .fig-wide { margin: 0; }
  .split > .fig-wide figcaption { max-width: none; }
}

.annot--cs { display: none; }
@media (min-width: 80rem) {
  .cs--case .section > .annot--cs {
    position: absolute;
    top: 3.5rem;
    left: calc(44rem + 1.5rem);
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    width: 9.5rem;
    margin: 0;
    transform: rotate(-4deg);
  }
  .cs--case .section > .annot--cs .annot__arrow { flex: none; margin-top: 0.2rem; }
  .cs--case .section > .annot--cs + p { margin-top: var(--step); }
}
@media (min-width: 56rem) {
  .masthead--case .annot--cover {
    display: flex;
    align-items: flex-end;
    gap: 0.4rem;
    margin-top: 1.75rem;
    transform: rotate(-3deg);
  }
}

.site-footer--sunset {
  --scene: clamp(10rem, 24vw, 20rem);
  padding-top: var(--scene);
  background:
    linear-gradient(180deg,
      transparent 0,
      color-mix(in srgb, var(--dusk-deep) 30%, transparent) calc(var(--scene) * 0.55),
      color-mix(in srgb, var(--dusk-deep) 88%, transparent) calc(var(--scene) * 0.95),
      var(--dusk-deep) calc(var(--scene) + 2rem)),
    url(images/scene/work-backdrop.webp) 60% 0 / 100% auto no-repeat,
    var(--dusk-deep);
}
.site-footer__next {
  grid-column: 3 / -1;
  grid-row: 1;
  justify-self: end;
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 1.25rem;
  align-items: center;
  text-decoration: none;
  color: var(--on-dusk);
}
.site-footer__next-label {
  grid-column: 1;
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dusk);
}
.site-footer__next-title {
  grid-column: 1;
  font-size: var(--t-head);
  font-weight: 600;
  line-height: 1.3;
  color: var(--on-dusk);
}
.site-footer__next-disc {
  grid-column: 2;
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1.5px var(--on-dusk);
  color: var(--on-dusk);
  transition: background-color var(--dur-base) var(--ease-io), color var(--dur-base) var(--ease-io);
}
.site-footer__next-disc svg { transition: transform var(--dur-base) var(--ease-out); }
.site-footer__next:hover { color: var(--on-dusk); }
@media (max-width: 64rem) {
  .site-footer__next { grid-column: 1 / -1; grid-row: auto; justify-self: start; margin-top: 0.5rem; }
}
.site-footer__next:hover .site-footer__next-disc { background: var(--on-dusk); color: var(--ink); }
.site-footer__next:hover .site-footer__next-disc svg { transform: translateX(3px); }

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: max(36rem, 100vh, calc(60vw * 0.6562 + var(--nav-h) + 5rem));
  min-height: max(36rem, 100svh, calc(60vw * 0.6562 + var(--nav-h) + 5rem));
  padding-block: calc(var(--nav-h) + 1rem) clamp(5rem, 9vw, 8rem);
  color: var(--on-dusk);
  background: var(--dusk-deep);
}

.hero__scene {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background:
    radial-gradient(70% 45% at 78% 96%, color-mix(in srgb, var(--dusk-glow) 90%, transparent) 0%, transparent 70%),
    radial-gradient(45% 30% at 22% 100%, color-mix(in srgb, var(--dusk-rose) 70%, transparent) 0%, transparent 75%),
    linear-gradient(180deg, var(--dusk-deep) 0%, var(--dusk-mid) 42%, var(--dusk-rose) 78%, var(--dusk-glow) 100%);
}
.hero__sky {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
}

.hero__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--dusk-deep) 78%, transparent) 0%,
    color-mix(in srgb, var(--dusk-deep) 50%, transparent) 36%,
    transparent 60%);
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  margin-top: clamp(1.5rem, 2.5vw, 2rem);
  padding: 0 1.35rem;
  border-radius: var(--radius-pill);
  background: var(--on-dusk);
  color: var(--ink);
  font-size: var(--t-label);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--dur-base) var(--ease-io);
}
.hero__cta svg { flex: 0 0 auto; transition: transform var(--dur-base) var(--ease-out); }
.hero__cta:hover { background: var(--card); color: var(--ink); }
.hero__cta:hover svg { transform: translateY(2px); }
.hero__cta:focus-visible { outline: 2px solid var(--on-dusk); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .hero__cta svg { transition: none; }
}

.hero__stage {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: clip;
  pointer-events: none;
}

.hero {
  --car-left: max(30%, max(var(--gutter), (100% - var(--frame)) / 2) + 22rem);
  --car-w: min(60%, 94% - var(--car-left));
}
.hero__rig {
  position: absolute;
  left: var(--car-left);
  bottom: 11.2%;
  width: var(--car-w);
  aspect-ratio: 1402 / 920;
}
.hero__car {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.hero__rig::before,
.hero__rig::after {
  content: "";
  position: absolute;
  inset: 0 -6% -8% -6%;
  z-index: -1;
  pointer-events: none;
}
.hero__rig::before {
  background:
    radial-gradient(8% 2.2% at 25% 91.9%, var(--dusk-deep) 40%, transparent),
    radial-gradient(4.5% 1.8% at 8.5% 86.6%, var(--dusk-deep) 35%, transparent),
    radial-gradient(7% 2% at 84.8% 91.5%, var(--dusk-deep) 35%, transparent),
    radial-gradient(37% 4.2% at 58% 90.6%, color-mix(in srgb, var(--dusk-deep) 70%, transparent) 40%, transparent),
    radial-gradient(50% 9% at 55% 91.7%, color-mix(in srgb, var(--dusk-deep) 55%, transparent) 30%, transparent);
  filter: blur(3px);
}
.hero__rig::after {
  background:
    radial-gradient(12.5% 4.2% at 43.8% 93.5%, color-mix(in srgb, var(--car-red) 38%, transparent), transparent),
    radial-gradient(12.5% 4.2% at 81.3% 93.5%, color-mix(in srgb, var(--car-red) 34%, transparent), transparent),
    radial-gradient(7.1% 3.2% at 30.4% 92.1%, color-mix(in srgb, var(--car-blue) 45%, transparent), transparent),
    radial-gradient(4.5% 2.8% at 91.1% 91.7%, color-mix(in srgb, var(--dusk-glow) 35%, transparent), transparent);
  filter: blur(6px);
}

.hero__vapour {
  position: absolute;
  left: calc(var(--car-left) - var(--car-w) * 0.55);
  bottom: 11.2%;
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 22%);
          mask-image: linear-gradient(to top, transparent 0%, #000 22%);
  width: calc(var(--car-w) * 2.1);
  height: auto;
  aspect-ratio: 1600 / 500;
  mix-blend-mode: screen;
  opacity: 0.9;
  z-index: 1;
  pointer-events: none;
}

.hero__inner { width: 100%; }
.hero__text { min-width: 0; max-width: 40rem; }

.hero__headline {
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-stretch: 108%;
  font-size: var(--t-poster);
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0;
  color: var(--on-dusk);
  transform: skewX(-6deg);
  transform-origin: left bottom;
}
.hero__chrome {
  display: block;
  max-width: 6.4em;
}
.hero__future {
  display: block;
  font-size: 1.42em;
  line-height: 0.92;
  margin-top: 0.04em;
  white-space: nowrap;
}
.hero__chrome,
.hero__future {
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-right: 0.08em;
}
.hero__chrome { background-image: var(--chrome); }
.hero__future { background-image: var(--sunset); }
.hero__headline.is-split .hero__chrome,
.hero__headline.is-split .hero__future { background-image: none; }
.hero__headline.is-split .hero__chrome .w,
.hero__headline.is-split .hero__future .w {
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero__headline.is-split .hero__chrome .w { background-image: var(--chrome); }
.hero__headline.is-split .hero__future .w { background-image: var(--sunset); }
.hero__intro {
  max-width: 27rem;
  margin: clamp(1.25rem, 2.5vw, 2rem) 0 0;
  color: var(--on-dusk-2);
  font-size: var(--t-sub);
  line-height: 1.5;
  position: relative;
}
@media (min-width: 60rem) {
  .hero__intro { margin-top: 0.75rem; }
}
.hero__intro::before {
  content: "";
  position: absolute;
  inset: -1.25rem -1.75rem;
  z-index: -1;
  border-radius: 2rem;
  background: color-mix(in srgb, var(--dusk-deep) 72%, transparent);
  filter: blur(22px);
  pointer-events: none;
}

@media (max-width: 59.99rem) {
  .hero {
    --car-w: 78%;
    justify-content: flex-start;
    min-height: 100vh;
    min-height: 100svh;
    padding-top: calc(var(--nav-h) + 1.5rem);
    padding-bottom: calc(var(--car-w) * 0.6562 + 7rem);
  }
  .hero__scene::after {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--dusk-deep) 75%, transparent) 0%,
      color-mix(in srgb, var(--dusk-deep) 55%, transparent) 50%,
      transparent 72%);
  }
  .hero__sky { object-position: 74% 100%; }
  .hero { --car-left: calc((100% - var(--car-w)) / 2); }
}
@media (max-width: 44rem) {
  .hero { --car-w: 96%; }
}
@media (max-width: 34rem) {
  .hero { padding-top: 9rem; }
}

.edge-torn { position: relative; }
.edge-torn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(1.5rem, 3.4vw, 3rem);
  pointer-events: none;
  background: var(--ground);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 27C34 25 52 30 88 28 128 26 150 19 196 21 238 23 262 31 312 30 352 29 370 22 414 20 470 18 498 27 548 29 590 31 618 25 660 24 706 23 724 30 770 31 818 32 846 22 896 19 936 17 962 24 1004 26 1052 28 1080 21 1124 20 1172 19 1196 27 1240 29 1286 31 1316 24 1356 23 1396 22 1418 26 1440 25V48H0Z'/%3E%3C/svg%3E") 0 100% / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 27C34 25 52 30 88 28 128 26 150 19 196 21 238 23 262 31 312 30 352 29 370 22 414 20 470 18 498 27 548 29 590 31 618 25 660 24 706 23 724 30 770 31 818 32 846 22 896 19 936 17 962 24 1004 26 1052 28 1080 21 1124 20 1172 19 1196 27 1240 29 1286 31 1316 24 1356 23 1396 22 1418 26 1440 25V48H0Z'/%3E%3C/svg%3E") 0 100% / 100% 100% no-repeat;
}
.edge-torn::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: clamp(1.5rem, 3.4vw, 3rem);
  pointer-events: none;
  z-index: 1;
  background: color-mix(in srgb, var(--dusk-deep) 35%, transparent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 27C34 25 52 30 88 28 128 26 150 19 196 21 238 23 262 31 312 30 352 29 370 22 414 20 470 18 498 27 548 29 590 31 618 25 660 24 706 23 724 30 770 31 818 32 846 22 896 19 936 17 962 24 1004 26 1052 28 1080 21 1124 20 1172 19 1196 27 1240 29 1286 31 1316 24 1356 23 1396 22 1418 26 1440 25V48H0Z'/%3E%3C/svg%3E") 0 100% / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 27C34 25 52 30 88 28 128 26 150 19 196 21 238 23 262 31 312 30 352 29 370 22 414 20 470 18 498 27 548 29 590 31 618 25 660 24 706 23 724 30 770 31 818 32 846 22 896 19 936 17 962 24 1004 26 1052 28 1080 21 1124 20 1172 19 1196 27 1240 29 1286 31 1316 24 1356 23 1396 22 1418 26 1440 25V48H0Z'/%3E%3C/svg%3E") 0 100% / 100% 100% no-repeat;
}
.edge-torn::after { z-index: 2; }

.annot {
  margin: 0;
  font-family: var(--hand);
  font-weight: 600;
  font-size: var(--t-hand);
  line-height: 1.1;
  color: var(--pen);
  pointer-events: none;
}
.annot__arrow {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

article { display: flow-root; }
article p, article ul, article ol { max-width: none; }

.section:first-child > h2 + p {
  color: var(--ink-2);
}

article > * + * { margin-top: var(--step); }

.section > p + p { margin-top: 1.25rem; }

.section > * + h2 { margin-top: calc(var(--step) * 3.5); }

h2 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.2vw, var(--t-title));
  line-height: 1.3;
  letter-spacing: normal;
  margin-top: calc(var(--step) * 3.2);
  margin-bottom: 0;
}

article > h2::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 1px;
  background: var(--rule);
  margin-bottom: 1.15rem;
}
article > h2:first-of-type::before { display: none; }

article > h2:first-of-type { margin-top: calc(var(--step) * 1.75); }

.turn {
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1.4;
  color: var(--muted);
}

.section > .turn + p { margin-top: 0.35rem; }

article > .pull { max-width: none; }

.pull {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(var(--t-title), 4vw, var(--t-hero));
  line-height: 1.15;
  letter-spacing: var(--track-display);
  color: var(--ink);
  margin-block: clamp(3.5rem, 8vw, 6.5rem);
  margin-inline: calc((var(--frame-read) - var(--frame)) / 2);
  min-height: 80svh;
  display: grid;
  align-content: center;
  text-wrap: pretty;
}

.pull p { margin: 0; }

.pull cite {
  display: block;
  margin-top: 1.5rem;
  font-family: var(--sans);
  font-size: var(--t-label);
  font-style: normal;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--muted);
}

.pull::before {
  content: "\201C";
  display: block;
  font-size: 2em;
  font-weight: 600;
  line-height: 1;
  color: var(--rule);
  margin-left: -0.045em;
  margin-bottom: -0.475em;
}
.findings {
  margin-block: calc(var(--step) * 1.5);
  padding: 0;
  list-style: none;
  counter-reset: finding;
}

.findings li {
  counter-increment: finding;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  padding-block: 1.125rem;
  font-size: var(--t-head);
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
}

.findings li:first-child { padding-top: 0; }
.findings li:last-child { padding-bottom: 0; }
.findings li + li { border-top: 1px solid var(--rule); }

.findings li::before {
  content: counter(finding, decimal-leading-zero);
  content: counter(finding, decimal-leading-zero) / "";
  font-size: var(--t-label);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: calc(var(--t-head) * 1.45);
  color: var(--muted);
}

@media (max-width: 40rem) {
  .findings li { font-size: var(--t-sub); grid-template-columns: 2rem minmax(0, 1fr); }
  .findings li::before { line-height: calc(var(--t-sub) * 1.45); }
}

h2 { color: var(--ink); }

strong { font-weight: 600; color: var(--ink); }

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: text-decoration-thickness var(--dur-fast) var(--ease-io);
}
a:hover { text-decoration-thickness: 3px; }
article a { padding-block: 0.35rem; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.nav--over :focus-visible,
.work :focus-visible { outline-color: var(--on-dusk); }

.todo {
  color: var(--marker);
  font-family: var(--sans);
  font-size: 0.85em;
  border: 1px dashed color-mix(in srgb, var(--marker) 80%, transparent);
  border-radius: var(--radius-sm);
  padding: 0.05em 0.4em;
  white-space: normal;
}

h1 .todo {
  display: block;
  width: fit-content;
  max-width: 100%;
  font-size: var(--t-label);
  line-height: 1.5;
  letter-spacing: 0;
  margin-top: 0.85rem;
}

.note {
  color: var(--ink-2);
  font-size: var(--t-small);
  line-height: 1.5;
  background: var(--tile);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
  box-shadow: inset 0 1px 0 var(--glass-edge);
}

figure { margin: 0; }
.fig-aside,
.fig-pair,
.fig-wide { margin-block: clamp(2.75rem, 6vw, 4.5rem); }

.fig-wide,
.fig-pair {
  margin-inline: calc((var(--frame-read) - var(--frame)) / 2);
}

.fig-aside { width: min(18rem, 100%); }

article > .fig-wide,
article > .fig-pair { max-width: none; }

.fig-pair__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 40rem) {
  .fig-pair__row { grid-template-columns: 1fr; }
}

@media (min-width: 46rem) {
  .fig-aside {
    float: right;
    clear: right;
    width: 13rem;
    margin: 0.35rem 0 1.25rem 2rem;
  }
  h2 { clear: none; }
}
h2 { clear: both; }

.fig-wide,
.pull { clear: both; }

.fig-aside img,
.fig-pair img,
.fig-wide img,
.fig-aside video,
.fig-pair video,
.fig-wide video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}
.fig-aside img,
.fig-pair img,
.fig-wide img {
  border: 1px solid var(--rule);
}
.fig-aside figcaption,
.fig-pair figcaption,
.fig-wide figcaption,
.fig-phones figcaption {
  font-family: var(--sans);
  font-size: var(--t-micro);
  line-height: 1.4;
  color: var(--muted);
  margin-top: 0.6rem;
}

.fig-diagram svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--sans);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
}
.dg-scroll { overflow-x: auto; border-radius: var(--radius-md); }
@media (max-width: 40rem) {
  .dg-scroll svg { min-width: 46rem; }
}
.dg-node { fill: var(--card); stroke: var(--accent-line); stroke-width: 1.5; }
.dg-node--key { stroke: var(--ink); stroke-width: 2.5; }
.dg-line { fill: none; stroke: var(--accent-line); stroke-width: 1.5; }
.dg-head { fill: var(--accent-line); }
.dg-text { fill: var(--ink); font-size: 17px; font-weight: 500; }
.dg-label { fill: var(--muted); font-size: 14px; }

.board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
  padding: 1.5rem;
  font-family: var(--sans);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
}
@media (max-width: 64rem) { .board { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40rem) { .board { grid-template-columns: 1fr; } }
.board__head {
  margin: 0 0 0.75rem;
  font-size: var(--t-label);
  font-weight: 600;
  color: var(--ink);
}
.board ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.board li {
  font-size: var(--t-label);
  line-height: 1.35;
  color: var(--ink-2);
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm);
}
.board li.board__q { border-style: dashed; color: var(--muted); }

.fig-phones {
  margin-block: clamp(2.75rem, 6vw, 4.5rem);
  clear: both;
}
.fig-phones__row {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: start;
  gap: clamp(1rem, 3vw, 2.5rem);
}
.fig-phones--pair .fig-phones__row { grid-template-columns: 1fr 1fr; }
.fig-phones img {
  display: block;
  width: 100%;
  max-width: 19rem;
  height: auto;
}
.fig-phones--pair img { max-width: 16rem; }

.fig__slot {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  padding: 1.25rem;
  border: 1px dashed color-mix(in srgb, var(--marker) 80%, transparent);
  border-radius: var(--radius-md);
  font-family: var(--sans);
  font-size: var(--t-micro);
  line-height: 1.4;
  color: var(--marker);
  text-align: center;
  text-wrap: pretty;
}
.fig--placeholder figcaption { display: none; }

.fig__slot--wide { aspect-ratio: 16 / 9; }
.fig__slot--tall { aspect-ratio: 3 / 4; }
.fig__slot--phone { aspect-ratio: 9 / 19.5; }

.work { padding-block: 0 clamp(2.5rem, 7vh, 4.5rem); }

.work {
  position: relative;
  isolation: isolate;
  padding-block: calc(clamp(1.5rem, 3.4vw, 3rem) + clamp(1.5rem, 3vw, 2.5rem)) clamp(4rem, 7vw, 6rem);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--dusk-deep) 0%, transparent) 82%, var(--dusk-deep) 100%),
    url(images/scene/work-backdrop.webp) 70% 0 / cover no-repeat,
    var(--dusk-glow);
}
.work::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto;
  height: clamp(1.5rem, 3.4vw, 3rem);
  pointer-events: none;
  background: var(--ground);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 27C34 25 52 30 88 28 128 26 150 19 196 21 238 23 262 31 312 30 352 29 370 22 414 20 470 18 498 27 548 29 590 31 618 25 660 24 706 23 724 30 770 31 818 32 846 22 896 19 936 17 962 24 1004 26 1052 28 1080 21 1124 20 1172 19 1196 27 1240 29 1286 31 1316 24 1356 23 1396 22 1418 26 1440 25V0H0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 27C34 25 52 30 88 28 128 26 150 19 196 21 238 23 262 31 312 30 352 29 370 22 414 20 470 18 498 27 548 29 590 31 618 25 660 24 706 23 724 30 770 31 818 32 846 22 896 19 936 17 962 24 1004 26 1052 28 1080 21 1124 20 1172 19 1196 27 1240 29 1286 31 1316 24 1356 23 1396 22 1418 26 1440 25V0H0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
@media (max-width: 45.99rem) {
  .work {
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--dusk-deep) 0%, transparent) 0, color-mix(in srgb, var(--dusk-deep) 0%, transparent) 34rem, var(--dusk-deep) 56rem) 0 0 / 100% 100% no-repeat,
      url(images/scene/work-backdrop.webp) 70% 0 / auto 56rem no-repeat,
      var(--dusk-deep);
  }
}
.work__label {
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
  font-size: var(--t-label);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

.cards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 46rem) {
  .cards {
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.25rem, 2.5vw, 2rem);
  }
}
@media (min-width: 64rem) {
  .cards { grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 1.6vw, 1.5rem); }
}

.cards .card {
  padding: 0.75rem;
  background: var(--card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-2), inset 0 0 0 1px var(--edge-ring);
  transition: transform var(--dur-base) var(--ease-out);
}
.cards .card__media { border-radius: calc(var(--radius-card) - 0.75rem); }

.cards .card__media {
  align-items: flex-end;
  padding: 4.25rem 1.25rem 0;
  background:
    radial-gradient(110% 80% at 50% 0%, color-mix(in srgb, var(--dusk-glow) 14%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--dusk-rose) 8%, var(--card)) 0%, var(--tile) 100%);
}
.cards .card__media > img.cover,
.cards .card__media > img.cover--contain {
  object-fit: cover;
  object-position: center top;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 -1px 0 var(--edge-ring), 0 6px 22px -6px rgba(40, 28, 12, 0.28);
}
.cards .card__media > svg.cover { align-self: center; }
.cards .card__caption { margin-top: 0.85rem; padding-inline: 0.5rem; }
.cards .card__caption { padding-bottom: 0.5rem; padding-right: 3.75rem; }
.cards .card__title { font-size: var(--t-card); font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; }

.card__num {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--rule), var(--shadow-1);
  color: var(--muted);
  font-size: var(--t-micro);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.cards .card__media > .now__status { left: auto; right: 0.75rem; }
.cards .card__media > .now__status { top: auto; bottom: 0.75rem; }

.card__go {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-accent);
  transition: background-color var(--dur-base) var(--ease-io);
}
.card__go svg { transition: transform var(--dur-spring) var(--ease-spring); }
a.card:hover .card__go,
a.card:focus-visible .card__go { background: var(--accent); }
a.card:hover .card__go svg,
a.card:focus-visible .card__go svg { transform: translateX(3px); }

.cards a.card:hover .card__media, .cards a.card:focus-visible .card__media { transform: none; }

.card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  text-decoration: none;
  color: inherit;
  position: relative;
}

.card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--tile);
  transition: transform var(--dur-base) var(--ease-out);
  position: relative;
}
.card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px var(--edge-ring),
    inset 0 1px 0 var(--glass-edge);
}
.card__media--empty {
  border: 1px dashed color-mix(in srgb, var(--marker) 80%, transparent);
}
.card__slot {
  padding: 1.25rem;
  max-width: 26rem;
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1.4;
  color: var(--marker);
  text-align: center;
  text-wrap: pretty;
}
.cover {
  display: block;
  width: 100%;
  height: 100%;
}

.card__media > img.cover { object-fit: cover; }
.cover--crop-left { object-position: left center; }
.card__media > img.cover--contain { object-fit: contain; }
a.card:hover .card__media, a.card:focus-visible .card__media { transform: translateY(-4px); }
a.card:hover .card__meta, a.card:focus-visible .card__meta { color: var(--accent); }

.card--locked .card__media > svg.cover {
  filter: blur(4px);
  transform: scale(1.04);
}

.card__lock {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 1;
  display: flex;
  align-items: center;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-md);
  background: var(--ink);
  color: var(--ground);
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1.4;
  pointer-events: none;
  transition: transform var(--dur-base) var(--ease-out);
}
a.card--locked:hover .card__lock,
a.card--locked:focus-visible .card__lock { transform: translateY(-4px); }

.card__lock-label {
  max-width: 0;
  padding-inline-start: 0.375rem;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-io);
}
a.card--locked:hover .card__lock-label,
a.card--locked:focus-visible .card__lock-label {
  max-width: 9rem;
  opacity: 1;
}
@media (hover: none) {
  .card__lock-label { max-width: 9rem; opacity: 1; }
}

.card--planned { cursor: default; }

.card__media > .now__status {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1;
}

.now__status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--tile);
  color: var(--ink);
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1.2;
  box-shadow: inset 0 0 0 1px var(--edge-ring), inset 0 1px 0 var(--glass-edge);
}
.now__status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.card__caption {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.card__title {
  flex: 0 0 auto;
  font-size: var(--t-label);
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}

.card__meta {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--t-label);
  font-weight: 600;
  line-height: 1.5;
  color: var(--muted);
  transition: color var(--dur-base) var(--ease-io);
}
.card__meta > span + span::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-inline-end: 0.375rem;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 0.15em;
}

.pov {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
  padding-block: clamp(4rem, 9vw, 7rem) clamp(3.5rem, 7vw, 5.5rem);
}
@media (min-width: 64rem) {
  .pov { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.pov__label {
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  font-size: var(--t-label);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.pov__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2rem);
  max-width: 34rem;
}
.pov__head {
  margin: 0 0 0.4rem;
  font-size: var(--t-card);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
.pov__list p {
  margin: 0;
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--body);
  text-wrap: pretty;
}

.pov__art { min-width: 0; }
.flux {
  display: block;
  width: 100%;
  max-width: 44rem;
  height: auto;
  margin-inline: auto;
  overflow: visible;
}
.flux__annot {
  font-family: var(--hand);
  font-weight: 600;
  font-size: 23px;
  fill: var(--pen);
}
.flux__arrow {
  fill: none;
  stroke: var(--pen);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pov__note {
  width: 15rem;
  margin: 0.75rem auto clamp(1.5rem, 3vw, 2.5rem);
  position: relative;
  padding: 1.6rem 1.25rem 1.25rem;
  background: var(--card);
  border-radius: 3px;
  box-shadow: var(--shadow-1);
  transform: rotate(-3deg);
}
.pov__note::before {
  content: "";
  position: absolute;
  top: -0.7rem;
  left: 50%;
  width: 4.5rem;
  height: 1.4rem;
  margin-left: -2.25rem;
  background: color-mix(in srgb, var(--tile) 75%, transparent);
  box-shadow: 0 1px 2px rgba(40, 28, 12, 0.08);
  transform: rotate(-4deg);
}
.pov__note-head {
  margin: 0 0 0.75rem;
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.pov__note ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.pov__note li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--hand);
  font-weight: 600;
  font-size: var(--t-head);
  line-height: 1.1;
  color: var(--pen);
}
.pov__note svg {
  flex: 0 0 auto;
  fill: none;
  stroke: var(--pen);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 46rem) {
  .flux__annot,
  .flux__arrow { display: none; }
}

.contact { padding-block: clamp(2rem, 5vh, 3.5rem) 0; }
.masthead + .contact { padding-top: 0.875rem; }
.contact__intro { margin: 0 0 2rem; color: var(--body); }

.form { max-width: none; }
.form__row { display: grid; gap: 1.15rem; }
@media (min-width: 34rem) {
  .form__row--pair { grid-template-columns: 1fr 1fr; }
}
.form__field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.15rem; }

.form__label {
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}

.form__input,
.form__textarea {
  font-family: inherit;
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: 0.7rem 0.85rem;
  width: 100%;
  transition: border-color var(--dur-base) var(--ease-io),
              box-shadow var(--dur-base) var(--ease-io);
}
.form__textarea { min-height: 8.5rem; resize: vertical; }
.form__input::placeholder,
.form__textarea::placeholder { color: var(--muted); opacity: 1; }

.form__input:hover,
.form__textarea:hover { border-color: color-mix(in srgb, var(--ink) 28%, transparent); }

.form__input:focus-visible,
.form__textarea:focus-visible { border-color: var(--accent); }

.form__input:user-invalid,
.form__textarea:user-invalid {
  border-color: var(--error);
  box-shadow: inset 0 0 0 1px var(--error);
}
.form__hint {
  font-size: var(--t-label);
  line-height: 1.4;
  color: var(--muted);
}
.form__input:user-invalid ~ .form__hint,
.form__textarea:user-invalid ~ .form__hint { color: var(--error); }

.form__actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.4rem; }

.form__note { margin: 1.1rem 0 0; font-size: var(--t-small); line-height: 1.5; }

.gate-hero {
  --car-left: -10%;
  --car-w: 60%;
  align-items: flex-start;
  padding-block: clamp(2rem, 6vh, 4rem) clamp(4.5rem, 12vh, 7rem);
}
.gate-hero .hero__scene::after { content: none; }

.gate-hero .hero__vapour { z-index: 1; }
.gate-hero .gate { z-index: 2; }
.gate-hero .hero__stage { z-index: 3; }
.gate-hero .gate__foot { z-index: 4; }

.gate {
  position: relative;
  width: min(100%, 30rem);
  margin-left: 45%;
  padding: clamp(1.75rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2.5rem) clamp(2rem, 3.5vw, 2.75rem);
  container-type: inline-size;
  background: var(--ground);
  color: var(--ink);
  text-align: center;
  border-radius: var(--radius-card);
  box-shadow:
    0 30px 80px color-mix(in srgb, var(--dusk-deep) 45%, transparent),
    inset 0 0 0 1px var(--edge-ring),
    inset 0 1px 0 var(--glass-edge);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .gate {
    background: color-mix(in srgb, var(--ground) 84%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
            backdrop-filter: blur(18px) saturate(1.2);
  }
}

.gate__name {
  margin: 0;
  font-size: var(--t-sub);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
.gate__name span {
  display: block;
  margin-top: 0.4rem;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.gate__name::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 1px;
  margin: 0.9rem auto 0;
  background: var(--accent-line);
}

.gate__title {
  margin: clamp(1.25rem, 4cqi, 1.75rem) 0 0;
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-stretch: 100%;
  font-size: 1.9rem;
  font-size: 8.1cqi;
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-align: left;
  color: var(--dusk-deep);
  transform: skewX(-6deg);
  transform-origin: left bottom;
}
.gate__title > span { display: block; white-space: nowrap; }
.gate__title > span:first-child { font-size: 1.2em; }
.gate__sunset {
  margin-top: 0.08em;
  font-size: 0.85em;
  background-image: var(--sunset);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-right: 0.08em;
}

.gate__stripe {
  display: block;
  width: 4rem;
  height: 3px;
  margin: 1.1rem auto 0;
  background: var(--sunset);
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 0.6rem, transparent 0.6rem 0.8rem);
          mask-image: repeating-linear-gradient(90deg, #000 0 0.6rem, transparent 0.6rem 0.8rem);
  transform: skewX(-20deg);
}

.gate__lede {
  max-width: 22rem;
  margin: 1.1rem auto 0;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ink-2);
}

.gate__form { margin-top: 1.6rem; text-align: left; }

.gate__field { position: relative; }
.gate__field .form__input {
  min-height: 48px;
  padding: 0 3.25rem 0 1.25rem;
  border-radius: var(--radius-pill);
  background: var(--card);
}
.gate__reveal {
  position: absolute;
  top: 50%;
  right: 0.2rem;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transform: translateY(-50%);
  transition: color var(--dur-fast) var(--ease-io);
}
.gate__reveal[hidden] { display: none; }
.gate__reveal:hover { color: var(--ink); }
.gate__reveal .gate__eye-off,
.gate__reveal[aria-pressed="true"] .gate__eye { display: none; }
.gate__reveal[aria-pressed="true"] .gate__eye-off { display: block; }

.gate__submit {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 48px;
  margin-top: 0.85rem;
  border-radius: var(--radius-pill);
  font-size: var(--t-small);
  box-shadow: inset 0 1px 0 var(--sheen);
}
.gate__submit svg { transition: transform var(--dur-base) var(--ease-out); }
.gate__submit:hover svg { transform: translateX(3px); }

.form__input[aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: inset 0 0 0 1px var(--error);
}
.gate__error { margin: 0.6rem 0 0 1.25rem; font-size: var(--t-label); line-height: 1.4; color: var(--error); }

.gate__foot {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(1rem, 3vh, 1.75rem);
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: var(--t-label);
  font-weight: 600;
  text-shadow: 0 1px 8px var(--dusk-deep);
}
.gate__foot a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--on-dusk);
  text-decoration: none;
}
.gate__foot a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.gate__social svg { filter: drop-shadow(0 1px 6px var(--dusk-deep)); }

@media (max-width: 59.99rem) {
  .gate-hero {
    --car-w: 78%;
    --car-left: calc((100% - var(--car-w)) / 2);
    align-items: center;
    padding-top: clamp(1rem, 4vw, 2rem);
    padding-bottom: calc(var(--car-w) * 0.6562 + 6rem);
    padding-inline: var(--gutter);
  }
  .gate { margin-left: 0; }
  .gate__foot { left: var(--gutter); justify-content: center; }
}
@media (max-width: 44rem) {
  .gate-hero { --car-w: 96%; }
}

@media (prefers-reduced-motion: no-preference) {
  .gate { animation: gate-in var(--dur-page) var(--ease-out) both; animation-delay: 80ms; }
  @keyframes gate-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .gate__submit svg, .gate__reveal { transition: none; }
}

.button {
  font-family: inherit;
  font-size: var(--t-label);
  font-weight: 600;
  line-height: 1;
  color: var(--on-accent);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 0.85rem 1.35rem;
  min-height: 44px;
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-io),
              border-color var(--dur-base) var(--ease-io),
              transform var(--dur-base) var(--ease-out);
}
.button:hover:not(:disabled) {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  transform: translateY(-1px);
}
.button:active:not(:disabled) { transform: translateY(0); }
.button:disabled {
  cursor: not-allowed;
  color: var(--muted);
  background: transparent;
  border-color: var(--rule);
  border-style: dashed;
}

footer {
  position: relative;
  margin-top: clamp(4rem, 10vw, 7rem);
  padding-block: calc(clamp(1.5rem, 3.4vw, 3rem) + clamp(2.5rem, 5vw, 3.5rem)) clamp(2.5rem, 6vw, 4rem);
  background:
    radial-gradient(60% 90% at 85% 100%, color-mix(in srgb, var(--dusk-rose) 40%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, var(--dusk-deep) 0%, var(--dusk-mid) 100%);
  color: var(--on-dusk-2);
  font-size: var(--t-label);
}
footer::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto;
  height: clamp(1.5rem, 3.4vw, 3rem);
  pointer-events: none;
  background: var(--ground);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 27C34 25 52 30 88 28 128 26 150 19 196 21 238 23 262 31 312 30 352 29 370 22 414 20 470 18 498 27 548 29 590 31 618 25 660 24 706 23 724 30 770 31 818 32 846 22 896 19 936 17 962 24 1004 26 1052 28 1080 21 1124 20 1172 19 1196 27 1240 29 1286 31 1316 24 1356 23 1396 22 1418 26 1440 25V0H0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 27C34 25 52 30 88 28 128 26 150 19 196 21 238 23 262 31 312 30 352 29 370 22 414 20 470 18 498 27 548 29 590 31 618 25 660 24 706 23 724 30 770 31 818 32 846 22 896 19 936 17 962 24 1004 26 1052 28 1080 21 1124 20 1172 19 1196 27 1240 29 1286 31 1316 24 1356 23 1396 22 1418 26 1440 25V0H0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.site-footer--flush { margin-top: 0; padding-top: clamp(2.5rem, 5vw, 3.5rem); }
.site-footer--flush::before { content: none; }
footer a { color: var(--on-dusk-2); text-decoration-color: color-mix(in srgb, var(--on-dusk-2) 40%, transparent); }
footer a:hover { color: var(--on-dusk); text-decoration-color: var(--on-dusk); }
footer :focus-visible { outline-color: var(--on-dusk); }
footer .copy-note { background: var(--on-dusk); color: var(--ink); }

.site-footer__top {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  align-items: start;
}
.site-footer__nav:nth-of-type(1) { grid-column: 3; }
.site-footer__nav:nth-of-type(2) { grid-column: 4; }

@media (max-width: 64rem) {
  .site-footer__top { grid-template-columns: 1fr 1fr; }
  .site-footer__mark { grid-column: 1 / -1; }
  .site-footer__nav:nth-of-type(1) { grid-column: 1; }
  .site-footer__nav:nth-of-type(2) { grid-column: 2; }
}

.site-footer__mark {
  font-size: var(--t-head);
  line-height: 1.2;
  letter-spacing: normal;
  color: var(--on-dusk);
  margin: 0;
  font-weight: 600;
}
.site-footer__mark span { display: block; font-size: var(--t-body); font-weight: 500; line-height: 1.45; color: var(--on-dusk-2); margin-top: 0.35rem; }

.site-footer__heading {
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--on-dusk-2);
  margin: 0 0 0.85rem;
  line-height: 1.2;
}
.site-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.site-footer__list a {
  display: inline-block;
  padding-block: 0.45rem;
  line-height: 1.4;
}

.site-footer__contact {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.25rem;
}

.site-footer__email { padding-block: 0.45rem; }

.site-footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: -0.25rem;
  color: var(--on-dusk);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-io);
}
.site-footer__social:hover { color: var(--card); }
.site-footer__social svg { flex: none; }

@media (max-width: 64rem) {
  .site-footer__contact { grid-column: 1 / -1; }
}

a[href^="mailto:"] { position: relative; }
.copy-note {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 2;
  padding: 0.3rem 0.55rem;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--ground);
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: normal;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
}
.copy-note.is-on { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .copy-note { transition: opacity var(--dur-base) var(--ease-io); }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation-name: reveal;
      animation-duration: auto;
      animation-timing-function: var(--ease-out);
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 5% entry 40%;
    }

    article figure {
      animation-name: figure-drift;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: cover;
    }

    @keyframes figure-drift {
      0%   { opacity: 0; clip-path: inset(10% 6% round var(--radius-lg)); transform: translateY(24px); }
      12%  { opacity: 1; }
      35%  { opacity: 1; clip-path: inset(0 round 0); transform: translateY(12px); }
      100% { opacity: 1; clip-path: inset(0 round 0); transform: translateY(-24px); }
    }

    article .pull {
      animation-name: statement;
      animation-duration: auto;
      animation-timing-function: var(--ease-out);
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 20% entry 70%;
    }

    @keyframes statement {
      from { opacity: 0; transform: translateY(32px); }
      to   { opacity: 1; transform: none; }
    }
    @keyframes reveal {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: none; }
    }
  }
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: no-preference) {

  .m-intro .hero__headline:not(.is-split):not(.is-built),
  .m-intro .masthead--feature h1:not(.is-split):not(.is-built) {
    opacity: 0;
    animation: m-show 1ms var(--dur-failsafe) forwards;
  }
  .hero__headline.is-split .w,
  .masthead--feature h1.is-split .w {
    display: inline-block;
    padding: 0.1em 0.12em 0.3em;
    margin: -0.1em -0.12em -0.3em;
    animation: m-focus var(--dur-enter) var(--ease-long) both;
    animation-delay: calc(var(--stagger) * var(--i));
  }
  .m-intro .hero__intro {
    animation: m-focus-soft var(--dur-enter) var(--ease-long) both;
    animation-delay: calc(var(--stagger) * 10);
  }

  .m-intro:has(.hero) .nav__pill {
    animation: m-drop var(--dur-enter) var(--ease-long) both;
  }
  .m-intro:has(.hero) .nav__avatar {
    animation: m-pop var(--dur-spring) var(--ease-spring) both;
    animation-delay: calc(var(--stagger) * 5);
  }

  .m-intro .cards > li:nth-child(1) { --at: calc(var(--stagger) * 5); }
  .m-intro .cards > li:nth-child(2) { --at: calc(var(--stagger) * 8); }
  .m-intro .cards > li:nth-child(3) { --at: calc(var(--stagger) * 11); }
  .m-intro .cards > li:nth-child(-n+3) {
    animation: m-rise var(--dur-enter) var(--ease-long) both;
    animation-delay: var(--at);
  }
  .m-intro .cards > li:nth-child(-n+3) .card__media {
    animation: m-open var(--dur-enter) var(--ease-long) both;
    animation-delay: var(--at);
  }
  .m-intro .cards > li:nth-child(-n+3) .card__media > .cover {
    animation: m-push calc(var(--dur-enter) * 2) var(--ease-long) both;
    animation-delay: var(--at);
  }
  .m-intro .cards > li:nth-child(-n+3) .card__media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(105deg,
      transparent 30%, var(--sheen) 45%, var(--sheen) 55%, transparent 70%);
    transform: translateX(-110%);
    animation: m-sweep calc(var(--dur-enter) * 1.4) var(--ease-long) forwards;
    animation-delay: calc(var(--at) + var(--dur-page));
  }

  .m-intro .masthead--feature .masthead__media {
    animation: m-rise-cover var(--dur-enter) var(--ease-long) both;
    animation-delay: calc(var(--stagger) * 3);
  }
  .m-intro .masthead--dusk .masthead__media,
  .m-intro .masthead--case .masthead__media { animation-name: m-rise-tilt; }
  @keyframes m-rise-tilt {
    from { opacity: 0; transform: translateY(24px) var(--tilt); }
    to   { opacity: 1; transform: var(--tilt); }
  }
  .m-intro .masthead--feature .facts > div {
    animation: m-rise-soft var(--dur-enter) var(--ease-long) both;
    animation-delay: calc(var(--stagger) * (5 + var(--row, 0) * 1.5));
  }
  .masthead--feature .facts > div:nth-child(2)  { --row: 1; }
  .masthead--feature .facts > div:nth-child(3)  { --row: 2; }
  .masthead--feature .facts > div:nth-child(4)  { --row: 3; }
  .masthead--feature .facts > div:nth-child(5)  { --row: 4; }
  .masthead--feature .facts > div:nth-child(6)  { --row: 5; }
  .masthead--feature .facts > div:nth-child(7)  { --row: 6; }
  .masthead--feature .facts > div:nth-child(8)  { --row: 7; }
  .masthead--feature .facts > div:nth-child(9)  { --row: 8; }
  .masthead--feature .facts > div:nth-child(10) { --row: 9; }

  .m-intro .cards .cover--agent { --as-at: calc(var(--stagger) * 14); }
  .cards .cover--agent.is-armed .as { opacity: 0; }
  .m-intro .cards .cover--agent .as,
  .cards .cover--agent.is-live .as {
    transform-box: fill-box;
    transform-origin: center;
    animation: m-part calc(var(--dur-enter) * 0.7) var(--ease-long) both;
    animation-delay: calc(var(--as-at, 0ms) + var(--stagger) * 2.4 * var(--d));
  }
  .m-intro .cards .cover--agent .as-draw path,
  .cards .cover--agent.is-live .as-draw path {
    stroke-dasharray: 1;
    animation: m-draw calc(var(--dur-enter) * 0.5) var(--ease-long) both;
    animation-delay: calc(var(--as-at, 0ms) + var(--stagger) * 2.4 * var(--d));
  }
  .m-intro .cards .cover--agent .as-accent circle,
  .cards .cover--agent.is-live .as-accent circle {
    transform-box: fill-box;
    transform-origin: center;
    animation: m-ping var(--dur-spring) var(--ease-spring) both;
    animation-delay: calc(var(--as-at, 0ms) + var(--stagger) * 2.4 * var(--d) + var(--dur-base));
  }

  @supports (animation-timeline: view()) {
    .cards > li {
      animation-name: m-rise;
      animation-duration: auto;
      animation-timing-function: var(--ease-out);
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 5% entry 55%;
    }
    .cards .card__media {
      animation-name: m-open;
      animation-duration: auto;
      animation-timing-function: var(--ease-out);
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
    .cards .card__media > .cover {
      animation-name: m-push;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 0% cover 50%;
    }

    .pov__list li {
      animation-name: m-rise-soft;
      animation-duration: auto;
      animation-fill-mode: both;
      animation-timing-function: var(--ease-out);
      animation-timeline: view();
      animation-range: entry 10% entry 90%;
    }

    .hero__text {
      transform-origin: left top;
      animation-name: m-recede;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: scroll(root);
      animation-range: 8vh 50vh;
    }

    .section + .section {
      position: relative;
      border-top-color: transparent;
      view-timeline-name: --section;
    }
    .section + .section::before {
      content: "";
      position: absolute;
      top: -1px;
      left: 0;
      right: 0;
      height: 1px;
      background: var(--rule);
      transform-origin: left;
      animation: m-line linear both;
      animation-duration: auto;
      animation-timeline: --section;
      animation-range: entry 0% entry 35%;
    }
    article .section h2 {
      animation-name: m-focus;
      animation-duration: auto;
      animation-timing-function: var(--ease-out);
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: cover 4% cover 26%;
    }

    article .pull { view-timeline-name: --pull; }
    .pull .ink {
      animation-name: m-ink;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: --pull;
      animation-range: cover calc(28% + var(--k) * 17%) cover calc(34% + var(--k) * 17%);
    }
  }

  .section-nav__tabs.has-glider { position: relative; }
  .section-nav__tabs.has-glider a { position: relative; }
  .section-nav__tabs.has-glider a[aria-current] { background-color: transparent; box-shadow: none; }
  .section-nav__glider {
    position: absolute;
    top: 50%;
    left: 0;
    height: 44px;
    margin-top: -22px;
    border-radius: calc(var(--radius-lg) - 4px);
    background: var(--tab-on);
    box-shadow: 0 1px 2px rgba(4, 17, 31, 0.07), inset 0 1px 0 var(--glass-edge);
    opacity: 0;
    pointer-events: none;
    scroll-snap-align: none;
    transition: transform var(--dur-spring) var(--ease-spring),
                width var(--dur-spring) var(--ease-spring),
                opacity var(--dur-base) var(--ease-io);
  }
  .section-nav__glider.is-on { opacity: 1; }

  @keyframes m-show { to { opacity: 1; } }
  @keyframes m-focus {
    from { opacity: 0; filter: blur(10px); transform: translateY(0.35em); }
    to   { opacity: 1; filter: blur(0); transform: none; }
  }
  @keyframes m-focus-soft {
    from { opacity: 0; filter: blur(6px); transform: translateY(12px); }
    to   { opacity: 1; filter: blur(0); transform: none; }
  }
  @keyframes m-drop {
    from { opacity: 0; transform: translateY(-14px) scale(0.98); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes m-pop {
    from { opacity: 0; transform: scale(0.4); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes m-rise {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes m-rise-soft {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes m-open {
    from { clip-path: inset(6% round var(--radius-md)); }
    to   { clip-path: inset(0 round var(--radius-md)); }
  }
  @keyframes m-rise-cover {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes m-push {
    from { transform: scale(1.14); }
    to   { transform: none; }
  }
  @keyframes m-sweep { to { transform: translateX(110%); } }
  @keyframes m-part {
    from { opacity: 0; transform: translateY(6px) scale(0.96); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes m-draw {
    from { stroke-dashoffset: 1; }
    to   { stroke-dashoffset: 0; }
  }
  @keyframes m-ping {
    0%   { transform: none; }
    45%  { transform: scale(1.7); }
    100% { transform: none; }
  }
  @keyframes m-line {
    from { transform: scaleX(0); }
    to   { transform: none; }
  }
  @keyframes m-slide {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes m-ink {
    from { color: var(--muted); }
    to   { color: var(--ink); }
  }
  @keyframes m-recede {
    to { opacity: 0.15; filter: blur(8px); transform: translateY(-12%) scale(0.96); }
  }
  @keyframes m-num {
    from { opacity: 0; transform: translateY(0.8em); }
    to   { opacity: 1; transform: none; }
  }
}

@property --glow {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .cards .card {
    --mx: 50%;
    --my: 0%;
    background:
      radial-gradient(28rem circle at var(--mx) var(--my),
        color-mix(in srgb, var(--ink) calc(var(--glow) * 3%), transparent), transparent 70%),
      var(--card);
    transition: --glow var(--dur-page) var(--ease-io);
  }
  .cards .card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    background: radial-gradient(18rem circle at var(--mx) var(--my),
      color-mix(in srgb, var(--ink) calc(var(--glow) * 40%), transparent), transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  }
  .cards a.card:hover {
    --glow: 1;
    transition: --glow var(--dur-base) var(--ease-io);
  }
  .cards a.card:hover .card__media > .cover,
  .cards a.card:focus-visible .card__media > .cover { scale: 1.04; }

  .cards .card__media > .cover {
    transition: scale var(--dur-enter) var(--ease-long),
                opacity var(--dur-page) var(--ease-io),
                filter var(--dur-page) var(--ease-io);
  }
  .cards:has(a.card:hover) a.card:not(:hover) .card__media > .cover {
    opacity: 0.5;
    filter: saturate(0);
  }

  .site-footer__social {
    transition: color var(--dur-base) var(--ease-io),
                transform var(--dur-spring) var(--ease-spring);
  }
  .site-footer__social:hover { transform: translateY(-3px); }
}

body::before {
  content: "";
  position: fixed;
  inset: -15% 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60vw 55vh at 18% 12%, color-mix(in srgb, var(--dusk-glow) 4%, transparent), transparent 70%),
    radial-gradient(70vw 60vh at 85% 68%, color-mix(in srgb, var(--dusk-rose) 3%, transparent), transparent 72%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: var(--grain-strength);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    body::before {
      animation-name: field-drift;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: scroll();
    }

    @keyframes field-drift {
      from { transform: translateY(0); }
      to   { transform: translateY(-12%); }
    }
  }
}

@view-transition { navigation: auto; }

.nav__pill { view-transition-name: site-nav; }

::view-transition-group(*) {
  animation-duration: var(--dur-page);
  animation-timing-function: var(--ease-io);
}
::view-transition-old(*),
::view-transition-new(*) {
  animation-duration: var(--dur-page);
  animation-timing-function: var(--ease-io);
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--dur-base);
}

::view-transition-old(*):only-child,
::view-transition-new(*):only-child {
  animation-duration: var(--dur-base);
}

::view-transition-old(site-nav),
::view-transition-new(site-nav) {
  object-fit: none;
  object-position: center;
}

.nav__links   { view-transition-name: nav-links; }
.nav__current { view-transition-name: nav-current; }
::view-transition-group(site-nav)    { z-index: 1; }
::view-transition-group(nav-current) {
  z-index: 2;
  animation-duration: var(--dur-spring);
  animation-timing-function: var(--ease-spring);
}
::view-transition-group(nav-links)   { z-index: 3; }
::view-transition-old(nav-links),
::view-transition-new(nav-links) {
  object-fit: none;
  object-position: center;
}

:root:active-view-transition-type(forward, back)::view-transition { background: var(--ground); }
:root:active-view-transition-type(forward)::view-transition-old(root),
:root:active-view-transition-type(forward)::view-transition-old(*):only-child {
  animation: m-leave-left var(--dur-page) var(--ease-long) both;
}
:root:active-view-transition-type(forward)::view-transition-new(root),
:root:active-view-transition-type(forward)::view-transition-new(*):only-child {
  animation: m-arrive-right var(--dur-page) var(--ease-long) both;
}
:root:active-view-transition-type(back)::view-transition-old(root),
:root:active-view-transition-type(back)::view-transition-old(*):only-child {
  animation: m-leave-right var(--dur-page) var(--ease-long) both;
}
:root:active-view-transition-type(back)::view-transition-new(root),
:root:active-view-transition-type(back)::view-transition-new(*):only-child {
  animation: m-arrive-left var(--dur-page) var(--ease-long) both;
}
@keyframes m-leave-left {
  65%, 100% { opacity: 0; transform: translateX(-4vw); filter: blur(6px); }
}
@keyframes m-leave-right {
  65%, 100% { opacity: 0; transform: translateX(4vw); filter: blur(6px); }
}
@keyframes m-arrive-right {
  0%, 30% { opacity: 0; transform: translateX(4vw); filter: blur(6px); }
}
@keyframes m-arrive-left {
  0%, 30% { opacity: 0; transform: translateX(-4vw); filter: blur(6px); }
}

@media (forced-colors: active) {
  footer { border-top: 1px solid; }
}

@media print {
  footer, footer a, .site-footer__mark, .site-footer__mark span, .site-footer__heading { color: var(--ink); }
  footer::before { content: none; }
  :root {
    --ground: #FFFFFF; --card: #FFFFFF; --tile: #F0F1F3;
    --ink: #0E0E10; --ink-2: #303033; --body: #56565C; --muted: #67676D;
    --marker: #4A4A50; --rule: #E5E5E7; --error: #A02016;
    --accent: #2B2F34; --accent-strong: #17191C;
    --accent-tint: #EFEFF1; --accent-line: #86868C; --on-accent: #FFFFFF;
    --tab-on: #FFFFFF;
    --glass-edge: transparent; --glass-ring: transparent;
    --edge-ring: rgba(14, 14, 16, 0.08); --glass-shadow: transparent;
    --grain-strength: 0;
  }
  .nav, .skip,
  .fig--placeholder { display: none !important; }
  .card__media--empty { display: none !important; }
  .hero__cta { background: none; color: #000; border: 1px solid #000; box-shadow: none; }
  .fig-aside { float: none; width: 100%; margin-block: 1.5rem; }
  .fig-wide { margin-inline: 0; }
  figure, .pull { break-inside: avoid; }
  .pull { min-height: 0; margin-block: 2rem; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a { color: #000; text-decoration: underline; }
  article a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .wrap, .frame { max-width: none; padding-inline: 0; }
  h1, h2 { break-after: avoid-page; }
  p { orphans: 3; widows: 3; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}