/* ------------------------------------------------------------------
   The Stack, given the rhythm of the home page.

   The page was one unbroken dark field from the hero to the footer. It
   now breathes the way saphi.xyz does: deep green, then paper, then a
   photograph, then green again. Body text is larger and lighter against
   its background than it was, because the complaint was that reading it
   was work.
   ------------------------------------------------------------------ */

/* ---------- 1. legibility, everywhere ---------- */

/* 15px at 1.6 over a dark field is small and tight. This is the reading
   size the home page uses, with the leading that goes with it. */
.sg-body{font-size:17px;line-height:1.72;color:#c3cdb9;max-width:68ch}
.sg-lead{line-height:1.5;color:#dee6d6}
.lay .ld{font-size:15.8px;line-height:1.72;color:#bcc7b3}
.lay .ld b{color:#f0f5e8}
.lay .lt{font-size:clamp(22px,2.2vw,27px);color:#f2f7ea;margin:13px 0 13px}
.fstage .fname{font-size:17.5px;color:#f0f5e8}
.fstage .fsub{font-size:12.5px;margin-top:5px;color:#93a08b}
.fchip{font-size:13.5px;padding:9px 14px;color:#cbd6c2;
  border-color:rgba(238,243,230,.17);background:rgba(238,243,230,.035)}
.frame .fl{font-size:14px;line-height:1.6;color:#bcc7b3}
.chain,.floop,.fcaption{line-height:1.72}
.fcaption{color:#93a08b;font-size:14.5px}
.sg-hero .sg-lead{color:#e6ecdf}

/* the reference note was 13.5px grey on near black, which is the hardest
   thing on the page to read */
#refs{font-size:14px;line-height:1.75;color:#93a08b}
#refs b{color:#c2cdb8}

/* ---------- 2. the paper sections ---------- */
/* The diagram and the worked example sit on paper. Dark type on a light
   ground is the easiest reading on the page, and it is where the page
   asks the most of the reader. */
.sg-flow,.sg-bio{background:#f4f6ee;color:#1b2418}
.sg-flow .sg-h2,.sg-bio .sg-h2{color:#16210f}
.sg-flow .sg-body,.sg-bio .sg-body{color:#4a5544}
.sg-flow .sg-kicker,.sg-bio .sg-kicker{color:#4d6b2c;
  border-color:rgba(31,44,24,.2);background:rgba(31,44,24,.045)}
.sg-flow .sg-kicker::before,.sg-bio .sg-kicker::before{background:#5c8130}
.sg-flow .fstage{border-top-color:rgba(27,36,24,.14)}
.sg-flow .flow .fstage:last-child{border-bottom-color:rgba(27,36,24,.14)}
.sg-flow .fstage .fid{color:#5c8130}
.sg-flow .fstage .fname{color:#16210f}
.sg-flow .fstage .fsub{color:#6c7a64}
.sg-flow .fchip{color:#3c4838;border-color:rgba(27,36,24,.17);
  background:rgba(27,36,24,.028)}
.sg-flow .fchip[data-sgd]:hover{border-color:rgba(92,129,48,.5);
  background:rgba(92,129,48,.09);color:#1b2418}
.sg-flow .fchip[data-sgd][aria-expanded="true"]{border-color:#5c8130;
  background:rgba(92,129,48,.13);color:#16210f}
/* the issued instruments stay the accent, now readable on paper */
.sg-flow .fchip.brass{background:#e9f5c2;border-color:#c3d98b;color:#2c3d18;
  font-weight:500}
.sg-flow .fchip.brass:hover{background:#e0f0ac;border-color:#a9c96a}
.sg-flow .fedge{color:#6c7a64}
/* the marker between stages is a down arrow glyph, so it takes a colour and
   never a background. A background paints a box around the character. */
.sg-flow .fedge::before{background:none;color:#5c8130}
.sg-flow .floop{color:#3c4838}
.sg-flow .floop .ar{color:#5c8130}
.sg-flow .fcaption{color:#6c7a64}
.sg-bio .frame{background:#fff;border-color:rgba(27,36,24,.12)}
.sg-bio .frame .fn{color:#5c8130}
.sg-bio .frame .fl{color:#4a5544}
.sg-bio .chain{color:#3c4838}
.sg-bio .chain b{color:#16210f}
.sg-bio .sg-body a{color:#5c8130}

/* ---------- 3. photographs between the arguments ---------- */
.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}

/* ---------- 4. the diagram reads as a journey on paper ---------- */
.sg-flow .flow{border-radius:16px}
.sg-flow .fstage{padding:30px 0}
/* a tap target on a phone is a row, not a chip lost in a wrap */
@media(max-width:700px){
  .sg-flow .fstage{grid-template-columns:1fr;gap:14px}
  .fchip{font-size:14px;padding:11px 15px}
  .sg-plate{height:clamp(240px,34vh,320px)}
  .sg-plate-say p{font-size:20px}
}

/* ---------- 5. the hint that the pills are alive ---------- */
.sg-tapnote{display:inline-flex;align-items:center;gap:9px;margin:22px 0 0;
  font-size:12.5px;letter-spacing:.02em;color:#6c7a64}
.sg-tapnote svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.85}