/* Development notebook: an extension of the existing forest / paper palette. */
.notebook { background: var(--paper); }
.notebook-header { background: var(--forest); color: white; padding: 1.2rem max(1.25rem, calc((100% - 1280px) / 2)); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.notebook-header .wordmark { flex-wrap: wrap; }
.notebook-header > a:last-child { font-size: .875rem; text-underline-offset: .3em; }
.notebook-nav { display: flex; flex-wrap: wrap; gap: .15rem 1.15rem; padding: .7rem max(1.25rem, calc((100% - 1280px) / 2)); border-bottom: 1px solid var(--line); background: #e2e4d8; }
.notebook-nav a { font-size: .875rem; text-transform: none; letter-spacing: 0; padding: .5rem 0; border-bottom: 2px solid transparent; }
.notebook-nav a[aria-current="page"] { border-color: var(--forest); }
.notebook-nav a:hover, .notebook-nav a:focus-visible { color: #4c3865; border-color: currentColor; }
.notebook-main { max-width: 1280px; margin: auto; padding: 2.5rem 1.25rem 5rem; }
.notebook-heading { max-width: 920px; margin-bottom: 2rem; }
.notebook-heading .eyebrow { color: #4d5b50; margin-bottom: .8rem; }
.notebook-heading h1 { font-size: clamp(2.6rem, 6vw, 4.7rem); line-height: 1.05; letter-spacing: -.045em; }
.notebook-heading .lede { font-size: 1.15rem; line-height: 1.65; max-width: 800px; margin: 1.2rem 0; }
.plan-status { display: inline-block; padding: .35rem .7rem; background: #dfd4b4; border: 1px solid #c6b884; font-size: .875rem; }
.notebook h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.13; letter-spacing: -.035em; margin-bottom: 1rem; }
.notebook h3 { font-size: 1.2rem; line-height: 1.3; margin: 1.5rem 0 .7rem; }
.notebook p, .notebook li, .notebook td, .notebook th { font-size: 1rem; }
.notebook p { max-width: 86ch; }
.notebook li { margin: .5rem 0; }
.notebook ul, .notebook ol { padding-left: 1.3rem; }
.notebook a { text-underline-offset: .18em; }
.notebook a:focus-visible, .project-directory a:focus-visible { outline: 3px solid #93682a; outline-offset: 4px; }
.plan-section { padding: 2.7rem 0; border-top: 1px solid var(--line); scroll-margin-top: 1rem; }
.section-kicker { font-size: .875rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .8rem; color: #566457; }
.plan-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border: 1px solid #385448; background: #385448; margin-bottom: 2rem; }
.plan-summary > div { padding: 1.25rem; background: var(--forest); color: white; }
.plan-summary strong { display: block; font: 400 1.65rem/1.2 Georgia, serif; margin-bottom: .5rem; }
.plan-summary p { margin: 0; color: #d1dccb; }
.plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.plan-card { border: 1px solid var(--line); padding: 1.5rem; background: #e7e8dc; }
.plan-card h3:first-child { margin-top: 0; }
.plan-card p:last-child { margin-bottom: 0; }
.plan-callout { border-left: 4px solid var(--violet); padding: 1.2rem 1.5rem; background: #e4dfe8; margin: 1.5rem 0; }
.plan-callout p { margin: .35rem 0; }
.plan-callout.warning { border-color: #885421; background: #e8ddc1; }
.plan-table-wrap { overflow-x: auto; max-width: 100%; margin: 1.5rem 0; border: 1px solid var(--line); }
.plan-table-wrap:focus-visible { outline: 3px solid var(--violet); }
.plan-table { width: 100%; border-collapse: collapse; min-width: 660px; text-align: left; }
.plan-table caption { text-align: left; padding: .85rem 1rem; background: #e0e3d5; font-size: .875rem; }
.plan-table th { background: var(--forest); color: #f3f4e9; font-weight: 650; }
.plan-table td, .plan-table th { padding: 1rem; vertical-align: top; border-bottom: 1px solid var(--line); line-height: 1.5; }
.plan-table tbody th { background: #e2e5d7; color: var(--ink); min-width: 130px; }
.plan-table tr:nth-child(even) td { background: #e9eade; }
.plan-table tr:last-child td, .plan-table tr:last-child th { border-bottom: 0; }
.plan-table p { margin: 0; }
.local-contents { gap: .5rem 1.3rem; margin: 1.5rem 0 2.5rem; }
.local-contents a { text-transform: none; letter-spacing: 0; font-size: .875rem; text-decoration: underline; padding: .25rem 0; }
.local-contents a:hover { color: var(--violet); }
.phase { border: 1px solid var(--line); margin: 1.5rem 0; }
.phase summary { cursor: pointer; padding: 1.25rem; font-size: 1.15rem; font-weight: 700; background: #e1e5d8; }
.phase[open] summary { border-bottom: 1px solid var(--line); }
.phase-body { padding: 0 1.5rem 1rem; }
.phase-body .plan-table { min-width: 620px; }
.plan-meta { color: #576155; font-size: .875rem !important; }
.source-list { columns: 2; column-gap: 3rem; }
.source-list li { break-inside: avoid; padding-bottom: .75rem; }
.source-list span { display: block; color: #566457; font-size: .875rem; margin-top: .25rem; }
.plan-next { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.notebook footer a { color: white; }
@media(max-width: 780px) {
  .notebook-header { align-items: flex-start; }
  .notebook-header .wordmark { font-size: 1rem; }
  .notebook-nav { gap: .15rem 1rem; }
  .notebook-nav a { font-size: .875rem; }
  .notebook-main { padding-top: 1.8rem; }
  .plan-summary, .plan-grid { grid-template-columns: 1fr; }
  .source-list { columns: 1; }
  .plan-section { padding-block: 2rem; }
  .phase-body { padding-inline: 1rem; }
}
@media print {
  .notebook-header, .notebook-nav, .local-contents, .plan-next, .skip-link, footer { display: none; }
  .notebook, .plan-card, .plan-table tr:nth-child(even) td { background: white; }
  .notebook-main { padding: 0; max-width: none; }
  .plan-table-wrap { overflow: visible; }
  .plan-table { min-width: 0; }
  .plan-table th { background: #e1e5d8; color: black; }
  .plan-table td, .plan-table th { padding: .45rem; font-size: 10pt; }
  .plan-summary { display: block; }
  .plan-summary > div { background: white; color: black; border-bottom: 1px solid #888; }
  .plan-summary p { color: black; }
  .phase { break-inside: avoid; }
}

/* Illustrated chapters carry the homepage's landscape language into the plan. */
.illustrated { --chapter-accent: #e8cf88; --scene-position: 64% 50%; }
.illustrated .notebook-header { background: #071d1b; padding-block: 1.4rem; }
.illustrated .notebook-nav { background: #102f2a; color: #edf1e7; border-color: #426151; }
.illustrated .notebook-nav a[aria-current="page"] { color: var(--chapter-accent); border-color: var(--chapter-accent); }
.illustrated .notebook-nav a:hover, .illustrated .notebook-nav a:focus-visible { color: var(--chapter-accent); }
.illustrated .notebook-main { max-width: none; padding: 0; }
.notebook-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: clamp(36rem, 51vw, 45rem); padding: 4rem 0 6.5rem; background: var(--forest); color: #fffdf5; }
.notebook-hero-image, .notebook-hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.notebook-hero-image { object-fit: cover; object-position: var(--scene-position); }
.notebook-hero-shade { background: linear-gradient(90deg, rgba(3, 19, 17, .94) 0%, rgba(3, 19, 17, .84) 30%, rgba(3, 19, 17, .28) 64%, rgba(3, 19, 17, .03) 100%), linear-gradient(0deg, rgba(3, 19, 17, .72), transparent 36%); }
.notebook-hero .notebook-heading { width: min(calc(100% - 3rem), 1280px); max-width: none; margin: 0 auto; }
.notebook-hero .eyebrow { color: var(--chapter-accent); font-size: .875rem; margin-bottom: 1.4rem; letter-spacing: .12em; }
.notebook-hero h1 { max-width: 720px; font-size: clamp(3.2rem, 6.8vw, 6.25rem); line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; }
.notebook-hero .lede { max-width: 610px; margin-top: 1.5rem; font-size: 1.12rem; line-height: 1.65; color: #e5ece0; }
.notebook-hero .plan-status { max-width: 620px; margin-top: .5rem; color: #f4edda; background: rgba(6, 28, 22, .7); border: 1px solid rgba(234, 220, 180, .6); font-size: .875rem; padding: .55rem .7rem; }
.notebook .scene-caption { position: absolute; bottom: 1.2rem; right: max(1.5rem, calc((100% - 1280px) / 2)); left: 1.5rem; text-align: right; max-width: none; margin: 0; color: #f4ecda; font-size: .75rem; letter-spacing: .04em; }
.notebook-content { width: min(calc(100% - 3rem), 1280px); margin: 0 auto; padding-bottom: 5rem; }
.illustrated .plan-summary { position: relative; margin-top: -1.7rem; border-color: #647e59; box-shadow: 0 18px 38px rgba(3, 20, 16, .1); }
.illustrated .plan-summary > div { padding: 1.5rem; background: #0b2923; }
.illustrated .plan-summary strong { color: #eee7c9; }
.illustrated .local-contents { padding: 1.1rem 0; margin-block: 1rem 1.7rem; border-block: 1px solid var(--line); }
.illustrated .plan-section { padding-block: 3.5rem; }
.illustrated .plan-section h2 { max-width: 850px; font-size: clamp(2.1rem, 4vw, 3.7rem); }
.illustrated .plan-grid { gap: 1.5rem; }
.illustrated .plan-card { background: #e5e9dc; border-top: 3px solid #55764e; padding: 1.75rem; }
.illustrated .plan-table-wrap { background: #f5f4eb; }
.landscape-panel { position: relative; margin: 1.5rem 0 3rem; background: #0b2923; overflow: hidden; }
.landscape-panel img { display: block; width: 100%; aspect-ratio: 1672 / 941; object-fit: cover; object-position: var(--scene-position); }
.landscape-panel figcaption { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; color: #e4e9dc; font-size: .875rem; }
.landscape-panel figcaption span:first-child { color: #e8cf88; }
.illustrated[data-page="land-systems"] { --chapter-accent: #cce5a5; }
.illustrated[data-page="wellness"] { --chapter-accent: #ead3ef; }
.illustrated[data-page="people"] { --chapter-accent: #f1d3a6; }
.illustrated .plan-next { padding-top: 2rem; }
.illustrated .plan-summary > div:nth-child(2) { background: #543e60; }
.illustrated .plan-summary > div:nth-child(3) { background: #17454c; }
.illustrated .plan-summary p { color: #e6ebdc; }
.illustrated .plan-card:nth-child(4n+2) { background: #eadcc0; border-top-color: #9a713c; }
.illustrated .plan-card:nth-child(4n+3) { background: #dfd6e8; border-top-color: #80688c; }
.illustrated .plan-card:nth-child(4n+4) { background: #d3e3dd; border-top-color: #477970; }
.illustrated[data-page="wellness"] { background: #f2edf3; }
.illustrated[data-page="people"], .illustrated[data-page="viability"] { background: #f4ecd9; }
.illustrated[data-page="land-systems"] { background: #edf1e3; }
@media (max-width: 1000px) {
  .notebook-hero h1 { max-width: 640px; }
  .notebook-hero-shade { background: linear-gradient(90deg, rgba(3,19,17,.91), rgba(3,19,17,.76) 48%, rgba(3,19,17,.12)), linear-gradient(0deg, rgba(3,19,17,.72), transparent 50%); }
}
@media (max-width: 780px) {
  .notebook-hero { min-height: 38rem; padding: 3rem 0 5rem; align-items: flex-end; }
  .notebook-hero .notebook-heading, .notebook-content { width: calc(100% - 2rem); }
  .notebook-hero h1 { font-size: clamp(2.7rem, 10.5vw, 4.2rem); }
  .notebook-hero .lede { font-size: 1rem; margin-top: 1.1rem; }
  .notebook-hero-shade { background: linear-gradient(0deg, rgba(3,19,17,.97) 0%, rgba(3,19,17,.83) 46%, rgba(3,19,17,.13) 100%); }
  .notebook .scene-caption { right: 1rem; left: 1rem; bottom: .9rem; font-size: .75rem; }
  .illustrated .plan-summary { margin-top: 0; }
  .illustrated .plan-summary > div { padding: 1.2rem; }
  .illustrated .plan-section { padding-block: 2.6rem; }
  .landscape-panel img { aspect-ratio: 1672 / 941; }
  .landscape-panel figcaption { flex-direction: column; gap: .4rem; }
}
@media print {
  .notebook-hero-image, .notebook-hero-shade, .scene-caption, .landscape-panel { display: none; }
  .notebook-hero { min-height: 0; padding: 0; background: white; color: black; }
  .notebook-hero .notebook-heading, .notebook-content { width: 100%; }
  .notebook-hero h1 { font-size: 28pt; max-width: none; }
  .notebook-hero .eyebrow, .notebook-hero .lede, .notebook-hero .plan-status { color: black; background: none; }
  .illustrated .plan-summary { margin-top: 1rem; box-shadow: none; }
  .illustrated .plan-summary > div { background: white; color: black; }
  .illustrated .plan-summary strong { color: black; }
  .illustrated .plan-section { padding-block: 1.5rem; }
}