/* Marked to Market house style. See STYLE.md for the rules this file implements.
   Layout: one ~66ch reading column (.col); figures break out to 900px (.wide).
   Every figure follows the same anatomy: kicker, finding-as-title, neutral subtitle,
   the chart, caption, ticker rule. Colour is semantic and constant across pieces. */

:root{
  --bg:#f5f6f8; --paper:#ffffff; --ink:#15181d; --ink-2:#4a5160; --ink-3:#7c8494;
  --rule:#d9dde4; --rule-2:#eef0f3; --band:#eceff4; --grid:#e6e9ee;
  --pos:#e05f2b; --pos-soft:#fbe9e1;      /* the position in question */
  --book:#2a78d6; --book-soft:#e4eefb;    /* the funded book / the comparison */
  --display:"IBM Plex Sans Condensed",system-ui,sans-serif;
  --body:"Source Serif 4",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  /* aliases kept so piece-level CSS reads naturally */
  --fl:var(--pos); --fl-soft:var(--pos-soft); --funded:var(--book); --funded-soft:var(--book-soft);
  --acc:var(--book); --acc-soft:var(--book-soft); --warn:var(--pos); --warn-soft:var(--pos-soft);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#121417; --paper:#191c21; --ink:#eceef2; --ink-2:#b4bac6; --ink-3:#848c9b;
  --rule:#2d323b; --rule-2:#23272e; --band:#20242b; --grid:#252930;
  --pos:#e86a38; --pos-soft:#3a251c; --book:#3987e5; --book-soft:#1c2a40; color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#121417; --paper:#191c21; --ink:#eceef2; --ink-2:#b4bac6; --ink-3:#848c9b;
  --rule:#2d323b; --rule-2:#23272e; --band:#20242b; --grid:#252930;
  --pos:#e86a38; --pos-soft:#3a251c; --book:#3987e5; --book-soft:#1c2a40; color-scheme:dark }

/* ---------- base ---------- */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.6;
  padding-block:0 4rem;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.col{max-width:66ch;margin:0 auto}
.wide{max-width:900px;margin:2.2rem auto}
h1,h2,h3{font-family:var(--display);line-height:1.05;text-wrap:balance;margin:0}
h1{font-size:clamp(2.5rem,7vw,4.4rem);font-weight:700;letter-spacing:-.01em}
h2{font-size:1.35rem;font-weight:700;margin-top:2.6rem;margin-bottom:.6rem}
p{margin:0 0 1.15em}
.col a,.wide a{color:var(--book);text-decoration-thickness:1px;text-underline-offset:3px}
.col a:hover,.wide a:hover{text-decoration-thickness:2px}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--book);outline-offset:2px}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

.site-nav{max-width:66ch;margin:0 auto;display:flex;justify-content:space-between;align-items:baseline;padding:1rem 0 0;
  font-family:var(--mono);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase}
.site-nav a{color:inherit;text-decoration:none;font-weight:600}
.site-nav a .m{color:var(--pos)}
.site-nav a:hover{text-decoration:underline}
.site-nav span{color:var(--ink-3)}

.hero{padding-block:3.2rem 1.3rem;border-bottom:1px solid var(--rule);margin-bottom:2rem}
.hero .dek{font-size:1.18rem;color:var(--ink-2);max-width:60ch;margin-top:1rem}
.byline{font-family:var(--mono);font-size:.78rem;color:var(--ink-3);margin-top:1.4rem;display:flex;gap:1.2rem;flex-wrap:wrap}

/* ---------- the stamp: the house mark ---------- */
.stamp{display:inline-block;font-family:var(--mono);font-weight:600;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.2;
  color:var(--pos);border:1.5px solid var(--pos);border-radius:2px;padding:.2rem .5rem .16rem;transform:rotate(-1.2deg);
  background:color-mix(in srgb,var(--pos-soft) 60%,transparent);white-space:nowrap}
.stamp.flat{transform:none}
svg .stamp-box{fill:var(--pos-soft);stroke:var(--pos);stroke-width:1.5}
svg .stamp-txt{font-family:var(--mono);font-weight:600;font-size:10px;letter-spacing:.14em;fill:var(--pos);text-transform:uppercase}

/* ---------- figure anatomy ---------- */
figure{margin:0;background:var(--paper);border:1px solid var(--rule);border-radius:4px;padding:1.15rem 1.2rem .9rem;position:relative}
figure .kick{display:flex;justify-content:space-between;gap:.4rem 1rem;flex-wrap:wrap;margin:0 0 .5rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
figure .kick b{color:var(--ink-2);font-weight:600}
figure .ftitle{font-family:var(--display);font-size:1.22rem;font-weight:700;line-height:1.15;margin:0 0 .2rem;text-wrap:balance}
figure .fsub{font-size:.9rem;color:var(--ink-2);margin:0 0 1.05rem;font-family:var(--body)}
figcaption{font-size:.8rem;color:var(--ink-3);margin-top:.9rem;font-family:var(--mono);line-height:1.5}
figure .ticker{display:flex;justify-content:space-between;align-items:baseline;gap:.3rem 1rem;flex-wrap:wrap;
  border-top:1px solid var(--rule);margin-top:.9rem;padding-top:.6rem;font-family:var(--mono);font-size:.7rem;color:var(--ink-3);line-height:1.5}
figure .ticker a{color:var(--ink-3);text-decoration:none;white-space:nowrap}
figure .ticker a:hover{color:var(--ink);text-decoration:underline}
figure .ticker .asof{white-space:nowrap}
figure:target{outline:2px solid var(--pos);outline-offset:4px}
.legend{display:flex;gap:.5rem 1.2rem;flex-wrap:wrap;font-family:var(--mono);font-size:.74rem;color:var(--ink-2);margin:.1rem 0 .9rem}
.legend span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:.45rem;vertical-align:-1px;background:var(--sw)}

/* tap-to-pin notes (mtm.js wires [data-note]) */
[data-note]{cursor:pointer}
figure .pin{font-family:var(--mono);font-size:.76rem;line-height:1.45;color:var(--ink-2);background:var(--band);
  border-left:3px solid var(--pos);padding:.5rem .7rem;border-radius:0 3px 3px 0;margin:.9rem 0 0}
figure .pin[hidden]{display:none}
figure .hint{font-family:var(--mono);font-size:.68rem;color:var(--ink-3)}
.tip{position:fixed;pointer-events:none;background:var(--ink);color:var(--bg);font-family:var(--mono);font-size:.72rem;
  padding:.35rem .5rem;border-radius:3px;z-index:20;max-width:260px;line-height:1.4}
.tip[hidden]{display:none}

/* ---------- references ---------- */
sup.fn{font-family:var(--mono);font-size:.62em;vertical-align:super;line-height:0}
sup.fn a{color:var(--book);text-decoration:none;border-bottom:1px dotted var(--book);padding:0 .08em}
sup.fn a[aria-expanded="true"]{background:var(--book-soft)}
.refs{font-size:.85rem;color:var(--ink-2)}
.refs ol{padding-left:1.4rem;margin:0}
.refs li{margin-bottom:.45rem;line-height:1.45;scroll-margin-top:1.5rem}
.refs li:target{background:var(--book-soft);border-radius:2px}
.refs a{color:var(--book);text-decoration:none;word-break:break-word}
.refs a:hover,.refs a:focus-visible{text-decoration:underline}
/* reference preview: a card near the superscript on desktop, a bottom sheet on phones */
.refcard{position:absolute;z-index:30;width:min(340px,calc(100vw - 32px));background:var(--paper);color:var(--ink-2);
  border:1px solid var(--rule);border-top:3px solid var(--book);border-radius:4px;box-shadow:0 8px 28px rgba(0,0,0,.14);
  padding:.7rem .85rem .75rem;font-size:.84rem;line-height:1.45}
.refcard[hidden]{display:none}
.refcard .rk{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.35rem}
.refcard .rk a{color:var(--ink-3)}
.refcard a{color:var(--book);word-break:break-word}
.refcard .x{border:0;background:none;color:var(--ink-3);font:inherit;font-size:1rem;cursor:pointer;padding:0 .2rem;line-height:1}
@media (max-width:700px), (pointer:coarse){
  .refcard{position:fixed;left:0;right:0;bottom:0;top:auto!important;width:auto;border-radius:10px 10px 0 0;
    padding:.9rem max(16px,env(safe-area-inset-right,0px)) calc(1rem + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
    font-size:.92rem;box-shadow:0 -8px 30px rgba(0,0,0,.18)}
}

.note{font-size:.8rem;color:var(--ink-3);font-family:var(--mono);line-height:1.5;border-top:1px solid var(--rule);padding-top:1rem;margin-top:2.2rem}
.note a{color:var(--ink-2)}

/* ---------- signup (Kit form 10155433, plain POST: works with JS off) ---------- */
.signup{margin:2.6rem 0 1rem;padding:1.3rem 1.3rem 1.15rem;background:var(--paper);border:1px solid var(--rule);border-top:3px solid var(--pos);border-radius:4px}
.signup .eyebrow{display:block;margin-bottom:.35rem}
.signup h2{font-size:1.45rem;line-height:1.15;margin:0 0 .35rem}
.signup p{margin:0 0 .9rem;color:var(--ink-2);font-size:1rem}
.signup form{display:flex;gap:.5rem;flex-wrap:wrap}
.signup input[type=email]{flex:1 1 15rem;min-width:0;font:inherit;font-size:1rem;padding:.6rem .75rem;border:1px solid var(--rule);border-radius:3px;background:var(--bg);color:var(--ink)}
.signup input[type=email]:focus{outline:2px solid var(--book);outline-offset:1px;border-color:var(--book)}
.signup button{font-family:var(--mono);font-weight:600;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;padding:.65rem 1.1rem;border:0;border-radius:3px;background:var(--ink);color:var(--bg);cursor:pointer}
.signup button:hover{background:var(--book);color:#fff}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.signup small{display:block;margin-top:.6rem;font-family:var(--mono);font-size:.7rem;color:var(--ink-3)}

/* ---------- motion ---------- */
/* Figures are complete at rest. mtm.js adds .pre only to figures still below the fold, then removes it on view. */
@media (prefers-reduced-motion: reduce){ *{transition:none!important;animation:none!important} }
@media (max-width:520px){ body{font-size:17px} figure{padding:1rem .8rem .8rem} }