:root {
  --bg: #eef0f3;
  --bg-panel: #ffffff;
  --ink: #171a1f;
  --ink-dim: #4b5563;
  --ink-faint: #8b93a1;
  --accent: #a97a3f;
  --line: rgba(20, 24, 30, 0.1);
  --grid-line: rgba(20, 24, 30, 0.05);
  --glow: rgba(201, 154, 91, 0.22);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #11151b;
    --bg-panel: #1a212b;
    --ink: #e9ecf0;
    --ink-dim: #94a0ae;
    --ink-faint: #5b6472;
    --accent: #c99a5b;
    --line: rgba(255, 255, 255, 0.07);
    --grid-line: rgba(255, 255, 255, 0.035);
    --glow: rgba(201, 154, 91, 0.16);
  }
}

:root[data-theme="dark"] {
  --bg: #11151b;
  --bg-panel: #1a212b;
  --ink: #e9ecf0;
  --ink-dim: #94a0ae;
  --ink-faint: #5b6472;
  --accent: #c99a5b;
  --line: rgba(255, 255, 255, 0.07);
  --grid-line: rgba(255, 255, 255, 0.035);
  --glow: rgba(201, 154, 91, 0.16);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  overflow-x: hidden;
  position: relative;
}

/* faint drafting grid across the whole scene */
.grid-field {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse 90% 70% at 38% 42%, black 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 38% 42%, black 0%, transparent 78%);
}

.lamp-glow {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 66% 30%, var(--glow), transparent 62%);
  pointer-events: none;
  z-index: 0;
  animation: breathe 9s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 1; }
}

.stage {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8vh 9vw;
}

.wordmark {
  font-family: 'Fraunces', ui-serif, Georgia, serif;
  font-size: clamp(3.2rem, 11vw, 8.5rem);
  line-height: 0.94;
  letter-spacing: -0.01em;
  margin: 0;
  display: flex;
  white-space: nowrap;
}

.k-open, .k-close {
  color: var(--accent);
  font-weight: 600;
  font-optical-sizing: auto;
  display: inline-block;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.9s ease;
}

.k-open  { transform: translateX(-0.6em); opacity: 0; }
.k-close { transform: translateX(0.6em);  opacity: 0; }

/* closing K is a flipped mirror of the opening K, not a repeat of it. */
.mirror-glyph { display: inline-block; transform: scaleX(-1); }

.mid {
  font-weight: 300;
  color: var(--ink);
  display: inline-block;
  opacity: 0;
  transition: opacity 1s ease 0.35s, filter 1s ease 0.35s;
  filter: blur(6px);
}

.stage.in .k-open,
.stage.in .k-close { transform: translateX(0); opacity: 1; }
.stage.in .mid      { opacity: 1; filter: blur(0); }

.tagline {
  margin: 1.6rem 0 0;
  max-width: 40ch;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 400;
  color: var(--ink-dim);
  line-height: 1.5;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.8s ease 0.9s, transform 0.8s ease 0.9s;
}

.stage.in .tagline { opacity: 1; transform: translateY(0); }

.plate {
  position: fixed;
  left: 9vw;
  bottom: 6vh;
  z-index: 1;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  opacity: 0;
  transition: opacity 0.8s ease 1.3s;
}

.stage.in ~ .plate { opacity: 1; }

.plate span { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .k-open, .k-close, .mid, .tagline, .plate {
    transition: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
  .lamp-glow { animation: none; }
}

@media (max-width: 560px) {
  .plate { position: static; margin-top: 3rem; }
}