/* ==========================================================================
   cslresearch.com
   One stylesheet. Nothing else. No build step, no preprocessor, no imports.

   The governing idea: a white paper sitting on a dark desk.
   Everything below is organised in that order:

     1.  Tokens          the colours and fonts, all in one place
     2.  Reset
     3.  The shell       nav, footer, index, about, disclosures (dark)
     4.  The paper       every post body (white sheet)
     5.  Status tags     OPEN / CLOSED / WRONG
     6.  Tables          numbers, right aligned, tabular figures
     7.  Responsive      the sheet goes edge to edge on phones
     8.  Print           the shell drops away, the paper prints as-is

   If you are reading this in three years and want to change a colour,
   change it in section 1 and nowhere else.
   ========================================================================== */


/* 1. TOKENS
   ========================================================================== */

:root {
  /* The shell: near-black desk */
  --shell-bg:      #0E0E10;
  --shell-text:    #E8E8E6;
  --shell-dim:     #8A8A8E;
  --rule:          #26262A;

  /* The one accent. Muted amber. Used for links and the WRONG tag only.
     Nowhere else. If you are tempted to use it somewhere else, do not. */
  --accent:        #C8963E;  /* on dark backgrounds */
  --accent-ink:    #8A5A12;  /* darker sibling, for links on the white sheet */

  /* The paper */
  --paper:         #FFFFFF;
  --ink:           #16161A;
  --ink-dim:       #5C5C64;
  --paper-rule:    #DCDCD8;
  --paper-rule-hi: #B4B4AE;

  /* Type. System stacks only. Nothing is loaded over the network. */
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;
  --serif: Charter, "Iowan Old Style", "Palatino Linotype", Palatino,
           "Book Antiqua", Georgia, serif;

  /* Layout */
  --shell-width:  54rem;   /* index and shell pages */
  --sheet-width:  44rem;   /* the white sheet, padding included */
}


/* 2. RESET
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--shell-bg);
  color: var(--shell-text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

/* Every number on this site uses tabular figures. */
time, .ticker, .price, table, .num, .stat { font-variant-numeric: tabular-nums; }

/* Visible focus. Keyboard users exist. */
a:focus-visible,
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}


/* 3. THE SHELL
   ========================================================================== */

.wrap {
  max-width: var(--shell-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* --- masthead ----------------------------------------------------------- */

.masthead {
  border-bottom: 1px solid var(--rule);
}

.masthead .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-top: 1.75rem;
  padding-bottom: 1.25rem;
}

.wordmark {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--shell-text);
  text-decoration: none;
}

.wordmark span {
  color: var(--shell-dim);
  font-weight: 400;
}

.wordmark:hover { color: var(--shell-text); }

.nav {
  display: flex;
  gap: 1.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.nav a {
  color: var(--shell-dim);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}

.nav a:hover { color: var(--shell-text); }

.nav a[aria-current="page"] {
  color: var(--shell-text);
  border-bottom-color: var(--rule);
}

/* --- shell body --------------------------------------------------------- */

.shell-main { padding: 3rem 0 4rem; }

.standfirst {
  max-width: 40rem;
  margin: 0 0 3rem;
  color: var(--shell-dim);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.standfirst strong { color: var(--shell-text); font-weight: 500; }

.section-label {
  margin: 0 0 1rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--shell-dim);
}

/* Links on the dark shell. Targeted positively at prose links rather than at
   "every link in main", because index rows are whole-row links and must NOT
   pick up the amber and the underline. */
.shell-prose a,
.standfirst a,
.shell-footer a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}

/* --- shell prose (about, disclosures) -----------------------------------
   Short pages that are not analysis. They stay on the dark shell.
   Anything that IS analysis belongs on the white sheet instead. */

.shell-prose { max-width: 38rem; }

.shell-prose h1 {
  margin: 0 0 2rem;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.shell-prose h2 {
  margin: 2.75rem 0 0.9rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--shell-dim);
}

.shell-prose p,
.shell-prose li {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--shell-text);
}

.shell-prose p { margin: 0 0 1.15em; }
.shell-prose ul { margin: 0 0 1.3em; padding-left: 1.25em; }
.shell-prose li { margin-bottom: 0.7em; }
.shell-prose li::marker { color: var(--shell-dim); }

/* A line you want to be unmissable, used once or twice per page at most. */
.shell-prose .emphatic {
  padding-left: 1rem;
  border-left: 2px solid var(--rule);
  color: var(--shell-text);
}

/* Fill these in later. Deliberately visible so they are not forgotten. */
.todo {
  padding: 0.9rem 1rem;
  border: 1px dashed var(--accent);
  color: var(--accent);
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.6;
}

/* --- the index list ----------------------------------------------------- */

.index-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.index-list li { border-bottom: 1px solid var(--rule); }

.index-row {
  display: grid;
  grid-template-columns: 6.5rem 4.25rem 1fr auto;
  align-items: baseline;
  gap: 0 1.25rem;
  padding: 1.05rem 0;
  text-decoration: none;
  color: inherit;
}

.index-row:hover .index-title { color: var(--accent); }

.index-date {
  font-size: 0.78125rem;
  letter-spacing: 0.04em;
  color: var(--shell-dim);
}

.index-ticker {
  font-size: 0.78125rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  color: var(--shell-text);
}

.index-title {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--shell-text);
}

.index-company {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.78125rem;
  color: var(--shell-dim);
}

/* --- footer ------------------------------------------------------------- */

.shell-footer {
  border-top: 1px solid var(--rule);
  padding: 2rem 0 3rem;
  font-size: 0.78125rem;
  line-height: 1.7;
  color: var(--shell-dim);
}

.shell-footer p { margin: 0 0 0.4rem; }
.shell-footer .footer-links { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: 0.9rem; }
.shell-footer .footer-links a { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.6875rem; }


/* 4. THE PAPER
   ==========================================================================
   Everything below applies inside .sheet, which is the white page.
   Post bodies and any other page containing analysis live here.
   ========================================================================== */

.sheet {
  max-width: var(--sheet-width);
  margin: 3rem auto 4rem;
  padding: 4rem 3.75rem 4.5rem;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.7;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 18px 50px rgba(0, 0, 0, 0.45);
}

.sheet p { margin: 0 0 1.15em; }
.sheet p:last-child { margin-bottom: 0; }

.sheet a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}

.sheet strong { font-weight: 700; }

.sheet ul, .sheet ol { margin: 0 0 1.3em; padding-left: 1.4em; }
.sheet li { margin-bottom: 0.5em; }

.sheet blockquote {
  margin: 1.6em 0;
  padding-left: 1.2em;
  border-left: 2px solid var(--paper-rule-hi);
  color: var(--ink-dim);
}

.sheet hr {
  border: 0;
  border-top: 1px solid var(--paper-rule);
  margin: 2.75rem 0;
}

.sheet code {
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 0.875em;
  background: #F4F4F1;
  padding: 0.1em 0.3em;
}

/* --- post header -------------------------------------------------------- */

.post-head {
  margin-bottom: 2.5rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--paper-rule-hi);
}

.post-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.post-eyebrow .ticker { color: var(--ink); letter-spacing: 0.11em; }

.post-title {
  margin: 0 0 0.6rem;
  font-family: var(--serif);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.005em;
}

.post-company {
  margin: 0 0 1.5rem;
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--ink-dim);
}

/* The facts strip: date written, price at writing, status. */
.post-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 1rem 1.5rem;
  margin: 0;
  font-family: var(--sans);
}

.post-facts dt {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 0.3rem;
}

.post-facts dd {
  margin: 0;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

/* --- headings inside the paper ------------------------------------------
   h2  section heading, sans, uppercase, hairline rule above
   h3  sub-section, sans, sentence case
   h4  lowest level, serif italic
   ------------------------------------------------------------------------ */

.sheet h2 {
  margin: 3rem 0 1.1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--paper-rule);
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ink);
}

.sheet h3 {
  margin: 2rem 0 0.65rem;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.4;
}

.sheet h4 {
  margin: 1.6rem 0 0.5rem;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 400;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink);
}

/* First section heading after the header does not need the big gap. */
.post-head + h2 { margin-top: 0; border-top: 0; padding-top: 0; }

/* --- falsification block ------------------------------------------------
   Deliberately marked. This section is mandatory and should feel like it. */

.falsification {
  margin: 1rem 0 0;
  padding: 1.4rem 1.6rem;
  background: #F7F7F4;
  border-left: 2px solid var(--ink);
}

.falsification ul { margin-bottom: 0; }
.falsification p:last-child { margin-bottom: 0; }

/* --- model download ----------------------------------------------------- */

/* Scoped with .sheet so it beats the .sheet a link styling above. Without the
   .sheet prefix this loses the cascade and the button comes out amber and
   underlined, which reads as a broken link rather than a download. */
.sheet .model-link {
  display: inline-block;
  margin-top: 0.3rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--paper-rule-hi);
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--ink);
}

.sheet .model-link:hover { border-color: var(--ink); text-decoration: none; }
.sheet .model-link .meta { color: var(--ink-dim); letter-spacing: 0.08em; }

/* --- updates log -------------------------------------------------------- */

.updates { margin-top: 0.5rem; }

.update {
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--paper-rule);
}

.update:first-child { border-top: 1px solid var(--paper-rule); }

.update-date {
  display: block;
  margin-bottom: 0.45rem;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.update p:last-child { margin-bottom: 0; }

/* --- back link at the foot of the sheet ---------------------------------- */

.sheet-foot {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--paper-rule-hi);
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}


/* 5. STATUS TAGS
   ==========================================================================
   OPEN    the call is live
   CLOSED  the call is finished, thesis played out or position exited
   WRONG   I was wrong. This is a feature of the archive, not an embarrassment,
           so it is the loudest thing on the page.
   ========================================================================== */

.tag {
  display: inline-block;
  padding: 0.22em 0.55em 0.2em;
  border: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--shell-dim);
}

.tag-open   { color: var(--shell-text); border-color: #3A3A40; }
.tag-closed { color: var(--shell-dim);  border-color: var(--rule); }
.tag-wrong  { color: var(--shell-bg);   border-color: var(--accent); background: var(--accent); }

/* Same tags, on the white sheet */
.sheet .tag        { border-color: var(--paper-rule-hi); color: var(--ink-dim); }
.sheet .tag-open   { color: var(--ink); border-color: var(--ink); }
.sheet .tag-closed { color: var(--ink-dim); }
.sheet .tag-wrong  { color: #FFFFFF; background: #8A5A12; border-color: #8A5A12; }


/* 6. TABLES
   ==========================================================================
   Hairline rules only. No zebra striping. No coloured cells.
   Numbers right aligned, tabular figures, first column left aligned.
   ========================================================================== */

.table-wrap {
  margin: 1.75rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sheet table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
}

.sheet caption {
  caption-side: top;
  text-align: left;
  margin-bottom: 0.7rem;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.sheet th,
.sheet td {
  padding: 0.5rem 0.7rem;
  text-align: right;
  border-bottom: 1px solid var(--paper-rule);
  white-space: nowrap;
}

.sheet th:first-child,
.sheet td:first-child {
  text-align: left;
  padding-left: 0;
  white-space: normal;
}

.sheet th:last-child,
.sheet td:last-child { padding-right: 0; }

.sheet thead th {
  border-bottom: 1px solid var(--paper-rule-hi);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
}

.sheet tbody tr:last-child td { border-bottom: 1px solid var(--paper-rule-hi); }

/* Use on a <tr> for a subtotal or summary line. */
.sheet tr.rule-above td { border-top: 1px solid var(--paper-rule-hi); }
.sheet tr.total td { font-weight: 700; color: var(--ink); }

/* Use on a <td> for an indented sub-item in the first column. */
.sheet td.indent { padding-left: 1.1rem; }

.table-note {
  margin: -0.75rem 0 1.75rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--ink-dim);
}


/* 7. RESPONSIVE
   ==========================================================================
   On a phone the sheet goes almost edge to edge and the dark frame becomes a
   thin margin. The reading width is NOT reduced to preserve the effect.
   ========================================================================== */

@media (max-width: 46rem) {
  .sheet {
    max-width: none;
    margin: 0.5rem 0.5rem 2rem;
    padding: 2.5rem 1.5rem 3rem;
  }
}

@media (max-width: 34rem) {
  .wrap { padding: 0 1.1rem; }

  .masthead .wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
  }

  .nav { gap: 1.1rem; }

  .shell-main { padding: 2.25rem 0 3rem; }

  /* Index rows become two lines: metadata, then title. */
  .index-row {
    grid-template-columns: auto auto 1fr;
    grid-template-areas:
      "date ticker tag"
      "title title title";
    gap: 0.55rem 0.9rem;
    padding: 1rem 0;
  }

  .index-date   { grid-area: date; }
  .index-ticker { grid-area: ticker; }
  .index-title  { grid-area: title; }
  .index-tag    { grid-area: tag; justify-self: end; }

  .sheet {
    margin: 0.4rem 0.4rem 1.5rem;
    padding: 2rem 1.15rem 2.5rem;
    font-size: 1.03125rem;
  }

  .post-title { font-size: 1.5rem; }
  .falsification { padding: 1.1rem 1.15rem; }
}


/* 8. PRINT
   ==========================================================================
   Someone will print a post to PDF and attach it to something.
   The dark shell drops away entirely. The paper prints as-is.
   ========================================================================== */

@media print {
  :root { --accent-ink: #000000; }

  body {
    background: #FFFFFF;
    color: #000000;
  }

  .masthead,
  .shell-footer,
  .sheet-foot,
  .nav { display: none !important; }

  .sheet {
    max-width: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    font-size: 10.5pt;
    line-height: 1.55;
    color: #000000;
  }

  .shell-main { padding: 0; }
  .wrap { max-width: none; padding: 0; }

  .sheet a { color: #000000; text-decoration: underline; }

  /* Spell out link targets so a printed PDF is still usable. */
  .sheet a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; word-break: break-all; }
  .sheet a[href^="/"]::after,
  .sheet a[href^="."]::after { content: ""; }

  .falsification { background: #FFFFFF; border-left: 2pt solid #000000; }

  .sheet h2 { margin-top: 1.6rem; break-after: avoid; }
  .sheet h3, .sheet h4 { break-after: avoid; }
  .table-wrap, table, .update { break-inside: avoid; }

  .sheet .tag-wrong { background: #FFFFFF; color: #000000; border: 1pt solid #000000; }

  /* A printed page should say where it came from. */
  .print-source { display: block !important; }

  @page { margin: 18mm 16mm; }
}

.print-source {
  display: none;
  margin-top: 2rem;
  padding-top: 0.75rem;
  border-top: 1px solid #999999;
  font-family: var(--sans);
  font-size: 8pt;
  color: #444444;
}