.guidebook-wrapper {
  width:      100%;
  max-width:  1100px;
  margin:     0 auto;
  box-sizing: border-box;
}

/* header banner */
.guidebook-header {
  position:   relative;
  width:      100%;
  height:     240px;
  overflow:   hidden;
  margin-bottom: 0;
}

.guidebook-header-img {
  position:            absolute;
  inset:               0;
  background-image:    url(https://to-the-bone.net/images/neith%20banner.png);
  background-size:     cover;
  background-position: center;
  background-attachment: fixed;
  filter:              brightness(0.65);
  z-index:             0;
}

.guidebook-header::after {
  content:  '';
  position: absolute;
  inset:    0;
  z-index:  1;
  background:
    linear-gradient(to right,  rgba(14,10,6,0.85) 0%, rgba(14,10,6,0.35) 50%, rgba(14,10,6,0.10) 100%),
    linear-gradient(to top,    rgba(14,10,6,0.90) 0%, rgba(14,10,6,0.00) 55%);
  pointer-events: none;
}

.guidebook-header-content {
  position:       absolute;
  inset:          0;
  z-index:        2;
  display:        flex;
  flex-direction: column;
  justify-content: flex-end;
  padding:        28px 36px;
  box-sizing:     border-box;
}

.guidebook-header-title {
  font-family:    "Cormorant Unicase", serif;
  font-size:      clamp(28px, 4vw, 52px);
  font-style:     italic;
  text-transform: uppercase;
  letter-spacing: 3px;
  line-height:    1;
  filter:         blur(0.4px);
  color:          var(--designtextcolor);
  margin:         0 0 8px;
}

.guidebook-header-sub {
  font-family:    "EB Garamond", serif;
  font-size:      10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color:          var(--designmaincolor);
  opacity:        0.75;
}


/* TAB NAVIGATION */
.guidebook-nav {
  display:                 flex;
  align-items:             stretch;
  backdrop-filter:         blur(22px) brightness(36%);
  -webkit-backdrop-filter: blur(22px) brightness(36%);
  background:              rgba(14, 9, 4, 0.65);
  border-bottom:           1px solid rgba(250, 240, 207, 0.12);
  box-sizing:              border-box;
  flex-wrap:               wrap;
}

.guidebook-nav a,
.guidebook-nav a:visited {
  display:        inline-block;
  padding:        14px 28px;
  font-family:    "Cormorant Unicase", serif;
  font-size:      11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color:          rgba(250, 240, 207, 0.45);
  text-decoration: none;
  border-right:   1px solid rgba(250, 240, 207, 0.08);
  border-bottom:  2px solid transparent;
  transition:     color .25s, border-color .25s, background .25s;
  box-sizing:     border-box;
}

.guidebook-nav a:hover {
  color:          var(--designmaincolor);
  border-bottom-color: var(--designmaincolor);
  background:     rgba(217, 185, 106, 0.06);
}

/* active tab */
.guidebook-nav a.active {
  color:          var(--designmaincolor);
  border-bottom:  2px solid var(--designmaincolor);
  background:     rgba(217, 185, 106, 0.08);
}

/* home/intro link at far right */
.guidebook-nav a.guidebook-home {
  margin-left:  auto;
  border-right: none;
  border-left:  1px solid rgba(250, 240, 207, 0.08);
  font-size:    9px;
  letter-spacing: 4px;
  opacity:      0.5;
}

.guidebook-nav a.guidebook-home:hover { opacity: 1; }


/* contenttt */
.guidebook-content {
  display:                 flex;
  min-height:              600px;
  backdrop-filter:         blur(18px) brightness(42%) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) brightness(42%) saturate(1.1);
  background:              rgba(14, 9, 4, 0.52);
  border:                  1px solid rgba(250, 240, 207, 0.10);
  border-top:              none;
  box-sizing:              border-box;
}

/* sidebar for sub-navigation if needed */
.guidebook-sidebar {
  flex:          0 0 200px;
  width:         200px;
  border-right:  1px solid rgba(250, 240, 207, 0.10);
  padding:       28px 0;
  box-sizing:    border-box;
}

.guidebook-sidebar-link,
.guidebook-sidebar-link:visited {
  display:        block;
  padding:        8px 20px;
  font-family:    "EB Garamond", serif;
  font-size:      10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          rgba(250, 240, 207, 0.40);
  text-decoration: none;
  border-left:    2px solid transparent;
  transition:     color .25s, border-color .25s;
}

.guidebook-sidebar-link:hover,
.guidebook-sidebar-link.active {
  color:          var(--designmaincolor);
  border-left-color: var(--designmaincolor);
}

/* main text area */
.guidebook-main {
  flex:        1;
  padding:     40px 48px;
  box-sizing:  border-box;
  min-width:   0;
}

/* broke the link colors so im just rewriting them back in to see if this works lmao */
.guidebook-content a:link,
.guidebook-content a:visited {
  color: var(--designmaincolor);
  text-decoration: none;
  transition: color .25s, opacity .25s;
}

.guidebook-content a:hover,
.guidebook-content a:active {
  color: var(--designtextcolor);
  opacity: 0.85;
}

/* sidebar nav links */
.guidebook-nav a:link,
.guidebook-nav a:visited {
  color: rgba(250, 240, 207, 0.55);
  text-decoration: none;
  transition: color .25s;
}

.guidebook-nav a:hover {
  color: var(--designmaincolor);
}

/* page title inside content */
.guidebook-page-title {
  font-family:    "Cormorant Unicase", serif;
  font-size:      24px;
  font-style:     italic;
  text-transform: uppercase;
  letter-spacing: 3px;
  color:          var(--designmaincolor);
  margin:         0 0 6px;
  filter:         blur(0.3px);
}

.guidebook-page-divider {
  width:         60px;
  height:        1px;
  background:    var(--designmaincolor);
  opacity:       0.4;
  margin:        0 0 28px;
}

/* body text */
.guidebook-main p,
.guidebook-main li {
  font-family:  "EB Garamond", serif;
  font-size:    14px;
  line-height:  1.9;
  color:        var(--designtextcolor);
  opacity:      0.85;
  text-align:   justify;
  margin:       0 0 16px;
}

.guidebook-main h2 {
  font-family:    "Cormorant Unicase", serif;
  font-size:      16px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color:          var(--designmaincolor);
  margin:         32px 0 12px;
  padding-bottom: 8px;
  border-bottom:  1px solid rgba(250, 240, 207, 0.12);
}

.guidebook-main h3 {
  font-family:    "EB Garamond", serif;
  font-size:      13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          rgba(250, 240, 207, 0.60);
  margin:         20px 0 8px;
  font-weight:    normal;
  font-style:     italic;
  text-align:     left;
  width:          auto;
}

/* info boxes for rules / important notes */
.guidebook-box {
  padding:     18px 22px;
  margin:      20px 0;
  border:      1px solid rgba(250, 240, 207, 0.15);
  background:  rgba(250, 240, 207, 0.04);
  backdrop-filter:         blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-family: "EB Garamond", serif;
  font-size:   13px;
  line-height: 1.8;
  color:       var(--designtextsubcolor);
}

.guidebook-box.gold {
  border-color: rgba(217, 185, 106, 0.30);
  background:   rgba(217, 185, 106, 0.06);
}

/* INTRODUCTION / LANDING PAGE */
.guidebook-intro {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  text-align:     center;
  padding:        60px 48px;
  min-height:     400px;
  gap:            20px;
}

.guidebook-intro-title {
  font-family:    "Cormorant Unicase", serif;
  font-size:      clamp(22px, 3vw, 38px);
  font-style:     italic;
  text-transform: uppercase;
  letter-spacing: 4px;
  color:          var(--designmaincolor);
  filter:         blur(0.3px);
}

.guidebook-intro-text {
  font-family:  "EB Garamond", serif;
  font-size:    14px;
  line-height:  1.9;
  color:        var(--designtextcolor);
  opacity:      0.75;
  max-width:    600px;
}

.guidebook-ornament {
  color:        var(--designmaincolor);
  opacity:      0.4;
  font-size:    18px;
  letter-spacing: 12px;
}