.home-main { background: var(--ink); }
.hero { position: relative; min-height: 100svh; overflow: hidden; background: #1a1916; }
.hero__media { position: absolute; inset: 0; }
.hero__media::after { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.42), rgba(0,0,0,.05) 55%, rgba(0,0,0,.2)); content: ""; }
.hero__image { height: 115%; object-fit: cover; object-position: center 31%; }
.hero__content { position: absolute; z-index: 2; right: var(--gutter); bottom: 2rem; left: var(--gutter); color: #fff; }
.hero__title { margin: 0; font-size: clamp(5rem, 12.8vw, 13.8rem); }
.hero__title span { display: block; overflow: hidden; }
.hero__title i { display: inline-block; font-style: normal; }
.hero__title span:last-child { padding-left: 15vw; }
.hero__meta { display: flex; justify-content: space-between; margin-top: 2rem; }
.hero__scroll { display: inline-flex; gap: .6rem; align-items: center; }
.hero__scroll::before { width: 2.5rem; height: 1px; background: currentColor; content: ""; }

.manifesto { display: grid; place-items: center; min-height: 100svh; padding: var(--section-space) var(--gutter); }
.manifesto__inner { width: min(100%, 1200px); }
.manifesto__text { margin: 2rem 0 0; font-family: var(--display); font-size: clamp(3.25rem, 8vw, 9rem); font-weight: 400; line-height: .98; letter-spacing: -.05em; }
.manifesto__text span { color: color-mix(in srgb, var(--bone) 20%, transparent); }
.manifesto__text span.is-active { color: var(--bone); }

.works { padding-top: var(--section-space); }
.works__heading { display: flex; justify-content: space-between; padding-bottom: 1.25rem; }
.works__note { max-width: 46rem; margin: 0 auto 3.5rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: clamp(1rem, 1.3vw, 1.2rem); color: #c4c0b9; }
.work-card { position: relative; display: block; height: 100svh; min-height: 680px; overflow: hidden; border-top: 1px solid rgba(255,255,255,.3); }
.work-card__media, .work-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.work-card video { filter: saturate(.92) brightness(.94); transition: filter .8s var(--ease); }
.work-card:hover video { filter: saturate(1.15) brightness(1.06); }
.work-card__media { clip-path: inset(7% 3% 7% 3%); transition: clip-path 1s var(--ease); }
.work-card__media::after { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.62)); content: ""; }
.work-card__content { position: absolute; z-index: 2; right: var(--gutter); bottom: 2.5rem; left: var(--gutter); color: #fff; }
.work-card__top { display: flex; justify-content: space-between; }
.work-card h3 { margin: 1rem 0 0; font-size: clamp(5rem, 15vw, 15rem); transition: transform .8s var(--ease); }
.work-card:hover .work-card__media { clip-path: inset(0); }
.work-card:hover h3 { transform: skewX(-5deg) translateX(1vw); }
.work-card__index {
  position: absolute;
  z-index: 2;
  top: 1.2rem;
  right: var(--gutter);
  font-family: var(--display);
  font-size: clamp(5rem, 13vw, 13rem);
  line-height: 1;
  color: color-mix(in srgb, var(--brass) 38%, transparent);
  transition: color .6s var(--ease), transform .8s var(--ease);
  pointer-events: none;
}
.work-card:hover .work-card__index { color: var(--brass); transform: translateY(-.05em); }

.about { padding: var(--section-space) 0; }
.about__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 8vw, 9rem); align-items: start; }
.about__portrait { position: relative; overflow: hidden; aspect-ratio: 4 / 5; }
.about__portrait img { height: 115%; object-fit: cover; object-position: center 25%; }
.about__copy { padding-top: 10vw; }
.about__copy h2 { margin: 1.5rem 0 2.5rem; font-size: clamp(3rem, 6.5vw, 7rem); }
.about__copy p { max-width: 40rem; font-size: clamp(1rem, 1.4vw, 1.35rem); color: #c4c0b9; }
.about__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 4rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.ribbons { position: relative; width: 110vw; margin: calc(var(--section-space) * .8) 0 0 -5vw; padding: 3.5rem 0 4.5rem; overflow: hidden; }
.ribbon { overflow: hidden; }
.ribbon__track { display: flex; width: max-content; padding: .85rem 0; }
.no-js .ribbon__track { animation: marquee 26s linear infinite; }
.ribbon__track span { font-family: var(--display); font-size: clamp(1.9rem, 3.6vw, 3.4rem); line-height: 1; white-space: nowrap; }
.ribbon__track span::after { margin: 0 .5em; content: "✦"; }
.ribbon--dark { background: #181825; color: var(--bone); transform: rotate(2.2deg); }
.ribbon--dark span::after { color: var(--brass); }
.ribbon--brass {
  position: relative;
  z-index: 2;
  margin-top: -1.1rem;
  background: var(--brass);
  color: var(--ink);
  transform: rotate(-2.2deg);
  box-shadow: 0 30px 60px -25px rgba(75, 77, 255, .48);
}
.ribbon--brass span { font-style: italic; }
.ribbon--brass span::after { color: var(--ink); }
@keyframes marquee { to { transform: translateX(-50%); } }

.contact { position: relative; padding: var(--section-space) 0 clamp(6rem, 10vw, 10rem); background: var(--bone); color: var(--ink); }
.contact-badge { position: absolute; top: calc(var(--section-space) * .55); right: clamp(1rem, 6vw, 6rem); width: clamp(6.5rem, 11vw, 10rem); }
.contact-badge svg { animation: badge-spin 16s linear infinite; }
.contact-badge text { font-size: 10.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; fill: var(--ink); }
.contact-badge .contact-badge__star { font-size: 26px; fill: var(--brass); }
@keyframes badge-spin { to { transform: rotate(1turn); } }
@media (max-width: 760px) { .contact-badge { display: none; } }
.contact__title { margin: 1.4rem 0 clamp(4rem, 9vw, 9rem); font-size: clamp(5rem, 17vw, 17rem); }
.contact__title a { display: flex; align-items: baseline; justify-content: space-between; }
.contact__title a::after { padding: .9em 1.2em; border: 1px solid currentColor; border-radius: 999px; font-family: var(--sans); font-size: .055em; letter-spacing: .14em; content: "TELEGRAM ↗"; }
.contact__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(3rem, 10vw, 10rem); }
.contact__intro { max-width: 28rem; font-size: clamp(1.2rem, 2vw, 1.8rem); }
.contact-form { position: relative; counter-reset: fields; }
.field { position: relative; display: grid; grid-template-columns: 3.25rem 1fr; padding: 1.15rem 0 1.25rem; border-bottom: 1px solid #aaa7a0; }
.field::before { grid-row: 1 / 3; padding-top: .1rem; color: var(--brass); font-size: .64rem; font-weight: 600; letter-spacing: .12em; content: attr(data-index); }
.field::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--brass); content: ""; transform: scaleX(0); transform-origin: 0 50%; transition: transform .55s var(--ease); }
.field:focus-within::after { transform: scaleX(1); }
.field label { display: block; margin-bottom: .35rem; font-size: .64rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; transition: color .3s ease; }
.field:focus-within label { color: var(--brass); }
.field input, .field textarea { width: 100%; border: 0; border-radius: 0; outline: 0; padding: .25rem 0 0; background: transparent; font-family: var(--display); font-size: clamp(1.35rem, 2vw, 2rem); line-height: 1.25; resize: none; }
.field input::placeholder, .field textarea::placeholder { color: #918e87; opacity: .72; }
.contact-form .button-link { position: relative; justify-content: space-between; width: 100%; margin-top: 2rem; padding: 1.25rem 1.4rem; border-radius: 0; overflow: hidden; }
.contact-form .button-link::before { position: absolute; inset: 0; background: var(--brass); content: ""; transform: scaleY(0); transform-origin: 50% 100%; transition: transform .5s var(--ease); }
.contact-form .button-link span { position: relative; z-index: 1; }
.contact-form .button-link:hover, .contact-form .button-link:focus-visible { background: transparent; color: var(--bone); }
.contact-form .button-link:hover::before, .contact-form .button-link:focus-visible::before { transform: scaleY(1); }
.form-status { min-height: 1.5rem; margin: 1rem 0 0; }
.contact-form.is-sent .contact-form__fields { opacity: .12; pointer-events: none; }
.contact-form__success { position: absolute; inset: 0; display: none; place-content: center; font-family: var(--display); font-size: clamp(2.5rem, 5vw, 5rem); line-height: 1; }
.contact-form.is-sent .contact-form__success { display: grid; }

@media (max-width: 760px) {
  .hero__title span:last-child { padding-left: 4vw; }
  .hero__meta { align-items: end; }
  .manifesto { min-height: 80svh; }
  .work-card { min-height: 560px; }
  .work-card__media { clip-path: inset(4%); }
  .about__grid, .contact__grid { grid-template-columns: 1fr; }
  .about__portrait { width: 86%; }
  .about__copy { padding-top: 1rem; }
  .contact__title a { align-items: flex-end; }
  .contact__title a::after { margin-bottom: .5em; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .work-card__media { clip-path: none; }
}