/* saga — site styles. Color tokens mirrored from brain/brand-assets/tokens.css (source
 * of truth); if a value here disagrees with tokens.css, tokens.css wins — fix this file.
 * Site text = Nunito (Saaim, 2026-07-13; same family as the app). Le Murmure = wordmark only. */

@font-face {
  font-family: 'Le Murmure';
  src: url('/assets/lemurmure-regular.woff2') format('woff2');
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: 'Nunito';
  src: url('/assets/nunito-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('/assets/nunito-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('/assets/nunito-800.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #ffffff;
  --wash-deep: #f17869;
  --wash: #f59f94;
  --wash-pale: #fbd6d0;
  --red: #eb3e28;
  --red-press: #c22d1a;
  --ink: #1c1917;
  --display: 'Le Murmure', 'Arial Narrow', sans-serif;
  --body: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --wash-gradient: linear-gradient(180deg, var(--red) 0%, var(--red) 6%,
    #ee5b48 16%, var(--wash-deep) 30%, var(--wash) 48%, var(--wash-pale) 70%,
    var(--paper) 100%);
}

/* one rule for the whole site: every page paints the SAME full-viewport wash
   from the top (identical to home), then paper. Overscroll canvas is solid red. */
html { background: var(--red); }
body {
  background: var(--wash-gradient) no-repeat top center / 100% 100svh, var(--paper);
  min-height: 100svh;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--red); color: var(--paper); }

a { color: var(--red); text-decoration: none; font-weight: 600; }
a:hover, a:focus-visible { text-decoration: underline; }

/* ---------- top bar: everything lives here ---------- */

.topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.25rem;
  z-index: 5;
  flex-wrap: wrap;
}
.subpage .topbar { position: static; }

.topbar .wordlink {
  font-family: var(--display);
  font-size: 1.6rem;
  color: #fff;
  line-height: 1;
  margin-right: auto;
  font-weight: 400;
}
.topbar .wordlink:hover { text-decoration: none; }

.topbar .navlink {
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 0.45rem 0.95rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
  transition: background 0.15s ease, transform 0.12s ease;
}
.topbar .navlink:hover { background: rgba(255, 255, 255, 0.28); transform: translateY(-1px); text-decoration: none; }

.iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.18);
  transition: background 0.15s ease, transform 0.12s ease;
}
.iconbtn img { width: 18px; height: 18px; display: block; }
.iconbtn:hover { background: rgba(255, 255, 255, 0.3); transform: translateY(-1px); text-decoration: none; }

.storebadge img { height: 34px; width: auto; display: block; }
.storebadge:hover { text-decoration: none; }

.topbar .make-mini {
  background: #fff;
  color: var(--ink);
  font-weight: 800;
  font-size: 14px;
  padding: 0 1.1rem;
  height: 36px;
  display: inline-flex;
  align-items: center;
  position: relative;
  border-radius: 12px;
  transition: transform 0.12s ease;
}
.topbar .make-mini::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(28, 25, 23, 0.35);
  border-radius: 8px;
  pointer-events: none;
}
.topbar .make-mini:hover { transform: translateY(-1px); text-decoration: none; }
.topbar .make-mini:active { transform: translateY(1px); }

/* ---------- the cover: logo + ONE button ---------- */

.cover {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  padding: 5rem 1.25rem 3rem;
  box-sizing: border-box;
}

.wordmark {
  font-family: var(--display);
  font-weight: 400;
  font-size: min(38vw, 26rem);
  line-height: 0.8;
  color: var(--paper);
  letter-spacing: -0.01em;
  user-select: none;
  display: flex;
  overflow: hidden;
  padding: 0.05em 0.04em;
  margin: 0;
}
.wordmark span {
  display: inline-block;
  transform: translateY(112%);
  animation: rise 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.wordmark span:nth-child(2) { animation-delay: 0.07s; }
.wordmark span:nth-child(3) { animation-delay: 0.14s; }
.wordmark span:nth-child(4) { animation-delay: 0.21s; }
@keyframes rise { to { transform: translateY(0); } }

/* THE button — flat, inner hairline border with a gap, diamond ornaments.
   (shape ref: Saaim 2026-07-13; ours in red / Nunito / white) */
.make-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  background: var(--red);
  color: var(--paper);
  font-family: var(--body);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: 0.01em;
  width: 320px;
  height: 66px;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: transform 0.12s ease;
}
.make-btn::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  border-radius: 14px;
  pointer-events: none;
}
.make-btn .dia {
  font-size: 0.75rem;
  line-height: 1;
  transition: transform 0.25s ease;
}
.make-btn:hover { text-decoration: none; transform: scale(1.03); }
.make-btn:hover .dia { transform: rotate(135deg); }
.make-btn:active { transform: scale(0.97); }

/* ---------- subpages ---------- */

.subpage .band {
  padding: 0 1.25rem 2.5rem;
}
.subpage .band .inner { max-width: 34rem; margin: 0 auto; }


h1.page-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3.5rem, 14vw, 6.5rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
  margin: 1.5rem 0 0;
  color: var(--paper);
}
.band .sub { color: #fff; opacity: 0.92; font-weight: 600; font-size: 14px; }

main {
  padding: 0 1.25rem 4rem;
  max-width: 34rem;
  margin: 0 auto;
}
section { margin-top: 3.5rem; }

.eyebrow {
  color: var(--red);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  margin: 0 0 1rem;
}
.stanza { margin: 0 0 1.5rem; max-width: 30rem; }
.stanza p { margin: 0; }
em { font-style: normal; color: var(--red); font-weight: 600; }

.episode { margin-top: 3.5rem; }
.episode .num {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.6rem, 10vw, 4rem);
  line-height: 1;
  margin: 0 0 1rem;
}

/* ---------- learn cards: pinned reading + updates ---------- */

.card {
  display: block;
  background: var(--paper);
  border: 1px solid #f0e6e2;
  border-radius: 14px;
  padding: 1.25rem 1.4rem;
  margin: 0 0 0.9rem;
  color: var(--ink);
  font-weight: 400;
  transition: border-color 0.15s ease, transform 0.12s ease;
}
a.card:hover { border-color: var(--wash); transform: translateY(-1px); text-decoration: none; }
.card-label {
  display: block;
  color: var(--red);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  margin-bottom: 0.25rem;
}
.card-title { display: block; font-weight: 800; font-size: 1.05rem; margin-bottom: 0.35rem; }
.card-desc { display: block; opacity: 0.8; }
.card-read { display: block; margin-top: 0.6rem; color: var(--red); font-weight: 600; font-size: 13px; }

/* ---------- footer: legal only ---------- */

footer {
  border-top: 1px solid #f3ebe8;
  margin-top: 4rem;
  padding: 1.75rem 1.25rem 2.5rem;
}
footer .inner {
  max-width: 44rem;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0;
  font-size: 12.5px;
  white-space: nowrap;
  overflow-x: auto;
}
footer .inner > * + *::before {
  content: "·";
  margin: 0 0.65rem;
  opacity: 0.45;
}
footer span, footer a { color: var(--ink); opacity: 0.55; font-weight: 600; }
footer a:hover { color: var(--red); opacity: 1; text-decoration: none; }

/* ---------- intro gate ---------- */

#gate {
  position: fixed;
  inset: 0;
  background: var(--red);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 8vw, 5rem);
  flex-wrap: wrap;
  padding: 1.25rem;
  box-sizing: border-box;
}
#gate .word {
  font-family: var(--display);
  font-size: clamp(3.5rem, 14vw, 8rem);
  color: var(--paper);
  line-height: 1;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.1em 0.15em;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
#gate .word:hover { transform: scale(1.06); }
#gate .word.close { opacity: 0.55; }
#gate .word.close:hover { opacity: 1; }

#intro {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 49;
  display: none;
  align-items: center;
  justify-content: center;
}
#intro video { height: 100%; max-width: 100%; object-fit: contain; }
#intro .skip {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  color: #fff;
  opacity: 0.6;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--body);
  font-weight: 600;
  font-size: 13px;
  z-index: 51;
}
#intro .skip:hover { opacity: 1; }

.fade-out { animation: fadeout 0.6s ease forwards; }
@keyframes fadeout { to { opacity: 0; visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  .wordmark span { transform: none; animation: none; }
  .make-btn::after { animation: none; display: none; }
  .make-btn:hover, .make-btn:active { transform: none; }
}