@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin.a0d054c4.woff2') format('woff2');
}
@font-face {
  font-family: 'Wix Madefor Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/wix-madefor-text-latin.4d1e9ffd.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin.1e06740a.woff2') format('woff2');
}

:root {
  --field: #1E2A78;
  --field-rgb: 30 42 120;
  --field-deep: #18226A;
  --film: #10174E;
  --grid: rgb(241 242 248 / .07);
  --grid-major: rgb(241 242 248 / .12);
  --rule: rgb(241 242 248 / .2);
  --ink: #F4F5FA;
  --ink-soft: #C9CDE6;
  --sun: #E6DF6B;
  --plate: #FFFFFF;
  --plate-ink: #2A2F45;
  --display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --text: 'Wix Madefor Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --gutter: clamp(1rem, 4vw, 3rem);
  --page: 80rem;
  --rail: 9rem;
  --read: 38rem;
  --cell: 3rem;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --shadow-plate: 0 1.5rem 3rem -1.25rem rgb(6 9 40 / .75), 0 .3rem .7rem rgb(6 9 40 / .35);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  color-scheme: dark; -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  scrollbar-color: rgb(241 242 248 / .35) var(--field-deep);
  accent-color: var(--sun); caret-color: var(--sun);
  interpolate-size: allow-keywords;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
::selection { background: var(--sun); color: var(--film); }

body {
  margin: 0; overflow-x: clip;
  background: var(--field);
  color: var(--ink);
  font: 400 1.125rem/1.75 var(--text);
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }

a {
  color: inherit; text-decoration-line: underline; text-decoration-color: rgb(230 223 107 / .8);
  text-decoration-thickness: .08em; text-underline-offset: .24em;
  transition: color .25s var(--ease-out), text-decoration-color .25s var(--ease-out), text-decoration-thickness .25s var(--ease-out);
}
a:hover { color: #fff; text-decoration-color: var(--sun); text-decoration-thickness: .14em; }
a:focus-visible, summary:focus-visible, button:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; border-radius: 2px; }

strong { font-weight: 700; color: #fff; }
em, i { font-style: normal; color: #fff; }
.icon { width: 1.1rem; height: 1.1rem; flex: none; }

.skip { position: absolute; left: -999px; top: .5rem; z-index: 20; padding: .6rem 1rem;
        background: var(--sun); color: var(--film); font: 600 .95rem/1 var(--display); }
.skip:focus { left: .5rem; }

.mark { width: 1.6rem; height: 1.6rem; flex: none; color: var(--ink); }
.mark-sun { fill: var(--sun); }

.masthead {
  position: absolute; z-index: 5; inset: 0 0 auto 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: var(--page); margin: 0 auto; padding: 1.1rem var(--gutter);
  font-family: var(--mono); font-size: .8rem; letter-spacing: .01em;
}
.brand { display: flex; align-items: center; gap: .6rem; min-width: 0; text-decoration: none;
         color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand > span { color: var(--sun); }
.langs ul { display: flex; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.langs a { display: inline-block; min-width: 2.75rem; padding: .6rem .5rem; text-align: center; border-radius: 2px;
           text-decoration: none; border: 1px solid rgb(241 242 248 / .35); color: var(--ink);
           background: rgb(var(--field-rgb) / .55);
           transition: color .2s var(--ease-out), border-color .2s var(--ease-out), background-color .2s var(--ease-out); }
.langs a[aria-current="page"] { color: var(--film); background: var(--ink); border-color: var(--ink); }
.langs a:not([aria-current]):hover { border-color: var(--sun); color: #fff; }

.progress { position: fixed; z-index: 10; inset: 0 0 auto 0; height: 3px; background: var(--sun);
            transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }

h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.06;
             letter-spacing: -.025em; text-wrap: balance; color: #fff; margin: 0; }

.frame-no { color: var(--sun); font-weight: 700; white-space: nowrap; }

.cover { position: relative; isolation: isolate; overflow: hidden; }
.cover-media { position: relative; aspect-ratio: var(--ratio-m); overflow: hidden; }
.cover-media img { width: 100%; height: 100%; object-fit: cover; }
.cover-media::after, .band-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.cover-media::after {
  background:
    linear-gradient(180deg, rgb(var(--field-rgb) / .75) 0%, rgb(var(--field-rgb) / 0) 26%),
    linear-gradient(0deg, var(--field) 0%, rgb(var(--field-rgb) / .6) 22%, rgb(var(--field-rgb) / 0) 52%);
}
.cover-text { position: relative; max-width: var(--page); margin: -3.5rem auto 0; padding: 0 var(--gutter) clamp(3rem, 7vw, 5rem); }
.cover h1 { font-size: clamp(2.6rem, 6.4vw, 5.75rem); font-weight: 700; letter-spacing: -.035em; line-height: .98; max-width: 11ch; }
.lead { margin-top: clamp(1.25rem, 3vw, 2rem); max-width: 36rem;
        font-size: clamp(1.125rem, 1.4vw, 1.25rem); line-height: 1.7;
        padding-top: 1.25rem; border-top: 1px solid var(--sun); }
.lead p { margin: 0; }

@media (min-width: 48rem) {
  .cover { min-height: clamp(38rem, 94vh, 62rem); display: flex; align-items: flex-end; }
  .cover-media { position: absolute; inset: 0; aspect-ratio: auto; z-index: -1; }
  .cover-media img { object-position: 62% 50%; transform: scale(1.09); transform-origin: 62% 50%; }
  .cover-media::after {
    background:
      linear-gradient(90deg, var(--field) 0%, rgb(var(--field-rgb) / .94) 26%, rgb(var(--field-rgb) / .55) 48%, rgb(var(--field-rgb) / 0) 72%),
      linear-gradient(0deg, var(--field) 0%, rgb(var(--field-rgb) / 0) 34%),
      linear-gradient(180deg, rgb(var(--field-rgb) / .7) 0%, rgb(var(--field-rgb) / 0) 18%),
      linear-gradient(var(--grid) 1px, transparent 1px) -1px -1px / var(--cell) var(--cell),
      linear-gradient(90deg, var(--grid) 1px, transparent 1px) -1px -1px / var(--cell) var(--cell);
  }
  .cover-text { width: 100%; margin-top: 0; padding-top: 8rem; }
}
@media (min-width: 64rem) {
  .cover-media { inset: 0 0 0 26%; }
  .cover-media img { object-position: 50% 50%; transform: scale(1.07); transform-origin: 50% 50%; }
  .cover-media::after {
    background:
      linear-gradient(90deg, var(--field) 0%, rgb(var(--field-rgb) / .7) 18%, rgb(var(--field-rgb) / 0) 45%),
      linear-gradient(0deg, var(--field) 0%, rgb(var(--field-rgb) / 0) 34%),
      linear-gradient(180deg, rgb(var(--field-rgb) / .7) 0%, rgb(var(--field-rgb) / 0) 18%),
      linear-gradient(var(--grid) 1px, transparent 1px) -1px -1px / var(--cell) var(--cell),
      linear-gradient(90deg, var(--grid) 1px, transparent 1px) -1px -1px / var(--cell) var(--cell);
  }
}

.intro { max-width: var(--page); margin: 0 auto clamp(4rem, 9vw, 6.5rem); padding: 0 var(--gutter); }
.intro > *, .part-body > * { max-width: var(--read); }
.intro p, .part-body p { margin: 0 0 1.15em; }

.links-grid { display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr); max-width: none; }
@media (min-width: 48rem) { .links-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } }
.part--links .part-body { max-width: none; }
.tile {
  position: relative; margin: 0; padding: 1.35rem 1.35rem 1.4rem; max-width: none; min-height: 100%;
  display: flex; flex-direction: column; gap: .95rem;
  border: 1px solid rgb(241 242 248 / .14); background: rgb(16 23 78 / .55);
  transition: border-color .3s var(--ease-out), background-color .3s var(--ease-out), transform .3s var(--ease-out);
}
.tile-icon { width: 1.6rem; height: 1.6rem; color: var(--sun); stroke-width: 1.6;
             transition: transform .35s var(--ease-out); }
.tile p { margin: 0; min-width: 0; container-type: inline-size;
          font: 600 1.12rem/1.35 var(--display); letter-spacing: -.01em; color: #fff; }
.tile em { color: #fff; }
.tile a { display: block; margin-top: .55rem; padding-top: .55rem; border-top: 1px solid rgb(241 242 248 / .14);
          font: 500 min(.92rem, calc(100cqi / 22.5))/1.4 var(--mono); letter-spacing: 0;
          color: var(--sun); white-space: nowrap; overflow-wrap: normal; word-break: keep-all; text-decoration: none; }
.tile a em { color: inherit; }
.tile a::after { content: ""; position: absolute; inset: 0; }
.tile-arrow { position: absolute; right: 1.2rem; top: 1.35rem; width: 1.25rem; height: 1.25rem; color: var(--sun);
              transition: transform .3s var(--ease-out); }
.tile::before {
  content: ""; position: absolute; inset: -1px; pointer-events: none; opacity: .9;
  --c: var(--sun); --l: .7rem;
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / var(--l) 1px, linear-gradient(var(--c), var(--c)) 0 0 / 1px var(--l),
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--l) 1px, linear-gradient(var(--c), var(--c)) 100% 0 / 1px var(--l),
    linear-gradient(var(--c), var(--c)) 0 100% / var(--l) 1px, linear-gradient(var(--c), var(--c)) 0 100% / 1px var(--l),
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--l) 1px, linear-gradient(var(--c), var(--c)) 100% 100% / 1px var(--l);
  background-repeat: no-repeat;
  transition: inset .35s var(--ease-out);
}
.tile:hover, .tile:focus-within { border-color: rgb(230 223 107 / .6); background: rgb(16 23 78 / .9); transform: translateY(-2px); }
.tile:hover::before, .tile:focus-within::before { inset: -5px; }
.tile:hover .tile-arrow, .tile:focus-within .tile-arrow { transform: translate(3px, -3px); }
.tile:hover .tile-icon, .tile:focus-within .tile-icon { transform: scale(1.08) rotate(-4deg); }
.tile a:focus-visible { outline: none; }
.tile:has(a:focus-visible) { outline: 2px solid var(--sun); outline-offset: 6px; }

.more { margin-top: .4rem; }
.more summary, .more-close {
  display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; list-style: none;
  padding: .7rem 1.1rem .7rem .85rem; border: 1px solid rgb(230 223 107 / .55); border-radius: 2px;
  background: transparent; color: var(--ink);
  font: 600 .95rem/1 var(--display); letter-spacing: .01em;
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.more summary::-webkit-details-marker { display: none; }
.more summary:hover, .more-close:hover { background: var(--sun); color: var(--film); border-color: var(--sun); }
.fold-icon { transition: transform .35s var(--ease-out); }
.more[open] > summary .fold-icon, .more-close .fold-icon { transform: rotate(180deg); }
.more-opened { display: none; }
.more[open] .more-opened { display: inline; }
.more[open] .more-closed { display: none; }
.more-body { padding-top: 1.3rem; }
.more-close { margin-top: .6rem; }
.more::details-content { block-size: 0; overflow: clip;
  transition: block-size .55s var(--ease-out), content-visibility .55s allow-discrete; }
.more[open]::details-content { block-size: auto; }

.toc { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }
.toc h2 { font-family: var(--mono); font-size: .78rem; font-weight: 600; letter-spacing: .1em;
          text-transform: uppercase; color: var(--ink-soft); padding-bottom: 1rem;
          border-bottom: 1px solid var(--rule); }
.toc ol { list-style: none; margin: 0; padding: 0;
          display: grid; gap: 0 2.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); }
.toc li { border-bottom: 1px solid var(--grid-major); }
.toc a { position: relative; display: grid; grid-template-columns: 2.5rem 1fr; gap: .5rem; padding: .9rem 0;
         text-decoration: none; font-family: var(--display); font-size: 1.05rem; line-height: 1.3; }
.toc a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--sun);
                transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out); }
.toc a:hover::after, .toc a:focus-visible::after { transform: scaleX(1); }
.toc a:hover { color: #fff; }
.toc a:hover .toc-no { transform: translateX(.25rem); }
.toc-no { font-family: var(--mono); font-size: .78rem; color: var(--sun); padding-top: .22rem;
          font-variant-numeric: tabular-nums; transition: transform .35s var(--ease-out); }

.part {
  max-width: var(--page); margin: 0 auto; padding: clamp(4.5rem, 9vw, 7rem) var(--gutter) 0;
  display: grid; gap: 1.5rem 3rem; grid-template-columns: minmax(0, 1fr);
  scroll-margin-top: 1rem;
}
.part-head { position: relative; padding-top: 1.1rem; border-top: 1px solid var(--rule); }
.part-head::before { content: ""; position: absolute; top: -1px; left: 0; width: 3rem; height: 1px; background: var(--sun); }
.part-no { display: block; font-family: var(--mono); font-size: .78rem; font-weight: 700;
           letter-spacing: .06em; color: var(--sun); white-space: nowrap; padding-top: .55rem;
           font-variant-numeric: tabular-nums; }
.part h2 { font-size: clamp(1.85rem, 3.6vw, 2.9rem); max-width: 20em; margin-top: .4rem; }
.part h3 { font-size: 1.3rem; margin: 2em 0 .6em; }
@media (min-width: 60rem) {
  .part { grid-template-columns: var(--rail) minmax(0, 1fr); }
  .part-head { grid-column: 1 / -1; display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: 0 3rem; }
  .part-body, .brands { grid-column: 2; }
  .film, .band { grid-column: 1 / -1; }
}

.part--band { padding-top: clamp(3rem, 6vw, 5rem); }
.band { position: relative; width: 100vw; margin-inline: calc(50% - 50vw); }
.band-media { position: relative; overflow: hidden; aspect-ratio: var(--ratio-m); }
.band-media img { width: 100%; height: 100%; object-fit: cover; }
.band-media::after {
  background:
    linear-gradient(180deg, var(--field) 0%, rgb(var(--field-rgb) / 0) 22%),
    linear-gradient(0deg, var(--field) 0%, rgb(var(--field-rgb) / .7) 20%, rgb(var(--field-rgb) / 0) 50%);
}
.part--band .part-head { margin-top: -6.5rem; border-top-color: transparent; }
.part--band .part-head::before { display: none; }
@media (min-width: 48rem) {
  .band-media { aspect-ratio: auto; height: clamp(24rem, 66vh, 42rem); }
  .band-media img { position: absolute; inset: -8% 0; height: 116%; }
  .part--band .part-head { margin-top: -9rem; }
}

.brands { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.brands > .part-body { grid-column: auto; }
.brands .strobe { max-width: 30rem; }
@media (min-width: 72rem) {
  .brands { grid-template-columns: minmax(0, var(--read)) minmax(0, 1fr); gap: 3.5rem; }
  .strobe { position: sticky; top: 2rem; }
}
.strobe { margin: 0; }
.strobe-plate { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--plate); box-shadow: var(--shadow-plate); }
.ghost { position: absolute; inset: 0; mix-blend-mode: multiply; }
.ghost img { width: 100%; height: 100%; object-fit: contain; }
.ghost:not(.ghost--0) { clip-path: inset(19% 0 65% 0); }
.ghost--1 { opacity: .42; transform: translateX(-4.5%); }
.ghost--2 { opacity: .26; transform: translateX(-9%); }
.ghost--3 { opacity: .15; transform: translateX(-13.5%); }
.ghost--4 { opacity: .08; transform: translateX(-18%); }
.scale {
  position: absolute; left: 6%; right: 6%; bottom: 5%; height: .9rem; opacity: .55;
  background:
    linear-gradient(90deg, var(--plate-ink) 1px, transparent 1px) 0 100% / 10% 100% repeat-x,
    linear-gradient(90deg, rgb(42 47 69 / .5) 1px, transparent 1px) 0 100% / 2% 45% repeat-x,
    linear-gradient(var(--plate-ink), var(--plate-ink)) 0 100% / 100% 1px no-repeat;
}
.strobe figcaption, .frame figcaption {
  display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline;
  font-family: var(--mono); font-size: .72rem; line-height: 1.5; letter-spacing: .02em; color: var(--ink-soft);
}
.strobe figcaption { margin-top: .85rem; }

.film {
  position: relative; width: 100vw; margin: 1.5rem calc(50% - 50vw) 0; padding: 2.6rem max(var(--gutter), calc((100vw - var(--page)) / 2 + var(--gutter)));
  background-color: var(--film);
  background-image:
    radial-gradient(circle at center, var(--field-deep) 0 .32rem, transparent .34rem),
    radial-gradient(circle at center, var(--field-deep) 0 .32rem, transparent .34rem),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 1.6rem 1.6rem, 1.6rem 1.6rem, var(--cell) var(--cell), var(--cell) var(--cell);
  background-position: .4rem .4rem, .4rem calc(100% - .4rem), -1px -1px, -1px -1px;
  background-repeat: repeat-x, repeat-x, repeat, repeat;
}
.contact { display: grid; gap: clamp(.75rem, 1.5vw, 1.25rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 40rem) { .contact { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .contact { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.frame { margin: 0; display: flex; flex-direction: column; }
.frame img { aspect-ratio: 1 / 1; object-fit: contain; width: 100%; background: var(--plate);
             padding: .4rem; transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.frame figcaption { margin-top: .6rem; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .frame:hover img { transform: translateY(-.35rem) rotate(-.6deg); box-shadow: 0 1rem 1.6rem -.8rem rgb(0 0 0 / .6); }
}

.foot { margin-top: clamp(5rem, 10vw, 8rem); background: var(--film); }
.colophon { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.25rem 1rem;
            max-width: var(--page); margin: 0 auto; padding: 2.5rem var(--gutter) 3rem;
            font-family: var(--mono); font-size: .8rem; color: var(--ink-soft); }
.colophon p { margin: 0; }
.privacy-note { grid-column: 1 / -1; display: flex; gap: .8rem; align-items: flex-start; max-width: 52rem;
                padding-bottom: 1.5rem; margin-bottom: .5rem !important; border-bottom: 1px solid var(--rule);
                font: 400 .9rem/1.6 var(--text); color: var(--ink-soft); }
.privacy-icon { width: 1.35rem; height: 1.35rem; color: var(--sun); margin-top: .1rem; }
.foot-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin: 0; padding: 0; list-style: none; }
.foot-links a { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem 0; color: var(--ink);
                font: 500 .9rem/1.4 var(--text); text-decoration-color: rgb(230 223 107 / .5); }
.foot-links .icon { width: .95rem; height: .95rem; color: var(--sun); transition: transform .3s var(--ease-out); }
.foot-links a:hover .icon { transform: translate(2px, -2px); }
.foot-brand { display: flex; align-items: center; gap: .7rem; color: var(--ink); font-weight: 600; }
.foot-brand .mark { width: 2.2rem; height: 2.2rem; }
.tld { color: var(--sun); }
.to-top { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 0; }
.to-top .icon { color: var(--sun); transition: transform .3s var(--ease-out); }
.to-top:hover .icon { transform: translateY(-3px); }

@media (max-width: 30rem) {
  .colophon { grid-template-columns: minmax(0, 1fr); }
  .masthead { font-size: .68rem; gap: .6rem; }
  .brand { gap: .45rem; }
  .langs a { min-width: 2.5rem; padding-inline: .35rem; }
}

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

  @supports (animation-timeline: view()) {
    .progress { animation: progress linear both; animation-timeline: scroll(root); }
    @keyframes progress { to { transform: scaleX(1); } }

    .part-head h2, .part-body > p:first-child {
      animation: settle linear both; animation-timeline: view(); animation-range: entry 0% entry 70%;
    }
    @keyframes settle { from { transform: translateY(1.5rem); } }

    .band-media img { animation: drift linear both; animation-timeline: view(); animation-range: cover; }
    @keyframes drift { from { transform: translateY(-6%); } to { transform: translateY(6%); } }

    .ghost:not(.ghost--0) { animation: recoil linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
    @keyframes recoil { from { transform: translateX(0); opacity: 0; } }

    .frame { animation: frame-in linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
    @keyframes frame-in { from { transform: translateY(2rem) scale(.97); } }
  }
}