/* ogtaytukez.com — sakura.
   The sky is the design. Type stays out of its way: ink on light, one warm accent. */

:root {
  --ink:    #3A2630;
  --ink-2:  #6B5460;
  --accent: #C4587A;
  --card:   rgba(255, 251, 248, 0.82);
  --hair:   rgba(58, 38, 48, 0.14);

  /* Manrope was dropped because it has no U+018F: DƏVƏTNAMƏ and MƏKAN are
     uppercased, so their Ə came from a fallback face. Every family here was
     checked against ƏəĞğİıÖöŞşÜüÇç in the woff2 Google actually serves. */
  --display: 'Cormorant Garamond', 'Noto Serif', Georgia, serif;
  --names: 'Great Vibes', 'Cormorant Garamond', cursive;
  --body: 'Mulish', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* The script is a hairline face; full ink reads as a blot at display size. */
  --ink-names: #7B5464;
  --pad: clamp(1.25rem, 5vw, 2.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  margin: 0;
  background: #F3DDE7;
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.55;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:where(a, button, input, textarea, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.stage { position: relative; height: 100dvh; min-height: 100svh; overflow: hidden; }
.art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- the names ---------- */

.copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: var(--pad);
  pointer-events: none;
}

.names {
  margin: 0;
  text-align: center;
  font-family: var(--names);
  font-weight: 400;
  color: var(--ink-names);
  font-size: clamp(3.25rem, 13.5vw, 9rem);
  line-height: 1.02;
  letter-spacing: 0;
}

.names em {
  display: block;
  /* Great Vibes has no italic; a synthetic slant on a script just smears it. */
  font-style: normal;
  font-size: 0.44em;
  margin: 0.04em 0;
  color: var(--accent);
}

/* ---------- the two quiet lines ---------- */

.kicker,
.stamp {
  position: absolute;
  z-index: 3;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  white-space: nowrap;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  opacity: 0;
}

.kicker { top: calc(clamp(1.5rem, 5vh, 3rem) + env(safe-area-inset-top)); color: var(--accent); }
.stamp  { bottom: calc(clamp(1.5rem, 5vh, 3rem) + env(safe-area-inset-bottom)); color: var(--ink-2); }

.kicker.is-in, .stamp.is-in { opacity: 1; transition: opacity 1.2s ease; }