/* The Reading Year — steady-state additions to site.css (October 2026) */
/* Everything here uses the existing tokens in site.css. Nothing is overridden. */

/* Side gutter that also clears a phone's side system bar */
.wrap { padding-left: max(1.5rem, env(safe-area-inset-left, 0px)); padding-right: max(1.5rem, env(safe-area-inset-right, 0px)); }

/* Home: the thesis sections */
.thesis { padding: 4rem 0 1.5rem; }
.thesis h2 { font-size: clamp(1.625rem, 3.4vw, 2.125rem); margin: 2.75rem 0 1rem; max-width: 46rem; }
.thesis h2:first-child { margin-top: 0; }
.thesis p { max-width: 46rem; font-size: 1.125rem; line-height: 1.55; margin: 0 0 1.1rem; }

/* Home: three kinds of book */
.tracks { padding: 1rem 0 4.5rem; }
.tracks h2 { font-size: clamp(1.875rem, 4vw, 2.5rem); margin: 0 0 1rem; }
.tracks-intro { color: var(--ink-soft); margin: 0 0 2rem; }
.track-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.track-card { border: 2px solid var(--ink); border-radius: 12px; padding: 1.5rem; background: var(--white); }
.track-card h3 { font-size: 1.3125rem; margin: 0 0 .5rem; }
.track-card p { margin: 0; color: var(--ink-soft); font-size: 1.0625rem; }
.track-card-stories { border-top: 8px solid var(--evergreen); }
.track-card-turners { border-top: 8px solid var(--dandelion); }
.track-card-ideas { border-top: 8px solid var(--pollen); }
.tracks-note { margin: 1.5rem 0 0; color: var(--ink-soft); font-size: 1rem; max-width: 46rem; }

/* Home: links strip and video */
.learning { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 3.5rem 0; }
.learning .wrap { display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items: start; }
.learning h2 { font-size: clamp(1.75rem, 3.5vw, 2.25rem); margin: 0 0 1rem; }
.learning p { max-width: 42rem; color: var(--ink-soft); margin: 0 0 1rem; }
.learning-links { font-family: var(--display); font-weight: 700; color: var(--ink) !important; }
.learning .video-card h2 { font-size: 1.3125rem; }

/* Cohort page */
.page { padding-top: 3.5rem; padding-bottom: 5.5rem; }
.cohort { max-width: 60rem; }
.cohort-head { border-bottom: 3px solid var(--ink); padding-bottom: 1.75rem; margin-bottom: 2.5rem; }
.cohort-eyebrow { font-family: var(--display); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: .875rem; color: var(--stamp); margin: 0 0 .5rem; }
.cohort-head h2 { font-size: clamp(2.25rem, 6vw, 3.5rem); letter-spacing: -0.03em; margin: 0 0 1rem; }
.cohort-lede { font-size: 1.25rem; max-width: 44rem; margin: 0; }
.cohort-h { font-family: var(--display); font-size: 1.5rem; margin: 3.5rem 0 1.25rem; padding-bottom: .5rem; border-bottom: 2px solid var(--line); }
.cohort h4 { font-size: 1.0625rem; font-family: var(--display); margin: 2rem 0 .5rem; }
.cohort h4:first-child { margin-top: 0; }
.cohort p { color: var(--ink-soft); }

.stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.stat { border-top: 4px solid var(--pollen); padding-top: .9rem; font-family: var(--display); }
.stat-num { display: block; font-weight: 800; font-size: clamp(2rem, 5vw, 2.75rem); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat-label { display: block; font-size: .9375rem; color: var(--ink-soft); margin-top: .4rem; line-height: 1.3; }
.stat-note { max-width: 46rem; margin: 1.75rem 0 0; }

.cohort-cols { gap: 3rem; }
.mix { margin: 0 0 1.25rem; display: grid; gap: 0; font-family: var(--display); font-size: 1rem; }
.mix > div { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.mix dt { margin: 0; color: var(--ink-soft); }
.mix dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.mix-note { font-size: 1rem; margin: 0; }

.bars { display: grid; gap: .6rem; margin-bottom: 1.25rem; }
.barrow { display: grid; grid-template-columns: minmax(0, 11rem) 1fr 2.75rem; align-items: center; gap: .75rem; font-family: var(--display); font-size: .9375rem; }
.barrow-label { color: var(--ink-soft); min-width: 0; }
.barrow-track { background: #EFE9DB; border-radius: 999px; height: .75rem; overflow: hidden; }
.barrow-fill { display: block; height: 100%; background: var(--evergreen); border-radius: 999px; }
.barrow-value { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }

.design-list { display: grid; gap: 1.5rem; }
.design-list > div { border-left: 4px solid var(--sage); padding-left: 1.25rem; }
.design-list h4 { margin: 0 0 .35rem; }
.design-list p { margin: 0; }

.dates { display: grid; gap: 0; }
.date-row { display: grid; grid-template-columns: minmax(0, 16rem) 1fr; gap: 1.25rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.date-row:first-child { border-top: 1px solid var(--line); }
.date-when { font-family: var(--display); font-weight: 800; }
.date-what { color: var(--ink-soft); }

.outcome-pending { border: 2px dashed var(--sage); border-radius: 12px; padding: 1.5rem; background: var(--white); }
.outcome-pending p { margin: 0; }
.cohort-future { max-width: 46rem; margin: 4rem 0 0; color: var(--ink-soft); }

/* Slate interim notice */
.interim { display: grid; grid-template-columns: 14rem 1fr; gap: 3rem; align-items: start; max-width: 62rem; }
.interim-body { max-width: 44rem; }
.interim-body h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); margin: 0 0 .75rem; }
.interim-body h2 + p { margin-top: 0; }
.interim-body h2 ~ h2 { margin-top: 2.5rem; }
.interim-body p { color: var(--ink-soft); }
.shape { padding-left: 1.25rem; margin: 0 0 1rem; color: var(--ink-soft); }
.shape li { margin-bottom: .5rem; }
.interim-note { border-left: 4px solid var(--pollen); padding-left: 1rem; font-family: var(--display); font-size: 1rem; color: var(--ink) !important; }

/* A slimmer page header, for short pages */
.page-hero-slim { padding: 2.5rem 0 2.75rem; }
.page-hero-slim h1 { font-size: clamp(2.25rem, 5vw, 3.25rem); margin-bottom: .9rem; }
.page-hero-slim .lede { font-size: 1.25rem; }

/* Work with us */
.involve-single { grid-template-columns: minmax(0, 44rem) !important; padding: 2.25rem 0 2.5rem; }
.readalong { border-top: 3px solid var(--ink); padding: 2rem 0 5.5rem; max-width: 44rem; }
.readalong h2 { font-size: clamp(1.75rem, 3.5vw, 2.25rem); margin: 0 0 1rem; }
.readalong p { color: var(--ink-soft); }

@media (max-width: 62rem) {
  .track-cards { grid-template-columns: 1fr; }
  .learning .wrap { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cohort-cols { grid-template-columns: 1fr; }
  .interim { grid-template-columns: 1fr; gap: 1.5rem; }
}
@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr; }
  .barrow { grid-template-columns: 1fr; gap: .25rem; }
  .barrow-value { text-align: left; }
  .date-row { grid-template-columns: 1fr; gap: .25rem; }
}