/* The village's autumn watercolor palette and book-like surfaces. */
:root {
  --serif: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  --parchment: #f7eedc;
  --sheet: #fffbf2;
  --olive: #59613a;
  font-family: 'Avenir Next', 'Segoe UI', Arial, sans-serif;
  background: var(--parchment);
}

body {
  background-color: var(--parchment);
  background-image: url('./assets/paper-grain.svg?v=fe71b60cca0f32b3'),
    radial-gradient(ellipse at 5% 45%, #dfc68f24, transparent 55%),
    radial-gradient(ellipse at 95% 85%, #b88a4720, transparent 60%);
}

::selection { background: #dca86765; color: #362b20; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -.035em; overflow-wrap: break-word; }
.eyebrow { color: #795e3e; font-size: .7rem; letter-spacing: .17em; }
.button { border-radius: 5px; min-height: 48px; letter-spacing: .01em; }
.button.primary { box-shadow: inset 0 0 0 1px #fff3d51c, 0 3px 7px #603b1b12; }
.button.secondary, .icon-button { background: #fffbf2cc; border-color: #cdbb9e; }
.button.secondary:hover:not(:disabled), .icon-button:hover { background: #f4e5ca; border-color: #a67b48; }
.icon-button { border-radius: 5px; }
.text-button { color: #854129; }
.button:disabled { opacity: .55; }
.icon-button.is-bookmarked { background: #eddbb7; border-color: #b99a66; }
.icon-button.is-bookmarked .icon { fill: #d5ac6e; }
.site-header { background: #f9f0df; border-bottom: 1px solid #d4bf9c; }
.nav-inner { min-height: 88px; max-width: 1300px; flex-wrap: nowrap; row-gap: 6px; padding: 14px 0; }
.brand { font-family: var(--serif); font-size: 2rem; font-weight: 600; letter-spacing: -.055em; gap: 12px; min-width: 0; }
.brand-name { min-width: 0; line-height: 1.05; text-wrap: balance; }
.brand-mark {
  display: block;
  background: none;
  width: 37px;
  height: 37px;
  border: 0;
  border-radius: 0;
  flex: none;
  padding: 0;
}
.site-header nav { color: #6c5438; font-size: .88rem; gap: 34px; flex-wrap: wrap; flex: none; }
.site-header nav a[aria-current]::after { height: 1px; background: #8d3d28; }

/* Keep the cloud equation and playground visible, with the title beside the art. */
.hero {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  min-height: clamp(300px, 26vw, 680px);
  padding: 0;
  overflow: hidden;
  background: #f9eccc;
  border-bottom: 1px solid #cdb486;
}
.hero-copy {
  position: relative;
  z-index: 1;
  width: 39%;
  max-width: 700px;
  margin-left: 57%;
  padding: clamp(55px, 6vw, 95px) 0 45px;
}
.hero h1 {
  font-size: clamp(2.8rem, 5vw, 4.5rem);
  line-height: 1.04;
  font-weight: 500;
  letter-spacing: -.055em;
  margin: 0 0 14px;
  color: #3e3020;
  text-wrap: balance;
}
.hero-lede { font-size: 1rem; line-height: 1.6; color: #65513b; margin: 0; }
.hero-art { position: absolute; inset: 0; z-index: 0; width: 65%; height: 100%; margin: 0; max-width: 1700px; }
.hero-art img { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; object-position: center 70%; mix-blend-mode: normal; mask-image: linear-gradient(to right, #000 0, #000 88%, transparent 100%); }
.home-content { position: relative; }
.resume-banner { margin: 29px 0 0; border-radius: 5px; background: #eee3cbee; border-color: #d2b88b; }

.chapter-section { padding: 40px 0 48px; }
.section-heading { display: flex; flex-wrap: wrap; margin-bottom: 25px; align-items: center; }
.section-heading h2 { font-size: 2.2rem; line-height: 1.15; margin: 0; letter-spacing: -.035em; }
.segmented { background: #ece0c9; border-color: #d3bc98; border-radius: 5px; padding: 4px; }
.segmented button { border-radius: 3px; padding: 10px 14px; font-size: .78rem; color: #715c41; }
.segmented button[aria-pressed=true] { background: #fff9ec; color: #813d27; box-shadow: 0 1px 4px #603b1b15; }
.chapter-grid { gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.chapter-card {
  position: relative;
  background: #fffbf2de;
  background-image: url('./assets/paper-grain.svg?v=fe71b60cca0f32b3');
  border: 1px solid #d1bd98;
  border-radius: 4px 14px 4px 4px;
  padding: 23px 25px;
  min-height: 172px;
  box-shadow: 3px 4px 0 #e8d8bda6, 0 6px 15px #603b1b05;
}
.chapter-card::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 1px; background: #d5bf965c; }
.chapter-card::after { content: ''; position: absolute; right: 7px; top: 7px; width: 13px; height: 13px; border-top: 1px solid #b99c6e70; border-right: 1px solid #b99c6e70; border-radius: 0 7px 0 0; }
.chapter-card:hover { transform: translateY(-3px); border-color: #a67541; box-shadow: 3px 6px 0 #e6d2b3, 0 12px 24px #603b1b0e; }
.card-top { margin-bottom: 17px; gap: 12px; }
.chapter-icon.tone-2 { border-color: #d7b596; color: #91472c; background: #f4e0c8; }
.chapter-number { font-size: .65rem; color: #7f6240; letter-spacing: .15em; }
.card-chevron { color: #9b7951; }
.chapter-card h3 { font-size: 1.45rem; font-weight: 600; letter-spacing: -.035em; margin-bottom: 18px; flex: 1; }
.card-bottom { display: block; font-size: .76rem; white-space: normal; color: var(--muted); }
.card-progress { border-top: 1px dashed #d8c7aa; font-size: .7rem; padding-top: 15px; }
.mini-track { background: #e9ddc4; border-radius: 2px; }
.mini-track>span { background: #a67742; border-radius: 2px; }
.site-footer { background: #eddfc680; border-top-color: #ccb58c; padding: 20px 0; }
.footer-inner>p { color: #69563e; }
.footer-inner>.text-button { display: inline-flex; }
.footer-inner { flex-wrap: nowrap; }
.next-row { justify-content: flex-end; }
dialog h2 { margin-bottom: 25px; padding-right: 10px; }

/* Practice feels like a quiet page in a workbook. */
.practice-wrap { max-width: 850px; margin-top: 36px; }
.session-heading h1 { font-size: 2.65rem; margin-bottom: 23px; }
.session-heading .eyebrow { font-size: .66rem; letter-spacing: .15em; }
.question-count strong { color: #93472c; font-family: var(--serif); font-size: 1.35rem; }
.session-track { height: 4px; border-radius: 0; background: #e0cead; margin-bottom: 28px; }
.session-track>span { background: #9d5f34; }
.question-card { border: 1px solid #ccb693; border-radius: 5px; background: #fffbf2f5; padding: 36px 40px; box-shadow: 4px 5px 0 #e8d8bd, 0 12px 35px #63432108; }
.question-title { font-size: 2.05rem; font-weight: 600; line-height: 1.2; margin-bottom: 20px; }
.question-prompt { color: #4d3f30; font-size: 1.06rem; line-height: 1.85; }
.tag { background: #f0e2c8; color: #864526; border: 1px solid #ddc5a0; border-radius: 3px; font-size: .62rem; letter-spacing: .12em; }
.answer-choice { background: #fffcf5; border: 1px solid #c8b291; border-radius: 4px; }
.answer-choice.selected { background: #f3e4ca; border-color: #965632; }
.answer-choice.answer-correct { background: #ededd8; color: var(--olive); border-color: #7c8250; }
.answer-key { background: #f9f0df; border-color: #ceba98; border-radius: 3px; color: #7c6243; }
.numeric-row input { background: #fffdf7; border-color: #9f7d52; border-radius: 5px; }
.numeric-row input:disabled { background: #f4ebd9; opacity: 1; color: #6a573d; }
.input-help { color: #77644c; }
.hint-panel { border-color: #d3b67a; border-radius: 3px 12px 3px 3px; background: #f9edcc; box-shadow: 2px 3px 0 #dec69540; }
.hint-panel strong { color: #765321; }
.hint-panel p { color: #68502e; }
.scratchpad textarea { border-color: #ceba95; border-radius: 4px; background-color: #faf2df; background-image: repeating-linear-gradient(transparent 0, transparent 25px, #d6c6a547 25px, #d6c6a547 26px); background-position: 0 14px; line-height: 26px; }
.table-wrap { border-color: #d1bd99; border-radius: 4px; background: #fffaf0; }
thead th { background: #efe1c6; color: #665039; }
tbody tr:nth-child(even) { background: #faf1df; }
tbody tr+tr { border-color: #dfcfb1; }
.result-card { border-color: #bcc09a; border-radius: 5px; background: #f2f0def5; padding: 32px 38px; box-shadow: 3px 4px 0 #e1d6b666; }
.result-card.incorrect { border-color: #d1ad80; background: #f9eddb; }
.result-card.revealed { background: #f5eddb; border-color: #ceba93; }
.result-heading h2 { font-size: 1.7rem; font-weight: 600; }
.result-icon { color: var(--olive); background: #dfe3c3; border: 1px solid #c2c79f; }
.incorrect .result-icon { color: #954728; background: #efd8b4; border-color: #d6b583; }
.revealed .result-icon { color: #826035; background: #e9dabc; border-color: #cab38b; }
.correct-answer>strong { font-family: var(--serif); color: #6f4a2d; font-size: 1.9rem; }
.correct .correct-answer>strong { color: #555c34; }
.explanation { color: #514633; }
.worked-solution { border-color: #d0c09d; background: #fffcf1a6; border-radius: 4px; }
.self-mark { border-color: #d5c4a1; }
.self-mark .selected-mark { background: #ead5b0; border-color: #b99a63; color: #724727; }

/* Dialogs, progress, and round-ups share the same paper and ink. */
dialog { background: #fff8e9; background-image: url('./assets/paper-grain.svg?v=fe71b60cca0f32b3'); border: 1px solid #bca17a; border-radius: 6px; box-shadow: 0 25px 100px #3f271d40, inset 0 0 0 6px #f2e6ce; }
dialog::backdrop { background: #48311c73; backdrop-filter: blur(3px); }
dialog h2 { font-size: 2.3rem; font-weight: 500; }
.modal-close { background: transparent; }
.mode-options { grid-template-columns: repeat(auto-fit, minmax(min(100%, 4.2rem), 1fr)); }
.mode-option>span { height: auto; min-height: 126px; text-align: center; border-radius: 4px; border-color: #d2bd96; background: #fffbf26b; }
.mode-option input:checked+span { border-color: #96522f; background: #f0dfbd; color: #914b2b; }
.mode-option strong { font-weight: 600; }
.setup-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.setup-row select { background: #fffcf4; border-color: #c6af88; border-radius: 4px; }
.summary-wrap h1, .progress-intro h1 { font-size: 2.7rem; letter-spacing: -.035em; line-height: 1.1; margin-bottom: 28px; }
.summary-stats, .progress-stats { background: #fff8e9b5; border-color: #cdb48e; border-radius: 4px; }
.summary-stats strong, .progress-stats strong { color: #8a4a2b; font-family: var(--serif); font-size: 2.6rem; font-weight: 500; }
.summary-stats strong small { color: #8a7355; }
.roundup h2, .chapter-log h2, .recent-section h2 { font-size: 1.65rem; font-weight: 600; }
.roundup-item>div { color: #6b5943; }
.roundup-status.good { color: var(--olive); background: #e3e3c5; }
.roundup-status:not(.good) { background: #eed9b9; color: #914b2b; }
.progress-intro { max-width: 630px; }
.empty-state { border-radius: 4px; border: 1px dashed #c9ae80; background: #f1e3c977; }
.empty-state h2 { font-size: 1.65rem; }
.chapter-log-row h3 { font-size: 1.25rem; font-weight: 600; }
.chapter-log-row { border-color: #d5c2a1; }
.chapter-log-row:first-of-type { border-color: #d5c2a1; }
.privacy-note { border-color: #d5c2a1; }
#toast { background: #563b27; border: 1px solid #967348; border-radius: 5px; color: #fff4dd; }
.skip-link { background: #813b25; }

@media (min-width: 1700px) {
  .hero-copy { padding-top: 95px; }
}

@media (max-width: 1100px) {
  .hero { min-height: 300px; }
  .hero-copy { padding-top: 65px; padding-bottom: 45px; }
  .hero h1 { font-size: 3.35rem; }
  .hero-lede { max-width: 390px; font-size: .95rem; }
  .chapter-card { padding: 24px 20px; }
  .chapter-card h3 { font-size: 1.4rem; }
}

@media (max-width: 780px) {
  .nav-inner { min-height: 76px; }
  .brand { font-size: 1.75rem; }
  .site-header nav { gap: 20px; font-size: .8rem; }
  .hero { min-height: 220px; }
  .hero-copy { padding: 57px 12px 30px 0; }
  .hero h1 { font-size: clamp(2rem, 5.5vw, 3rem); }
  .hero-lede { font-size: .85rem; max-width: 270px; }
  .section-heading { display: flex; }
  .section-heading h2 { font-size: 2.1rem; }
  .chapter-section { padding-top: 32px; }
  .week-filter { margin-top: 0; }
  .chapter-grid { gap: 20px; }
  .chapter-card { padding: 26px 22px; }
  .card-bottom { font-size: .74rem; }
  .question-card { padding: 30px; }
  .result-card { padding: 29px; }
  .result-heading h2 { font-size: 1.55rem; }
}

@media (max-width: 560px) {
  .nav-inner { min-height: 73px; gap: 12px; }
  .brand { font-size: 1.55rem; gap: 8px; }
  .brand-mark { width: 30px; height: 30px; }
  .site-header nav { font-size: .71rem; gap: 16px; }
  .hero { min-height: 260px; background: #f9edcf; }
  .hero-copy { width: 100%; margin-left: 0; max-width: none; padding: 22px 20px 18px; text-align: center; }
  .hero h1 { font-size: clamp(1.85rem, 7vw, 2.4rem); line-height: 1.07; margin: 0 0 10px; letter-spacing: -.05em; }
  .hero-lede { font-size: .75rem; line-height: 1.5; margin: 0 auto; max-width: 190px; }
  .hero-art { position: relative; inset: auto; height: 260px; width: 100%; }
  .hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 60% bottom; mask-image: none; }
  .resume-banner { margin-top: 23px; }
  .resume-banner>.button { margin-left: 0; }
  .chapter-section { padding: 29px 0 33px; }
  .section-heading { margin-bottom: 23px; gap: 18px; }
  .section-heading h2 { font-size: 2rem; }
  .week-filter { margin-top: 0; }
  .chapter-grid { gap: 18px; }
  .chapter-card { padding: 22px 24px; min-height: 160px; }
  .card-top { margin-bottom: 16px; }
  .chapter-number { font-size: .63rem; }
  .chapter-card h3 { font-size: 1.45rem; }
  .card-bottom { font-size: .75rem; }
  .practice-wrap { margin-top: 23px; }
  .session-heading h1 { font-size: 2.2rem; margin-bottom: 20px; }
  .session-heading .eyebrow { font-size: .57rem; }
  .question-count { font-size: .71rem; }
  .question-count strong { font-size: 1.2rem; }
  .question-card { padding: 25px 21px; }
  .question-title { font-size: 1.7rem; }
  .question-prompt { font-size: .98rem; line-height: 1.8; }
  .tag { font-size: .57rem; padding: 6px 8px; }
  .answer-choice { font-size: .96rem; }
  .hint-panel { padding: 16px; }
  .result-card { padding: 25px 21px; }
  .result-heading h2 { font-size: 1.45rem; line-height: 1.15; }
  .correct-answer>strong { font-size: 1.65rem; }
  .explanation { font-size: .91rem; line-height: 1.8; }
  dialog { padding: 33px 22px 26px; }
  dialog h2 { font-size: 1.95rem; line-height: 1.13; }
  .mode-option>span { min-height: 121px; height: auto; padding: 12px 4px; text-align: center; }
  .mode-option strong { font-size: .72rem; }
  .mode-option small { font-size: .62rem; line-height: 1.5; }
  .summary-wrap h1, .progress-intro h1 { font-size: 2.35rem; }
  .summary-stats strong, .progress-stats strong { font-size: 2.2rem; }
  .roundup h2, .chapter-log h2, .recent-section h2 { font-size: 1.5rem; }
  .chapter-log-row h3 { font-size: 1.17rem; }
  .empty-state h2 { font-size: 1.5rem; }
}

@media (max-width: 360px) {
  .nav-inner { width: calc(100% - 26px); gap: 9px; }
  .brand { font-size: 1.42rem; gap: 6px; }
  .brand-mark { width: 26px; height: 26px; }
  .site-header nav { gap: 11px; font-size: .64rem; }
  .hero { min-height: 230px; }
  .hero-art { height: 230px; }
  .hero-copy { padding-left: 6px; padding-right: 6px; }
  .hero h1 { font-size: 1.85rem; }
  .card-bottom { font-size: .72rem; }
  .chapter-card { padding: 23px 20px; }
  .mode-option strong { font-size: .68rem; }
  .mode-option small { font-size: .58rem; }
  .session-heading h1 { font-size: 1.95rem; }
}