/* The white paper, read from the surface down, with a soil profile for the
   menu. The brand tokens are in brand.css, shared with the landing page. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.55 var(--sans); }
a { color: var(--olive); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.12; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 20; padding: 8px 12px; border-radius: 8px; background: var(--olive); color: var(--accent-ink); }
.skip:focus { left: 8px; }

/* Shell: the soil profile on the left, the paper on the right. */
.shell { display: grid; grid-template-columns: 290px minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; border-right: 1px solid var(--line); background: var(--side); }
.brand { display: flex; align-items: center; gap: 11px; padding: 22px 20px 18px; color: inherit; text-decoration: none; }
.brand img { flex: none; border-radius: 50%; }
.brand b { display: block; font-size: 23px; line-height: 1.05; }
.brand small { display: block; margin-top: 3px; color: var(--muted); font: italic 13px var(--serif); }

.profile { position: relative; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.profile::-webkit-scrollbar { display: none; }
.profile > ol { display: flex; flex-direction: column; min-height: 100%; margin: 0; padding: 0; list-style: none; }
.band { --f: 1; position: relative; display: flex; flex: var(--f) 0 auto; flex-direction: column; min-height: 56px; background: var(--tx), var(--c); color: var(--t); transition: flex-grow .45s ease; }
/* A wavy boundary between horizons, in the lower horizon's colour. */
.band + .band::before { content: ""; position: absolute; z-index: 1; top: -5px; left: 0; right: 0; height: 6px; background: var(--c); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='6'%3E%3Cpath d='M0 6V3.5Q11.5 0 23 3.5T46 3.5V6Z'/%3E%3C/svg%3E") 0 0 / 46px 6px repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='6'%3E%3Cpath d='M0 6V3.5Q11.5 0 23 3.5T46 3.5V6Z'/%3E%3C/svg%3E") 0 0 / 46px 6px repeat-x; }
/* The cream seam along each boundary, like the lines between the logo's horizons. */
.band + .band::after { content: ""; position: absolute; z-index: 1; top: -5px; left: 0; right: 0; height: 6px; background: var(--seam); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='6'%3E%3Cpath d='M0 3.5Q11.5 0 23 3.5T46 3.5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") 0 0 / 46px 6px repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='6'%3E%3Cpath d='M0 3.5Q11.5 0 23 3.5T46 3.5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") 0 0 / 46px 6px repeat-x; pointer-events: none; }
.band[data-h="b"]::before, .band[data-h="r"]::before, .band[data-h="b"]::after, .band[data-h="r"]::after { -webkit-mask-size: 70px 6px; mask-size: 70px 6px; }
.band[data-h="s"] { --f: .7; }
.band[data-h="o"] { --f: .75; }
.band[data-h="a"] { --f: 1.15; }
.band[data-h="e"] { --f: .85; }
.band[data-h="b"] { --f: 1.35; }
.band[data-h="c"] { --f: 1.1; }
.band[data-h="r"] { --f: .9; }
.band.is-active { flex-grow: calc(var(--f) * 2.6); }
.band-head { position: relative; z-index: 2; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 10px; padding: 12px 40px 10px 18px; color: inherit; text-decoration: none; }
.band-letter { font: 400 26px/1 var(--serif); text-align: center; }
.band-label small { display: block; opacity: .74; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.band-label b { display: block; margin-top: 2px; font: 400 17px/1.15 var(--serif); }
.band-num { opacity: .7; font-style: italic; }
.band-head:hover .band-label b { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.band-head:focus-visible, .band-subs a:focus-visible { outline: 2px solid var(--t); outline-offset: -4px; border-radius: 8px; }
.band.is-active .band-head { box-shadow: inset 4px 0 0 var(--t); }
.band-subs { position: relative; z-index: 2; display: none; margin: 0; padding: 0 40px 12px 58px; list-style: none; }
.band.is-active .band-subs { display: grid; gap: 1px; }
.band-subs a { display: block; padding: 3px 0; color: inherit; opacity: .78; font-size: 12.5px; text-decoration: none; }
.band-subs a:hover, .band-subs a.is-here { opacity: 1; }
.band-subs a.is-here { font-weight: 600; }
.band-subs a.is-here::before { content: "◆ "; font-size: 9px; vertical-align: 1px; }

/* The root grows down the profile as you read. */
.root { position: absolute; z-index: 3; top: 0; right: 17px; width: 2px; height: var(--depth, 0px); border-radius: 2px; background: linear-gradient(var(--root), color-mix(in srgb, var(--root) 75%, #fff)); box-shadow: 0 0 0 1px rgba(46, 30, 18, .35); pointer-events: none; transition: height .25s ease-out; }
.root::after { content: ""; position: absolute; bottom: -4px; left: -3px; width: 8px; height: 8px; border-radius: 50% 50% 50% 0; background: var(--root); transform: rotate(-45deg); box-shadow: 0 0 10px 2px color-mix(in srgb, var(--root) 55%, transparent); }
@media (prefers-reduced-motion: reduce) { .root, .band { transition: none; } }

.side-foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px 18px; }
.pill { padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: 13px var(--sans); cursor: pointer; }
.pill:hover { border-color: var(--olive); }
a.pill { text-decoration: none; }

/* The paper. */
.paper { width: 100%; max-width: 860px; margin: 0 auto; padding: 0 48px 90px; outline: none; font: 400 18px/1.62 var(--serif); }
.paper p { margin: 0 0 16px; }
.paper sup { font: 600 10.5px var(--sans); }
.paper sup a { text-decoration: none; }
.chapter { padding-top: 52px; }
.chapter h2 { margin: 26px 0 18px; font-size: 44px; letter-spacing: -.01em; }
.chapter h3 { margin: 46px 0 14px; font-size: 27px; }
.num { margin-right: 6px; color: var(--olive); font-style: italic; }
.lede { color: var(--muted); font-size: 20px; line-height: 1.5; }
.label { margin: 22px 0 8px !important; color: var(--muted); font: 600 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.caption, figcaption { color: var(--muted); font: 13px/1.5 var(--sans); }
.caption { margin-top: 10px !important; }

/* Cover. */
.cover { position: relative; padding: 64px 0 64px; }
/* The logo (brand.css), with the tagline beside it. */
.lockup { display: flex; align-items: center; gap: 30px; }
.lockup .logo { font-size: 30px; }
.lockup .logo-mark { width: 132px; }
.lockup figcaption { font-size: inherit; line-height: 1; } /* not the paper's 13px figure captions */
.lockup p { margin: 0 !important; color: var(--muted); font: italic 19px var(--serif); }
.kicker { margin: 56px 0 10px !important; color: var(--olive); font: 600 11.5px var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.cover h1 { max-width: 720px; margin: 0; font-size: 62px; font-weight: 300; line-height: 1.02; letter-spacing: -.02em; }
.subtitle { max-width: 640px; margin: 18px 0 0 !important; color: var(--muted); font-size: 22px; font-style: italic; line-height: 1.4; }
.meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 40px 0 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.meta div { padding: 12px 14px 14px 0; }
.meta div + div { padding-left: 14px; border-left: 1px solid var(--line); }
.meta dt { color: var(--muted); font: 600 10.5px var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.meta dd { margin: 4px 0 0; font: 14px/1.35 var(--sans); }
.abstract { margin: 36px 0 0; padding: 26px 30px 12px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.chapter .abstract h2 { margin: 0 0 12px; color: var(--muted); font: 600 11px var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.howto { max-width: 680px; margin: 26px 0 0 !important; color: var(--muted); font: 14px/1.55 var(--sans); }
.descend { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 10px 18px; border-radius: 999px; background: var(--olive); color: var(--accent-ink); font: 500 14px var(--sans); text-decoration: none; }
.descend span { animation: dip 2.4s ease-in-out infinite; }
@keyframes dip { 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .descend span { animation: none; } }
/* The ground: grass on the surface, the O horizon showing below. */
.cover::after { content: ""; display: block; height: 14px; margin-top: 60px; border-radius: 8px; background: linear-gradient(#DCC7AB 0 34%, #FCF9F0 34% 41%, #875833 41% 66%, #FCF9F0 66% 73%, #5B391E 73%); box-shadow: 0 0 0 1px var(--line); }

/* Chapter header: a core sample of the horizon. */
.stratum { display: flex; align-items: center; gap: 22px; min-height: 120px; padding: 22px 26px; border-radius: 18px; background: var(--tx), var(--c); box-shadow: var(--edge), 0 0 0 1px var(--line); color: var(--t); }
.stratum-letter { flex: none; width: 64px; font: 300 72px/1 var(--serif); text-align: center; }
.stratum-name { margin: 0 0 4px !important; font: 600 11.5px var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.stratum-note { margin: 0 !important; opacity: .88; font: italic 17px/1.4 var(--serif); }

/* Quotes. */
.pull { margin: 26px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--olive); font: 300 27px/1.3 var(--serif); }
.pull.is-question { font-style: italic; font-size: 24px; }
.manifesto { margin: 8px 0 0; padding: 30px; border-radius: 22px; background: linear-gradient(160deg, #4D2F19, #875833); color: #FCF9F0; }
.manifesto > p { margin: 0 0 10px !important; color: #DCC7AB; font: 600 11.5px var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.manifesto blockquote { margin: 0; font: 400 28px/1.22 var(--serif); }
.manifesto .mission-label { margin-top: 22px !important; }
.manifesto small { display: block; color: #EADCC6; font: 16px/1.5 var(--serif); }
.triad { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 22px 0 !important; color: var(--olive); font-size: 21px; font-style: italic; }
.maxim { margin: 8px 0 26px; padding: 26px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--olive); font: italic 30px/1.25 var(--serif); text-align: center; }

/* Lists. */
.values { display: grid; margin: 0; border-top: 1px solid var(--line); }
.values div { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.values dt { font-size: 19px; }
.values dd { margin: 0; color: var(--muted); font: 14.5px/1.5 var(--sans); }
.checks { display: grid; gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
.checks li { position: relative; padding-left: 22px; font: 15px/1.55 var(--sans); }
.checks li::before { content: ""; position: absolute; top: .55em; left: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--ochre); }
.steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.steps li { position: relative; padding: 11px 15px 11px 52px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); font: 14px/1.5 var(--sans); counter-increment: s; }
.steps li::before { content: counter(s); position: absolute; top: 10px; left: 14px; display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: var(--olive); color: var(--accent-ink); font-size: 12.5px; }
.refs { margin: 0; padding-left: 24px; font: 13.5px/1.55 var(--sans); }
.refs li { margin: 7px 0; padding-left: 4px; scroll-margin-top: 30px; }
.refs li:target { background: var(--olive-soft); border-radius: 6px; }

/* Cards and grids. */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin: 18px 0; }
.facts { display: grid; gap: 8px; }
.facts div { display: grid; gap: 2px; padding: 12px 14px; border-left: 4px solid var(--viz-char); border-radius: 0 12px 12px 0; background: var(--surface); }
.facts strong { font: 400 25px var(--serif); }
.facts small { color: var(--muted); font: 13px/1.45 var(--sans); }
.flow, .treatments { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 18px 0; padding: 0; list-style: none; }
.flow li, .treatments li { display: grid; align-content: start; gap: 4px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.flow span { color: var(--olive); font: 600 11px var(--sans); letter-spacing: .14em; }
.flow b, .treatments b { margin-top: 14px; font: 400 20px/1.15 var(--serif); }
.flow small, .treatments small { color: var(--muted); font: 12.5px/1.45 var(--sans); }
.treatments li { background: linear-gradient(135deg, var(--olive-soft), transparent); }
.treatments span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: var(--olive); color: var(--accent-ink); font: 13px var(--sans); }
.programs { display: grid; margin: 18px 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.programs li { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.programs .roman { color: var(--olive); font: italic 30px/1 var(--serif); }
.programs b { display: block; font: 400 22px/1.2 var(--serif); }
.programs small { display: block; margin-top: 2px; color: var(--olive); font: 500 12px var(--sans); }
.programs p { margin: 6px 0 0 !important; color: var(--muted); font: 14px/1.5 var(--sans); }
.levels { display: grid; gap: 8px; margin: 18px 0; padding: 0; list-style: none; }
.levels li { display: flex; gap: 16px; padding: 15px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.levels li > span { color: var(--olive); font: italic 22px var(--serif); }
.levels b { display: block; font: 400 19px var(--serif); }
.levels small { color: var(--muted); font: 13.5px/1.5 var(--sans); }
.phases { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 18px 0 26px; padding: 0; list-style: none; }
.phases li { padding: 15px 14px; border: 1px solid var(--line); border-top: 4px solid var(--line); border-radius: 13px; background: var(--surface); }
.phases li.is-now { border-top-color: var(--olive); background: linear-gradient(180deg, var(--olive-soft), var(--card) 55%); }
.phases li.is-next { border-top-color: var(--ochre); }
.phases span, .phases small { display: block; color: var(--muted); font: 10.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.phases b { display: block; margin: 16px 0 3px; font: 400 19px/1.15 var(--serif); }
.phases p { margin: 10px 0 0 !important; color: var(--muted); font: 12px/1.45 var(--sans); }
.invite { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
.invite article { display: grid; align-content: start; gap: 6px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.invite span { font-size: 24px; }
.invite b { font: 400 21px var(--serif); }
.invite p { margin: 0 !important; color: var(--muted); font: 13.5px/1.5 var(--sans); }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.cta small { color: var(--muted); font: 13px var(--sans); }
.follow { display: flex; align-items: center; gap: 14px; margin: 18px 0 0; color: var(--muted); font: 13px var(--sans); }
.print-only { display: none; }
.button { display: inline-flex; gap: 8px; padding: 11px 18px; border-radius: 999px; background: var(--olive); color: var(--accent-ink); font: 500 14.5px var(--sans); text-decoration: none; }
.button:hover { filter: brightness(1.08); }
.declaration { margin: 8px 0 0; padding: 34px 36px 24px; border-radius: 22px; background: var(--tx), var(--c); color: var(--t); }
.declaration { --c: #4D2F19; --t: #FCF9F0; --tx: none; }
.declaration p { font-size: 19px; }
.declaration .sign { margin: 22px 0 0 !important; color: #DCC7AB; font: italic 26px var(--serif); }

/* Surfaces catch a faint top edge of light in dark mode (--edge). */
.abstract, .flow li, .treatments li, .levels li, .phases li, .invite article, .steps li, .table, .diagram, .ch-box, .facts div { box-shadow: var(--edge); }

/* Tables: even columns that fill the width; no empty cells. */
.table { overflow-x: auto; margin: 14px 0 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.table table { width: 100%; border-collapse: collapse; table-layout: fixed; font: 13.5px/1.5 var(--sans); }
.table th, .table td { padding: 10px 14px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; text-align: left; vertical-align: top; }
.table th { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.table tr:last-child td { border-bottom: 0; }

/* Figures. */
.fig { margin: 22px 0; }
.fig figcaption { margin-top: 8px; }
.diagram { overflow-x: auto; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.cy-svg { display: block; width: 100%; min-width: 520px; height: auto; font-family: var(--sans); }
.cy-node rect { fill: var(--bg); stroke: var(--line); stroke-width: 1.5; }
.cy-node.is-air rect { stroke: var(--viz-air); } .cy-node.is-plant rect { stroke: var(--olive); } .cy-node.is-mulch rect { stroke: var(--viz-mulch); }
.cy-node.is-life rect { stroke: var(--loam); } .cy-node.is-soil rect { stroke: var(--viz-soil); } .cy-node.is-char rect { stroke: var(--viz-char); stroke-width: 2.5; }
.cy-title { fill: var(--ink); font-size: 14px; font-weight: 600; }
.cy-sub { fill: var(--muted); font-size: 11.5px; }
.cy-arrow { fill: none; stroke: var(--muted); stroke-width: 1.8; }
.cy-headfill { fill: var(--muted); }
.cy-zone { fill: var(--muted); font-size: 12px; font-style: italic; }
.ph { display: flex; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; font-family: var(--sans); }
.ph-zone { display: grid; align-content: start; gap: 3px; min-width: 0; padding: 12px 10px; border-top: 8px solid; background: var(--surface); }
.ph-zone + .ph-zone { border-left: 2px solid var(--bg); }
.ph-zone b { font-size: 12.5px; } .ph-zone small { color: var(--muted); font-size: 11px; } .ph-zone em { color: var(--muted); font-size: 11.5px; font-style: normal; line-height: 1.4; }
.ph-0 { border-top-color: var(--ph-0); } .ph-1 { border-top-color: var(--ph-1); } .ph-2 { border-top-color: var(--ph-2); } .ph-3 { border-top-color: var(--ph-3); } .ph-4 { border-top-color: var(--ph-4); }
.ph-axis { position: relative; height: 20px; margin: 4px 0 0; color: var(--muted); font: 11px var(--sans); }
.ph-axis span { position: absolute; transform: translateX(-50%); }
.ph-axis span:first-child { transform: none; } .ph-axis span:last-child { transform: translateX(-100%); }

/* Charts (shared with the app's charts.js). */
.ch { margin: 22px 0; font-family: var(--sans); }
.ch-title { margin-bottom: 6px; color: var(--ink); font: 400 13px/1.5 var(--sans); }
.ch-title b { font-weight: 600; }
.ch-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0 8px; color: var(--muted); font-size: 12.5px; }
.ch-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ch-legend i { width: 14px; height: 4px; border-radius: 2px; }
.ch-box { position: relative; padding: 10px 6px 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.ch-box.is-scroll { overflow-x: auto; }
.ch-svg { display: block; font-family: var(--sans); }
.ch-grid { stroke: var(--line); stroke-width: 1; }
.ch-axis { stroke: var(--muted); stroke-opacity: .5; }
.ch-tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.ch-axis-label { fill: var(--muted); font-size: 11.5px; }
.ch-line { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ch-direct { fill: var(--ink); font-size: 12px; font-weight: 600; paint-order: stroke; stroke: var(--card); stroke-width: 4px; }
.ch-band { fill: var(--viz-char); fill-opacity: .08; }
.ch-band-label { fill: var(--muted); font-size: 11px; }
.ch-crossline { stroke: var(--muted); stroke-dasharray: 3 3; }
.ch-dot { stroke: var(--card); stroke-width: 2; }
.ch-hit, .ch-rowhit { fill: transparent; }
.ch-rowlabel { fill: var(--ink); font-size: 12.5px; }
.ch-range { stroke-width: 6; stroke-linecap: round; }
.ch-end { stroke: var(--card); stroke-width: 2; }
.ch-row.is-hot .ch-rowlabel { font-weight: 600; }
.ch-tip { position: absolute; z-index: 3; min-width: 150px; max-width: 260px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); box-shadow: 0 6px 18px rgba(0, 0, 0, .18); font-size: 12px; pointer-events: none; }
.ch-tip div { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.ch-tip i { width: 10px; height: 4px; border-radius: 2px; }
.ch-note { margin: 8px 0 0 !important; color: var(--muted); font: 12.5px/1.5 var(--sans); }
.ch-table { margin-top: 8px; font-size: 13px; }
.ch-table summary { color: var(--olive); cursor: pointer; }

.colophon { margin-top: 54px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); }
.colophon p { font: 13px/1.55 var(--sans); }
.colophon .cite { padding: 12px 14px; border-radius: 12px; background: var(--surface); color: var(--ink); }
.colophon .ack { margin-top: 26px; padding: 30px 0 34px; border-top: 1px solid var(--line); max-width: none; }
.colophon .ack p { color: var(--muted); font: italic 16px/1.65 var(--serif); }
.colophon .end { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 4px !important; color: var(--olive); font: italic 17px var(--serif); }

/* Narrower screens: the profile becomes a strip of horizons along the top. */
@media (max-width: 1080px) {
  .shell { grid-template-columns: 250px minmax(0, 1fr); }
  .paper { padding: 0 32px 80px; }
  .flow, .treatments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phases { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .phases li { flex: 0 0 42%; scroll-snap-align: start; }
}
@media (max-width: 820px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { z-index: 10; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { padding: 10px 16px; }
  .brand img { width: 30px; height: 30px; }
  .brand b { font-size: 20px; }
  .brand small { display: none; }
  .side-foot { margin-left: auto; padding: 8px 16px; }
  .profile { order: 3; flex: none; width: 100%; overflow: visible; }
  .profile > ol { flex-direction: row; min-height: 0; }
  .band { flex: 1 1 0; min-width: 0; min-height: 0; transition: none; }
  .band.is-active { flex: 3.4 1 0; }
  .band + .band::before, .band + .band::after { display: none; }
  .band-head { grid-template-columns: auto; justify-content: center; gap: 0; padding: 9px 4px; }
  .band-letter { font-size: 18px; }
  .band-label, .band-subs, .band.is-active .band-subs, .root { display: none; }
  .band.is-active .band-head { grid-template-columns: auto minmax(0, 1fr); gap: 8px; box-shadow: inset 0 -3px 0 var(--t); }
  .band.is-active .band-label { display: block; overflow: hidden; }
  .band.is-active .band-label small { display: none; }
  .band.is-active .band-label b { overflow: hidden; margin: 0; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
  html { scroll-padding-top: 110px; }
  .paper { padding: 0 16px 60px; font-size: 17px; }
  .cover { padding-top: 36px; }
  .lockup { gap: 20px; }
  .lockup .logo { font-size: 24px; }
  .lockup .logo-mark { width: 96px; }
  .lockup p { font-size: 16px; }
  .kicker { margin-top: 36px !important; }
  .cover h1 { font-size: 40px; }
  .subtitle { font-size: 19px; }
  .meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meta div:nth-child(3) { padding-left: 0; border-left: 0; }
  .meta div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .abstract { padding: 20px 18px 6px; }
  .chapter { padding-top: 36px; }
  .chapter h2 { font-size: 34px; }
  .chapter h3 { font-size: 23px; }
  .stratum { gap: 14px; min-height: 0; padding: 16px 18px; }
  .stratum-letter { width: 40px; font-size: 48px; }
  .stratum-note { font-size: 15px; }
  .pull { font-size: 22px; }
  .manifesto { padding: 22px; }
  .manifesto blockquote { font-size: 23px; }
  .maxim { font-size: 23px; }
  .two, .invite { grid-template-columns: minmax(0, 1fr); }
  .values div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .phases li { flex-basis: 78%; }
  .table.is-wide table { min-width: 600px; }
  .ph { flex-direction: column; }
  .ph-zone { flex: none !important; border-top: 0; border-left: 8px solid; }
  .ph-zone + .ph-zone { border-left-width: 8px; border-top: 2px solid var(--bg); }
  .ph-zone.ph-0 { border-left-color: var(--ph-0); } .ph-zone.ph-1 { border-left-color: var(--ph-1); } .ph-zone.ph-2 { border-left-color: var(--ph-2); } .ph-zone.ph-3 { border-left-color: var(--ph-3); } .ph-zone.ph-4 { border-left-color: var(--ph-4); }
  .ph-axis { display: none; }
  .declaration { padding: 24px 20px 16px; }
}
@media (max-width: 480px) {
  .flow, .treatments { grid-template-columns: minmax(0, 1fr); }
}

/* Print, or Save as PDF: an A4 paper with a title page, running heads and
   page numbers, always in the light palette, horizons in colour. */
.print-strata { display: none; }
@page {
  size: A4; margin: 20mm 18mm 22mm;
  @top-left { content: "Loamistry · Working paper No. 1"; font: 8pt Archivo, sans-serif; color: #6E5A48; }
  @top-right { content: "Regenerating Earth begins beneath our feet"; font: italic 8.5pt Newsreader, Georgia, serif; color: #6E5A48; }
  @bottom-center { content: counter(page); font: 8.5pt Archivo, sans-serif; color: #6E5A48; }
}
@page :first { margin: 18mm; @top-left { content: none; } @top-right { content: none; } @bottom-center { content: none; } }
@media print {
  /* Light tokens whatever theme was on screen (beats the dark selectors). */
  :root:not(#print) {
    --bg: #fff; --paper: #fff; --card: #FBF7EF; --surface: #FBF7EF; --side: #F3EADB; --ink: #2E1E12; --muted: #6E5A48; --line: rgba(91, 57, 30, .18);
    --olive: #875833; --olive-soft: rgba(135, 88, 51, .1); --loam: #5B391E; --ochre: #B88A5C; --accent-ink: #FCF9F0; --brand-word: #4D2F19;
    --viz-char: #6250d6; --viz-mulch: #eb6834; --viz-soil: #1baf7a; --viz-air: #2a78d6;
    --ph-0: #c44e3f; --ph-1: #e39a7f; --ph-2: #d9d4c8; --ph-3: #8db4e3; --ph-4: #2a6bb8;
    color-scheme: light;
  }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html, body { background: #fff !important; }
  body::before { display: none !important; }
  .shell { display: block; }
  .side, .descend, .skip, .ch-table, .ch-tip, .howto { display: none !important; }
  .paper { max-width: none; margin: 0; padding: 0; font-size: 10.5pt; line-height: 1.55; }
  .paper p { orphans: 3; widows: 3; }

  /* The title page. */
  .cover { padding: 0; }
  .cover::after { display: none; }
  .cover-sheet { display: flex; flex-direction: column; min-height: 258mm; }
  .cover .lockup { margin-top: 18mm; }
  .cover .kicker { margin-top: 30mm !important; }
  .cover h1 { font-size: 40pt; }
  .subtitle { font-size: 15pt; }
  .meta { margin-top: 16mm; }
  .print-strata { display: flex; flex-direction: column; margin: auto 0 0 !important; overflow: hidden; border-radius: 6px; }
  .print-strata i { display: block; height: 7mm; background: var(--tx), var(--c); }
  .print-strata i[data-h="b"] { height: 10mm; }
  .abstract { break-before: page; margin-top: 0; }

  /* Chapters open on a new page; everything else flows. */
  .chapter { padding-top: 0; }
  .chapter + .chapter { break-before: page; }
  .cover + .chapter { break-before: auto; margin-top: 12mm; } /* chapter 1 follows the abstract */
  .chapter h2 { margin: 8mm 0 5mm; font-size: 26pt; }
  .chapter h3 { margin: 9mm 0 3mm; font-size: 15pt; }
  .lede { font-size: 12.5pt; }
  .stratum { min-height: 0; padding: 5mm 6mm; break-inside: avoid; break-after: avoid; }
  .stratum-letter { width: 18mm; font-size: 40pt; }
  .stratum-note { font-size: 11pt; }
  h2, h3, .label { break-after: avoid; }
  .fig, .ch, .diagram, .manifesto, .declaration, .flow, .treatments, .facts, .levels li, .programs li, .invite article, .steps li, .phases, .colophon, .refs li, .values div { break-inside: avoid; }
  .table { overflow: visible; }
  .table table { font-size: 8.5pt; }
  .table tr { break-inside: avoid; }
  .table thead { display: table-header-group; }
  .ch-svg, .cy-svg { max-width: 100%; height: auto; }
  .phases { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .phases li { flex: none; }
  .pull { font-size: 17pt; }
  .manifesto blockquote { font-size: 18pt; }
  .maxim { font-size: 18pt; }
  .card, .abstract, .facts div, .steps li, .levels li, .invite article, .table, .ch-box, .diagram { box-shadow: none; }

  /* Links: plain ink; references and the contact show where they go. */
  a { color: inherit; text-decoration: none; }
  .refs a { text-decoration: underline; }
  .refs a[href^="http"]::after { content: " (" attr(href) ")"; color: var(--muted); font-size: 8pt; word-break: break-all; }
  .cta .button, .follow { display: none !important; }
  .print-only { display: block; font: 10.5pt/1.5 var(--sans); }
  .cta small { color: var(--ink); font-size: 10.5pt; }
  .colophon { margin-top: 10mm; }
  /* Print draws the acknowledgement's waves plainly: masks don't print reliably. */
  .ack::before, .ack::after { -webkit-mask: none; mask: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 12'%3E%3Cpath d='M0 6Q15 1 30 6T60 6T90 6T120 6T150 6T180 6T210 6T240 6' fill='none' stroke='%23B88A5C' stroke-width='1.4'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
}