/* QBRS Labs — single stylesheet.
   Self-hosted fonts (latin subset, woff2), no external requests.
   Palette derived entirely from five base tokens. */

/* ---- Fonts (self-hosted, latin subset) ---------------------------- */
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/libre-franklin-600.woff2") format("woff2");
}
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/libre-franklin-800.woff2") format("woff2");
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/source-serif-4-400.woff2") format("woff2");
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/source-serif-4-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/source-serif-4-600.woff2") format("woff2");
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
}

/* ---- Tokens ------------------------------------------------------- */
:root {
  --paper: #F8F9F7;
  --ink:   #1B2421;
  --accent:#1E5C4F;
  --meta:  #5C6763;
  --rule:  #D9DDD8;

  /* Derived from the five base tokens only. Mixing toward --ink (rather
     than a hard-coded black) keeps hover legible in both themes: it
     darkens the accent on light paper and lightens it on dark. */
  --accent-hover: color-mix(in srgb, var(--accent) 76%, var(--ink));
  --code-tint:    color-mix(in srgb, var(--accent) 5%, var(--paper));

  --sans: 'Libre Franklin', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: 'Source Serif 4', Georgia, "Times New Roman", Times, serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --measure: 68ch;
}

/* Automatic dark mode: override only the five base tokens. Every other
   color is derived from these, so nothing else needs a dark rule. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #131917;
    --ink:   #E6E9E6;
    --accent:#4FA08C;
    --meta:  #8B9691;
    --rule:  #2A322F;
  }
}

* { box-sizing: border-box; }

html {
  font-size: 17px;                 /* body base */
  -webkit-text-size-adjust: 100%;
}
@media (min-width: 900px) {
  html { font-size: 18px; }
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.wrap,
.content {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 1.5rem;
}
.content { padding-top: 3rem; padding-bottom: 4rem; }

/* ---- Headings ----------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--sans);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
}
/* One scale, site-wide. Ratios matched to the PDF of the same document, which
   sets 11pt body against 14pt section and 12pt subsection headings. At these
   ratios size alone cannot carry the hierarchy, so weight and space carry it:
   every level gets roughly four times more room above than below, binding a
   heading to the text it introduces. There are no per-page exceptions. */
h1 { font-weight: 700; font-size: 1.35rem; letter-spacing: -0.01em;
     margin: 0 0 0.5rem; }
h2 { font-weight: 700; font-size: 1.10rem; letter-spacing: -0.005em;
     margin: 2.25rem 0 0.55rem; }
h3 { font-weight: 600; font-size: 1rem;    letter-spacing: 0;
     margin: 1.8rem 0 0.45rem; }
/* h4 differs from h3 by treatment, not by a single italic flag: small caps
   at slightly under body size, so the two levels are told apart at a glance. */
h4 { font-weight: 600; font-size: 0.95rem; letter-spacing: 0.02em;
     font-variant-caps: small-caps; margin: 1.5rem 0 0.4rem; }

/* Section headings inside a document body sit one step under the page title,
   which is itself an h1. This is a structural distinction, not a page one. */
.prose h1 { font-size: 1.20rem; margin: 3rem 0 0.7rem; }
.prose h1:first-child { margin-top: 0; }

/* A heading opening directly under its parent belongs to it, and should not
   carry the same gap as one separating unrelated blocks. */
h1 + h2 { margin-top: 1.2rem; }
h2 + h3,
h3 + h4 { margin-top: 1rem; }

p { margin: 0 0 1.1rem; }

/* ---- Links -------------------------------------------------------- */
a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--accent-hover); }

/* Navigational links opt out of the body-copy underline. */
.brand,
.site-nav a,
.site-footer a,
.post-list a,
.cta a { text-decoration: none; }
.post-list a:hover,
.cta a:hover { text-decoration: underline; }

/* ---- Mono role: dates, eyebrows, code ----------------------------- */
.meta,
.eyebrow,
.post-list time,
code, pre {
  font-family: var(--mono);
  font-size: 0.85em;
  color: var(--meta);
}
.eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.4rem;
}
code { background: var(--code-tint); padding: 0.08em 0.35em; border-radius: 2px; }
pre {
  font-size: 0.85em;
  color: var(--meta);
  background: var(--code-tint);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.9rem 1rem;
  line-height: 1.5;
  overflow-x: auto;
}
pre code { font-size: 1em; background: none; padding: 0; border-radius: 0; }

/* Wide tables scroll inside their own box rather than dragging the whole page
   sideways — the same containment `pre` uses above. The wrapper element is
   added at build time in _default/single.html: goldmark table render hooks
   need a newer Hugo than this build, and the site ships no JavaScript. */
.prose .table-scroll {
  overflow-x: auto;
  margin: 1.5rem 0;
}
.prose .table-scroll table { margin: 0; }
/* A width floor so the columns are set at a readable measure and the reader
   scrolls a properly laid-out table. Without it the table collapses to its
   min-content width at narrow viewports and is then clipped, which scrolls a
   squeezed table rather than a legible one.

   32rem, not more: the prose measure is 561px at 768 and 593px at 1440, and
   the root font is 17px below 1440 and 18px above. 32rem lands at 544px and
   576px, so the table still fits without scrolling at both desktop widths.
   34rem (578/612px) overshot and clipped the third column on desktop. */
.prose .table-scroll table { min-width: 32rem; }

/* Reference entries print their URL in full, and a long one has no natural
   break opportunity — at narrow widths it would push the whole page sideways.
   break-word only breaks a word that would otherwise overflow, so ordinary
   prose is unaffected, and `pre` is immune because white-space: pre wins. */
.prose { overflow-wrap: break-word; }

/* Contents. Only the paper carries one, so a reader can reach section 5
   without scrolling through four. Set as apparatus in the sans face, at the
   meta size, between hairlines — the same vocabulary the rest of the page
   uses for non-body matter. */
.prose .toc {
  margin: 2rem 0 2.5rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.9rem;
}
.prose .toc-label {
  margin: 0 0 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  font-variant-caps: small-caps;
  color: var(--meta);
}
.prose .toc ul { list-style: none; margin: 0; padding: 0; }
.prose .toc li { margin: 0.25rem 0; }
.prose .toc a { text-decoration: none; }
.prose .toc a:hover { text-decoration: underline; }

/* ---- Header ------------------------------------------------------- */
.site-header {
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-decoration: none;
}
.brand-mark {
  height: 1.4em;      /* the mark sits at title text height */
  width: auto;
  display: block;
}
/* The one decorative element: a short accent rule under the site title.
   Positioned absolutely so it does not disturb the mark/title alignment. */
.brand-name { position: relative; display: inline-block; }
.brand-name::after {
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 0.25rem;
  width: 2.5rem;
  height: 3px;
  background: var(--accent);
}
.site-nav a {
  margin-left: 1.5rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--meta);
}
.site-nav a:first-child { margin-left: 0; }
.site-nav a:hover { color: var(--accent); }

/* ---- Home --------------------------------------------------------- */
.hero { padding-bottom: 1rem; }
/* ...and the same accent rule under the page h1. */
.content h1 { position: relative; }
.content h1::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  margin-top: 0.6rem;
  background: var(--accent);
}
.lede {
  font-size: 1rem;
  color: var(--meta);
  margin: 1.1rem 0 1.5rem;
}
/* Two calls, ranked by treatment rather than by buttons — the site has none
   and should not acquire any. The primary is larger, heavier, and sits over a
   2px accent rule, the same underline device the brand and page titles use.
   The secondary drops to the meta grey and the meta size on its own line, so
   it reads as the lesser of the two before either is read. */
.cta { margin: 1.6rem 0 0; }
.cta a { font-family: var(--sans); text-decoration: none; }
.cta-primary {
  display: inline-block;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--accent);
  padding-bottom: 0.3rem;
  border-bottom: 2px solid var(--accent);
}
.cta-primary:hover { color: var(--accent-hover); border-bottom-color: var(--accent-hover); }
.cta-secondary {
  display: block;
  margin-top: 1.1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--meta);
}
.cta-secondary:hover { color: var(--accent); }
.latest {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}

/* ---- Lists -------------------------------------------------------- */
.post-list { list-style: none; margin: 0; padding: 0; }
.post-list li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule);
  display: flex;
  gap: 1rem;
  align-items: baseline;
}
.post-list time {
  flex: 0 0 8.5rem;
  font-variant-numeric: tabular-nums;
}
.post-list a { font-family: var(--sans); font-weight: 600; color: var(--ink); }
.post-list a:hover { color: var(--accent); }

/* Research items carry a date and a summary, so the row becomes a block
   instead of the journal's single baseline-aligned line. */
.post-list.detailed li { display: block; padding: 1.1rem 0; }
.post-list.detailed a { font-size: 1.05rem; }
.item-date {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--mono);
  font-size: 0.85em;
  color: var(--meta);
  font-variant-numeric: tabular-nums;
}
.item-summary {
  margin: 0.5rem 0 0;
  max-width: var(--measure);
  color: var(--meta);
}
/* "Also on SSRN" under a research entry. .post-list a is a title style -
   sans, 600, ink, 1.05rem - so the link inside this line has to be walked
   back to running text or it reads as a second heading on the row. */
.item-alt {
  margin: 0.35rem 0 0;
  font-size: 0.9em;
  color: var(--meta);
}
.post-list.detailed .item-alt a {
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  color: var(--meta);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.post-list.detailed .item-alt a:hover { color: var(--accent); }

/* The repository copy beside a paper's Download PDF link. Deliberately
   quieter than the link it follows: the PDF is the citable artifact and the
   SSRN entry is a mirror of it, so it takes the meta colour and a smaller
   size rather than the accent a body link would get. */
.prose .alt-link { font-size: 0.9em; color: var(--meta); }
.prose .alt-link a { color: var(--meta); }
.prose .alt-link a:hover { color: var(--accent); }

/* ---- Single ------------------------------------------------------- */
.single-head { margin-bottom: 2rem; }
.meta { margin: 0.8rem 0 0; }
.prose h2:first-child { margin-top: 0; }
.prose em, .prose i { font-style: italic; }

/* ---- Citations ----------------------------------------------------
   A citation is a pointer, not a link the reader is being invited to
   follow mid-sentence. Prose links carry an underline; citations drop it
   and stay in the accent colour, so they read as apparatus rather than
   as body links, and only pick up an underline on hover. The reference
   list's back-arrow is quieter still, in the meta grey. */
.cite {
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cite:hover,
.cite:focus-visible { text-decoration: underline; }

/* A cited entry highlights briefly when jumped to, so the reader can see
   which of forty-five they landed on. CSS only. */
.prose li:target {
  background: var(--code-tint);
  outline: 2px solid var(--code-tint);
  border-radius: 2px;
}

.cite-back {
  margin-left: 0.5em;
  color: var(--meta);
  text-decoration: none;
  font-size: 0.9em;
}
.cite-back:hover { color: var(--accent); }

/* ---- Draft flag (palette only) ------------------------------------ */
.draft-flag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--meta);
  background: var(--code-tint);
  border: 1px solid var(--rule);
  padding: 0.1rem 0.45rem;
  border-radius: 2px;
}
.draft-flag.inline { margin-left: 0.5rem; }

.placeholder { color: var(--meta); }

/* ---- Footer ------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--meta);
  margin-top: 4rem;
}
/* Both rows wrap: at 320px the copyright and the three links cannot sit on
   one line, and without this the footer — not the article — is what makes the
   page scroll sideways. Wrapping engages only when the row will not fit. */
.site-footer .wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.site-footer .footer-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.site-footer a { color: var(--meta); }
.site-footer a:hover { color: var(--accent); }

@media (max-width: 34rem) {
  .post-list li { flex-direction: column; gap: 0.15rem; }
  .post-list time { flex-basis: auto; }
}


/* ---- Disclosure line (research/journal singles, above footer) ----- */
.disclosure {
  max-width: var(--measure);
  margin: 3rem auto 0;
  padding: 1.25rem 1.5rem 0;
  border-top: 1px solid var(--rule);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--meta);
}