@font-face{
  font-family: Fraunces;
  src: url('assets/Fraunces-Title.ttf') format('truetype');
  font-display:swap
}
:root{
  --forest: #21392f;
  --deep: #182b24;
  --cream: #f4eee2;
  --paper: #e7ddca;
  --gold: #b99257;
  --rust: #965b3c;
  --ink: #28382f;
  --muted: #62695e;
  --line: #d7cdbb;
  color-scheme:light
}
*{
  box-sizing:border-box
}
html{
  scroll-behavior: smooth;
  scroll-padding-top:30px
}
body{
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: Avenir,'Avenir Next',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing:antialiased
}
button,a{
  -webkit-tap-highlight-color:transparent
}
button{
  font: inherit;
  cursor:pointer
}
button:disabled{
  cursor:default
}
a{
  color: inherit;
  text-underline-offset:5px
}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline: 3px solid var(--rust);
  outline-offset:5px
}
button:disabled{
  opacity:1
}
[hidden]{
  display:none!important
}
.skip-link{
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 10;
  background: var(--cream);
  padding: 12px;
  transform:translateY(-160%)
}
.skip-link:focus{
  transform:none
}
.masthead{
  max-width: 1440px;
  margin: auto;
  padding: 23px 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap:20px
}
.wordmark{
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-family: Georgia,serif;
  font-style: italic;
  font-size:17px
}
.masthead-date,.eyebrow{
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  line-height:1.5
}
.masthead-date{
  letter-spacing: 1.5px;
  font-size:10px
}
.eyebrow{
  margin:0 0 20px
}
.rust{
  color:var(--rust)
}
h1,h2,h3{
  font-family: Fraunces,Georgia,serif;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing:-.025em
}
h2{
  font-size: clamp(34px,4vw,54px);
  margin:0
}
p{
  margin:0 0 20px
}
.hero{
  display: grid;
  grid-template-columns: 1.18fr 1fr;
  max-width: 1440px;
  min-height: 660px;
  margin:auto
}
.hero-picture{
  position: relative;
  min-height: 660px;
  isolation: isolate;
  overflow: hidden;
  background: var(--forest);
  color:var(--cream)
}
.hero-art{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 64%;
  z-index:-2
}
.hero-picture:after{
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:linear-gradient(180deg,rgba(18,33,30,.12),rgba(18,33,30,.45) 50%,rgba(12,24,21,.68))
}
.hero-copy{
  padding: 65px 12%;
  max-width:650px
}
h1{
  font-size: clamp(62px,7vw,100px);
  margin: 80px 0 32px;
  line-height: .99;
  letter-spacing:-.035em
}
.hero-subtitle{
  font-size: 16px;
  max-width: 330px;
  line-height:1.7
}
.hero-footnote{
  position: absolute;
  left: 12%;
  bottom: 34px;
  letter-spacing: 1.7px;
  text-transform: uppercase;
  font-size:9px
}
.hero-letter{
  background: var(--paper);
  padding: 72px 14% 55px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content:center
}
.hero-letter h2{
  font-size:clamp(50px,5vw,69px)
}
.gold-rule{
  height: 1px;
  width: 60px;
  background: var(--gold);
  margin:28px 0
}
.pullquote{
  font-family: Georgia,'Times New Roman',serif;
  font-style: italic;
  font-size: 21px;
  line-height: 1.6;
  color:var(--rust)
}
.hero-letter>p:not(.eyebrow):not(.pullquote){
  font-size: 14px;
  max-width:330px
}
.text-link{
  font-size: 12px;
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding: 4px 0;
  display: inline-flex;
  align-items: center;
  gap:20px
}
.quiet-button{
  margin-top: 23px;
  padding: 5px 0;
  border: 0;
  background: none;
  font-size: 12px;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset:6px
}
.chapters-section{
  max-width: 1440px;
  padding: 90px 5% 70px;
  margin:auto
}
.section-heading{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom:28px
}
.section-heading .eyebrow{
  margin-bottom:16px
}
.section-note{
  font-size: 13px;
  color: var(--muted);
  max-width: 240px;
  margin:0 0 6px
}
.next-release{
  min-height: 25px;
  margin-bottom: 32px;
  color: var(--rust);
  font-size:12px
}
.envelope-grid{
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap:22px
}
.chapter{
  min-width:0
}
.envelope{
  position: relative;
  background: var(--forest);
  min-height: 300px;
  width: 100%;
  padding: 30px 24px 23px;
  border: 1px solid #385246;
  color: var(--cream);
  text-align: left;
  overflow: hidden;
  box-shadow: 0 10px 18px -14px #152b2459;
  transition:transform .2s,box-shadow .2s
}
.envelope:before{
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 90px;
  background: linear-gradient(160deg,#56735e1f,#041f1533);
  clip-path: polygon(0 0,100% 0,50% 100%);
  border-top:1px solid #60796066
}
.envelope:after{
  content: '';
  position: absolute;
  left: 50%;
  top: 64px;
  width: 36px;
  height: 36px;
  border: 1px solid #ad915f;
  background: #aa8c59;
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow:0 2px 4px #0002
}
.seal-number{
  position: absolute;
  left: 50%;
  top: 72px;
  transform: translateX(-50%);
  font-family: Georgia,serif;
  font-size: 12px;
  color: #253a2d;
  z-index: 1;
  letter-spacing:1px
}
.envelope .eyebrow{
  display: block;
  position: relative;
  margin: 0 0 82px;
  color: #dfd7c4;
  font-size: 9px;
  letter-spacing:1.5px
}
.chapter-title{
  display: block;
  min-height: 74px;
  font-family: Fraunces,Georgia,serif;
  font-size: 27px;
  line-height: 1.12;
  letter-spacing:-.015em
}
.envelope-footer{
  border-top: 1px solid #6f806659;
  margin-top: 17px;
  padding-top: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  letter-spacing: .3px;
  color: #e3d3b7;
  gap:10px
}
.envelope-footer svg{
  flex-shrink:0
}
.envelope.available{
  background: #2c4839;
  border-color:#9a8355
}
.envelope.available:hover{
  transform: translateY(-4px);
  box-shadow:0 14px 20px -14px #152b2477
}
.chapter-meta{
  padding: 15px 2px;
  color: var(--muted);
  font-size: 11px;
  line-height:1.7
}
.chapter-meta p{
  margin:0
}
.chapter-day-link{
  margin-top: 7px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--gold);
  color: var(--ink);
  padding: 3px 0;
  text-align: left;
  font-size: 12px;
  line-height:1.6
}
.clock-note{
  color: var(--muted);
  font-size: 11px;
  text-align: center;
  margin:30px 0 0
}
.surprise-section{
  max-width: 1296px;
  margin: 0 auto 70px;
  padding: 55px 30px;
  text-align: center;
  background: var(--forest);
  color:var(--cream)
}
.surprise-section h2{
  margin-bottom: 15px;
  font-size:48px
}
.surprise-section>p:not(.eyebrow){
  font-family: Georgia,serif;
  font-style:italic
}
.light-button{
  border: 1px solid #c6a66e;
  color: var(--forest);
  background: var(--cream);
  padding: 14px 22px;
  font-size: 13px;
  min-height:48px
}
.light-button:disabled{
  background: transparent;
  color:#e4d2b4
}
.surprise-time{
  font-size: 12px;
  margin:15px 0 0
}
.site-footer{
  border-top: 1px solid var(--line);
  padding: 40px 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  font-size: 11px;
  color:var(--muted)
}
.site-footer p{
  margin: 0;
  text-align:center
}
.site-footer .footer-title{
  font-family: Fraunces,Georgia,serif;
  font-size: 22px;
  color:var(--ink)
}
.mobile-break{
  display:none
}
dialog{
  border: 0;
  background: var(--cream);
  padding: 0;
  color: var(--ink);
  width: min(920px,calc(100vw - 40px));
  max-height: 92dvh;
  overflow: auto;
  box-shadow:0 20px 120px #0004
}
dialog::backdrop{
  background: #10251dde;
  backdrop-filter:blur(4px)
}
body:has(dialog[open]){
  overflow:hidden
}
.dialog-bar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 15px 28px;
  background: var(--cream);
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom:1px solid var(--line)
}
.dialog-bar .eyebrow{
  margin: 0;
  font-size:9px
}
.close-button{
  border: 0;
  background: none;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  font-size: 12px;
  min-height:36px
}
.close-button span{
  font-size: 27px;
  font-weight: 300;
  line-height:1
}
.reading-hero{
  position: relative;
  min-height: 360px;
  background: var(--forest);
  color: var(--cream);
  display: flex;
  align-items: flex-end;
  isolation:isolate
}
.reading-hero img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  z-index:-2
}
.reading-hero:after{
  position: absolute;
  content: '';
  inset: 0;
  background: linear-gradient(transparent,#142a22d9);
  z-index:-1
}
.reading-hero>div{
  padding:55px 9% 40px
}
.reading-hero h2{
  font-size: clamp(42px,6vw,64px);
  max-width:650px
}
.reading-hero .pullquote{
  color: var(--cream);
  font-size: 21px;
  margin:15px 0 0
}
.reading-body{
  padding:45px 9% 55px
}
.reading-body h3{
  font-size: 30px;
  margin:0 0 15px
}
.reading-intro{
  font-family: Georgia,serif;
  font-size: 20px;
  line-height: 1.7;
  margin-bottom:35px
}
.stats{
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  padding: 22px 10px;
  background: var(--paper);
  margin: 5px 0 35px;
  text-align: center;
  gap:10px
}
.stat-value{
  display: block;
  font-family: Fraunces,Georgia,serif;
  font-size: 27px;
  line-height:1.2
}
.stat-label{
  display: block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top:8px
}
.reading-section{
  margin:35px 0
}
.reading-section .pullquote{
  font-size: 20px;
  margin:0 0 15px
}
.reading-section>p:last-child,.practical-note p{
  font-size: 15px;
  line-height:1.8
}
.timeline{
  padding: 8px 0 15px;
  margin: 0;
  list-style:none
}
.timeline li{
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 20px;
  padding: 0 0 28px 21px;
  position: relative;
  margin-left: 4px;
  border-left:1px solid #b9925766
}
.timeline li:before{
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rust);
  position: absolute;
  left: -5px;
  top:7px
}
.timeline li:last-child{
  border-color: transparent;
  padding-bottom:0
}
.timeline time{
  font-size: 12px;
  color: var(--rust);
  padding-top:1px
}
.timeline strong{
  font-size: 14px;
  font-weight:600
}
.timeline p{
  font-size: 12px;
  color: var(--muted);
  margin:4px 0 0
}
.booking-tag{
  display: inline-block;
  font-size: 9px;
  letter-spacing: .8px;
  text-transform: uppercase;
  border: 1px solid #adbaaa;
  margin-left: 8px;
  padding: 1px 5px;
  color: #53664f;
  vertical-align:middle
}
.practical{
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin:30px 0
}
.practical summary{
  cursor: pointer;
  list-style: none;
  padding: 21px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  font-family: Fraunces,Georgia,serif;
  font-size: 24px;
  line-height:1.2
}
.practical summary::-webkit-details-marker{
  display:none
}
.practical summary:after{
  content: '+';
  font-family: Avenir,sans-serif;
  font-weight: 300;
  font-size:26px
}
.practical[open] summary:after{
  content:'−'
}
.practical-content{
  padding:10px 0 24px
}
.practical-note{
  margin-bottom:25px
}
.practical-note h4{
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--rust);
  margin:0 0 7px
}
.source-links{
  display: flex;
  flex-wrap: wrap;
  gap: 12px 25px;
  font-size: 12px;
  margin:25px 0
}
.evidence-note{
  font-size: 11px;
  line-height: 1.7;
  color:var(--muted)
}
.body-button{
  border: 1px solid var(--forest);
  padding: 13px 20px;
  background: var(--forest);
  color: var(--cream);
  font-size: 13px;
  min-height: 48px;
  margin-top:10px
}
.body-button:disabled{
  background: var(--paper);
  color: var(--ink);
  border-color:var(--line)
}
.reading-bottom{
  margin-top: 35px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap:18px
}
.back-button{
  border: 0;
  background: none;
  padding: 8px 0;
  font-size: 12px;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 6px;
  min-height:44px
}
.waiting-note{
  font-size: 12px;
  color: var(--muted);
  margin:15px 0 0
}
.packing-list{
  list-style: none;
  padding: 0;
  margin:20px 0 35px
}
.packing-list li{
  margin: 12px 0;
  padding-left: 24px;
  position: relative;
  font-size:15px
}
.packing-list li:before{
  content: '';
  width: 7px;
  height: 7px;
  background: var(--rust);
  position: absolute;
  top: 10px;
  left:0
}
.concert-reveal{
  text-align: center;
  padding: 65px 9%;
  background: var(--forest);
  color: var(--cream);
  min-height: 70dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction:column
}
.concert-reveal h2{
  font-size: clamp(56px,9vw,90px);
  line-height: 1.04;
  margin:25px 0
}
.concert-reveal .pullquote{
  color:var(--cream)
}
.concert-ticket{
  background: var(--cream);
  color: var(--ink);
  padding: 28px 35px;
  margin: 25px 0;
  max-width: 500px;
  width:100%
}
.concert-ticket strong{
  font-family: Fraunces,Georgia,serif;
  font-size: 27px;
  font-weight:500
}
.concert-ticket p{
  margin: 8px 0;
  font-size:14px
}
.concert-reveal .back-button{
  color:var(--cream)
}
.noscript{
  background: var(--paper);
  padding: 30px;
  text-align:center
}
.sign-in-panel{
  max-width: 1440px;
  margin: auto;
  display: grid;
  grid-template-columns: 1.18fr 1fr;
  min-height:660px
}
.sign-in-picture{
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 660px;
  background: var(--forest);
  color:var(--cream)
}
.sign-in-picture>img{
  position: absolute;
  inset: 0;
  z-index: -2;
  object-fit: cover;
  width: 100%;
  height:100%
}
.sign-in-picture:after{
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:linear-gradient(#142a2222,#142a22c9)
}
.sign-in-picture>div{
  padding:55px 12%
}
.sign-in-picture h1{
  margin:45px 0 28px
}
.sign-in-copy{
  padding: 70px 13%;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content:center
}
.sign-in-copy h2{
  font-size: 56px;
  margin-bottom:25px
}
.sign-in-copy>p:not(.eyebrow){
  font-size:14px
}
.sign-in-note{
  color: var(--muted);
  margin-top:25px
}
.auth-status{
  margin: 20px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--rust);
  min-height:24px
}
.sign-out{
  background: none;
  border: 0;
  border-bottom: 1px solid var(--gold);
  padding: 7px 0;
  margin-left: 10px;
  color: var(--ink);
  font-size: 10px;
  letter-spacing: .5px;
  min-height:36px
}
@media(max-width:650px){
  .sign-in-panel{
    display:block
  }
  .sign-in-picture{
    min-height:490px
  }
  .sign-in-picture>div{
    padding:35px 8%
  }
  .sign-in-picture h1{
    font-size: 68px;
    margin-top:60px
  }
  .sign-in-copy{
    padding:40px 8%
  }
  .sign-in-copy h2{
    font-size:44px
  }
}
@media(min-width:1440px){
  .hero{
    margin:0 auto
  }
  .hero-picture{
    min-height:740px
  }
  .hero-copy{
    padding-top:80px
  }
  h1{
    margin-top:100px
  }
}
@media(max-width:1000px){
  .envelope-grid{
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap:25px
  }
  .envelope{
    min-height:285px
  }
  .chapter-title{
    min-height:60px
  }
  .hero-copy{
    padding-left: 10%;
    padding-right:7%
  }
  .hero-letter{
    padding-left: 12%;
    padding-right:10%
  }
  .hero-letter .pullquote{
    font-size:19px
  }
  .hero-footnote{
    left:10%
  }
  .hero,.hero-picture{
    min-height:620px
  }
  .hero-copy h1{
    font-size:70px
  }
  .section-note{
    max-width:220px
  }
}
@media(max-width:650px){
  .masthead{
    padding:17px 6%
  }
  .wordmark{
    font-size: 14px;
    gap:9px
  }
  .wordmark img{
    width: 24px;
    height:24px
  }
  .masthead-date{
    font-size: 8px;
    letter-spacing: .7px;
    max-width: 90px;
    text-align:right
  }
  .hero{
    display:block
  }
  .hero-picture{
    min-height:590px
  }
  .hero-copy{
    padding:35px 8%
  }
  .hero-copy .eyebrow{
    font-size:9px
  }
  .hero-copy h1{
    font-size: clamp(52px,15.5vw,68px);
    margin-top: 80px;
    margin-bottom:30px
  }
  .hero-subtitle{
    font-size: 14px;
    line-height:1.8
  }
  .hero-footnote{
    left: 8%;
    bottom: 27px;
    font-size:8px
  }
  .hero-letter{
    padding:44px 8% 42px
  }
  .hero-letter h2{
    font-size:49px
  }
  .hero-letter h2 br{
    display:none
  }
  .hero-letter h2 br:after{
    content:' '
  }
  .hero-letter .gold-rule{
    margin:23px 0
  }
  .hero-letter .pullquote{
    font-size:20px
  }
  .hero-letter>p:not(.eyebrow):not(.pullquote){
    font-size: 14px;
    max-width:none
  }
  .hero-letter .text-link{
    font-size:13px
  }
  .quiet-button{
    font-size: 13px;
    min-height: 44px;
    margin-top:13px
  }
  .chapters-section{
    padding:55px 6% 45px
  }
  .section-heading{
    display: block;
    margin-bottom:20px
  }
  .section-heading h2{
    font-size:39px
  }
  .section-note{
    max-width: none;
    margin-top: 20px;
    font-size:13px
  }
  .next-release{
    font-size: 12px;
    margin-bottom: 25px;
    line-height:1.8
  }
  .mobile-break{
    display:block
  }
  .envelope-grid{
    grid-template-columns: 1fr;
    gap:22px
  }
  .envelope{
    min-height: 270px;
    padding:25px 25px 21px
  }
  .envelope .eyebrow{
    margin-bottom: 70px;
    font-size:10px
  }
  .chapter-title{
    font-size: 33px;
    min-height: 42px;
    max-width:300px
  }
  .envelope-footer{
    font-size: 11px;
    margin-top:23px
  }
  .envelope:before{
    height:82px
  }
  .envelope:after{
    top:58px
  }
  .seal-number{
    top:66px
  }
  .chapter-meta{
    font-size: 12px;
    padding-top:12px
  }
  .chapter-day-link{
    font-size: 13px;
    min-height:40px
  }
  .clock-note{
    font-size: 11px;
    max-width: 280px;
    margin:22px auto 0
  }
  .surprise-section{
    margin: 0 6% 45px;
    padding:40px 20px
  }
  .surprise-section h2{
    font-size:40px
  }
  .surprise-section .eyebrow{
    font-size:9px
  }
  .site-footer{
    display: block;
    text-align: center;
    padding:35px 7%
  }
  .site-footer p{
    margin:15px 0
  }
  .site-footer>span:last-child{
    font-size:10px
  }
  dialog{
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    margin:0
  }
  .dialog-bar{
    padding:10px 6%
  }
  .dialog-bar .eyebrow{
    font-size: 8px;
    letter-spacing:1.4px
  }
  .reading-hero{
    min-height:330px
  }
  .reading-hero>div{
    padding:45px 7% 30px
  }
  .reading-hero h2{
    font-size:45px
  }
  .reading-hero .pullquote{
    font-size:19px
  }
  .reading-body{
    padding:32px 7% 40px
  }
  .reading-intro{
    font-size:19px
  }
  .stat-value{
    font-size:25px
  }
  .stat-label{
    font-size: 8px;
    letter-spacing:1px
  }
  .stats{
    gap: 6px;
    padding: 20px 7px;
    margin-bottom:30px
  }
  .reading-body h3{
    font-size:29px
  }
  .timeline li{
    grid-template-columns: 65px 1fr;
    gap: 13px;
    padding-left:16px
  }
  .timeline strong{
    font-size:13px
  }
  .timeline p{
    font-size:12px
  }
  .booking-tag{
    margin-left: 0;
    display: table;
    margin-top:4px
  }
  .practical summary{
    font-size: 23px;
    line-height:1.25
  }
  .reading-section>p:last-child,.practical-note p{
    font-size:14px
  }
  .concert-reveal{
    padding: 45px 7%;
    min-height:calc(100dvh - 57px)
  }
  .concert-ticket{
    padding:25px 17px
  }
  .concert-ticket strong{
    font-size:24px
  }
  .desktop-break{
    display:none
  }
}
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto
  }
  *{
    transition: none!important;
    animation:none!important
  }
}
@media print{
  .masthead,.hero,.chapters-section,.surprise-section,.site-footer,.dialog-bar,.reading-bottom{
    display:none!important
  }
  dialog[open]{
    position: static;
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    overflow: visible;
    box-shadow:none
  }
  .practical-content{
    display:block
  }
  .reading-hero{
    min-height:200px
  }
}