/* ------------------------------------------------------------------
   Paper sections, and the photograph bands between them.

   These pages were built as one unbroken dark field. This gives them the
   cadence of the home page: deep green, a photograph, paper where the
   reading is hardest, green again to close.

   The trick that makes one shared sheet possible: rather than chase every
   element class, the paper scope REDECLARES the palette variables. The
   pages colour themselves through var(--txt-dsoft), var(--line-d) and the
   rest, including from inline style attributes, which no class selector
   could ever outrank. Redeclaring the variable reaches all of them at
   once, inline styles included, with no !important anywhere.
   ------------------------------------------------------------------ */

.sg-paper{
  background:#f4f6ee;
  color:#1b2418;
  /* the page's own palette, restated for a pale ground */
  --ink:#f4f6ee; --ink2:#eef1e5; --ink3:#e7ebdc;
  --txt-d:#1b2418;          /* was bone on dark */
  --txt-dsoft:#55614e;      /* was the muted grey */
  --graphite:#6c7a64;
  --bone:#16210f;
  --line-d:rgba(27,36,24,.14);
  --brass:#5c8130; --brass-soft:#4d6b2c; --brass-deep:#3c5622;
  --teal:#2f6f5e; --green:#3f7a34;
  --paper:#f4f6ee; --paper2:#fbfcf6;
  --txt-l:#1b2418; --txt-lsoft:#55614e; --line-l:rgba(27,36,24,.14);
}

/* Not every colour on these pages comes through a variable. A card title
   like .ct is written as a literal #ede7d9, which no redeclaration can
   reach, so it stayed bone on paper. These are the classes the audit found
   inside the flipped sections; handing them colour:inherit makes them take
   the paper foreground and keeps one source of truth for it. */
.sg-paper .b,.sg-paper .bl,.sg-paper .bm-arrow,.sg-paper .bm-d,.sg-paper .bm-flow,
.sg-paper .bm-n,.sg-paper .bm-step,.sg-paper .bm-t,.sg-paper .break,.sg-paper .bv,
.sg-paper .cd,.sg-paper .cond,.sg-paper .conv,.sg-paper .ct,.sg-paper .hl,
.sg-paper .im-grid,.sg-paper .inote,.sg-paper .istack,.sg-paper .loop,.sg-paper .md,
.sg-paper .mech,.sg-paper .mn,.sg-paper .mt,.sg-paper .name,.sg-paper .nr-b,
.sg-paper .nr-h,.sg-paper .nr-item,.sg-paper .nr-list,.sg-paper .nr-main,
.sg-paper .nr-meta,.sg-paper .nr-more,.sg-paper .nr-yr,.sg-paper .num,
.sg-paper .op-grid,.sg-paper .ppe-grid,.sg-paper .pull,.sg-paper .pull-cite,
.sg-paper .sd,.sg-paper .sg-quote,.sg-paper .sg-quote-cite,.sg-paper .sn,
.sg-paper .st,.sg-paper .step,.sg-paper .steps,.sg-paper .vant,.sg-paper .vc,
.sg-paper .vc-node,.sg-paper .vcard,.sg-paper .vcta,.sg-paper .vd,.sg-paper .vt,
.sg-paper .wd,.sg-paper .why-2,.sg-paper .why-list,.sg-paper .wt,
.sg-paper .ln,.sg-paper .lt,.sg-paper .ld{color:inherit}
/* the quieter of them read as secondary, not as body */
.sg-paper .cd,.sg-paper .md,.sg-paper .sd,.sg-paper .vd,.sg-paper .wd,
.sg-paper .nr-meta,.sg-paper .nr-yr,.sg-paper .pull-cite,
.sg-paper .sg-quote-cite,.sg-paper .inote{color:#55614e}
/* numerals and step markers keep the accent, in its paper weight */
.sg-paper .num,.sg-paper .mn,.sg-paper .nr-yr,.sg-paper .bm-n,
.sg-paper .vc-node,.sg-paper .ln{color:#5c8130}
.sg-paper .nr-link,.sg-paper .op-link,.sg-paper .vcta{color:#4d6b2c}

/* headings and body, which mostly take literal colours rather than vars */
.sg-paper h1,.sg-paper h2,.sg-paper h3,.sg-paper h4,
.sg-paper .sg-h1,.sg-paper .sg-h2,.sg-paper .sg-h3{color:#16210f}
.sg-paper .sg-body,.sg-paper .sg-lead,.sg-paper p{color:#4a5544}
.sg-paper b,.sg-paper strong{color:#16210f}
.sg-paper a{color:#4d6b2c}
.sg-paper hr{border-color:rgba(27,36,24,.14)}

/* the section capsule. On the gold and cacao pages this is already a paper
   section and the capsule is a pale lime hairline on warm paper, which is
   to say invisible. */
.sg-paper .sg-kicker{color:#4d6b2c;
  border-color:rgba(31,44,24,.22);background:rgba(31,44,24,.05)}
.sg-paper .sg-kicker::before{background:#5c8130}

/* cards, panels and chips, which are drawn with literal rgba the variables
   cannot reach */
.sg-paper .cell,.sg-paper .icard,.sg-paper .card,.sg-paper .frame,
.sg-paper .mcard,.sg-paper .rcard,.sg-paper .vcard,.sg-paper .ncard,
.sg-paper .pcard,.sg-paper .ecard{
  background:#fff;border-color:rgba(27,36,24,.12)}
.sg-paper .fchip,.sg-paper .chip,.sg-paper .tag,.sg-paper .pill{
  color:#3c4838;border-color:rgba(27,36,24,.17);background:rgba(27,36,24,.028)}
.sg-paper .fchip.brass,.sg-paper .chip.brass{
  background:#e9f5c2;border-color:#c3d98b;color:#2c3d18;font-weight:500}

/* accent washes: a tinted band over a dark ground has no meaning on paper */
.sg-paper .iband,.sg-paper .band,.sg-paper .wash{
  background:#fff;border-color:rgba(27,36,24,.14)}
.sg-paper .iband.top{background:#f3f8e2;border-color:#c9dc9a}
.sg-paper .iband.mid{background:#e8f2ee;border-color:#a9cdc0}

/* a connector drawn as a glyph takes a colour and never a background */
.sg-paper .iconn,.sg-paper .fedge::before,.sg-paper .conn,.sg-paper .ar{
  background:none;color:#5c8130}

/* rules and dividers that were hairlines of bone on dark */
.sg-paper .row,.sg-paper .fstage,.sg-paper .line,.sg-paper .divider{
  border-color:rgba(27,36,24,.14)}

/* an svg drawn in light strokes cannot be saved by a colour swap, so any
   section holding one was kept dark. This is only for incidental marks. */
.sg-paper svg [stroke="#ede7d9"],.sg-paper svg [stroke="#EDE7D9"]{stroke:#3c4838}

/* ---------- the photograph bands ----------
   Defined here rather than in sg-stack.css, which only The Stack loads. */
.sg-plate{position:relative;height:clamp(280px,42vh,440px);overflow:hidden;
  background:#0b120b}
.sg-plate img{width:100%;height:100%;object-fit:cover;display:block}
.sg-plate::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,16,9,.5) 0%,rgba(9,16,9,.2) 40%,rgba(9,16,9,.72) 100%)}
.sg-plate-say{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:0 6% 40px;max-width:1160px;margin:0 auto}
.sg-plate-say p{margin:0;max-width:30ch;color:#fff;font-weight:300;
  font-size:clamp(20px,2.5vw,30px);line-height:1.28;letter-spacing:-.015em;
  text-shadow:0 2px 26px rgba(0,0,0,.72),0 1px 3px rgba(0,0,0,.5)}
.sg-plate-say em{font-style:normal;color:#f2ffbd}

@media(max-width:700px){
  .sg-plate{height:clamp(240px,34vh,320px)}
  .sg-plate-say p{font-size:20px}
  .sg-plate-say{padding-bottom:28px}
}