@layer reset, tokens, fonts, typography, base, layout, components, views;

@layer reset {

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

  * { margin: 0; }

  html {

    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;

    -moz-tab-size: 2;
    tab-size: 2;

    scroll-behavior: auto;

    scrollbar-width: none;
  }

  html::-webkit-scrollbar,
  .focus::-webkit-scrollbar { display: none; }

  body {
    min-height: 100svh;

  }

  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
  }

  input, button, textarea, select { font: inherit; color: inherit; }

  p, li, h1, h2, h3, h4, dd, dt, figcaption { overflow-wrap: break-word; }

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

@property --close-out        { syntax: "<time>"; inherits: true; initial-value: 0ms; }
@property --filter-close     { syntax: "<time>"; inherits: true; initial-value: 0ms; }
@property --filter-out       { syntax: "<time>"; inherits: true; initial-value: 0ms; }
@property --filter-slide-back { syntax: "<time>"; inherits: true; initial-value: 0ms; }
@property --pinch-back       { syntax: "<time>"; inherits: true; initial-value: 0ms; }
@property --preloader-out    { syntax: "<time>"; inherits: true; initial-value: 0ms; }
@property --vt-fade-back     { syntax: "<time>"; inherits: true; initial-value: 0ms; }
@property --vt-move-back     { syntax: "<time>"; inherits: true; initial-value: 0ms; }

@layer tokens {

  :root {

    color-scheme: light;

    --font-sans:
      "Haas Recast", "Haas Recast Fallback",
      ui-sans-serif, system-ui, -apple-system, "Helvetica Neue",
      Helvetica, Arial, sans-serif;

    --font-serif:
      "Times Ten", "Times Ten Fallback",
      ui-serif, "Times New Roman", Times, serif;

    --font-mono:
      ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --u-min: 0.0625rem;
    --u-max: calc(var(--u-min) * 22 / 18);
    --u: clamp(var(--u-min), calc(var(--u-min) + (100vw - 1600px) / 4320), var(--u-max));

    --type-s: round(var(--u) * 18, 1px);
    --type-m: round(var(--u) * 20, 1px);
    --type-l: round(var(--u) * 24, 1px);

    --leading-solid: 1;
    --leading-tight: 1.15;
    --leading-snug:  1.3;
    --leading-body:  1.6;

    --word-space-sans: -0.063em;
    --word-space-serif: -0.05em;

    --tracking-tighter: -0.03em;
    --tracking-tight:   -0.015em;
    --tracking-normal:   0em;
    --tracking-wide:     0.02em;
    --tracking-caps:     0.06em;

    --weight-regular: 600;
    --weight-medium:  600;
    --weight-bold:    600;

    --measure: 66ch;
    --measure-narrow: 46ch;

    --page-margin: round(clamp(20px, calc(20px + (100vw - 1024px) * 40 / 576), 60px), 1px);

    --cols: 3;
    --grid-cols: repeat(3, var(--img-w));
    --grid-justify: space-between;

    --grid-min-gap: 12px;

    --img-unit: round(min(51px, calc((100vw - 2 * var(--page-margin) - 4 * var(--grid-min-gap)) / 5)), 1px);
    --img-w-7: round(min(calc(var(--img-unit) * 5 / 7), calc((100vw - 2 * var(--page-margin) - 6 * var(--grid-min-gap)) / 7)), 1px);
    --img-w-5: round(min(var(--img-unit), calc((100vw - 2 * var(--page-margin) - 4 * var(--grid-min-gap)) / 5)), 1px);
    --img-w-3: round(min(calc(var(--img-unit) * 5 / 3), calc((100vw - 2 * var(--page-margin) - 2 * var(--grid-min-gap)) / 3)), 1px);
    --img-w-1: round(min(calc(var(--img-unit) * 5), calc(100vw - 4 * var(--page-margin))), 1px);
    --img-w: var(--img-w-3);

    --rows-per-screen: 3;
    --row-h: round(calc(var(--img-w) / var(--ar-min, 0.75)), 1px);
    --grid-top: calc(var(--nav-band) + var(--space-2xl));
    --row-gap-min: round(var(--u) * 24, 1px);
    --row-gap: round(max(
      var(--row-gap-min),
      calc((100svh - var(--grid-top)) / var(--rows-per-screen) - var(--row-h))
    ), 1px);

    --space-3xs: round(var(--u) * 4, 1px);
    --space-2xs: round(var(--u) * 8, 1px);
    --space-xs:  round(var(--u) * 12, 1px);
    --space-s:   round(var(--u) * 16, 1px);
    --space-m:   round(var(--u) * 24, 1px);
    --space-l:   round(var(--u) * 32, 1px);
    --space-xl:  round(var(--u) * 48, 1px);
    --space-2xl: round(var(--u) * 72, 1px);
    --space-3xl: round(var(--u) * 112, 1px);

    --ink:        light-dark(#141414, #ededed);
    --ink-muted:  light-dark(#5c5c5c, #a3a3a3);
    --paper:      light-dark(#ffffff, #0d0d0d);
    --paper-sunk: light-dark(#f4f4f2, #171717);
    --rule:       light-dark(#e2e2df, #262626);
    --accent:     light-dark(#1a48ff, #7f9bff);

    --bg-primary: #fafafa;

    --ui-default: rgba(0, 0, 0, 0.10);
    --ui-highlight: rgba(0, 0, 0, 0.1111);
    --nav-label: #ffffff;

    --logo-w: round(clamp(200px, 40vw, 600px), 1px);
    --preloader-bg: var(--bg-info);

    --preloader-hold: var(--t-slow);
    --preloader-out: calc(var(--preloader-hold) + var(--t-fast));
    --nav-in-delay: var(--preloader-out);
    --grid-start: var(--t-fast);
    --theme-fade: var(--t-base);

    --bg-blur: 10px;
    --ui-active: rgba(0, 0, 0, 0.1);
    --nav-band: round(var(--u) * 54, 1px);
    --nav-w: round(var(--u) * 402, 1px);
    --nav-pad-block: round(var(--u) * 7, 1px);
    --nav-pad-inline: round(var(--u) * 12, 1px);
    --nav-size: var(--type-s);
    --nav-leading: round(var(--u) * 20.7, 1px);
    --nav-weight: 600;

    --colophon-size: round(clamp(0.5625rem, calc(0.5625rem + (100vw - 375px) / 649), 0.625rem), 1px);

    --colophon-tracking: 0.05em;
    --colophon-inset: var(--page-margin);
    --colophon-bottom: round(var(--u) * 20, 1px);

    --colophon-cap: round(var(--colophon-size) * 0.69, 1px);
    --close-gap: 10px;

    --corner-gap: 12px;

    --focus-gap: calc(4 * var(--page-margin));

    --pinch-max: 4;
    --pinch-back: calc(var(--t-base) * var(--back));

    --focus-side-h: round(69.3svh, 1px);

    --focus-side: round(min(var(--focus-side-h), calc(80vw / sqrt(var(--ar-max, 1.5)))), 1px);

    --focus-w-max: round(80vw, 1px);
    --close-in: var(--t-slow);
    --close-out: calc(var(--close-in) * var(--back));

    --filter-open: var(--t-fast);
    --filter-close: calc(var(--filter-open) * var(--back));
    --filter-in: var(--t-fast);
    --filter-out: calc(var(--filter-in) * var(--back));
    --filter-move: var(--t-base);
    --filter-gap: round(var(--u) * 2, 1px);
    --filter-rise: round(var(--u) * 16, 1px);
    --filter-slide: var(--t-fast);
    --filter-slide-back: calc(var(--filter-slide) * var(--back));
    --filter-row-gap: round(var(--u) * 2, 1px);
    --filter-option-pad: round(var(--u) * 6, 1px);

    --bg-info: #dcdcdc;

    --bio-ink: #ffffff;
    --bio-size: var(--type-s);
    --bio-leading: round(var(--bio-size) * 1.05, 1px);
    --bio-indent: calc(2 * var(--page-margin));

    --bio-hyphenate: 6 3 3;
    --bio-hyphen-lines: 2;

    --caption-size: round(clamp(1rem, calc(1rem + (100vw - 375px) * 2 / 649), 1.125rem), 1px);
    --caption-tracking: 0.06em;
    --caption-ink: #969696;
    --chrome-ink: #969696;

    --caption-hold: 800ms;
    --caption-fade: var(--t-base);

    --load-stagger: calc(var(--t-fast) / 6);
    --load-duration: var(--t-base);
    --load-distance: 6px;
    --load-ease: var(--ease-quick);
    --load-max: 77;

    --hover-scale: 1.015;
    --hover-duration: var(--t-fast);
    --hover-duration-back: calc(var(--hover-duration) * var(--back));

    --t-fast: 300ms;
    --t-base: 600ms;
    --t-slow: 1200ms;

    --back: 0.5;

    --ease-smooth: cubic-bezier(0.25, 0, 0.25, 1);
    --ease-quick:  cubic-bezier(0, 0.5, 0.5, 1);
    --ease: var(--ease-smooth);
    --ease-flight: cubic-bezier(0.25, 0, 0, 1);
    --ease-hover: var(--ease-quick);
    --vt-ease: var(--ease);

    --vt-duration: var(--t-fast);
    --vt-duration-back: calc(var(--vt-duration) * var(--back));

    --nav-slide: var(--t-base);
    --nav-slide-delay: 0ms;

    --vt-move: var(--t-base);
    --vt-move-back: calc(var(--vt-move) * var(--back));

    --vt-fade: var(--t-fast);
    --vt-fade-back: calc(var(--vt-fade) * var(--back));

  }

  @media (width < 768px) {
    :root {
      --colophon-bottom: 20px;
      --corner-gap: 15px;

      --focus-w-max: round(calc(100vw - 4 * var(--page-margin)), 1px);
      --focus-side: var(--focus-side-h);
    }
  }

  @media (width >= 1024px) {
    :root {
      --cols: 5;
      --grid-cols: repeat(5, var(--img-w));
      --img-unit: 100px;
      --img-w: var(--img-w-5);
    }
  }

  @media (width >= 1600px) {
    :root {

      --img-unit: round(max(100px, 6.25vw), 1px);

      --colophon-size: round(clamp(0.625rem, calc(0.625rem + (100vw - 1600px) * 2 / 960), 0.75rem), 1px);

      --caption-size: round(clamp(1.125rem, calc(1.125rem + (100vw - 1600px) * 6 / 960), 1.5rem), 1px);
    }
  }
}

@layer fonts {

  @font-face {
    font-family: "Haas Recast";
    src: url("../fonts/HaasRecastOpen-SBd.woff2") format("woff2");

    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "Times Ten";
    src: url("../fonts/TimesTen.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "Times Ten Fallback";
    src: local("Times New Roman"), local("Times");
    ascent-override: 88.93%;
    descent-override: 23.49%;
    line-gap-override: 0%;
    size-adjust: 105.14%;
  }

  @font-face {
    font-family: "Haas Recast Fallback";
    src: local("Helvetica Neue"), local("Helvetica"), local("Arial");

    ascent-override: 98.08%;
    descent-override: 26.97%;
    line-gap-override: 0%;
    size-adjust: 101.24%;
  }
}

@layer typography {

  html {

    font-size: 100%;
  }

  body {
    font-family: var(--font-sans);
    font-size: var(--type-s);
    line-height: var(--leading-body);
    font-weight: var(--weight-regular);
    color: var(--ink);
    background: var(--paper);

    font-kerning: normal;

    font-variant-ligatures: common-ligatures contextual;

    font-variant-numeric: oldstyle-nums proportional-nums;

    font-optical-sizing: auto;

    font-synthesis: none;

    font-feature-settings: "calt" 1;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    hanging-punctuation: first allow-end last;

    font-size-adjust: ex-height 0.525;
    word-spacing: var(--word-space-sans);
  }

  .nums-tabular { font-variant-numeric: tabular-nums lining-nums; }
  .nums-lining  { font-variant-numeric: lining-nums proportional-nums; }
  .frac         { font-variant-numeric: diagonal-fractions; }
  .ordinal      { font-variant-numeric: ordinal; }
  .zero-slashed { font-variant-numeric: slashed-zero; }

  .smallcaps {
    font-variant-caps: all-small-caps;
    font-feature-settings: "case" 1;
    letter-spacing: var(--tracking-caps);
  }

  .sup { font-variant-position: super; }
  .sub { font-variant-position: sub; }

  .alt-a  { font-feature-settings: "ss01" 1; }
  .alt-g  { font-feature-settings: "ss02" 1; }

  .oblique { font-style: oblique 10deg; }

  @supports (text-box: trim-both cap alphabetic) {
    h1, h2, h3, .display, .trim-cap {
      text-box: trim-both cap alphabetic;
    }
  }

  @supports (text-box-trim: trim-both) and (not (text-box: trim-both cap alphabetic)) {
    h1, h2, h3, .display, .trim-cap {
      text-box-trim: trim-both;
      text-box-edge: cap alphabetic;
    }
  }

  h1, h2, h3, h4, .balance, blockquote p, figcaption {
    text-wrap: balance;
  }
  p, li, dd {
    text-wrap: pretty;
  }

  .prose {
    hyphens: auto;
    -webkit-hyphens: auto;
    hyphenate-limit-chars: 8 3 3;
  }

  h1, .display {
    font-size: var(--type-l);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
    font-weight: var(--weight-bold);
    text-wrap: balance;
  }
  h2 {
    font-size: var(--type-l);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    font-weight: var(--weight-bold);
  }
  h3 {
    font-size: var(--type-m);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    font-weight: var(--weight-medium);
  }
  h4, .overline {
    font-size: var(--type-s);
    line-height: var(--leading-snug);
    font-variant-caps: all-small-caps;
    letter-spacing: var(--tracking-caps);
    color: var(--ink-muted);
    font-feature-settings: "case" 1;
  }

  .prose {
    max-width: var(--measure);
    font-variant-numeric: oldstyle-nums proportional-nums;
  }
  .prose > * + * { margin-block-start: 1lh; }

  small { font-size: var(--type-s); }

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

  :lang(en) > q  { quotes: "\201C" "\201D" "\2018" "\2019"; }
  :lang(de) > q  { quotes: "\201E" "\201C" "\201A" "\2018"; }
  :lang(fr) > q  { quotes: "\00AB\00A0" "\00A0\00BB" "\2039\00A0" "\00A0\203A"; }

  blockquote p {
    font-size: var(--type-m);
    line-height: var(--leading-snug);
    text-indent: -0.4ch;
  }

  code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-size: 0.9em;
    font-variant-numeric: slashed-zero tabular-nums;
    font-feature-settings: "calt" 0;
  }

  @supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
    .prose.dropcap > p:first-of-type::first-letter {
      -webkit-initial-letter: 3;
      initial-letter: 3;
      margin-inline-end: 0.6rem;
      font-weight: var(--weight-medium);
    }
  }

  sup, sub { font-variant-position: super; line-height: 0; }
  sub { font-variant-position: sub; }

  abbr[title] { text-decoration: none; cursor: help; }

  ::selection { background: var(--accent); color: var(--paper); }
}

@layer base {

  body {
    -webkit-tap-highlight-color: transparent;
  }

  :focus-visible {
    outline: 1px solid var(--ink);
    outline-offset: 3px;
  }

  :focus:not(:focus-visible) { outline: none; }

  .card:focus:not(:focus-visible) { outline: none; }
  .card:focus-visible {
    outline: 1px solid var(--ink);
    outline-offset: 3px;
  }

  ul, ol { padding-inline-start: 1.4em; }
  li + li { margin-block-start: 0.35lh; }

  hr {
    border: 0;
    block-size: 1px;
    background: var(--rule);
    margin-block: var(--space-xl);
  }

  figure { margin-block: var(--space-l); }
  figcaption {
    margin-block-start: var(--space-2xs);
    font-size: var(--type-s);
    color: var(--ink-muted);
  }

  table {
    border-collapse: collapse;
    inline-size: 100%;
    font-variant-numeric: tabular-nums lining-nums;
  }
  th, td {
    text-align: start;
    padding: var(--space-2xs) var(--space-s);
    border-block-end: 1px solid var(--rule);
  }

  pre {
    overflow-x: auto;
    padding: var(--space-s) var(--space-m);
    background: var(--paper-sunk);
    border-radius: 6px;
    line-height: var(--leading-snug);
  }

  dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2xs) var(--space-m); }
  dt { color: var(--ink-muted); font-variant-caps: all-small-caps; letter-spacing: var(--tracking-caps); }
  dd { font-variant-numeric: tabular-nums lining-nums; }
}

@layer layout {

  .wrap {
    inline-size: min(100% - 2 * var(--space-l), 72rem);
    margin-inline: auto;
  }
  .wrap--prose { inline-size: min(100% - 2 * var(--space-l), var(--measure)); }

  .flow > * + * { margin-block-start: var(--flow-space, 1lh); }

  .section { padding-block: var(--space-2xl); }
  .section + .section { border-block-start: 1px solid var(--rule); }

  .grid {
    display: grid;
    gap: var(--space-xl) var(--space-l);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  }

  .stack-tight { display: grid; gap: var(--space-2xs); }
  .cluster { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-m); align-items: baseline; }

  .skip-link {
    position: absolute;
    inset-block-start: var(--space-2xs);
    inset-inline-start: var(--space-2xs);
    padding: var(--space-2xs) var(--space-s);
    background: var(--ink);
    color: var(--paper);
    border-radius: 4px;
    transform: translateY(-150%);
    transition: transform var(--t-fast) var(--ease);
  }
  .skip-link:focus { transform: none; }
}

@layer components {

  .nav-wrap {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: var(--nav-band);
    display: grid;
    align-items: end;
    justify-items: center;
    pointer-events: none;

    z-index: 5;
  }

  .nav {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    inline-size: var(--nav-w);
    max-inline-size: calc(100vw - 2 * var(--page-margin));
    pointer-events: auto;
    background: var(--ui-default);
    backdrop-filter: blur(var(--bg-blur));
    -webkit-backdrop-filter: blur(var(--bg-blur));
  }

  .nav__highlight {
    position: absolute;
    inset-block: 0;

    inline-size: 50%;
    inset-inline-start: 0;

    background: var(--ui-highlight);
    pointer-events: none;
    z-index: 0;
  }

  .nav--from-second .nav__highlight { --nav-from: 100%; }
  .nav--from-first  .nav__highlight { --nav-from: -100%; }
  .nav--from-first .nav__highlight,
  .nav--from-second .nav__highlight {
    animation: nav-slide var(--nav-slide) var(--ease) var(--nav-slide-delay) both;
  }
  @keyframes nav-slide {
    from { translate: var(--nav-from) 0; }
    to   { translate: 0 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .nav__highlight { animation-delay: 0ms; }
  }

  .nav:has(a:last-of-type[aria-current="page"]) .nav__highlight {
    inset-inline-start: 50%;
  }

  .nav a,
  .nav button {
    display: block;
    position: relative;
    z-index: 1;

    appearance: none;
    margin: 0;
    border: 0;
    background: none;
    cursor: pointer;
    text-align: center;
    padding-block: var(--nav-pad-block);
    font-family: var(--font-sans);
    font-size: var(--nav-size);
    line-height: var(--nav-leading);
    font-weight: var(--nav-weight);
    letter-spacing: 0;
    color: var(--nav-label);
    text-decoration: none;
    white-space: nowrap;

    text-box: trim-both cap alphabetic;
    font-feature-settings: "calt" 1, "onum" 1, "pnum" 1;

  }

  .nav__label {
    display: inline-block;
    position: relative;
    z-index: 1;
  }

  .nav-wrap--top {
    animation: nav-in var(--t-slow) var(--ease) var(--nav-in-delay) both;
  }

  .nav-wrap--top.is-leaving  { animation: nav-out var(--close-out) var(--ease) both; }
  .nav-wrap--top.is-entering { animation: nav-in  var(--close-in)  var(--ease) both; }
  .nav-wrap--top.is-leaving .nav { pointer-events: none; }
  @keyframes nav-out {
    from { translate: 0 0; }
    to   { translate: 0 -100%; }
  }

  .nav-wrap--filter .filter__chip {
    animation: close-in var(--t-slow) var(--ease) var(--nav-in-delay) both;
  }
  @keyframes nav-in {
    from { translate: 0 -100%; }
    to   { translate: 0 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .nav-wrap--top, .nav-wrap--filter .filter__chip { animation-delay: 0ms; }
  }

  .nav-wrap--top { translate: 0 calc(-100% * var(--out, 0)); }
  .nav-wrap--filter .filter__chip {
    translate: 0 calc((100% + var(--colophon-bottom) + var(--colophon-cap) + var(--close-gap)) * var(--out, 0));
  }

  .nav-wrap--filter {
    inset-block-start: auto;
    inset-block-end: calc(var(--colophon-bottom) + var(--colophon-cap) + var(--close-gap));
    block-size: auto;
    align-items: end;
  }
  .nav-wrap--filter.is-leaving  .filter__chip { animation: close-out var(--close-out) var(--ease) both; }
  .nav-wrap--filter.is-entering .filter__chip { animation: close-in  var(--close-in)  var(--ease) both; }
  .nav-wrap--filter.is-leaving .filter { pointer-events: none; }

  .filter {
    display: grid;
    gap: var(--filter-gap);
    inline-size: var(--nav-w);
    max-inline-size: calc(100vw - 2 * var(--page-margin));
    pointer-events: auto;
  }
  .filter .nav {
    inline-size: 100%;
    max-inline-size: none;
  }

  .filter__menu,
  html.theme-ready .filter__menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    translate: 0 var(--filter-rise);
    transition: opacity var(--filter-close) var(--ease),
                translate var(--filter-close) var(--ease),
                visibility 0s linear var(--filter-close),
                background-color var(--theme-fade) var(--ease),
                color var(--theme-fade) var(--ease);
  }

  .filter:not(.is-open) { pointer-events: none; }
  .filter:not(.is-open) .filter__chip { pointer-events: auto; }
  .filter.is-open .filter__menu,
  html.theme-ready .filter.is-open .filter__menu {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
    transition-duration: var(--filter-open), var(--filter-open), 0s, var(--theme-fade), var(--theme-fade);
  }

  .filter__list {
    display: flex;
    flex-direction: column;
    gap: var(--filter-row-gap);
    padding-block: var(--nav-pad-block);
  }

  .filter__menu button {
    padding-block: var(--filter-option-pad);
    inline-size: 100%;
  }
  html.theme-ready .filter .filter__menu button {
    transition: opacity var(--filter-close) var(--ease),
                background-color var(--theme-fade) var(--ease),
                color var(--theme-fade) var(--ease);
  }
  .filter.is-set .filter__menu button[aria-pressed="false"] { opacity: 0.4; }
  html.theme-ready .filter .filter__menu button[aria-pressed="true"] {
    transition-duration: var(--filter-open), var(--theme-fade), var(--theme-fade);
  }

  .filter__chip {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  .filter__main    { grid-column: 2; grid-row: 1; justify-self: center; }
  .filter__current { grid-column: 2; grid-row: 1; justify-self: center; }
  .filter__close,
  .filter__remove  { grid-column: 3; grid-row: 1; justify-self: end; padding-inline-end: var(--nav-pad-inline); }
  .filter__current, .filter__close, .filter__remove {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  html.theme-ready .filter .filter__current,
  html.theme-ready .filter .filter__close,
  html.theme-ready .filter .filter__remove {
    transition: opacity var(--filter-close) var(--ease),
                visibility 0s linear var(--filter-close),
                background-color var(--theme-fade) var(--ease),
                color var(--theme-fade) var(--ease);
  }
  .filter.is-open .filter__close,
  .filter.is-set:not(.is-open) .filter__current,
  .filter.is-set:not(.is-open) .filter__remove {
    visibility: visible;
    pointer-events: auto;
  }
  html.theme-ready .filter.is-open .filter__close {
    transition-duration: var(--filter-open), 0s, var(--theme-fade), var(--theme-fade);
    transition-delay: 0s;
  }

  html.theme-ready .filter.is-set:not(.is-open) .filter__current,
  html.theme-ready .filter.is-set:not(.is-open) .filter__remove {
    transition-duration: var(--filter-open), 0s, var(--theme-fade), var(--theme-fade);
    transition-delay: var(--filter-slide), var(--filter-slide), 0s, 0s;
  }
  @media (prefers-reduced-motion: reduce) {
    html.theme-ready .filter.is-set:not(.is-open) .filter__current,
    html.theme-ready .filter.is-set:not(.is-open) .filter__remove { transition-delay: 0s; }
  }
  .filter.is-open .filter__close,
  .filter.is-set:not(.is-open) .filter__remove { opacity: 1; }
  .filter.is-set:not(.is-open) .filter__current { opacity: 1; }
  .filter.is-set:not(.is-open) .filter__main {
    grid-column: 1;
    justify-self: start;
    padding-inline-start: var(--nav-pad-inline);
  }
  html.theme-ready .filter .filter__main {
    transition: background-color var(--theme-fade) var(--ease),
                color var(--theme-fade) var(--ease);
  }

  .filter__chip .nav__label { transition: opacity var(--filter-open) var(--ease); }
  .filter__chip .is-swapping .nav__label { opacity: 0; transition-duration: var(--filter-close); }

  @keyframes close-in {
    from { translate: 0 calc(100% + var(--colophon-bottom) + var(--colophon-cap) + var(--close-gap)); }
    to   { translate: 0 0; }
  }
  @keyframes close-out {
    from { translate: 0 0; }
    to   { translate: 0 calc(100% + var(--colophon-bottom) + var(--colophon-cap) + var(--close-gap)); }
  }

}

@layer views {

  .index {
    display: grid;

    grid-template-columns: var(--grid-cols);

    justify-content: var(--grid-justify);
    align-items: start;

    row-gap: var(--row-gap);

    grid-auto-rows: var(--row-h);

    padding-inline: var(--page-margin);

    padding-block: var(--grid-top);
  }

  .card {
    display: block;
    position: relative;
    text-decoration: none;
    color: inherit;

    scroll-margin-block-start: calc(50dvh - var(--img-w) / var(--ar, 1.4286) / 2);
  }

  .card img {
    width: 100%;
    height: auto;
    display: block;
  }

  @media (hover: hover) and (pointer: fine) {

    .card img {
      transition: scale var(--hover-duration-back) var(--ease-hover);
    }
    .card:hover img { transition-duration: var(--hover-duration); }

    .card:hover img, .card:hover video { scale: var(--hover-scale); }
    .card video { transition: opacity calc(var(--t-fast) * var(--back)) var(--ease), scale var(--hover-duration-back) var(--ease-hover); }
    .card:hover video { transition-duration: calc(var(--t-fast) * var(--back)), var(--hover-duration); }
  }

  .card video {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    z-index: 1;
    opacity: 0;
    transition: opacity calc(var(--t-fast) * var(--back)) var(--ease);
    pointer-events: none;
  }
  .card.is-playing video { opacity: 1; }

  html.js .card:not(:has(img.is-in)) video { opacity: 0; }
  html.is-focused .card video { opacity: 0; }

  .card { transition: opacity var(--filter-in) var(--ease); }

  .card img { transition: opacity var(--vt-fade) var(--ease), scale var(--hover-duration-back) var(--ease-hover); }
  .index.is-away .card:not(.is-hero) img,
  .index.is-away .card:not(.is-hero) video { opacity: 0; transition-duration: var(--vt-fade-back); }

  .card[hidden] { display: none; }
  .card.is-filtered { opacity: 0; transition-duration: var(--filter-out); }
  .card.is-arriving { transition-duration: var(--filter-in); }
  html:not(.js) .nav-wrap--filter { display: none; }

  .card img {

    animation: card-in var(--load-duration) var(--load-ease)
               calc(var(--load-i, 0) * var(--load-stagger)) backwards;
  }

  html.js .card img { animation-play-state: paused; }
  html.js.grid-ready .card img.is-loaded { animation-play-state: running; }

  html.js .index.is-held .card img { animation-play-state: paused; }

  .card img.is-in { animation: none; }

  .page-part { transition: opacity var(--vt-duration) var(--ease); }
  .page-part.is-out { opacity: 0; transition-duration: var(--vt-duration-back); pointer-events: none; }

  html.theme-ready .info.page-part {
    transition: opacity var(--vt-duration) var(--ease),
                background-color var(--theme-fade) var(--ease),
                color var(--theme-fade) var(--ease);
  }
  html.theme-ready .info.page-part.is-out { transition-duration: var(--vt-duration-back), var(--theme-fade), var(--theme-fade); }
  .page-part[hidden] { display: none; }

  @keyframes card-in {
    from { opacity: 0; translate: 0 var(--load-distance); }
    to   { opacity: 1; translate: 0 0; }
  }

  .focus.focus--overlay {
    position: fixed;
    inset: 0;
    min-block-size: 0;
    z-index: 2;
    background: var(--bg-primary);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  .focus.focus--overlay.is-arriving { background: transparent; }

  html.is-focused { overflow: hidden; }

  html.is-transitioning { overflow: hidden; overflow-anchor: none; }
  html.is-transitioning .focus.focus--overlay { overflow: hidden; }

  html.is-focused .card__credits,
  html.is-focused .card__n { visibility: hidden; }

  .colophon-fixed, .corner, .counter, .zoom {
    transition: opacity var(--close-in) var(--ease);
  }
  html.is-focused .colophon-fixed, html.is-focused .corner, html.is-focused .counter, html.is-focused .zoom {
    opacity: 0;
    pointer-events: none;
    transition-duration: var(--close-out);
  }

  html.is-flow .colophon-fixed, html.is-flow .corner, html.is-flow .counter, html.is-flow .zoom,
  html.js body:has(main.focus:not(.focus--overlay):not(.focus--flow)) .colophon-fixed,
  html.js body:has(main.focus:not(.focus--overlay):not(.focus--flow)) .corner,
  html.js body:has(main.focus:not(.focus--overlay):not(.focus--flow)) .counter,
  html.js body:has(main.focus:not(.focus--overlay):not(.focus--flow)) .zoom {
    opacity: calc(1 - var(--out, 1));
    transition: none;
  }
  html.is-flow:not(.is-past) .corner, html.is-flow:not(.is-past) .corner *, html.is-flow:not(.is-past) .zoom { pointer-events: none; }
  html.is-past .focus__sound, html.is-past .focus__n {
    opacity: 0;
    pointer-events: none;
    transition: none;
  }

  .focus__credit { transition: opacity var(--close-in) var(--ease); }
  html.is-past .focus__credit, .focus__credit.is-leaving {
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--close-out) var(--ease);
  }
  main.focus .focus__item.is-nearest .focus__n { opacity: 0; }

  .focus {
    position: relative;
    z-index: 1;

  }

  .focus__column {
    position: relative;
    display: grid;
    justify-items: center;
    gap: var(--focus-gap);
    padding-inline: var(--page-margin);

    padding-block: round(calc(50svh - var(--item-h) / 2), 1px);
  }

  .focus__column, .focus__item {
    --item-w: round(min(
      var(--focus-w-max),
      calc(80svh * var(--ar, 1.4286)),
      calc(sqrt(var(--ar, 1.4286)) * var(--focus-side))
    ), 1px);
    --item-h: round(calc(var(--item-w) / var(--ar, 1.4286)), 1px);
  }

  .focus:not(.focus--overlay) { margin-block-end: calc(-1 * var(--grid-top)); }

  main.focus.is-retired { pointer-events: none; }
  main.focus.is-retired .focus__credit { display: none; }

  main.focus-gone { block-size: 0; overflow: hidden; visibility: hidden; pointer-events: none; }

  :root:has(.focus:not(.focus--overlay):not(.focus--flow)) { scroll-snap-type: y proximity; }

  .focus__item {
    margin: 0;

    position: relative;

    scroll-snap-align: start;
    scroll-margin-block-start: calc(50dvh - var(--item-h) / 2);
  }

  .focus__item img {
    position: relative;
    z-index: 1;
    inline-size: var(--item-w);
    block-size: auto;
    aspect-ratio: var(--ar, 1.4286);
  }

  .card picture, .focus__item picture { display: contents; }

  .focus--overlay .focus__item:not([data-current]),
  .focus--flow .focus__item:not([data-current]) {
    opacity: 0;
    transition: opacity var(--vt-fade-back) var(--ease);
  }
  .focus--overlay.is-landed .focus__item:not([data-current]),
  .focus--flow.is-landed .focus__item:not([data-current]) {
    opacity: 1;
    transition-duration: var(--close-in);
  }

  main.focus.is-leaving .focus__column {
    opacity: 0;
    transition: opacity var(--vt-fade-back) var(--ease);
  }

  .focus__item video {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    z-index: 2;
    opacity: 0;
    transition: opacity calc(var(--t-fast) * var(--back)) var(--ease);
    pointer-events: none;
  }
  .focus__item.is-playing video { opacity: 1; }

  .focus__sound {
    position: fixed;
    z-index: 4;

    inset-block-end: calc(var(--colophon-bottom) - 17px);
    inset-inline: 0;
    margin-inline: auto;
    inline-size: max-content;
    padding: 17px 24px;
    border: 0;
    background: none;
    color: var(--chrome-ink);
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .focus__sound[hidden] { display: none; }

  html.is-pointer :focus-visible,
  html.is-pointer .card:focus-visible,
  html.is-pointer .theme-toggle:focus-visible { outline: none; }
  main.focus:focus, main.focus:focus-visible { outline: none; }

  :root:has(.info),
  :root[data-theme="dark"]:has(.info) {
    --caption-ink: #fafafa;
    --chrome-ink: #fafafa;
  }

  body:has(main.info) { background: var(--bg-info); }
  .info {
    min-block-size: 100svh;
    display: grid;
    place-items: center;
    grid-template-areas: "stack";
    padding-block: var(--nav-band);

    padding-inline: var(--page-margin);
    background: var(--bg-info);
  }

  .info .info__bio { grid-area: stack; }

  .info .info__bio {
    font-family: var(--font-sans);
    font-size: var(--bio-size);
    line-height: var(--bio-leading);
    font-weight: var(--nav-weight);
    text-transform: none;
    letter-spacing: 0;
    text-indent: var(--bio-indent);
    text-align: justify;
    text-align-last: left;

    -webkit-hyphens: manual;
    hyphens: manual;
    inline-size: 100%;
    color: var(--bio-ink);
    text-box: trim-both cap alphabetic;
    font-feature-settings: "calt" 1, "onum" 1, "pnum" 1;
  }

  @media (width < 768px) {
    .info .info__bio {
      -webkit-hyphens: auto;
      hyphens: auto;
      hyphenate-limit-chars: var(--bio-hyphenate);
      -webkit-hyphenate-limit-before: 3;
      -webkit-hyphenate-limit-after: 3;
      -webkit-hyphenate-limit-lines: var(--bio-hyphen-lines);
      hyphenate-limit-lines: var(--bio-hyphen-lines);
    }
  }

  .info .info__bio .nb, .info .info__bio a {
    -webkit-hyphens: manual;
    hyphens: manual;
  }

  .info .info__bio a {
    font: inherit;
    text-transform: none;
    letter-spacing: inherit;
    text-indent: 0;
    color: inherit;
    text-decoration: none;
  }

  .card__credits,
  .focus__credits,
  .focus__credit {
    position: fixed;
    inset: 0;
    z-index: 4;
    display: grid;
    place-content: center;
    padding-inline: var(--page-margin);
    text-align: center;
    pointer-events: none;

    opacity: 0;
  }
  .card__n,
  .focus__n { opacity: 0; }

  .studio__break { display: none; }
  @media (width < 768px) {
    .studio__break { display: inline; }
    .studio__stop  { display: none; }
  }

  .caption__line {
    margin: 0;
    font-family: var(--font-serif);

    font-size-adjust: none;
    word-spacing: var(--word-space-serif);
    font-size: var(--caption-size);
    line-height: 1.3;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: var(--caption-tracking);
    text-indent: var(--caption-tracking);
    color: var(--caption-ink);

    text-box: trim-both cap alphabetic;
    font-feature-settings: "calt" 1, "onum" 1, "pnum" 1;
  }

  @media (hover: hover) and (pointer: fine) {

    html.theme-ready .card__credits,
    html.theme-ready .card__n {
      transition: opacity var(--caption-fade) var(--ease) var(--caption-hold);
    }

    .card:hover .card__credits,
    .card:hover .card__n { opacity: 1; transition: none; }

    html:not(.is-focused) .card:hover { z-index: 4; }

    .index:has(.card:hover) .card:not(:hover) .card__credits,
    .index:has(.card:hover) .card:not(:hover) .card__n {
      opacity: 0;
      transition: none;
    }

  }

  .focus__item.is-nearest .focus__n { opacity: 1; }

  html.js .focus__credits { display: none; }
  .focus__credit { opacity: 1; }
  .focus__credit:empty { opacity: 0; }

  main.focus.is-idle .focus__credit {
    opacity: 0;
    transition: opacity var(--caption-fade) var(--ease);
  }

  html.is-pinching .focus__credit { opacity: 0; transition: none; }
  main.focus, .focus__column { touch-action: pan-y; }

  .card, .card *, .focus__item, .focus__item *, .is-flying {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
  }

  @media (hover: none), (pointer: coarse) {
    .index { touch-action: pan-y; }
  }

  .index[data-cols="7"] { --cols: 7; --grid-cols: repeat(7, var(--img-w)); --img-w: var(--img-w-7); }
  .index[data-cols="5"] { --cols: 5; --grid-cols: repeat(5, var(--img-w)); --img-w: var(--img-w-5); }
  .index[data-cols="3"] { --cols: 3; --grid-cols: repeat(3, var(--img-w)); --img-w: var(--img-w-3); }
  .index[data-cols="1"] { --cols: 1; --grid-cols: var(--img-w); --img-w: var(--img-w-1); --grid-justify: center; }
  .index[data-cols] {
    --row-h: round(calc(var(--img-w) / var(--ar-min, 0.75)), 1px);
    --row-gap: round(max(
      var(--row-gap-min),
      calc((100svh - var(--grid-top)) / var(--rows-per-screen) - var(--row-h))
    ), 1px);
  }

  .index[data-cols="1"] {
    --row-h: auto;
    --row-gap: calc(6 * var(--page-margin));

    --grid-cols: round(calc(100vw - 4 * var(--page-margin)), 1px);
    justify-items: center;
  }
  .index[data-cols="1"] .card {
    inline-size: round(min(calc(var(--img-w-1) * sqrt(var(--ar, 1))), calc(100vw - 4 * var(--page-margin))), 1px);
  }

  .focus__back {
    position: fixed;
    inset-block-start: var(--nav-pad-block);
    inset-inline-start: 50%;
    translate: -50% 0;
    z-index: 5;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    padding: var(--nav-pad-block) var(--nav-pad-inline);
    font: inherit;
    font-weight: 600;
    color: var(--ink);
    background: var(--ui-highlight);
    text-decoration: none;
  }
  .focus__back:focus-visible {
    inline-size: auto;
    block-size: auto;
    overflow: visible;
    clip-path: none;
  }

  @keyframes credit-out { to { opacity: 0; } }
  html:not(.js) main.focus .focus__credits,
  html:not(.js) .focus__item[data-current] .focus__n {
    opacity: 1;
    animation: credit-out var(--caption-fade) var(--ease) var(--caption-hold) forwards;
  }

  @media (hover: none), (pointer: coarse) {
    .card__credits, .card__n { display: none; }
  }

  .preloader {
    position: fixed;
    inset: 0;
    z-index: 6;
    display: grid;
    place-items: center;
    background: var(--preloader-bg);
    animation: ground-out var(--t-fast) var(--ease) var(--preloader-out) both;
  }
  .preloader img, .preloader svg {
    inline-size: var(--logo-w);
    block-size: auto;
    animation: mark-out var(--t-fast) var(--ease) var(--preloader-hold) both;
  }
  @keyframes mark-out { to { opacity: 0; } }
  @keyframes ground-out {
    from { opacity: 1; visibility: visible; }
    to   { opacity: 0; visibility: hidden; }
  }
  html.preloaded .preloader { display: none; }

  html.preloaded .nav-wrap--top:not(.is-leaving):not(.is-entering),
  html.arrived .nav-wrap--top:not(.is-leaving):not(.is-entering) { animation: none; }

  html.js body:has(main.focus:not(.focus--overlay)) .nav-wrap--top:not(.is-entering):not(.is-leaving),
  html.js body:has(main.focus:not(.focus--overlay)) .nav-wrap--filter:not(.is-entering):not(.is-leaving) { --out: 1; }
  html.js body:has(main.focus:not(.focus--overlay)) .nav-wrap--top:not(.is-entering):not(.is-leaving),
  html.js body:has(main.focus:not(.focus--overlay)) .nav-wrap--filter:not(.is-entering):not(.is-leaving) .filter__chip { animation: none; }
  html.preloaded .nav-wrap--filter:not(.is-leaving):not(.is-entering) .filter__chip,
  html.arrived .nav-wrap--filter:not(.is-leaving):not(.is-entering) .filter__chip { animation: none; }

  @media (prefers-reduced-motion: reduce) {
    .preloader, .preloader img, .preloader svg { animation-delay: 0ms; }
  }

  body {
    background: var(--bg-primary);
  }

  .counter,
  .card__n,
  .focus__n,
  .focus__sound,
  .colophon-fixed,
  .corner,
  .zoom {
    position: fixed;
    z-index: 4;
    font-family: var(--font-serif);
    font-size-adjust: none;
    word-spacing: var(--word-space-serif);
    font-size: var(--colophon-size);
    letter-spacing: var(--colophon-tracking);
    text-transform: uppercase;
    text-box: trim-both cap alphabetic;

    font-feature-settings: "calt" 1;

    color: var(--chrome-ink);
    font-variant-numeric: tabular-nums lining-nums;
    pointer-events: none;
  }

  .focus__sound, .zoom { pointer-events: auto; }

  .zoom {
    inset-block-end: calc(var(--colophon-bottom) - 19px);
    padding: 19px 14px;
    min-inline-size: 44px;
    text-align: center;
    margin: 0;
    border: 0;
    background: none;
    cursor: pointer;
    translate: -50% 0;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .zoom--in  { inset-inline-start: var(--zoom-out-x, 75%); }
  .zoom--out { inset-inline-start: var(--zoom-in-x, 25%); }
  .zoom__word { display: none; }
  .zoom[aria-disabled="true"] { color: color-mix(in srgb, var(--chrome-ink) 40%, transparent); pointer-events: none; }
  body:has(main.info) .zoom { display: none; }
  html:not(.js) .zoom { display: none; }

  .counter,
  .card__n,
  .focus__n       { inset-block-end: var(--colophon-bottom);
                    inset-inline: 0;
                    text-align: center;
                    pointer-events: none; }
  .colophon-fixed { inset-block-end: var(--colophon-bottom);
                    inset-inline-start: var(--colophon-inset); }

  .colophon__c { margin-inline-end: 0; }

  .corner {
    inset-block-end: var(--colophon-bottom);
    inset-inline-end: var(--colophon-inset);
    display: flex;
    align-items: end;
    gap: var(--corner-gap);
    pointer-events: none;
  }
  .corner a,
  .theme-toggle {
    font: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
    text-transform: inherit;
    text-box: inherit;
    font-feature-settings: inherit;
    color: inherit;
    text-decoration: none;
    pointer-events: auto;
  }
  .theme-toggle {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    line-height: inherit;
    cursor: pointer;
  }
  .theme-toggle:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }

  .theme-toggle {
    display: grid;
    justify-items: end;
  }

  .theme-toggle > span { grid-area: 1 / 1; text-box: trim-both cap alphabetic; }
  :root:not([data-theme="dark"]) .theme-toggle__dark,
  :root[data-theme="dark"] .theme-toggle__light { visibility: hidden; }

  html.theme-ready body,
  html.theme-ready .focus.focus--overlay,

  html.theme-ready .nav, html.theme-ready .nav__highlight, html.theme-ready .nav a,
  html.theme-ready .nav:not(.filter__menu):not(.filter__chip) button,
  html.theme-ready .info, html.theme-ready .info .info__bio,
  html.theme-ready .caption__line, html.theme-ready .counter,
  html.theme-ready .card__n, html.theme-ready .focus__n,
  html.theme-ready .colophon-fixed, html.theme-ready .corner a,
  html.theme-ready .theme-toggle {
    transition: background-color var(--theme-fade) var(--ease),
                color var(--theme-fade) var(--ease);
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg-primary: #000000;
    --ui-default: rgba(255, 255, 255, 0.10);
    --ui-highlight: rgba(255, 255, 255, 0.1111);
    --nav-label: #fafafa;
    --bio-ink: #fafafa;
    --caption-ink: #fafafa;
    --chrome-ink: #fafafa;
    --bg-info: #000000;
    --preloader-bg: #000000;
  }

}