/* ================================================================
   COLLECTION CHARTER — rules.css
   ================================================================ */

.rules-hero {
  position: relative; min-height: 220px;
  display: flex; align-items: center; overflow: hidden; padding: 2rem;
}

.rules-hero-bg {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, #060806 0%, #0a0e08 50%, #0e1208 100%);
}
.rules-hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent, rgba(6,8,6,.6));
}

.rules-hero-content { position: relative; z-index: 1; }
.rules-eyebrow { font-family: var(--font-display); font-size: .6rem; letter-spacing: .4em; color: var(--brass-light); margin-bottom: .3rem; }
.rules-title { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 700; letter-spacing: .2em; color: var(--cream); text-shadow: 0 2px 20px rgba(0,0,0,.9); }
.rules-subtitle { font-family: var(--font-display); font-size: .6rem; letter-spacing: .28em; color: var(--ivory-dark); margin-top: .3rem; }
.rules-desc { font-family: var(--font-ink); font-style: italic; font-size: 1rem; line-height: 1.7; color: var(--ivory-dark); max-width: 500px; margin-top: .75rem; opacity: .75; }

/* Layout */
.rules-layout {
  display: grid; grid-template-columns: 1fr 280px;
  gap: 1.25rem; padding: 1.5rem 2rem 0; align-items: start;
}

.rules-main { display: flex; flex-direction: column; gap: 1.1rem; }

/* Section cards */
.rules-section { background: linear-gradient(148deg, #ede4ce, #ddd0b0); }

.rs-header { display: flex; align-items: center; gap: .85rem; margin-bottom: .85rem; padding-bottom: .65rem; border-bottom: 1px solid rgba(61,51,38,.12); }

.rs-num { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--brass); opacity: .5; line-height: 1; min-width: 1.5rem; }

.rs-title { font-family: var(--font-display); font-size: .85rem; font-weight: 600; letter-spacing: .18em; color: var(--ink); }

.rs-rules { display: flex; flex-direction: column; gap: .65rem; }

.rs-rule { display: flex; gap: .85rem; align-items: flex-start; }

.rs-rule-num { font-family: var(--font-display); font-size: .52rem; letter-spacing: .15em; color: var(--brass); opacity: .6; min-width: 2rem; padding-top: .2rem; }

.rs-rule p { font-family: var(--font-body); font-size: 1rem; line-height: 1.65; color: var(--ink); }

/* Aside */
.rules-aside { display: flex; flex-direction: column; gap: 1.1rem; position: sticky; top: 1.5rem; }

.rules-aside-card { background: linear-gradient(148deg, #ede4ce, #ddd0b0); }
.rules-aside-dark { background: linear-gradient(148deg, var(--greenhouse-2), var(--greenhouse-3)); border-color: rgba(95,118,84,.2); }

.oath-text { font-family: var(--font-ink); font-style: italic; font-size: 1rem; line-height: 1.7; color: var(--ink); margin: .5rem 0; }
.oath-sig { font-family: var(--font-ink); font-style: italic; font-size: .85rem; color: var(--ink-light); opacity: .6; }
.oath-seal { width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--brass-light), var(--brass)); opacity: .3; margin-top: .75rem; }

.support-text, .charter-note { font-family: var(--font-body); font-size: .95rem; line-height: 1.6; color: var(--ivory-dark); margin-top: .4rem; }
.charter-ver { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--cream); margin-top: .4rem; }
.charter-date { font-family: var(--font-display); font-size: .58rem; letter-spacing: .18em; color: var(--brass-light); margin-bottom: .5rem; }

/* Footer */
.rules-footer {
  text-align: center; padding: 1.5rem 2rem 2.5rem;
  border-top: 1px solid rgba(181,139,74,.1); margin-top: 1.5rem;
}
.rules-footer p { font-family: var(--font-ink); font-style: italic; font-size: 1rem; color: var(--ivory-dark); opacity: .4; }
.rules-footer-sig { font-size: .85rem; margin-top: .25rem; }

/* Mobile */
@media (max-width: 1100px) {
  .rules-layout { grid-template-columns: 1fr; }
  .rules-aside { position: static; flex-direction: row; flex-wrap: wrap; }
  .rules-aside-card { flex: 1 1 220px; }
}

@media (max-width: 900px) {
  .rules-layout { padding: 1rem; }
}

@media (max-width: 600px) {
  :root { --sidebar-width: 0px; }
  .sidebar { display: none; }
  .main { margin-left: 0; }
  .rules-aside { flex-direction: column; }
}

/* Species grid */
.rs-note {
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  margin-bottom: .85rem; line-height: 1.6;
}
.rs-note strong { font-weight: 600; }

.rs-sub-heading {
  font-family: var(--font-display); font-size: .52rem; letter-spacing: .25em;
  color: var(--ink-light); opacity: .6; margin-bottom: .5rem;
}

.rs-species-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem .75rem;
}

.rs-species {
  display: flex; justify-content: space-between; align-items: center;
  padding: .3rem 0; border-bottom: 1px solid rgba(61,51,38,.08);
}

.rs-species-name { font-family: var(--font-display); font-size: .6rem; letter-spacing: .08em; color: var(--ink); }
.rs-species-slots { font-family: var(--font-display); font-size: .5rem; letter-spacing: .1em; color: var(--brass); opacity: .8; }

@media (max-width: 700px) {
  .rs-species-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Accordion ─────────────────────────────────────────────────── */
.rs-toggle {
  cursor: pointer;
  user-select: none;
  position: relative;
}

.rs-toggle::after {
  content: '›';
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%) rotate(90deg);
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--brass);
  opacity: .6;
  transition: transform .2s;
}

.rs-collapsed .rs-toggle::after {
  transform: translateY(-50%) rotate(0deg);
}

/* Body that collapses */
.rs-body {
  overflow: hidden;
  transition: max-height .28s ease, opacity .2s ease;
  max-height: 2000px;
  opacity: 1;
}

.rs-collapsed .rs-body {
  max-height: 0;
  opacity: 0;
}

/* Collapsed card — tighter padding */
.rs-collapsed .card-inner {
  padding-bottom: 1rem;
}