/* ---------- Original theme + nav/link styles ---------- */

.topbar {
  background: #8b0000;
  height: 6px;
  width: 100%;
}

.header {
  display: flex;
  align-items: center;
  padding: 20px 40px;
  background: #ffffff;
}

.logo {
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #8b0000;
  text-transform: uppercase;
  text-decoration: none;
}

.logo:hover {
  opacity: 0.8;
}

/* Link cluster bottom-right */
.linkses {
  position: fixed;
  bottom: 10px;
  right: 10px;
  font-size: 25px;
  display:flex;
  gap:10px;
  align-items:right;
}
.link {
  color: #BD0034;
  text-decoration: none;
  font-weight: 700;
}
.link:hover {
  color: #FDB731;
}

/* Title animation fonts & base page */
@import url(https://fonts.googleapis.com/css?family=Montserrat);
@import url(https://fonts.googleapis.com/css?family=Tangerine);

html, body {
  height: 100%;
  margin: 0;
  font-weight: 800;
}

body {
  text-align: center;
  color: #1a1a1a;
  background-color: #F7F7F2;
  /* Soft repeating imprint — upright flowers on a diagonal lattice */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'%3E%3Cg fill='none' stroke='%2352003A' stroke-width='1.4' opacity='0.15'%3E%3Cpath d='M70 65 L56 28 L70 10 L84 28 Z'/%3E%3Cpath d='M70 75 L84 112 L70 130 L56 112 Z'/%3E%3Cpath d='M65 70 L28 84 L10 70 L28 56 Z'/%3E%3Cpath d='M75 70 L112 56 L130 70 L112 84 Z'/%3E%3Ccircle cx='70' cy='70' r='5'/%3E%3Cpath d='M210 205 L196 168 L210 150 L224 168 Z'/%3E%3Cpath d='M210 215 L224 252 L210 270 L196 252 Z'/%3E%3Cpath d='M205 210 L168 224 L150 210 L168 196 Z'/%3E%3Cpath d='M215 210 L252 196 L270 210 L252 224 Z'/%3E%3Ccircle cx='210' cy='210' r='5'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 280px 280px;
  font-family: Copperplate, Papyrus, fantasy;
}

/* Full-viewport stage: name/title sit in the true center;
   logo above, button below, equal free space on both sides */
.stage {
  min-height: calc(100vh - 6px);
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  align-items: center;
  padding: 0 24px;
  box-sizing: border-box;
}

.brand {
  grid-row: 1;
  align-self: end;
  display: block;
  width: 100%;
  max-width: 1170px;
  height: 234px;
  margin: 0;
  overflow: visible;
  font: 13em 'Tangerine';
}

.hero {
  grid-row: 2;
  margin: 0;
  max-width: 980px;
  padding: 8px 0 16px;
}

.page {
  grid-row: 3;
  align-self: start;
  margin: 8px 0 0;
  max-width: 980px;
  padding: 0;
  text-align: center;
}

/* SVG title animation */
.text-copy {
  fill: none;
  stroke: #EFD6D2;
  stroke-dasharray: 6% 29%;
  stroke-width: 2px;
  stroke-dashoffset: 0%;
  animation: stroke-offset 5.5s infinite linear;
}
.text-copy:nth-child(1){ stroke: #4D163D; animation-delay: -1s; }
.text-copy:nth-child(2){ stroke: #840037; animation-delay: -2s; }
.text-copy:nth-child(3){ stroke: #BD0034; animation-delay: -3s; }
.text-copy:nth-child(4){ stroke: #BD0034; animation-delay: -4s; }
.text-copy:nth-child(5){ stroke: #8a0060; animation-delay: -5s; }
@keyframes stroke-offset{ 100% { stroke-dashoffset: -35%; } }

.hero h1 {
  margin: 0 0 2px 0;
  font-size: 36px;
  color: #1a1a1a;
  letter-spacing: 1px;
}
.hero h2 {
  margin: 0;
  font-size: 23px;
  color: #333333;
  font-weight: 700;
}

.page-btn {
  display: inline-block;
  color: #52003A;
  text-decoration: none;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 12px 22px;
  border: 3.8px solid #52003A;
  border-radius: 7px;
  transition: background-color 200ms, color 200ms;
}

.page-btn:hover {
  background-color: #52003A;
  color: #F7F7F2;
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  align-items: center;
}

/* Subpages (e.g. /dndc) */
.subpage {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px 80px;
  text-align: center;
  box-sizing: border-box;
}

.subpage-title {
  margin: 0 0 28px;
  font-family: Copperplate, Papyrus, fantasy;
  font-size: 48px;
  font-weight: 800;
  color: #52003A;
  letter-spacing: 1px;
}

.subpage-body {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
  color: #333333;
  text-align: left;
}

.subpage-body p {
  margin: 0 0 1em;
}

.subpage-body p:last-child {
  margin-bottom: 0;
}

@media (max-width: 860px) {
  .brand { height: 182px; font-size: 10.4em; }
}

@media (max-width: 420px) {
  .hero h1 { font-size: 26px; }
  .hero h2 { font-size: 18px; }
  .brand { height: 143px; font-size: 8.45em; }
  .subpage-title { font-size: 34px; }
}

/* Accessibility focus outlines for links */
a:focus { outline: 3px solid rgba(189,0,52,0.25); outline-offset: 2px; }