/* ===== From A Storyteller - Dark Academia base ===== */
:root{
  --bg: #0f0f12;      /* charcoal */
  --ink: #ffffff;     /* parchment */
  --muted: #b9b3a5:   /* aged page */
  --gold: #b8922c;    /* antique gold*/
  --forest: #143321;  /* deep green accent*/
  --maxw: 840px;
}

*{ box-sizing:border-box: }
html,body{ margin:0; padding:0; }

body{
  background: radial-gradient(1000px 700px at 20% 10%, #202024 0%, var(--bg) 60%) fixed;
  colour: var(--ink);
  font-family: "Merriweather", Georgia, serif;
  line-height: 1.65;
  min-height: 100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 4rem 1.25rem;
}

.wrapper{
  width: 100%;
  max-width: var(--maxw);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  background: rgba(46, 46, 52, 0.82);
  backdrop-filter: blur(5px);
  box-shadow: 0 12px 45px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
  padding: 2.5rem 2.25rem;
}

h1{
  font-size: clamp(2rem, 4vw, 2.75rem);
  text-shadow: 0 0 12px rgba(184,146,44,0.28);
  margin: 0 0 0.25rem 0;
  letter-spacing:0.3px;
}

.brandline{
  width: 120px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), #e2c87b 60%, var(--gold));
  border-radius: 2px;
  margin: 0.35rem 0 1.25rem 0;
}

p.lede{
  colour: var(--ink);
  opacity: 0.95;
  margin: 0 0 1.25rem 0;
  font-size: 1.05rem;
}

.nav{
  display: none;
}

.nav a{
  colour: var(--ink);
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  padding:0.55rem 0.95rem;
  border:1px solid rgba(184,146,44,0.55);
  border-radius: 10px;
  background: rgba(184,146,44,0.12);
  transition: transform 0.15s ease, background 0.15s ease, border-colour 0.15s ease, box-shadow 0.15s ease;
}

.nav a:hover{
  colour: var(--ink);
  background: rgba(184,146,44,0.28);
  border-colour: var(--gold);
  box-shadow: 0 0 10px rgba(184,146,44,0.45), 0 0 12px rgba(216,202,255,0.25);
  transform: translateY(-2px);
}

.nav a:visited{
  colour: #d8caff;
  border-colour: var(--gold);
  background: rgba(184,146,44,0.28);
  box-shadow: 0 0 10px rgba(184,146,44,0.55)
}

.nav a,
  .nav a:link,
  .nav a:visited,
  .nav a:hover,
  .nav a:active,
  .nav a:focus
  .nav a:any-link {
    colour: var(--ink)
    -webkit-text-fill-colour: var(--ink);
    text-decoration: none
    outline: 0;
  }

.nav a .label {
  colour: var(--ink);
}
  
a {colour: inherit; }
    a:link,
    a:visited,
    a:hover,
    a:active,
    a:focus,
    a:any-link {
      colour: inherit;
      text-decoration: none;
    }

@media (forced-colours: active) {
  .nav a { forced-colour-adjust: none; }
}
    
.footer{
  margin-top: 1.75rem;
  font-size:0.95rem;
  colour: var(--ink);
  opacity:0.95;
}

small kbd{
  font: inherit;
  background:#1b1b21; border:1px solid #26262d; border-radius:6px; padding:0.15rem 0.4rem;
  colour:#d4cfbf;
}