/* =========================================================
   TINY DYNASTY — Shared tokens & base styles
   Cinematic dark fantasy • Deep ink + ember gold
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&display=swap');

:root {
  /* ---- Colors ---- */
  --obsidian:     #0b0a09;   /* page base */
  --ink:          #14120f;   /* panels, cards */
  --ink-raised:   #1b1815;   /* raised cards */
  --ash:          #2a2520;   /* hairlines, borders */
  --smoke:        #403830;   /* muted borders */
  --bone:         #a79a84;   /* secondary text */
  --parchment:    #eee6d3;   /* primary text on dark */
  --paper:        #f5efe0;   /* light mode / seal paper */

  --ember:        #d99849;   /* primary accent — ember gold */
  --ember-bright: #f2b765;   /* hover / highlight */
  --ember-deep:   #8a5a26;   /* pressed / deep */
  --molten:       #ffcf7a;   /* glow hotspots */
  --oxblood:      #6b1f1a;   /* rare emphasis */

  /* ---- Type ---- */
  --font-display: 'Cinzel', 'Trajan Pro', serif;
  --font-serif:   'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --font-sans:    'Inter', ui-sans-serif, system-ui, sans-serif;

  /* ---- Scale ---- */
  --step--1: 0.875rem;
  --step-0:  1rem;
  --step-1:  1.125rem;
  --step-2:  1.375rem;
  --step-3:  1.75rem;
  --step-4:  2.25rem;
  --step-5:  3rem;
  --step-6:  4.25rem;
  --step-7:  6rem;

  /* ---- Space ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 72px;
  --s-9: 112px;
  --s-10: 160px;

  /* ---- Other ---- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --hairline: 1px solid var(--ash);
  --hairline-bone: 1px solid rgba(167, 154, 132, 0.18);
  --shadow-deep: 0 30px 80px -20px rgba(0,0,0,0.8), 0 10px 30px -10px rgba(0,0,0,0.6);
  --shadow-ember: 0 0 60px -10px rgba(217, 152, 73, 0.4);

  --max-w: 1400px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--obsidian);
  color: var(--parchment);
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* subtle grain + vignette on body for painterly feel */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(217, 152, 73, 0.06), transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.5), transparent 60%);
  z-index: 1;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.85 0 0 0 0 0.6 0 0 0 0 0.3 0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--parchment);
  margin: 0;
  line-height: 1.08;
}

h1 { font-size: var(--step-6); letter-spacing: 0.04em; }
h2 { font-size: var(--step-5); }
h3 { font-size: var(--step-3); letter-spacing: 0.06em; }
h4 { font-size: var(--step-2); letter-spacing: 0.08em; }

.td-display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.td-serif-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

.td-eyebrow {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ember);
  font-weight: 500;
}

.td-small-caps {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bone);
  font-weight: 500;
}

.td-body { font-family: var(--font-serif); font-size: var(--step-1); line-height: 1.6; color: #d9cfba; }
.td-meta { font-family: var(--font-sans); font-size: 0.82rem; letter-spacing: 0.1em; color: var(--bone); }

a { color: var(--parchment); text-decoration: none; }
a:hover { color: var(--ember-bright); }

/* ---------- Layout ---------- */
.td-container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--s-7);
  position: relative;
  z-index: 3;
}

/* ---------- Buttons ---------- */
.td-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 14px 28px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid var(--ember);
  color: var(--parchment);
  background: transparent;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  line-height: 1;
}
.td-btn::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid transparent;
  transition: border-color 0.25s ease;
  pointer-events: none;
}
.td-btn:hover {
  background: var(--ember);
  color: var(--obsidian);
  box-shadow: var(--shadow-ember);
}
.td-btn:hover::before { border-color: rgba(11,10,9,0.3); }

.td-btn--primary {
  background: var(--ember);
  color: var(--obsidian);
}
.td-btn--primary:hover {
  background: var(--ember-bright);
  color: var(--obsidian);
}

.td-btn--ghost {
  border-color: var(--smoke);
  color: var(--bone);
}
.td-btn--ghost:hover {
  background: transparent;
  border-color: var(--ember);
  color: var(--ember-bright);
  box-shadow: none;
}

/* ---------- Ornaments ---------- */
.td-rule {
  border: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--smoke), transparent);
  margin: var(--s-7) 0;
}
.td-rule--ember {
  background: linear-gradient(to right, transparent, var(--ember), transparent);
}

.td-diamond {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--ember);
  transform: rotate(45deg);
  margin: 0 var(--s-3);
  vertical-align: middle;
}

.td-gate {
  /* arched "gate" outline used as decorative frame */
  border: 1px solid var(--smoke);
  border-radius: 200px 200px 0 0;
}

/* ---------- Image placeholders ---------- */
.td-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.05);
}

/* ---------- Tags / chips ---------- */
.td-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 12px;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bone);
  border: 1px solid var(--ash);
  border-radius: 999px;
  background: rgba(255,255,255,0.02);
}
.td-tag--ember { color: var(--ember); border-color: rgba(217,152,73,0.4); }

/* ---------- Nav ---------- */
.td-nav {
  position: relative;
  z-index: 10;
  padding: var(--s-5) var(--s-7);
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-w);
  margin: 0 auto;
  border-bottom: var(--hairline);
}
.td-nav__brand {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--parchment);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.td-nav__brand-mark {
  width: 24px; height: 29px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 96' fill='none'><path d='M 8 94 L 8 40 Q 8 6 40 6 Q 72 6 72 40 L 72 94' stroke='%23eee6d3' stroke-width='4' fill='none' stroke-linecap='square'/><path d='M 18 94 L 18 42 Q 18 16 40 16 Q 62 16 62 42 L 62 94 Z' fill='%23d99849'/><rect x='36' y='4' width='8' height='8' fill='%23eee6d3' transform='rotate(45 40 8)'/><line x1='0' y1='94' x2='80' y2='94' stroke='%23eee6d3' stroke-width='3'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.td-nav__links {
  display: flex;
  gap: var(--s-7);
  font-family: var(--font-display);
  font-size: 0.74rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.td-nav__links a {
  color: var(--bone);
  transition: color 0.2s;
  position: relative;
  padding: 4px 0;
}
.td-nav__links a:hover,
.td-nav__links a.is-active {
  color: var(--parchment);
}
.td-nav__links a.is-active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 4px;
  height: 4px;
  background: var(--ember);
  transform: translateX(-50%) rotate(45deg);
}
.td-nav__cta {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

/* ---------- Footer ---------- */
.td-footer {
  margin-top: var(--s-10);
  border-top: var(--hairline);
  padding: var(--s-8) var(--s-7) var(--s-6);
  position: relative;
  z-index: 3;
}
.td-footer__grid {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--s-7);
}
.td-footer h5 {
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  color: var(--ember);
  margin-bottom: var(--s-4);
}
.td-footer ul { list-style: none; padding: 0; margin: 0; }
.td-footer li { padding: 4px 0; }
.td-footer li a { color: var(--bone); font-family: var(--font-sans); font-size: 0.88rem; }
.td-footer__base {
  max-width: var(--max-w);
  margin: var(--s-7) auto 0;
  padding-top: var(--s-5);
  border-top: var(--hairline);
  display: flex;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--smoke);
  letter-spacing: 0.1em;
}

/* ---------- utilities ---------- */
.td-ember { color: var(--ember); }
.td-bone { color: var(--bone); }
.td-center { text-align: center; }
.td-stack > * + * { margin-top: var(--s-4); }

/* ember ornament — circled dot between arches */
.td-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  color: var(--ember);
  letter-spacing: 0.4em;
  font-family: var(--font-display);
  font-size: 0.7rem;
}
.td-ornament::before,
.td-ornament::after {
  content: '';
  flex: 0 0 80px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--ember), transparent);
}