/* Main splash = Option E4 (source of truth for edits: this file; options/e4/style.css is the frozen option). */
/* Option E4 (copy of E3; the seal gains instrument detail in init.js, and the motto is Latin + English only, with no rune line).
   Option E3 (from E2): tagline line 1 in Michroma; motto back to E's Cormorant Italic, a step brighter; faint Vegvisir arm fragments in the seal (init.js).
   Option E: D's layout and engraved seal, C's Michroma wordmark led by a neon YF bind-rune logo, and a Sora tagline.
   Neon blue (#3fe0ff) is used for the logo, tagline line 2, the status dot and Dev login hover/focus. */
@font-face { font-family: "Michroma"; src: url("fonts/michroma-400-yf3.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Sora"; src: url("fonts/sora-300-yf.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Sora"; src: url("fonts/sora-400-yf.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond-italic-400-yf4.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
:root { --pad: clamp(20px, 3.2vw, 40px); --cx: 67vw; --cy: 47vh; --d: min(90vh, 62vw); --neon: #3fe0ff; --accent: #3fe0ff;
  --cap: 0.75; /* Michroma cap height: 1536 / 2048 units */ }
.hero { position: fixed; left: calc(var(--cx) - var(--d) / 2); top: calc(var(--cy) - var(--d) / 2); width: var(--d); height: var(--d); pointer-events: none; }
.seal { width: 100%; height: 100%; display: block; overflow: visible; }
.axis-h { position: fixed; left: 0; right: 0; top: var(--cy); height: 1px; background: var(--line-2); }
.axis-v { position: fixed; top: 0; bottom: 0; left: var(--cx); width: 1px; background: var(--line-2); }
.top { position: fixed; top: var(--pad); left: var(--pad); right: var(--pad); display: flex; justify-content: space-between; }
.pip { display: inline-block; width: 6px; height: 6px; background: var(--neon); margin-right: 10px; vertical-align: 1px; }
.plate { position: fixed; left: var(--pad); bottom: calc(var(--pad) + 30px); max-width: min(70vw, 900px); display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: 24px 28px 4px 0; background: linear-gradient(90deg, rgba(6,10,16,0.82) 60%, rgba(6,10,16,0)); }
/* Wordmark: C's Michroma, uppercase, 0.3em tracking. The logo is exactly cap height, on the baseline, 0.35em before the name. */
.word { margin: 0 0 6px; display: flex; align-items: baseline; font-family: "Michroma", ui-sans-serif, sans-serif; font-weight: 400;
  font-size: clamp(30px, 5.2vw, 72px); letter-spacing: 0.3em; line-height: 1.1; color: var(--text); white-space: nowrap; }
.word span { margin-right: -0.3em; } /* no trailing tracking after the M */
.logo { flex: none; height: calc(var(--cap) * 1em); width: auto; margin-right: calc(0.35em - 0.0625em); /* visible gap 0.35em: Michroma Y has a 0.0625em left side bearing */ overflow: visible;
  filter: drop-shadow(0 0 1.5px rgba(63,224,255,0.9)) drop-shadow(0 0 7px rgba(63,224,255,0.35)); }
.logo path { fill: none; stroke: var(--neon); stroke-width: 10; stroke-linecap: square; stroke-linejoin: miter; }
/* Tagline sits where D's nomenclature sat: under the wordmark, above a hairline rule. */
.tag { padding-top: 14px; border-top: 1px solid var(--line); min-width: 62%; }
.tag p { margin: 0; font-family: "Sora", var(--sans); letter-spacing: 0.01em; }
/* Line 1 in the wordmark's Michroma, sentence case, light tracking (the wordmark's 0.3em scaled down to 0.04em). */
.tag .tag-1 { font-family: "Michroma", var(--sans); font-weight: 400; font-size: clamp(14px, 1.4vw, 17px); line-height: 1.5; letter-spacing: 0.04em; color: var(--text); }
.tag-2 { margin-top: 4px !important; font-weight: 400; font-size: clamp(13px, 1.2vw, 15px); line-height: 1.5; letter-spacing: 0.04em; color: var(--neon);
  text-shadow: 0 0 10px rgba(63,224,255,0.18); }
/* Motto (E4): Latin and English only, one line, E3's Cormorant Garamond Italic and brighter grey (#97a8ba, 8.2:1). No Serbian, no rune line. */
.motto-d { margin: 4px 0 0; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: clamp(14px, 1.3vw, 16px); letter-spacing: 0.02em; color: #97a8ba; }
.motto-d .sep { padding: 0 0.55em; font-style: normal; }
.plate .login { margin-top: 2px; } /* E4: tighter under the one-line motto (plate gap 14px + 2px) */
.login::after { color: var(--text-2); transition: color 180ms ease; }
.login:hover, .login:focus-visible { border-color: var(--neon); background: rgba(63,224,255,0.08); }
.login:focus-visible { box-shadow: 0 0 0 2px var(--base), 0 0 0 3px var(--neon); }
.login:hover::after, .login:focus-visible::after { color: var(--neon); }
.foot { position: fixed; right: var(--pad); bottom: var(--pad); }
@media (max-aspect-ratio: 1/1) {
  :root { --cx: 62vw; --cy: 33vh; --d: min(108vw, 68vh); }
  .plate { max-width: calc(100vw - 2 * var(--pad)); padding-top: 44px; background: linear-gradient(0deg, rgba(6,10,16,0.9) 70%, rgba(6,10,16,0)); }
  .word { font-size: clamp(22px, 6.6vw, 60px); }
}