/* Meatsoil: shared styles for the home page, the log and the 404.
   Built for reading: flat dark ground, one text column, no moving parts. */
/* Fonts, hosted here rather than on Google so nothing outside meatsoil.com
   holds up the first paint. Literata has its optical size fixed at 18
   (it only runs 15 to 21px here), which halves the files. See fonts/ for
   the licences. Latin-ext only downloads if a page uses those letters. */
@font-face {
  font-family: Literata;
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/literata-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Literata;
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/literata-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Literata;
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/literata-italic-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Literata;
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/literata-italic-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Oswald;
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/fonts/oswald-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Oswald;
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/fonts/oswald-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;
  --ground: #111214;
  --ink: #d9d3c7;
  --ink-strong: #ece6da;
  --muted: #8e887e;
  --rule: rgba(217,211,199,.12);
  --blood: #9c3326;
  --blood-lit: #b8402f;
  --link: #de806a;
  --label: Oswald, "Arial Narrow", sans-serif;
}
html {
  background: var(--ground);
}
body {
  margin: 0;
  color: var(--ink);
  font: 400 19px/1.7 Literata, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* the old landing's red underglow, kept faint and up behind the top of the page */
  background: radial-gradient(ellipse 70% 260px at 50% 0, rgba(120,24,18,.22), transparent) no-repeat;
}

/* one column, with a 20px gutter on narrow screens */
.bar, main, footer {
  width: min(100% - 40px, 37.5rem);
  margin: 0 auto;
}

a {
  color: var(--link);
  text-decoration-color: rgba(222,128,106,.4);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition: color .2s, text-decoration-color .2s;
}
a:hover {
  color: #eea08c;
  text-decoration-color: currentColor;
}
a:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 4px;
}

/* The wordmark, drawn inline so it takes the colour of its link */
.wordmark {
  display: block;
  width: 100%;
  height: auto;
}

/* Text for search engines and screen readers that the page shows as a picture */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.nowrap {
  white-space: nowrap;
}

/* Small uppercase labels: dates, quiet links, section names */
.label {
  font: 400 14px/1 var(--label);
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
}
a.label:hover, a.label:focus-visible {
  color: var(--ink);
}

/* Play: a slab of dried blood with a little glow on it */
.play {
  display: inline-block;
  padding: .8em 1.5em .8em 1.74em; /* extra left evens out the letter-spacing */
  font: 500 14px/1 var(--label);
  letter-spacing: .24em;
  text-transform: uppercase;
  text-decoration: none;
  color: #e4dccd;
  background-color: #5e150f;
  border: 1px solid var(--blood);
  border-radius: 2px;
  box-shadow: 0 0 22px rgba(160,42,30,.3), inset 0 1px 0 rgba(255,140,110,.16);
  transition: color .3s, background-color .3s, border-color .3s, box-shadow .3s;
}
.play:hover, .play:focus-visible {
  color: #f3ebdc;
  background-color: #7a1d15;
  border-color: #c04634;
  box-shadow: 0 0 34px rgba(190,50,35,.5), inset 0 1px 0 rgba(255,140,110,.22);
}
.play.big {
  font-size: 16px;
  padding: .95em 2em .95em 2.24em;
}

/* Top bar: wordmark home on the left, Play on the right */
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 0;
}
.home {
  display: block;
  width: clamp(132px, 30vw, 172px);
  color: var(--blood);
  transition: color .3s;
}
.home:hover, .home:focus-visible {
  color: var(--blood-lit);
}

/* Page heading */
.intro {
  padding: clamp(24px, 6vh, 56px) 0 8px;
  border-top: 1px solid var(--rule);
}
h1 {
  margin: 0;
  font: 500 clamp(40px, 9vw, 56px)/1 var(--label);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink-strong);
}
.intro p {
  margin: .6em 0 0;
  color: var(--muted);
}

/* Home: the wordmark large, a line under it, the way in */
.hero {
  padding: clamp(64px, 16vh, 160px) 0 clamp(56px, 12vh, 112px);
  text-align: center;
  /* a dim warm pool around the wordmark */
  background: radial-gradient(ellipse 60% 38% at 50% 34%, rgba(120,24,18,.16), transparent 75%);
}
.hero h1 {
  max-width: 540px;
  margin: 0 auto;
  color: var(--blood);
}
.hero .lede {
  margin: 1.6em auto 0;
  max-width: 34ch;
  font-size: 21px;
  line-height: 1.55;
  color: var(--ink);
  text-wrap: balance;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px 36px;
  margin-top: 40px;
}

/* Home: the latest log entries */
.latest {
  padding: 40px 0 clamp(48px, 9vh, 88px);
  border-top: 1px solid var(--rule);
}
.latest > h2 {
  margin: 0 0 8px;
}
.latest ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.latest li {
  padding: 28px 0;
}
.latest li + li {
  border-top: 1px solid var(--rule);
}
.latest h3 {
  margin: .5em 0 .4em;
  font: 500 26px/1.2 var(--label);
  letter-spacing: .01em;
}
.latest h3 a {
  color: var(--ink-strong);
  text-decoration: none;
}
.latest h3 a:hover {
  color: var(--link);
}
.latest p {
  margin: 0;
  color: #bdb6a9;
}
.latest .more {
  display: inline-block;
  margin-top: 12px;
}

/* Log entries */
.entry {
  padding: clamp(40px, 8vh, 64px) 0;
}
.entry + .entry {
  border-top: 1px solid var(--rule);
}
time {
  font: 400 13px/1 var(--label);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #c4503f;
}
time a {
  color: inherit;
  text-decoration: none;
}
time a:hover {
  text-decoration: underline;
  text-underline-offset: .3em;
}
.entry h2 {
  margin: .5em 0 .9em;
  font: 500 clamp(28px, 5.5vw, 36px)/1.15 var(--label);
  letter-spacing: .01em;
  color: var(--ink-strong);
  text-wrap: balance;
}
.entry h3 {
  margin: 2em 0 .6em;
  font: 500 22px/1.25 var(--label);
  letter-spacing: .02em;
  color: var(--ink-strong);
}
.entry p, .entry ul, .entry ol, .entry blockquote, .entry figure {
  margin: 0 0 1.15em;
}
.entry ul, .entry ol {
  padding-left: 1.3em;
}
.entry li {
  margin-bottom: .35em;
}
.entry li::marker {
  color: var(--blood);
}
.entry strong {
  font-weight: 600;
  color: var(--ink-strong);
}
.entry blockquote {
  padding-left: 1.1em;
  border-left: 2px solid var(--blood);
  font-style: italic;
  color: #bdb6a9;
}
.entry figure img, .entry > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}
.entry figure {
  margin-top: 1.8em;
  margin-bottom: 1.8em;
}
.entry figcaption {
  margin-top: .7em;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}
.entry code {
  font: .85em/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  padding: .15em .35em;
  background: rgba(217,211,199,.08);
  border-radius: 2px;
}
/* A section break drawn as the vent slots on the logo */
.entry hr {
  height: 14px;
  margin: 2.4em 0;
  border: 0;
  background:
    linear-gradient(var(--blood), var(--blood)) calc(50% - 10px) 0 / 4px 100% no-repeat,
    linear-gradient(var(--blood), var(--blood)) 50% 0 / 4px 100% no-repeat,
    linear-gradient(var(--blood), var(--blood)) calc(50% + 10px) 0 / 4px 100% no-repeat;
}

footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding: 32px 0 56px;
  border-top: 1px solid var(--rule);
}
footer nav {
  display: flex;
  gap: 28px;
}

@media (max-width: 480px) {
  body { font-size: 18px; }
  .hero .lede { font-size: 19px; }
}