@font-face {
  font-family: Anton;
  src: url('./assets/anton-latin-400-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root { color-scheme: light; --ink: #090a08; --orange: #ff7c20; --paper: #e0efed; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--paper); color: var(--ink); font-family: Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 8px; }
.poster { position: relative; width: 100%; height: 100svh; min-height: 600px; overflow: hidden; isolation: isolate; }
.artwork, .art-interference {
  position: absolute; inset: 0; z-index: -1;
  background: url('./assets/background-desktop-1920.webp') right top / cover no-repeat;
  background-image: image-set(
    url('./assets/background-desktop-1920.avif') type('image/avif') 1x,
    url('./assets/background-desktop-1920.webp') type('image/webp') 1x,
    url('./assets/background-desktop-3328.avif') type('image/avif') 2x,
    url('./assets/background-desktop-3328.webp') type('image/webp') 2x
  );
}
@media (min-width: 1921px) {
  .artwork, .art-interference {
    background-image: url('./assets/background-desktop-3328.webp');
    background-image: image-set(
      url('./assets/background-desktop-3328.avif') type('image/avif'),
      url('./assets/background-desktop-3328.webp') type('image/webp')
    );
  }
}
.art-interference { clip-path: polygon(47% 31%,65% 31%,65% 31.7%,47% 31.7%); animation: circuit 2.7s steps(1,end) infinite; }
.masthead { position: absolute; left: 4.85%; top: 8.47%; }
.wordmark { display: inline-block; font-size: clamp(20px,1.765vw,36px); letter-spacing: -.07em; line-height: 1; }
.wordmark strong { font-weight: 750; }
.headline { position: absolute; left: 1.95%; top: 17.1%; margin: 0; font: 400 12.74vw/.91 Anton, Impact, sans-serif; letter-spacing: -.045em; width: 32%; }
.headline-line { display: block; white-space: nowrap; transform-origin: left center; }
.fragments { position: absolute; inset: 0; pointer-events: none; }
.fragments i { position: absolute; width: 7%; height: 3px; background: #ff7c20; clip-path: polygon(0 30%,35% 30%,35% 0,78% 10%,80% 50%,100% 50%,100% 80%,38% 100%,35% 60%,0 60%); animation: fragment 4.2s steps(1,end) infinite; }
.fragments i:nth-child(1) { left: -1%; top: 4%; }
.fragments i:nth-child(2) { left: -1%; top: 9%; width: 8%; }
.fragments i:nth-child(3) { left: 86%; top: 3%; width: 14%; }
.fragments i:nth-child(4) { left: 84%; top: 10%; }
.fragments i:nth-child(5) { left: -1%; top: 31%; }
.fragments i:nth-child(6) { left: 22%; top: 30%; width: 10%; }
.fragments i:nth-child(7) { left: 75%; top: 36%; }
.fragments i:nth-child(8) { left: 71%; top: 45%; width: 13%; }
.fragments i:nth-child(9) { left: 87%; top: 56%; width: 13%; }
.fragments i:nth-child(10) { left: 20%; top: 63%; }
.fragments i:nth-child(11) { left: -1%; top: 72%; width: 10%; }
.fragments i:nth-child(12) { left: 40%; top: 88%; width: 12%; }
.fragments i:nth-child(13) { left: 77%; top: 94%; }
.fragments i:nth-child(14) { left: 62%; top: 88%; }
.fragments i:nth-child(3n) { animation-delay: -1.3s; height: 5px; }
.fragments i:nth-child(3n + 1) { animation-delay: -.7s; }
.edition { position: absolute; right: 4.04%; top: 7.96%; font: italic 15px/1.2 monospace; width: 24px; text-align: center; }
.edition span { display: block; }
.edition span + span { border-top: 1px solid #424b49; margin-top: 8px; padding-top: 9px; }
.signal-rail { position: absolute; left: 95.775%; top: 20.262%; width: 2.964%; height: 46.069%; background: url('./assets/signal-rail.svg') center / 100% 100% no-repeat; animation: rail 5.3s steps(1,end) infinite; }
.contact { position: absolute; top: 88.1%; left: 0; width: 100%; height: 10.08%; display: flex; align-items: center; padding: 0 6.35%; gap: 1.6%; background: none; font-family: Anton, Impact, sans-serif; }



.invitation { font-size: 4.29vw; white-space: nowrap; letter-spacing: -.025em; }
.email { font-size: 3.4vw; white-space: nowrap; letter-spacing: -.025em; }
.connector { height: 1px; background: #19190b; flex: 1; min-width: 20px; transform: translateY(5px); transition: opacity 180ms; }
.contact:hover .connector, .contact:focus-visible .connector { opacity: .5; }
.contact:focus-visible { outline-offset: -6px; }
.registration { position: absolute; z-index: 5; width: 34px; height: 34px; pointer-events: none; transform: translate(-50%,-50%); opacity: .7; }
.registration::before, .registration::after { content: ''; position: absolute; background: #080a08; }
.registration::before { width: 100%; height: 1px; top: 50%; left: 0; }
.registration::after { height: 100%; width: 1px; left: 50%; top: 0; }
.top-left, .bottom-left { left: 2.711%; }
.top-right, .bottom-right { left: 97.289%; }
.top-left, .top-right { top: 4.536%; }
.bottom-left, .bottom-right { top: 95.06%; }
@keyframes fragment { 0%, 22%, 65%, 100% { transform: translateX(0); } 25%, 33% { transform: translate(15px, 2px); } 36%, 47% { transform: translate(-10px, -2px); } 50%, 59% { transform: translateX(6px); } }
@keyframes circuit { 0%, 18%, 75%, 100% { transform: translateX(0); opacity: 0; } 20%, 32% { clip-path: polygon(61% 30%, 80% 30%, 80% 31.2%, 61% 31.2%); transform: translateX(12px); opacity: 1; } 36%, 49% { clip-path: polygon(64% 39%, 81% 39%, 81% 40.2%, 64% 40.2%); transform: translateX(-9px); opacity: 1; } 54%, 69% { clip-path: polygon(59% 46%, 78% 46%, 78% 47%, 59% 47%); transform: translateX(5px); opacity: 1; } }
@keyframes rail { 0%,88%,95%,100% { transform: translateY(0); } 89%,92% { transform: translateY(3px); } 91% { transform: translateY(-2px); } }
@keyframes edge { 0%,91%,96%,100% { transform: translateX(0); } 92%,94% { transform: translateX(4px); } }
@media (max-width: 700px) {
  .poster { height: auto; min-height: 100svh; padding-top: 72px; padding-bottom: 18px; overflow: hidden; }
  .masthead { left: 20px; top: 25px; }
  .wordmark { font-size: 22px; }
  .headline { position: relative; left: auto; top: auto; margin: 0 18px; font-size: clamp(87px,26vw,170px); width: 65%; line-height: .94; }
  .artwork { position: relative; inset: auto; margin-top: 20px; width: 100%; height: 106vw; background-size: auto 100%; background-position: right center; }
  .art-interference { display: none; }
  .masthead { z-index: 2; }
  .headline { position: absolute; top: 80px; }
  .artwork { margin-top: 220px; }
  .edition { right: 22px; top: 26px; font-size: 10px; width: 16px; }
  .edition span + span { margin-top: 3px; padding-top: 3px; }
  .signal-rail { top: 355px; left: auto; right: 9px; width: 15px; height: 180px; }
  .contact { position: relative; top: auto; margin-top: 0; min-height: 124px; height: auto; padding: 14px 20px; display: grid; grid-template-columns: auto 1fr; gap: 7px 20px; }
  .invitation { font-size: 44px; }
  .email { font-size: clamp(26px,7.7vw,46px); grid-column: 1/-1; }
  .connector { width: 100%; }
  .registration { width: 22px; height: 22px; }
  .top-left, .top-right { top: 12px; }
  .top-left, .bottom-left { left: 11px; }
  .top-right, .bottom-right { left: calc(100% - 11px); }
  .bottom-left, .bottom-right { top: auto; bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
/* Optical corrections against the approved 1586 × 992 composition. */
.wordmark { transform: scaleX(1.09); transform-origin: left center; }
.headline { top: 17.9%; line-height: .94; }
.headline-line:first-child { transform: scaleX(1.15); }
.headline-line:nth-child(2) { transform: scaleX(1.085); }
.invitation { flex: 0 0 20.8vw; transform: scaleX(1.075); transform-origin: left center; }

.contact > span { position: relative; z-index: 1; }
@media (max-aspect-ratio: 11/10) and (min-width: 701px) {
  .poster { height: auto; min-height: 100svh; padding-top: 70px; padding-bottom: 20px; }
  .masthead { top: 26px; left: 24px; }
  .headline { top: 90px; left: 24px; font-size: 19vw; }
  .artwork { position: relative; inset: auto; margin-top: 335px; height: 90vw; background-size: auto 100%; background-position: right center; }
  .art-interference { display: none; }
  .contact { position: relative; top: auto; height: 110px; }
  .registration.bottom-left, .registration.bottom-right { top: auto; bottom: 25px; }
}
@media (max-width: 700px) {
  .headline { top: 80px; }
  .artwork { margin-top: 198px; height: 111vw; }
  .contact { padding-left: 38px; padding-right: 38px; min-height: 120px; }
  .invitation { transform: none; }
  .email { font-size: clamp(25px,7.45vw,46px); }
  .top-left, .bottom-left { left: 20px; }
  .top-right, .bottom-right { left: calc(100% - 20px); }
  .top-left, .top-right { top: 14px; }
  .signal-rail { top: 330px; height: 170px; }
}
/* Independent transparent interference fragments preserve the approved marks. */
.fragments { left: -2.2%; top: -.68%; width: 105.4%; height: 100%; }
.fragments i { inset: 0 !important; width: 100% !important; height: 100% !important; background: url('./assets/headline-fragments.png') center / 100% 100% no-repeat; clip-path: inset(0 0 65% 0); animation-duration: 7.2s; }
.fragments i:nth-child(1) { animation-delay: -2.8s; }
.fragments i:nth-child(2) { clip-path: inset(35% 0 35% 0); animation-delay: -6.4s; }
.fragments i:nth-child(3) { clip-path: inset(65% 0 0 0); animation-delay: -11.2s; }
.fragments i:nth-child(n+4) { display: none; }
.signal-rail { animation: none; }
.signal-rail::after { content: ''; position: absolute; inset: 0; background: inherit; clip-path: polygon(0 0,100% 0,100% 8%,0 8%,0 35%,100% 35%,100% 40%,0 40%,0 65%,100% 65%,100% 69%,0 69%,0 93%,100% 93%,100% 100%,0 100%); animation: rail 2.8s steps(1,end) infinite; }
@media (max-width: 700px) {
  
  
}
@media (max-aspect-ratio: 11/10) and (min-width: 701px) {
  .headline { width: 47.5%; }
  .signal-rail { top: 32%; height: 29%; }
  .top-left, .top-right { top: 20px; }
  
}
.edition { font-style: normal; font-family: 'Courier New', monospace; }
@media (max-aspect-ratio: 11/10) {
  
}

/* Compressed versions retain the approved master dimensions and positioning. */
@media (max-width: 700px), (max-aspect-ratio: 11/10) {
  .poster { padding-top: 0; }
  .artwork {
    position: relative;
    inset: auto;
    margin-top: 0;
    height: max(162.5vw, calc(100svh - 138px));
    background-image: url('./assets/background-mobile-960.webp');
    background-image: image-set(
      url('./assets/background-mobile-960.avif') type('image/avif') 2x,
      url('./assets/background-mobile-960.webp') type('image/webp') 2x,
      url('./assets/background-mobile-2048.avif') type('image/avif') 3x,
      url('./assets/background-mobile-2048.webp') type('image/webp') 3x
    );
    background-size: cover;
    background-position: right top;
  }
}
@media (min-width: 961px) and (max-aspect-ratio: 11/10),
       (min-width: 481px) and (max-width: 700px) and (min-resolution: 2dppx),
       (min-width: 701px) and (max-aspect-ratio: 11/10) and (min-resolution: 2dppx) {
  .artwork {
    background-image: url('./assets/background-mobile-2048.webp');
    background-image: image-set(
      url('./assets/background-mobile-2048.avif') type('image/avif'),
      url('./assets/background-mobile-2048.webp') type('image/webp')
    );
  }
}

/* Original banner edges, precisely cut out with Pillow. */
.contact > .banner-fill { position: absolute; z-index: 0; inset: 15% 0 11%; background: linear-gradient(105deg, #ff8024, #ff7a1c); pointer-events: none; }
.contact::before, .contact::after { content: ''; position: absolute; left: 0; width: 100%; z-index: 0; pointer-events: none; background-repeat: no-repeat; background-size: 100% 100%; }
.contact::before { top: -5%; height: 20%; background-image: url('./assets/banner-top-cutout.png'); }
.contact::after { bottom: -7%; height: 18%; background-image: url('./assets/banner-bottom-cutout.png'); }
@media (max-width: 700px), (max-aspect-ratio: 11/10) {
  .contact > .banner-fill { inset: 13px 0 11px; }
  .contact::before { top: -5px; height: 18px; background-size: 100% 100%; }
  .contact::after { bottom: -7px; height: 18px; background-size: 100% 100%; }
}
/* A visible, continuously recurring signal travels along the approved right-hand rail. */
.signal-rail::before { content: ''; position: absolute; z-index: 1; left: 72%; top: 0; width: 5px; height: 17px; background: #ff7c20; box-shadow: 0 0 7px #ff7c20; animation: signal-travel 2.6s linear infinite; }
@keyframes signal-travel { from { top: 0; } to { top: calc(100% - 17px); } }
@media (max-width: 700px) { .signal-rail::before { width: 3px; height: 12px; } }