/* TheFuture: paper, teal and amber. Hand-written for this site only. */
:root {
  --tf-paper: #f6f2e8;
  --tf-paper-deep: #ece5d3;
  --tf-ink: #1f2a2c;
  --tf-ink-soft: #4d5b5d;
  --tf-teal: #0e5a5f;
  --tf-teal-dark: #08393c;
  --tf-amber: #e0962a;
  --tf-amber-pale: #f8e3bf;
  --tf-rule: #d6cdb6;
  --tf-measure: 44rem;
  --tf-wide: 68rem;
  --tf-face: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --tf-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
html { box-sizing: border-box; }
* , ::before, ::after { box-sizing: inherit; }
html { text-size-adjust: 100%; }
.tf-body { margin: 0; background: var(--tf-paper); color: var(--tf-ink); font: 1.09rem/1.78 var(--tf-face); }
a { color: var(--tf-teal); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--tf-teal-dark); text-decoration-color: var(--tf-amber); }
.tf-skip { position: absolute; left: -999px; }
.tf-skip:focus { left: 1rem; top: 1rem; background: var(--tf-amber-pale); padding: .4rem .8rem; z-index: 5; }

/* masthead and section rail */
.tf-mast { background: var(--tf-teal-dark); color: var(--tf-paper); }
.tf-mast__inner { max-width: var(--tf-wide); margin: 0 auto; padding: 1.4rem 1rem .9rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.4rem; }
.tf-brand { font: 700 1.9rem/1 var(--tf-ui); letter-spacing: -.02em; color: var(--tf-paper); text-decoration: none; }
.tf-brand:hover { color: var(--tf-amber-pale); }
.tf-brand__the { color: var(--tf-amber); font-weight: 400; }
.tf-mast__line { margin: 0; font: .92rem/1.4 var(--tf-ui); color: #cfe0dd; }
.tf-rail { background: var(--tf-teal); border-bottom: 4px solid var(--tf-amber); }
.tf-rail ul { list-style: none; margin: 0 auto; padding: 0 .5rem; max-width: var(--tf-wide); display: flex; flex-wrap: wrap; }
.tf-rail a { display: block; padding: .62rem .75rem; font: 600 .86rem/1 var(--tf-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--tf-paper); text-decoration: none; }
.tf-rail a:hover, .tf-rail a[aria-current] { background: var(--tf-teal-dark); color: var(--tf-amber-pale); }

/* full-bleed section bands */
.tf-band { background: var(--tf-paper-deep); border-bottom: 1px solid var(--tf-rule); }
.tf-band--energy { background: linear-gradient(100deg, #f3dfb6, var(--tf-paper-deep) 70%); }
.tf-band--transport { background: linear-gradient(100deg, #cfe3df, var(--tf-paper-deep) 70%); }
.tf-band--communications { background: linear-gradient(100deg, #dcd7ea, var(--tf-paper-deep) 70%); }
.tf-band--peak-oil { background: linear-gradient(100deg, #e4d2c2, var(--tf-paper-deep) 70%); }
.tf-band__inner { max-width: var(--tf-wide); margin: 0 auto; padding: 2.6rem 1rem 2rem; }
.tf-kicker { margin: 0 0 .5rem; font: 700 .78rem/1 var(--tf-ui); letter-spacing: .14em; text-transform: uppercase; }
.tf-kicker a { color: var(--tf-teal); text-decoration: none; border-bottom: 2px solid var(--tf-amber); }
.tf-band__title { margin: 0; max-width: 40rem; font: 700 clamp(1.8rem, 4.2vw, 2.85rem)/1.12 var(--tf-ui); letter-spacing: -.02em; color: var(--tf-teal-dark); }
.tf-band__dek { margin: .9rem 0 0; max-width: 40rem; font-size: 1.18rem; line-height: 1.55; color: var(--tf-ink-soft); }
.tf-stamp { margin: 1.1rem 0 0; font: .85rem/1.4 var(--tf-ui); color: var(--tf-ink-soft); }

/* article body */
.tf-prose { max-width: var(--tf-measure); margin: 0 auto; padding: 2.2rem 1rem 1rem; }
.tf-prose h2 { margin: 2.4rem 0 .6rem; font: 700 1.42rem/1.25 var(--tf-ui); color: var(--tf-teal-dark); }
.tf-prose h3 { margin: 1.8rem 0 .4rem; font: 700 1.12rem/1.3 var(--tf-ui); }
.tf-prose p, .tf-prose ul, .tf-prose ol { margin: 0 0 1.15rem; }
.tf-prose li { margin-bottom: .35rem; }
.tf-prose blockquote { margin: 1.6rem 0; padding: .8rem 1.1rem; border-left: 4px solid var(--tf-amber); background: var(--tf-amber-pale); }
.tf-prose table { width: 100%; border-collapse: collapse; margin: 1.4rem 0; font: .92rem/1.45 var(--tf-ui); }
.tf-prose th, .tf-prose td { padding: .5rem .6rem; border-bottom: 1px solid var(--tf-rule); text-align: left; vertical-align: top; }
.tf-prose th { background: var(--tf-paper-deep); }
.tf-prose .tf-aside { padding: 1rem 1.2rem; border: 1px solid var(--tf-rule); border-top: 4px solid var(--tf-teal); background: #fbf9f3; font-size: .98rem; }
.tf-sources { max-width: var(--tf-measure); margin: 0 auto 3rem; padding: 1.2rem 1rem 0; border-top: 2px solid var(--tf-rule); font: .92rem/1.5 var(--tf-ui); }
.tf-sources h2 { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tf-ink-soft); margin: 0 0 .6rem; }
.tf-sources ul { margin: 0; padding-left: 1.1rem; }

/* card grid */
.tf-shelf { max-width: var(--tf-wide); margin: 0 auto; padding: 2rem 1rem 3rem; }
.tf-shelf__head { font: 700 .82rem/1 var(--tf-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--tf-ink-soft); margin: 0 0 1rem; padding-bottom: .6rem; border-bottom: 2px solid var(--tf-teal); }
.tf-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.tf-card { background: #fffdf7; border: 1px solid var(--tf-rule); border-radius: 6px; padding: 1.1rem 1.2rem 1rem; display: flex; flex-direction: column; }
.tf-card__sec { margin: 0 0 .35rem; font: 700 .72rem/1 var(--tf-ui); letter-spacing: .13em; text-transform: uppercase; color: var(--tf-amber); }
.tf-card__title { margin: 0 0 .45rem; font: 700 1.16rem/1.3 var(--tf-ui); }
.tf-card__title a { color: var(--tf-teal-dark); text-decoration: none; }
.tf-card__title a:hover { text-decoration: underline; }
.tf-card__dek { margin: 0 0 .8rem; font-size: .98rem; line-height: 1.55; color: var(--tf-ink-soft); flex: 1; }
.tf-card__date { margin: 0; font: .78rem/1 var(--tf-ui); color: var(--tf-ink-soft); }
.tf-empty { font-style: italic; color: var(--tf-ink-soft); }

/* home intro */
.tf-lede { max-width: var(--tf-wide); margin: 0 auto; padding: 2.8rem 1rem 1.6rem; display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: end; }
.tf-lede h1 { margin: 0; font: 700 clamp(1.9rem, 4.6vw, 3.1rem)/1.08 var(--tf-ui); letter-spacing: -.025em; color: var(--tf-teal-dark); }
.tf-lede p { margin: 0; color: var(--tf-ink-soft); }
.tf-pillars { max-width: var(--tf-wide); margin: 0 auto; padding: 0 1rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.tf-pillar { display: block; padding: .9rem 1rem; border-top: 4px solid var(--tf-amber); background: var(--tf-paper-deep); color: var(--tf-ink); text-decoration: none; font: .9rem/1.45 var(--tf-ui); }
.tf-pillar strong { display: block; font-size: 1.02rem; color: var(--tf-teal-dark); margin-bottom: .2rem; }
.tf-pillar:hover { background: var(--tf-amber-pale); color: var(--tf-ink); }

/* footer */
.tf-foot { background: var(--tf-teal-dark); color: #d5e3e0; font: .9rem/1.6 var(--tf-ui); }
.tf-foot__inner { max-width: var(--tf-wide); margin: 0 auto; padding: 2rem 1rem 2.4rem; }
.tf-foot__mark { font: 700 1.25rem/1 var(--tf-ui); color: var(--tf-paper); margin: 0 0 .8rem; }
.tf-foot p { max-width: 42rem; }
.tf-foot a { color: var(--tf-amber-pale); }

@media (max-width: 760px) {
  .tf-cards, .tf-lede { grid-template-columns: 1fr; }
  .tf-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tf-rail a { padding: .55rem .5rem; font-size: .78rem; letter-spacing: .03em; }
  .tf-prose table { display: block; overflow-x: auto; }
}