/* /research/when-the-thief-has-the-right-key. Long-form article: black ground, gold accents, a measure of about 68 characters
   (36em of GraphikLCG at 19px; its zero is wide, so 68ch would run to about 94 characters).
   GraphikLCG comes from pages.css. Cormorant Garamond and JetBrains Mono are SIL OFL (licences in /assets/trace/fonts).
   Math is pre-rendered KaTeX HTML; katex.min.css and its fonts are self-hosted beside this file (MIT). */
@font-face{font-family:"Cormorant Garamond";font-weight:500;font-style:normal;font-display:swap;src:url(/assets/trace/fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:600;font-style:normal;font-display:swap;src:url(/assets/trace/fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:500;font-style:italic;font-display:swap;src:url(/assets/trace/fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:400;font-style:normal;font-display:swap;src:url(/assets/trace/fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2")}

.zp .zr-essay{
  --gold:#F5C451; --gold-up:#FFD877; --ink:#F2F2F2; --ink-2:#B8B8B8; --hair:rgba(245,196,81,.5); --hair-soft:rgba(242,242,242,.42);
  --display:"Cormorant Garamond","Iowan Old Style",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --measure:36em; --edge:clamp(16px,5vw,64px);
  position:relative;background:#000;color:var(--ink);overflow-x:clip;
  font-size:19px;line-height:1.7;

  .te-bg{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.7}
  .te-article{position:relative;z-index:1;padding:clamp(48px,9vw,112px) var(--edge) 96px}
  .te-head,.te-part{max-width:var(--measure);margin:0 auto}
  :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
  a{color:var(--gold);text-decoration:underline;text-decoration-color:rgba(245,196,81,.55);text-underline-offset:3px}
  a:hover{color:var(--gold-up);text-decoration-color:var(--gold-up)}

  .te-eyebrow{margin:0 0 24px;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;text-shadow:0 0 16px rgba(245,196,81,.35)}
  .te-eyebrow a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
  h1{margin:0 0 40px;font:500 clamp(44px,7.4vw,88px)/1.02 var(--display);letter-spacing:-.02em;color:var(--ink);text-wrap:balance;
     background:linear-gradient(180deg,#FFE9A8,#F5C451 70%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

  .te-toc ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
  .te-toc li{border-bottom:1px solid var(--hair)}
  .te-toc a{display:flex;gap:20px;align-items:baseline;padding:16px 4px;min-height:48px;color:var(--ink);text-decoration:none;font:500 clamp(20px,2.4vw,26px)/1.25 var(--display)}
  .te-toc a:hover{color:var(--gold);background:rgba(245,196,81,.06)}
  .te-toc__n{font:500 12px/1 GraphikLCG,sans-serif;letter-spacing:.14em;color:var(--gold);font-variant-numeric:tabular-nums}

  .te-part{padding-top:clamp(72px,10vw,128px)}
  .te-figure{margin:0 0 40px;width:min(100vw - 2 * var(--edge),1080px);position:relative;left:50%;transform:translateX(-50%)}
  .te-figure img{display:block;width:100%;height:auto;border:1px solid var(--hair);border-radius:6px;background:#0b0b0b}
  .te-part__kicker{margin:0 0 8px;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
  .te-sections{margin:0 0 32px;border:1px solid var(--hair);border-radius:6px;background:#0b0b0b}
  .te-sections summary{cursor:pointer;padding:12px 20px;min-height:48px;display:flex;align-items:center;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
  .te-sections ol{margin:0;padding:4px 20px 16px 44px;font-size:16px;line-height:1.5;color:var(--ink-2)}
  .te-sections li{padding:5px 0}
  .te-sections a{color:var(--ink);text-decoration-color:rgba(242,242,242,.42)}
  .te-top{margin:56px 0 0;padding-top:20px;border-top:1px solid var(--hair);font-size:14px}
  .te-top a{display:inline-flex;align-items:center;min-height:44px}

  .te-body{overflow-wrap:break-word}
  .te-body > *:first-child{margin-top:0}
  .te-body h2{margin:0 0 28px;font:500 clamp(34px,5vw,56px)/1.08 var(--display);letter-spacing:-.02em;color:var(--ink);text-wrap:balance;scroll-margin-top:96px}
  .te-body h3{margin:64px 0 20px;font:500 clamp(26px,3.2vw,34px)/1.18 var(--display);letter-spacing:-.01em;color:var(--gold);text-wrap:balance;scroll-margin-top:96px}
  .te-body p{margin:0 0 1.25em}
  .te-body strong{font-weight:500;color:#fff}
  .te-body em{font-style:italic;color:var(--ink)}
  .te-body h2 + p strong{font-size:15px;letter-spacing:.02em;color:var(--ink-2);font-weight:400}
  .te-body ul,.te-body ol{margin:0 0 1.25em;padding-left:1.3em}
  .te-body li{margin:0 0 .5em;padding-left:.2em}
  .te-body li::marker{color:var(--gold)}
  .te-body blockquote{margin:32px 0;padding:4px 0 4px 24px;border-left:2px solid var(--gold);font:500 italic clamp(22px,2.6vw,26px)/1.45 var(--display);color:var(--ink)}
  .te-body blockquote p:last-child{margin-bottom:0}
  .te-body hr{border:0;border-top:1px solid var(--hair);margin:56px 0}
  .te-body code{font:400 .84em/1.4 var(--mono);color:var(--gold);background:rgba(245,196,81,.1);border:0;border-radius:3px;padding:2px 6px}
  .te-code{margin:28px 0;padding:20px 24px;overflow-x:auto;background:#0b0b0b;border:1px solid var(--hair);border-radius:6px}
  .te-code code{display:block;white-space:pre;font:400 15px/1.6 var(--mono);color:var(--ink);background:none;padding:0}
  .te-math{margin:28px 0;padding:20px 16px;overflow-x:auto;overflow-y:hidden;background:#0b0b0b;border:1px solid var(--hair);border-radius:6px;color:#fff;text-align:center}
  .te-math .katex-display{margin:0}
  .katex{font-size:1.08em;color:inherit}
  .te-table{margin:32px 0;overflow-x:auto;border:1px solid var(--hair);border-radius:6px;background:#0b0b0b}
  .te-table table{width:100%;min-width:560px;border-collapse:collapse;font-size:16px;line-height:1.5}
  .te-table th{text-align:left;padding:14px 18px;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);border-bottom:1px solid var(--hair);white-space:nowrap}
  .te-table td{padding:14px 18px;vertical-align:top;border-bottom:1px solid rgba(242,242,242,.2);color:var(--ink)}
  .te-table tr:last-child td{border-bottom:0}
  .te-table td:first-child{color:#fff;font-weight:500}

  @media (max-width:720px){
    &{font-size:18px}
    .te-table table{font-size:15px}
    .te-math{padding:16px 12px}
  }
  @media (prefers-reduced-motion:no-preference){ & { scroll-behavior:smooth } }
}