* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Georgia, "Times New Roman", serif;
  background:
    radial-gradient(circle at center, #7b5630 0%, #3c2412 55%, #1c1008 100%);
  color: #2a1708;
}

.page-wrap {
  min-height: 100vh;
  padding: 55px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.scroll-page {
  position: relative;
  width: min(980px, 100%);
  padding: 78px 80px;
  text-align: center;
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,0.35), transparent 24%),
    radial-gradient(circle at 75% 70%, rgba(120,70,25,0.18), transparent 25%),
    linear-gradient(90deg, #c99b55 0%, #f3ddb0 11%, #f7e6c3 50%, #f3ddb0 89%, #c99b55 100%);
  border: 3px solid #6a3915;
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.48);
}

.scroll-page::before,
.scroll-page::after {
  content: "";
  position: absolute;
  left: -34px;
  right: -34px;
  height: 46px;
  background:
    linear-gradient(90deg, #3c1b08 0%, #8a4a18 12%, #b06d2a 50%, #8a4a18 88%, #3c1b08 100%);
  border: 3px solid #2b1205;
  border-radius: 999px;
  box-shadow:
    inset 0 5px 9px rgba(255,255,255,0.22),
    inset 0 -8px 12px rgba(0,0,0,0.38),
    0 8px 16px rgba(0,0,0,0.38);
}

.scroll-page::before {
  top: -34px;
}

.scroll-page::after {
  bottom: -34px;
}

h1 {
  margin: 0 0 14px;
  font-size: clamp(2.8rem, 6vw, 5.2rem);
  color: #351b08;
}

h2 {
  margin: 16px 0 20px;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  color: #4a270d;
}

p {
  font-size: 1.22rem;
  line-height: 1.65;
  max-width: 760px;
  margin: 16px auto;
}

.notice {
  margin: 30px auto;
  max-width: 760px;
  padding: 18px 24px;
  border: 2px solid #7b4218;
  border-radius: 16px;
  background: rgba(255, 246, 215, 0.72);
  font-size: 1.18rem;
  font-weight: bold;
}

.nav-buttons,
.actions {
  margin-top: 34px;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.button,
button,
input[type="submit"] {
  display: inline-block;
  padding: 14px 27px;
  border-radius: 999px;
  border: 2px solid #1f0e04;
  background: #4b2209;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 7px 15px rgba(0,0,0,0.32);
}

.button:hover,
button:hover,
input[type="submit"]:hover {
  background: #6a3512;
}

.footer {
  margin-top: 28px;
  text-align: center;
  color: #f1ddb7;
  font-size: 0.95rem;
}

.fade-in {
  animation: fadeIn 1.4s ease forwards;
}

.fade-out {
  animation: fadeOut 1.2s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.splash-body {
  overflow: hidden;
  background:
    radial-gradient(circle at center, #6f4b25 0%, #2b180b 62%, #120905 100%);
}

.splash-screen {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  text-align: center;
  flex-direction: column;
  color: #f7dfb6;
}

.splash-title {
  font-size: clamp(3rem, 7vw, 6rem);
  color: #f7dfb6;
  text-shadow: 0 5px 18px rgba(0,0,0,0.75);
}

.splash-subtitle {
  margin-top: 18px;
  font-size: clamp(1.35rem, 3vw, 2.3rem);
  font-weight: bold;
  color: #fff2d2;
  text-shadow: 0 3px 12px rgba(0,0,0,0.7);
}

@media (max-width: 720px) {
  .scroll-page {
    padding: 62px 26px;
  }

  .scroll-page::before,
  .scroll-page::after {
    left: -16px;
    right: -16px;
  }

  p {
    font-size: 1.08rem;
  }
}

.old-scholar-splash {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  background:
    linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.45)),
    url("old-scholar-splash.png") center center / cover no-repeat;
}