/* hf.capital styles for the research and thoughts pages.
   Brand layer: every colour, face and size is set in this first block and nowhere else,
   from HFLattice docs/design/DESIGN.md. The front page takes its colours from here too,
   so every other rule below is scoped to classes the front page does not use. */
:root {
  --hf-mint:#01a371;
  --hf-mint-bright:#05c48e;
  --hf-ink:#013026;
  --hf-ink-soft:#46594f;
  --hf-tint:#f3f6f4;
  --hf-rule:#dfe6e2;
  --white:#ffffff;
  --sans:'Outfit', sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --size-wordmark:2.7rem;
  --size-nav:clamp(1rem, 1.5vw, 1.5rem);
  --size-hero:clamp(3.5rem, 9vw, 8rem);
  --size-title:clamp(2.4rem, 5vw, 4.25rem);
  --size-lede:clamp(1.25rem, 1.9vw, 1.6rem);
  --size-row:clamp(1.35rem, 2.1vw, 1.9rem);
  --size-h2:clamp(1.5rem, 2.4vw, 2rem);
  --size-body:1.2rem;
  --size-quote:clamp(1.4rem, 2.2vw, 1.8rem);
  --size-small:1rem;
  --size-meta:0.8rem;
  --size-foot:0.85rem;
  --size-talk:clamp(2.6rem, 6vw, 5rem);
}

* { box-sizing:border-box; }

.page { margin:0; background:var(--white); color:var(--hf-ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; }
.page a { color:inherit; }
.page .mark { color:var(--hf-mint-bright); }

/* One column, the same width and padding as the chart pages, so text and charts line up. */
.wrap { max-width:1240px; margin-left:auto; margin-right:auto; padding-left:48px; padding-right:48px; }

/* Header: the wordmark, and the menu always in view. */
.site-header { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:12px 32px; padding-top:32px; }
.wordmark { font-weight:300; font-size:var(--size-wordmark); letter-spacing:.03em; line-height:1; text-decoration:none; transition:opacity .3s ease; }
.wordmark:hover { opacity:.7; }
.wordmark .slashes { margin-right:4px; }
.site-nav .menu-options { display:flex; gap:.5vw; list-style:none; margin:0; padding:0; }
.site-nav li { font-weight:300; font-size:var(--size-nav); padding-right:1vw; border-right:1px solid var(--hf-mint-bright); }
.site-nav li:last-child { padding-right:0; border-right:none; }
.site-nav a { text-decoration:none; transition:color .2s ease; }
.site-nav a:hover, .site-nav a[aria-current] { color:var(--hf-mint); }

/* Opening block of every page, with the front page's mint line beside it. */
.intro { position:relative; padding-top:14vh; }
.intro::before { content:""; position:absolute; left:16px; top:calc(14vh + .15em); bottom:.35em; width:6px; background:var(--hf-mint-bright); }
.hero { margin:0; font-weight:300; font-size:var(--size-hero); line-height:1; text-transform:lowercase; }
.lede { margin:28px 0 0; max-width:34ch; font-weight:300; font-size:var(--size-lede); line-height:1.4; color:var(--hf-ink-soft); text-wrap:pretty; }
.meta { margin:0; font-family:var(--mono); font-size:var(--size-meta); letter-spacing:.12em; text-transform:uppercase; color:var(--hf-ink-soft); }
.meta a { text-decoration:none; }
.meta a:hover { color:var(--hf-mint); }

/* A list of pieces: one row each, the whole row a link. */
.rows { list-style:none; margin:10vh 0 0; padding:0; }
.rows li { margin:0 -16px; border-bottom:1px solid var(--hf-rule); }
.rows li:first-child { border-top:1px solid var(--hf-rule); }
.row { display:grid; grid-template-columns:9rem minmax(0, 1fr); gap:12px 32px; padding:28px 16px; text-decoration:none; transition:background-color .15s ease; }
.row.has-image { grid-template-columns:9rem minmax(0, 1fr) 240px; }
.row:hover { background:var(--hf-tint); }
.row .meta { padding-top:.7em; }
.row-title { margin:0; font-weight:500; font-size:var(--size-row); line-height:1.15; letter-spacing:-.015em; text-wrap:balance; }
.row-summary { display:block; margin:10px 0 0; max-width:52ch; font-size:var(--size-body); line-height:1.5; color:var(--hf-ink-soft); }
.row-image { display:block; width:100%; height:auto; }

/* A piece: title, lede, then charts or prose. */
.title { margin:20px 0 0; max-width:20ch; font-weight:500; font-size:var(--size-title); line-height:1.05; letter-spacing:-.015em; text-wrap:balance; }
.piece .lede { max-width:38ch; color:var(--hf-ink); }
.chart { display:block; width:100%; height:100vh; margin-top:10vh; border:0; }
.prose { margin-top:10vh; }
.prose h2 { margin:0 0 16px; font-weight:500; font-size:var(--size-h2); letter-spacing:-.015em; }
.prose p, .prose li { max-width:62ch; font-size:var(--size-body); line-height:1.55; }
.prose p { margin:0 0 1em; }
.prose blockquote { max-width:40ch; margin:1.5em 0; padding-left:24px; border-left:6px solid var(--hf-mint-bright); font-weight:300; font-size:var(--size-quote); line-height:1.35; }
.prose img { display:block; max-width:100%; height:auto; }
.notice { margin:6vh 0 0; max-width:62ch; font-size:var(--size-small); line-height:1.5; color:var(--hf-ink-soft); }
.more { margin-top:14vh; }
.more-title { margin:0; font-weight:500; font-size:var(--size-h2); letter-spacing:-.015em; text-transform:lowercase; }
.more .rows { margin-top:24px; }
.talk { margin-top:14vh; margin-bottom:0; font-weight:300; font-size:var(--size-talk); line-height:1; text-transform:lowercase; }
.talk a { color:var(--hf-mint); text-decoration:none; transition:opacity .3s ease; }
.talk a:hover { opacity:.7; }

.page-footer { padding:14vh 0 40px; text-align:center; font-weight:300; font-size:var(--size-foot); letter-spacing:.02em; color:var(--hf-ink-soft); }

@media screen and (max-width:720px) {
  .wrap { padding-left:16px; padding-right:16px; }
  .site-header { padding-top:24px; }
  .site-nav .menu-options { gap:12px; }
  .site-nav li { padding-right:12px; }
  .intro { padding-top:8vh; }
  .intro::before { display:none; }
  .row, .row.has-image { grid-template-columns:minmax(0, 1fr); }
  .row .meta { padding-top:0; }
  .row-summary { font-size:var(--size-small); }
  .chart { margin-top:6vh; }
}