:root {
  --paper: #f2ede3;
  --paper-light: #fbf8f2;
  --ink: #171512;
  --muted: rgba(23, 21, 18, 0.56);
  --line: rgba(23, 21, 18, 0.18);
}

* { box-sizing: border-box; }

html, body {
  min-height: 100%;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
}

body { overflow: hidden; }

.contact {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 16% 14%, rgba(255,255,255,.96), transparent 37%),
    radial-gradient(circle at 84% 82%, rgba(214,198,174,.16), transparent 36%),
    linear-gradient(135deg, var(--paper-light) 0%, var(--paper) 68%, #e9e1d5 100%);
}

.layout {
  width: min(1180px, calc(100vw - 56px));
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(310px, .88fr) minmax(470px, 1.12fr);
  align-items: center;
  gap: clamp(48px, 7vw, 108px);
}

.tower-stage {
  position: relative;
  height: min(86svh, 920px);
  display: grid;
  place-items: center;
  z-index: 1;
  opacity: 0;
  transform: translate3d(82px, 0, 0) rotate(.8deg) scale(.985);
  animation: towerIn 1.65s cubic-bezier(.16,.84,.28,1) .15s forwards;
}

.tower-stage::before {
  content: '';
  position: absolute;
  inset: 5% 2%;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: .14;
  background-image:
    radial-gradient(circle, rgba(20,17,13,.42) 0 .55px, transparent .72px),
    radial-gradient(circle, rgba(20,17,13,.28) 0 .45px, transparent .65px),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(60,48,34,.045) 4px);
  background-size: 5px 5px, 7px 7px, 100% 5px;
  animation: printJitter 3.8s steps(1,end) 1.8s infinite;
}

.tower-stage::after {
  content: '';
  position: absolute;
  inset: 3% 0;
  z-index: -1;
  border-radius: 48%;
  background: rgba(255,248,233,.32);
  filter: blur(24px);
}

.tower {
  display: block;
  width: min(34vw, 430px);
  max-height: 86svh;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: grayscale(1) contrast(1.17) brightness(.96) sepia(.08) blur(.08px);
  transform: translateZ(0);
}

.contact-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 68px 0 58px;
}

.wordmark,
h1,
.contact-link {
  opacity: 0;
  transform: translate3d(28px, 0, 0);
  animation: lineIn .9s cubic-bezier(.16,.84,.28,1) forwards;
}

.wordmark {
  display: block;
  width: clamp(150px, 18vw, 225px);
  height: auto;
  margin: 0 0 20px;
  filter: brightness(0);
  animation-delay: .72s;
}

h1 {
  margin: 0 0 54px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(48px, 6.6vw, 84px);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .95;
  animation-delay: .86s;
}

.contact-links { border-top: 1px solid var(--line); }

.contact-link {
  position: relative;
  display: grid;
  grid-template-columns: 112px 1fr auto;
  align-items: center;
  gap: 22px;
  padding: 24px 4px;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: padding .35s ease;
}

.contact-link:nth-child(1) { animation-delay: 1.00s; }
.contact-link:nth-child(2) { animation-delay: 1.13s; }
.contact-link:nth-child(3) { animation-delay: 1.26s; }

.contact-link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255,255,255,.54);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s cubic-bezier(.77,0,.18,1);
}

.contact-link:hover::before,
.contact-link:focus-visible::before {
  transform: scaleX(1);
  transform-origin: left;
}

.contact-link:hover,
.contact-link:focus-visible {
  padding-left: 16px;
  padding-right: 16px;
  outline: none;
}

.label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--muted);
}

.value {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(21px, 2.7vw, 33px);
  letter-spacing: -.025em;
}

.arrow {
  font-size: 24px;
  transition: transform .35s ease;
}

.contact-link:hover .arrow,
.contact-link:focus-visible .arrow { transform: translate(4px, -4px); }

.paper-grain {
  position: absolute;
  inset: -45%;
  pointer-events: none;
  z-index: 6;
  opacity: .052;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(circle at 20% 30%, #000 0 .6px, transparent .72px),
    radial-gradient(circle at 80% 70%, #000 0 .5px, transparent .68px);
  background-size: 5px 5px, 7px 7px;
  animation: grainMove .22s steps(2) infinite;
}

@keyframes towerIn {
  0% {
    opacity: 0;
    transform: translate3d(82px, 0, 0) rotate(.8deg) scale(.985);
    filter: blur(1.8px);
  }
  60% { opacity: 1; }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0) scale(1);
    filter: blur(0);
  }
}

@keyframes lineIn {
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes printJitter {
  0%, 86%, 100% { transform: translate(0, 0); }
  88% { transform: translate(.35px, -.25px); }
  92% { transform: translate(-.25px, .2px); }
  96% { transform: translate(.18px, .1px); }
}

@keyframes grainMove {
  0% { transform: translate(0, 0); }
  25% { transform: translate(1.5%, -.8%); }
  50% { transform: translate(-.8%, 1.5%); }
  75% { transform: translate(.8%, .8%); }
  100% { transform: translate(0, 0); }
}

@media (max-width: 840px) {
  body { overflow: auto; }

  .layout {
    width: min(100% - 34px, 680px);
    grid-template-columns: 1fr;
    gap: 0;
    align-content: center;
    padding: 34px 0;
  }

  .tower-stage {
    position: absolute;
    inset: 0 auto 0 -10vw;
    width: 72vw;
    height: 100svh;
    opacity: 0;
    transform: translate3d(58px,0,0) rotate(.6deg) scale(.99);
    animation-name: towerInMobile;
  }

  .tower-stage::before { opacity: .1; }

  .tower {
    width: min(70vw, 470px);
    max-height: 88svh;
    opacity: .13;
  }

  .contact-inner { padding: 48px 0 40px; }

  .wordmark { margin-left: auto; margin-right: auto; }
  h1 { text-align: center; margin-bottom: 42px; }

  .contact-link {
    grid-template-columns: 1fr auto;
    gap: 8px 16px;
    padding: 20px 2px;
  }

  .label { grid-column: 1 / -1; }
  .value { overflow-wrap: anywhere; }
}

@keyframes towerInMobile {
  0% { opacity: 0; transform: translate3d(58px,0,0) rotate(.6deg) scale(.99); }
  100% { opacity: 1; transform: translate3d(0,0,0) rotate(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .tower-stage,
  .wordmark,
  h1,
  .contact-link,
  .paper-grain,
  .tower-stage::before {
    animation: none;
  }

  .tower-stage,
  .wordmark,
  h1,
  .contact-link {
    opacity: 1;
    transform: none;
  }
}

html,body{overflow-y:auto!important;height:auto!important;min-height:100%!important}
html.tab-enter body{animation:tabPageIn .55s cubic-bezier(.22,.7,.2,1) both}
@keyframes tabPageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}