:root {
  color-scheme: dark;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "DM Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --surface: #030405;
  --surface-deep: #000101;
  --surface-lift: #0b1110;
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.7);
  --text-tertiary: rgba(255, 255, 255, 0.4);
  --text-base: #c4cfc7;
  --accent: #7aab8e;
  --halo-core: rgba(223, 236, 226, 0.32);
  --halo-edge: rgba(141, 160, 150, 0.13);
  --horizon-core: rgba(226, 240, 229, 0.18);
  --horizon-edge: rgba(121, 149, 136, 0.09);
  --ambient-a: rgba(35, 49, 45, 0.22);
  --ambient-b: rgba(96, 122, 108, 0.05);
  --mark-opacity: 0.78;
  --mark-filter:
    invert(63%)
    sepia(10%)
    saturate(210%)
    hue-rotate(94deg)
    brightness(86%)
    drop-shadow(0 0 18px rgba(166, 184, 173, 0.18));
  --footer-color: var(--text-tertiary);
  --toggle-border: color-mix(in srgb, var(--text-base) 22%, transparent);
  --toggle-mark: color-mix(in srgb, var(--text-base) 58%, transparent);
  --vignette: radial-gradient(circle at center, transparent 0 34%, rgba(0, 1, 1, 0.3) 72%, rgba(0, 0, 0, 0.82) 100%);
}

[data-theme="light"] {
  color-scheme: light;
  --surface: #f4f5f2;
  --surface-deep: #eaece8;
  --surface-lift: #dde0db;
  --text-primary: #0a0c0b;
  --text-secondary: rgba(3, 4, 5, 0.6);
  --text-tertiary: rgba(3, 4, 5, 0.35);
  --text-base: #3a3d3b;
  --accent: #4e8a6a;
  --halo-core: rgba(20, 28, 26, 0.3);
  --halo-edge: rgba(25, 35, 32, 0.15);
  --horizon-core: rgba(18, 26, 24, 0.2);
  --horizon-edge: rgba(18, 26, 24, 0.1);
  --ambient-a: rgba(70, 61, 48, 0.13);
  --ambient-b: rgba(20, 28, 26, 0.1);
  --mark-opacity: 0.66;
  --mark-filter:
    invert(15%)
    sepia(11%)
    saturate(386%)
    hue-rotate(106deg)
    brightness(82%)
    drop-shadow(0 0 18px rgba(20, 28, 26, 0.1));
  --footer-color: var(--text-tertiary);
  --toggle-border: rgba(3, 4, 5, 0.22);
  --toggle-mark: var(--text-secondary);
  --vignette: radial-gradient(circle at center, transparent 0 38%, rgba(70, 61, 48, 0.12) 76%, rgba(64, 54, 42, 0.24) 100%);
}

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

html {
  min-height: 100%;
  background: var(--surface);
  transition: background-color 700ms ease;
}

body {
  position: relative;
  min-height: 100svh;
  margin: 0;
  overflow: hidden;
  color: var(--text-base);
  font-family: var(--font-body);
  background:
    radial-gradient(circle at 50% 44%, var(--ambient-a), transparent 27rem),
    radial-gradient(circle at 50% 54%, var(--ambient-b), transparent 18rem),
    linear-gradient(145deg, var(--surface-deep), var(--surface) 48%, var(--surface-lift));
  transition:
    background 850ms ease,
    color 700ms ease;
}

body::after {
  position: fixed;
  inset: 0;
  pointer-events: none;
  content: "";
  background: var(--vignette);
  transition: background 850ms ease;
}

.theme-toggle {
  position: fixed;
  top: clamp(18px, 4vh, 36px);
  right: clamp(18px, 4vw, 40px);
  z-index: 5;
  display: grid;
  width: 36px;
  height: 36px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--toggle-border);
  border-radius: 999px;
  background: transparent;
  color: var(--toggle-mark);
  font-family: var(--font-body);
  cursor: pointer;
  transition:
    border-color 650ms ease,
    color 650ms ease,
    background-color 650ms ease;
}

.theme-icon {
  position: absolute;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
  transition:
    opacity 220ms ease,
    transform 220ms ease;
}

.theme-icon--moon {
  fill: currentColor;
  opacity: 1;
  transform: scale(1);
}

.theme-icon--sun {
  opacity: 0;
  transform: scale(0.72) rotate(-24deg);
}

[data-theme="light"] .theme-icon--moon {
  opacity: 0;
  transform: scale(0.72) rotate(24deg);
}

[data-theme="light"] .theme-icon--sun {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.landing {
  position: relative;
  display: grid;
  min-height: 100svh;
  place-items: center;
  padding: 24px;
  isolation: isolate;
}

.landing::before,
.landing::after {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  content: "";
}

.landing::before {
  width: clamp(110px, 13vw, 190px);
  height: clamp(180px, 22vw, 310px);
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 48%, var(--halo-core), var(--halo-edge) 34%, transparent 72%);
  filter: blur(16px);
  opacity: 0.68;
  animation: quiet-breath 16s ease-in-out infinite;
  transition:
    background 850ms ease,
    opacity 850ms ease,
    filter 850ms ease;
}

.landing::after {
  width: clamp(190px, 30vw, 430px);
  height: clamp(78px, 11vw, 160px);
  transform: translateY(18px);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 0%, var(--horizon-core), var(--horizon-edge) 38%, transparent 70%);
  filter: blur(20px);
  opacity: 0.5;
  animation: horizon-breath 18s ease-in-out infinite;
  transition:
    background 850ms ease,
    opacity 850ms ease,
    filter 850ms ease;
}

.monogram {
  position: relative;
  display: block;
  width: clamp(44px, 6vw, 84px);
  height: auto;
  opacity: var(--mark-opacity);
  filter: var(--mark-filter);
  transition:
    filter 850ms ease,
    opacity 850ms ease;
}

.footer-mark {
  position: fixed;
  bottom: clamp(18px, 4vh, 38px);
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  color: var(--footer-color);
  font-family: var(--font-display);
  font-size: clamp(9px, 1vw, 12px);
  font-weight: 500;
  letter-spacing: 0.42em;
  line-height: 1.4;
  padding-left: 0.42em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 700ms ease;
}

@keyframes quiet-breath {
  0%,
  100% {
    opacity: 0.58;
    transform: scale(0.96);
  }

  50% {
    opacity: 0.76;
    transform: scale(1.04);
  }
}

@keyframes horizon-breath {
  0%,
  100% {
    opacity: 0.42;
    transform: translateY(18px) scaleX(0.94);
  }

  50% {
    opacity: 0.56;
    transform: translateY(18px) scaleX(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing::before,
  .landing::after {
    animation: none;
  }
}

@media (max-width: 560px) {
  body {
    background:
      radial-gradient(circle at 50% 46%, var(--ambient-a), transparent 18rem),
      linear-gradient(145deg, var(--surface-deep), var(--surface) 54%, var(--surface-lift));
  }
}