:root {
  --ink: #1b1b18;
  --muted: #68675f;
  --paper: #f4f0e7;
  --card: #fffdf8;
  --line: #cfc5b3;
  --accent: #8f3f2b;
  --accent-dark: #672d20;
  --forest: #354a3b;
  --navy: #36475a;
  --gold: #7d6428;

  --shell: min(1120px, calc(100% - 40px));

  --shadow:
    0 18px 60px rgba(55, 43, 28, .08);
}


* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
  background: var(--paper);
}


body {
  margin: 0;

  color: var(--ink);

  background:
    radial-gradient(
      circle at 12% 10%,
      rgba(255, 255, 255, .9),
      transparent 28rem
    ),
    linear-gradient(
      180deg,
      #f8f4eb 0%,
      var(--paper) 48%,
      #eee7da 100%
    );

  font-family:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  line-height: 1.6;

  text-rendering: optimizeLegibility;
}


a {
  color: inherit;
}


.shell {
  width: var(--shell);
  margin-inline: auto;
}


.skip-link {
  position: fixed;

  left: 16px;
  top: 12px;

  z-index: 100;

  transform: translateY(-160%);

  padding: 10px 14px;

  border-radius: 5px;

  color: white;

  background: var(--ink);
}


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



.site-header {
  position: sticky;

  top: 0;

  z-index: 20;

  border-bottom:
    1px solid rgba(67, 58, 45, .12);

  background:
    rgba(248, 244, 235, .9);

  backdrop-filter:
    blur(14px);
}


.nav-wrap {
  min-height: 72px;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 24px;
}


.brand {
  display: inline-flex;

  align-items: center;

  gap: 11px;

  text-decoration: none;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-weight: 700;
}


.brand-mark {
  width: 31px;

  height: 31px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  color: var(--paper);

  background: var(--ink);

  font-size: 17px;
}


nav {
  display: flex;

  align-items: center;

  gap: 23px;
}


nav a {
  color: #4d4b45;

  text-decoration: none;

  font-size: .92rem;

  font-weight: 650;
}


.nav-cta {
  padding: 8px 14px;

  border:
    1px solid rgba(27, 27, 24, .7);

  border-radius: 999px;
}



.hero {
  padding:
    104px 0 92px;

  border-bottom:
    1px solid rgba(67, 58, 45, .14);
}


.hero-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.55fr)
    minmax(280px, .65fr);

  gap:
    clamp(48px, 9vw, 120px);

  align-items: end;
}


.eyebrow,
.section-kicker {
  margin:
    0 0 17px;

  color:
    var(--accent);

  font-size:
    .75rem;

  line-height:
    1.2;

  font-weight:
    800;

  letter-spacing:
    .14em;

  text-transform:
    uppercase;
}


h1,
h2,
blockquote {
  font-family:
    Georgia,
    "Times New Roman",
    serif;
}


h1 {
  max-width:
    860px;

  margin:
    0;

  font-size:
    clamp(
      3.25rem,
      7.5vw,
      6.8rem
    );

  line-height:
    .94;

  letter-spacing:
    -.05em;

  font-weight:
    500;
}


.dek {
  max-width:
    690px;

  margin:
    31px 0 0;

  color:
    #535149;

  font-size:
    clamp(
      1.08rem,
      2vw,
      1.28rem
    );

  line-height:
    1.72;
}


.hero-actions {
  margin-top:
    34px;

  display:
    flex;

  align-items:
    center;

  gap:
    22px;

  flex-wrap:
    wrap;
}


.button {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    12px 18px;

  border-radius:
    3px;

  text-decoration:
    none;

  font-size:
    .93rem;

  font-weight:
    750;
}


.button-dark {
  color:
    #fff;

  background:
    var(--ink);
}


.live-badge {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  color:
    #5d594f;

  font-size:
    .82rem;

  font-weight:
    700;
}


.live-dot {
  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

  background:
    #52775d;

  box-shadow:
    0 0 0 4px
    rgba(82, 119, 93, .10);
}



.hero-card {
  padding:
    27px;

  border:
    1px solid rgba(74, 63, 49, .17);

  background:
    rgba(255, 253, 248, .62);

  box-shadow:
    var(--shadow);
}


.hero-card-label {
  margin:
    0;

  color:
    var(--muted);

  font-size:
    .75rem;

  font-weight:
    800;

  letter-spacing:
    .12em;

  text-transform:
    uppercase;
}


.hero-number {
  margin:
    12px 0 0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    4.6rem;

  line-height:
    1;
}


.hero-card-copy {
  margin:
    13px 0 0;

  color:
    var(--muted);
}


.hero-range {
  margin-top:
    25px;

  padding-top:
    16px;

  border-top:
    1px solid var(--line);

  display:
    flex;

  justify-content:
    space-between;

  gap:
    8px;

  color:
    var(--accent-dark);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    .92rem;

  font-weight:
    700;
}



.intro {
  padding:
    86px 0;
}


.intro-grid {
  display:
    grid;

  grid-template-columns:
    minmax(160px, .55fr)
    minmax(0, 1.45fr);

  gap:
    clamp(30px, 8vw, 110px);
}


.intro h2,
.archive-header h2,
.membership h2 {
  margin:
    0;

  font-size:
    clamp(
      2.25rem,
      5vw,
      4.3rem
    );

  line-height:
    1.02;

  letter-spacing:
    -.035em;

  font-weight:
    500;
}


.intro-grid > div > p {
  max-width:
    760px;

  margin:
    24px 0 0;

  color:
    var(--muted);

  font-size:
    1.08rem;
}



.archive-section {
  padding:
    76px 0 110px;

  border-top:
    1px solid rgba(67, 58, 45, .14);
}


.archive-header {
  margin-bottom:
    55px;

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    end;

  gap:
    40px;
}


.archive-count {
  margin:
    0 0 8px;

  color:
    var(--muted);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-style:
    italic;
}



.timeline {
  position:
    relative;
}


.timeline::before {
  content:
    "";

  position:
    absolute;

  top:
    18px;

  bottom:
    12px;

  left:
    155px;

  width:
    1px;

  background:
    linear-gradient(
      var(--line),
      #b5aa97 85%,
      transparent
    );
}


.timeline-entry {
  position:
    relative;

  display:
    grid;

  grid-template-columns:
    132px minmax(0, 1fr);

  gap:
    48px;

  padding:
    0 0 38px;
}


.date-column {
  position:
    relative;

  padding-top:
    19px;

  text-align:
    right;
}


.date {
  color:
    var(--accent-dark);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-weight:
    700;

  white-space:
    nowrap;
}


.dot {
  position:
    absolute;

  top:
    26px;

  right:
    -30px;

  width:
    9px;

  height:
    9px;

  border:
    2px solid var(--paper);

  outline:
    1px solid #a89a83;

  border-radius:
    50%;

  background:
    var(--accent);
}



.entry-card {
  padding:
    clamp(25px, 4vw, 40px);

  border:
    1px solid rgba(78, 67, 52, .14);

  background:
    rgba(255, 253, 248, .78);

  box-shadow:
    0 8px 28px
    rgba(70, 55, 37, .035);

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}


.entry-card:hover {
  transform:
    translateY(-2px);

  background:
    var(--card);

  box-shadow:
    0 18px 50px
    rgba(70, 55, 37, .07);
}


.entry-meta {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    18px;

  align-items:
    center;
}


.type,
.entry-number {
  font-size:
    .69rem;

  font-weight:
    800;

  letter-spacing:
    .1em;

  text-transform:
    uppercase;
}


.type {
  display:
    inline-flex;

  padding:
    5px 8px;

  border-radius:
    2px;

  color:
    var(--forest);

  background:
    rgba(53, 74, 59, .08);
}


.type-primary-text {
  color:
    var(--accent-dark);

  background:
    rgba(143, 63, 43, .09);
}


.type-modern-history {
  color:
    var(--navy);

  background:
    rgba(54, 71, 90, .09);
}


.type-literary-work {
  color:
    var(--forest);

  background:
    rgba(53, 74, 59, .09);
}


.type-philosophy {
  color:
    #684e78;

  background:
    rgba(104, 78, 120, .09);
}


.type-drama {
  color:
    var(--gold);

  background:
    rgba(125, 100, 40, .10);
}


.entry-number {
  color:
    #9b9488;
}



blockquote {
  max-width:
    850px;

  margin:
    27px 0 17px;

  font-size:
    clamp(
      1.75rem,
      4vw,
      3.15rem
    );

  line-height:
    1.17;

  letter-spacing:
    -.025em;

  font-weight:
    400;
}


.source {
  margin:
    0;

  color:
    #666056;

  font-size:
    .96rem;

  font-style:
    italic;
}



details {
  margin-top:
    29px;

  border-top:
    1px solid #ddd4c5;
}


summary {
  cursor:
    pointer;

  padding:
    16px 0 2px;

  color:
    #4f4a42;

  font-size:
    .84rem;

  font-weight:
    800;

  letter-spacing:
    .04em;

  list-style:
    none;
}


summary::-webkit-details-marker {
  display:
    none;
}


summary::after {
  content:
    "+";

  float:
    right;

  color:
    var(--accent);

  font-family:
    Georgia,
    serif;

  font-size:
    1.25rem;

  line-height:
    1;
}


details[open] summary::after {
  content:
    "–";
}


.note {
  max-width:
    780px;

  color:
    #5c574e;
}


.note p {
  margin:
    13px 0 3px;
}



.membership {
  padding:
    0 0 88px;
}


.membership-card {
  min-height:
    390px;

  padding:
    clamp(32px, 6vw, 72px);

  display:
    grid;

  grid-template-columns:
    minmax(0, 1.4fr)
    minmax(220px, .6fr);

  gap:
    60px;

  align-items:
    end;

  color:
    #f8f3e8;

  background:
    radial-gradient(
      circle at 84% 16%,
      rgba(178, 127, 95, .22),
      transparent 28%
    ),
    #22231f;
}


.section-kicker.light {
  color:
    #cfa58c;
}


.membership h2 {
  max-width:
    680px;
}


.membership-card p:not(.section-kicker) {
  max-width:
    700px;

  margin:
    24px 0 0;

  color:
    #ccc5b8;
}


.membership-action {
  display:
    flex;

  justify-content:
    flex-end;
}


.coming-soon {
  display:
    inline-flex;

  padding:
    10px 14px;

  border:
    1px solid rgba(255, 255, 255, .24);

  border-radius:
    999px;

  color:
    #e9dfd1;

  font-size:
    .78rem;

  font-weight:
    750;

  letter-spacing:
    .04em;
}



footer {
  padding:
    35px 0 48px;

  color:
    #6b665d;
}


.footer-grid {
  padding-top:
    28px;

  border-top:
    1px solid rgba(67, 58, 45, .14);

  display:
    flex;

  justify-content:
    space-between;

  gap:
    30px;

  font-size:
    .82rem;
}


.footer-grid p {
  margin:
    0;
}



.setup-shell {
  min-height:
    100vh;

  display:
    grid;

  place-items:
    center;

  padding:
    28px;
}


.setup-card {
  width:
    min(760px, 100%);

  padding:
    clamp(30px, 6vw, 64px);

  background:
    var(--card);

  border:
    1px solid rgba(78, 67, 52, .16);

  box-shadow:
    var(--shadow);
}


.setup-card h1 {
  font-size:
    clamp(
      2.4rem,
      6vw,
      4.6rem
    );
}


.setup-card p {
  color:
    var(--muted);

  font-size:
    1.05rem;
}


.setup-small {
  padding-top:
    18px;

  border-top:
    1px solid var(--line);

  font-size:
    .9rem !important;
}


code {
  padding:
    .15em .35em;

  border-radius:
    3px;

  background:
    #eee6d8;
}



@media (max-width: 760px) {

  :root {
    --shell:
      min(100% - 28px, 1120px);
  }


  .site-header {
    position:
      static;
  }


  .nav-wrap {
    min-height:
      64px;
  }


  nav a:not(.nav-cta) {
    display:
      none;
  }


  .brand span:last-child {
    max-width:
      180px;

    line-height:
      1.08;
  }


  .hero {
    padding:
      72px 0 66px;
  }


  .hero-grid,
  .intro-grid,
  .membership-card {
    grid-template-columns:
      1fr;
  }


  .hero-grid {
    gap:
      52px;
  }


  h1 {
    font-size:
      clamp(
        3.35rem,
        16vw,
        5.2rem
      );
  }


  .hero-card {
    max-width:
      420px;
  }


  .intro {
    padding:
      66px 0;
  }


  .archive-section {
    padding:
      64px 0 82px;
  }


  .archive-header {
    margin-bottom:
      38px;

    align-items:
      start;

    flex-direction:
      column;

    gap:
      12px;
  }


  .archive-count {
    margin:
      0;
  }


  .timeline::before {
    left:
      8px;

    top:
      12px;
  }


  .timeline-entry {
    grid-template-columns:
      1fr;

    gap:
      9px;

    padding-left:
      28px;

    padding-bottom:
      30px;
  }


  .date-column {
    padding-top:
      0;

    text-align:
      left;
  }


  .dot {
    top:
      8px;

    left:
      -24px;

    right:
      auto;
  }


  .entry-card {
    padding:
      24px 21px;
  }


  blockquote {
    margin-top:
      22px;

    font-size:
      clamp(
        1.75rem,
        8vw,
        2.55rem
      );
  }


  .membership {
    padding-bottom:
      54px;
  }


  .membership-card {
    min-height:
      0;

    gap:
      42px;
  }


  .membership-action {
    justify-content:
      flex-start;
  }


  .footer-grid {
    flex-direction:
      column;

    gap:
      8px;
  }

}



@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior:
      auto;
  }


  *,
  *::before,
  *::after {
    animation-duration:
      .001ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .001ms !important;
  }

}