/* ===========================================================================
   Nirukta — coming-soon page
   Design system taken verbatim from "Nirukta Brand Identity.html" v1.0.
   Hard bans observed: no gradients, glows, drop shadows, tinted photography,
   mandala/lotus ornament, and never more than one accent colour.
   =========================================================================== */

/* --- Fonts -----------------------------------------------------------------
   Self-hosted, subset WOFF2. Noto Serif Display and Tiro Devanagari Hindi are
   converted from the TTFs in nirukta-assets/fonts/; Noto Sans and Noto Sans
   Mono are the same OFL upstream files, taken from the brand-identity bundle
   (they are not in the asset kit). All SIL OFL — see nirukta-assets/README.md.
   Nothing is loaded from a CDN.                                             */

@font-face {
  font-family: "Noto Serif Display";
  src: url("fonts/noto-serif-display-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* Noto Sans ships split base / extended, so the IPA and IAST glyphs
   (ɪ ʊ ə ˈ · ā ī ū ṛ ṣ ṇ ṃ ḥ) live in a second 3 KB file. */
@font-face {
  font-family: "Noto Sans";
  src: url("fonts/noto-sans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00B7, U+2013-2014,
                 U+2018-2019, U+201C-201D, U+2026;
}
@font-face {
  font-family: "Noto Sans";
  src: url("fonts/noto-sans-400-ext.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+00D1, U+00F1, U+0100-0101, U+012A-012B, U+015A-015B,
                 U+016A-016B, U+0259, U+026A, U+028A, U+02C8, U+1E0C-1E0D,
                 U+1E24-1E25, U+1E36-1E37, U+1E42-1E47, U+1E5A-1E5D,
                 U+1E62-1E63, U+1E6C-1E6D;
}

@font-face {
  font-family: "Noto Sans Mono";
  src: url("fonts/noto-sans-mono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* Running Sanskrit only. The wordmarks are outlined SVG, so this face is not
   requested by the page as it stands — it is declared and shipped so any
   Devanagari copy added later shapes correctly. Tag such copy lang="sa". */
@font-face {
  font-family: "Tiro Devanagari Hindi";
  src: url("fonts/tiro-devanagari-hindi-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* --- Tokens ------------------------------------------------------------- */

:root {
  /* Palette — nirukta-assets/brand-colors.txt */
  --paper:  #F4F1E7;  /* page ground                                   */
  --bone:   #E5DCC9;  /* dominant garment blank                        */
  --sumi:   #17150F;  /* warm black, primary ink   — 16.15:1 on paper  */
  --slate:  #333A42;  /* secondary ink             — 10.18:1 on paper  */
  --rubric: #A6412A;  /* sole accent               —  5.45:1 on paper  */
  --muted:  #6A6558;  /* mono metadata ink         —  5.14:1 on paper  */
  --rule:   #C9BFA8;  /* decorative hairline, never used for text      */

  --font-display: "Noto Serif Display", Georgia, "Times New Roman", serif;
  --font-text: "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Noto Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-deva: "Tiro Devanagari Hindi", "Noto Serif Devanagari", serif;

  /* Latin logotype width; everything in the lockup is derived from it. */
  --lockup: clamp(14.5rem, 52vw, 23.5rem);

  color-scheme: light;
}

/* --- Reset -------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
/* The UA's [hidden] rule loses to any class that sets `display`, so make the
   attribute authoritative — .signup__row is display:flex and would otherwise
   stay visible after a successful signup. */
[hidden] { display: none !important; }
body, h1, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }

/* --- Page --------------------------------------------------------------- */

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--sumi);
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  max-width: 54rem;
  margin-inline: auto;
  padding: 1.5rem clamp(1.25rem, 5vw, 2.5rem) 1.75rem;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: clamp(2rem, 7vh, 4rem);
}

/* --- Small-caps metadata ------------------------------------------------
   Noto Sans Mono is metadata only, per the type system: labels, colophon,
   the button. Never body copy.                                            */

.meta {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.6;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.rule {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}
.rule--top    { border-bottom: 1px solid var(--rule); padding-bottom: 0.9rem; }
.rule--bottom { border-top:    1px solid var(--rule); padding-top:    1.1rem; }

/* --- Hero lockup --------------------------------------------------------
   Optical pairing, per the identity: the Devanagari em size is set 10 %
   smaller than the Latin cap height (the brand's 8–12 % rule).

     Latin cap height = 714/1000 em, drawn at 1000 units per em in a
     4620-unit-wide viewBox  ->  cap = 0.1546 x rendered width
     Devanagari em            = rendered width x 1000/2666

     0.90 x 0.714 x (w_lat x 1000/4620) = w_dev x 1000/2666
       ->  w_dev = 0.371 x w_lat

   The vertical gap is the padding already inside the two viewBoxes: it lands
   at 0.83 x cap height, matching the lockup in the brand book and on
   coming-soon-tile-1080.png. No margin is added between them.             */

.lockup { display: block; }
.lockup__latin { width: var(--lockup); }
.lockup__deva  { width: calc(var(--lockup) * 0.371); }
.lockup img    { margin-inline: auto; }

/* --- Dictionary entry ---------------------------------------------------- */

.entry {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  max-width: 34rem;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--slate);
  text-wrap: balance;
}
.entry__word {
  font-family: var(--font-display);
  font-size: 1.2em;
  color: var(--sumi);
}
.entry__ipa   { color: var(--rubric); white-space: nowrap; }   /* rubrication: the accent */
.entry__gloss { color: var(--sumi); }
.entry__dot   { color: var(--muted); padding-inline: 0.15em; }

/* --- Lede ---------------------------------------------------------------- */

.lede {
  margin-top: clamp(1.5rem, 3.5vw, 2rem);
  max-width: 27ch;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.6rem);
  line-height: 1.5;
  color: var(--sumi);
  text-wrap: balance;
}

/* --- Email capture ------------------------------------------------------- */

.signup {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  width: 100%;
  max-width: 27rem;
}

.signup__row {
  display: flex;
  border: 1px solid var(--sumi);
}

.signup__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.8rem 0.95rem;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--sumi);
  border-radius: 0;          /* iOS rounds inputs by default */
  -webkit-appearance: none;
  appearance: none;
}
.signup__input::placeholder { color: var(--muted); opacity: 1; }
.signup__input:focus-visible {
  outline: 2px solid var(--rubric);   /* 5.45:1 on paper */
  outline-offset: -3px;
}

.signup__button {
  flex: 0 0 auto;
  padding: 0.8rem 1.1rem;
  border: 0;
  background: var(--sumi);
  color: var(--paper);                /* 16.15:1 */
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 120ms linear;
}
.signup__button:hover { background: var(--rubric); }   /* paper on rubric, 5.45:1 */
.signup__button:focus-visible {
  outline: 2px solid var(--paper);    /* 16.15:1 against the sumi fill */
  outline-offset: -4px;
}
.signup__button[disabled] { opacity: 0.55; cursor: default; }

.signup__note,
.signup__status {
  margin-top: 0.85rem;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--slate);
}
.signup__status:empty { margin-top: 0; }        /* collapses, stays announceable */
.signup__status--error { color: var(--rubric); }

/* Confirmation, in the page's own type rather than LaunchList's iframe. */
.signup__status--done { display: flex; flex-direction: column; gap: 0.4rem; }
.signup__done {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--sumi);
}
.signup__after { color: var(--slate); }

/* --- Footer -------------------------------------------------------------- */

/* The mark and the handle read as one signature, so the footer distributes as
   three groups: [N: @wearnirukta] — [social] — [colophon]. */
.footer__brand { display: flex; align-items: center; gap: 0.7rem; }
.footer__monogram { width: 1.375rem; }

.footer__social { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; }
.footer__social li { display: flex; gap: 0.9rem; }
.footer__social li + li::before { content: "·"; color: var(--rule); }

.rule a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.15em;
}
.rule a:hover,
.rule a:focus-visible { color: var(--rubric); border-bottom-color: currentColor; }
.rule a:focus-visible { outline: 2px solid var(--rubric); outline-offset: 3px; }

/* --- Devanagari body copy ------------------------------------------------ */

[lang="sa"], [lang="hi"], .deva { font-family: var(--font-deva); }

/* --- Utilities ----------------------------------------------------------- */

.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Motion — a single fade, nothing else -------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .lockup, .entry, .lede, .signup, .rule {
    animation: nk-rise 520ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
  }
  .entry  { animation-delay:  70ms; }
  .lede   { animation-delay: 140ms; }
  .signup { animation-delay: 210ms; }
  .rule   { animation-delay: 280ms; }
}

@keyframes nk-rise {
  from { opacity: 0; transform: translateY(6px); }
}

/* --- Narrow screens (down to 360 px) ------------------------------------- */

@media (max-width: 34rem) {
  .meta { font-size: 0.625rem; letter-spacing: 0.13em; }

  /* Both labels still read as a pair at 360 px; keep them on the outer edges. */
  .rule--top { gap: 0.35rem 0.75rem; }

  .rule--bottom {
    flex-direction: column;
    justify-content: center;
    gap: 0.9rem;
    text-align: center;
  }

  .signup__row { flex-direction: column; }
  .signup__button { padding-block: 0.85rem; }
  .signup__input  { border-bottom: 1px solid var(--rule); }
}