/* Self-hosted fonts (SIL OFL 1.1), subset: Latin + Latin-1 + Cyrillic + typographic punctuation */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-500-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/inter-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400.woff2') format('woff2');
}

:root {
  --black: #0A0A0A;
  --graphite: #171717;
  --ivory: #EAE5DC;
  --stone: #A6A6A6;
  --silver: #8C8B90;
  --bordeaux: #7A0110;
  --line: rgba(234, 229, 220, .58);
  --sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Cormorant Garamond', Georgia, serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background: var(--black);
  color: var(--ivory);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.landing {
  position: relative;
  min-height: 100svh;
  overflow-x: clip;
  overflow-y: visible;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 78% 50%, rgba(36, 35, 35, .25), transparent 45%),
    linear-gradient(90deg, #080808 0%, var(--black) 52%, #0b0b0b 100%);
}

.masthead {
  position: absolute;
  z-index: 10;
  top: clamp(28px, 4.2vh, 52px);
  left: auto;
  right: clamp(28px, 5vw, 82px);
  width: auto;
  display: block;
  text-align: right;
}
.masthead__name {
  margin: 0;
  white-space: nowrap;
  font-family: var(--serif);
  font-size: clamp(19px, 2.05vw, 30px);
  font-weight: 500;
  letter-spacing: .19em;
  line-height: 1;
}
.masthead__rule {
  display: none;
}

.hero {
  --content-left: 28vw;
  --content-right: 28vw;
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  padding: clamp(132px, 17vh, 190px) var(--content-right) clamp(100px, 12vh, 140px) var(--content-left);
}
.hero__portrait {
  position: absolute;
  z-index: -3;
  inset: 0 auto 0 0;
  width: min(58vw, 900px);
  overflow: hidden;
}
.hero__portrait picture {
  display: block;
  height: 100%;
}
.hero__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 23% center;
  filter: grayscale(1) contrast(1.04);
}
.hero__shade {
  position: absolute;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(10,10,10,0) 0%,
    rgba(10,10,10,.03) 25%,
    rgba(10,10,10,.72) 43%,
    #0A0A0A 58%,
    #0A0A0A 100%);
}
.hero__circle {
  position: absolute;
  z-index: -1;
  width: clamp(560px, 46vw, 760px);
  aspect-ratio: 1;
  top: 50%;
  right: -28vw;
  transform: translateY(-47%);
  border: 1px solid rgba(122, 1, 16, .62);
  border-radius: 50%;
  pointer-events: none;
  opacity: .58;
}
.hero__content {
  position: relative;
  z-index: 2;
  width: min(100%, 760px);
  margin: 0 auto;
  padding-top: .7vh;
  text-align: center;
}
.eyebrow {
  margin: 0 0 clamp(18px, 2.2vh, 28px);
  color: var(--stone);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
}
h1 {
  margin: 0 auto;
  max-width: 720px;
  color: var(--ivory);
  font-family: var(--serif);
  font-size: clamp(54px, 5.35vw, 82px);
  font-weight: 500;
  font-style: italic;
  letter-spacing: -.025em;
  line-height: .93;
}
.credentials { margin-top: clamp(28px, 4.6vh, 52px); }
.credentials p { margin: 0; }
.credentials__main {
  color: var(--ivory);
  font-size: clamp(14px, 1.28vw, 18px);
  font-weight: 400;
  line-height: 1.55;
}
.credentials__main span { padding: 0 .34em; color: var(--stone); }
.credentials__sub {
  max-width: 750px;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 7px !important;
  color: rgba(234,229,220,.88);
  font-size: clamp(14px, 1.12vw, 16px);
  font-weight: 300;
  line-height: 1.55;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 22px;
  margin-top: clamp(34px, 5.4vh, 62px);
}
.button {
  min-height: 58px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 17px;
  border-radius: 3px;
  padding: 0 25px;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.35;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease;
}
.button--primary {
  min-width: 238px;
  border: 1px solid var(--bordeaux);
  background: var(--bordeaux);
  color: var(--ivory);
}
.button--primary:hover { background: #69000D; border-color: #69000D; }
.telegram-icon { width: 22px; height: 22px; fill: currentColor; flex: 0 0 auto; }
.button__divider { width: 1px; height: 24px; background: rgba(234,229,220,.58); }
.button--disabled {
  min-width: 238px;
  flex-direction: column;
  gap: 0;
  border: 1px solid rgba(234,229,220,.45);
  background: rgba(10,10,10,.16);
  color: rgba(234,229,220,.55);
  cursor: not-allowed;
  opacity: 1;
}

.hero__monogram {
  position: absolute;
  z-index: 3;
  left: calc(var(--content-left) + (100vw - var(--content-left) - var(--content-right)) / 2);
  bottom: clamp(22px, 3.2vh, 38px);
  width: 34px;
  height: auto;
  opacity: .72;
  transform: translateX(-50%);
  pointer-events: none;
}

@media (min-width: 1500px) {
  .hero { --content-left: 28vw; --content-right: 28vw; padding-left: var(--content-left); padding-right: var(--content-right); }
  .hero__portrait { width: 59vw; }
}

@media (max-width: 900px) {
  .masthead {
    top: 28px;
    left: 24px;
    right: 24px;
    grid-template-columns: minmax(22px, 1fr) auto;
    column-gap: 14px;
  }
  .masthead { display: block; text-align: right; }
  .masthead__name { font-size: clamp(17px, 3vw, 23px); letter-spacing: .16em; }
  .hero {
    min-height: 100svh;
    height: auto;
    display: flex;
    align-items: flex-end;
    padding: 42vh 28px 116px;
  }
  .hero__portrait {
    inset: 0 0 auto 0;
    width: 100%;
    height: 65vh;
  }
  .hero__portrait img {
    object-position: 22% 24%;
  }
  .hero__shade {
    background: linear-gradient(180deg,
      rgba(10,10,10,0) 0%,
      rgba(10,10,10,.06) 27%,
      rgba(10,10,10,.52) 47%,
      #0A0A0A 67%,
      #0A0A0A 100%);
  }
  .hero__content { width: min(100%, 620px); padding-top: 0; }
  .hero__monogram { left: 50%; width: 31px; bottom: 22px; }
  .hero__content { text-align: center; margin-inline: auto; }
  h1 { margin-inline: auto; }
  .credentials__main, .credentials__sub { margin-inline: auto !important; }
  .actions { justify-content: center; }
  .eyebrow { margin-bottom: 14px; font-size: 9px; }
  h1 { font-size: clamp(48px, 8.5vw, 72px); line-height: .94; }
  .credentials { margin-top: 24px; }
  .credentials__main { font-size: 14px; line-height: 1.6; }
  .credentials__sub { font-size: 13px; line-height: 1.55; }
  .actions { margin-top: 28px; gap: 10px; }
  .button { min-height: 56px; padding: 0 16px; font-size: 13px; }
  .button--primary, .button--disabled { min-width: 0; flex: 1 1 100%; }
  .button--primary { min-height: 56px; }
  .button--disabled { min-height: 56px; }
  .hero__circle {
    display: block;
    width: min(76vw, 330px);
    top: 27vh;
    right: -49vw;
    transform: translateY(-50%);
    border-color: rgba(122, 1, 16, .62);
    opacity: .58;
  }

}

@media (max-width: 480px) {
  .masthead { top: 24px; left: 22px; right: 22px; display: block; text-align: right; }
  .masthead__name { font-size: 16px; letter-spacing: .13em; }
  .hero { --content-left: 22px; --content-right: 22px; padding: 43vh 22px 106px; }
  .hero__portrait { height: 63vh; }
  .hero__portrait img { object-position: 22% 20%; }
  .eyebrow { font-size: 8px; letter-spacing: .23em; }
  h1 { font-size: clamp(43px, 10.4vw, 54px); }
  .desktop-break { display: none; }
  .credentials { margin-top: 20px; }
  .credentials__main { max-width: 360px; font-size: 13px; }
  .credentials__main span { padding: 0 .18em; }
  .credentials__sub { max-width: 350px; font-size: 12px; line-height: 1.55; }
  .actions { margin-top: 24px; }
  .button { font-size: 13px; }
  .hero__circle {
    display: block;
    top: 28vh;
    right: -53vw;
    width: 78vw;
    border-color: rgba(122, 1, 16, .62);
    opacity: .58;
  }
  .hero__monogram { left: 50%; width: 29px; bottom: 16px; }
  .hero__content { text-align: center; }
  .credentials__main, .credentials__sub { margin-inline: auto !important; }
  .actions { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}