/* RESET ===================================== */

:root {
  /* -moz-osx-font-smoothing: auto; // Macs no longer do subpixel AA at all */
  /* -webkit-font-smoothing: subpixel-antialiased; // Ditto */
  font-size: 16px;
  /* -moz-osx--text-size-adjust: 100%; // Not a real prefix / property */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* font-smooth: auto; // This is an anti-pattern */
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, main, summary, time, mark, audio, video {
  border: 0;
  font: inherit;
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

/* LOAD FONTS ================================ */

/* Merriweather Serif, for long form body text */

@font-face {
  /* For long form body text */
  font-family: "Merriweather";
  font-weight: 300 900;
  src: url("/static/fonts/merriweather-var.woff2") format("woff2-variations");
  font-display: swap;
}

@font-face {
  /* For asides, caption, nav */
  font-family: "Merriweather Sans";
  font-weight: 300 900;
  src: url("/static/fonts/merriweather-sans-var.woff2") format("woff2-variations");
  font-display: swap;
}

/* Fira Mono, for code, numerical data ------- */

@font-face {
  font-family: "Fira Mono";
  src: url("/static/fonts/fira-mono-400.woff2");
  font-display: swap;
}

@font-face {
  font-family: "Fira Mono";
  font-weight: 500;
  src: url("/static/fonts/fira-mono-500.woff2");
  font-display: swap
}

/* SET FONTS --------------------------------- */

/* Serif, long form text, default rem size */
body {
  font-family: "Merriweather", serif;
}

/* Sans Serif, most other text */
/* TODO: Why header>ul li and not #byline li? */
/* TODO: What's the usage difference between nav and .nav? */
aside, figcaption, nav, header>ul li, h1, h2, h3, h4, h6, blockquote, figure table, .nav {
  font-family: "Merriweather Sans", sans-serif;
  font-weight: 400;
}

/* Monospace */
pre, code {
  font-family: "Fira Mono", monospace;
}

/* GENERAL STYLE ============================= */

body {
  --aside-width: 12.5rem;
  --column-gap: 2rem;
  --padding: 1rem;
  /* align-self: start; // This doesn't make sense — the html element isn't set to flex or grid */
  background-color: #fcfcfc;
  box-sizing: border-box;
  display: grid;
  grid-column-gap: 0;
  grid-template-columns:
    [viewport-start] minmax(0, 1fr)
    [page-start] var(--column-gap)
    [article-start text-start] minmax(auto, calc((var(--aside-width) * 3) + (var(--column-gap) * 2)))
    [text-end] var(--column-gap)
    [margin-start] var(--aside-width)
    [margin-end article-end] var(--column-gap)
    [page-end] minmax(0, 1fr)
    [viewport-end];
  /* padding: 0; // This does nothing */
}

/* Link style -------------------------------- */

a {
  background-image: url("/static/inks/splat-underline-2-default.svg");
  background-size: 100% 4px;
  background-position: bottom;
  background-repeat: no-repeat;
  color: #000;
  padding-bottom: .05rem;
  text-decoration: none;
  -webkit-tap-highlight-color:hsla(1, 76%, 51%, .4);
}

a.plain {
  background-image: none;
  /* Shouldn't these have the padding removed, and some other affordance added? */
}

figcaption a, aside a {
  padding-bottom: 0;
}
nav a {
  background-image: none;
}
a:hover{
  background-image: url("/static/inks/splat-underline-2-hover.svg");
  color: #D70A1B;
}

/* Should these use .outro instead of the less-clear p:last-of-type? */
header p:last-of-type span a {
  background-image: url("/static/inks/splat-underline-1-default.svg");
  padding-bottom: .1rem;
}
header p:last-of-type span a:hover{
  background-image: url("/static/inks/splat-underline-1-hover.svg");
}

/* Separator ----------------------------------- */

hr {
  background: url("/static/inks/splat-separator-1.svg") no-repeat center / 100% 5px;
  padding-top: 1rem;
  margin-top: 3rem;
  margin-bottom: 3rem;

  display: block;
  border: none;
  margin-inline-end: auto;
}

/* Headers ----------------------------------- */

h1 {
  font-size: 2rem;
  font-weight: 300;
  line-height: 2.5rem;
  margin-bottom: 1rem;
}

h2 {
  font-size: 1.5rem;
  line-height: 2rem;
  margin-bottom: 1rem;
  margin-top: 2rem;
}

h3 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  margin: 2rem 0 1rem 0;
}

h4, h6 {
  font-size: 1.1rem;
  margin: 2rem 0 1rem 0;
}

h1+h2, h2+h3 {
  margin: -.5rem 0 1rem 0;
}

/* Text -------------------------------------- */

p, li {
  /* By default, don't use hyphens — current browsers do an awful job of it. */
  /* See the HYPHENS section below for more */
  /* -ms-hyphens: auto; */
  /* -webkit-hyphens: auto; */
  font-size: 1rem;
  /* hyphens: auto; */
  line-height: 1.5rem;
  margin: 0 0 1.5rem 0;
  text-align: justify;
}

small, sup {
  font-size: .8125em;
}

strong {
  font-weight: 700;
}

em {
  font-style: italic;
}

/* sup is unused — consider removing */
sup {
  display: inline-block;
  padding-left: .125rem;
  padding-right: .125rem;
  position: relative;
  top: .125rem;
  vertical-align: top;
  line-height: .75rem;
}
sup a {
  background: none;
  text-decoration: underline;
}
sup a:hover {
  background: none;
  text-decoration: underline;
}

/* Outro <p>, in Header and Conclusion ------- */

header .outro {
  margin-bottom: 0;
}
.outro {
  text-align: left;
}

.outro a {
  border: none;
  -ms-hyphens: none;
  -webkit-hyphens: none;
  hyphens: none;
  white-space: nowrap;
}

.splat {
  background-image: url("/static/inks/splat-span.svg");
  background-position: bottom right;
  background-repeat: no-repeat;
  background-size: 1em;
}

/* The last splat */
.outro span {
  display: inline-block;
  position: relative;

  &::after {
    display: inline-block;
    content: "";
    position: absolute;
    right: -1.3em;
    width: 2.5em;
    height: 2.5em;
    background: url("/static/inks/splat-article-last.svg") no-repeat bottom right;
  }
}

/* @media (prefers-color-scheme: dark) {
  .outro span::after {
    filter: invert(1);
  }
} */


/* HEADER ==================================== */

body>header {
  grid-column: article;
  padding: var(--padding);
  position: relative;
  margin-top: var(--padding);
}

body>header>* {
  padding-right: calc(var(--aside-width) + var(--column-gap) + var(--padding));
}

/* byline ------------------------------------ */

header #byline {
  z-index: 10;
  margin-bottom: 1rem;
  margin-top: -3.5rem;
}

header>#byline li {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-indent: inherit;
  line-height: 1.5rem;
}
header>#byline li::before {
  content:none;
  margin: 0;
  padding: 0;
}

header #byline #logo img {
  display: block;
  margin-left: -2.65rem;
  width: var(--aside-width);
}

/* NAV ======================================= */
/* Table of Contents ------------------------- */

body>nav {
  background-color: #f2f2f2;
  border-radius: calc(var(--padding)/4);
  display: grid;
  grid-column: page;
  grid-template-columns:
    var(--column-gap)
    [article-start nav-start] minmax(auto, calc((var(--aside-width) * 3) + (var(--column-gap) * 2)))
    [nav-end] var(--column-gap)
    [margin-start] var(--aside-width)
    [article-end] var(--column-gap);
  margin-top: calc(var(--padding) * 2);
  padding: 0;
  padding: var(--padding) 0 var(--padding) 0;
  position: relative;
}

body>nav h2 {
  grid-column: article;
  margin-bottom: 0;
  margin-top: 1rem;
}

body>nav>div {
  grid-column: nav;
  padding: var(--padding);
  padding-bottom: 0;
}

body>nav>div:last-child {
  padding: var(--padding);
}

body>nav>h2 {
  padding: 0 var(--padding) 0 var(--padding);
}

body>nav>div h3 {
  margin-top: 0;
}

body>nav li {
  line-height: 1.5rem;
  margin-bottom: 0;
  -ms-hyphens: manual;
  -webkit-hyphens: manual;
  hyphens: manual;
  text-align: left;
}

body>nav ul,
body>nav ol {
  margin-bottom: 0;
}

body>nav li ul {
  margin-bottom: 0rem;
  margin-top: 0rem;
}

/* ARTICLE =================================== */

body>article {
  grid-column: article;
  margin-bottom: 6rem;
  padding: var(--padding);
  position: relative;
}
body>article>* {
  padding-right: calc(var(--aside-width) + var(--column-gap) + var(--padding));
}
body>article>section {
  margin-bottom: 3rem;
  padding-right: var(--padding);
}

/* Blockquotes ------------------------------- */

blockquote {
  -ms-hyphens: none;
  -webkit-hyphens: none;
  border-left: .2rem solid #f2f2f2;
  hyphens: none;
  line-height: 1.5rem;
  margin-bottom: 1rem;
  padding: 1rem 0 1rem .8rem;
}

blockquote, blockquote>* {
  -ms-hyphens: none;
  -webkit-hyphens: none;
  font-size: 1rem;
  font-weight: 300;
  hyphens: none;
  line-height: 1.5rem;
}
blockquote cite {
  white-space: nowrap;
}

blockquote footer {
  font-weight: 200;
}

blockquote footer::before {
  content: "– "
}
blockquote p:last-child {
  margin-bottom: 0;
}

/* Lists ------------------------------------- */

ul, ol {
  margin-bottom: 1.5rem;
  margin-left: 1.3em;
}

ul {
  list-style-type: square;
}
ol {
  list-style-type: decimal;
}

li {
  margin-bottom: .5rem;
  white-space: normal;
}

li h3, li h4 {
  display: inline;
  font-size: inherit;
}
li ul {
  margin-top: .5rem;
}


/* FIGURES =================================== */

img {
  max-width: 100%;
}

figure {
  margin-bottom: var(--padding);
  margin-right: calc(var(--padding)*-1);
  padding-right: calc(var(--aside-width) + var(--column-gap) + var(--padding));
  position: relative;
  border-radius: calc(var(--padding)/4);
}

/* This is a hack, overriding the body>article>* and body>header>* rules, to fix images appearing wider than the text that surrounds them */
body > header > figure,
body > article > figure {
  padding-right: calc(var(--aside-width) + var(--column-gap) + var(--padding) * 2);
}

p img, figure img, figure video {
  /* -moz-box-sizing: border-box; // These don't need prefixes */
  /* -webkit-box-sizing: border-box; */
  border: 1px solid #f2f2f2;
  box-sizing: border-box;
}

figure video {
  width: 100%;
}

figcaption {
  background-color: #f2f2f2;
  margin-right: 0;
  top: 0;
}

p.border-none img, figure.border-none img, figure.border-none video {
  border-style: none;
  border-width: none;
}

/* Code -------------------------------------- */

code {
  background-color: #f2f2f2;
  border-radius: calc(var(--padding)/4);
  font-size: .8125rem;
  padding: .125rem;
  z-index: -1;
}

code span {
  color: #7c7c7c;
  /* font-style: italic; // This seems like a bad idea — it made all the code blocks in the Crosscut essay italic. */
}

figure>pre {
  background-color: #020202;
  border-radius: calc(var(--padding)/4);
  box-sizing: border-box;
  color: #f2f2f2;
  display: block;
  font-family: "Fira Mono", monospace;
  font-size: .8125rem;
  line-height: 1.5rem;
  max-width: 100%;
  overflow: auto;
  padding: var(--padding);
  white-space: pre-wrap;
}

figure>pre code {
  background: transparent;
}

figure>code::selection {
  background-color: #D70A1B;
}

figcaption code, table code {
  background-color: hsla(360, 100%, 0%, 0.05);
}

pre,
.pre {
  overflow-x: auto;
  overflow-y: hidden;
}

pre code {
  display: block;
  padding: 1.5em 1.5em;
  white-space: pre;
  font-size: 0.875rem;
  line-height: 2;
}

pre {
  background-color: #222;
  color: #ddd;
  white-space: pre;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  position: relative;
}

/* figure utility classes -------------------- */

figure .grid {
  display: grid;
  grid-column-gap: var(--padding);
  grid-row-gap: var(--padding);
  padding-bottom: 1rem;

}

figure .grid>* {
  display: block;
  grid-column: auto;
  width: auto;
}

figure .grid-columns-2 {
  grid-template-columns: repeat(2, 1fr);
}

figure .grid-columns-3 {
  grid-template-columns: repeat(3, 1fr);
}

figure .grid-columns-4 {
  grid-template-columns: repeat(4, 1fr);
}
figure .grid-columns-5 {
  grid-template-columns: repeat(5, 1fr);
}
figure .grid-columns-6 {
  grid-template-columns: repeat(6, 1fr);
}
figure .grid:last-of-type {
  padding-bottom: 0;
}

/* Tables ------------------------------------ */

figure table {
  border: 1px solid #f2f2f2;
  border-collapse: separate;
  border-radius: calc(var(--padding)/4);
  border-spacing: 0;
  box-sizing: border-box;
  text-align: left;
  width: 100%;
}

figure table tr:nth-child(even) {
  background-color: #fcfcfc;
}

figure table tr:nth-child(odd) {
  background-color: #f2f2f2;
}

figure table th,
figure table td,
figure table td p,
figure table td li
{
  text-align: left;
}

figure table th {
  font-weight: 700;
}

figure table th,
figure table td {
  border-right: 1px solid #f2f2f2;
  font-family: "Merriweather Sans", sans-serif;
  font-size: .8125rem;
  padding: 1rem !important;
  width: auto;
}

figure table th:first-of-type,
figure table td:first-of-type {
  padding-left: 0;
}

figure table th:last-of-type,
figure table td:last-of-type {
  border-right: none;
  padding-right: 0;
}

figure table p {
  font-size: .8125rem;
  line-height: 1.25rem;
  margin-bottom: .5rem;
}

figure table p:last-of-type {
  margin: 0;
}

figure table svg {
  background-color: hsla(360, 100%, 0%, 0.05);
  max-width: 100%;
}

figure table svg rect {
  fill: hsla(360, 100%, 0%, 1);
}

/* table utility classes */

figure table.scorecard th strong {
  display: block;
}
table .good {
  color: #22aa22;
  font-weight: bold;
  font-size: 1.25rem;
}
table .okay {
  color: #ff8800;
  font-weight: bold;
  font-size: 1.25rem;
}
table .poor {
  color: #aa2222;
  font-weight: bold;
  font-size: 1.25rem;
}
figure table.scorecard tr td:first-child,
figure table.scorecard tr th {
  white-space: nowrap;
}
figure table.scorecard th,
figure table.scorecard td,
figure table .align-center, /* This is suspect — it's probably a typo, but it's also redundant with the below */
figure table.align-center td,
figure table.align-center th {
  text-align: center;
}
figure table.row-highlight-off td {
  border-bottom: 1px solid #f2f2f2;
}

figure table.row-highlight-off tr:last-child td {
  border-bottom: none;
}

figure table.row-highlight-off tr:nth-child(even),
figure table.row-highlight-off tr:nth-child(odd) {
  background-color: #fcfcfc;
}

figure table.row-highlight-off th {
  background-color: #f2f2f2;
}

figure table .column-number {
  font-family: "Fira Mono", monospace;
  font-variant-numeric: slashed-zero tabular-nums;
  text-align: right;
  white-space: nowrap;
}

figure table.column-width-eigth td,
figure table.column-width-eigth th,
figure table .column-width-eigth {
  width: 12.5%;
}

figure table.column-width-quarter td,
figure table.column-width-quarter th,
figure table .column-width-quarter {
  width: 25%;
}

figure table.column-width-third td,
figure table.column-width-third th,
figure table .column-width-third {
  width: 33.3333%;
}

figure table.column-width-half td,
figure table.column-width-half th,
figure table .column-width-half {
  width: 50%;
}
figure table.column-width-auto td,
figure table.column-width-auto th,
figure table .column-width-auto {
  width: auto;
}

figure table .column-width-text {
  white-space: nowrap;
}


/* ASIDES ==================================== */

article aside, figcaption, header>#byline {
  --aside-offset: 1rem - 0.21rem; /* The 0.21rem is a tweak to make the baseline of the aside match the baseline of the adjacent paragraph */
  --aside-offset-lineheight: 1.5rem;
  box-sizing: border-box;
  margin-bottom: calc(var(--padding) * 2);
  padding: var(--padding);
  position: absolute;
  right: 0;
  width: var(--aside-width);
}

aside, figcaption, figure img, figure video, article p>img {
  border-radius: calc(var(--padding)/4);
  max-width: 100%;
}

aside, aside>*, aside li, #byline, #byline li, figcaption, figcaption>*, blockquote footer, blockquote cite {
  font-size: 0.8125rem;
  -ms-hyphens: none;
  -webkit-hyphens: none;
  hyphens: none;
  line-height: 1.25rem;
  margin-bottom: 0.5rem;
  text-align: left;
}

aside h4, aside h3, figcaption h4, figcaption h3 {
  font-weight: 700;
  letter-spacing: 0.15ch;
  margin-bottom: 0.25rem;
  margin-top: 0;
  text-transform: uppercase;
}

aside code {
  line-height: inherit;
  padding: .125rem;
}

figcaption code, table code {
  line-height: inherit;
  padding: .125rem;
  white-space: nowrap;
}

aside p:last-child, aside li:last-child, figcaption p:last-child {
  margin-bottom: 0;
}



/* when asides come before content, they need slight nudging */

h2 + aside, h3 + aside {
  margin-top: -.8125rem;
}

/* when an aside is used in the middle of a list, it creates a gap that we must close */
ul + aside + ul {
  margin-top: -1em;
}

/* aside and figcaption callout -------------- */
.callout, .wide figcaption, .wide aside {
  float: none;
  margin-bottom: .5rem;
  margin-top: -1rem;
  width: 100%;
  position: relative;
  right: inherit;
}
figure .callout {
  border-radius: calc(var(--padding)/4) calc(var(--padding)/4) 0 0;
  margin-bottom: -.125rem;
}

/* when figcaptions come after content, they need different borders */

* + .callout {
  border-radius: 0 0 calc(var(--padding)/4) calc(var(--padding)/4);
  margin-top: -.125rem;
}

/* aside and figcaption nudge ---------------- */

/* using these can cause overlapping of elements. if you apply to one aside, you may need to apply and adjust other that precede clearing the blocks figcaption or section  */

.move-up {
  margin-top: calc((var(--aside-offset) + (var(--aside-offset-lineheight)*var(--move-up)))/-1);
}

/* Wide Content ------------------------------ */

.wide, .wide * {
  padding: 0;
}
.wide {
  overflow-x: auto;
}
.wide aside, .wide figcaption, .wide>pre+figcaption {
  border-radius: none;
  margin: 0;
  padding: var(--padding);
  position: relative;
  right: inherit;
  top: inherit;
  width: auto;
}

.wide figcaption {
  border-radius: 0 0 calc(var(--padding)/4) calc(var(--padding)/4) !important;
  margin-bottom: 1rem;
  position: relative;
  right: inherit;
  top: inherit;
}

.wide figcaption:first-child, .wide table+figcaption, .wide .grid+figcaption {
  border-radius: calc(var(--padding)/4) calc(var(--padding)/4) !important;
  margin-top: 1rem !important;
}
.wide figure, .wide > img {
  width: 100%;
}

/* =========================================== */
/* HYPHENATION =============================== */
/* =========================================== */

/* Ideally, p and li would use hyphens to break long words. */
/* But browser support for automatic hyphenation is terrible, so by default we don't use it. */

/* Safari supports a few non-standard hyphenation properties, so we'll enable hyphens if they exist. */
@supports (-webkit-hyphenate-limit-before: 4) {
  p, li {
    -webkit-hyphens: auto;
    hyphens: auto;
    -webkit-hyphenate-limit-before: 4;
    -webkit-hyphenate-limit-after: 4;
  }

  /* In asides, the hyphens are a bit much */
  aside p {
    -webkit-hyphens: none;
    hyphens: none;
  }
}

/* Once browser support lands for CSS Text Module Level 4, that should allow for much richer configuration */
@supports (-webkit-hyphenate-limit-chars: 6 4 4) or
          (-moz-hyphenate-limit-chars: 6 4 4) or
          (hyphenate-limit-chars: 6 4 4) {
  p, li {
    -webkit-hyphens: auto;
    hyphens: auto;
    -webkit-hyphenate-limit-chars: 6 4 4;
    -webkit-hyphenate-limit-lines: 1;
    -webkit-hyphenate-limit-last: always;
    -webkit-hyphenate-limit-zone: 8%;
    -moz-hyphenate-limit-chars: 6 4 4;
    -moz-hyphenate-limit-lines: 1;
    -moz-hyphenate-limit-last: always;
    -moz-hyphenate-limit-zone: 8%;
    hyphenate-limit-chars: 6 4 4;
    hyphenate-limit-lines: 1;
    hyphenate-limit-last: always;
    hyphenate-limit-zone: 8%;
  }
}

/* =========================================== */
/* RESPONSIVE LAYOUT ========================= */
/* =========================================== */

/* smaller viewports ------------------------- */

@media only screen and (max-width: 40rem) {
  .move-up-1, .move-up-2, .move-up-3, .move-up-4, .move-up-5, .move-up-6, .move-up-7, .move-up-8, .move-up-9, .move-up-10, .move-up-11, .move-up-12, .move-up-13, .move-up-14, .move-up-15, .move-up-16, .move-up-17, .move-up-18, .move-up-19, .move-up-20, .move-up-21, .move-up-22, .move-up-23, .move-up-24, .move-up-25 {
    margin-top: auto;
  }

  body {
    grid-template-columns:
      [viewport-start page-start] var(--column-gap)
      [article-start text-start] 1fr
      [text-end] var(--column-gap)
      [margin-start] var(--aside-width)
      [article-end] var(--column-gap)
      [page-end viewport-end];
    padding-top: 1rem;
  }

  body>article>*, body>header>* {
    padding-right: 0;
  }

  /* This undoes the hack, overriding the body>article>* and body>header>* rules, to fix images appearing wider than the text that surrounds them */
  body > header > figure,
  body > article > figure {
    padding-right: 0;
    margin-right: 0;
  }

  /* Now that we've switched to a 1-column layout, we don't need justification. */
  p, li {
    text-align: left;
  }

  header>ul#byline {
    display: block;
    margin: 0;
    margin-top: -1.5rem;
    padding-bottom: 1.5rem !important;
    padding: 0;
    clear: both;
  }

  header>#byline li:first-child {
    margin-block: 2rem .5rem;
  }

  header #byline #logo img {
    margin-left: -0.75rem;
    width: 9rem;
  }

  article figure {
    border-radius: 0 0 calc(var(--padding)/4) calc(var(--padding)/4) !important;
    margin-right:0;
    overflow-x: scroll;
    overflow-y: hidden; /* Fix for vertical scrollbars appearing on narrow screens, even when there's no height constraint */
    width: auto;
  }

  article aside, figure figcaption, figure>pre+figcaption, header>#byline {
    border-radius: none;
    margin: 0;
    position: relative;
    right: inherit;
    top: inherit;
    width: auto;
  }

  figure figcaption {
    border-radius: 0 0 calc(var(--padding)/4) calc(var(--padding)/4) !important;
    margin-bottom: 1rem;
    margin-top: -.5rem !important;
    position: relative;
    right: inherit;
    top: inherit;
  }
  figure.border-none figcaption {
    border-radius: calc(var(--padding)/4) !important;

    margin-top: .5rem !important;
  }

  article aside {
    background-color: #f2f2f2;
    /* TODO: Figure out how to avoid the !important */
    margin-top: -1em!important;
    margin-bottom: 1em;
    padding: var(--padding);
  }

  /* undoes the above fix: when an aside is used in the middle of a list, it creates a gap that we must close */
  ul + aside + ul {
    margin-top: 0;
  }

  figure figcaption:first-child, article table+figcaption, figure .grid+figcaption {
    border-radius: calc(var(--padding)/4) calc(var(--padding)/4) !important;
    margin-top: 1rem !important;
  }
  article h2#appendix {
    margin-right: 0;
  }
  article figure table,
  article figure table td,
  article figure table th {
    width: auto;
    overflow: auto;
  }
  article figure table td,
  article figure table th {
    position: sticky;
  }

  article ul li{
    text-align: left;
  }
  .wide {
    width: calc(100vw - calc(var(--padding) * 3));
  }
}

/* 812px ------------------------------------- */

@media only screen and (max-width: 812px) {
  body {
    background-color: #fcfcfc;
    padding: 0;
  }
  body>nav {
    border-radius: 0;
  }
}

/* 768px ------------------------------------- */

@media only screen and (max-width: 768px) {
  body {
    grid-template-columns:
      [viewport-start page-start] minmax(0, var(--padding))
      [article-start text-start] 1fr
      [text-end] var(--column-gap)
      [margin-start] var(--aside-width)
      [margin-end article-end]
      minmax(0, var(--padding))
      [page-end viewport-end];
  }
  body>nav {
    background-color: #f2f2f2;
    border-radius: 0;
    display: grid;
    grid-column: page;
    grid-template-columns:
      minmax(0, var(--padding))
      [article-start nav-start] 1fr
      [nav-end] var(--column-gap)
      [margin-start] var(--aside-width)
      [margin-end article-end]
      minmax(0, var(--padding));
    margin-top: 2rem;
    padding: 0;
  }
  .wide {
    width: calc(100vw - calc(var(--padding) * 3));
  }
}

/* 480px ------------------------------------- */

@media only screen and (max-width: 480px) {
  body {
    grid-template-columns:
      [viewport-start page-start] 0
      [article-start text-start] 1fr
      [text-end] var(--column-gap)
      [margin-start] var(--aside-width)
      [margin-end article-end] 0
      [page-end viewport-end];
  }
  body>nav {
    background-color: #f2f2f2;
    border-radius: 0;
    display: grid;
    grid-column: page;
    grid-template-columns:
      [article-start nav-start] 1fr
      [nav-end] var(--column-gap)
      [margin-start] var(--aside-width)
      [margin-end article-end];
    padding: 0;
  }
  body>nav div {
    grid-column: article;
  }
  blockquote {
    padding: calc(var(--padding)/4);
  }
  .wide {
    width: calc(100vw - calc(var(--padding) * 2));
  }
}

/* iPad Pro ---------------------------------- */

@media only screen and (min-width: 834px) and (max-height: 1194px) and (-webkit-min-device-pixel-ratio: 2) {
  nav {
    border-radius: 0;
  }
}

/* Print ---------------------------------- */


@media print {
  :root {
    font-size: 9pt;
    box-sizing: border-box;
    float: none;
  }

  @page {
    margin: 2cm 1cm 2cm 2cm; /* less page margin on the right, so asides have space */
  }

  /**********************************************************
  * Layout.
  **********************************************************/

  /* page-break properties don't work inside of CSS Grid. */
  body {
    display: block;
    /* Enable background image printing for the entire document */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    forced-color-adjust: exact; /* For Windows high contrast mode */
  }

  body > header,
  body > article {
    width: 95%;
    margin: 0;
    position: relative;
  }

  /* Use single-column layout with space for marginalia */
  body > article > * {
    padding-right: calc(var(--aside-width) + 0.4cm); /* Reserve space for asides with extra room */
  }

  /* Paragraph styling for print - traditional indented paragraphs with no extra spacing */
  article p, header p {
    text-indent: 1.5em; /* Add paragraph indentation */
    margin-bottom: 0; /* Remove bottom margin between paragraphs */
  }

  /* First paragraph after headings traditionally doesn't get indented */
  article h1 + p,
  article h2 + p,
  article h3 + p,
  article h4 + p,
  article figcaption p,
  article aside p {
    text-indent: 0;
  }

  /* Add some space after sections but not between regular paragraphs */
  article h1, article h2, article h3, article h4 {
    margin-bottom: 0.6em;
    margin-top: 1.2em;
  }

  /* Ensure headings don't break across pages */
  article h1, article h2, article h3, article h4 {
    break-inside: avoid;
  }

  /* Ensure figures don't break across pages */
  article figure, article blockquote, article pre, article .highlight, header figure {
    break-inside: avoid;
    margin-top: 0.8em;
    margin-bottom: 0.8em;
  }

  /* Position asides on the right as marginalia */
  header > #byline,
  figcaption {
    position: absolute; /* Restore absolute positioning */
    right: 0;
    width: var(--aside-width);
    break-inside: avoid;
  }

  /*
    Something about asides breaks in FF when printed.
    They act as if they have `top: 0` set, even though they don't.
    Weirdly this only breaks asides, not figcaptions.
    Also, devtools print preview doesn't repro, you gotta do a real print preview.
    Ivan attempted to fix this with floats, but .move-up would push the aside
    across the page break and, in FF, some of the aside would vanish entirely.
    The only known fix is to keep asides in the main flow, like we do on mobile. Sigh.
  */
  article aside {
    position: static;
    margin: 1rem calc(var(--aside-width) + 0.4cm) 1rem 0!important;
    width: auto!important;
    padding: 1rem;
    background: #eee;
  }

  /**********************************************************
  * Minor styling overrides.
  **********************************************************/

  header > #byline {
    margin-top: -2rem;
  }

  /* Links styling for print - try to preserve background image underlines */
  a {
    /* Preserve the background image underlines */
    background-size: 100% 2px !important; /* Slightly thinner for print */
    padding-bottom: .05rem !important;
  }

  /* Let figures and tables span the full width when needed */
  /* .wide {
    padding-right: 0 !important;
  } */
   figure.wide {
     padding-right: calc(var(--aside-width) + var(--column-gap) + var(--padding));
   }

  /**********************************************************
  * Page breaks.
  **********************************************************/

  #table_of_contents {
    break-before: always;
  }

  article figure,
  article figcaption,
  article aside,
  article img,
  article blockquote,
  article pre {
    break-inside: avoid;
  }

  article h1,
  article h2,
  article h3,
  article h4 {
    break-after: avoid;
  }

  /**
  * Hack to keep header and content together.
  */
  article h1::before,
  article h2::before,
  article h3::before,
  article h4::before {
    content: "";
    display: block;
    height: 5rem;
    margin-bottom: -5rem;
    break-inside: avoid;
  }

  /* Ensure URL display for print */
  @page {
    @bottom-right {
      content: '';
    }
  }
}

/* NEWSLETTER */

.newsletter {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}

.newsletter form {
  margin-bottom: 0.5rem;
}

.newsletter input {
  font-size: 1rem;
  font-family: "Merriweather Sans", sans-serif;
  padding: 0.5rem;
  border: 1px solid #000;
}

.newsletter input[type="submit"] {
  border: none;
  color: #fff;
  background: #000;
}

/* DARK MODE */

/* @media (prefers-color-scheme: dark) {
  body {
    color: hsl(0 0 90);
    background: hsl(0 0 10);
  }

  aside, aside {
    color: hsl(0 0 80);
  }

  hr,
  #logo img,
  a:not(:hover) {
    filter: invert(1);
  }

  #table_of_contents,
  figcaption { background: hsl(0 0 14); }

  p img, figure img, figure video {
    border-color: hsl(0 0 20);
  }

  figure img, figure video {
    background: #fcfcfc;
  }

  code {
    background-color: #0c0c0c;
  }

  * Fix a link to "yarn" in Cambria, which shouldn't be a link *
  a code {
    background-color: #f2f2f2;
  }

  figure table {
    border-color: hsl(0 0 13);
  }

  figure table tr:nth-child(odd) {
    background: hsl(0 0 13);
  }

  figure table tr:nth-child(even) {
    background: hsl(0 0 10);
  }

  figure table th, figure table td {
    border-color: hsl(0 0 13);
  }

  figure table.row-highlight-off td {
    border-bottom-color: hsl(0 0 13);
  }

  figure table.row-highlight-off tr:nth-child(even),
  figure table.row-highlight-off tr:nth-child(odd) {
    background-color: hsl(0 0 10);
  }

  figure table.row-highlight-off th {
    background-color: hsl(0 0 13);
  }
} */

.newsletter-form {
  display: flex;
  margin-top: 1.3rem;
  margin-bottom: 3rem;
  border: 2px solid currentColor;
  border-radius: 8px;
  font-family: 'Merriweather Sans', sans-serif;
  color: #999;
  overflow: visible;

  &:focus-within {
    border-color: black;
    outline: none;
  }
}

.newsletter-form label {
  flex: 1 1 100%;
  position: relative;
}

.newsletter-form label::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 6px;
  left: -4px;
  background-image: url("/static/inks/x.svg");
  width: 24px;
  height: 38px;
}

.newsletter-form label:focus-within::after {
  opacity: .5;
}

.newsletter-form label span {
  display: inline-block;
  position: absolute;
  top: -.8em;
  left: .8em;
  padding: 0 .5em;
  color: currentColor;
  background: #fcfcfc;
}

.newsletter-form label:hover span,
.newsletter-form label:focus-within span {
  color: black;
}

.newsletter-form input {
  border: none;
  font-size: 1em;
  font-family: 'Merriweather Sans', sans-serif;
  background: none;
}

.newsletter-form input[type="email"] {
  width: 100%;
  padding: 0.7rem 0 .7rem 1.2rem;

  &:focus, &:focus-within {
    outline: 2px solid black;
    outline-offset: 0px;
    border-radius: 6px 0 0 6px;
  }
}

.newsletter-form input[type="submit"] {
  flex: 0 0 auto;
  padding: .5rem;
  border-left: 2px solid #999;
  color: inherit;
  cursor: pointer;

  &:hover { color: #000 }

  &:focus {
    color: #000;
    outline: none;
    border-color: black;
  }
}