/* ==========================================================================
   Base & Reset
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 2rem 1.5rem;
  background-color: #fcfbf9; /* Warm parchment off-white */
  color: #2b2b2b;
  /* font-family: Georgia, "Times New Roman", Garamond, serif; */
  font-size: 1.125rem; /* 18px base for optimal long-form reading */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  
  color: #362575;
  font-family: 'Merriweather', 'Georgia', serif;
  font-size: 1rem; /* 18px base for optimal long-form reading */
  font-weight: 400;
}

/* ==========================================================================
   Layout Container
   ========================================================================== */
.essay-container {
  max-width: 44rem; /* 704px: optimal 65-75 character reading measure */
  margin: 0 auto;
}

/* ==========================================================================
   Header & Title Typography
   ========================================================================== */
header {
  margin: 2rem 0 2.5rem 0;
  border-bottom: 1px solid #e2ddd5;
  padding-bottom: 1.75rem;
}

h1 {
  font-size: clamp(1.85rem, 4vw + 0.5rem, 2.6rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: #1a1a1a;
  margin: 0 0 0.85rem 0;
  color: #533f90;
}

/* Sub-title span replacing hard <br> */
h1 span {
  display: block;
  font-size: 0.6em;
  font-weight: 400;
  line-height: 1.25;
  margin-top: 0.35rem;
  color: #3d3d3d;
  color: #8C7232;
}

/* Deck / Subtitle */
.deck {
  font-size: clamp(1.1rem, 1.4vw + 0.5rem, 1.3rem);
  line-height: 1.4;
  font-style: italic;
  color: #5a5550;
  margin: 0;
}

/* ==========================================================================
   Section Headings (H2)
   ========================================================================== */
h2 {
  font-size: clamp(1.35rem, 2.5vw + 0.3rem, 1.75rem);
  font-weight: 700;
  line-height: 1.25;
  color: #1f1f1f;
  margin: 2.75rem 0 1rem 0;
  color: #533f90;
}

/* Sub-title span for H2 replacing hard <br> */
h2 span {
  display: block;
  font-size: 0.65em;
  font-weight: 400;
  line-height: 1.3;
  margin-top: 0.2rem;
  color: #4a4540;
  color: #4a4540;
}

/* ==========================================================================
   Prose & Text Elements
   ========================================================================== */
p {
  margin: 0 0 1.35rem 0;
}

em {
  font-style: italic;
}

strong {
  font-weight: 700;
  color: #111111;
  color: #303030;
}

/* ==========================================================================
   Lists (Feature & Barrier Lists)
   ========================================================================== */
ul.feature-list,
ol.feature-list,
ul.barrier-list {
  padding-left: 1.5rem;
  margin: 1.5rem 0 1.75rem 0;
}

ul.feature-list li,
ol.feature-list li,
ul.barrier-list li {
  margin-bottom: 1.25rem;
  padding-left: 0.35rem;
}

ul.feature-list li > strong,
ol.feature-list li > strong,
ul.barrier-list li > strong {
  display: inline-block;
  font-size: 1.15rem;
  margin-bottom: 0.25rem;
  color: #1a1a1a;
  color: #505050;
}

ul.feature-list li p,
ol.feature-list li p,
ul.barrier-list li p {
  margin-top: 0.25rem;
  margin-bottom: 0;
}

/* ==========================================================================
   Budget Table Styling
   ========================================================================== */
.table-wrapper {
  margin: 1.75rem 0 2rem 0;
  overflow-x: auto;
}

.budget-table {
  width: 100%;
  border-collapse: collapse;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.45;
  background-color: #ffffff;
  border: 1px solid #ded8ce;
  border-radius: 3px;
}

.budget-table th,
.budget-table td {
  padding: 0.85rem 1rem;
  text-align: left;
  border-bottom: 1px solid #e8e3dc;
  vertical-align: top;
}

.budget-table thead th {
  background-color: #f4f1ea;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: #5a5550;
  border-bottom: 2px solid #ded8ce;
}

.budget-table .amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #1a1a1a;
  white-space: nowrap;
}

.budget-table .table-subtext {
  font-size: 0.82rem;
  font-weight: 400;
  color: #6a6560;
}

.budget-table tfoot th {
  background-color: #f8f6f2;
  border-top: 2px solid #ded8ce;
  border-bottom: none;
  font-weight: 700;
  color: #1a1a1a;
}

.budget-table tfoot .total {
  font-size: 1.15rem;
  color: #8c2d19;
}


/* ==========================================================================
   Footer
   ========================================================================== */
.essay-footer {
  margin-top: 3.5rem;
  padding-top: 1rem;
}

.essay-footer hr {
  border: 0;
  border-top: 1px solid #e2ddd5;
  margin-bottom: 1.5rem;
}

.promo-text {
  font-size: 0.95rem;
  /* font-style: italic; */
  color: #6a6560;
  
}

/* ==========================================================================
   Series Navigation Bar
   ========================================================================== */
.series-nav {
  margin: 3.5rem 0 2rem 0;
  padding: 1.5rem;
  background-color: #f4f1ea;
  border: 1px solid #ded8ce;
  border-radius: 4px;
}

.series-nav-title {
  font-family: inherit;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: #5a5550;
  margin-bottom: 1rem;
  text-align: center;
}

.series-phases {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.phase-card {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  padding: 1rem 0.85rem;
  background-color: #ffffff;
  border: 1px solid #e2ddd5;
  border-radius: 3px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.phase-card:hover {
  border-color: #8c786a;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.phase-num {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: #7a6e65;
  margin-bottom: 0.35rem;
}

.phase-name {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  color: #1a1a1a;
  margin-bottom: 0.5rem;
}

.phase-topics {
  font-size: 0.82rem;
  line-height: 1.4;
  color: #635e58;
}

@media (max-width: 680px) {
  .series-phases {
    flex-direction: column;
    gap: 0.75rem;
  }

  .phase-card {
    padding: 0.85rem 1rem;
  }
}

/* ==========================================================================
   Responsive Adaptations
   ========================================================================== */
@media (max-width: 480px) {
  body {
    padding: 1.25rem 1rem;
  }

  /* On narrow screens, keep subtitles on their own line and smaller than the title */
  h1 span {
    font-size: 0.68em;
  }
  h2 span {
    font-size: 0.85em;
  }
}

/* ======================= zoom out viewport ================================ */

/* -------------------------------------------------------------
   Desktop Reading Measure & Spacious Margins
   (Matches the 80% zoom proportion natively at 100%)
------------------------------------------------------------- */

.essay-container {
  max-width: 40rem;                /* Tightens line length to match the 80% look */
  margin: 3.5rem auto;             /* Balanced vertical margins */
  padding: 0 clamp(1.5rem, 4vw, 4rem);
}

.essay-container h1 {
  font-size: clamp(2rem, 3.2vw, 2.6rem); /* Pulls heading scale down slightly */
  line-height: 1.15;
}

.code-example pre {
  max-width: 38rem;
  margin-inline: auto;
  padding: 1.25rem 1.75rem;
}


/* ==========================================================================
   Additions (revision pass 1)
   ========================================================================== */
a { color: #8c2d19; }
a:hover { color: #5e1e10; }

.series-label {
  margin: 0 0 0.75rem 0;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 400; /* Julius Sans One has only one weight; 700 would be faked */
  font-family: "Julius Sans One", sans-serif;
  color: #7a6e65;
  color: #4C3628;
}
.series-label a {
  color: #533f90;
  text-decoration: none;
  border-bottom: 1px solid rgba(83, 63, 144, 0.35);
}
.series-label a:hover { color: #8C7232; border-bottom-color: #8C7232; }
.series-label .crumb-sep { color: #8C7232; padding: 0 0.15em; }
.series-label a,
.series-label span:not(.crumb-sep) { white-space: nowrap; }


.series-nav-title a { color: inherit; text-decoration: none; }
.series-nav-title a:hover { color: #8c2d19; }
.phase-card.active { border-color: #8c2d19; box-shadow: inset 3px 0 0 #8c2d19; }

/* Contents-page lead card and side notes */
.start-here,
.note-box {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  background: #ffffff;
  border: 1px solid #ded8ce;
  border-left: 4px solid #8c2d19;
  border-radius: 3px;
}
.start-here > a { font-size: 1.2rem; text-decoration: none; }
.start-here p, .note-box p { margin: 0.5rem 0 0 0; }
.note-box p:first-child { margin-top: 0; }

/* Simple lists */
ul.plain-list, ol.plain-list { margin: 0 0 1.5rem 0; padding-left: 1.5rem; }
ul.plain-list li, ol.plain-list li { margin-bottom: 0.4rem; }

ul.checklist { list-style: none; padding-left: 0; margin: 1rem 0 1.75rem 0; }
ul.checklist li { position: relative; padding-left: 2rem; margin-bottom: 0.9rem; }
ul.checklist li::before {
  content: "";
  position: absolute; left: 0; top: 0.3rem;
  width: 1.05rem; height: 1.05rem;
  border: 2px solid #8c786a; border-radius: 2px; background: #fff;
}

/* Facts table: label column */
.facts-table th[scope="row"] {
  width: 32%;
  font-size: 0.9rem;
  color: #5a5550;
  background: #f8f6f2;
}

/* Sources */
.sources {
  margin: 2.5rem 0 1rem 0;
  font-size: 0.9rem;
  color: #5a5550;
}
.sources p { margin-bottom: 0.4rem; }
.sources ul { padding-left: 1.25rem; margin: 0; }
.sources li { margin-bottom: 0.3rem; }

/* Script sample */
.code-example {
  margin: 1.5rem 0 2rem 0;
  background: #ffffff;
  border: 1px solid #ded8ce;
  border-radius: 3px;
  overflow-x: auto;
}
.code-example pre { margin: 0; font-size: 0.8rem; line-height: 1.45; }
code { font-family: "Courier Prime", "Courier New", Courier, monospace; font-size: 0.92em; }

/* Poster */
.poster-showcase { margin: 2rem 0 2.5rem 0; text-align: center; }
.poster-figure { margin: 0; }
.poster-image {
  width: 100%; max-width: 22rem; height: auto;
  border: 1px solid #ded8ce;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.poster-figure figcaption { margin-top: 0.75rem; font-size: 0.9rem; font-style: italic; color: #6a6560; }

/* Previous / next buttons */
.step-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin: 2.5rem 0 1.5rem;
  padding: 1rem 0;
  border-top: 1px solid #e0d8cc;
  border-bottom: 1px solid #e0d8cc;
}
.step-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  color: #2b2b2b;
  background: #f7f5f0;
  border: 1px solid #d4cdbf;
  border-radius: 4px;
  transition: all 0.2s ease;
}
.step-btn:hover { background: #ece7dc; border-color: #b8b09f; color: #111; }
.step-btn.next { margin-left: auto; }
.step-arrow { font-size: 1.1rem; line-height: 1; }

@media (max-width: 600px) {
  .step-nav { flex-direction: column; align-items: stretch; }
  .step-btn { justify-content: center; }
  .step-btn.next { margin-left: 0; }
  .facts-table th[scope="row"] { width: auto; }
}

/* ==========================================================================
   Masthead picture (beside the title on wide screens, above it on phones)
   ========================================================================== */
header.masthead {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}
.masthead-art {
  flex: 0 0 8rem;
  display: block;
}
.masthead-art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 3px 10px rgba(54, 37, 117, 0.25);
}
.masthead-text {
  flex: 1 1 auto;
  min-width: 0;
}
@media (max-width: 600px) {
  header.masthead {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
  }
  .masthead-art {
    flex-basis: auto;
    width: 6.5rem;
  }
  .masthead-text {
    align-self: stretch;
    width: 100%;
  }
}

/* Reading times on the contents page */
.read-time {
  display: inline-block;
  margin-left: 0.4rem;
  font-family: "Julius Sans One", sans-serif;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8C7232;
  white-space: nowrap;
}

/* A bolder "Start here" card on the contents page */
.start-here {
  border: 2px solid #533f90;
  border-left-width: 6px;
  background: #ffffff;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 3px 12px rgba(54, 37, 117, 0.12);
}
.start-here > a { font-size: 1.35rem; }
.start-here > a strong { color: #533f90; }
.start-here > a:hover strong { color: #8C7232; }

/* ==========================================================================
   "About the Play" card at the end of each article
   ========================================================================== */
.play-card {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin: 3rem 0 2rem 0;
  padding: 1.5rem 1.75rem;
  background: #ffffff;
  border: 1px solid #ded8ce;
  border-top: 4px solid #8C7232;
  border-radius: 3px;
  box-shadow: 0 3px 12px rgba(54, 37, 117, 0.12);
}
.play-card-art {
  flex: 0 0 7rem;
  display: block;
}
.play-card-art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(54, 37, 117, 0.25);
}
.play-card-text { flex: 1 1 auto; min-width: 0; }
.play-card-text p { margin: 0 0 0.85rem 0; font-size: 0.95rem; line-height: 1.6; }
.play-card-text p:last-child { margin-bottom: 0; }
.play-card .play-card-label {
  margin-bottom: 0.6rem;
  font-family: "Julius Sans One", sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8C7232;
}
.play-card-text a { color: #533f90; font-weight: 700; }
.play-card-text a:hover { color: #8C7232; }

@media (max-width: 600px) {
  .play-card { flex-direction: column; gap: 1rem; padding: 1.25rem; }
  .play-card-art { flex-basis: auto; width: 6.5rem; }
  .play-card-text { align-self: stretch; width: 100%; }
}