/* Parallax — site.css
   The public site's whole design, as ruled by the owner on 9 September 2026: off the brand, in the register the
   serious quant firms keep. One grotesk at text weights, a white ground, grey for what is secondary, no colour, no
   decoration; the dark version it was ruled from is one line of tokens away. Nothing here derives from assets/brand; that departure is recorded in website/README.md.
   Nothing loads from a network: the face is self-hosted in fonts/. */

@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300 700;font-display:block;src:url(fonts/hanken-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/hanken-grotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{--bg:#FFFFFF;--raised:#F5F5F5;--ink:#141414;--sec:#4A4A4A;--mut:#8A8A8A;--rule:#E6E6E6;--err:#B3261E;
  --sans:'Hanken Grotesk',Helvetica,Arial,sans-serif;--pad:40px;--wrap:1120px;--measure:640px;--read:700px}

/* ---- base ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
h1,h2,h3{font-weight:400;overflow-wrap:break-word;hyphens:none}
b,strong{font-weight:500}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{position:fixed;left:16px;top:16px;z-index:50;background:var(--ink);color:var(--bg);padding:8px 14px;font-size:15px}

/* ---- the masthead: the name and two links ---- */
.masthead .wrap{display:flex;justify-content:space-between;align-items:center;height:64px;font-size:15px}
.brand{display:inline-flex;align-items:center;gap:8px;font-weight:500}
.brand svg{width:16px;height:16px;display:block;color:var(--ink)}
.nav{display:flex;gap:24px}
.nav a{color:var(--mut);transition:color .2s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}

/* ---- the home page: a head, then one column of reading with its headings in grey ---- */
.head{padding:104px 0 96px;max-width:720px}
.display{font-size:40px;line-height:1.18;letter-spacing:-.01em;max-width:22ch;text-wrap:balance}
.stand{margin-top:24px;font-size:20px;line-height:1.4;color:var(--sec);max-width:32ch}
.home{max-width:var(--measure);padding-bottom:96px}
.home section + section{margin-top:52px}
.home h2{font-size:15px;color:var(--mut)}
.home section p{margin-top:10px}
.home section p + p{margin-top:14px}
.home section a:not(.fn),.prose a,.def a,.callout a,.form-note a,.lede a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
.home section a:not(.fn):hover,.prose a:hover,.def a:hover,.callout a:hover,.form-note a:hover,.lede a:hover{color:var(--sec)}
.home section a.plain{text-decoration:none}
.fn{font-size:11px;line-height:1;vertical-align:super;margin-left:1px;color:var(--mut)}
.fn:hover{color:var(--ink)}
/* the name's footnote. It opens beside the line it belongs to — in the margin the reading column
   leaves empty, once there is room for one — and the next click elsewhere closes it. With site.js
   blocked the :target rule still opens it, in place, and it stays open until the page reloads. */
.fnhost{position:relative}
.home section .fnhost + p{margin-top:14px}
.note{display:none;margin-top:18px;padding-left:16px;border-left:1px solid var(--rule);
  font-size:15px;line-height:1.55;color:var(--mut)}
.note:target,.note.is-open{display:block}
.note p{margin-top:0}
.note .fnum{font-size:14px;color:var(--mut);margin-right:8px}
@media (min-width:1080px){
  .note{position:absolute;top:34px;left:calc(100% + 32px);width:300px;
    margin-top:0;padding-left:0;border-left:0;border-top:1px solid var(--rule);padding-top:10px}
}

/* ---- the other pages: a head, then ruled rows with their names at the left ---- */
.hero{padding:96px 0 72px}
.hero .display{max-width:20ch}
.eyebrow{font-size:15px;color:var(--mut);margin-bottom:16px}
.lede{font-size:20px;line-height:1.4;color:var(--sec);max-width:34ch;text-wrap:pretty}
.hero .lede{margin-top:24px;max-width:40ch}
.qualifier{font-size:15px;color:var(--mut)}
.section{padding:56px 0;border-top:1px solid var(--rule);scroll-margin-top:16px}
.row{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px 40px}
.row > .label{font-size:15px;color:var(--mut);padding-top:5px}
.display-sm{font-size:26px;line-height:1.25;letter-spacing:-.005em;max-width:24ch;text-wrap:balance}
.measure{max-width:var(--measure)}
.measure + .measure{margin-top:1em}
.mt{margin-top:20px}
.mt-lg{margin-top:40px}

/* the definitions on the experts page: a heading and its paragraph, ruled */
.defs{display:grid}
.def{padding:24px 0;border-top:1px solid var(--rule)}
.def:first-child{border-top:0;padding-top:0}
.def .ord{display:block;font-size:15px;color:var(--mut);margin-bottom:6px}
.title-sm{font-size:17px;font-weight:500;line-height:1.4;margin-bottom:6px}
.def p{color:var(--sec)}
.callout{margin-top:24px;border:1px solid var(--rule);padding:20px 24px;max-width:var(--measure);color:var(--sec)}
.callout p + p{margin-top:.75em}

/* ---- the form on the experts page ---- */
.btn{display:inline-block;font-family:var(--sans);font-size:15px;font-weight:500;padding:11px 18px;background:var(--ink);color:var(--bg);border:1px solid var(--ink);border-radius:0;cursor:pointer;transition:background .2s,border-color .2s}
.btn:hover{background:var(--sec);border-color:var(--sec)}
.btn:disabled{opacity:.6;cursor:default}
.form{max-width:520px}
.field{margin-bottom:24px}
.field label{display:block;font-size:15px;color:var(--mut);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:17px;line-height:1.5;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--rule);border-radius:0;padding:8px 0;appearance:none;transition:border-color .2s}
.field select option{background:var(--bg);color:var(--ink)}
.field textarea{min-height:112px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--ink)}
.field .hint{margin-top:8px;font-size:14px;color:var(--mut)}
.form-note{margin-top:24px;font-size:14px;line-height:1.5;color:var(--mut);max-width:520px}
.form-status{margin-top:20px;font-size:15px;display:none}
.form-status[data-state]{display:block}
.form-status[data-state="ok"]{color:var(--sec)}
.form-status[data-state="err"]{color:var(--err)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- the legal documents ---- */
.doc{padding:72px 0 96px}
.doc .body{max-width:var(--measure)}
.doc .body p,.doc .body ul,.doc .body dl{margin:0 0 1.05em}
.doc .body ul{padding-left:1.1em}
.doc .body li{margin-bottom:.45em}
.doc .body li::marker{color:var(--mut)}
.doc .body a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
.doc .body a:hover{color:var(--sec)}
.doc h2{font-size:20px;font-weight:500;line-height:1.3;margin:44px 0 10px}
.doc h3{font-size:17px;font-weight:500;line-height:1.4;margin:24px 0 6px}
.doc .toc{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:20px 0;margin-top:32px;max-width:var(--measure)}
.doc .toc ul{columns:2;column-gap:40px;list-style:none;padding:0}
.doc .toc li{margin:0 0 6px;break-inside:avoid}
.doc .toc a{font-size:15px;color:var(--mut)}
.doc .toc a:hover{color:var(--ink)}
.doc dt{font-size:15px;color:var(--mut);margin:1em 0 4px}
.doc dd{margin:0}

/* ---- the colophon: the entity and the address ---- */
.colophon{padding:36px 0}
.colophon .entity{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;font-size:14px;color:var(--mut)}
.colophon .entity .left{display:flex;flex-wrap:wrap;gap:0 20px}
.colophon a:hover{color:var(--ink)}

/* ---- the essay ---------------------------------------------------------------------
   A long read, so it is set wider and larger than the rest of the firm: a 700px column at
   19px, where the landing page runs 640 at 17. Same one grotesk, same white ground.

   Every chart is inline SVG, and every stroke, fill and type size in one is a class here
   rather than an attribute on the element: the firm's CSP is style-src 'self', so a chart
   carrying its own style="" would draw unstyled. Chart type is in the viewBox's units and
   scales with the chart, hence the bump in the narrow-screen block below.

   Three greys carry every series, the same way in all nine figures: ink is the headline
   line, sec a second live line, mut the before or the context. Identity is never the grey
   alone - each line is labelled where it runs. Grid and axis rules are solid hairlines;
   a dash means a real threshold, never a grid. */
.essay{padding:72px 0 88px}
.essay .body{max-width:var(--read)}
.essay .body p{font-size:19px;line-height:1.65;margin:0 0 1.1em}
.essay .display-sm{font-size:38px;line-height:1.14;max-width:18ch}
.essay .byline{font-size:15px;color:var(--mut);margin:18px 0 32px}
.essay .rule{border:0;border-top:1px solid var(--rule);max-width:var(--read);margin:34px 0 40px}
.essay h2{font-size:15px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mut);margin:64px 0 18px;scroll-margin-top:24px}
.essay .body > p:first-child{margin-top:0}
/* the paragraph the essay opens on: an ordinary body paragraph, set off from the first
   section head by a gap rather than by a face or a colour of its own */
.essay .opening + h2{margin-top:57px}

/* the figures */
.fig{margin:44px 0 48px;max-width:var(--read)}
.fig-num{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin:0 0 6px}
.fig-title{font-size:18px;font-weight:500;line-height:1.35}
.fig-sub{font-size:16px;line-height:1.4;color:var(--sec);margin:3px 0 18px}
.fig-src{font-size:14px;line-height:1.5;color:var(--mut);margin-top:12px;padding-top:9px;
  border-top:1px solid var(--rule)}
.fig-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px 28px}
.fig-pair .pane-t{font-size:15px;font-weight:500;margin-bottom:8px}
.fig-key{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:14px;font-size:14px;color:var(--mut)}
.fig-key span{display:inline-flex;align-items:center;gap:7px}
.fig-key i{width:15px;height:10px;display:inline-block;background:var(--ink)}
.fig-key .k1{opacity:.06}
.fig-key .k2{opacity:.14}
.fig-key .k3{background:none;border:1px dashed var(--mut)}

/* the charts */
.chart{display:block;width:100%;height:auto}
.chart text{font-family:var(--sans);fill:var(--mut)}
.chart .tick{font-size:8.6px}
.chart .axt{font-size:8.6px;text-anchor:middle}
.chart .ann{font-size:8.6px}
.chart .ann-i{font-size:8.6px;fill:var(--bg)}
.chart .lbl{font-size:9.4px;font-weight:500;fill:var(--ink)}
.chart .lbl-i{font-size:9.2px;font-weight:500;fill:var(--ink)}
.chart .lbl-s{font-size:9.2px;font-weight:500;fill:var(--sec)}
.chart .lbl-m{font-size:9.2px;fill:var(--mut)}
.chart .ty{text-anchor:end}
.chart .te{text-anchor:end}
.chart .tc{text-anchor:middle}
.chart .grid,.chart .axis{stroke:var(--rule);stroke-width:.5;fill:none}
.chart .ref{stroke:var(--mut);stroke-width:.5;stroke-dasharray:2.4 2.2;fill:none}
.chart .s1{fill:none;stroke:var(--ink);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.chart .s2{fill:none;stroke:var(--mut);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.chart .s3{fill:none;stroke:var(--sec);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.chart .arw{stroke:var(--sec);stroke-width:1;fill:none}
.chart .arw-h{fill:var(--sec);stroke:none}
.chart .wash{fill:var(--ink);fill-opacity:.06;stroke:none}
.chart .wash-2{fill:var(--ink);fill-opacity:.14;stroke:none}
.chart .dwl{stroke:var(--mut);stroke-width:.6;stroke-dasharray:2.4 2.2}
.chart .hatch{stroke:var(--mut);stroke-width:.45}
.chart .lead{stroke:var(--mut);stroke-width:.5;fill:none}
.chart .bar{fill:var(--ink)}
.chart .dot{fill:var(--ink)}
.chart .dot-2{fill:var(--mut)}
.chart .dot-3{fill:var(--sec)}
.chart .ring{fill:var(--bg)}
.chart-p .tick,.chart-p .axt,.chart-p .ann{font-size:9.2px}
.chart-p .lbl-i,.chart-p .lbl-s,.chart-p .lbl-m{font-size:9.8px}

/* the endnotes. The marker is an ordinary link to the note and the note links back, so the
   apparatus needs no script at all. :target marks the one that was asked for. */
.fnref{font-size:11px;line-height:1;vertical-align:super;margin-left:1px;color:var(--mut)}
.fnref:hover{color:var(--ink)}
.essay .body a.fnref{text-decoration:none}
.essay .body a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
.essay .body a:hover{color:var(--sec)}
.endnotes{margin-top:72px;padding-top:26px;border-top:1px solid var(--rule);max-width:var(--read)}
.endnotes h2{font-size:15px;font-weight:400;color:var(--mut);margin:0 0 18px;
  letter-spacing:0;text-transform:none}
.endnotes ol{list-style:none;counter-reset:note;margin:0;padding:0}
.endnotes li{counter-increment:note;position:relative;padding-left:34px;margin-bottom:14px;
  font-size:15px;line-height:1.55;color:var(--sec);scroll-margin-top:24px}
.endnotes li::before{content:counter(note);position:absolute;left:0;top:1px;font-size:13px;color:var(--mut)}
.endnotes li:target,.endnotes li:target::before{color:var(--ink)}
.endnotes a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
.endnotes a:hover{color:var(--ink)}
.endnotes a.back{text-decoration:none;margin-left:6px;color:var(--mut)}
.endnotes a.back:hover{color:var(--ink)}

/* ---- narrow screens ---- */
@media (max-width:720px){
  :root{--pad:20px}
  .head{padding:56px 0 56px}
  .display{font-size:31px}
  .stand,.lede{font-size:19px}
  .home{padding-bottom:64px}
  .home section + section{margin-top:40px}
  .hero{padding:56px 0 48px}
  .section{padding:40px 0}
  .row{grid-template-columns:1fr;gap:12px}
  .row > .label{padding-top:0}
  .display-sm{font-size:23px}
  .doc{padding:48px 0 64px}
  .doc .toc ul{columns:1}
  .essay{padding:48px 0 64px}
  .essay .display-sm{font-size:29px}
  .essay .body p{font-size:18px}
  .essay h2{margin:44px 0 14px}
  .fig{margin:32px 0 36px}
  .fig-pair{grid-template-columns:1fr;gap:26px}
  .endnotes{margin-top:52px}
}
/* a chart's type is in the viewBox's units, so it shrinks with the chart. Below this width
   the chart is narrower than the 420-unit box and the type is set larger to compensate. */
@media (max-width:560px){
  /* three links no longer fit beside the name on a small phone: the row is allowed to
     wrap, the name keeps the first line and the nav takes the second. */
  .masthead .wrap{height:auto;flex-wrap:wrap;gap:4px 16px;padding-top:20px;padding-bottom:20px}
  .nav{gap:18px}
  .nav a{white-space:nowrap}
  /* A full-width chart is drawn in a 440-unit box and renders at 700px on a desktop but
     about 350 on a phone, so its type is set larger here to land in the same place. The
     paired panels go the other way - half width to full - so they are reset to their own
     size rather than inheriting the bump. */
  .chart .tick,.chart .axt,.chart .ann{font-size:10.6px}
  .chart .lbl,.chart .lbl-i,.chart .lbl-s,.chart .lbl-m{font-size:11.2px}
  .chart-p .tick,.chart-p .axt,.chart-p .ann{font-size:9.2px}
  .chart-p .lbl,.chart-p .lbl-i,.chart-p .lbl-s,.chart-p .lbl-m{font-size:9.8px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}
@media print{body{background:#fff;color:#111}.masthead,.form,.skip{display:none}.doc .toc a,.colophon,.colophon .entity{color:#111}}