:root {
  color-scheme: light;
  --paper: #f1e8d7;
  --ink: #29271e;
  --rust: #953b31;
  --moss: #465340;
  --mono: 'Courier New', monospace;
  --gutter: clamp(1.35rem, 5.7vw, 6.75rem);
  --canvas: 104rem;
  --line: rgb(50 48 36 / 32%);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background: var(--paper);
  color: var(--ink);
  scroll-behavior: smooth;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-width: 280px; isolation: isolate; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
button, summary { cursor: pointer; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
::selection { background: var(--rust); color: var(--paper); }
.brand-name { white-space: nowrap; }
.brand-name sup { font-size: .62em; line-height: 0; vertical-align: super; }
.visually-hidden, .skip:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


.film {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  background: #101c18;
}
.film__surface, .film__fallback, .film__shade { position: absolute; width: 100%; height: 100%; inset: 0; }
.film__surface { display: none; }
.film--rendered .film__surface { display: block; }
.film--rendered .film__fallback { display: none; }
.film__fallback {
  inset: -18%;
  width: 136%;
  height: 136%;
  background: url('assets/film-shadow.jpg') center 45% / 100% 100%;
  animation: fallback-swell 19s ease-in-out infinite;
}
.film[data-variant="1"] .film__fallback { background-image: url('assets/film-peace.jpg'); background-position: 50% 62%; }
.film[data-variant="2"] .film__fallback { background-image: url('assets/film-light.jpg'); }
.film[data-variant="3"] .film__fallback { background-image: url('assets/film-shadow.jpg'); background-position: 50% 84%; filter: brightness(.65) saturate(1.25); }
.film[data-variant="4"] .film__fallback { background-position: 50% 18%; }
.film__shade {
  background:
    radial-gradient(ellipse 57% 40% at 50% 48%, rgb(245 225 200 / calc(var(--hero-light, 1) * .85)), rgb(245 225 200 / calc(var(--hero-light, 1) * .61)) 50%, transparent 100%),
    radial-gradient(ellipse 78% 67% at 50% 54%, rgb(242 224 198 / calc(var(--footer-light, 0) * .8)), transparent 100%),
    radial-gradient(ellipse at 55% 36%, transparent 44%, rgb(3 15 15 / 46%) 100%);
}
@keyframes fallback-swell {
  0%, 100% { transform: translate3d(-4%, -5%, 0) rotate(-7deg) scale(1.12, 1.04); }
  33% { transform: translate3d(5%, 4%, 0) rotate(4deg) scale(1.19, 1.09); }
  66% { transform: translate3d(-3%, 6%, 0) rotate(-3deg) scale(1.05, 1.21); }
}

.masthead { position: relative; z-index: 10; }
.preferences {
  position: fixed;
  top: clamp(.9rem, 2.5vw, 2.2rem);
  right: var(--gutter);
  display: flex;
  align-items: center;
  gap: .1rem;
  border: 1px solid rgb(53 48 35 / 23%);
  background: #eee3cf;
  border-radius: 3rem;
  padding: 0 .4rem;
  color: var(--ink);
}
.preferences button {
  display: grid;
  min-width: 2.25rem;
  min-height: 2.65rem;
  place-items: center;
  border: 0;
  background: transparent;
  color: inherit;
  font: 700 .68rem/1 var(--mono);
}
.preferences button:hover { color: var(--rust); }
.language[aria-pressed="true"] { color: #813228; text-decoration: underline; text-underline-offset: .23em; }
.preferences__slash { font: .65rem/1 var(--mono); color: #696052; }
.preferences__divider { align-self: stretch; margin: .72rem .18rem; border-left: 1px solid var(--line); }
.motion-control__play, .motion-control[aria-pressed="true"] .motion-control__pause { display: none; }
.motion-control[aria-pressed="true"] .motion-control__play { display: block; }
.skip:focus { position: fixed; top: .75rem; left: var(--gutter); padding: .7rem 1rem; background: var(--paper); }

.opening { position: relative; }
.opening__art {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 100svh;
  margin-bottom: -100svh;
  pointer-events: none;
  display: grid;
  place-items: center;
  overflow: clip;
}

.brand-motion { grid-area: 1 / 1; width: min(67vw, 55rem); pointer-events: auto; }
.brand-motion--gone { pointer-events: none; }
.brand-motion__scale { transition: transform .75s cubic-bezier(.2, .8, .22, 1); }
.brand-motion__scale.has-animated-logo > :is(img, .brand-fallback) { display: none; }
.animated-logo { display: block; width: 100%; height: auto; overflow: visible; }
.animated-logo [data-logo-glyph], .animated-logo [data-logo-ring] {
  transform-box: fill-box;
  transform-origin: center;
}
@media (hover: hover) { .brand-motion:hover .brand-motion__scale { transform: scale(1.048); } }

.brand { width: 100%; height: auto; }
.brand:not([src]), .brand[hidden] { display: none; }
.brand:not([hidden])[src] + .brand-fallback { display: none; }
.brand-fallback { display: block; color: var(--rust); text-align: center; font-size: clamp(1.4rem, 6.7vw, 5.75rem); font-weight: 800; letter-spacing: -.08em; line-height: .95; }
.hero { position: relative; height: 100svh; min-height: 29rem; }
.hero__frame {
  position: absolute;
  inset: clamp(1.5rem, 3.4vw, 3.25rem) var(--gutter);
  pointer-events: none;
  --frame-ink: rgb(245 234 218 / 54%);
  background:
    linear-gradient(var(--frame-ink), var(--frame-ink)) top left / 19px 1px,
    linear-gradient(var(--frame-ink), var(--frame-ink)) top left / 1px 19px,
    linear-gradient(var(--frame-ink), var(--frame-ink)) bottom left / 19px 1px,
    linear-gradient(var(--frame-ink), var(--frame-ink)) bottom left / 1px 19px,
    linear-gradient(var(--frame-ink), var(--frame-ink)) bottom right / 19px 1px,
    linear-gradient(var(--frame-ink), var(--frame-ink)) bottom right / 1px 19px;
  background-repeat: no-repeat;
}
.hero__cue {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(1.65rem, 5vw, 4.75rem);
  display: grid;
  justify-items: center;
  gap: .72rem;
  padding: .72rem;
  transform: translateX(-50%);
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  font: 700 .65rem/1.2 var(--mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #fff7e8;
  text-shadow: 0 1px 12px #050f0d, 0 1px 2px #050f0d;
}
.hero__cue svg { animation: cue-drift 3.4s ease-in-out infinite; }
.hero__cue:hover { color: #ffd3b3; }
.hero__counter {
  position: absolute;
  right: calc(var(--gutter) + .85rem);
  bottom: calc(clamp(1.5rem, 3.4vw, 3.25rem) + .66rem);
  font: .62rem/1 var(--mono);
  color: #fff0d9;
  text-shadow: 0 1px 4px #101c18;
  letter-spacing: .07em;
}
@keyframes cue-drift { 0%, 100% { transform: translateY(0); } 55% { transform: translateY(5px); } }

.chapter {
  position: relative;
  z-index: 3;
  padding: clamp(4.4rem, 10vw, 10rem) var(--gutter);
  scroll-margin-top: .3rem;
}
.chapter__grid, .footer > * { max-width: var(--canvas); margin-inline: auto; }
.chapter__grid { display: grid; grid-template-columns: minmax(6.6rem, .23fr) minmax(0, 1fr); gap: clamp(1.5rem, 4.75vw, 5rem); }
.chapter__index {
  display: flex;
  align-items: baseline;
  gap: .72rem;
  margin: 0;
  padding-top: .85rem;
  border-top: 1px solid currentColor;
  font: 700 .7rem/1.4 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.chapter__index > span:first-child { font-weight: 400; opacity: .75; }

.chapter--studio, .chapter--contact, .chapter--play { color: #f7efdf; isolation: isolate; }
.chapter--studio { display: grid; align-items: center; min-height: 100svh; overflow-x: clip; }
.chapter--studio::before, .chapter--contact::before, .chapter--play::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.chapter--studio::before {
  background: linear-gradient(101deg, rgb(5 14 12 / 86%), rgb(6 18 15 / 72%) 51%, rgb(8 22 19 / 12%) 91%);
  mask-image: linear-gradient(transparent, #000 17% 86%, transparent);
}
.chapter--studio .chapter__grid { width: 100%; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.chapter--studio .chapter__index, .chapter__grid--feature .chapter__index { width: min(100%, 12rem); }
.studio-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.13fr) minmax(0, .87fr);
  align-items: center;
  gap: clamp(1.4rem, 4.9vw, 5.2rem);
}

.display {
  margin: 0;
  font-size: clamp(3.5rem, 7.65vw, 8.75rem);
  font-weight: 600;
  line-height: .93;
  letter-spacing: -.087em;
  text-wrap: balance;
}
.display--studio { font-size: clamp(3rem, 5.1vw, 6.75rem); color: #fff2df; }
.reveal-line { display: block; overflow: clip; padding: .05em .1em .12em 0; margin: -.05em -.1em -.12em 0; }
.reveal-line > span { display: block; }
.studio-content__copy { max-width: 37rem; margin: clamp(1.55rem, 3vw, 3rem) 0 0; }
.scene-copy p, p.scene-copy {
  font-size: clamp(1.06rem, 1.46vw, 1.38rem);
  line-height: 1.53;
  letter-spacing: -.015em;
  margin: 0 0 .95em;
  text-wrap: pretty;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: .8em;
  width: fit-content;
  padding: .35rem 0 .24rem;
  border-bottom: 1px solid currentColor;
  font: 700 .75rem/1.35 var(--mono);
  text-decoration: none;
}
.text-link:hover { color: var(--rust); }
.text-link > span:last-child { font-size: 1.12em; transition: transform .24s ease; }
.text-link:hover > span:last-child { transform: translate(.12em, -.08em); }


.studio-camera {
  width: min(100%, 31rem);
  margin: .8rem 0 0;
  justify-self: center;
  transform: rotate(-5deg);
}
.studio-camera__device {
  position: relative;
  width: 100%;
  aspect-ratio: 184 / 124;
  border-radius: 7.8% / 11%;
  overflow: hidden;
  background: #9f9d8e;
  box-shadow: .12rem .7rem .85rem rgb(6 15 12 / 55%), 1rem 1.5rem 3.6rem rgb(4 15 14 / 54%);
}
.studio-camera__reference {
  position: absolute;
  left: -54.35%;
  top: -41.94%;
  width: 207.61%;
  max-width: none;
  height: auto;
}
.studio-camera__screen {
  position: absolute;
  left: 9.73%;
  top: 16.42%;
  width: 55.05%;
  height: 66.19%;
  overflow: hidden;
  background: #1c241e;
}
.studio-camera__screen img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 37%; }
.studio-camera__screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgb(230 236 219 / 24%), transparent 53%), repeating-linear-gradient(0deg, transparent 0 2px, rgb(14 29 24 / 14%) 2px 3px);
  box-shadow: inset 0 0 .9rem rgb(18 30 22 / 32%);
  pointer-events: none;
}
.studio-camera figcaption {
  width: fit-content;
  margin: 1rem auto 0;
  padding: .35em .65em;
  color: #f9efda;
  background: #192923;
  font: .63rem/1.3 var(--mono);
  letter-spacing: .06em;
}
.studio-camera figcaption .brand-name { color: #ffb796; }
.chapter--contact::before { background: linear-gradient(transparent, rgb(9 21 17 / 78%) 16%, rgb(12 28 22 / 26%) 53%, rgb(9 24 20 / 43%) 85%, transparent); }
.chapter--play::before { background: linear-gradient(transparent, rgb(5 20 19 / 78%) 18%, rgb(4 22 22 / 30%) 59%, rgb(7 22 19 / 60%) 86%, transparent); }
.chapter__grid--feature { width: 100%; grid-template-columns: minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 2.65rem); }
.contact-layout, .play-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.75rem); }
.feature-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem 2rem;
  color: #fff2e2;
}
.feature-intro .scene-copy { margin: 0 0 .05em; }
.feature-intro .scene-copy p { margin-bottom: .2rem; }
.feature-intro .text-link { overflow-wrap: anywhere; }
.chapter .text-link:hover { color: #ffc5a1; }
.display--contact, .display--play { font-size: clamp(2.85rem, 5.25vw, 6.25rem); }
.contact-machine { width: 100%; min-width: 0; perspective: 1600px; }
.play-screen { width: 100%; min-width: 0; }

.footer {
  position: relative;
  z-index: 3;
  padding-inline: var(--gutter);
  background: linear-gradient(180deg, rgb(239 224 200 / 4%), rgb(238 222 196 / 80%) 30%, rgb(232 215 186 / 92%) 100%);
}
.footer__main {
  display: grid;
  justify-items: center;
  gap: clamp(1.35rem, 3.5vw, 2.6rem);
  padding-block: clamp(4rem, 8vw, 7rem) clamp(2.5rem, 5vw, 4.25rem);
  text-align: center;
}
.footer__brand { display: block; width: min(70vw, 29rem); text-decoration: none; }
.footer__brand .brand-fallback { font-size: clamp(1.4rem, 5vw, 3.8rem); }
.footer__links {
  display: grid;
  justify-items: center;
  gap: .95rem;
  font: 700 .8rem/1.4 var(--mono);
}
.footer__name { margin: 0; font: 700 1.14rem/1.15 'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: -.035em; }
.footer__contacts, .footer__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem 1.7rem; }
.footer__contacts { list-style: none; margin: 0; padding: 0; }
.footer__contacts a, .footer__instagram { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; }
.footer__contacts svg { width: 1.16rem; height: 1.16rem; flex: none; }
.footer__instagram img { width: 1.69rem; height: 1.69rem; flex: none; }
.footer__legal { margin-top: .45rem; gap: .65rem 1.25rem; }
.footer__legal a { text-underline-offset: .23em; }
.footer__links a:hover { color: var(--rust); text-decoration: underline; text-underline-offset: .23em; }
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .65rem 1.3rem;
  border-top: 1px solid var(--line);
  padding-block: 1rem 1.35rem;
  font: .75rem/1.4 var(--mono);
}
.footer__bottom p { margin: 0; }

.legal-page {
  min-height: 100svh;
  background: radial-gradient(ellipse at 92% 0%, #e6c7ad, transparent 60%), var(--paper);
}
.legal-page__content { width: min(100%, 55rem); margin-inline: auto; padding: clamp(2rem, 7vw, 5rem) var(--gutter); }
.legal-page__studio { margin: clamp(2.8rem, 7vw, 5rem) 0 1.25rem; color: var(--rust); font: 700 .8rem/1.3 var(--mono); }
.legal-page__content h1 { margin: 0 0 1.35rem; font-size: clamp(2rem, 6vw, 4.8rem); line-height: 1; letter-spacing: -.065em; overflow-wrap: anywhere; }
.legal-page__content address { font-style: normal; }
.legal-page__content address, .legal-page__content p:not(.legal-page__studio) { line-height: 1.55; }
.legal-page__back > span:last-child { font-size: inherit; }

.motion-live .reveal-line > span {
  transform: translate3d(0, var(--line-1-y, 0%), 0) skewY(var(--line-skew, 0deg));
  opacity: var(--line-1-alpha, 1);
}
.motion-live .reveal-line + .reveal-line > span {
  transform: translate3d(0, var(--line-2-y, 0%), 0) skewY(var(--line-skew, 0deg));
  opacity: var(--line-2-alpha, 1);
}
.motion-live .scene-copy, .motion-live .chapter__grid > .chapter__index {
  transform: translate3d(0, var(--copy-y, 0px), 0);
  opacity: var(--copy-alpha, 1);
}
.motion-live .chapter--studio .studio-content { transform: translate3d(0, var(--studio-exit, 0px), 0); opacity: var(--studio-alpha, 1); }
.motion-live .studio-camera {
  transform: translate3d(var(--camera-x, 0px), var(--camera-y, 0px), 0) rotate(var(--camera-angle, -5deg));
  opacity: var(--prop-alpha, 1);
}
.motion-live .contact-machine > div {
  transform: translate3d(0, var(--prop-y, 0px), 0) rotateX(var(--prop-angle, 0deg)) scale(var(--prop-scale, 1));
  opacity: var(--prop-alpha, 1);
  filter: blur(var(--prop-blur, 0px));
}
.motion-live .typewriter__sheet { transform: translate3d(0, var(--paper-y, 0px), 0); opacity: var(--paper-alpha, 1); }
.motion-live .play-screen {
  clip-path: inset(var(--screen-shutter, 0%) 0 round .35rem);
  transform: translate3d(0, var(--prop-y, 0px), 0) scale(var(--prop-scale, 1));
  opacity: var(--prop-alpha, 1);
  filter: blur(var(--prop-blur, 0px));
}
.motion-live .footer__brand { transform: translate3d(0, var(--prop-y, 0px), 0) rotate(var(--prop-angle, 0deg)) scale(var(--prop-scale, 1)); opacity: var(--prop-alpha, 1); }
.motion-live .footer__links { transform: translate3d(0, var(--copy-y, 0px), 0); opacity: var(--copy-alpha, 1); }
.motion-live .chapter:focus-within :is(.studio-content, .reveal-line > span, .scene-copy, .contact-machine > div, .play-screen),
.motion-live .contact-machine:focus-within .typewriter__sheet,
.motion-live .footer:focus-within :is(.footer__brand, .footer__links) { transform: none; opacity: 1; filter: none; clip-path: none; }
.motion-paused .film__fallback, .motion-paused .hero__cue svg { animation-play-state: paused; }
.motion-paused { scroll-behavior: auto; }


@media (max-width: 760px) {
  :root { --gutter: clamp(1.35rem, 6.5vw, 3rem); }
  .brand-motion { width: min(84vw, 37rem); }
  .hero { min-height: 24rem; }
  .hero__counter { display: none; }
  .chapter__grid { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .chapter__index { width: min(100%, 11rem); }
  .chapter--studio { min-height: 80svh; }
  .chapter--studio::before {
    background: linear-gradient(180deg, transparent, rgb(3 15 13 / 83%) 10% 53%, rgb(5 19 17 / 38%) 87%, transparent);
    mask-image: none;
  }
  .studio-layout { grid-template-columns: minmax(0, 1fr); gap: 2.6rem; }
  .studio-camera { width: min(86%, 27rem); }
  .display { font-size: clamp(2.65rem, 10.15vw, 5.75rem); }
  .display--studio { font-size: clamp(2.35rem, 9.1vw, 5.5rem); }
  .contact-layout, .play-layout { gap: 1.9rem; }
  .feature-intro { display: grid; gap: 1.2rem; }
  .footer__brand { width: min(77vw, 29rem); }
  .footer__contacts { flex-direction: column; align-items: center; }
  .footer__bottom, .footer__back { font-size: .68rem; }
}

@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  :root:not(.motion-override) .film__fallback,
  :root:not(.motion-override) .hero__cue svg { animation: none; }
  .brand-motion__scale, .text-link > span:last-child { transition: none; }
}