@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

:root {
  --ground: #141F1F;
  --ground-alt: #1D2F2E;
  --ink: #EBEFEF;
  --ink-soft: #ABBAB9;
  --dark: #0B1413;
  --room: #224442;
  --cyan: #1EB8AE;
  --mist: #B6E2DF;
  --spark: #0FD2C5;
  --timber: #8F6C4E;
  --timber-line: rgba(143, 108, 78, 0.55);
  --haze-line: rgba(182, 226, 223, 0.18);
  --uxwl-link: var(--cyan);
  --serif: "DM Serif Display", "Iowan Old Style", Georgia, serif;
  --sans: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-xxl: 1.75rem;
  --fs-hero: 3.125rem;
  --xs: 0.5rem;
  --sm: 1rem;
  --md: 1.5rem;
  --lg: 2rem;
  --xl: 3rem;
  --xxl: 4rem;
  --g: 1rem;
  --shell: 76rem;
  --measure: 38rem;
  --scene-pad: var(--xxl);
  --letterbox: 0.75rem;
  --inset: max(var(--g), calc((100% - var(--shell)) / 2));
  --ease-gate: cubic-bezier(0.62, 0.04, 0.24, 1);
}

@media (min-width: 480px) {
  :root { --g: 1.5rem; }
}

@media (min-width: 768px) {
  :root { --g: 2rem; --scene-pad: calc(var(--xxl) + var(--lg)); }
}

@media (min-width: 1024px) {
  :root { --g: 3rem; --scene-pad: calc(var(--xxl) * 1.5); }
}

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

html {
  -webkit-text-size-adjust: 100%;
  background: var(--dark);
  scroll-padding-top: 6.5rem;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video, iframe, svg { max-width: 100%; display: block; }
img { height: auto; }
[hidden] { display: none !important; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 var(--md);
  text-wrap: balance;
}

h1 { font-size: clamp(2.75rem, 1.6rem + 3.6vw, 4rem); }
h2 { font-size: clamp(2rem, 1.25rem + 2.4vw, 3rem); }
h3 { font-size: var(--fs-xl); line-height: 1.2; margin-bottom: var(--xs); }

h4 {
  font-family: var(--sans);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 var(--xs);
}

p { margin: 0 0 var(--sm); text-wrap: pretty; }
strong, b { font-weight: 600; color: var(--ink); }

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

p a:not([class]), li a:not([class]), figcaption a:not([class]),
blockquote a:not([class]), dd a:not([class]), td a:not([class]) {
  color: var(--uxwl-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 0.2s ease, text-decoration-thickness 0.2s ease;
}

p a:not([class]):hover, li a:not([class]):hover, figcaption a:not([class]):hover,
blockquote a:not([class]):hover, dd a:not([class]):hover, td a:not([class]):hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--spark);
  outline-offset: 3px;
}

::selection { background: var(--cyan); color: var(--dark); }

.uxwl__skip {
  position: absolute;
  left: var(--sm);
  top: -4rem;
  z-index: 100;
  background: var(--mist);
  color: var(--dark);
  font-weight: 600;
  padding: var(--xs) var(--sm);
  border-radius: 0.5rem;
  transition: top 0.2s ease;
}

.uxwl__skip:focus { top: var(--sm); }

:where(.uxwl__main) :where(ul, ol):not([class]) { padding-left: 1.25rem; margin: 0 0 var(--md); }
:where(.uxwl__main) :where(ul, ol):not([class]) > li { margin-bottom: var(--xs); }
:where(.uxwl__main) ul:not([class]) > li::marker { color: var(--timber); }
:where(.uxwl__main) ol:not([class]) > li::marker { color: var(--mist); font-weight: 600; }

:where(.uxwl__main) figure { margin: 0; }

:where(.uxwl__main) figcaption {
  font-style: italic;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--mist);
  text-align: center;
  padding: var(--sm) var(--md) 0;
}

:where(.uxwl__main) blockquote { margin: 0; }

.uxwl__main { display: block; overflow-x: clip; }

.uxwl__main > :where(h1, h2, h3, h4, p, ul, ol, dl, blockquote, details, table):where(:not([class]), [class="visible"]) {
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--inset) max(var(--inset), calc(100% - var(--inset) - var(--measure)));
}

.uxwl__main > :where(form, div, section):where(:not([class]), [class="visible"]) {
  max-width: none;
  margin: var(--xxl) 0;
  padding-inline: var(--inset);
}

.uxwl__main > :where(form, div, section):where(:not([class]), [class="visible"]) > :where(h1, h2, h3, h4, p, ul, ol, blockquote) {
  max-width: var(--measure);
}

.uxwl__main > :where(h2):where(:not([class]), [class="visible"]) { margin-top: var(--xxl); }
.uxwl__main > :where(h3):where(:not([class]), [class="visible"]) { margin-top: var(--xl); }
.uxwl__main > :where(form, div, section):where(:not([class]), [class="visible"]) > * + :where(h2, h3) { margin-top: var(--xl); }

.uxwl__shell,
.uxwl__prose {
  margin-inline: auto;
  padding-inline: var(--g);
}

.uxwl__shell { max-width: calc(var(--shell) + 2 * var(--g)); }
.uxwl__prose { max-width: calc(var(--measure) + 2 * var(--g)); }

.uxwl__navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--dark);
  padding: 0.625rem var(--g);
  transition: background-color 0.45s ease;
}

.uxwl__navbar--floating-left-tracked { font-family: var(--sans); }

.uxwl__navbar.scrolled {
  background: rgba(11, 20, 19, 0);
  padding-block: 0.875rem;
}

.uxwl__navbar-inner {
  max-width: var(--shell);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lg);
  background: rgba(29, 47, 46, 0.94);
  border: 1px solid rgba(182, 226, 223, 0.14);
  border-radius: 999px;
  padding: 0.375rem 0.375rem 0.375rem var(--md);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: box-shadow 0.45s ease, border-radius 0.3s ease;
}

.uxwl__navbar.scrolled .uxwl__navbar-inner {
  box-shadow: 0 0.875rem 2.25rem rgba(11, 20, 19, 0.55);
}

.uxwl__navbar-brand {
  font-family: var(--serif);
  font-size: var(--fs-xl);
  line-height: 1;
  white-space: nowrap;
  color: var(--ink);
  padding-block: 0.625rem;
}

.uxwl__navbar-brand:hover { color: var(--mist); }

.uxwl__navbar-links {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

.uxwl__navbar-links a {
  white-space: nowrap;
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.14em;
  line-height: 1.2;
  color: var(--ink-soft);
  padding: 0.6875rem 0.875rem;
  border-radius: 999px;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.uxwl__navbar-links a:hover {
  color: var(--ink);
  background: rgba(182, 226, 223, 0.09);
}

.uxwl__navbar-links a[aria-current="page"] {
  color: var(--dark);
  background: var(--mist);
}

.uxwl__navbar-toggle {
  display: none;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ground);
  color: var(--ink);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}

.uxwl__navbar-toggle span {
  display: block;
  width: 1.125rem;
  height: 2px;
  background: currentColor;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.uxwl__navbar-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(0.425rem) rotate(45deg); }
.uxwl__navbar-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.uxwl__navbar-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-0.425rem) rotate(-45deg); }

@media (max-width: 1023.98px) {
  .uxwl__navbar-inner {
    flex-wrap: wrap;
    gap: 0;
    border-radius: 1.75rem;
  }

  .uxwl__navbar-toggle { display: inline-flex; }

  .uxwl__navbar-links {
    order: 3;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0.125rem;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height 0.4s ease, visibility 0s linear 0.4s;
  }

  .uxwl__navbar-links.active {
    max-height: 500px;
    overflow-y: auto;
    visibility: visible;
    padding: var(--xs) var(--xs) var(--sm) 0;
    transition: max-height 0.4s ease, visibility 0s;
  }

  .uxwl__navbar-links a {
    font-size: var(--fs-base);
    padding: 0.8125rem var(--sm);
  }
}

.uxwl__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--xs);
  min-height: 3rem;
  padding: 0.8125rem 1.5rem;
  font-family: var(--sans);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
}

.uxwl__btn:active { transform: translateY(1px); }

.uxwl__btn-primary { background: var(--cyan); color: var(--dark); }
.uxwl__btn-primary:hover { background: var(--mist); color: var(--dark); }

.uxwl__btn-ghost { background: transparent; color: var(--ink); border-color: var(--mist); }
.uxwl__btn-ghost:hover { background: var(--mist); color: var(--dark); }

.uxwl__btn-quiet { background: var(--dark); color: var(--ink); }
.uxwl__btn-quiet:hover { background: var(--ground-alt); color: var(--ink); }

.uxwl__btn[disabled], .uxwl__btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

.uxwl__cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sm);
  align-items: center;
}

.uxwl__hero {
  --hero-h1: clamp(2.75rem, 1.4rem + 3.2vw, 3.75rem);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  background: var(--dark);
  isolation: isolate;
  overflow: hidden;
}

.uxwl__hero--carousel-slider-hero { min-height: 0; }

.uxwl__hero-slides {
  grid-area: 1 / 1;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  height: min(calc(100vw / 2.25), 72vh);
  min-height: 19rem;
  overflow: hidden;
}

.uxwl__hero-slides::before,
.uxwl__hero-slides::after {
  content: "";
  grid-area: 1 / 1;
  z-index: 2;
  pointer-events: none;
}

.uxwl__hero-slides::before {
  background: radial-gradient(ellipse 75% 85% at 50% 42%, rgba(11, 20, 19, 0) 58%, rgba(11, 20, 19, 0.5) 100%);
}

.uxwl__hero-slides::after {
  background: linear-gradient(to bottom, rgba(11, 20, 19, 0) 78%, rgba(11, 20, 19, 0.55) 88%, rgba(11, 20, 19, 0.92) 100%);
}

.uxwl__hero-slide {
  grid-area: 1 / 1;
  margin: 0;
  min-height: 0;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}

.uxwl__hero-slide.is-active { opacity: 1; z-index: 1; }

.uxwl__hero-slide > a,
.uxwl__hero-slide > picture {
  display: block;
  width: 100%;
  height: 100%;
}

.uxwl__hero-slide > img,
.uxwl__hero-slide > video,
.uxwl__hero-slide > a > img,
.uxwl__hero-slide > picture > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 62%;
  transform-origin: 50% 100%;
  filter: saturate(1.06) contrast(1.05);
}

.uxwl__hero-slide.is-active > img,
.uxwl__hero-slide.is-active > video,
.uxwl__hero-slide.is-active > a > img,
.uxwl__hero-slide.is-active > picture > img {
  animation: uxwl-drift 9.5s linear forwards;
}

.uxwl__hero-slide > figcaption {
  position: absolute;
  left: var(--inset);
  bottom: calc(var(--hero-h1) * 1.1 + var(--sm));
  z-index: 4;
  max-width: 32ch;
  margin: 0;
  padding: 0;
  text-align: left;
  font-style: italic;
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--mist);
  text-shadow: 0 1px 0.75rem rgba(11, 20, 19, 0.85);
}

.uxwl__hero-content {
  grid-area: 2 / 1;
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: var(--md);
  padding: 0 var(--inset) calc(var(--lg) + 4rem);
}

.uxwl__hero-content h1 {
  margin: -1.06em 0 0;
  font-size: var(--hero-h1);
  line-height: 1.06;
  max-width: 22ch;
  color: var(--ink);
}

.uxwl__hero-dots {
  grid-area: 1 / 1;
  align-self: start;
  justify-self: end;
  z-index: 3;
  display: flex;
  gap: var(--xs);
  margin: var(--md) var(--inset) 0 0;
}

.uxwl__hero-dots span {
  position: relative;
  display: block;
  width: 2.75rem;
  height: 3px;
  overflow: hidden;
  background: rgba(235, 239, 239, 0.28);
}

.uxwl__hero-dots span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--spark);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.uxwl__hero-dots span.is-active::after { animation: uxwl-reel 7s linear forwards; }

.uxwl__hero:hover .uxwl__hero-dots span.is-active::after,
.uxwl__hero:focus-within .uxwl__hero-dots span.is-active::after,
.uxwl__hero.is-paused .uxwl__hero-dots span.is-active::after,
.uxwl__hero:hover .uxwl__hero-slide.is-active > img,
.uxwl__hero:focus-within .uxwl__hero-slide.is-active > img,
.uxwl__hero.is-paused .uxwl__hero-slide.is-active > img {
  animation-play-state: paused;
}

@keyframes uxwl-drift {
  from { transform: scale(1); }
  to { transform: scale(1.03); }
}

@keyframes uxwl-reel {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (max-width: 767.98px) {
  .uxwl__hero-slides { height: min(125vw, 78vh); }
  .uxwl__hero-content { padding: var(--lg) var(--g) calc(var(--md) + 5rem); }
  .uxwl__hero-content h1 { margin-top: 0; }
  .uxwl__hero-slide > figcaption {
    left: var(--g);
    right: var(--g);
    bottom: var(--md);
    max-width: none;
    text-align: left;
  }
  .uxwl__hero-dots { margin: var(--sm) var(--g) 0 0; }
}

@media (min-width: 768px) {
  .uxwl__hero-slide { position: relative; }
  .uxwl__hero-slide > figcaption {
    left: auto;
    right: var(--inset);
    bottom: calc(var(--hero-h1) * 1.06 + var(--md));
    text-align: right;
  }
}

.uxwl__page-head {
  padding: calc(var(--scene-pad) * 0.75) var(--inset) var(--xl);
}

.uxwl__page-head > * { max-width: var(--measure); margin-inline: 0; }
.uxwl__page-head > h1 { margin-bottom: var(--md); }

.uxwl__lede {
  font-size: var(--fs-xl);
  line-height: 1.55;
  color: var(--ink-soft);
}

.uxwl__scene {
  position: relative;
  padding: var(--scene-pad) var(--inset);
}

.uxwl__scene > * { max-width: var(--measure); margin-inline: 0; }
.uxwl__scene > * + h3 { margin-top: var(--xl); }
.uxwl__scene > .uxwl__prose { padding-inline: 0; }
.uxwl__scene > .uxwl__shell { max-width: var(--shell); padding-inline: 0; }
.uxwl__scene > :last-child { margin-bottom: 0; }

.uxwl__scene--room { background: var(--room); --uxwl-link: var(--mist); }
.uxwl__scene--dark { background: var(--dark); }
.uxwl__scene--credits { padding-bottom: calc(var(--scene-pad) * 1.25); }

.uxwl__frame,
.uxwl__band-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  margin: 0;
  background: var(--dark);
  perspective: 90rem;
  overflow: clip;
}

.uxwl__frame > img, .uxwl__frame > video, .uxwl__frame > a, .uxwl__frame > picture,
.uxwl__band-media > img, .uxwl__band-media > video, .uxwl__band-media > a, .uxwl__band-media > picture {
  grid-column: 1 / -1;
  grid-row: 1;
  display: block;
  width: 100%;
  max-width: none;
}

.uxwl__frame img, .uxwl__frame video,
.uxwl__band-media img, .uxwl__band-media video {
  width: 100%;
  object-fit: cover;
  border-block: var(--letterbox) solid var(--dark);
  filter: saturate(1.06) contrast(1.05);
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 50%, #000 62%, rgba(0, 0, 0, 0.7) 100%);
  mask-image: radial-gradient(ellipse 80% 90% at 50% 50%, #000 62%, rgba(0, 0, 0, 0.7) 100%);
}

.uxwl__frame img, .uxwl__frame video { aspect-ratio: 2.39; }

.uxwl__frame > figcaption,
.uxwl__band-media > figcaption {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  padding: var(--sm) var(--g) var(--md);
  background: var(--dark);
  font-style: italic;
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--mist);
  text-align: center;
}

.uxwl__frame > figcaption { padding-bottom: var(--lg); }

.uxwl__js .uxwl__frame::before, .uxwl__js .uxwl__frame::after,
.uxwl__js .uxwl__band-media::before, .uxwl__js .uxwl__band-media::after {
  content: "";
  grid-row: 1;
  z-index: 2;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(11, 20, 19, 0) 0 2.25rem, rgba(143, 108, 78, 0.3) 2.25rem 2.3125rem),
    var(--dark);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform 1.15s var(--ease-gate), opacity 0.45s ease 0.8s;
}

.uxwl__js .uxwl__frame::before, .uxwl__js .uxwl__band-media::before {
  grid-column: 1;
  transform-origin: 0 50%;
  box-shadow: inset -1px 0 0 var(--timber);
}

.uxwl__js .uxwl__frame::after, .uxwl__js .uxwl__band-media::after {
  grid-column: 2;
  transform-origin: 100% 50%;
  box-shadow: inset 1px 0 0 var(--timber);
}

.uxwl__js .uxwl__frame.is-open::before, .uxwl__js .uxwl__band-media.is-open::before {
  transform: rotateY(-96deg);
  opacity: 0;
}

.uxwl__js .uxwl__frame.is-open::after, .uxwl__js .uxwl__band-media.is-open::after {
  transform: rotateY(96deg);
  opacity: 0;
}

.uxwl__js .uxwl__frame > figcaption, .uxwl__js .uxwl__band-media > figcaption {
  opacity: 0;
  transition: opacity 0.7s ease 1s;
}

.uxwl__js .uxwl__frame.is-open > figcaption, .uxwl__js .uxwl__band-media.is-open > figcaption { opacity: 1; }

.uxwl__js.uxwl__calm .uxwl__frame::before, .uxwl__js.uxwl__calm .uxwl__frame::after,
.uxwl__js.uxwl__calm .uxwl__band-media::before, .uxwl__js.uxwl__calm .uxwl__band-media::after { display: none; }
.uxwl__js.uxwl__calm .uxwl__frame > figcaption, .uxwl__js.uxwl__calm .uxwl__band-media > figcaption { opacity: 1; transition: none; }

.uxwl__content-section { position: relative; }

.uxwl__content-section h2 { margin-bottom: var(--md); }
.uxwl__band-text > p, .uxwl__band-text > ul, .uxwl__band-text > ol { max-width: 62ch; }
.uxwl__band-text > :last-child { margin-bottom: 0; }

.uxwl__band--text-left-50-image-right-50 {
  display: grid;
  grid-template-columns: minmax(var(--g), 1fr) minmax(0, calc(var(--shell) / 2)) 50%;
  align-items: stretch;
}

.uxwl__band--text-left-50-image-right-50 > .uxwl__band-text {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  padding: var(--scene-pad) var(--xl) var(--scene-pad) 0;
}

.uxwl__band--text-left-50-image-right-50 > .uxwl__band-media {
  grid-column: 3;
  grid-row: 1;
  min-height: 32rem;
}

.uxwl__band--text-left-50-image-right-50 > .uxwl__band-media img,
.uxwl__band--text-left-50-image-right-50 > .uxwl__band-media video {
  height: 100%;
  min-height: 24rem;
}

.uxwl__band--text-left-50-image-right-50 > .uxwl__band-media > a { height: 100%; }

@media (max-width: 767.98px) {
  .uxwl__band--text-left-50-image-right-50 { grid-template-columns: minmax(0, 1fr); }
  .uxwl__band--text-left-50-image-right-50 > .uxwl__band-text {
    grid-column: 1;
    padding: var(--scene-pad) var(--g) var(--xl);
  }
  .uxwl__band--text-left-50-image-right-50 > .uxwl__band-media {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
  }
  .uxwl__band--text-left-50-image-right-50 > .uxwl__band-media img,
  .uxwl__band--text-left-50-image-right-50 > .uxwl__band-media video {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
}

.uxwl__band--sidebar-content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(15rem, 1fr);
  gap: var(--xl);
  align-items: start;
  padding: var(--scene-pad) var(--inset);
}

.uxwl__band--sidebar-content-layout > .uxwl__band-text { max-width: 44rem; }

.uxwl__band-aside {
  position: sticky;
  top: 6.5rem;
  background: var(--ground-alt);
  border-top: 2px solid var(--timber);
  padding: var(--lg);
  --uxwl-link: var(--mist);
}

.uxwl__band-aside h3 { margin-bottom: var(--sm); }
.uxwl__band-aside p, .uxwl__band-aside li { font-size: 0.9375rem; color: var(--ink-soft); }
.uxwl__band-aside > :last-child { margin-bottom: 0; }

@media (max-width: 767.98px) {
  .uxwl__band--sidebar-content-layout { grid-template-columns: minmax(0, 1fr); gap: var(--lg); }
  .uxwl__band-aside { position: static; }
}

.uxwl__band--statistics-counter-sections {
  padding: var(--scene-pad) var(--inset);
  background: var(--dark);
}

.uxwl__band--statistics-counter-sections > h2 { max-width: 22ch; margin-bottom: var(--xl); }
.uxwl__band--statistics-counter-sections > p { max-width: 62ch; }

.uxwl__band-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--lg) var(--xl);
  margin: 0;
  padding: 0;
}

.uxwl__stat {
  display: flex;
  flex-direction: column;
  gap: var(--xs);
  border-top: 1px solid var(--timber-line);
  padding-top: var(--md);
}

.uxwl__stat-value {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 1.8rem + 2.4vw, 3.5rem);
  line-height: 1;
  color: var(--mist);
  overflow-wrap: anywhere;
}

.uxwl__stat-label {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 30ch;
}

.uxwl__grid {
  display: grid;
  gap: var(--md);
  max-width: var(--shell);
  margin: var(--xl) auto 0;
  padding: 0;
}

.uxwl__card {
  background: var(--ground-alt);
  border-top: 2px solid var(--timber);
  padding: var(--lg);
}

.uxwl__card h3 { font-size: 1.25rem; margin-bottom: var(--xs); }
.uxwl__card p { font-size: 0.9375rem; line-height: 1.5; color: var(--ink-soft); margin: 0; }

.uxwl__grid--hexagonal-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sm);
  max-width: 60rem;
}

.uxwl__card--hex {
  border-top: 0;
  clip-path: polygon(1.5rem 0, calc(100% - 1.5rem) 0, 100% 50%, calc(100% - 1.5rem) 100%, 1.5rem 100%, 0 50%);
  padding: var(--md) calc(var(--lg) + 0.75rem);
  text-align: center;
}

.uxwl__card--hex:nth-child(3n+2) { background: var(--room); }
.uxwl__card--hex:nth-child(3n+2) p { color: var(--mist); }

@media (min-width: 768px) {
  .uxwl__grid--hexagonal-grid {
    --hex-w: calc((min(60rem, 100vw - 2 * var(--g)) - var(--md)) / 2);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--md);
    row-gap: var(--sm);
    padding-bottom: calc(var(--hex-w) / 2.31);
  }
  .uxwl__card--hex {
    aspect-ratio: 1.1547;
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--sm) 19%;
  }
  .uxwl__card--hex:nth-child(even) { transform: translateY(50%); }
}

@media (min-width: 1024px) {
  .uxwl__grid--hexagonal-grid {
    --hex-w: calc((min(60rem, 100vw - 2 * var(--g)) - 2 * var(--md)) / 3);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .uxwl__card--hex:nth-child(even) { transform: none; }
  .uxwl__card--hex:nth-child(3n+2) { transform: translateY(50%); }
}

.uxwl__ledger {
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) minmax(0, 2fr);
  max-width: 60rem;
  margin: var(--lg) 0 0;
  border-bottom: 1px solid var(--timber-line);
}

.uxwl__main > .uxwl__ledger {
  margin: var(--lg) var(--inset) var(--xxl);
}

.uxwl__ledger > div { display: contents; }

.uxwl__ledger dt,
.uxwl__ledger dd {
  margin: 0;
  padding: var(--md) 0;
  border-top: 1px solid var(--timber-line);
}

.uxwl__ledger dt {
  font-family: var(--serif);
  font-size: var(--fs-xl);
  line-height: 1.2;
  color: var(--mist);
  padding-right: var(--lg);
}

.uxwl__ledger dd { max-width: 60ch; }
.uxwl__ledger dd > :last-child { margin-bottom: 0; }

.uxwl__ledger--figures dt {
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
  line-height: 1;
}

@media (max-width: 767.98px) {
  .uxwl__ledger { grid-template-columns: minmax(0, 1fr); }
  .uxwl__ledger dt { padding-bottom: var(--xs); padding-right: 0; }
  .uxwl__ledger dd { border-top: 0; padding-top: 0; }
}

.uxwl__fieldnote {
  max-width: 46rem;
  margin: var(--xl) auto 0;
  padding: 0 var(--g) var(--xl);
  text-align: center;
}

.uxwl__fieldnote,
.uxwl__fieldnote p {
  font-style: italic;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem);
  line-height: 1.5;
  color: var(--mist);
}

.uxwl__fieldnote footer,
.uxwl__fieldnote cite {
  display: block;
  margin-top: var(--md);
  font-style: normal;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.uxwl__pull {
  margin: var(--xl) 0;
  padding-left: var(--md);
  border-left: 2px solid var(--timber);
  font-family: var(--serif);
  font-size: var(--fs-xxl);
  line-height: 1.35;
  color: var(--mist);
}

.uxwl__main > .uxwl__pull {
  max-width: var(--measure);
  margin: var(--xl) var(--inset);
}

.uxwl__pull p { margin: 0; }
.uxwl__pull footer, .uxwl__pull cite {
  display: block;
  margin-top: var(--sm);
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.uxwl__reel {
  max-width: 46rem;
  margin: var(--lg) 0 0;
}

:where(.uxwl__main) details {
  border-top: 1px solid var(--haze-line);
}

:where(.uxwl__main) details:last-of-type { border-bottom: 1px solid var(--haze-line); }

:where(.uxwl__main) summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--md);
  padding: var(--md) 0;
  font-family: var(--serif);
  font-size: var(--fs-xl);
  line-height: 1.35;
  color: var(--ink);
  transition: color 0.2s ease, box-shadow 0.3s ease;
}

:where(.uxwl__main) summary::-webkit-details-marker { display: none; }

:where(.uxwl__main) summary::after {
  content: "";
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.2rem) rotate(45deg);
  transition: transform 0.3s ease;
}

:where(.uxwl__main) summary:hover { color: var(--mist); }

:where(.uxwl__main) details[open] > summary {
  color: var(--mist);
  padding-left: var(--sm);
  box-shadow: inset 3px 0 0 var(--mist);
}

:where(.uxwl__main) details[open] > summary::after { transform: translateY(0.15rem) rotate(-135deg); }

:where(.uxwl__main) details > :not(summary) {
  max-width: 62ch;
  padding-left: var(--sm);
}

:where(.uxwl__main) details > :last-child { padding-bottom: var(--md); margin-bottom: 0; }

.uxwl__steps {
  list-style: none;
  counter-reset: uxwl-step;
  max-width: 46rem;
  margin: var(--lg) 0 0;
  padding: 0;
}

.uxwl__steps > li {
  counter-increment: uxwl-step;
  position: relative;
  padding: var(--md) 0 var(--md) 4rem;
  border-top: 1px solid var(--haze-line);
}

.uxwl__steps > li:last-child { border-bottom: 1px solid var(--haze-line); }

.uxwl__steps > li::before {
  content: counter(uxwl-step);
  position: absolute;
  left: 0;
  top: var(--md);
  font-family: var(--serif);
  font-size: 2.25rem;
  line-height: 1;
  color: var(--mist);
}

.uxwl__steps > li > :last-child { margin-bottom: 0; }

.uxwl__verdict {
  margin: 0;
  background: var(--cyan);
  color: var(--dark);
  padding: calc(var(--scene-pad) * 1.25) var(--inset);
  --uxwl-link: var(--dark);
}

.uxwl__verdict blockquote {
  margin: 0;
  max-width: 26ch;
  font-family: var(--serif);
  font-size: clamp(2rem, 1.2rem + 2.8vw, 3.25rem);
  line-height: 1.2;
  color: var(--dark);
}

.uxwl__verdict blockquote p { margin: 0; }

.uxwl__verdict figcaption {
  margin-top: var(--lg);
  padding: 0;
  text-align: left;
  font-style: normal;
  font-weight: 600;
  font-size: var(--fs-base);
  color: var(--dark);
}

.uxwl__verdict ::selection { background: var(--dark); color: var(--cyan); }
.uxwl__verdict :focus-visible { outline-color: var(--dark); }

.uxwl__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sm);
  max-width: var(--shell);
  margin: var(--xl) auto 0;
}

.uxwl__pair > img,
.uxwl__pair > figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-block: 0.5rem solid var(--dark);
}

.uxwl__pair > figure { margin: 0; }
.uxwl__pair > figcaption { grid-column: 1 / -1; }

@media (max-width: 479.98px) {
  .uxwl__pair { grid-template-columns: minmax(0, 1fr); }
}

.uxwl__resources {
  list-style: none;
  margin: var(--md) 0 0;
  padding: 0;
}

.uxwl__resources > li {
  padding: var(--sm) 0;
  border-top: 1px solid var(--timber-line);
}

.uxwl__resources > li:last-child { border-bottom: 1px solid var(--timber-line); }

.uxwl__credits {
  list-style: none;
  margin: var(--md) 0 0;
  padding: 0;
}

.uxwl__credits > li {
  display: block;
  padding: var(--sm) 0;
  border-top: 1px solid var(--haze-line);
}

.uxwl__credits > li:has(> span) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--xs) var(--md);
  justify-content: space-between;
}

.uxwl__credits > li:last-child { border-bottom: 1px solid var(--haze-line); }

.uxwl__table-wrap {
  max-width: var(--shell);
  margin: var(--lg) auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

:where(.uxwl__main) table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

:where(.uxwl__main) th,
:where(.uxwl__main) td {
  text-align: left;
  vertical-align: top;
  padding: var(--sm) var(--md) var(--sm) 0;
  border-top: 1px solid var(--timber-line);
}

:where(.uxwl__main) th {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-lg);
  color: var(--mist);
}

.video-embed,
.video-featured,
.uxwl__video {
  position: relative;
  max-width: 60rem;
  margin: var(--xl) 0;
  aspect-ratio: 16 / 9;
  background: var(--dark);
  border-block: var(--letterbox) solid var(--dark);
  overflow: hidden;
}

.video-featured { max-width: var(--shell); }

.video-embed > *, .video-featured > *, .uxwl__video > *,
.video-embed iframe, .video-featured iframe, .uxwl__video iframe,
.video-embed video, .video-featured video, .uxwl__video video,
.video-embed img, .video-featured img, .uxwl__video img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border: 0;
}

.video-embed img, .video-featured img, .uxwl__video img,
.video-embed video, .video-featured video, .uxwl__video video { object-fit: cover; }

.uxwl__local {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  max-width: var(--shell);
  margin: var(--xl) auto 0;
  background: var(--ground-alt);
  border-top: 2px solid var(--timber);
}

.uxwl__local-card {
  display: flex;
  flex-direction: column;
  gap: var(--xs);
  padding: var(--lg);
}

.uxwl__local-name {
  font-family: var(--serif);
  font-size: var(--fs-xxl);
  line-height: 1.1;
  margin: 0;
}

.uxwl__local-meta { margin: 0; color: var(--ink-soft); font-size: 0.9375rem; }
.uxwl__local-rating { margin: 0; font-weight: 600; color: var(--mist); }

.uxwl__local-link {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  font-weight: 600;
  margin-top: var(--xs);
}

.uxwl__local-link:hover { text-decoration-thickness: 2px; }

.uxwl__local-map {
  position: relative;
  min-height: 18rem;
  background: var(--dark);
}

.uxwl__local-map > a,
.uxwl__local-map iframe,
.uxwl__local-map img,
.uxwl__local-map video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  border: 0;
}

.uxwl__local-map img,
.uxwl__local-map video { object-fit: cover; }

@media (max-width: 767.98px) {
  .uxwl__local { grid-template-columns: minmax(0, 1fr); }
}

.uxwl__storyboard {
  padding: var(--scene-pad) var(--inset);
  background: var(--ground);
}

.uxwl__storyboard > h2 { max-width: 22ch; }
.uxwl__storyboard > p { max-width: 62ch; }

.uxwl__storyboard-strip {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(4.75rem, 1fr));
  gap: var(--xs);
  margin: var(--lg) 0 var(--md);
  padding: 0;
}

.uxwl__storyboard-thumb {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: flex-end;
  padding: 0.375rem 0.5rem;
  background: var(--dark);
  border: 1px solid var(--timber-line);
  font-size: var(--fs-sm);
  line-height: 1.2;
  color: var(--ink-soft);
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

.uxwl__storyboard-thumb.is-current { border-color: var(--mist); color: var(--ink); }
.uxwl__storyboard-thumb.is-answered { background: var(--room); border-color: transparent; color: var(--mist); }

.uxwl__storyboard-frame {
  display: flex;
  flex-direction: column;
  gap: var(--lg);
  min-height: 26rem;
  margin: 0;
  padding: var(--xl) var(--lg);
  background: var(--dark);
  border: 0;
  border-block: var(--letterbox) solid #08100f;
}

.uxwl__storyboard-question {
  float: left;
  width: 100%;
  max-width: 26ch;
  padding: 0;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  line-height: 1.12;
  color: var(--ink);
}

.uxwl__storyboard-question + * { clear: both; }

.uxwl__storyboard-hint { color: var(--ink-soft); font-size: 0.9375rem; max-width: 60ch; margin: 0; }

.uxwl__storyboard-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--sm);
}

.uxwl__storyboard-option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: var(--sm) var(--md);
  border: 1px solid rgba(182, 226, 223, 0.3);
  border-radius: 0.5rem;
  cursor: pointer;
  line-height: 1.45;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.uxwl__storyboard-option:hover { border-color: var(--mist); }

.uxwl__storyboard-option input {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0.2rem 0 0;
  accent-color: var(--cyan);
}

.uxwl__storyboard-option:has(input:checked) {
  border-color: var(--cyan);
  background: var(--room);
}

.uxwl__storyboard-option:has(input:focus-visible) {
  outline: 2px solid var(--spark);
  outline-offset: 3px;
}

.uxwl__storyboard-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sm);
  margin-top: auto;
}

.uxwl__endcard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: var(--lg) var(--xl);
  align-items: end;
  margin-top: var(--lg);
  padding: var(--xl) var(--lg);
  background: var(--cyan);
  color: var(--dark);
  --uxwl-link: var(--dark);
}

.uxwl__endcard-verdict {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.5rem, 1.6rem + 3vw, 3.75rem);
  line-height: 1.02;
  color: var(--dark);
}

.uxwl__endcard-reasoning { max-width: 52ch; color: var(--dark); }
.uxwl__endcard-reasoning strong { color: var(--dark); }
.uxwl__endcard-reasoning > :last-child { margin-bottom: 0; }
.uxwl__endcard :focus-visible { outline-color: var(--dark); }

.uxwl__endcard-alt {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--md) var(--xl);
  margin-top: var(--md);
  padding-top: var(--md);
  border-top: 1px solid var(--timber-line);
}

.uxwl__endcard-alt h3 { font-size: 1.25rem; }
.uxwl__endcard-alt p { color: var(--ink-soft); max-width: 60ch; }

.uxwl__storyboard-fallback {
  list-style: none;
  max-width: 50rem;
  margin: var(--lg) 0 0;
  padding: 0;
}

.uxwl__storyboard-fallback > li {
  padding: var(--md) 0;
  border-top: 1px solid var(--timber-line);
}

.uxwl__storyboard-fallback > li:last-child { border-bottom: 1px solid var(--timber-line); }

@media (max-width: 767.98px) {
  .uxwl__endcard { grid-template-columns: minmax(0, 1fr); }
  .uxwl__storyboard-frame { padding: var(--lg) var(--md); min-height: 0; }
}

.uxwl__footer {
  background: var(--dark);
  color: var(--ink-soft);
  padding: var(--xxl) var(--inset) var(--lg);
}

.uxwl__footer[data-edge="hairline"] { border-top: 1px solid var(--timber-line); }

.uxwl__footer--statement-1col-split-row { text-align: left; }

.uxwl__footer-inner,
.uxwl__footer-inner--1col { display: block; max-width: var(--shell); }

.uxwl__footer-column { min-width: 0; }
.uxwl__footer-column--statement { max-width: 46rem; }

.uxwl__footer-meta--split { justify-content: space-between; }

.uxwl__footer-heading {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 var(--sm);
}

.uxwl__footer-column--statement > p {
  font-style: italic;
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--mist);
  max-width: 46ch;
  margin: 0;
}

.uxwl__footer-pages {
  display: flex;
  flex-wrap: wrap;
  gap: var(--xs) var(--lg);
  margin-top: var(--lg);
}

.uxwl__footer-pages a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--timber);
  text-underline-offset: 0.3em;
  padding-block: 0.25rem;
  transition: color 0.2s ease;
}

.uxwl__footer-pages a:hover { color: var(--mist); }

.uxwl__footer-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--sm) var(--md);
  margin-top: var(--xl);
  padding-top: var(--md);
  border-top: 1px solid rgba(182, 226, 223, 0.12);
  font-size: 0.9375rem;
}

.uxwl__footer-meta p { margin: 0; }

.uxwl__footer-legal { display: flex; flex-wrap: wrap; gap: var(--md); }

.uxwl__footer-legal a {
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-color: rgba(171, 186, 185, 0.4);
  text-underline-offset: 0.25em;
  transition: color 0.2s ease;
}

.uxwl__footer-legal a:hover { color: var(--ink); }

[data-animate], [data-stagger] > *, [data-counter] { will-change: auto; }

@media (prefers-reduced-motion: reduce) {
  .uxwl__hero-slide { transition: none; }
  .uxwl__hero-slide > img, .uxwl__hero-slide > video,
  .uxwl__hero-slide > a > img, .uxwl__hero-slide > picture > img,
  .uxwl__hero-slide.is-active > img, .uxwl__hero-slide.is-active > video,
  .uxwl__hero-slide.is-active > a > img, .uxwl__hero-slide.is-active > picture > img { animation: none; transform: none; }
  .uxwl__hero-dots span.is-active::after { animation: none; transform: scaleX(1); }
  .uxwl__js .uxwl__frame::before, .uxwl__js .uxwl__frame::after,
  .uxwl__js .uxwl__band-media::before, .uxwl__js .uxwl__band-media::after { display: none; }
  .uxwl__js .uxwl__frame > figcaption, .uxwl__js .uxwl__band-media > figcaption { opacity: 1; transition: none; }
  .uxwl__navbar, .uxwl__navbar-inner, .uxwl__navbar-links, .uxwl__btn, :where(.uxwl__main) summary { transition: none; }
}