/* brand.css — the shared design language for the whole dance.alk.me world.
   Extracted from the game so the game (night / the come-up) and the guide
   (day / the morning-after wisdom) read as ONE world at two times of day.
   The ACCENTS (brass + oxblood) and the mono-label system are the throughline —
   they stay constant across day and night. Only the surface flips. */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;600;800&family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* ── the constant throughline: accents that never change day↔night ── */
  --brass: #cfa253; --brass-hi: #f4d488; --brass-lo: #8a6a2a; --brass-dk: #5e451c;
  --ox: #5c1f1f; --ox-hi: #8a2f2c; --ox-lo: #3a1614;
  --paper: #e9dcc0; --cream: #f6efe0; --ink: #0b0a08;
  /* secondary UI accents (used sparingly, per building/section) */
  --green: #8fae72; --blue: #61afef; --plum: #c678dd; --clay: #c96f4a;

  /* ── type: one system. mono LABELS are the loudest shared signal. ── */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif; /* UI + energy */
  --font-editorial: "Fraunces", Georgia, serif;                 /* the premium serif voice */
  --font-mono: "Space Mono", ui-monospace, monospace;           /* ALL-CAPS tracked labels */

  /* ── shape + depth ── */
  --r-pill: 999px; --r-card: 18px; --r-callout: 13px;
  --shadow-card: 0 6px 40px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 4px 20px color-mix(in srgb, var(--brass) 40%, transparent);
  --hair: color-mix(in srgb, var(--brass) 24%, transparent); /* hairline rules */
}

/* ── NIGHT — the game surface (the come-up) ── */
.night {
  --bg: #0b0a08; --bg-2: #14110c; --bg-3: #1b160f;
  --fg: #e9dcc0; --fg-muted: #9a9079;
  background: var(--bg); color: var(--fg);
}
/* ── DAY — the guide surface (the morning-after) ── */
.day {
  --bg: #e9dcc0; --bg-2: #e3d6ba; --bg-3: #efe6cf;
  --fg: #1a140c; --fg-muted: #6b5f49;
  background: var(--bg); color: var(--fg);
}

/* ── the mono label — the single strongest cohesion device ── */
.label {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass);
}

/* ── the brass "LEVEL" badge (already in the game + guide) ── */
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: #12100d;
  background: var(--brass); border-radius: 8px; padding: 5px 11px;
}

/* ── the gold pill button — the game's primary CTA ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display); font-weight: 800; font-size: 16px;
  letter-spacing: 0.02em; text-decoration: none;
  color: #12100d; background: var(--brass);
  border: 0; border-radius: var(--r-pill); padding: 13px 30px; cursor: pointer;
  box-shadow: var(--shadow-glow);
  transition: transform 0.08s ease, box-shadow 0.2s ease;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn.ghost { background: transparent; color: var(--fg); box-shadow: none; border: 1px solid var(--hair); }
.btn.blue { background: var(--blue); box-shadow: 0 4px 20px rgba(97, 175, 239, 0.4); }

/* ── the card — game shop/grade card + guide callout share this chassis ── */
.card {
  background: color-mix(in srgb, var(--bg-2) 92%, transparent);
  border: 1px solid var(--hair);
  border-top: 3px solid var(--accent, var(--brass));
  border-radius: var(--r-card); padding: 18px;
  box-shadow: var(--shadow-card);
}

/* ── the callout — the guide's "where people slip" / the game's readouts ── */
.callout {
  border-left: 3px solid var(--accent, var(--brass));
  background: color-mix(in srgb, var(--accent, var(--brass)) 8%, transparent);
  border-radius: var(--r-callout); padding: 12px 14px;
}

/* ── THE HOT EDGE — the game's signature: one brass rim catches the light.
     Use on cards/images/nav to carry the game's "spotlight" into the site. ── */
.hot-edge { position: relative; }
.hot-edge::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--brass-hi), transparent);
  border-radius: inherit; opacity: 0.9;
}

/* ── editorial display (the guide voice), with the oxblood italic accent ── */
.editorial { font-family: var(--font-editorial); font-weight: 400; line-height: 1.05; }
.editorial em, .accent { font-style: italic; color: var(--ox-hi); }
.day .accent { color: var(--ox); }

/* ── FROM THE FLOOR — the first-person "learned it the hard way" aside. The
     guide's signature personal beat: plain teaching, then a real story from
     someone who paid for the lesson. Keeps the voice contained + recognizable. */
.from-floor {
  display: flex; gap: 14px; align-items: flex-start;
  border-left: 3px solid var(--ox-hi);
  background: color-mix(in srgb, var(--ox-hi) 9%, transparent);
  border-radius: var(--r-callout); padding: 15px 18px; margin: 22px 0;
}
.day .from-floor { background: color-mix(in srgb, var(--ox) 7%, transparent); border-left-color: var(--ox); }
.from-floor .ff-face {
  flex: none; width: 46px; height: 58px; border-radius: 12px;
  object-fit: cover; object-position: top center;
  background: color-mix(in srgb, var(--ox) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--ox-hi) 40%, transparent);
}
.from-floor .ff-label {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ox-hi);
  display: block; margin-bottom: 5px;
}
.day .from-floor .ff-label { color: var(--ox); }
.from-floor .ff-quote { font-family: var(--font-editorial); font-style: italic; font-size: 16px; line-height: 1.45; color: var(--fg); }
.from-floor .ff-quote b { font-style: normal; font-weight: 600; }

/* ── the CREDIT — discreet "who's behind this". Discoverable, not load-bearing:
     ties the anonymous author voice to a real name for anyone who looks. ── */
.credit { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--fg-muted); }
.credit a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--hair); }
.credit a:hover { color: var(--brass); border-bottom-color: color-mix(in srgb, var(--brass) 50%, transparent); }

/* ── the section STAKE — a one-line first-person "why this one matters" ── */
.section-stake { font-family: var(--font-editorial); font-style: italic; font-size: 18px; line-height: 1.4; color: var(--ox-hi); margin: 4px 0 16px; }
.day .section-stake { color: var(--ox); }

/* ── the ORIGIN note — the "why I made this" beat, the most personal moment ── */
.origin-note { display: flex; gap: 18px; align-items: flex-start; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: 22px 0; margin: 6px 0 8px; }
.origin-note .on-face { flex: none; width: 64px; height: 84px; border-radius: 14px; object-fit: cover; object-position: top center; border: 1px solid var(--hair); }
.origin-note .on-body p { font-family: var(--font-editorial); font-size: 18px; line-height: 1.5; color: var(--fg); margin: 0; }
.origin-note .on-body .label { display: block; margin-bottom: 8px; }
.origin-note .on-body .sign { display: block; margin-top: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--fg-muted); font-style: normal; }

/* ── GRAIN — a shared film-grain so paper (day) + night city feel like the
     same material. Drop <div class="grain"></div> as a fixed overlay. ── */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 9; opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
}