/* Bright Green Paper (/brightgreens/paper): one long document in the site's
   type and colour roles. A cover in the compact page hero, a sticky contents
   rail on wide screens, and the paper's own sections, tables and figures.
   Layout only; tokens and type roles come from design-system.css, which sits
   in the higher layer, so .prose paragraph and heading type is left to it. */
@layer layout {

/* ---------- hero: the site's photo page hero (cattle grazing in sunlight), with the paper's version line and PDF ---------- */
.paper-hero .paper-meta{margin:clamp(14px,1.6vw,22px) 0 0;color:rgba(253,252,249,.82);font-size:var(--type-note);line-height:1.55}
.paper-hero .paper-meta time{white-space:nowrap}
.paper-hero .ph-cta{margin-top:clamp(18px,2.4vh,26px)}

/* ---------- reading layout: a single column, with a contents rail beside it on wide screens ---------- */
.paper-body{--paper-w:840px;padding:clamp(48px,7vh,88px) var(--content-inset) clamp(88px,12vh,150px)}
.paper-layout{max-width:var(--w-content);margin:0 auto}
.paper.prose{max-width:var(--paper-w);margin:0 auto;min-width:0}
.paper-rail{display:none}
@media(min-width:1200px){
  /* the rail starts on the hero copy's left edge (same inset as .page-hero .ph-copy) */
  .paper-body{padding-left:calc(var(--gutter) * 2 + clamp(20px,3vw,52px));padding-right:calc(var(--gutter) * 2 + clamp(20px,3vw,52px))}
  .paper-layout{display:grid;grid-template-columns:220px minmax(0,var(--paper-w));column-gap:clamp(56px,5vw,88px);justify-content:start;align-items:start}
  .paper.prose{margin:0}
  .paper-rail{display:block;position:sticky;top:calc(var(--nav-h) + 32px);max-height:calc(100vh - var(--nav-h) - 64px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
  .paper-toc-nav{display:none}
}

/* contents rail: the reader's place is marked by paper.js (aria-current) */
.paper-rail-title{margin:0 0 12px;font-family:var(--font-display);font-weight:500;font-variation-settings:"opsz" 36;font-size:1.12rem;color:var(--forest)}
.paper-rail ol,.paper-toc ol{list-style:none;margin:0;padding:0}
.paper-rail ol{border-left:1px solid var(--hair)}
.paper-rail a,.paper-toc a{display:grid;grid-template-columns:1.7em minmax(0,1fr);column-gap:4px;color:var(--stone);text-decoration:none;line-height:1.38}
.paper-rail a{margin-left:-1px;padding:6px 0 6px 14px;border-left:2px solid transparent;font-size:.875rem;transition:color .2s var(--ease-soft),border-color .2s var(--ease-soft)}
.paper-rail a:hover{color:var(--forest)}
.paper-rail a[aria-current="true"]{color:var(--forest);border-left-color:var(--forest);font-weight:600}
.paper-rail .n,.paper-toc .n{color:var(--gold-ink);font-variant-numeric:lining-nums tabular-nums}
.paper-rail .paper-rail-part{margin-top:10px;padding-top:10px;border-top:1px solid var(--hair)}
.paper-rail .paper-rail-part a,.paper-toc .paper-rail-part a{color:var(--gold-ink);font-weight:600}

/* contents on narrower screens: one disclosure ahead of the summary */
.paper-toc-nav{margin:0 0 clamp(36px,5vw,52px)}
.paper-toc{background:var(--white);border-radius:var(--r-md);box-shadow:var(--card-shadow)}
.paper-toc summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:0 20px;cursor:pointer;list-style:none;font-weight:600;color:var(--forest)}
.paper-toc summary::-webkit-details-marker{display:none}
.paper-toc summary::after{content:"+";font-family:var(--font-display);font-weight:300;font-size:1.6rem;line-height:1;color:var(--gold-ink)}
.paper-toc[open] summary::after{content:"\2212"}
.paper-toc ol{padding:0 20px 14px}
.paper-toc a{padding:10px 0;border-top:1px solid var(--hair);font-size:.95rem}
.paper-toc summary:focus-visible{outline:3px solid var(--gold-ink);outline-offset:4px;border-radius:var(--r-md)}

/* ---------- sections: one steady rhythm, no page-break gaps ---------- */
.paper > section + section{margin-top:clamp(56px,6.5vw,88px)}
.paper > .paper-part{margin-top:clamp(64px,7.5vw,104px)}
.paper > .paper-part + section{margin-top:clamp(48px,6vw,76px)}
.paper > .paper-sources,.paper > .paper-contact{margin-top:clamp(40px,5vw,60px)}
.paper [id]{scroll-margin-top:calc(var(--nav-h) + 28px)}
.paper h2{margin-bottom:.55em}
.paper h3{margin-top:1.7em}
.paper h2 + h3{margin-top:.4em}

/* The section numbers are referenced in the text ("see section 13"), so they
   stay visible: inline on narrow screens, hung in the margin on wide ones. */
.sec-no{display:inline-block;margin-right:.08em;color:var(--gold-ink);font-style:italic;font-weight:300;font-variant-numeric:lining-nums tabular-nums}
@media(min-width:1200px){
  .paper-section > h2{position:relative}
  .sec-no{position:absolute;right:100%;top:0;min-width:0;margin-right:clamp(14px,1.4vw,22px);font-size:.74em;line-height:1.69;text-align:right}
}

/* ---------- callouts ---------- */
.paper-callout{margin:1.5em 0 1.8em;padding:clamp(20px,2.6vw,28px) clamp(22px,2.8vw,32px);border-radius:var(--r-md);background:var(--mist);box-shadow:inset 0 0 0 1px var(--hair)}
.paper-callout h3{margin-top:0}
.paper-callout > :last-child{margin-bottom:0}
.paper-callout--lead p{font-style:italic}
.paper-callout--gold{background:rgba(217,174,102,.09);box-shadow:inset 0 0 0 1px rgba(138,103,44,.30)}

/* ---------- summary card ---------- */
.paper-card{position:relative;padding:clamp(28px,3.4vw,44px) var(--card-padding) var(--card-padding);background:var(--white);border-radius:var(--r-lg);box-shadow:var(--card-shadow)}
.paper-card::before{content:"";position:absolute;top:0;left:var(--card-padding);right:var(--card-padding);height:2px;border-radius:0 0 2px 2px;background:var(--gold)}
.paper-summary h2{margin-bottom:.35em}
.paper-facts{margin:0}
.paper-facts > div{display:grid;grid-template-columns:minmax(118px,10.5rem) minmax(0,1fr);gap:4px 26px;padding:15px 0;border-top:1px solid var(--hair)}
.paper-facts > div:first-child{border-top:0}
.paper-facts dt{color:var(--ink);font-weight:600;line-height:1.5}
.paper-facts dd{margin:0;color:var(--stone);line-height:1.7;overflow-wrap:anywhere}
.paper-summary .paper-facts dt{font-family:var(--font-display);font-weight:500;font-variation-settings:"opsz" 36;font-size:1.12rem;line-height:1.45;color:var(--forest)}
.paper-summary .paper-summary-note{margin:18px 0 0}
.paper-facts--card{margin:1.1em 0 1.6em;padding:4px var(--card-padding);background:var(--white);border-radius:var(--r-md);box-shadow:var(--card-shadow)}
.paper-facts .paper-number{font-variant-numeric:lining-nums tabular-nums}
.paper-address{word-break:break-all}
.paper-plain{list-style:none;margin:0;padding:0}
.paper-plain li{margin:0}
@media(max-width:600px){
  .paper-facts > div{grid-template-columns:1fr;gap:2px}
}

/* ---------- Sarah's letter ---------- */
.paper-letter{display:grid;grid-template-columns:clamp(128px,15vw,176px) minmax(0,1fr);gap:clamp(22px,3vw,40px);align-items:start;margin-top:.6em;padding:var(--card-padding);background:var(--white);border-radius:var(--r-lg);box-shadow:var(--card-shadow)}
.paper-letter-portrait{margin:0}
.paper-letter-portrait img{display:block;width:100%;height:auto;border-radius:var(--r-sm)}
.paper-letter .paper-letter-close{margin:1.5em 0 .1em}
.paper-letter .paper-letter-sign{margin:0}
.paper-letter-sign img{display:block;width:172px;height:auto;margin:2px 0 6px}
.paper-letter-sign strong{color:var(--forest)}
@media(max-width:640px){
  .paper-letter{grid-template-columns:1fr}
  .paper-letter-portrait{width:min(150px,46%)}
}

/* ---------- figures and quotes ---------- */
.paper-figure{margin:1.8em 0}
.paper-figure img{display:block;width:100%;height:auto;border-radius:var(--r-md)}
.paper-figure figcaption,.paper-share figcaption{margin-top:10px;color:var(--stone);font-size:var(--type-note);line-height:1.55}
/* captions and quote credits are italic in the paper itself */
.paper-figure figcaption,.paper-share figcaption,.paper-trend figcaption,.paper-flow figcaption,.paper-quote figcaption{font-style:italic}

/* a square photograph beside the opening of a section; full width on narrow screens */
.paper-figure--aside img{aspect-ratio:1;object-fit:cover}
@media(min-width:721px){
  .paper-figure--aside{float:right;width:clamp(220px,38%,320px);margin:.35em 0 1.1em clamp(24px,3vw,36px)}
}
@media(max-width:720px){
  .paper-figure--aside{max-width:420px}
}
.paper-section > h3,.paper-trend,.paper-flow{clear:both}

/* two portrait photographs side by side, at every width */
.paper-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vw,20px);margin:1.8em 0}
.paper-photos .paper-figure{margin:0}
.paper-photos img{aspect-ratio:3/4;object-fit:cover}

/* Living Value: a snapshot (one gold point, today) beside a direction (the same gold
   point at the end of a line that dips and keeps rising). Illustrative, not data. */
.paper-trend{margin:1.9em 0;padding:clamp(22px,3vw,34px) clamp(20px,3vw,34px) clamp(18px,2.4vw,26px);background:var(--white);border-radius:var(--r-lg);box-shadow:var(--card-shadow)}
.trend-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.trend-panel{padding-right:clamp(16px,2.6vw,30px)}
.trend-panel--direction{padding:0 0 0 clamp(16px,2.6vw,30px);border-left:1px solid var(--hair)}
.trend-name{font-family:var(--font-display);font-style:italic;font-weight:400;font-variation-settings:"opsz" 36;font-size:clamp(1.25rem,2vw,1.5rem);line-height:1.2;color:var(--stone)}
.trend-panel--direction .trend-name{color:var(--forest)}
.trend-chart{display:block;width:100%;height:auto;margin:14px 0 12px;overflow:visible}
.trend-ground{stroke:rgba(60,90,72,.24);stroke-width:1}
.trend-stem{stroke:rgba(126,92,38,.45);stroke-width:1;stroke-dasharray:3 4}
.trend-line{fill:none;stroke:var(--forest);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.trend-dot{fill:var(--white);stroke:var(--forest);stroke-width:2}
.trend-dot--now{fill:var(--gold);stroke:var(--white);stroke-width:2.5}
.trend-note{color:var(--stone);font-size:.95rem;line-height:1.55}
.paper-trend figcaption{margin-top:18px;padding-top:14px;border-top:1px solid var(--hair);color:var(--forest);font-family:var(--font-display);font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.45}
@media(max-width:560px){
  .trend-panels{grid-template-columns:1fr}
  .trend-panel{padding:0 0 18px}
  .trend-panel--direction{padding:18px 0 0;border-left:0;border-top:1px solid var(--hair)}
}

/* Living Value is recognised in Living Assets: Bright Greens are the first form, in forest;
   forms not yet developed are drawn in outline */
.paper-flow{display:grid;grid-template-columns:minmax(0,.75fr) auto minmax(0,1.25fr);align-items:center;gap:clamp(14px,2.4vw,30px);margin:1.9em 0;padding:clamp(22px,3vw,34px);border-radius:var(--r-lg);background:var(--mist);box-shadow:inset 0 0 0 1px var(--hair)}
.flow-term{font-family:var(--font-display);font-weight:400;font-variation-settings:"opsz" 36;font-size:clamp(1.3rem,2.1vw,1.6rem);line-height:1.2;color:var(--forest)}
.flow-note{margin-top:6px;color:var(--stone);font-size:.92rem;font-style:italic;line-height:1.5}
.flow-arrow{position:relative;width:clamp(28px,4vw,48px);height:1px;background:var(--gold)}
.flow-arrow::after{content:"";position:absolute;right:-1px;top:-4px;border-style:solid;border-width:4.5px 0 4.5px 7px;border-color:transparent transparent transparent var(--gold)}
.paper-flow .flow-forms{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:0;list-style:none}
.flow-form{margin:0;padding:6px 13px;border-radius:var(--r-pill);background:var(--white);box-shadow:inset 0 0 0 1px var(--hair);color:var(--ink);font-size:.88rem;line-height:1.4}
.flow-form--first{background:var(--forest);box-shadow:none;color:var(--white);font-weight:600}
.flow-form--first span{margin-left:4px;font-weight:400;font-style:italic;opacity:.82}
.flow-form--future{background:none;box-shadow:none;border:1px dashed rgba(60,90,72,.4);color:var(--stone)}
.paper-flow figcaption{grid-column:1 / -1;margin-top:4px;padding-top:14px;border-top:1px solid var(--hair);color:var(--stone);font-size:var(--type-note);line-height:1.55}
@media(max-width:600px){
  .paper-flow{grid-template-columns:1fr;gap:14px}
  .flow-arrow{width:1px;height:26px;margin-left:2px}
  .flow-arrow::after{right:auto;top:auto;left:-4px;bottom:-1px;border-width:7px 4.5px 0 4.5px;border-color:var(--gold) transparent transparent transparent}
}
.paper-quote{margin:1.8em 0}
.paper-quote blockquote{margin:0}
.paper-quote .pull{margin:0;font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.45}
.paper-quote figcaption{margin-top:12px;padding-left:24px;color:var(--stone);font-size:var(--type-note);line-height:1.5}

/* Where your money goes: the Bright Greens split, on the same deep panel */
.paper-share{margin:.9em 0 1.9em;padding:clamp(28px,4vw,46px) clamp(24px,4vw,46px) clamp(22px,3vw,32px);border-radius:var(--r-lg);background:var(--deep)}
.paper-share .share-viz{max-width:none;padding:0}
.paper-share .share-figure{font-size:clamp(3.4rem,8vw,6.4rem)}
.paper-share .share-figure.share-minor{font-size:clamp(2.1rem,4.2vw,3.4rem)}
.paper-share figcaption{margin-top:20px;color:rgba(250,247,240,.72)}

/* ---------- lists ---------- */
.paper ul li::marker{color:var(--gold)}
/* long addresses in the text (How to buy, step 1) wrap on narrow screens */
.paper a{overflow-wrap:anywhere}
.paper-steps{list-style:none;margin:.6em 0 1.6em;padding:0;counter-reset:step}
.paper-steps li{position:relative;margin:0 0 .8em;padding-left:2.4em;color:var(--stone);line-height:1.7}
.paper-steps li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:-.12em;width:1.6em;font-family:var(--font-display);font-style:italic;font-weight:300;font-size:1.3em;color:var(--gold-ink);font-variant-numeric:lining-nums}

/* ---------- Moora Plains at a glance ---------- */
.paper-glance{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:1em 0 1.8em;background:var(--white);border-radius:var(--r-md);box-shadow:var(--card-shadow);overflow:hidden}
.paper-glance > div{padding:18px 24px 19px;border-top:1px solid var(--hair)}
.paper-glance > div:nth-child(-n+2){border-top:0}
.paper-glance > div:nth-child(even){border-left:1px solid var(--hair)}
.paper-glance dt{margin-bottom:4px;color:var(--stone);font-size:var(--type-note);font-weight:600;line-height:1.4}
.paper-glance dd{margin:0;font-family:var(--font-display);font-weight:400;font-variation-settings:"opsz" 24;font-size:1.1rem;line-height:1.45;color:var(--ink)}
@media(max-width:600px){
  .paper-glance{grid-template-columns:1fr}
  .paper-glance > div:nth-child(2){border-top:1px solid var(--hair)}
  .paper-glance > div:nth-child(even){border-left:0}
}

/* ---------- tables ---------- */
.paper-table-wrap{margin:1em 0 1.8em;overflow-x:auto;background:var(--white);border-radius:var(--r-md);box-shadow:var(--card-shadow)}
.paper-table-wrap--narrow{max-width:460px}
.paper-table{width:100%;border-collapse:collapse;font-size:.95rem;line-height:1.55;color:var(--stone);font-variant-numeric:lining-nums tabular-nums}
.paper-table th,.paper-table td{padding:14px 18px;text-align:left;vertical-align:top}
.paper-table thead th,.paper-table thead td{padding-top:12px;padding-bottom:12px;background:var(--mist);color:var(--ink);font-size:.82rem;font-weight:600;line-height:1.4}
.paper-table tbody tr + tr > *{border-top:1px solid var(--hair)}
.paper-table tbody th{color:var(--ink);font-weight:600}
.paper-table .num{text-align:right;white-space:nowrap}
.paper-table .score{font-family:var(--font-display);font-weight:400;font-size:1.12rem;line-height:1.35;color:var(--forest)}
.paper-table .story-no{width:1%;color:var(--gold-ink);font-family:var(--font-display);font-style:italic;font-size:1.08rem;line-height:1.4}
.paper-table .sig-no{color:var(--gold-ink);font-size:.82rem;font-weight:600;letter-spacing:.02em}
.paper-table--ledger tbody th{font-weight:500;color:var(--stone)}
.paper-table--ledger .is-total > *{color:var(--ink);font-weight:600}
.paper-table--scorecard tbody th,.paper-table--details tbody th{width:38%}
@media(max-width:640px){
  .paper-table th,.paper-table td{padding:12px 12px}
  .paper-table{font-size:.92rem}

  /* The wider tables become one short block per row on a phone. The ARIA
     roles in the markup keep them announced as tables. */
  .paper-table--rows thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .paper-table--rows,.paper-table--rows tbody{display:block}
  .paper-table--rows tr{display:grid;column-gap:12px;row-gap:4px;padding:14px 16px}
  .paper-table--rows tbody tr + tr{border-top:1px solid var(--hair)}
  .paper-table--rows tbody tr > *,.paper-table--rows tbody tr + tr > *{display:block;padding:0;border-top:0;width:auto}
  .paper-table--rows .story-no{width:auto}
  .paper-table--stories tr{grid-template-columns:1.3em minmax(0,1fr) auto;align-items:baseline}
  .paper-table--stories .signals{grid-column:2 / -1;font-size:.88rem}
  .paper-table--studies tr{grid-template-columns:auto minmax(0,1fr);column-gap:28px}
  .paper-table--studies tbody th{grid-column:1 / -1;margin-bottom:6px}
  .paper-table--studies td::before{content:attr(data-label);display:block;color:var(--stone);font-size:.75rem;font-weight:600;line-height:1.4}
  .paper-table--scorecard tr{grid-template-columns:minmax(0,1fr) auto;align-items:end}
  .paper-table--details tbody th{width:44%}
  .paper-table--scorecard tbody td:last-child{grid-column:1 / -1}
}

/* ---------- part two, appendix, close ---------- */
.paper-part{padding:clamp(28px,4vw,48px);border-radius:var(--r-lg);background:var(--mist-deep)}
.paper-part .eyebrow{display:block}
.paper-part p:last-child{margin-bottom:0}
.paper .paper-source{margin-bottom:.4em}
.paper-people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px clamp(24px,3vw,44px);margin:1em 0 1.8em}
.paper-person h4{margin:0 0 8px;font-family:var(--font-display);font-weight:500;font-variation-settings:"opsz" 36;font-size:1.15rem;line-height:1.3;color:var(--forest)}
.paper-person-role{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:1rem;color:var(--gold-ink)}
.paper-person p{margin:0}
@media(max-width:700px){
  .paper-people{grid-template-columns:1fr}
}
.paper-end{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(56px,7vw,88px);padding-top:clamp(28px,3vw,36px);border-top:1px solid var(--hair)}
.paper-end .btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px}

.paper-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- print: the paper on its own. The shareable PDF is printed from this. ----------
   Page one is the cover (photograph, title, version date); the contents follow on page two. */
@media print{
  @page{size:A4;margin:16mm 15mm 18mm}
  html{font-size:14px}
  .paper-page,.paper-page *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .paper-page a[href]::after{content:none!important}
  /* no ligatures, so text copied or read aloud from the PDF comes out as the right letters */
  .paper-page,.paper-page *{font-variant-ligatures:none!important}
  .paper-page .reveal{opacity:1!important;transform:none!important;filter:none!important}

  .paper-hero{min-height:0!important;padding:0!important;background:none!important;break-after:page}
  .paper-hero .ph-media{display:block!important;position:static;margin:0 0 9mm}
  .paper-hero .ph-media::before,.paper-hero .ph-media::after{display:none!important}
  .paper-hero .ph-media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px}
  .paper-hero .ph-copy{position:static;padding:0!important;max-width:none}
  .paper-hero .eyebrow{color:#7E5C26!important}
  .paper-hero h1{color:#3C5A48!important;font-size:4.4rem!important;line-height:1.05!important}
  .paper-hero .ph-sub{margin-top:6mm!important;font-size:1.25rem!important}
  .paper-hero .ph-sub,.paper-hero .paper-meta{color:#26332B!important}
  .paper-hero .ph-cta{display:none!important}
  .paper-page + footer{display:none!important}

  .paper-toc-nav,.paper-end{display:none!important}
  .paper-layout{display:block}
  .paper-body{padding:0;background:#fff!important}
  .paper-rail{display:block!important;position:static;max-height:none;overflow:visible;break-after:page}
  .paper-rail ol{border-left:0}
  .paper-rail a{padding:5px 0;border-left:0;font-size:1rem;font-weight:400!important;color:#26332B!important}
  .paper-rail-title{font-size:1.6rem;margin-bottom:14px}

  .paper-card,.paper-letter,.paper-glance,.paper-table-wrap,.paper-facts--card,.paper-trend{box-shadow:none;border:1px solid #ccc}
  .paper-share{background:none;border:1px solid #ccc}
  .paper-share .share-figure,.paper-share .share-label,.paper-share figcaption{color:#000!important}
  .paper h2,.paper h3{break-after:avoid}
  .paper-letter,.paper-figure,.paper-photos,.paper-quote,.paper-share,.paper-trend,.paper-flow,.paper-table tr,.paper-person{break-inside:avoid}
}
}