* {
  box-sizing:border-box;
}
html {
  background:#0c0d0d;
  color:#e9e7e0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  /* text-rendering: optimizeLegibility;
  text-rendering: optimizeSpeed;
  text-rendering: geometricPrecision; */
}
body {
  margin:0;
  font-kerning: normal;
  font-variant-ligatures: normal;
  -webkit-font-smoothing: antialiased; /* macOS / iOS */
  -moz-osx-font-smoothing: grayscale;   /* macOS / Firefox */
}
::selection {
  background:#c1c9b6;
  color:#111;
}
body:before {
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  opacity:.075;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23ffffff' filter='url(%23n)' opacity='.55' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}
main {
  min-height:100svh;
  position:relative;
  overflow:hidden;
  padding:36px 5vw 25px;
  display:flex;
  flex-direction:column;
}
a {
  color: #FFF;
  text-decoration: underline dotted;
  text-decoration-skip-ink: auto;
  text-underline-offset: 0.15em;
}
a:visited, a:active {
    /* border-bottom: none;
  background-image: none;
  text-decoration: underline dotted currentColor;

  text-decoration-thickness: 1px; */
}

a:hover {
  /* color: #5493ff;
  text-decoration: underline;
  border: none; */
}

/* a {
  color:inherit;
  text-decoration:none;
}
a:hover {
  color:#fff;
}
a:focus-visible {
  outline:1px solid #ccd5c0;
  outline-offset:5px;
} */

/* ////////////////////////// B A C K G R O U N D  E L E M E N T S  ///////////////////////////////// */
.atmosphere {
  position:absolute;
  right:-20vw;
  top:-35vh;
  width:95vw;
  height:120vh;
  pointer-events:none;
  background:radial-gradient(ellipse at 54% 45%,#89938120 0%,#626e5918 20%,transparent 60%);
  filter:blur(25px);
}
.sculpture {
  position:absolute;
  right:7vw;
  top:16vh;
  width:36vw;
  height:51vh;
  transform:rotate(-27deg);
  border-radius:50%;
  border:1px solid #bac5ae20;
  box-shadow:inset 8px 0 25px #cbd7ba18,-8px 0 40px #bbc7a90c;
  mask-image:linear-gradient(100deg,#000,transparent 90%);
}
.sculpture:after {
  content:'';
  position:absolute;
  inset:40px;
  border-radius:50%;
  border:1px solid #c6cebc15;
  box-shadow:inset 12px 0 28px #c4cebb10;
}


/* ////////////////////////// C O R E  E L E M E N T S  ///////////////////////////////// */
.top,.hero,.contacts,.bottom {
  position:relative;
  z-index:2;
}
.top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.brand {
  font-size:20px;
  letter-spacing:-.02em;
}
.status {
  display:flex;
  align-items:center;
  gap:9px;
  color:#b8bab2;
}
.dot {
  width:5px;
  height:5px;
  background:#b7c9a0;
  border-radius:50%;
  box-shadow:0 0 9px #b7c9a055;
}
.hero {
  margin:auto 0;
  padding:80px 0 0;
  max-width:1050px;
}
.eyebrow {
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:#9a9d96;
  margin:0 0 30px;

}
h1 {
  font-weight:400;
  font-size:clamp(34px,7.8vw,80px);
  line-height:.92;
  letter-spacing:-.02em;
  margin:0;
  text-wrap: balance;
    /* text-wrap: pretty; */
}
h1 em {
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  letter-spacing:-.035em;
  color:#b8bfaf;
}
h2 {
  font-weight: 500;
  margin-block: 2rem;
  line-height: 1.5;
}

.contact-button {
  display: inline-block;
  padding: 16px 28px;
  border-radius: 999px;
  color: #111;
  background: #b8bfaf;

  font: 500 14px/1.2 Arial, sans-serif;
  text-decoration: none;
  transition: background 0.2s ease;
}

.contact-button:hover {
  color: #111;
  background: #fff;
}

.contact-button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}


.intro {
  max-width:390px;
  font-size:1rem;
  line-height:1.55;
  color:#b4b6ae;
  margin-block:2rem;
}
.contacts {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5vw;
  width:75%;
  max-width:950px;
  padding-bottom:45px;
}
.person {
  border-top:1px solid #ffffff25;
  padding-top:20px;
}
.number {
  font-size:10px;
  color:#969b90;
  letter-spacing:.1em;
}
.person h2 {
  font-size:25px;
  letter-spacing:-.035em;
  font-weight:400;
  margin:14px 0 7px;
}
.role {
  font-size:11px;
  color:#94998f;
  margin:0 0 20px;
}
.links {
  overflow-wrap:anywhere;
  display:flex;
  flex-direction:column;
  gap:9px;
  font-size:13px;
}
.pending {
  color:#a8aca2;
}
.bottom {
  margin-top:auto;
  border-top:1px solid #ffffff18;
  padding-top:20px;
  display:flex;
  justify-content:space-between;
  color:#8e9488;
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
}

@media(min-width:1500px) {
  main {
    padding-left:8vw;
    padding-right:8vw;
  }
}
@media(max-width:700px) {
  main {
    padding:25px 24px;
  }
  .top {
    font-size:9px;
  }
  .hero {
    padding:85px 0 60px;
  }
  h1 {
    font-size:clamp(56px,12vw,85px);
  }
  .intro {
    font-size:14px;
    max-width:300px;
  }
  .contacts {
    width:100%;
    gap:28px;
  }
  .person h2 {
    font-size:20px;
  }
  .sculpture {
    width:75vw;
    height:45vh;
    right:-22vw;
    top:20vh;
  }
  .bottom {
    font-size:8px;
    letter-spacing:.07em;
    gap:20px;
  }
  .links {
    font-size:11px;
  }
}
@media(max-width:380px) {
  .contacts {
    grid-template-columns:1fr;
  }
  .hero {
    padding-top:65px;
  }
  .bottom {
    line-height:1.5;
  }
}
@media(prefers-reduced-motion:no-preference) {
  .sculpture {
    animation:drift 18s ease-in-out infinite alternate;
  }
  @keyframes drift {
    to {
      transform:translateY(-20px) rotate(-20deg);
    }
  }
}

/* Optional pointer lighting; controlled by js/main.js. */
.atmosphere {
  transform: translate(var(--light-x, 0px), var(--light-y, 0px));
  transition: transform 1.2s ease-out;
}