@charset "utf-8";

/* ============================================================
   FutureMarket — Research Broadsheet
   One hand-written stylesheet. No frameworks, no build step.
   ============================================================ */

/* ---------- 1. Tokens ---------- */

:root {
  --paper:        #f2eee3;
  --paper-2:      #ebe6d8;
  --paper-3:      #e2dccb;
  --ink:          #16130d;
  --ink-2:        #3d372c;
  --ink-3:        #6a6152;
  --rule:         #b9b0995e;
  --rule-hard:    #6f6857;
  --accent:       #96281b;
  --accent-2:     #7a3a12;
  --flag:         #1f4536;

  --svg-bg:       #eae5d6;
  --svg-bg-2:     #ded7c4;
  --svg-bg-3:     #f7f4ec;
  --svg-ink:      #16130d;
  --svg-ink-2:    #5b5344;
  --svg-rule:     #8c8471;
  --svg-accent:   #96281b;
  --svg-accent-w: #96281b1f;
  --svg-flag:     #1f4536;
  --svg-flag-w:   #1f45361a;
  --svg-warn:     #8a5a06;
  --svg-warn-w:   #8a5a0618;

  --texture-op:   0.55;
  --texture-blend: multiply;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --measure: 1420px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #12110d;
    --paper-2:    #191712;
    --paper-3:    #211e18;
    --ink:        #e9e3d4;
    --ink-2:      #c3bcab;
    --ink-3:      #8e8676;
    --rule:       #4a443759;
    --rule-hard:  #6b6454;
    --accent:     #e0705c;
    --accent-2:   #cf9a5e;
    --flag:       #7fb79b;

    --svg-bg:     #1b1913;
    --svg-bg-2:   #24211a;
    --svg-bg-3:   #100f0b;
    --svg-ink:    #e9e3d4;
    --svg-ink-2:  #a29a88;
    --svg-rule:   #6b6454;
    --svg-accent: #e0705c;
    --svg-accent-w: #e0705c24;
    --svg-flag:   #7fb79b;
    --svg-flag-w: #7fb79b1f;
    --svg-warn:   #d8a441;
    --svg-warn-w: #d8a4411f;

    --texture-op: 0.16;
    --texture-blend: screen;
  }
}

/* ---------- 2. Reset & base ---------- */

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

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

body {
  margin: 0;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

/* Newsprint grain. Subtle — it should read as paper, not as pattern. */
.texture {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("newsprint.png");
  background-size: 700px auto;
  background-repeat: repeat;
  opacity: var(--texture-op);
  mix-blend-mode: var(--texture-blend);
}

body > *:not(.texture) { position: relative; z-index: 1; }

img, svg { max-width: 100%; }
svg { height: auto; display: block; }

a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--paper); color: var(--ink);
  padding: .6rem 1rem; border: 1px solid var(--rule-hard);
  font-family: var(--sans); font-size: .8rem; z-index: 99;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- 3. Masthead ---------- */

.masthead {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 1.6rem 1.5rem 0;
}

.masthead__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem 1.5rem;
  font-family: var(--sans);
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--rule-hard);
}

.masthead__title {
  font-size: clamp(2.6rem, 9vw, 5.6rem);
  line-height: .96;
  margin: 1rem 0 .5rem;
  text-align: center;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-ligatures: common-ligatures;
}
.masthead__title a { text-decoration: none; }

.masthead__sub {
  margin: 0 auto 1rem;
  max-width: 46rem;
  text-align: center;
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.7;
}

.masthead__band {
  border-top: 3px double var(--rule-hard);
  border-bottom: 1px solid var(--rule-hard);
  padding: .5rem 0;
}

/* Section index strip — the newspaper's table of contents, not a nav bar */
.index-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .1rem 0;
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.index-strip a {
  padding: .25rem .85rem;
  text-decoration: none;
  color: var(--ink-2);
  border-right: 1px solid var(--rule);
  white-space: nowrap;
}
.index-strip a:last-child { border-right: 0; }
.index-strip a:hover { color: var(--accent); }
.index-strip a[aria-current="page"] {
  color: var(--accent);
  font-weight: 700;
}

/* ---------- 4. Sheet & sections ---------- */

.sheet {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 1.5rem 3rem;
}

.section {
  padding-top: 2.4rem;
  margin-top: 2.4rem;
  border-top: 1px solid var(--rule-hard);
}
.section:first-of-type { border-top: 0; margin-top: 0; }

.kicker {
  font-family: var(--sans);
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .5rem;
  font-weight: 700;
}

h2 {
  font-size: clamp(1.6rem, 3.6vw, 2.5rem);
  line-height: 1.12;
  margin: 0 0 .7rem;
  font-weight: 500;
  letter-spacing: -0.015em;
}

h3 {
  font-size: 1.2rem;
  line-height: 1.25;
  margin: 2rem 0 .5rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}

h4 {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 1.5rem 0 .5rem;
  font-weight: 700;
}

p { margin: 0 0 .95rem; }

.standfirst {
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 54rem;
  margin-bottom: 1.2rem;
  font-style: italic;
}

.dateline {
  font-family: var(--sans);
  font-size: .66rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: .45rem 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.4rem;
}

/* ---------- 5. Multi-column prose ---------- */

.prose { max-width: 46rem; }

.cols-2, .cols-3 {
  column-gap: 2.4rem;
  column-rule: 1px solid var(--rule);
  margin-bottom: 1.4rem;
}
.cols-2 > *:first-child,
.cols-3 > *:first-child { margin-top: 0; }
.cols-2 > *:last-child,
.cols-3 > *:last-child { margin-bottom: 0; }

@media (min-width: 720px) {
  .cols-2 { columns: 2; }
}
@media (min-width: 720px) and (max-width: 1099px) {
  .cols-3 { columns: 2; }
}
@media (min-width: 1100px) {
  .cols-3 { columns: 3; }
}

.cols-2 h3, .cols-3 h3,
.cols-2 h4, .cols-3 h4 {
  break-after: avoid-column;
  margin-top: 1.3rem;
}
.cols-2 p, .cols-3 p { break-inside: avoid-column; }

/* Drop cap opens the lede only */
.dropcap::first-letter {
  float: left;
  font-size: 3.55em;
  line-height: .82;
  padding: .06em .1em 0 0;
  font-weight: 500;
  color: var(--accent);
}

/* ---------- 6. Figures ---------- */

.figure {
  margin: 2rem 0;
  border: 1px solid var(--rule-hard);
  background: var(--paper-2);
  break-inside: avoid;
}

.figure__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem .8rem;
  padding: .55rem .9rem;
  border-bottom: 1px solid var(--rule-hard);
  background: var(--paper-3);
}

.figure__num {
  font-family: var(--sans);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

.figure__title {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 600;
}

.figure__body { padding: 1.1rem .9rem; overflow-x: auto; }
.figure__body > svg { min-width: 460px; margin: 0 auto; }

.figure__cap {
  margin: 0;
  padding: .7rem .9rem .8rem;
  border-top: 1px solid var(--rule);
  font-size: .85rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.figure__cap b { color: var(--ink); font-weight: 600; }

.figure__ref {
  display: block;
  margin-top: .4rem;
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--ink-3);
  word-break: break-word;
}

/* ---------- 7. Pull quote ---------- */

.pullquote {
  margin: 1.6rem 0;
  padding: 1rem 0;
  border-top: 3px double var(--rule-hard);
  border-bottom: 3px double var(--rule-hard);
  font-size: clamp(1.15rem, 2.3vw, 1.5rem);
  line-height: 1.35;
  font-style: italic;
  color: var(--ink);
  break-inside: avoid;
}
.pullquote p { margin: 0; }
.pullquote cite {
  display: block;
  margin-top: .6rem;
  font-family: var(--sans);
  font-size: .64rem;
  font-style: normal;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.aside-box {
  border: 1px solid var(--rule-hard);
  border-left: 4px solid var(--accent);
  background: var(--paper-2);
  padding: .9rem 1rem;
  margin: 1.5rem 0;
  break-inside: avoid;
}
.aside-box > *:last-child { margin-bottom: 0; }
.aside-box h4 { margin-top: 0; }

/* ---------- 8. Tables ---------- */

.table-wrap {
  overflow-x: auto;
  margin: 1.4rem 0;
  border-top: 2px solid var(--rule-hard);
  border-bottom: 2px solid var(--rule-hard);
}

table.ruled {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: .87rem;
}

table.ruled caption {
  caption-side: top;
  text-align: left;
  font-family: var(--sans);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: .5rem 0;
  font-weight: 700;
}

table.ruled th {
  text-align: left;
  font-family: var(--sans);
  font-size: .62rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-2);
  padding: .5rem .7rem .5rem 0;
  border-bottom: 1px solid var(--rule-hard);
  vertical-align: bottom;
}

table.ruled td {
  padding: .5rem .7rem .5rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
table.ruled tr:last-child td { border-bottom: 0; }
table.ruled td:last-child, table.ruled th:last-child { padding-right: 0; }

table.ruled code {
  font-family: var(--mono);
  font-size: .82em;
  color: var(--accent-2);
  word-break: break-word;
}

.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.tag {
  display: inline-block;
  font-family: var(--sans);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  padding: .12rem .42rem;
  border: 1px solid currentColor;
  white-space: nowrap;
  line-height: 1.5;
}
.tag--live  { color: var(--flag); }
.tag--part  { color: var(--accent-2); }
.tag--stub  { color: var(--accent); }

/* ---------- 9. Terminal ---------- */

.terminal {
  margin: 1.6rem 0;
  border: 1px solid var(--rule-hard);
  background: var(--paper-3);
  break-inside: avoid;
}

.terminal__bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .8rem;
  border-bottom: 1px solid var(--rule-hard);
  font-family: var(--sans);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.terminal__dot {
  width: .45rem; height: .45rem;
  border: 1px solid var(--rule-hard);
  border-radius: 50%;
  flex: none;
}

.terminal pre {
  margin: 0;
  padding: .9rem .8rem;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: .74rem;
  line-height: 1.65;
  color: var(--ink-2);
  tab-size: 2;
}

.t-prompt { color: var(--accent); font-weight: 700; }
.t-cmd    { color: var(--ink); font-weight: 700; }
.t-ok     { color: var(--flag); }
.t-warn   { color: var(--accent-2); }
.t-err    { color: var(--accent); }
.t-dim    { color: var(--ink-3); }

/* ---------- 10. Code with source refs ---------- */

.codeblock {
  margin: 1.4rem 0;
  border-left: 3px solid var(--rule-hard);
  background: var(--paper-2);
  break-inside: avoid;
}
.codeblock__ref {
  padding: .35rem .8rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--ink-3);
  word-break: break-word;
}
.codeblock pre {
  margin: 0;
  padding: .75rem .8rem;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: .75rem;
  line-height: 1.65;
  color: var(--ink-2);
  tab-size: 4;
}
.codeblock .c { color: var(--ink-3); font-style: italic; }
.codeblock .k { color: var(--accent); }
.codeblock .s { color: var(--flag); }

code {
  font-family: var(--mono);
  font-size: .85em;
  word-break: break-word;
}
p code, li code, dd code { color: var(--accent-2); }

/* ---------- 11. Lists ---------- */

.sheet ul, .sheet ol { margin: 0 0 1rem; padding-left: 1.15rem; }
.sheet li { margin-bottom: .4rem; }

dl.defs { margin: 1rem 0; }
dl.defs dt {
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
  margin-top: 1rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: .2rem;
}
dl.defs dd { margin: .45rem 0 0; color: var(--ink-2); font-size: .92rem; }

/* ---------- 12. Footnotes ---------- */

.fn-ref {
  font-family: var(--sans);
  font-size: .62em;
  vertical-align: super;
  line-height: 0;
  color: var(--accent);
  text-decoration: none;
  font-weight: 700;
  padding: 0 .1em;
}

.footnotes {
  margin-top: 2.4rem;
  padding-top: .9rem;
  border-top: 1px solid var(--rule-hard);
  font-size: .8rem;
  line-height: 1.55;
  color: var(--ink-3);
}
.footnotes h4 { margin-top: 0; }
.footnotes ol { padding-left: 1.1rem; }
.footnotes li { margin-bottom: .45rem; }
.footnotes code { font-size: .95em; }

/* ---------- 13. Grid helpers (secondary use only) ---------- */

.split {
  display: grid;
  gap: 1.6rem 2.4rem;
  margin-bottom: 1.2rem;
}
/* Grid and flex children default to min-width:auto, which lets a wide table
   or <pre> inside them force the whole page wider. Pin them to zero so the
   scroll containers below actually do their job. */
.split > *, .stat-row > * { min-width: 0; }
@media (min-width: 900px) {
  .split--2 { grid-template-columns: 1fr 1fr; }
  .split--wide-left { grid-template-columns: 1.55fr 1fr; }
  .split--wide-right { grid-template-columns: 1fr 1.55fr; }
}

.rule-top { border-top: 1px solid var(--rule); padding-top: 1rem; }

.stat-row {
  display: flex;
  flex-wrap: wrap;
  border-top: 2px solid var(--rule-hard);
  border-bottom: 2px solid var(--rule-hard);
  margin: 1.4rem 0;
}
.stat-row > div {
  flex: 1 1 8.5rem;
  padding: .7rem .9rem .7rem 0;
  border-right: 1px solid var(--rule);
}
.stat-row > div:last-child { border-right: 0; }
.stat-row dt {
  font-family: var(--sans);
  font-size: .58rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
}
.stat-row dd {
  margin: .15rem 0 0;
  font-size: 1.55rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat-row dd small {
  font-size: .62rem;
  font-family: var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin-top: .2rem;
}

/* ---------- 14. Continued / jump links ---------- */

.jump {
  margin-top: 2.4rem;
  padding-top: .8rem;
  border-top: 3px double var(--rule-hard);
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.5rem;
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.jump a { color: var(--accent); font-weight: 700; }

/* ---------- 15. Colophon ---------- */

.colophon {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 1.4rem 1.5rem 3rem;
  border-top: 3px double var(--rule-hard);
  font-family: var(--sans);
  font-size: .66rem;
  letter-spacing: .1em;
  color: var(--ink-3);
  line-height: 1.9;
}
.colophon p { margin: 0 0 .3rem; }
.colophon strong { color: var(--ink-2); letter-spacing: .16em; text-transform: uppercase; }

/* ---------- 16. Small screens ---------- */

@media (max-width: 719px) {
  body { font-size: 16.5px; }
  .masthead { padding-top: 1rem; }
  .masthead__top { font-size: .56rem; letter-spacing: .1em; }
  .index-strip { justify-content: flex-start; font-size: .62rem; }
  .index-strip a { padding: .25rem .6rem; }
  .sheet, .masthead, .colophon { padding-left: 1.05rem; padding-right: 1.05rem; }
  .stat-row > div { flex-basis: 45%; border-bottom: 1px solid var(--rule); }
  .dropcap::first-letter { font-size: 3em; }
  .figure__body { padding: .7rem .5rem; }
}

@media print {
  .texture, .index-strip, .jump { display: none; }
  body { background: #fff; color: #000; }
}