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

:root{
  --paper: #ece0c0;
  --paper-2: #e2d3a9;
  --panel: #f4ead0;
  --ink: #2a2115;
  --ink-soft: #6b5d42;
  --seal: #7a2323;
  --seal-ink: #f4ead0;
  --forge: #8a6a2f;
  --line: #b9a877;
  --shadow: rgba(50,38,10,0.22);
  --display: 'Cinzel', serif;
  --serif: 'Cormorant Garamond', 'EB Garamond', serif;
  --body: 'EB Garamond', serif;
  --radius: 3px;
  --glow: 0 0 16px rgba(122,35,35,0.18);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  color:var(--ink);
  font-family:var(--body);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(ellipse 900px 500px at 12% -8%, var(--paper-2), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 0%, var(--paper-2), transparent 55%),
    var(--paper);
  background-attachment:fixed;
}

.wrap{ max-width:1080px; margin:0 auto; padding:56px 24px 80px; }

/* ---------- HERO ---------- */
.hero{
  text-align:center;
  padding-bottom:36px;
  margin-bottom:44px;
  border-bottom:1px solid var(--line);
  position:relative;
}
.crest{
  width:64px; height:64px;
  margin:0 auto 18px;
  opacity:0.85;
}
.eyebrow{
  font-family:var(--display);
  font-size:12px;
  letter-spacing:0.34em;
  text-transform:uppercase;
  color:var(--forge);
  margin:0 0 14px;
}
h1{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(34px,5.6vw,58px);
  margin:0 0 18px;
  letter-spacing:0.01em;
  line-height:1.05;
}
.lede{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(17px,2vw,20px);
  color:var(--ink-soft);
  max-width:56ch;
  margin:0 auto;
  line-height:1.55;
}

/* ---------- INTRO ---------- */
.intro{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:36px;
  margin-bottom:56px;
}
@media (max-width:760px){ .intro{ grid-template-columns:1fr; } }
.intro h2{
  font-family:var(--display);
  font-size:13px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--seal);
  margin:0 0 12px;
}
.intro p{
  font-size:17px;
  line-height:1.65;
  color:var(--ink);
  margin:0 0 12px;
}
.intro p:last-child{ margin-bottom:0; }

/* ---------- LEDGER ---------- */
.ledger-heading{
  text-align:center;
  margin-bottom:8px;
}
.ledger-heading h2{
  font-family:var(--display);
  font-size:clamp(22px,3vw,30px);
  letter-spacing:0.03em;
  margin:0 0 10px;
}
.ledger-heading p{
  font-family:var(--serif);
  font-style:italic;
  color:var(--ink-soft);
  font-size:16px;
  max-width:52ch;
  margin:0 auto 40px;
}

.ledger{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}
@media (max-width:860px){ .ledger{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .ledger{ grid-template-columns:1fr; } }

.entry{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:3px;
  padding:26px 22px 22px;
  position:relative;
  box-shadow:0 6px 18px var(--shadow);
  display:flex;
  flex-direction:column;
  min-height:230px;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.entry.available:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 26px var(--shadow);
}
.entry::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:4px;
  background:var(--race-color, var(--forge));
  border-radius:3px 3px 0 0;
}

.entry-glyph{
  font-size:26px;
  line-height:1;
  margin-bottom:14px;
  color:var(--race-color, var(--forge));
}
.entry h3{
  font-family:var(--display);
  font-size:20px;
  margin:0 0 8px;
  letter-spacing:0.01em;
}
.entry p{
  font-family:var(--serif);
  font-size:15.5px;
  line-height:1.5;
  color:var(--ink-soft);
  margin:0 0 18px;
  flex:1;
}

.stamp{
  align-self:flex-start;
  font-family:var(--display);
  font-size:10.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  padding:6px 12px;
  border-radius:999px;
  border:1.5px solid currentColor;
  margin-bottom:14px;
}
.stamp.available{ color:var(--seal); }
.stamp.forge{ color:var(--forge); opacity:0.85; }

.entry-action{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--display);
  font-size:12.5px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  text-decoration:none;
  padding:11px 18px;
  border-radius:2px;
}
.entry-action.available{
  background:var(--seal);
  color:var(--seal-ink);
}
.entry-action.available:hover{ opacity:0.9; }
.entry-action.pending{
  background:transparent;
  border:1px solid var(--line);
  color:var(--ink-soft);
  cursor:default;
}

footer{
  margin-top:60px;
  text-align:center;
  font-family:var(--serif);
  font-style:italic;
  color:var(--ink-soft);
  font-size:13px;
  border-top:1px solid var(--line);
  padding-top:24px;
}

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; }
}