/* ==========================================================================
   FANG FUTURES — 10 Principles (a tool page under Reinvent work)
   Sits on offering.css: the same hero, reading column, dividers, sources list
   and CTA. Adds the numbered principle rows. No funnel; the field only.
   ========================================================================== */

/* the principles: number, title, body — one hairline between each */
.principles{display:grid;margin-top:var(--space-4)}
.principle{display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--space-4);padding:clamp(24px,3.2vh,36px) 0;border-top:var(--border-hair)}
.principle:last-child{border-bottom:var(--border-hair)}
.principle-num{font-family:var(--font-mono);font-size:var(--text-chapter-tag);font-weight:500;letter-spacing:.22em;color:var(--accent);padding-top:.55em}
.principle-body{display:grid;gap:10px}
.principle-title{font-weight:900;font-size:clamp(1.35rem,1.9vw,1.75rem);line-height:1.12;letter-spacing:-.015em;text-wrap:balance}
.principle-body p{font-size:clamp(17px,1.25vw,19px);line-height:1.6;color:var(--fg2);text-wrap:pretty;max-width:58ch}

/* self-assessment: the scorecard card from reinvent-work, one-up in the reading column */
.p-assess{display:grid;grid-template-columns:minmax(0,1fr)}
.p-assess .tool{grid-row:auto;grid-template-rows:none;gap:var(--space-6)}   /* the two-up grid subgrids its rows to align a pair; a lone card sets its own rhythm */
.soon-tag{display:inline-flex;align-items:center;gap:8px;flex:none;font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--fg2);border:1px solid var(--hairline-strong);padding:6px 10px}
.soon-tag::before{content:"";width:7px;height:7px;background:var(--accent-2)}   /* orange interrupts as a mark, never as the label: 12px type needs a passing contrast */
.tool:hover .soon-tag,.tool:focus-visible .soon-tag{color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.35)}

/* references: the sources list, numbered */
.refs li{grid-template-columns:40px minmax(0,1fr)}
.ref-num{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;letter-spacing:.18em;color:var(--accent);padding-top:.2em}
.ref-cite{color:var(--fg3)}
.refs-note{padding-top:var(--space-2);font-size:var(--text-sm);line-height:1.5;color:var(--fg2)}   /* fg2, not the fg3 of the citations above it: a caveat is read, and fg3 at 14px misses AA on white */

@media (max-width:768px){
  .p-assess .tool{margin-top:0}   /* offering.css stacks the two-up pair; there is no pair here to space against */
  .p-assess .move-head{flex-wrap:wrap;gap:var(--space-3)}   /* the badge drops under the title rather than squeezing it */
  .principle{grid-template-columns:1fr;gap:8px}
  .principle-num{padding-top:0}
  .refs li{grid-template-columns:1fr;gap:4px}
}