:root {
  --espresso: #160f0b;
  --walnut: #2b1a12;
  --cognac: #9c4e24;
  --amber: #d89a45;
  --paper: #eee5d5;
  --cream: #f8f2e7;
  --wine: #702a27;
  --navy: #17333c;
  --serif: Georgia,"Times New Roman",serif;
  --sans: Arial,Helvetica,sans-serif
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--espresso);
  font-family: var(--sans);
  font-size: 16px
}

a {
  text-decoration: none;
  color: inherit
}

.nav-shell {
  height: 84px;
  background: #140e0bdd;
  color: #fff;
  backdrop-filter: blur(14px);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(1.2rem,5vw,5rem);
  border-bottom: 1px solid #ffffff1d
}

.monogram {
  display: flex;
  align-items: center;
  gap: .75rem
}

.monogram>b {
  font: italic 800 1.5rem var(--serif);
  border: 1px solid #b9844d;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: #e8c291
}

.monogram span {
  font-size: .65rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .08em
}

.monogram em {
  font: normal 1.15rem var(--serif);
  color: #e8c291;
  letter-spacing: .13em
}

.nav-shell nav {
  display: flex;
  gap: clamp(1rem,2vw,2.25rem);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .11em;
  font-weight: 800
}

.nav-shell nav a:hover {
  color: #e8c291
}

.contact {
  border: 1px solid #b9844d;
  padding: .8rem 1rem;
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .12em
}

.menu,.mobile {
  display: none
}

.den-hero {
  height: min(860px,100vh);
  min-height: 720px;
  background: url("media/kevin-den.png") center/cover no-repeat;
  position: relative;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 10px clamp(22.4px, 8vw, 60px) 10px;
}

.den-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,#080706e8 0%,#080706b3 34%,#08070628 62%,#08070600)
}

.welcome {
  position: relative;
  width: min(610px,50vw);
  z-index: 2
}

.overline,.room-title>span,.panel-label,.culture-card>span,.humor-card>small,.merch-room>div>span,.see-copy>span {
  font-size: .66rem;
  letter-spacing: .22em;
  font-weight: 900;
  color: #d7aa75
}

.welcome h1 {
  padding-left:25px;
  font: 400 clamp(5rem,8vw,8.6rem)/.79 var(--serif);
  margin: 1.5rem 0
}

.welcome h1 i {
  color: #d7aa75
}

.welcome>p {
  font: italic 1.3rem/1.6 var(--serif);
  max-width: 570px;
  color: #eee2d2
}

.welcome-actions {
padding-left:25px;
  display: flex;
  gap: 1rem;
  margin-top: 2rem
}

.welcome-actions a,.welcome-actions button {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 1rem 1.2rem;
  font-size: .68rem;
  letter-spacing: .12em;
  font-weight: 900
}

.welcome-actions a {
  background: #a75a2d
}

.welcome-actions button {
  background: transparent;
  border: 1px solid #b9844d;
  color: #fff
}

.welcome-actions svg {
  width: 17px
}

.house-note {
  position: absolute;
  right: 4%;
  bottom: 5%;
  width: 350px;
  background: #140e0bcc;
  border-left: 3px solid #d7aa75;
  padding: 1.3rem
}

.house-note span {
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .18em;
  color: #d7aa75
}

.house-note p {
  font: italic 1rem/1.5 var(--serif);
  margin: .6rem 0 0
}

.room-guide {
  background: #20140e;
  color: #fff;
  padding: 3rem clamp(1.3rem,6vw,6rem) 4rem
}

.script {
  font: italic 2rem var(--serif);
  color: #d7aa75;
  margin: 0 0 2rem
}

.rooms {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  border-top: 1px solid #ffffff2b;
  border-bottom: 1px solid #ffffff2b
}

.rooms a {
  padding: 1.5rem;
  border-right: 1px solid #ffffff2b;
  display: grid;
  gap: .5rem
}

.rooms a:last-child {
  border: 0
}

.rooms a:hover {
  background: #ffffff0b
}

.rooms small {
  color: #d7aa75
}

.rooms b {
  font: 1.25rem var(--serif)
}

.rooms span {
  font-size: .72rem;
  color: #b8a898
}

.room {
  padding: 7rem clamp(1.3rem,6vw,7rem)
}

.room-title {
  display: grid;
  grid-template-columns: .45fr 1fr 1fr;
  gap: 2rem;
  align-items: end;
  border-bottom: 1px solid #b7a994;
  padding-bottom: 2rem;
  margin-bottom: 3rem
}

.room-title h2 {
  font: 400 clamp(4.5rem,7vw,7rem)/.8 var(--serif);
  margin: 0
}

.room-title p {
  font: italic 1.05rem/1.6 var(--serif);
  margin: 0;
  max-width: 500px
}

.politics-room {
  background: var(--paper)
}

.politics-grid {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 1.5rem
}

.commentary-panel {
  background: var(--cream);
  padding: 2.5rem
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 1rem
}

.panel-head span {
  font-size: .65rem;
  letter-spacing: .16em;
  font-weight: 900;
  color: #8d4e27
}

.panel-head h3,.radio-panel h3 {
  font: 400 2.4rem/1 var(--serif);
  margin: .5rem 0
}

.panel-head a,.underlink {
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .1em;
  display: flex;
  gap: .4rem;
  align-items: center
}

.story {
  display: grid;
  grid-template-columns: 35px 1fr auto;
  gap: 1rem;
  padding: 1.25rem 0;
  border-top: 1px solid #c9bdab;
  align-items: start
}

.story small {
  color: #aa7048
}

.story h4 {
  font: 400 1.35rem var(--serif);
  margin: 0 0 .35rem
}

.story p {
  font-size: .82rem;
  color: #70655b;
  margin: 0
}

.story:hover h4 {
  color: #9c4e24
}

.radio-panel {
  background: #3a1e14;
  color: #fff;
  padding: 2.5rem
}

.radio-dial {
  display: flex;
  justify-content: space-between;
  color: #d7aa75
}

.radio-dial span {
  font-size: .6rem;
  letter-spacing: .15em
}

.radio-panel h3 {
  font-size: 2.8rem
}

.radio-intro {
  color: #c6b7a8;
  line-height: 1.5
}

.episode {
  display: flex;
  gap: 1rem;
  padding: 1.2rem 0;
  border-top: 1px solid #ffffff24
}

.episode button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #d7aa75;
  background: transparent;
  color: #d7aa75
}

.episode div {
  display: grid;
  gap: .25rem
}

.episode small {
  font-size: .55rem;
  color: #d7aa75
}

.episode b {
  font: 1.1rem var(--serif)
}

.episode span {
  font-size: .76rem;
  color: #c6b7a8;
  line-height: 1.4
}

.underlink {
  margin-top: 1.2rem;
  color: #d7aa75
}

.culture-room {
  background: #111;
  color: #fff
}

.room-title.light {
  border-color: #ffffff33
}

.culture-grid {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 1.5rem
}

.culture-card {
  min-height: 530px;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden
}

.culture-card h3 {
  font: 400 clamp(3.5rem,6vw,6rem)/.9 var(--serif);
  margin: 1rem 0
}

.culture-card>p {
  max-width: 520px;
  font: italic 1.05rem/1.6 var(--serif)
}

.culture-card>b,.humor-card>b {
  display: flex;
  gap: .5rem;
  align-items: center;
  font-size: .66rem;
  letter-spacing: .13em;
  margin-top: auto
}

.tff {
  background: linear-gradient(135deg,#54201d,#1b0d0b)
}

.rtm {
  background: linear-gradient(145deg,#b3672f,#593117)
}

.rtm>svg {
  width: 55px;
  height: 55px;
  margin-bottom: auto
}

.talan {
  position: absolute;
  right: -5%;
  bottom: -4%;
  width: 48%;
  min-height: 250px;
  border: 1px solid #d7aa75;
  background: #100b09d9;
  padding: 2rem;
  transform: rotate(-2deg)
}

.talan small {
  letter-spacing: .15em
}

.talan strong {
  display: block;
  font: 400 4rem/.9 var(--serif);
  color: #d7aa75;
  margin-top: 1rem
}

.talan em {
  font-size: .7rem;
  letter-spacing: .2em
}

.talan p {
  font: italic .9rem var(--serif)
}

.humor-room {
  background: #f5eee3
}

.humor-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1.5rem
}

.humor-card {
  min-height: 440px;
  padding: 2.3rem;
  display: flex;
  flex-direction: column;
  border: 1px solid #b8aa96
}

.humor-card>svg {
  width: 40px;
  height: 40px;
  margin-bottom: auto;
  color: #9c4e24
}

.humor-card h3 {
  font: 400 2.4rem/1.05 var(--serif);
  margin: 1rem 0
}

.humor-card p {
  line-height: 1.5;
  color: #6a5e52
}

.humor-card.book {
  background: #8d382e;
  color: #fff;
  border: 0;
  transform: rotate(-1deg)
}

.humor-card.book p {
  color: #efded0
}

.merch-room {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  background: #b66d39;
  color: #1a100c;
  padding: 6rem clamp(1.3rem,7vw,8rem);
  gap: 5rem;
  align-items: center
}

.merch-room h2 {
  font: 400 clamp(4rem,7vw,7rem)/.83 var(--serif);
  margin: 1rem 0
}

.merch-room p {
  font: italic 1rem/1.6 var(--serif)
}

.merch-room a,.see-copy a {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  background: #1a100c;
  color: #fff;
  padding: 1rem 1.2rem;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .12em;
  margin-top: 1rem
}

.merch-wall {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1rem;
  align-items: center
}

.merch-wall span {
  background: #eee5d5;
  min-height: 210px;
  display: grid;
  place-items: center;
  text-align: center;
  font: 700 1.6rem/1.1 var(--serif);
  box-shadow: 15px 20px 25px #3b1b0c44;
  transform: rotate(-3deg)
}

.merch-wall span:nth-child(2) {
  background: #1a100c;
  color: #fff;
  transform: rotate(2deg)
}

.merch-wall span:nth-child(3) {
  background: #efe7d8;
  transform: rotate(-1deg)
}

.merch-wall i {
  color: #b66d39
}

.see-room {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #f4f0e8
}

.see-photo img {
  width: 100%;
  height: 100%;
  min-height: 590px;
  object-fit: cover;
  filter: sepia(.2)
}

.see-copy {
  padding: 6rem clamp(2rem,7vw,8rem)
}

.see-copy>svg {
  width: 50px;
  height: 50px;
  color: #224956;
  margin-bottom: 2rem
}

.see-copy>span {
  color: #224956
}

.see-copy h2 {
  font: 400 clamp(3.4rem,5vw,5.3rem)/.9 var(--serif);
  margin: 1rem 0 2rem
}

.see-copy p {
  line-height: 1.7;
  color: #514b44
}

.see-copy a {
  background: #224956
}

.goodnight {
  background: #1c120d;
  color: #fff;
  padding: 7rem 2rem;
  text-align: center
}

.goodnight h2 {
  font: 400 clamp(4rem,7vw,7rem)/.87 var(--serif);
  margin: 1rem
}

.goodnight div {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem
}

.goodnight a {
  border: 1px solid #a97a4b;
  padding: 1rem 1.2rem;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .12em
}

footer {
  background: #0d0907;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2.5rem clamp(1.3rem,5vw,5rem)
}

footer p,footer small {
  font-size: .6rem;
  letter-spacing: .12em;
  color: #ac9a89
}

@media(max-width:1050px) {
  .nav-shell nav,.contact {
    display: none
  }

  .menu {
    display: grid;
    background: transparent;
    border: 0;
    color: #fff
  }

  .mobile {
    position: absolute;
    top: 84px;
    left: 0;
    right: 0;
    background: #180f0c;
    padding: 1.5rem 2rem;
    display: grid;
    gap: 1rem
  }

  .welcome {
    width: 70vw
  }

  .rooms {
    grid-template-columns: repeat(2,1fr)
  }

  .politics-grid,.culture-grid,.see-room,.merch-room {
    grid-template-columns: 1fr
  }

  .room-title {
    grid-template-columns: 1fr
  }

  .humor-grid {
    grid-template-columns: 1fr
  }

  .talan {
    position: relative;
    width: 70%;
    right: auto;
    bottom: auto;
    margin-top: 3rem
  }

  .merch-wall {
    margin-top: 2rem
  }

}

@media(max-width:640px) {
  .nav-shell {
    height: 72px;
    padding: 0 1rem
  }

  .monogram>b {
    width: 40px;
    height: 40px
  }

  .mobile {
    top: 72px
  }

  .den-hero {
    min-height: 760px;
    padding: 7rem 1.2rem 4rem;
    background-position: 64% center
  }

  .den-overlay {
    background: #080706b8
  }

  .welcome {
    width: 100%
  }

  .welcome h1 {
    font-size: 4.2rem
  }

  .welcome>p {
    font-size: 1.05rem
  }

  .welcome-actions {
    flex-direction: column;
    align-items: flex-start
  }

  .house-note {
    left: 1.2rem;
    right: 1.2rem;
    bottom: 2rem;
    width: auto
  }

  .room-guide {
    padding: 3rem 1.2rem
  }

  .rooms {
    grid-template-columns: 1fr
  }

  .rooms a {
    border-right: 0;
    border-bottom: 1px solid #ffffff2b
  }

  .room {
    padding: 5rem 1.2rem
  }

  .room-title h2 {
    font-size: 4rem
  }

  .commentary-panel,.radio-panel {
    padding: 1.4rem
  }

  .panel-head {
    align-items: flex-start;
    gap: 1rem
  }

  .story {
    grid-template-columns: 28px 1fr
  }

  .story>svg {
    display: none
  }

  .culture-card {
    padding: 2rem;
    min-height: 500px
  }

  .culture-card h3 {
    font-size: 3.5rem
  }

  .talan {
    width: 100%
  }

  .merch-room {
    padding: 5rem 1.2rem;
    gap: 2rem
  }

  .merch-wall {
    grid-template-columns: 1fr
  }

  .see-copy {
    padding: 5rem 1.2rem
  }

  .goodnight {
    padding: 5rem 1.2rem
  }

  .goodnight h2 {
    font-size: 3.7rem
  }

  .goodnight div {
    flex-direction: column
  }

  footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 2rem
  }

}

/* The Back Stage Club */
.den-hero {
  background-image: url("media/back-stage-club.png")
}

/* Property artwork refresh */
.den-hero {
  background-image: url("media/back-stage-club-kevin-crop.webp")
}

.tff {
  background: linear-gradient(90deg,#12090ae8 0%,#12090ab5 55%,#12090a70),url("media/tff-main.jpg") center/cover no-repeat
}

.rtm {
  background: linear-gradient(145deg,#1a0f08e6,#1a0f0870),url("media/rtm-official.webp") center/cover no-repeat
}

.property-mark {
  display: block;
  object-fit: contain;
  object-position: left center;
  position: relative;
  z-index: 1
}

.tff-mark {
  width: min(250px,55%);
  height: auto;
  margin-bottom: 2rem
}

.talan {
  background: #100b09e8
}

.see-photo {
  min-height: 590px;
  display: grid;
  place-items: center;
  padding: clamp(3rem,7vw,7rem);
  background: radial-gradient(circle at 50% 42%,#f9fbfd 0%,#dbe6ec 55%,#b6cad4 100%)
}

.see-photo img {
  width: min(100%,680px);
  height: auto;
  min-height: 0;
  object-fit: contain;
  filter: none
}

.den-overlay {
  background: linear-gradient(90deg,#080706ed 0%,#080706bd 29%,#08070642 54%,#08070608)
}

.bsc-room {
  background: radial-gradient(circle at 12% 10%,#493022 0,#21150f 38%,#100b09 100%);
  color: #fff;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem,7vw,7rem);
  padding: 7rem clamp(1.3rem,7vw,8rem);
  border-top: 1px solid #d7aa7535;
  border-bottom: 1px solid #d7aa7535
}

.bsc-intro>span,.bsc-access>span {
  font-size: .65rem;
  letter-spacing: .22em;
  font-weight: 900;
  color: #d7aa75
}

.bsc-intro h2 {
  font: 400 clamp(3.8rem,6vw,6.3rem)/.88 var(--serif);
  margin: 1.2rem 0 2rem;
  max-width: 720px
}

.bsc-intro h2 i {
  color: #d7aa75
}

.bsc-intro>p {
  font: italic 1.08rem/1.7 var(--serif);
  color: #d6c8ba;
  max-width: 620px
}

.bsc-intro form {
  display: flex;
  margin-top: 2.2rem;
  max-width: 620px
}

.bsc-intro input {
  min-width: 0;
  flex: 1;
  background: #ffffff0a;
  border: 1px solid #ffffff2c;
  border-right: 0;
  color: #fff;
  padding: 1rem 1.2rem;
  outline: none
}

.bsc-intro input::placeholder {
  color: #a99c91
}

.bsc-intro button {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: #a75a2d;
  border: 1px solid #a75a2d;
  color: #fff;
  padding: 1rem 1.15rem;
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .11em;
  white-space: nowrap
}

.bsc-intro button svg {
  width: 16px
}

.bsc-intro small {
  display: block;
  color: #8e8178;
  font-size: .66rem;
  margin-top: .8rem
}

.bsc-access {
  align-self: center;
  border-top: 1px solid #ffffff27
}

.bsc-access>span {
  display: block;
  padding: 1.1rem 0;
  border-bottom: 1px solid #ffffff27
}

.bsc-access article {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 1rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid #ffffff27
}

.bsc-access article>b {
  font: italic 1rem var(--serif);
  color: #d7aa75
}

.bsc-access h3 {
  font: 400 1.65rem var(--serif);
  margin: 0 0 .4rem
}

.bsc-access p {
  font-size: .82rem;
  line-height: 1.55;
  color: #a99c91;
  margin: 0;
  max-width: 500px
}

@media(max-width:1050px) {
  .bsc-room {
    grid-template-columns: 1fr
  }

  .bsc-access {
    margin-top: 1rem
  }

}

@media(max-width:640px) {
  .den-overlay {
    background: #080706c7
  }

  .bsc-room {
    padding: 5rem 1.2rem
  }

  .bsc-intro h2 {
    font-size: 3.6rem
  }

  .bsc-intro form {
    flex-direction: column
  }

  .bsc-intro input {
    border-right: 1px solid #ffffff2c
  }

  .bsc-intro button {
    justify-content: center
  }

  .bsc-access h3 {
    font-size: 1.4rem
  }

}

/* Product photography and closing portrait */
.merch-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  transform: rotate(1deg)
}

.merch-gallery img {
  display: block;
  width: 100%;
  height: 230px;
  object-fit: cover;
  border: 7px solid #efe5d5;
  box-shadow: 15px 20px 25px #3b1b0c4f
}

.merch-gallery img:first-child {
  grid-row: span 2;
  height: 476px;
  transform: rotate(-2deg)
}

.merch-gallery img:nth-child(2) {
  transform: rotate(1.5deg)
}

.merch-gallery img:nth-child(3) {
  transform: rotate(-1deg)
}

.goodnight {
  min-height: 620px;
  display: grid;
  grid-template-columns: 1fr minmax(300px,520px);
  align-items: end;
  text-align: left;
  padding: 6rem clamp(2rem,8vw,9rem) 0;
  overflow: hidden
}

.goodnight>.goodnight-copy {
  display: block;
  align-self: center;
  padding-bottom: 5rem;
  position: relative;
  z-index: 2;
  margin-top: 0
}

.goodnight-copy h2 {
  margin: 1rem 0
}

.goodnight .last-word {
  max-width: 520px;
  color: #bcae9f;
  font: italic 1rem/1.6 var(--serif)
}

.goodnight-copy>div {
  justify-content: flex-start
}

.goodnight>img {
  display: block;
  width: 100%;
  max-height: 570px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 0 28px #d7aa7529)
}

@media(max-width:1050px) {
  .merch-gallery {
    margin-top: 2rem
  }

  .goodnight {
    grid-template-columns: 1fr .75fr;
    padding-left: clamp(1.3rem,5vw,4rem);
    padding-right: 0
  }

  .goodnight h2 {
    font-size: clamp(3.5rem,6vw,5.5rem)
  }

}

@media(max-width:640px) {
  .merch-gallery {
    grid-template-columns: 1fr
  }

  .merch-gallery img,.merch-gallery img:first-child {
    height: auto;
    grid-row: auto
  }

  .goodnight {
    min-height: 0;
    grid-template-columns: 1fr;
    padding: 5rem 1.2rem 0
  }

  .goodnight-copy {
    padding-bottom: 2rem
  }

  .goodnight>img {
    max-height: 440px
  }

  .goodnight-copy>div {
    flex-direction: column
  }

  .goodnight h2 {
    font-size: 3.5rem
  }

}

[hidden] {
  display: none!important
}

section[id] {
  scroll-margin-top: 84px
}

button,input {
  font: inherit
}

button,a {
  touch-action: manipulation
}

button {
  cursor: pointer
}

.icon {
  display: inline-block;
  width: 1.1em;
  flex-shrink: 0;
  font-size: 1.15em
}

.humor-card>.icon,.see-copy>.icon {
  font-size: 2.4rem;
  margin-bottom: 1.5rem;
  color: #9c4e24
}

.episode-play {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border: 1px solid #d7aa75;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #d7aa75
}

.welcome-actions .listen-link {
  background: transparent;
  border: 1px solid #b9844d;
  color: #fff
}

a:focus-visible,button:focus-visible,input:focus-visible {
  outline: 3px solid #d89a45;
  outline-offset: 5px
}

.skip-link {
  position: fixed;
  top: 0;
  left: 1rem;
  transform: translateY(-150%);
  z-index: 100;
  background: #eee5d5;
  color: #160f0b;
  padding: 1rem
}

.skip-link:focus {
  transform: translateY(0)
}

#club-status {
  font: 1rem/1.5 Arial,sans-serif;
  color: #eee5d5
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }

}

.story-meta {
  display: block;
  font-size: .72rem;
  color: #8d4e27;
  margin-bottom: .5rem
}

/* Reserve space for the fixed menu so the hero starts below it. */
main {
  padding-top: 84px;
}

@media (max-width:640px) {
  main {
    padding-top: 72px;
  }

}

.kjn-book-promo,
  .kjn-book-promo * { box-sizing: border-box; }
  .kjn-book-promo {
    background: #071a38;
    color: #fffaf0;
    padding: clamp(32px, 6vw, 76px) 24px;
    border-top: 4px solid #d7aa50;
    font-family: Arial, Helvetica, sans-serif;
  }
  .kjn-book-promo .kjn-book-inner {
    width: 100%; max-width: 1080px; margin: 0 auto;
    display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    align-items: center; gap: clamp(32px, 6vw, 80px);
  }
  .kjn-book-promo .kjn-book-eyebrow {
    margin: 0 0 18px; color: #d7aa50;
    font-size: 12px; font-weight: 700; line-height: 1.5;
    letter-spacing: .16em; text-transform: uppercase;
  }
  .kjn-book-promo .kjn-book-title {
    margin: 0 0 20px; padding: 0; color: #fffaf0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(38px, 5vw, 64px); font-weight: 400;
    line-height: 1.06; letter-spacing: -.035em; text-transform: none;
  }
  .kjn-book-promo .kjn-book-title span { color: #d7aa50; }
  .kjn-book-promo .kjn-book-description {
    max-width: 540px; margin: 0 0 28px; color: #e1e5ed;
    font-size: 18px; line-height: 1.7;
  }
  .kjn-book-promo .kjn-book-button {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 14px; min-height: 52px; max-width: 100%; padding: 15px 24px;
    border: 2px solid #d7aa50; border-radius: 3px;
    background: #d7aa50; color: #071a38;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px; font-weight: 700; line-height: 1.4;
    text-align: center; text-decoration: none;
  }
  .kjn-book-promo .kjn-book-button:hover {
    background: #f0cb7e; border-color: #f0cb7e; color: #071a38;
  }
  .kjn-book-promo a:focus-visible {
    outline: 3px solid #fffaf0; outline-offset: 6px;
  }
  .kjn-book-promo .kjn-book-byline {
    margin: 18px 0 0; color: #bbc7d7; font-size: 14px; line-height: 1.5;
  }
  .kjn-book-promo .kjn-book-art {
    display: block; width: 100%; max-width: 300px;
    justify-self: center; text-decoration: none;
  }
  .kjn-book-promo .kjn-book-cover {
    display: block; width: 100%; height: auto; margin: 0;
    filter: drop-shadow(0 22px 24px rgba(0, 0, 0, .35));
  }
  @media (max-width: 640px) {
    .kjn-book-promo .kjn-book-inner { grid-template-columns: minmax(0, 1fr); }
    .kjn-book-promo .kjn-book-art { max-width: 210px; }
    .kjn-book-promo .kjn-book-description { font-size: 17px; }
  }

  .button {
  display: inline-block;
  background: #B45309;
  color: #fff;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
}

.button:hover {
  background: #924007;
}