/* Satinata — logo wordmark stage */

:root {
  --bg: #141816;
  --text: #eef1ec;
  --muted: #6f7a72;
  --accent: #a8c4a0;
  --focus: #c5d9be;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

html,
body {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

body.egg-on {
  background:
    radial-gradient(ellipse 70% 45% at 50% 42%, #1e2a22 0%, transparent 60%),
    var(--bg);
}

.stage {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1.5rem 4.5rem;
  text-align: center;
}

/* reset button → logo wordmark */
.mark {
  appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  margin: 0;
  padding: 0.15em 0.2em;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  font-weight: 650;
  letter-spacing: 0.06em;
  line-height: 1.05;
  color: var(--text);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.35s ease, opacity 0.2s ease;
}

.mark::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.mark::selection,
.mark *::selection {
  background: transparent;
  color: inherit;
}

.mark:hover {
  opacity: 0.88;
}

.mark:focus {
  outline: none;
}

.mark:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 10px;
  border-radius: 4px;
}

.mark:active {
  opacity: 0.8;
}

body.egg-on .mark {
  color: var(--accent);
}

.egg-msg {
  margin: 1rem 0 0;
  min-height: 1.4em;
  font-size: 0.95rem;
  font-weight: 450;
  letter-spacing: 0.04em;
  color: var(--muted);
  -webkit-user-select: none;
  user-select: none;
}

.egg-msg:not([hidden]) {
  color: var(--accent);
  opacity: 0.9;
}

.foot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem 1.25rem 1.35rem;
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

.foot a {
  color: var(--muted);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.foot a:hover,
.foot a:focus-visible {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.foot a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .mark {
    transition: none;
  }
}