/* Shared styles for the Virethian Systems & Law pages in /extras */
:root{
  --ink: #081209;
  --parchment: #ECE0C4;
  --parchment-dim: #D9C89F;
  --charcoal: #241E17;
  --gold: #C9A227;
  --amber: #E3A857;
  --moss: #7FA36B;
  --ivy: #3E5C34;
  --deep-leaf: #24401F;
  --wine: #6E2A3A;
  --line: rgba(236,224,196,0.18);
}
* { margin:0; padding:0; box-sizing:border-box; }
body{
  background: linear-gradient(180deg, #050B05 0%, #0D1B0E 45%, #142614 100%);
  color: var(--parchment);
  font-family:'EB Garamond', serif;
  padding: 60px 20px 100px;
}
.stage{ max-width: 760px; margin: 0 auto; }
.stage.wide{ max-width: 980px; }
.eyebrow{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:13px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color: var(--moss);
  text-align:center;
  margin-bottom:10px;
}
h1{
  font-family:'Cinzel', serif;
  font-size: clamp(28px, 6vw, 42px);
  text-align:center;
  margin: 0 0 10px;
  letter-spacing:0.02em;
}
.subtitle{
  text-align:center;
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  color: var(--parchment-dim);
  margin-bottom:48px;
  font-size:1.05rem;
}

a.back-to-site{
  display:block;
  text-align:center;
  margin-top:10px;
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  color: var(--parchment-dim);
  text-decoration:none;
  border-bottom:1px solid var(--line);
  padding-bottom:2px;
  width: fit-content;
  margin-left:auto;
  margin-right:auto;
}
a.back-to-site:hover{ color: var(--gold); border-color: var(--gold); }

/* Hub cards */
.lore-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: 34px;
}
.lore-card{
  background: rgba(236,224,196,0.04);
  border: 1px solid var(--line);
  padding: 30px 24px;
  text-align:center;
  color: var(--parchment);
  text-decoration:none;
  display:block;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.lore-card:hover, .lore-card:focus-visible{ border-color: var(--gold); transform: translateY(-4px); outline:none; }
.lore-icon{ font-size:1.8rem; margin-bottom:12px; color: var(--gold); }
.lore-card h2{ font-family:'Cinzel', serif; font-size:1.05rem; margin-bottom:10px; letter-spacing:0.05em; }
.lore-card p{ font-size:0.95rem; color: var(--parchment-dim); line-height:1.6; }

/* Parchment panels */
.panel{
  background: linear-gradient(180deg, var(--parchment) 0%, var(--parchment-dim) 100%);
  color: var(--charcoal);
  border-radius: 3px;
  padding: 40px 38px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
  position:relative;
  margin-bottom: 34px;
}
.panel::before{
  content:'';
  position:absolute; inset:10px;
  border: 1px solid rgba(36,30,23,0.18);
  pointer-events:none;
}
.panel h2{
  font-family:'Cinzel', serif;
  font-size:1.3rem;
  margin-bottom:12px;
  letter-spacing:0.02em;
}
.panel > p{ line-height:1.7; font-size:1.02rem; margin-bottom:22px; }

/* Craft tables */
.table-wrap{ overflow-x:auto; position:relative; }
table.crafts{ width:100%; border-collapse:collapse; font-size:0.98rem; line-height:1.5; text-align:left; }
.crafts th{
  font-family:'Cinzel', serif;
  font-size:0.74rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color: var(--wine);
  padding: 10px 12px;
  border-bottom: 2px solid rgba(110,42,58,0.45);
}
.crafts td{ padding: 12px; vertical-align:top; border-bottom:1px solid rgba(36,30,23,0.16); }
.crafts td:first-child{ font-family:'Cinzel', serif; font-weight:600; white-space:nowrap; }
.crafts td.noble{ white-space:nowrap; }
.crafts tr:last-child td{ border-bottom:none; }
.crafts caption{ position:absolute; left:-9999px; }

@media (max-width: 720px){
  .panel{ padding: 34px 20px; }
  .crafts thead{ position:absolute; left:-9999px; }
  .crafts, .crafts tbody, .crafts tr, .crafts td{ display:block; width:100%; }
  .crafts tr{ padding: 12px 0; border-bottom:1px solid rgba(36,30,23,0.16); }
  .crafts tr:last-child{ border-bottom:none; }
  .crafts td{ border:none; padding: 3px 0; }
  .crafts td:first-child{ font-size:1.05rem; margin-bottom:2px; }
  .crafts td[data-label]::before{
    content: attr(data-label) ": ";
    font-family:'Cinzel', serif;
    font-size:0.7rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color: var(--wine);
  }
}