/* ============================================================
   Trading risk — an educational page.

   Scoped to `.rk`, prefix `rk-`, same convention as `dc-` and `lg-`.
   The palette is the site's; the only addition is a muted red used
   for loss, and the partner blue is deliberately absent — nothing on
   this page is an offer.

   Two widths are in play: `.rk-shell` holds the charts and the wide
   blocks, `.rk-prose` holds running text at a reading measure. The
   general-pages template asks for 800px of reading width on long
   text, and that is what `.rk-prose` is.
   ============================================================ */

.rk{
  --bg:#171C27;
  --lift:#2A3244;
  --surface:#131A27;
  --recess:#0E1420;
  --ink:#EDE8DF;
  --muted:#AAB5C7;
  --dim:#8A97AC;
  --gold:#FCAF00;
  --champagne:#F0CE80;
  --edge:rgba(219,183,104,.28);
  --edge-2:rgba(224,188,110,.42);
  --line:rgba(217,182,108,.18);
  --rule:rgba(255,255,255,.08);
  --loss:#E0686A;
  --ok:#5FBF8C;
  --r:14px;

  background:var(--bg);color:var(--ink);
  font-family:Archivo,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

.rk *{box-sizing:border-box}
.rk h1,.rk h2,.rk h3,.rk h4,.rk p,.rk ul,.rk ol,.rk li,.rk figure,.rk table{margin:0;padding:0}
.rk ul,.rk ol{list-style:none}
.rk a{color:var(--champagne);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px;text-decoration-color:var(--edge-2)}
.rk a:hover{color:var(--gold);text-decoration-color:var(--gold)}
.rk :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

/* Screen reader only. Every chart carries a data table in one of
   these, so the figures are readable without seeing the drawing. */
.rk-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.rk-shell{width:min(1120px,calc(100% - clamp(28px,5vw,72px)));margin:0 auto;padding:36px 0 56px}
.rk-prose{width:min(760px,100%)}
.rk-prose p+p{margin-top:14px}
.rk-prose p{color:var(--muted)}
.rk-prose b,.rk-prose strong{color:var(--ink);font-weight:700}

/* ---------- opening ---------------------------------------------- */

.rk-hero{text-align:center;padding:8px 0 4px}
.rk-hero img{width:38px;height:38px;display:block;margin:0 auto 16px}
.rk-hero h1{
  font-size:clamp(30px,4.4vw,44px);line-height:1.1;letter-spacing:-.03em;
  font-variation-settings:"wdth" 92,"wght" 760;
}
.rk-hero p{max-width:620px;margin:14px auto 0;color:var(--muted);font-size:17px}
.rk-meta{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 14px;
  margin-top:18px;color:var(--dim);font-size:12.5px;
}
.rk-meta b{color:var(--champagne);font-size:11px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase}
.rk-meta span:before{content:"·";margin-right:14px;color:var(--lift)}
.rk-meta span:first-of-type:before{content:none}

/* The page says what it is before it says anything else. */
.rk-scope{
  margin-top:26px;padding:16px 20px;
  background:var(--surface);border:1px solid var(--edge);border-left:3px solid var(--gold);
  border-radius:var(--r);
}
.rk-scope p{color:var(--muted);font-size:14.5px;line-height:1.6}
.rk-scope b{color:var(--ink)}

/* ---------- sections --------------------------------------------- */

.rk-sec{margin-top:56px;scroll-margin-top:72px}
.rk-sec__n{
  display:block;color:var(--champagne);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px;
}
.rk-sec h2{
  font-size:clamp(22px,2.6vw,29px);line-height:1.18;letter-spacing:-.02em;
  font-variation-settings:"wdth" 94,"wght" 720;
}
.rk-sec__lede{margin-top:12px;color:var(--muted);font-size:16.5px;max-width:760px}
.rk-sec>.rk-prose,.rk-sec__body{margin-top:20px}

.rk-sub{margin-top:34px}
.rk-sub h3{
  font-size:18px;line-height:1.3;letter-spacing:-.012em;
  font-variation-settings:"wdth" 96,"wght" 700;
}
.rk-sub>.rk-prose{margin-top:10px}

.rk-rule{height:1px;margin:0;border:0;background:var(--rule)}

/* ---------- charts ----------------------------------------------- */

/* A figure is a dark recess so the drawing sits in its own frame and
   is not confused with a promotional panel. */
.rk-fig{
  margin-top:24px;padding:20px 20px 16px;
  background:var(--recess);border:1px solid var(--line);border-radius:var(--r);
}
.rk-fig__t{
  color:var(--ink);font-size:15px;font-variation-settings:"wdth" 96,"wght" 700;
  letter-spacing:-.01em;
}
.rk-fig__s{margin-top:4px;color:var(--dim);font-size:13px}
.rk-fig svg{display:block;width:100%;height:auto;margin:16px 0 0;overflow:visible}

/* Every chart is drawn twice: once wide, once for a narrow column. A single
   760-unit drawing squeezed into a 330px phone column would render its
   labels at five pixels, and a chart nobody can read teaches nothing. The
   narrow cut is capped at 400px so it never inflates on a tablet. */
.rk-fig svg.rk-fig__n{display:none}
.rk-fig svg.rk-fig__w{display:block}
.rk-fig figcaption{
  margin-top:14px;padding-top:12px;border-top:1px solid var(--rule);
  color:var(--muted);font-size:13px;line-height:1.55;
}
.rk-fig figcaption b{color:var(--ink)}
.rk-fig figcaption a{color:var(--champagne)}

/* Chart primitives, so four charts share one vocabulary. */
.rk-grid-line{stroke:rgba(255,255,255,.07);stroke-width:1}
.rk-axis{stroke:rgba(255,255,255,.22);stroke-width:1}
.rk-tick{fill:var(--dim);font-size:11px;font-family:Archivo,Arial,sans-serif}
.rk-tick--y{text-anchor:end}
.rk-tick--x{text-anchor:middle}
.rk-alab{fill:var(--muted);font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;font-family:Archivo,Arial,sans-serif}
.rk-curve{fill:none;stroke:var(--loss);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.rk-curve-fill{fill:rgba(224,104,106,.12);stroke:none}
.rk-dot{fill:var(--loss);stroke:var(--recess);stroke-width:2}
.rk-call{fill:var(--ink);font-size:12px;font-weight:700;font-family:Archivo,Arial,sans-serif}
.rk-call--m{fill:var(--dim);font-weight:400}
.rk-bar{fill:var(--champagne)}
.rk-bar--alt{fill:#6E88B8}
.rk-bar--loss{fill:var(--loss)}
.rk-bval{fill:var(--ink);font-size:12px;font-weight:700;font-family:Archivo,Arial,sans-serif}
.rk-blab{fill:var(--muted);font-size:12px;font-family:Archivo,Arial,sans-serif}
.rk-eq{fill:none;stroke:var(--ok);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.rk-thr{fill:none;stroke:var(--loss);stroke-width:2;stroke-dasharray:5 4;stroke-linejoin:round}
.rk-band{fill:rgba(224,104,106,.09)}
.rk-mark{stroke:rgba(255,255,255,.3);stroke-width:1;stroke-dasharray:3 3}

/* A small key under a chart that needs one. */
.rk-key{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px}
.rk-key span{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:12.5px}
.rk-key i{width:14px;height:3px;border-radius:2px;flex:none}

/* ---------- the two-column comparison ---------------------------- */

.rk-vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}
.rk-vs__c{
  padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  display:flex;flex-direction:column;gap:12px;
}
.rk-vs__c--on{border-color:var(--edge);background:linear-gradient(180deg,#141C2B,var(--surface))}
.rk-vs__h{display:flex;align-items:center;gap:10px}
.rk-vs__h b{font-size:15px;font-variation-settings:"wdth" 96,"wght" 700}
.rk-vs__tag{
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;
}
.rk-vs__tag--on{color:#101725;background:var(--champagne)}
.rk-vs__tag--off{color:var(--loss);background:rgba(224,104,106,.14);
  border:1px solid rgba(224,104,106,.3)}
.rk-vs ul{display:flex;flex-direction:column;gap:10px}
.rk-vs li{position:relative;padding-left:22px;color:var(--muted);font-size:14px;line-height:1.55}
.rk-vs li:before{
  position:absolute;left:0;top:0;font-size:13px;font-weight:700;
}
.rk-vs__c--on li:before{content:"✓";color:var(--ok)}
.rk-vs__c--off li:before{content:"✕";color:var(--loss)}
.rk-vs li b{color:var(--ink)}

/* ---------- a cited rule ----------------------------------------- */

/* The citation is the heading, because the citation is the point: a
   reader has to be able to go and read the rule. */
.rk-laws{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.rk-law{
  padding:16px 18px;background:var(--surface);
  border:1px solid var(--line);border-left:3px solid var(--edge-2);border-radius:10px;
}
.rk-law__c{
  display:block;color:var(--champagne);font-size:12px;font-weight:700;
  letter-spacing:.06em;margin-bottom:5px;
}
.rk-law p{color:var(--muted);font-size:14.5px;line-height:1.58}
.rk-law p+p{margin-top:8px}
.rk-law b{color:var(--ink)}
.rk-law q{color:var(--ink);font-style:normal}
.rk-law q:before{content:"\201C"}
.rk-law q:after{content:"\201D"}

/* A rule that does not reach the reader's situation is the most
   useful thing on the page, so it gets its own treatment. */
.rk-law--gap{border-left-color:var(--loss);background:rgba(224,104,106,.045)}
.rk-law--gap .rk-law__c{color:var(--loss)}

/* ---------- callouts --------------------------------------------- */

.rk-note{
  margin-top:22px;padding:16px 18px;background:var(--surface);
  border:1px solid var(--edge);border-radius:10px;
}
.rk-note p{color:var(--muted);font-size:14.5px;line-height:1.58}
.rk-note p+p{margin-top:8px}
.rk-note b{color:var(--champagne)}

.rk-pending{
  margin-top:22px;padding:14px 16px;border-left:3px solid var(--gold);
  background:rgba(252,175,0,.06);border-radius:0 8px 8px 0;
}
.rk-pending p{color:var(--muted);font-size:13.5px;line-height:1.55}
.rk-pending b{color:var(--gold)}

/* ---------- checklist -------------------------------------------- */

.rk-check{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px;
  counter-reset:rkq}
.rk-check li{
  counter-increment:rkq;position:relative;
  padding:16px 18px 16px 50px;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;
}
.rk-check li:before{
  content:counter(rkq,decimal-leading-zero);
  position:absolute;left:18px;top:16px;
  color:var(--champagne);font-size:11px;font-weight:700;letter-spacing:.08em;
}
.rk-check b{display:block;color:var(--ink);font-size:14.5px;
  font-variation-settings:"wdth" 96,"wght" 700}
.rk-check p{margin-top:5px;color:var(--muted);font-size:13.5px;line-height:1.55}

/* ---------- sources ---------------------------------------------- */

.rk-src{margin-top:22px}
.rk-src__g+.rk-src__g{margin-top:18px}
.rk-src h3{
  color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;margin-bottom:10px;
}
.rk-src ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 20px}
.rk-src li{color:var(--dim);font-size:13.5px;line-height:1.5;
  padding-left:14px;position:relative}
.rk-src li:before{content:"";position:absolute;left:0;top:9px;
  width:5px;height:1px;background:var(--edge-2)}
.rk-src a{color:var(--muted);text-decoration-color:var(--rule)}
.rk-src a:hover{color:var(--gold)}

/* ---------- closing ---------------------------------------------- */

.rk-end{
  margin-top:56px;padding:24px;background:var(--surface);
  border:1px solid var(--edge);border-radius:var(--r);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 32px;
}
.rk-end h2{font-size:15px;font-variation-settings:"wdth" 96,"wght" 700;margin-bottom:8px}
.rk-end p{color:var(--muted);font-size:13.5px;line-height:1.6}
.rk-end p+p{margin-top:8px}

.rk-risk{
  margin-top:20px;color:var(--dim);font-size:12.5px;line-height:1.6;
}

/* ---------- responsive ------------------------------------------- */

@media(max-width:900px){
  .rk-check{grid-template-columns:1fr}
  .rk-src ul{grid-template-columns:1fr}
  .rk-end{grid-template-columns:1fr;gap:20px}
}

/* Below this width the wide cut of a chart would fall under ten pixels of
   label, so the narrow cut takes over. Type inside an SVG is sized in
   viewBox units, so the sizes below are user units, not pixels: at the
   400px cap they land near 15px, at 390px near 13px, at 320px near 10px. */
@media(max-width:860px){
  .rk-fig svg.rk-fig__w{display:none}
  .rk-fig svg.rk-fig__n{display:block;max-width:400px;margin-left:auto;margin-right:auto}
  svg.rk-fig__n .rk-tick{font-size:14px}
  svg.rk-fig__n .rk-alab{font-size:13px;letter-spacing:.08em}
  svg.rk-fig__n .rk-call{font-size:15px}
  svg.rk-fig__n .rk-call--m{font-size:13px}
  svg.rk-fig__n .rk-bval{font-size:15px}
  svg.rk-fig__n .rk-blab{font-size:13px}
}

@media(max-width:720px){
  .rk-vs{grid-template-columns:1fr}
  .rk-sec{margin-top:44px}
  .rk-fig{padding:16px 14px 14px}
}

@media(max-width:560px){
  .rk-shell{padding:28px 0 44px}
  .rk-hero h1{font-size:clamp(26px,8vw,34px)}
  .rk-hero p{font-size:15.5px}
  .rk-scope,.rk-note,.rk-law{padding:14px 15px}
  .rk-end{padding:18px}
  .rk-check li{padding:14px 15px 14px 44px}
  .rk-check li:before{left:15px;top:15px}
}

@media(prefers-reduced-motion:reduce){
  .rk *{animation:none!important;transition:none!important}
}