/* ===== ACE RPG Clubs — styles.css ===== */
/* Theme palette (drawn from the logo) */
:root {
  --ink: #1f1f1f;        /* deep charcoal / ink */
  --parchment: #f3ead7;  /* parchment page */
  --sepia: #7a5c4b;      /* warm leather / sepia */
  --moss: #6b8f71;       /* feather green accent */
  --plum: #3b2b30;       /* shadow undertone */
  --paper: #fffdf7;      /* light paper for content card */
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.65;
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(123,92,75,0.08), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(59,43,48,0.08), transparent 60%),
    linear-gradient(180deg, var(--parchment), #efe2c8 40%, #e9dcc0 100%);
}

/* ===== Header ===== */
.site-header {
  background: linear-gradient(180deg, var(--ink), var(--plum));
  color: #fff;
  padding: 1.25rem 1rem;
  border-bottom: 4px solid var(--sepia);
}
.brand {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 1rem;
  align-items: center;
}
.logo {
  width: 88px;
  height: auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.25));
}
.heading h1 {
  margin: 0 0 .25rem 0;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: .5px;
}
.heading .tag {
  margin: 0;
  font-style: italic;
  opacity: .9;
}

/* ===== Main content card ===== */
.container {
  max-width: 820px;
  margin: 1.25rem auto 2.5rem auto;
  background: var(--paper);
  border: 1px solid rgba(31,31,31,.08);
  box-shadow: 0 12px 28px rgba(31,31,31,.08);
  border-radius: 14px;
  padding: clamp(1rem, 2.5vw, 1.5rem);
}
section { margin: 1rem 0 1.25rem; }

h2 {
  margin: 0 0 .5rem;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--plum);
  border-bottom: 2px solid rgba(107,143,113,.35); /* moss tint */
  padding-bottom: .35rem;
}

p { margin: .4rem 0 .9rem; }

.bullets {
  padding-left: 1.1rem;
  margin: .2rem 0 .8rem;
}
.bullets li { margin: .25rem 0; }

/* ===== Links & Buttons ===== */
a { color: var(--moss); text-decoration: none; }
a:hover { text-decoration: underline; }

.btn {
  display: inline-block;
  background: var(--moss);
  color: #fff;
  padding: .6rem .9rem;
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  box-shadow: 0 6px 14px rgba(107,143,113,.35);
  transition: transform .05s ease, filter .2s ease;
  margin-right: .5rem;
}
.btn:hover { text-decoration: none; filter: brightness(1.05); }
.btn:active { transform: translateY(1px); }

/* Alternate button color for “Get Directions” */
.btn-sepia {
  background: var(--sepia);
  box-shadow: 0 6px 14px rgba(122,92,75,.35);
}

/* QR image (optional helper if you add a caption later) */
.qr {
  max-width: 200px;
  height: auto;
  display: block;
}
.qr-caption {
  font-size: .9rem;
  color: #444;
  margin-top: .25rem;
}

/* ===== Footer ===== */
.site-footer {
  text-align: center;
  color: #3c3c3c;
  padding: 1.25rem 1rem 2rem;
}

/* ===== Small screens ===== */
@media (max-width: 560px) {
  .brand { grid-template-columns: 64px 1fr; }
  .logo { width: 64px; }
}