/* Nightfold landing page. Plain CSS, dark only (the page is a night), self-hosted fonts.
   Labels ("Cinzel" tracked caps) read their family, weight, size and tracking factors from the
   --lf/--lw/--ls/--lt custom properties so Bulgarian can swap Cinzel (no Cyrillic) for
   Cormorant Garamond 700, a fifth larger and less tracked, in one rule. */

/* ---- fonts: the faces the page uses, Latin + Cyrillic only ---- */
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(fonts/cinzel-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(fonts/cormorant-garamond-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(fonts/cormorant-garamond-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant SC'; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url(fonts/cormorant-sc-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Cormorant SC'; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url(fonts/cormorant-sc-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'UnifrakturCook'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/unifrakturcook-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Noto Sans Symbols 2'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/noto-sans-symbols-2.woff2) format('woff2');
  unicode-range: U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+1F000-1F0FF, U+1F100-1F1AE, U+1F650-1F67F, U+1F700-1F80B; }

/* ---- base ---- */
:root {
  color-scheme: dark;
  --lf: 'Cinzel', 'Cormorant SC', serif;
  --lw: 600;
  --ls: 1;
  --lt: 1;
  --moon: oklch(0.84 0.07 245);
  --line: rgba(150, 170, 200, 0.1);
  --line-card: rgba(150, 170, 200, 0.14);
  --wash: rgba(150, 170, 200, 0.045);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
:root[lang="bg"] { --lf: 'Cormorant Garamond', serif; --lw: 700; --ls: 1.2; --lt: 0.7; }

html { scroll-behavior: smooth; background: #07080b; }
html, body { margin: 0; }
body {
  min-height: 100vh; display: flex; flex-direction: column;
  font-family: 'Cormorant Garamond', 'Noto Sans Symbols 2', Georgia, serif; font-weight: 500;
  color: #c9d0dc; background: #07080b; -webkit-font-smoothing: antialiased;
}
a { color: oklch(0.83 0.06 245); text-decoration: none; }
a:hover { color: oklch(0.90 0.06 245); }
::selection { background: oklch(0.42 0.05 245 / 0.6); color: #f2f5fa; }
button { font: inherit; }
img, svg { display: block; }
p { margin: 0; }

.wrap { width: min(1200px, calc(100% - clamp(40px, 10vw, 128px))); margin: 0 auto; }
.sym { font-family: 'Noto Sans Symbols 2', 'Segoe UI Symbol', serif; }
.frak { font-family: 'UnifrakturCook', 'Cormorant SC', serif; font-weight: 700; }
/* UnifrakturCook has no Cyrillic: Bulgarian headings are set whole in Cormorant SC (letters and
   punctuation alike), while the Nightfold wordmark keeps its blackletter. */
:root[lang="bg"] .frak:not(.word):not(.foot-word) { font-family: 'Cormorant SC', serif; }
.lbl {
  font-family: var(--lf); font-weight: var(--lw); text-transform: uppercase;
  font-size: calc(var(--fs, 11px) * var(--ls)); letter-spacing: calc(var(--tr, 0.2em) * var(--lt));
}
.dia { width: 7px; height: 7px; transform: rotate(45deg); background: var(--moon); flex-shrink: 0; }

/* ---- logo mark: the seal with the purple moon (NfLogoMark v="n"), drawn in CSS ---- */
.mark { position: relative; width: var(--s); height: var(--s); flex-shrink: 0; }
.mark-tile {
  position: absolute; left: 0; top: 0; width: 220px; height: 220px; box-sizing: border-box;
  transform: scale(var(--k)); transform-origin: 0 0; border-radius: 50px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #1d2232 0%, #0e1018 58%, #090a0e 100%);
  border: 1px solid rgba(165, 185, 220, 0.22);
}
.mark-seal {
  position: absolute; left: 45px; top: 45px; width: 130px; height: 130px; box-sizing: border-box;
  transform: rotate(45deg); border: 3px solid oklch(0.82 0.07 245 / 0.9);
  background: radial-gradient(circle, oklch(0.42 0.13 300 / 0.65), oklch(0.20 0.05 290 / 0.3) 70%);
}
.mark-seal2 {
  position: absolute; left: 55px; top: 55px; width: 110px; height: 110px; box-sizing: border-box;
  transform: rotate(45deg); border: 1px solid oklch(0.82 0.07 245 / 0.38);
}
.mark-pt { position: absolute; width: 10px; height: 10px; transform: rotate(45deg); }
.mark-pt.n { left: 105px; top: 13.1px; background: oklch(0.86 0.07 245); }
.mark-pt.s { left: 105px; top: 196.9px; background: oklch(0.86 0.07 245); }
.mark-pt.w { left: 13.1px; top: 105px; background: oklch(0.80 0.10 300); }
.mark-pt.e { left: 196.9px; top: 105px; background: oklch(0.80 0.10 300); }
.mark-n {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-top: 8px;
  font-family: 'UnifrakturCook', serif; font-size: 92px; line-height: 1;
}
.mark-n span {
  opacity: 0.16; background: linear-gradient(180deg, #f3f6fb, oklch(0.84 0.07 245));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mark-moon { position: absolute; left: 0; top: 0; width: 220px; height: 220px; filter: drop-shadow(0 0 12px oklch(0.72 0.14 300 / 0.9)); }
.mark-moon::after {
  content: ""; position: absolute; left: 102px; top: 78px; width: 80px; height: 80px; border-radius: 50%;
  box-shadow: -24px -8px 0 0 oklch(0.86 0.10 300);
}

/* ---- header ---- */
.top {
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(180deg, rgba(7, 8, 11, 0.97), rgba(7, 8, 11, 0.88)); border-bottom: 1px solid var(--line);
}
.top .wrap { height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; color: #eef0f5; }
.brand:hover { color: #eef0f5; }
.brand .word { font-size: 28px; line-height: 1; }
.nav { display: flex; align-items: center; gap: clamp(16px, 3vw, 34px); }
.nav-link { --fs: 11px; --tr: 0.22em; color: #a7afbf; }
.nav-link:hover { color: #eef0f5; }

.lang { position: relative; }
.lang-btn {
  display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px; border: 0; cursor: pointer;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
  background: oklch(0.36 0.045 245 / 0.6); color: #eef2f8; white-space: nowrap; --fs: 10.5px; --tr: 0.16em;
}
.lang-btn:hover { background: oklch(0.42 0.05 245 / 0.75); }
.lang-btn .sym { font-size: 12px; letter-spacing: 0; }
.lang-btn .caret { font-size: 9px; color: #a7afbf; letter-spacing: 0; }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 230px; padding: 8px; z-index: 60;
  border: 1px solid rgba(150, 170, 200, 0.18); border-radius: 4px; background: #0d0f16;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.9); display: none; flex-direction: column; gap: 2px;
}
.lang-menu.open { display: flex; }
.lang-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; height: 40px; padding: 0 12px;
  border: 0; border-radius: 3px; cursor: pointer; background: transparent; text-align: left;
  font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 17px; color: #c9d0dc;
}
.lang-opt:hover { background: rgba(150, 170, 200, 0.1); }
.lang-opt[aria-selected="true"] { background: oklch(0.42 0.05 245 / 0.35); color: #eef0f5; }
.lang-opt .code { --fs: 9.5px; --tr: 0.16em; color: #7d8499; }
.lang-more { margin-top: 4px; padding: 10px 12px 6px; border-top: 1px solid var(--line); font-size: 14.5px; color: #7d8499; }

.cta {
  position: relative; display: flex; align-items: center; height: 40px; padding: 0 22px;
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 9px 100%, 0 50%);
  background: oklch(0.68 0.05 245 / 0.8); color: oklch(0.90 0.05 245); --fs: 11px; --tr: 0.18em;
}
.cta::before {
  content: ""; position: absolute; inset: 1px;
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 9px 100%, 0 50%);
  background: linear-gradient(180deg, #161a25, #0e1118);
}
.cta:hover { background: oklch(0.78 0.06 245); color: #f2f5fa; }
.cta span { position: relative; white-space: nowrap; }

/* ---- hero ---- */
.hero { position: relative; overflow: hidden; background: radial-gradient(120% 70% at 50% 0%, #1e2433 0%, #0f1119 46%, #07080b 100%); }
.hero .wrap {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 48px 40px;
  padding: clamp(44px, 7vw, 100px) 0 clamp(40px, 6vw, 84px);
}
.hero-copy { flex: 1 1 380px; max-width: 600px; min-width: 0; display: flex; flex-direction: column; gap: 26px; animation: nfRise 1.1s var(--ease) both; }
.eyebrow { display: flex; align-items: center; gap: 12px; color: oklch(0.78 0.06 245); --fs: 11.5px; --tr: 0.3em; }
.eyebrow .dia { box-shadow: 0 0 8px oklch(0.85 0.07 245); }
h1 { margin: 0; font-size: clamp(48px, 7vw, 100px); line-height: 0.98; color: #eef0f5; text-wrap: balance; }
.hero-p { max-width: 540px; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.45; color: #b9c0ce; text-wrap: pretty; }
.hero-note { font-size: 15.5px; color: #8a91a5; }

/* the store badges (official artwork, unmodified, same height) and the Discord lozenge */
.stores { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 4px; }
.stores.center { justify-content: center; margin-top: 10px; }
.store { display: block; padding: 2px 0; }
.store img { height: 48px; width: auto; }
.discord-band { border-top: 1px solid var(--line); background: #090a0e; padding: clamp(44px, 5vw, 64px) 0; text-align: center; }
.discord-row { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.discord-row .discord-p { margin: 0; max-width: 640px; text-wrap: pretty; }
.discord-p { font-size: clamp(17px, 1.3vw, 19px); color: #a7afbf; }
.discord-row.center { margin-top: 18px; }
.store:hover { filter: brightness(1.1); }

.loz {
  position: relative; display: block; width: 182px; height: 56px; color: inherit;
  --c: oklch(0.72 0.10 300 / 0.85); --g1: oklch(0.30 0.07 300); --g2: oklch(0.20 0.05 300); --in: oklch(0.75 0.10 300 / 0.3);
}
.loz:hover { filter: brightness(1.18); color: inherit; }
.loz .fin { position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; transform: rotate(45deg); background: var(--c); }
.loz .fin.l { left: 0; }
.loz .fin.r { right: 0; }
.loz .body {
  position: absolute; top: 0; bottom: 0; left: 11px; right: 11px; background: var(--c);
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
}
.loz .l1 {
  position: absolute; inset: 1px; background: linear-gradient(180deg, var(--g1), var(--g2));
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
}
.loz .l2 {
  position: absolute; inset: 4px 6px; background: var(--in);
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
}
.loz .l3 {
  position: absolute; inset: 5px 7px; background: linear-gradient(180deg, var(--g1), var(--g2));
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
}
.loz .txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0 20px; text-align: center; }
.loz .lead { --fs: 8.5px; --tr: 0.22em; color: #b6aec8; }
.loz .name { --fs: 13px; --tr: 0.1em; color: #f0ebf7; white-space: nowrap; display: flex; align-items: center; gap: 7px; }
.loz .name svg { width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; }

/* the three phones under the arch */
.hero-art { flex: 1.25 1 400px; min-width: 0; display: flex; justify-content: center; }
.stage { position: relative; width: 100%; max-width: 720px; aspect-ratio: 14 / 15; }
.stage-haze {
  position: absolute; left: 50%; top: 4%; width: 60%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle, oklch(0.42 0.13 300 / 0.35), oklch(0.40 0.08 245 / 0.12) 45%, transparent 70%);
  animation: nfHaze 6s ease-in-out infinite;
}
.arch {
  position: absolute; left: 14%; right: 14%; top: 1%; bottom: 6%; border: 1px solid oklch(0.80 0.11 300 / 0.5);
  border-radius: 50% 50% 2% 2% / 38% 38% 2% 2%;
  background: radial-gradient(80% 50% at 50% 28%, oklch(0.42 0.13 300 / 0.26), transparent 72%);
}
.arch2 { position: absolute; left: 17%; right: 17%; top: 3.5%; bottom: 8.5%; border: 1px solid oklch(0.80 0.11 300 / 0.2); border-radius: 50% 50% 2% 2% / 38% 38% 2% 2%; }
.arch-key { position: absolute; left: 50%; top: -0.6%; width: 14px; height: 14px; margin-left: -7px; transform: rotate(45deg); background: oklch(0.84 0.11 300); }
.stage-moon {
  position: absolute; left: 50%; top: 4%; width: 19%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle at 81% 58%, transparent 0 49.5%, oklch(0.86 0.07 245) 50.5%);
  filter: drop-shadow(0 0 18px oklch(0.74 0.10 245 / 0.9));
}
/* the phones stand in the arch: the sill clips them at its bottom edge, so they can be larger than the stage */
.sill { position: absolute; left: -30%; right: -30%; top: -10%; bottom: calc(6% + 1px); overflow: hidden; }
.sill .phone.l { left: 24%; }
.sill .phone.r { right: 24%; }
.phone { position: absolute; aspect-ratio: 9 / 19.2; transform-origin: 50% 100%; }
.phone.l { left: 2%; bottom: -20%; width: 25%; transform: rotate(-7deg); z-index: 2; opacity: 0.92; }
.phone.c { left: 50%; bottom: -30%; width: 30%; transform: translateX(-50%); z-index: 3; }
.phone.r { right: 2%; bottom: -20%; width: 25%; transform: rotate(7deg); z-index: 2; opacity: 0.92; }
.frame {
  position: absolute; inset: 0; border-radius: 26px; border: 1px solid rgba(165, 185, 220, 0.24); overflow: hidden;
  background: radial-gradient(130% 55% at 50% 0%, #171a24 0%, #0c0e14 52%, #0a0b0f 100%);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(180, 200, 235, 0.06);
  animation: nfFloat 7s ease-in-out -2s infinite alternate;
}
.phone.c .frame {
  border-radius: 28px; border-color: rgba(165, 185, 220, 0.3);
  background: radial-gradient(120% 62% at 50% 0%, #1e2433 0%, #0f1119 55%, #0a0b0f 100%);
  box-shadow: 0 50px 110px -30px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(180, 200, 235, 0.08);
  animation-duration: 8s; animation-delay: 0s;
}
.phone.r .frame { animation-duration: 7.5s; animation-delay: -4s; }
/* the top two thirds of each capture, enlarged, so the screen is legible at hero size */
.frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: inherit; }
.frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 3px #0a0b0f, inset 0 0 0 4px rgba(165, 185, 220, 0.18); pointer-events: none; }

/* ---- facts strip ---- */
.facts { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #07080b; }
.facts .wrap { display: flex; flex-wrap: wrap; gap: 0 32px; }
.fact { flex: 1 1 250px; min-width: 0; display: flex; gap: 14px; padding: 26px 0; }
.fact .sym { font-size: 20px; line-height: 1.2; color: var(--moon); }
.fact .sym.pack { color: oklch(0.84 0.10 300); }
.fact-t { --fs: 12px; --tr: 0.14em; color: #e3e7ef; }
:root[lang="bg"] .fact-t { --ls: 1.05; --tr: 0.1em; }
.fact-s { font-size: 16px; line-height: 1.45; color: #9aa2b4; margin-top: 4px; }

/* ---- section heads ---- */
.sec-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; max-width: 760px; margin: 0 auto; }
.sec-eyebrow { --fs: 11.5px; --tr: 0.3em; color: oklch(0.78 0.06 245); }
h2 { margin: 0; font-size: clamp(40px, 5vw, 66px); line-height: 1.05; color: #eef0f5; text-wrap: balance; }
.sec-lead { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.5; color: #a7afbf; text-wrap: pretty; }

/* ---- the mystery ---- */
.mystery { padding: clamp(72px, 9vw, 130px) 0; background: radial-gradient(70% 40% at 50% 0%, #11141d 0%, #07080b 70%); }
.mystery .wrap { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 64px); }

.tl { position: relative; max-width: 900px; width: 100%; margin: 0 auto; padding: 0 6px 56px; box-sizing: border-box; }
.tl-line { position: absolute; left: 6px; right: 6px; top: 8px; height: 1px; background: linear-gradient(90deg, transparent, rgba(150, 170, 200, 0.28) 10%, rgba(150, 170, 200, 0.28) 90%, transparent); }
.tl-row { position: relative; display: flex; justify-content: space-between; }
.tl-day { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; width: 40px; }
.tl-node { width: 15px; height: 15px; transform: rotate(45deg); background: var(--moon); transition: opacity 0.7s ease, box-shadow 0.7s ease; }
.tl-day.vii .tl-node { width: 17px; height: 17px; margin: -1px 0; background: oklch(0.84 0.08 35); transition-duration: 0.9s; }
.tl-num { --fs: 11px; --tr: 0.12em; color: #c9d0dc; }
.tl-day.vii .tl-num { color: oklch(0.86 0.07 35); }
.tl-cap { position: absolute; top: 52px; width: min(120px, 28vw); font-size: 14px; line-height: 1.3; color: #8a91a5; }
.tl-day.i .tl-cap { left: 0; text-align: left; }
.tl-day.iv .tl-cap { left: 50%; transform: translateX(-50%); text-align: center; }
.tl-day.vii .tl-cap { right: 0; text-align: right; color: oklch(0.84 0.08 35); }
.js .tl-node { opacity: 0.3; }
.js .tl-node.in { opacity: 1; }
.js .tl-day.vii .tl-node.in { box-shadow: 0 0 16px oklch(0.76 0.11 35); }

.cards { display: flex; flex-wrap: wrap; gap: 20px; }
.card { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--line-card); border-radius: 4px; background: var(--wash); overflow: hidden; }
.card-art {
  padding: 28px 24px 20px; display: flex; flex-direction: column; gap: 10px;
  background: radial-gradient(90% 70% at 50% 0%, #161a25 0%, transparent 80%);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.card-art.omens { gap: 12px; }
.card-art.reveal { padding: 34px 28px 20px; background: radial-gradient(90% 70% at 50% 0%, #1a1726 0%, transparent 80%); }
.js .card-art { opacity: 0.7; transform: scale(0.97); }
.js .card-art.in { opacity: 1; transform: none; }
.card-body { padding: 6px 24px 28px; display: flex; flex-direction: column; gap: 10px; }
.card-t { font-family: 'Cinzel', 'Cormorant SC', serif; font-weight: 600; font-size: 17px; letter-spacing: 0.04em; color: #eef0f5; }
.card-p { font-size: 17.5px; line-height: 1.5; color: #b9c0ce; text-wrap: pretty; }

.page { padding: 12px 14px; border-radius: 2px; }
.page.sharp { border: 1px solid oklch(0.70 0.06 245 / 0.45); background: linear-gradient(180deg, oklch(0.28 0.03 245 / 0.45), oklch(0.20 0.02 245 / 0.2)); }
.page.smudged { border: 1px dashed rgba(150, 170, 200, 0.32); background: rgba(150, 170, 200, 0.035); }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.page-lbl { --fs: 10px; --tr: 0.2em; color: #a7afbf; }
.tag {
  height: 20px; padding: 0 10px; display: inline-flex; align-items: center; white-space: nowrap; --fs: 9px; --tr: 0.14em;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 6px 100%, 0 50%);
}
.tag.sharp { background: oklch(0.58 0.07 245 / 0.5); color: #f2f5fa; }
.tag.smudged { background: rgba(150, 170, 200, 0.16); color: #aab2c1; }
.page-text { font-size: 16.5px; line-height: 1.45; color: #e6eaf1; margin-top: 6px; }
.page.smudged .page-text { color: #b3bac7; }
.lost { background: rgba(150, 170, 200, 0.15); color: #8f97a9; padding: 0 5px; border-radius: 2px; }

.omens-row { display: flex; gap: 8px; }
.omen { flex: 1; min-width: 0; padding: 10px 11px 12px; border-radius: 3px; border: 1px solid; }
.omen.seal { border-color: oklch(0.62 0.06 245 / 0.35); background: oklch(0.24 0.03 245 / 0.3); }
.omen.hunger { border-color: oklch(0.62 0.07 30 / 0.35); background: oklch(0.24 0.03 30 / 0.3); }
.omen.veil { border-color: oklch(0.62 0.05 200 / 0.35); background: oklch(0.24 0.03 200 / 0.3); }
.omen-l { --fs: 9px; --tr: 0.18em; color: #8a91a5; }
.omen-s { --fs: 13.5px; --tr: 0.05em; margin-top: 3px; text-transform: none; }
.omen.seal .omen-s { color: oklch(0.87 0.06 245); }
.omen.hunger .omen-s { color: oklch(0.85 0.07 30); }
.omen.veil .omen-s { color: oklch(0.87 0.05 200); }
.meter { display: flex; gap: 3px; margin-top: 8px; }
.meter span { flex: 1; height: 3px; background: rgba(150, 170, 200, 0.16); }
.omen.seal .meter .on { background: oklch(0.78 0.07 245); }
.omen.hunger .meter .on { background: oklch(0.76 0.08 30); }
.omen.veil .meter .on { background: oklch(0.78 0.06 200); }

.chron { position: relative; padding-left: 24px; display: flex; flex-direction: column; gap: 12px; }
.chron-line { position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: rgba(150, 170, 200, 0.2); }
.entry { position: relative; }
.entry .node { position: absolute; left: -23px; top: 4px; width: 9px; height: 9px; transform: rotate(45deg); background: oklch(0.80 0.07 245); }
.entry.mine { padding: 10px 12px; border: 1px dashed oklch(0.66 0.05 245 / 0.45); border-radius: 3px; background: rgba(150, 170, 200, 0.03); }
.entry.mine .node { top: 14px; box-sizing: border-box; border: 1px solid oklch(0.80 0.07 245); background: #0e1118; }
.entry-l { --fs: 10px; --tr: 0.2em; color: #a7afbf; }
.entry.mine .entry-l { color: oklch(0.83 0.06 245); }
.entry-t { font-size: 16px; line-height: 1.45; color: #d3d9e3; margin-top: 3px; }
.entry.mine .entry-t { color: #e6eaf1; }

.archf {
  position: relative; padding: 48px 18px 22px; text-align: center; border: 1px solid oklch(0.66 0.05 245 / 0.55);
  border-radius: 120px 120px 3px 3px / 90px 90px 3px 3px;
  background: radial-gradient(90% 60% at 50% 0%, oklch(0.32 0.05 245 / 0.5), transparent 75%);
}
.archf::before { content: ""; position: absolute; inset: -5px; border: 1px solid oklch(0.66 0.05 245 / 0.2); border-radius: 124px 124px 5px 5px / 94px 94px 5px 5px; pointer-events: none; }
.archf .sym { font-size: 24px; line-height: 1.2; color: oklch(0.86 0.07 245); }
.archf-t { font-size: 30px; line-height: 1.1; color: #eef0f5; margin-top: 6px; }
.archf-p { font-size: 16.5px; line-height: 1.45; color: #d3d9e3; margin-top: 12px; }
.archf-n { --fs: 10px; --tr: 0.2em; color: #a7afbf; margin-top: 12px; }

/* ---- the stories ---- */
.stories { padding: 0 0 clamp(72px, 9vw, 130px); }
.stories .wrap { display: flex; flex-direction: column; gap: clamp(32px, 4vw, 48px); }
.doors { display: flex; flex-wrap: wrap; gap: 18px; }
.door {
  position: relative; flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 470px; padding: 30px 28px; border: 1px solid rgba(150, 170, 200, 0.16); border-radius: 4px; overflow: hidden;
  color: inherit; transition: transform 0.5s var(--ease), border-color 0.5s ease;
}
.door:hover { transform: translateY(-6px); color: inherit; }
.door.ashen { background: radial-gradient(120% 70% at 50% 100%, #1b2232 0%, #0e1119 55%, #0a0b0f 100%); }
.door.ember { background: radial-gradient(120% 70% at 50% 100%, #2a1a14 0%, #130e0c 55%, #0a0b0f 100%); }
.door.tide { background: radial-gradient(120% 70% at 50% 100%, #122228 0%, #0c1317 55%, #0a0b0f 100%); }
.door.ashen:hover { border-color: oklch(0.72 0.07 245 / 0.6); }
.door.ember:hover { border-color: oklch(0.70 0.08 35 / 0.6); }
.door.tide:hover { border-color: oklch(0.70 0.06 200 / 0.6); }
.door-in { position: relative; display: flex; flex-direction: column; gap: 12px; }
.door .sym { font-size: 30px; line-height: 1; }
.door.ashen .sym { color: oklch(0.86 0.07 245); filter: drop-shadow(0 0 10px oklch(0.74 0.10 245 / 0.8)); }
.door.ember .sym { color: oklch(0.84 0.10 35); filter: drop-shadow(0 0 10px oklch(0.72 0.14 35 / 0.8)); }
.door.tide .sym { color: oklch(0.87 0.06 200); filter: drop-shadow(0 0 10px oklch(0.74 0.09 200 / 0.8)); }
.door-e { --fs: 10.5px; --tr: 0.26em; margin-top: 6px; }
.door.ashen .door-e { color: oklch(0.76 0.05 245); }
.door.ember .door-e { color: oklch(0.80 0.07 35); }
.door.tide .door-e { color: oklch(0.78 0.05 200); }
.door-h { font-size: 42px; line-height: 1; color: #eef0f5; }
.door-p { font-size: 17.5px; line-height: 1.5; color: #b9c0ce; text-wrap: pretty; }
.more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; padding: 22px 24px; border: 1px dashed rgba(150, 170, 200, 0.3); border-radius: 4px; text-align: center; }
.more .sym { font-size: 18px; line-height: 1; color: var(--moon); }
.more-t { font-size: 17.5px; line-height: 1.45; color: #a7afbf; }

/* ---- join ---- */
.join {
  position: relative; overflow: hidden; padding: clamp(80px, 11vw, 150px) 0; border-top: 1px solid var(--line);
  background: radial-gradient(90% 75% at 50% 100%, #1b1f2e 0%, #0d0f16 50%, #07080b 100%);
}
.join .wrap { position: relative; width: min(760px, calc(100% - clamp(40px, 10vw, 128px))); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.join .sec-eyebrow { margin-top: 8px; }
.join h2 { font-size: clamp(44px, 6vw, 80px); line-height: 1.02; }
.join .sec-lead { max-width: 520px; color: #b9c0ce; }

/* the quiet promise line between the join section and the footer */

/* ---- footer ---- */
footer { margin-top: auto; border-top: 1px solid var(--line); padding: 34px 0 40px; background: #07080b; }
footer .wrap { display: flex; flex-direction: column; gap: 22px; }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
.foot-brand { display: flex; align-items: center; gap: 12px; }
.foot-word { font-size: 24px; line-height: 1; color: #eef0f5; }
.foot-tag { --fs: 9px; --tr: 0.14em; color: oklch(0.76 0.05 245); margin-top: 3px; }
.foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(16px, 3vw, 32px); }
.foot-links a { --fs: 10.5px; --tr: 0.18em; color: #a7afbf; }
.foot-links a:hover { color: #eef0f5; }
.foot-links a.mail { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 16px; letter-spacing: 0.06em; text-transform: none; }
.foot-copy { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 14px; color: #6c7388; }

/* ---- sparks (drawn by site.js) ---- */
.sparks { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sparks .haze { position: absolute; inset: 0; animation: nfHaze 7s ease-in-out infinite; }
.spark { position: absolute; opacity: 0; will-change: transform, opacity; }
.spark i { display: block; border-radius: 50%; }

@keyframes nfSparkRise { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 14% { opacity: var(--o); } 72% { opacity: calc(var(--o) * 0.6); } 100% { transform: translate3d(var(--dx), var(--rise), 0); opacity: 0; } }
@keyframes nfSparkSway { from { transform: translateX(-7px); } to { transform: translateX(7px); } }
@keyframes nfSparkFlicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes nfHaze { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
@keyframes nfRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes nfFloat { from { transform: translateY(0); } to { transform: translateY(-12px); } }

/* ---- small screens ---- */
@media (max-width: 719px) {
  .brand .word, .nav-link { display: none; }
  .store img { height: 40px; }
  .door { min-height: 260px; }
}

/* ---- motion off ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .spark, .spark i, .sparks .haze, .hero-copy, .frame, .stage-haze { animation: none !important; }
  .spark { opacity: 0.3 !important; }
  .js .tl-node { opacity: 1; transition: none; }
  .js .card-art { opacity: 1; transform: none; transition: none; }
  .door { transition: none; }
}