/* Kathaa holding page. Colours are the marks' own palette (05 §5):
   Harbour Ink ground, Ivory type, Lamp Gold matra on dark.
   Contrast on #121a2d: ivory 15.5:1, gold 9.4:1, smoke 7.6:1. */
@font-face { font-family: "Rozha One"; src: url("/fonts/rozha-one-kath.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; src: url("/fonts/cormorant-500.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; font-weight: 400; font-style: italic; src: url("/fonts/cormorant-400i.woff2") format("woff2"); font-display: swap; }

:root { --ink: #121a2d; --ivory: #f7f2e8; --gold: #e5b869; --smoke: #a5acb9; --ease: cubic-bezier(0.22, 1, 0.36, 1); }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ink); color: var(--ivory); }
body {
  min-height: 100svh; display: flex; flex-direction: column;
  font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.stage {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 12vh 1.5rem 6vh;
}

/* ── The mark — board 03c, verbatim ─────────────────────────────── */
.mark { margin: 0; display: flex; flex-direction: column; align-items: center; font-weight: 400;
  font-size: clamp(88px, 21vw, 168px); animation: rise 1.4s var(--ease) both; }
.mark-deva { display: inline-flex; align-items: flex-start; line-height: 1.15;
  font-family: "Rozha One", "Noto Serif Devanagari", serif; white-space: nowrap;
  color: var(--ivory); margin-bottom: -0.384em; }
.mark-deva > span { display: block; }
.matra { margin-left: -0.1707em; width: 0.34em; height: 1.40em; }
.matra svg { width: 100%; height: 100%; display: block; overflow: visible; }
.mark-en { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500;
  font-size: calc(1em / 3.25); letter-spacing: 0.025em; line-height: 1; color: var(--ivory); }

/* ── Words ───────────────────────────────────────────────────────── */
.soon { margin: clamp(3.25rem, 9vh, 5rem) 0 0; font-size: 0.8rem; letter-spacing: 0.36em;
  text-transform: uppercase; padding-left: 0.36em; color: var(--gold);
  animation: rise 1.4s 0.35s var(--ease) both; }
.line { margin: 0.9rem 0 0; font-style: italic; font-weight: 400; font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  color: var(--ivory); animation: rise 1.4s 0.5s var(--ease) both; }
.ig { margin-top: 2.25rem; display: inline-flex; flex-direction: column; align-items: center; gap: 0.2rem;
  min-height: 44px; padding: 0.5rem 0.75rem; color: var(--smoke); text-decoration: none;
  font-size: 1.05rem; letter-spacing: 0.02em; animation: rise 1.4s 0.65s var(--ease) both; }
.ig-handle { color: var(--gold); background: linear-gradient(var(--gold), var(--gold)) no-repeat left bottom / 0% 1px;
  padding-bottom: 2px; transition: background-size 0.6s var(--ease); }
.ig:hover .ig-handle, .ig:focus-visible .ig-handle { background-size: 100% 1px; }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

.foot { padding: 1.5rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom)); text-align: center;
  font-size: 0.95rem; line-height: 1.6; color: var(--smoke); }
.foot p { margin: 0; }
.nb { white-space: nowrap; }
.foot a { color: var(--smoke); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.foot a:hover { color: var(--ivory); }

@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mark, .soon, .line, .ig { animation: none; } }