:root {
  --page-bg: #f3eddf;
  --paper-light: #fbf7ef;
  --paper-warm: #eee4d2;
  --ink: #282723;
  --muted: #756d60;
  --faint: rgba(40, 39, 35, 0.48);
  --line: rgba(95, 83, 65, 0.14);
  --line-soft: rgba(95, 83, 65, 0.08);
  --gold: #b98232;
  --gold-soft: rgba(185, 130, 50, 0.46);
  --gold-faint: rgba(185, 130, 50, 0.22);
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  background: var(--page-bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--page-bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-tap-highlight-color: transparent;
}

.page {
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.background {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

.paper-wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 8% 44%, rgba(116, 94, 57, 0.10), transparent 15%),
    radial-gradient(circle at 18% 35%, rgba(255, 255, 255, 0.76), transparent 28%),
    radial-gradient(circle at 80% 14%, rgba(255, 255, 255, 0.50), transparent 24%),
    linear-gradient(115deg, var(--paper-light), var(--paper-warm));
}

.grain {
  position: absolute;
  inset: -20%;
  opacity: 0.24;
  background-image: url("/noise.svg");
  background-repeat: repeat;
  background-size: 220px 220px;
  mix-blend-mode: multiply;
}

.geometry {
  position: absolute;
  inset: 0;
  opacity: 0.82;
}

.axis,
.curve,
.diagonal {
  position: absolute;
  transform: translateZ(0);
}

.axis-v {
  top: -6%;
  bottom: -6%;
  left: 69%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--line) 12%, var(--line) 88%, transparent);
}

.axis-h {
  left: -4%;
  right: -4%;
  bottom: 4%;
  height: 1px;
  opacity: 0.45;
  background: linear-gradient(to right, transparent, var(--gold-faint) 18%, var(--line) 48%, transparent);
}

.curve {
  border: 1px solid var(--line);
  border-radius: 50%;
}

.curve-one {
  width: 620px;
  height: 620px;
  right: -120px;
  bottom: -72px;
}

.curve-two {
  width: 840px;
  height: 840px;
  right: -330px;
  bottom: -225px;
  border-color: var(--gold-faint);
}

.curve-three {
  width: 720px;
  height: 720px;
  right: -22px;
  top: 22%;
  border-color: var(--line-soft);
}

.diagonal {
  width: 1px;
  height: 76rem;
  background: linear-gradient(to bottom, transparent, var(--line) 24%, var(--line) 70%, transparent);
  transform-origin: center;
}

.diagonal-one {
  top: -22%;
  right: 17%;
  transform: rotate(44deg);
}

.diagonal-two {
  top: -10%;
  right: 35%;
  transform: rotate(-62deg);
  opacity: 0.48;
}


main {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  padding: clamp(108px, calc(68px + 3vw), 120px) clamp(24px, 9vw, 144px) 96px;
}

.hero {
  position: relative;
  z-index: 2;
  width: min(100%, 680px);
  transform: translateY(-1.5vh);
}

.brand {
  margin: 0;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: clamp(58px, 9vw, 128px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: clamp(0.18em, 2.2vw, 0.34em);
}

.gold-rule {
  width: 82px;
  height: 2px;
  margin: clamp(24px, 3vw, 38px) 0 clamp(24px, 3.2vw, 42px);
  background: linear-gradient(to right, var(--gold), rgba(185, 130, 50, 0.55));
}

.tagline {
  margin: 0;
  color: var(--muted);
  font-size: clamp(15px, 1.45vw, 22px);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.31em;
  text-transform: uppercase;
}

.contact-link {
  display: inline-block;
  margin-top: clamp(56px, 8vh, 96px);
  color: var(--ink);
  text-decoration: none;
  font-size: clamp(12px, 1.1vw, 16px);
  letter-spacing: 0.31em;
  text-transform: uppercase;
  line-height: 1.8;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.contact-link:hover,
.contact-link:focus-visible {
  color: var(--gold);
  outline: none;
}

footer {
  position: relative;
  z-index: 10;
  min-height: 80px;
  display: flex;
  align-items: center;
  gap: 0.35em;
  padding: 22px clamp(24px, 9vw, 144px);
  color: var(--ink);
  font-size: 11px;
  line-height: 1.8;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.translatable,
.contact-link,
footer span {
  transition: opacity 0.18s ease, transform 0.18s ease, color 0.2s ease;
}

.translatable.is-changing {
  opacity: 0;
  transform: translateY(2px);
}

.tagline.is-non-latin,
.contact-link.is-non-latin,
footer .is-non-latin {
  letter-spacing: 0.04em;
  text-transform: none;
}

.tagline.is-rtl,
.contact-link.is-rtl,
footer .is-rtl {
  direction: rtl;
  unicode-bidi: isolate;
}

.error-page .hero {
  width: min(100%, 740px);
}

.error-page .tagline {
  text-transform: none;
  letter-spacing: 0.12em;
}

.error-page .contact-link {
  margin-top: clamp(32px, 5vh, 56px);
}

@media (max-width: 900px) {
  .axis-v {
    left: 76%;
  }

  .curve-one {
    right: -330px;
  }

  .curve-two {
    right: -520px;
  }

  .curve-three {
    right: -250px;
  }

  main {
    padding-right: clamp(24px, 8vw, 80px);
  }
}

@media (max-width: 680px) {

  main {
    align-items: center;
    padding: 98px 24px 92px;
  }

  .hero {
    transform: none;
  }

  .brand {
    font-size: clamp(48px, 17vw, 72px);
    letter-spacing: 0.20em;
  }

  .gold-rule {
    margin: 24px 0 28px;
  }

  .tagline {
    max-width: 360px;
    font-size: 13px;
    letter-spacing: 0.20em;
  }

  .contact-link {
    max-width: 100%;
    overflow-wrap: anywhere;
    margin-top: 48px;
    font-size: 11px;
    letter-spacing: 0.20em;
  }

  footer {
    min-height: 78px;
    flex-wrap: wrap;
    padding: 20px 24px;
    font-size: 10px;
    letter-spacing: 0.15em;
  }

  .axis-v {
    left: 86%;
  }

  .axis-h {
    bottom: 4%;
  }

  .curve-one {
    width: 460px;
    height: 460px;
    right: -360px;
    bottom: 8%;
  }

  .curve-two,
  .curve-three,
  .diagonal-two {
    display: none;
  }
}

@media (max-width: 420px) {
  .brand {
    font-size: clamp(42px, 15vw, 60px);
    letter-spacing: 0.18em;
  }

  .tagline,
  .contact-link {
    letter-spacing: 0.15em;
  }
}


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