/* Hypha · JV partner · document: the heads of terms, in the generic look of a legal draft: a serif page, "Subject to
   contract" boxed at the top, numbered terms, a column for what is agreed and one for each side's initials. A row is
   blank (flat grey) until someone has actually agreed it; then it says Agreed, takes light on that line (J.lit on
   .tm-ok) and both sides' initials in ink (J.ink on each .ini). --a on the row (0..1) swaps the grey for the word.
   Also here: the signed national supply agreement (page 02), the one thing on that page anybody actually agreed.

   <article class="doc terms">
     <div class="tm-heads" aria-hidden="true"><i class="tm-lh lh1"></i>…</div>         (letterheads that join: page 03)
     <div class="tm-meta"><span class="tm-draft">Draft</span><span class="tm-stc">Subject to contract</span></div>
     <h3 class="tm-h">Heads of terms</h3>
     <ol class="tm-rows">
       <li class="tm-colh" aria-hidden="true"><span></span><span>Term</span><span>Agreed</span><span>Initials</span></li>
       <li class="tm-row"><span class="tm-n">1</span><p class="tm-q">The question, word for word</p>
         <span class="tm-a"><i class="fld"></i><em class="tm-ok lit">Agreed</em></span>
         <span class="tm-ini"><i class="ini" data-ink="a"></i><i class="ini" data-ink="b"></i></span></li>
     </ol>
   </article>
   <article class="doc terms terms--sa"> … <p class="tm-cl"><b>Scope</b> <span class="lit">…</span></p> … <div class="tm-sigs">…</div> */

.terms {
  --w: 600px;
  width: var(--w);
  padding: 26px 30px 26px;
  font-family: Georgia, "Times New Roman", serif;
  color: #141414;
  border-radius: 3px;
}
.tm-heads { display: flex; gap: 8px; margin: -26px -30px 18px; }
.tm-lh { flex: 1; height: 10px; opacity: var(--o, 1); transform: scaleY(var(--o, 1)); transform-origin: 50% 0; }
.tm-lh.lh1 { background: #20406a; }
.tm-lh.lh2 { background: #8a3b12; }
.tm-lh.lh3 { background: #4a4f57; } /* graphite: green on these pages is only ever light */
.tm-meta { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.tm-draft { font-family: var(--f-sheet); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #777; }
.tm-stc { padding: 3px 9px; border: 1.5px solid #141414; font-family: var(--f-sheet); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
.tm-h { margin: 16px 0 16px; text-align: center; font-size: 21px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.tm-rows { border-top: 1.5px solid #141414; }
.tm-colh, .tm-row { display: grid; grid-template-columns: 26px 1fr 92px 78px; gap: 0 12px; align-items: center; }
.tm-colh { padding: 6px 0; border-bottom: 1px solid #c9c9c9; font-family: var(--f-sheet); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #777; }
.tm-row { --a: 0; min-height: 50px; padding: 9px 0; border-bottom: 1px solid #dedede; }
.tm-n { align-self: start; padding-top: 1px; font-size: 15px; font-weight: 700; }
.tm-q { font-size: 15.5px; line-height: 1.38; font-weight: 700; }
.tm-a { position: relative; height: 22px; }
.tm-a .fld { position: absolute; left: 0; right: 0; top: 5px; width: auto; height: 12px; opacity: calc(1 - var(--a)); }
.tm-ok { position: absolute; left: 0; top: 0; font-size: 15.5px; line-height: 22px; color: var(--pen-ink); opacity: var(--a); white-space: nowrap; }
.tm-ini { display: flex; gap: 6px; }
.tm-ini .ini { width: 36px; height: 26px; padding: 2px 3px; border: 1px solid #b9b9b9; border-radius: 2px; }
.tm-row.is-q .tm-q { color: #141414; }
.tm-parties { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0 0 16px; font-size: 15px; align-items: center; }
.tm-parties dt { font-family: var(--f-sheet); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #777; }
.tm-parties .fld { width: 100%; height: 12px; }
@media (max-width: 899px) {
  .terms { --w: min(354px, calc(100vw - 28px)); padding: 16px 14px 16px; }
  .tm-heads { margin: -16px -14px 12px; gap: 6px; }
  .tm-lh { height: 8px; }
  .tm-draft { font-size: 12px; }
  .tm-stc { font-size: 12px; padding: 2px 6px; }
  .tm-h { margin: 10px 0 10px; font-size: 16px; letter-spacing: 0.12em; }
  .tm-colh, .tm-row { grid-template-columns: 16px 1fr 48px 50px; gap: 0 7px; }
  .tm-colh { font-size: 12px; letter-spacing: 0.04em; }
  .tm-row { min-height: 40px; padding: 7px 0; }
  .tm-n { font-size: 15px; }
  .tm-q { font-size: 15px; line-height: 1.32; }
  .tm-ok { font-size: 15px; }
  .tm-ini { gap: 3px; }
  .tm-ini .ini { width: 23px; height: 21px; padding: 1px 2px; }
  .tm-parties { font-size: 13.5px; gap: 6px 10px; margin-bottom: 12px; }
}

/* ---------- the signed national supply agreement ---------- */
.terms--sa { --w: 470px; padding-top: 22px; }
.terms--sa .tm-h { margin-top: 4px; font-size: 18px; letter-spacing: 0.12em; }
.tm-cl { padding: 10px 0; border-bottom: 1px solid #dedede; font-size: 15.5px; line-height: 1.45; }
.tm-cl b { display: inline-block; min-width: 5.2em; font-family: var(--f-sheet); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #666; font-weight: 700; }
.tm-cl:first-of-type { border-top: 1.5px solid #141414; }
.tm-sigs { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 18px; }
.tm-sig { font-family: var(--f-sheet); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #666; }
.tm-sig .sig-ink { display: block; width: 100%; height: 40px; border-bottom: 1px solid #555; margin-bottom: 5px; }
@media (max-width: 899px) {
  .terms--sa { --w: min(330px, calc(100vw - 44px)); }
  .terms--sa .tm-h { font-size: 15px; }
  .tm-cl { font-size: 14px; padding: 8px 0; }
  .tm-sigs { gap: 14px; margin-top: 12px; }
  .tm-sig .sig-ink { height: 32px; }
}