/* ============================================================
   Genesia race pages — extends the shared "refined parchment"
   theme (css/location.css). Adds subspecies/guild blocks, a
   stat sidebar, the compendium hub, and the themed home page.
   ============================================================ */

/* ---------- subspecies / guilds ---------- */
.subrace-wrap{ margin-top:8px; }
.subrace{ position:relative; margin:0 0 18px; padding:12px 0 12px 20px; border-left:3px solid var(--gold);
  background:linear-gradient(90deg, rgba(169,129,47,.08), rgba(169,129,47,0) 60%); }
.subrace h3{ font-family:var(--display); font-weight:400; font-size:23px; color:var(--accent); margin:0 0 4px;
  letter-spacing:.5px; }
.subrace .sr-tag{ font-family:var(--display); letter-spacing:1px; font-size:12px; text-transform:uppercase;
  color:var(--ink-faint); margin-left:10px; }
.subrace p{ margin:0 0 8px; }
.subrace p:last-child{ margin-bottom:0; }

/* ---------- pull-quote inside prose (optional) ---------- */
.race-quote{ font-family:var(--display); font-size:22px; line-height:1.4; color:var(--ink-soft);
  text-align:center; margin:26px auto; padding:6px 24px; max-width:680px; font-style:italic; }
.race-quote::before{ content:'\201C'; }
.race-quote::after{ content:'\201D'; }

/* ---------- home page ---------- */
.home-wrap{ position:relative; z-index:1; max-width:1080px; margin:0 auto; padding:0 16px 60px; }

.home-hero{ text-align:center; padding:26px 16px 30px; position:relative; }
.home-hero .logo{ display:block; width:min(1000px,96%); height:auto; margin:0 auto;
  border-radius:6px; box-shadow:0 22px 60px rgba(0,0,0,.62); }
.home-hero .sub{ font-family:var(--display); font-style:italic; font-size:22px; color:#e6d4ac;
  margin-top:24px; text-shadow:0 2px 12px rgba(0,0,0,.6); }
.home-hero .rule{ width:220px; height:2px; margin:22px auto 0;
  background:linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent); }
.visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.home-panel{ background:linear-gradient(180deg, rgba(255,250,235,.5), rgba(230,214,180,.25)), var(--paper);
  border:1px solid var(--paper-edge); border-radius:5px; box-shadow:var(--shadow), inset 0 0 90px rgba(120,90,45,.14);
  padding:36px 46px; position:relative; margin-bottom:34px; }
.home-panel::after{ content:''; position:absolute; inset:7px; border:1px solid rgba(140,105,55,.35);
  border-radius:3px; pointer-events:none; }
.home-panel .lead p:first-child::first-letter{ font-family:var(--display); font-size:58px; line-height:.8;
  float:left; padding:6px 10px 2px 0; color:var(--accent); }
.home-panel p{ margin:0 0 14px; }
.home-panel p:last-child{ margin-bottom:0; }
.home-note{ margin-top:20px; padding:14px 18px; border-left:3px solid var(--rule); background:rgba(255,250,235,.35);
  font-size:16.5px; color:var(--ink-soft); font-style:italic; }
.home-gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:22px; }
.home-gallery img{ width:100%; aspect-ratio:1/1; object-fit:cover; border:1px solid var(--paper-edge);
  border-radius:5px; box-shadow:0 10px 26px rgba(0,0,0,.4); background:#e8dab9; }
@media (max-width:820px){ .home-gallery{ grid-template-columns:repeat(2,1fr); } }

/* entry-point cards */
.portal-head{ text-align:center; font-family:var(--display); letter-spacing:3px; text-transform:uppercase;
  font-size:15px; color:#e9d6ab; margin:6px 0 18px; text-shadow:0 2px 10px rgba(0,0,0,.6); }
.portals{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.portal{ display:block; text-align:center; padding:26px 18px; color:var(--ink);
  background:linear-gradient(180deg, rgba(255,250,235,.6), rgba(226,209,171,.42)), var(--paper);
  border:1px solid var(--paper-edge); border-radius:6px; box-shadow:0 10px 26px rgba(0,0,0,.42);
  transition:transform .14s, border-color .14s; }
.portal:hover{ transform:translateY(-4px); border-color:var(--gold); text-decoration:none; color:var(--ink); }
.portal .glyph{ font-size:30px; color:var(--accent); line-height:1; }
.portal .pt{ font-family:var(--display); font-size:24px; margin:12px 0 6px; color:var(--ink); }
.portal .pd{ font-size:15px; color:var(--ink-soft); line-height:1.45; }

@media (max-width:820px){
  .home-hero{ padding:44px 14px 26px; }
  .home-hero h1{ font-size:48px; }
  .home-panel{ padding:24px; }
  .portals{ grid-template-columns:1fr; }
  .subrace h3{ font-size:21px; }
}