/* Blackmead studio site. Same design language as tarnishedcrown.com (dark field, Cinzel display,
   film grain, drifting embers, slanted dividers), recoloured to the Blackmead metals: pewter, bone, mead amber. */
:root {
  color-scheme: dark;
  --bg: #0b0a09;
  --panel: #13110f;
  --card: #1a1714;
  --line: #2c2722;
  --pewter: #b8ae9c;
  --bone: #e8dfcc;
  --text: #cfc7b8;
  --dim: #8d8474;
  --amber: #d9a441;
  --display: 'Cinzel', 'Palatino Linotype', Georgia, serif;
  --body: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1rem/1.7 var(--body);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
p { text-wrap: pretty; }
a { color: inherit; }
::selection { background: rgb(217 164 65 / 30%); color: #fff; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; border-radius: 4px; }

.grain {
  position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ── Hero ── */
.hero {
  position: relative; overflow: hidden;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 6rem 1.5rem 5rem; text-align: center;
}
.medallion {
  position: relative; width: min(340px, 64vw);
  filter: drop-shadow(0 24px 48px rgb(0 0 0 / 65%));
  animation: rise 1.4s var(--ease) both;
}
h1 { margin: 2.25rem 0 0; line-height: 0; }
.wordmark {
  position: relative; width: min(560px, 86vw); margin: 0 auto;
  filter: drop-shadow(0 6px 18px rgb(0 0 0 / 70%));
  animation: rise 1.4s 0.15s var(--ease) both;
}
.tagline {
  position: relative; margin: 1.5rem 0 0;
  font: 400 0.8rem/1 var(--display); letter-spacing: 0.42em; text-transform: uppercase; color: var(--dim);
  animation: rise 1.4s 0.3s var(--ease) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

.embers span {
  position: absolute; bottom: -6px; left: var(--x); width: 3px; height: 3px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 6px 2px rgb(217 164 65 / 55%);
  animation: ember var(--d) linear var(--w) infinite; opacity: 0;
}
@keyframes ember {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  10% { opacity: 0.9; }
  90% { opacity: 0.5; }
  100% { transform: translate(40px, -100svh) scale(0); opacity: 0; }
}

/* ── Slanted divider (as on the Tarnished Crown site) ── */
.slant { margin-top: -1px; line-height: 0; }
.slant svg { width: 100%; height: 60px; fill: var(--panel); }

/* ── Now brewing ── */
.brewing { background: var(--panel); padding: 3rem 1.5rem 6rem; }
.eyebrow {
  margin: 0 0 2rem; text-align: center;
  font: 400 0.75rem/1 var(--display); letter-spacing: 0.42em; text-transform: uppercase; color: var(--amber);
}
.game {
  max-width: 960px; margin: 0 auto; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}
.game:hover {
  border-color: rgb(217 164 65 / 40%); transform: translateY(-3px);
  box-shadow: 0 12px 40px rgb(0 0 0 / 45%), 0 0 24px rgb(217 164 65 / 8%);
}
.game-art { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: center 40%; }
.game-body { position: relative; padding: 0 2.5rem 2.5rem; text-align: center; }
.game-logo {
  width: 84px; height: 84px; margin: -42px auto 1.25rem; border-radius: 50%;
  border: 2px solid var(--card); box-shadow: 0 0 24px rgb(240 185 11 / 35%);
}
.game h2 {
  margin: 0 0 1rem; font: 700 clamp(1.8rem, 4vw, 2.6rem)/1.1 var(--display); letter-spacing: 0.04em;
  color: #f0b90b; text-shadow: 0 0 20px rgb(240 185 11 / 35%), 0 2px 4px rgb(0 0 0 / 80%);
}
.game p { max-width: 36rem; margin: 0 auto 2rem; color: var(--dim); }
.actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.btn {
  display: inline-block; padding: 0.9rem 1.8rem; border-radius: 6px; text-decoration: none;
  font: 700 0.75rem/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase;
  transition: background 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.25s;
}
.btn-solid { background: var(--bone); color: #14110e; box-shadow: 0 0 22px rgb(232 223 204 / 16%); }
.btn-solid:hover { background: #fff; }
.btn-ghost { border: 1px solid var(--line); color: var(--text); }
.btn-ghost:hover { border-color: var(--pewter); color: var(--bone); }

/* ── The name ── */
.mead { max-width: 40rem; margin: 0 auto; padding: 7rem 1.5rem 6rem; text-align: center; }
.runes {
  margin: 0 0 2.5rem; font: 400 1.05rem/1.6 'Noto Sans Runic', 'Segoe UI Historic', sans-serif;
  letter-spacing: 0.35em; color: var(--pewter); opacity: 0.75;
  white-space: nowrap;
}
.mead h2 { margin: 0 0 1.5rem; font: italic 400 clamp(2rem, 4.5vw, 2.8rem)/1.15 'EB Garamond', Georgia, serif; color: var(--bone); }
.mead h2 small {
  display: block; margin-top: 0.75rem;
  font: 400 0.75rem/1 var(--display); letter-spacing: 0.42em; text-transform: uppercase; color: var(--dim);
}
.mead p { margin: 0; color: var(--dim); font-size: 1.05rem; }

/* ── Footer ── */
footer {
  position: relative; border-top: 1px solid var(--line); background: var(--panel);
  padding: 3rem 1.5rem; display: flex; flex-direction: column; align-items: center; gap: 1.25rem;
  font-size: 0.85rem; color: var(--dim);
}
footer::before {
  content: ''; position: absolute; inset: -1px 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, rgb(217 164 65 / 35%), transparent);
}
footer nav { display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center; }
footer a { text-decoration: none; transition: color 0.2s; }
footer a:hover { color: var(--bone); }
footer p { margin: 0; font-size: 0.75rem; letter-spacing: 0.1em; }

@media (max-width: 640px) {
  .game-body { padding: 0 1.5rem 2rem; }
  .game-art { aspect-ratio: 16 / 10; }
  .tagline, .eyebrow, .mead h2 small { letter-spacing: 0.3em; }
  .runes { font-size: min(1.05rem, 3.4vw); letter-spacing: 0.12em; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .embers { display: none; }
  .game:hover { transform: none; }
}