/* Dungeon My Dungeon — candlelit gothic identity. Single committed dark world. */

:root {
  --bg:        #0c0a09;
  --bg-raised: #16110d;
  --panel:     #1c1610;
  --parchment: #e7d9ba;
  --parch-ink: #2a2118;
  --ember:     #d98a3d;
  --ember-lit: #f0a955;
  --oxblood:   #8a2b2e;
  --text:      #e8ded0;
  --dim:       #a89a86;
  --faint:     #6f6558;
  --line:      rgba(231, 217, 186, 0.13);
  --line-soft: rgba(231, 217, 186, 0.07);

  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --body: "EB Garamond", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  --measure: 66ch;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: clamp(1.05rem, 0.6vw + 0.95rem, 1.2rem);
  line-height: 1.65;
  /* candle bloom + fine grain over warm near-black */
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(217, 138, 61, 0.14), transparent 55%),
    radial-gradient(90% 60% at 50% 0%, rgba(138, 43, 46, 0.10), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  background-attachment: fixed, fixed, fixed;
  background-repeat: no-repeat, no-repeat, repeat;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: 100%; max-width: 74rem; margin: 0 auto; padding: 0 1.6rem; }
.col { max-width: var(--measure); }

a { color: var(--ember); text-decoration: none; }
a:hover { color: var(--ember-lit); }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 2px; }

/* ---------- eyebrow / labels ---------- */
.eyebrow {
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ember);
  font-weight: 600;
  margin: 0;
}

/* ---------- header ---------- */
.site-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line-soft);
}
.brand {
  font-family: var(--display); font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; font-size: 0.95rem; color: var(--text);
}
.brand b { color: var(--ember); font-weight: 700; }
.nav { display: flex; gap: 1.6rem; font-family: var(--display); font-size: 0.75rem;
  letter-spacing: 0.18em; text-transform: uppercase; }
.nav a { color: var(--dim); }
.nav a:hover { color: var(--text); }

/* ---------- hero ---------- */
.hero { padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(2.5rem, 6vw, 4.5rem); text-align: center; }
.hero .eyebrow { margin-bottom: 1.4rem; }
.hero h1 {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(2.7rem, 8vw, 5.6rem);
  line-height: 0.98; letter-spacing: 0.01em; margin: 0;
  text-wrap: balance; color: #f4ecdd;
  text-shadow: 0 0 44px rgba(217, 138, 61, 0.28), 0 2px 2px rgba(0,0,0,0.6);
}
.hero h1 .of { display: block; font-size: 0.42em; font-weight: 700; letter-spacing: 0.2em;
  color: var(--ember); margin: 0.35em 0; }

.narration {
  max-width: 34ch; margin: 2.2rem auto 0; font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.5; color: var(--parchment);
  position: relative;
}
.narration::before, .narration::after { color: var(--oxblood); font-style: normal; }
.narration::before { content: "\201C"; }
.narration::after { content: "\201D"; }

.subhead { max-width: 40ch; margin: 1.8rem auto 0; color: var(--dim); font-size: 1.12rem; }

.cta-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2.4rem; }

.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--display); font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; font-size: 0.82rem;
  padding: 0.95rem 1.7rem; border-radius: 2px; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn-primary {
  background: linear-gradient(180deg, var(--ember-lit), var(--ember));
  color: #1a0f04; border: 1px solid var(--ember-lit);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.3), 0 10px 30px -12px rgba(217,138,61,0.7);
}
.btn-primary:hover { color: #1a0f04; transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.3), 0 16px 40px -12px rgba(217,138,61,0.85); }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn-ghost:hover { color: var(--text); border-color: var(--ember); transform: translateY(-2px); }

/* ---------- section scaffold ---------- */
section { padding: clamp(3rem, 7vw, 5.5rem) 0; border-top: 1px solid var(--line-soft); }
.section-head { text-align: center; margin-bottom: 3rem; }
.section-head h2 {
  font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 4vw, 2.4rem);
  margin: 0.8rem 0 0; letter-spacing: 0.02em; text-wrap: balance; color: #f2e9d8;
}
.section-head p { max-width: 48ch; margin: 0.9rem auto 0; color: var(--dim); }

/* ---------- ledger (features as a kept book) ---------- */
.ledger { max-width: 60rem; margin: 0 auto; border-top: 1px solid var(--line); }
.ledger-row {
  display: grid; grid-template-columns: minmax(9rem, 15rem) 1fr; gap: 1.5rem 2.5rem;
  padding: 1.6rem 0.4rem; border-bottom: 1px solid var(--line-soft); align-items: baseline;
}
.ledger-row dt {
  font-family: var(--display); font-weight: 700; font-size: 1.02rem;
  letter-spacing: 0.04em; color: var(--ember); margin: 0;
}
.ledger-row dd { margin: 0; color: var(--text); }
.ledger-row dd b { color: #f2e9d8; font-weight: 600; }

/* ---------- shared icon ---------- */
.icon { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- how a turn works ---------- */
.turn { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 62rem; margin: 0 auto; align-items: start; }
.turn-step { text-align: center; padding: 1.4rem 1.1rem; position: relative; }
.turn-step .icon { width: 42px; height: 42px; color: var(--ember); margin: 0 auto 1.1rem; display: block; }
.turn-step h3 { font-family: var(--display); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: #f2e9d8; margin: 0 0 0.55rem; }
.turn-step p { margin: 0; color: var(--dim); font-size: 0.98rem; }
.turn-step:not(:last-child)::after { content: "\203A"; position: absolute; top: 1.7rem; right: -0.6rem;
  color: var(--faint); font-size: 1.6rem; line-height: 1; }
@media (max-width: 720px) { .turn { grid-template-columns: 1fr; gap: 0.4rem; }
  .turn-step:not(:last-child)::after { content: ""; } }

/* ---------- systems grid (hairline-ruled, ledger-like) ---------- */
.systems { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft);
  max-width: 66rem; margin: 0 auto; }
.system { background: var(--bg); padding: 1.9rem 1.7rem; }
.system .icon { width: 30px; height: 30px; color: var(--ember); margin-bottom: 1.1rem; display: block; }
.system h3 { font-family: var(--display); font-weight: 700; font-size: 1.02rem; color: #f2e9d8;
  margin: 0 0 0.5rem; letter-spacing: 0.03em; }
.system p { margin: 0; color: var(--dim); font-size: 0.95rem; line-height: 1.55; }

/* ---------- steps ---------- */
.steps { display: grid; gap: 1.2rem; max-width: 52rem; margin: 0 auto; counter-reset: step; }
.step {
  display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; align-items: baseline;
  padding: 1.5rem 1.6rem; background: var(--bg-raised); border: 1px solid var(--line-soft);
  border-radius: 3px;
}
.step::before {
  counter-increment: step; content: counter(step, upper-roman);
  font-family: var(--display); font-weight: 900; font-size: 1.4rem; color: var(--oxblood);
  min-width: 2ch; text-align: center; line-height: 1;
}
.step h3 { font-family: var(--display); font-weight: 700; font-size: 1.05rem; margin: 0 0 0.3rem;
  letter-spacing: 0.03em; color: #f2e9d8; }
.step p { margin: 0; color: var(--dim); font-size: 1rem; }
code, .cmd { font-family: var(--mono); font-size: 0.86em; color: var(--ember-lit);
  background: rgba(217,138,61,0.10); padding: 0.12em 0.45em; border-radius: 3px;
  border: 1px solid rgba(217,138,61,0.18); }

/* ---------- worlds strip ---------- */
.worlds { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; max-width: 54rem; margin: 0 auto; }
.world-tag {
  font-family: var(--display); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dim); border: 1px solid var(--line); padding: 0.5rem 0.9rem; border-radius: 2px;
}

/* ---------- closing ---------- */
.closing { text-align: center; }
.closing h2 { font-family: var(--display); font-weight: 900; font-size: clamp(1.8rem, 5vw, 3rem);
  color: #f4ecdd; margin: 0 0 1.6rem; text-shadow: 0 0 40px rgba(217,138,61,0.22); }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--line-soft); padding: 2.5rem 0 3.5rem; color: var(--faint);
  font-size: 0.9rem; }
.foot-inner { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; }
.foot-links { display: flex; gap: 1.6rem; }
.site-foot a { color: var(--dim); }
.site-foot a:hover { color: var(--ember); }

/* ---------- document pages (privacy / terms) ---------- */
.doc { padding: clamp(2.5rem, 6vw, 4.5rem) 0 5rem; }
.doc .col { margin: 0 auto; }
.doc h1 { font-family: var(--display); font-weight: 900; font-size: clamp(2rem, 5vw, 3rem);
  color: #f4ecdd; margin: 0.6rem 0 0.4rem; text-wrap: balance; }
.doc .effective { color: var(--faint); font-size: 0.9rem; margin: 0 0 2.2rem;
  font-family: var(--mono); letter-spacing: 0.02em; }
.doc h2 { font-family: var(--display); font-weight: 700; font-size: 1.3rem; color: var(--ember);
  margin: 2.6rem 0 0.6rem; letter-spacing: 0.02em; }
.doc p, .doc li { color: var(--text); }
.doc .lead { font-size: 1.15rem; color: var(--parchment); border-left: 2px solid var(--oxblood);
  padding-left: 1.2rem; }
.doc ul { padding-left: 1.2rem; }
.doc li { margin: 0.5rem 0; }
.doc strong { color: #f2e9d8; }
.back { display: inline-block; margin-bottom: 1.5rem; font-family: var(--display);
  font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }

@media (max-width: 640px) {
  .ledger-row { grid-template-columns: 1fr; gap: 0.4rem; }
  .nav { gap: 1.1rem; }
  .foot-inner { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero h1 { animation: flicker 6s ease-in-out infinite; }
  @keyframes flicker {
    0%, 100% { text-shadow: 0 0 44px rgba(217,138,61,0.28), 0 2px 2px rgba(0,0,0,0.6); }
    48% { text-shadow: 0 0 40px rgba(217,138,61,0.24), 0 2px 2px rgba(0,0,0,0.6); }
    50% { text-shadow: 0 0 58px rgba(217,138,61,0.36), 0 2px 2px rgba(0,0,0,0.6); }
    52% { text-shadow: 0 0 40px rgba(217,138,61,0.24), 0 2px 2px rgba(0,0,0,0.6); }
  }
}