:root{
  --night:#070a10;
  --paper:#f4efe4;
  --paper2:#fff7ea;
  --ink:#1f1b16;
  --ink2:#2d2721;

  --terra:#7a4a2e;
  --pine:#2f6b57;

  /* button palettes */
  --poetryA:#8a4f27;
  --poetryB:#b8733b;

  --storiesA:#2f6b57;
  --storiesB:#5f8f74;
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  min-height:100%;
  font-family: Inter, Arial, sans-serif;
}

body{
  color:#efe6d6;
  background: radial-gradient(circle at 50% 0%, #18264a 0%, var(--night) 60%, #05070c 100%);
  overflow-x:hidden;
}

/* ===== LAYERS ===== */

.bg{
  position:fixed;
  inset:-25%;
  z-index:0;
  pointer-events:none;
  filter:blur(26px);
  opacity:0.85;
  background:
    radial-gradient(circle at 18% 30%, rgba(47,107,87,0.26) 0%, transparent 60%),
    radial-gradient(circle at 82% 20%, rgba(176,138,82,0.18) 0%, transparent 62%),
    radial-gradient(circle at 55% 75%, rgba(122,74,46,0.18) 0%, transparent 65%);
}

.stars{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:0.95;
}
.stars svg{ width:100%; height:100%; display:block; }

.landscape{
  position:fixed;
  left:0; right:0; bottom:0;
  height:42vh;
  z-index:2;
  pointer-events:none;
  opacity:0.95;
}
.landscape svg{ width:100%; height:100%; display:block; }

.grain{
  position:fixed;
  inset:0;
  z-index:3;
  pointer-events:none;
  opacity:0.16;
  background-image:repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.02),
    rgba(255,255,255,0.02) 1px,
    transparent 1px,
    transparent 3px
  );
}

/* ===== CONTENT ===== */

.page{
  position:relative;
  z-index:4;
  min-height:100vh;

  display:flex;
  flex-direction:column;

  /* THIS FIXES THE HUGE GAP */
  justify-content:flex-start;
  align-items:center;

  padding: 34px 16px 56px;
}

.panel{
  width:min(820px,92vw);
  border-radius:32px;
  border:1px solid rgba(255,255,255,0.12);
  overflow:hidden;
  box-shadow:0 18px 60px rgba(0,0,0,0.35);
  background:rgba(255,255,255,0.03);
}

.band{
  padding:14px 16px;
  background:linear-gradient(90deg, rgba(47,107,87,0.16), rgba(176,138,82,0.12), rgba(122,74,46,0.16));
  border-bottom:1px solid rgba(255,255,255,0.12);
}
.band-bottom{
  border-bottom:0;
  border-top:1px solid rgba(255,255,255,0.12);
}

.sigils{
  display:flex;
  justify-content:center;
  gap:12px;
  color:rgba(244,239,228,0.88);
}
.g svg{ width:18px; height:18px; opacity:0.9; }

.body{ padding:22px 16px 20px; }

.card{
  position:relative;
  border-radius:22px;
  padding:34px 24px;
  color:var(--ink);
  border:1px solid rgba(0,0,0,0.10);
  background:radial-gradient(circle at 30% 0%, var(--paper2) 0%, var(--paper) 55%, #efe6d8 100%);
}

.ancient-border{
  position:absolute;
  inset:14px;
  border-radius:14px;
  pointer-events:none;
  border:1px solid rgba(122,74,46,0.22);
  outline:1px solid rgba(47,107,87,0.18);
  outline-offset:8px;
  opacity:0.8;
}
.ancient-border::after{
  content:"";
  position:absolute;
  left:18px; right:18px; top:-7px;
  height:10px;
  border-radius:10px;
  opacity:0.55;
  background:repeating-linear-gradient(
    90deg,
    rgba(122,74,46,0.25) 0 10px,
    transparent 10px 18px,
    rgba(47,107,87,0.20) 18px 28px,
    transparent 28px 36px
  );
}

.kicker{
  margin:0 0 10px;
  text-transform:uppercase;
  letter-spacing:3px;
  font-size:12px;
  color:rgba(31,27,22,0.70);
}
h1{
  font-family:Cinzel, serif;
  margin:0;
  font-size:32px;
  letter-spacing:0.6px;
  color:var(--ink2);
}
.subtitle{
  margin:10px 0 0;
  font-size:16px;
  line-height:1.6;
  opacity:0.82;
}

.divider{
  display:flex;
  align-items:center;
  gap:14px;
  margin:22px 0 18px;
}
.line{
  height:1px;
  flex:1;
  background:linear-gradient(90deg, transparent, rgba(122,74,46,0.35), transparent);
}
.seal svg{ width:18px; height:18px; color:rgba(122,74,46,0.78); }

.intro{
  margin:0;
  font-size:16px;
  line-height:1.85;
  color:rgba(31,27,22,0.88);
}

/* buttons */
.paths{
  margin-top:26px;
  display:flex;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
}

.tribal-btn{
  position:relative;
  padding:14px 26px;
  border-radius:999px;
  text-decoration:none;
  overflow:hidden;
  border:2px solid rgba(122,74,46,0.55);
  background:linear-gradient(90deg, var(--poetryA), var(--poetryB));
  box-shadow:0 10px 22px rgba(0,0,0,0.25);
  transition:transform 0.16s ease, box-shadow 0.16s ease;
}
.tribal-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(0,0,0,0.35);
}
.tribal-btn.stories{
  background:linear-gradient(90deg, var(--storiesA), var(--storiesB));
  border-color:rgba(47,107,87,0.6);
}

.btn-pattern{
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.08) 0 6px, transparent 6px 12px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.10) 0 6px, transparent 6px 12px);
  opacity:0.35;
  pointer-events:none;
}
.btn-text{
  position:relative;
  z-index:1;
  font-weight:700;
  letter-spacing:1.2px;
  color:#fff;
  text-transform:uppercase;
  font-size:13px;
}

.note{
  margin-top:16px;
  font-size:14px;
  opacity:0.72;
}

/* dojo strip (now uses button vibes) */
.dojo-strip{
  margin-top:14px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.02);
}

.tatami{
  height:14px;
  background:
    repeating-linear-gradient(90deg, rgba(244,239,228,0.16) 0 18px, rgba(244,239,228,0.06) 18px 36px),
    linear-gradient(90deg, rgba(47,107,87,0.22), rgba(122,74,46,0.22));
}

.woodline{
  height:10px;
  background:linear-gradient(90deg, var(--poetryA), var(--storiesA), var(--poetryB), var(--storiesB));
  opacity:0.85;
}

/* bottom pattern */
.pattern{
  height:10px;
  border-radius:8px;
  opacity:0.78;
  background:linear-gradient(90deg, var(--poetryA), rgba(244,239,228,0.10), var(--storiesA), rgba(244,239,228,0.10), var(--poetryB));
}

.footer{
  margin-top:14px;
  font-size:13px;
  opacity:0.70;
  text-align:center;
  color:rgba(244,239,228,0.86);
}

@media (max-width:520px){
  .card{ padding:28px 18px; }
  h1{ font-size:26px; }
}