/* Lesson One AI. One stylesheet, no build step, no JavaScript.
   Fonts are self-hosted woff2 files in site/fonts/ (OFL).
   If a font file is missing, Georgia and system-ui take over.
   Ochre is reserved for PLACEHOLDER marks so holes stay visible.
   Motion is scroll driven only and lives in one block near the end.
   Without support, or with reduced motion, every element stays in place. */

@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

:root {
  --c-paper: #F6F1E7;
  --c-paper-deep: #EEE7DA;
  --c-ink: #1A1F1C;
  --c-muted: #5C615C;
  --c-rule: #D9D1C3;
  --c-accent: #1E3A2F;
  --c-accent-hover: #142A21;
  --c-on-accent: #F6F1E7;
  --c-on-accent-muted: #C9D1C8;
  --c-mark: #A36B2A;

  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.125rem;
  --fs-lg: clamp(1.1875rem, 1.05rem + 0.5vw, 1.4375rem);
  --fs-h3: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --fs-h2: clamp(1.875rem, 1.4rem + 1.6vw, 2.75rem);
  --fs-h1: clamp(2.75rem, 1.4rem + 4.2vw, 5.25rem);
  --fs-numeral: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
  --fs-amount: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  --fs-mark: clamp(2.5rem, 1.6rem + 3.5vw, 4.5rem);

  --lh-body: 1.6;
  --ls-label: 0.08em;

  --measure: 64ch;
  --wide: 76rem;
  --gutter: clamp(1.25rem, 0.25rem + 4vw, 3rem);
  --col-gap: clamp(1.5rem, 1rem + 2vw, 3rem);

  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-section: clamp(4rem, 2.5rem + 5vw, 7.5rem);

  --rule: 1px solid var(--c-rule);
  --rule-strong: 2px solid var(--c-ink);
  --radius: 2px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --header-h: 4.25rem;

  --stack-tab: 0.75rem;
}

/* Base */

html {
  background: var(--c-paper);
  color: var(--c-ink);
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--c-accent); color: var(--c-on-accent); }
img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  text-wrap: balance;
  margin: 0 0 var(--s-4);
  color: inherit;
}
h1 {
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 16ch;
  margin-bottom: var(--s-5);
}
h2 {
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  max-width: 22ch;
}
h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
}
p, li { max-width: var(--measure); text-wrap: pretty; }
p { margin: 0 0 var(--s-4); }
ol, ul { margin: 0 0 var(--s-5); padding-left: 1.25rem; }
li + li { margin-top: var(--s-2); }

/* Plain lists in main get a small spruce square, echoing the logo */
main ul { list-style: none; padding-left: 0; }
main ul > li { position: relative; padding-left: 1.25rem; }
main ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--c-accent);
}
main ul > li.placeholder { padding-left: var(--s-3); }
main ul > li.placeholder::before { display: none; }

a {
  color: var(--c-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { color: var(--c-accent-hover); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }

/* Skip link: off screen until it takes keyboard focus */

.skip-link {
  position: absolute;
  top: var(--s-3);
  left: -9999px;
  z-index: 60;
  font: 600 var(--fs-sm)/1.2 var(--font-sans);
  background: var(--c-accent);
  color: var(--c-on-accent);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius);
  text-decoration: none;
}
.skip-link:focus { left: var(--gutter); }
.skip-link:hover { color: var(--c-on-accent); text-decoration: none; }

/* Text roles */

.eyebrow {
  font: 600 var(--fs-xs)/1.2 var(--font-sans);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
  margin: 0 0 var(--s-4);
}
.lede {
  font-size: var(--fs-lg);
  line-height: 1.5;
  max-width: 34em;
  margin-bottom: var(--s-6);
}
.small { font-size: var(--fs-sm); color: var(--c-muted); }

.placeholder {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  border-left: 2px solid var(--c-mark);
  padding: 0.15rem 0 0.15rem var(--s-3);
  margin: var(--s-4) 0;
  max-width: var(--measure);
}
.placeholder-inline {
  color: var(--c-muted);
  box-shadow: inset 0 -2px 0 var(--c-mark);
}

/* Buttons */

.btn {
  display: inline-block;
  font: 600 var(--fs-base)/1.25 var(--font-sans);
  background: var(--c-accent);
  color: var(--c-on-accent);
  padding: 0.95rem 1.5rem;
  border: 0;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}
.btn:hover {
  background: var(--c-accent-hover);
  color: var(--c-on-accent);
  text-decoration: none;
}
.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-6);
}
.btn-note { font-size: var(--fs-sm); color: var(--c-muted); max-width: 32ch; }

/* Layout */

.container {
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--s-section); border-top: var(--rule); }
.section--flush {
  border-top: 0;
  padding-top: clamp(3rem, 2rem + 4vw, 6rem);
}
.band { background: var(--c-paper-deep); border-top: 0; }

.band--accent {
  background: var(--c-accent);
  color: var(--c-on-accent);
}
.band--accent .eyebrow,
.band--accent .placeholder { color: var(--c-on-accent-muted); }
.band--accent a:not(.btn) { color: var(--c-on-accent); }
.band--accent .btn { background: var(--c-paper); color: var(--c-accent); }
.band--accent .btn:hover { background: var(--c-paper-deep); color: var(--c-accent-hover); }
.band--accent :focus-visible { outline-color: var(--c-on-accent); }

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--c-paper);
  border-bottom: var(--rule);
}
.site-header__inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.logo {
  font: 600 1.25rem/1 var(--font-serif);
  letter-spacing: -0.01em;
  color: var(--c-ink);
  text-decoration: none;
  white-space: nowrap;
}
.logo::before {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-right: 0.55em;
  background: var(--c-accent);
}
.logo:hover { color: var(--c-ink); text-decoration: none; }
.logo span { color: var(--c-muted); font-weight: 400; }

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-2) var(--s-5);
}
.nav a {
  font: 400 var(--fs-sm)/1.2 var(--font-sans);
  color: var(--c-ink);
  text-decoration: none;
  padding-block: 0.35rem;
}
.nav a:not(.btn):hover {
  color: var(--c-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.45em;
}
.nav a[aria-current="page"]:not(.btn) {
  text-decoration: underline;
  text-decoration-color: var(--c-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
}
.nav .btn {
  font-weight: 600;
  color: var(--c-on-accent);
  padding: 0.6rem 1rem;
}
/* Current page on the button: keep the spruce fill, add a paper underline */
.nav .btn[aria-current="page"],
.nav .btn[aria-current="page"]:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

/* Hero */

.lesson-card {
  margin-top: var(--s-7);
  background: var(--c-paper-deep);
  border-top: var(--rule-strong);
  padding: var(--s-5) var(--s-5) var(--s-4);
  max-width: 26rem;
}
.lesson-card__title {
  font: 600 var(--fs-xs)/1.2 var(--font-sans);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
  margin: 0 0 var(--s-3);
}
.lesson-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: card;
}
.lesson-card__list > li {
  counter-increment: card;
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  align-items: baseline;
  padding-block: var(--s-3);
  border-top: var(--rule);
  font: 400 var(--fs-h3)/1.25 var(--font-serif);
  margin: 0;
}
.lesson-card__list > li:first-child { border-top: 0; }
.lesson-card__list > li::before {
  content: counter(card, decimal-leading-zero);
  font: 600 var(--fs-xs)/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: var(--c-muted);
}

/* Steps */

.steps {
  list-style: none;
  padding: 0;
  margin: var(--s-6) 0 0;
  counter-reset: step;
  border-top: var(--rule-strong);
}
.steps > li {
  counter-increment: step;
  padding-block: var(--s-5) var(--s-6);
  border-top: var(--rule);
  max-width: var(--measure);
  margin: 0;
}
.steps > li:first-child { border-top: 0; }
.steps > li::before {
  content: counter(step);
  display: block;
  font: 400 var(--fs-numeral)/0.9 var(--font-serif);
  font-variant-numeric: lining-nums;
  color: var(--c-accent);
  margin-bottom: var(--s-4);
}
.steps h3 { margin-bottom: var(--s-2); }
.steps p:last-child, .steps ul:last-child { margin-bottom: 0; }

/* Step index: the step numerals as a column beside the steps.
   Decorative (aria-hidden), numbered by counter, shown only by the motion block. */

.step-index {
  display: none;
  list-style: none;
  padding: 0;
  margin: var(--s-6) 0 0;
  counter-reset: index;
  border-top: var(--rule-strong);
}
.step-index > li {
  counter-increment: index;
  padding-block: var(--s-3);
  border-top: var(--rule);
  margin: 0;
  font: 400 var(--fs-h2)/1 var(--font-serif);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--c-muted);
}
.step-index > li:first-child { border-top: 0; }
.step-index > li::before { content: counter(index, decimal-leading-zero); }

/* Ledger */

.prices {
  margin: var(--s-6) 0 0;
  border-top: var(--rule-strong);
}
.price {
  position: relative;
  padding-block: var(--s-5);
  border-top: var(--rule);
}
.price:first-child { border-top: 0; }
.price p:last-child { margin-bottom: 0; }
.price__label {
  font: 600 var(--fs-base)/1.3 var(--font-sans);
  color: var(--c-ink);
  margin: 0 0 var(--s-2);
}
.price__amount {
  font: 600 var(--fs-amount)/1.05 var(--font-serif);
  font-variant-numeric: lining-nums;
  letter-spacing: -0.01em;
  margin: 0 0 var(--s-3);
}
.price__amount span {
  display: block;
  font: 400 var(--fs-sm)/1.4 var(--font-sans);
  letter-spacing: 0;
  color: var(--c-muted);
  margin-top: var(--s-2);
}
.price--separate {
  margin-top: var(--s-7);
  border-top: var(--rule-strong);
}
.prices + .small { margin-top: var(--s-5); }

/* Fit lists, examples, questions */

.split {
  display: grid;
  gap: var(--s-7) var(--col-gap);
}
.split > div { border-top: var(--rule-strong); padding-top: var(--s-5); }
.split h2 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.005em; }

.examples { margin-top: var(--s-6); display: grid; column-gap: var(--col-gap); }
.example { padding-block: var(--s-5); border-top: var(--rule); }
.example h3 { margin-bottom: var(--s-2); }
.example p { margin-bottom: 0; }

.faq { margin-top: var(--s-6); border-top: var(--rule-strong); }
.faq__item { padding-block: var(--s-5); border-top: var(--rule); }
.faq__item:first-child { border-top: 0; }
.faq__item h3 { margin-bottom: var(--s-2); }
.faq__item p:last-child { margin-bottom: 0; }

.pair { display: grid; gap: var(--s-5) var(--col-gap); }
.pair > * > :last-child { margin-bottom: 0; }

.narrow > * { max-width: var(--measure); }

/* Footer */

.site-footer {
  border-top: var(--rule);
  padding-block: var(--s-8) var(--s-6);
  font-size: var(--fs-sm);
  color: var(--c-muted);
}
.site-footer p { margin: 0; }
.site-footer__mark {
  font: 400 var(--fs-mark)/1 var(--font-serif);
  letter-spacing: -0.02em;
  color: var(--c-ink);
  margin-bottom: var(--s-6) !important;
}
.site-footer__mark span { color: var(--c-muted); }
.site-footer__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3) var(--s-6);
  border-top: var(--rule);
  padding-top: var(--s-4);
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.site-footer a { color: var(--c-ink); }
.site-footer .placeholder { margin-top: var(--s-6); }

/* Breakpoints */

@media (max-width: 639px) {
  .site-header { position: static; }
  .site-header__inner {
    flex-wrap: wrap;
    padding-block: var(--s-3);
    row-gap: var(--s-2);
  }
  .nav {
    width: 100%;
    justify-content: flex-start;
    column-gap: var(--s-4);
  }
  h1 { max-width: none; }
}

@media (min-width: 760px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split p, .split li { max-width: none; }

  .examples { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .price {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: baseline;
  }
  .price > * { grid-column: 7 / span 6; }
  .price > .price__label { grid-column: 1 / span 3; grid-row: 1; margin: 0; }
  .price > .price__amount { grid-column: 4 / span 3; grid-row: 1; margin: 0; }
}

@media (min-width: 960px) {
  .hero__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: end;
  }
  .hero__main { grid-column: 1 / span 8; }
  .hero__grid .lesson-card { grid-column: 9 / span 4; margin-top: 0; max-width: none; }

  .steps > li {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    max-width: none;
  }
  .steps > li::before {
    grid-column: 1 / span 3;
    grid-row: 1 / span 20;
    margin: 0;
  }
  .steps > li > * { grid-column: 4 / span 8; max-width: var(--measure); }

  .pair, .faq__item {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }
  .faq__item { display: grid; align-items: baseline; }
  .pair > :first-child, .faq__item > h3 { grid-column: 1 / span 5; }
  .pair > :last-child, .faq__item > :not(h3) { grid-column: 7 / span 6; }
  .faq__item > h3 { margin: 0; }
}

/* Motion

   One system, tied to scroll position, nothing on a timer:
   1. A 2px spruce progress rule across the top of the viewport.
   2. Home steps stack: each step sticks under the header and the next covers it,
      leaving a hairline tab for each step already read. Position only, no animation.
   3. Step index on Approach, Book, Who and Privacy: the numerals move into a sticky
      column beside the steps, and the numeral for the step in the reading band turns spruce.
   4. Price rows: a 2px spruce line draws across each row's top rule as the row enters.
   5. Who fit columns: sticky headings, under the same guard as the home stack.
   The hero never moves, so nothing reads as a loading effect.
   Nothing here runs without support or with reduced motion. Those visitors get the
   static page, with numerals inside the steps and no index. */

body::before {
  content: "";
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: 2px;
  background: var(--c-accent);
  transform-origin: 0 50%;
  pointer-events: none;
}

.price::before {
  content: "";
  display: none;
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--c-accent);
  transform-origin: 0 50%;
  pointer-events: none;
}
/* These rows sit under a 2px ink rule, so the line covers that rule instead */
.price:first-child::before,
.price--separate::before { top: -2px; }

@keyframes lo-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes lo-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes lo-index {
  0%, 65%, 100% { color: var(--c-muted); }
  35% { color: var(--c-accent); }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 960px) and (min-height: 640px) {
    .steps--stack { --stack-top: calc(var(--header-h) + var(--s-5)); }
    .steps--stack > li {
      position: sticky;
      top: calc(var(--stack-top) + var(--stack-i, 0) * var(--stack-tab));
      min-height: 15rem;
      padding-block: var(--s-6) var(--s-7);
      background: var(--c-paper);
    }
    .steps--stack > li:nth-child(2) { --stack-i: 1; }
    .steps--stack > li:nth-child(3) { --stack-i: 2; }
    .steps--stack > li:nth-child(4) { --stack-i: 3; }
  }

  @media (prefers-reduced-motion: no-preference) {
    body::before {
      display: block;
      animation-name: lo-progress;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: scroll(root block);
    }

    .price { view-timeline: --lo-price block; }
    .price::before {
      display: block;
      animation-name: lo-draw;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: --lo-price;
      animation-range: entry 0% cover 35%;
    }
  }
}

/* The index reads step timelines from a sibling list, so it also needs timeline-scope */
@supports (animation-timeline: view()) and (timeline-scope: none) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 960px) and (min-height: 640px) {
    .indexed {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: var(--col-gap);
      align-items: start;
      timeline-scope: --lo-step-1, --lo-step-2, --lo-step-3, --lo-step-4;
    }
    .indexed > .step-index {
      display: block;
      grid-column: 1 / span 2;
      position: sticky;
      top: calc(var(--header-h) + var(--s-6));
    }
    .indexed > .steps { grid-column: 4 / span 9; }

    /* The index carries the numerals now, so each step drops its own */
    .indexed > .steps > li { display: block; }
    .indexed > .steps > li::before { display: none; }

    /* A centred reading band gives each step room to reach full spruce */
    .indexed > .steps > li { view-timeline-inset: 25% 25%; }
    .indexed > .steps > li:nth-child(1) { view-timeline-name: --lo-step-1; }
    .indexed > .steps > li:nth-child(2) { view-timeline-name: --lo-step-2; }
    .indexed > .steps > li:nth-child(3) { view-timeline-name: --lo-step-3; }
    .indexed > .steps > li:nth-child(4) { view-timeline-name: --lo-step-4; }

    .step-index > li {
      animation-name: lo-index;
      animation-duration: auto;
      animation-timing-function: steps(1, end);
      animation-fill-mode: none;
    }
    .step-index > li:nth-child(1) { animation-timeline: --lo-step-1; }
    .step-index > li:nth-child(2) { animation-timeline: --lo-step-2; }
    .step-index > li:nth-child(3) { animation-timeline: --lo-step-3; }
    .step-index > li:nth-child(4) { animation-timeline: --lo-step-4; }
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
  body::before,
  .price::before,
  .step-index { display: none; }
  .steps--stack > li { position: static; }
}

/* Privacy keeps its second-level headings within the shared step layout */
.indexed > .steps > li > h2 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
  max-width: var(--measure);
  margin-bottom: var(--s-2);
}

/* Fit columns retain their strong top rules and gain sticky headings
   only with support and when motion is allowed, like the home stack */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 960px) and (min-height: 640px) {
    .split--ledger > div { align-self: stretch; }
    .split--ledger > div > h2 {
      position: sticky;
      top: var(--header-h);
      z-index: 1;
      max-width: none;
      padding-block: var(--s-3);
      background: var(--c-paper);
      border-bottom: var(--rule);
    }
  }
}