/* ==========================================================================
   The Problem of the Plain Style
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400;1,8..60,500;1,8..60,600&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  --paper: #f2f2f0;
  --paper-2: #e6e6e3;
  --paper-3: #d9d9d6;
  --paper-edge: #cfcfcb;
  --ink: #242422;
  --ink-2: #4d4d4a;
  --ink-3: #7a7a77;
  --ink-4: #b2b2ae;
  --sage: #8fa891;
  --sage-ink: #5c7a63;
  --sage-wash: #dae3d9;
  --rust: #a8613a;
  --plum: #6b4a6a;
  --dash-color: var(--ink-3);

  --serif-display:
    "Source Serif 4", "Source Serif Pro", "Charter", Georgia, serif;
  --serif-text: var(--serif-display);
  --sans-ui:
    "IBM Plex Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}


body {
  color: var(--ink);
  font-family: var(--serif-text);
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings:
    "onum" 1,
    "liga" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--sage-wash);
  color: var(--ink);
}

/* ---------- Layout ------------------------------------------------------ */
.layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 260px;
  gap: 0 56px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 40px 160px;
  align-items: start;
}

/* ---------- Masthead / top bar ----------------------------------------- */
.masthead {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 96px;
  padding-bottom: 18px;
}
.masthead__mark {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.masthead__meta {
  font-family: var(--sans-ui);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.masthead__meta span + span::before,
.masthead__meta a.masthead__home + span::before {
  content: " · ";
  color: var(--ink-4);
  margin: 0 6px;
}
.masthead__meta a.masthead__home {
  text-decoration: none;
  color: var(--ink-3);
}
.masthead__meta a.masthead__home:hover {
  color: var(--ink);
}
.masthead__actions {
  display: flex;
  gap: 14px;
  align-items: baseline;
}

/* ---------- Buttons ---------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  font-family: var(--sans-ui);
  font-size: 12px;
  letter-spacing: 0.04em;
  font-weight: 500;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink-3);
  border-radius: 1px;
  cursor: pointer;
  transition:
    background 120ms ease,
    color 120ms ease,
    border-color 120ms ease;
  text-decoration: none;
}
.btn:hover {
  background: var(--paper-2);
  border-color: var(--ink-2);
  color: var(--ink);
}
.btn:active {
  background: var(--paper-3);
}
.btn--accent {
  color: var(--paper);
  background: var(--sage-ink);
  border-color: var(--sage-ink);
}
.btn--accent:hover {
  background: var(--sage);
  border-color: var(--sage);
  color: var(--paper);
}
.btn--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--ink-2);
  padding-left: 6px;
  padding-right: 6px;
}
.btn--ghost:hover {
  background: var(--paper-2);
  color: var(--ink);
}

.btn .glyph {
  font-family: var(--serif-display);
  font-size: 14px;
  line-height: 1;
}

/* ---------- TOC (left rail) -------------------------------------------- */
.toc {
  position: sticky;
  top: 40px;
  font-family: var(--sans-ui);
  font-size: 12px;
  color: var(--ink-2);
  padding-right: 8px;
  align-self: start;
}
.toc__byline {
  font-family: var(--sans-ui);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  margin: 0 0 22px;
}
.toc__label {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 14px;
}
.toc__rule {
  border-top: 1px dashed var(--dash-color);
  width: 36px;
  margin-bottom: 14px;
}
.toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.toc__item {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 6px;
  padding: 8px 0;
  color: var(--ink-3);
  border: 0;
  cursor: pointer;
  background: transparent;
  text-align: left;
  width: 100%;
  font-family: var(--sans-ui);
  font-size: 12.5px;
  line-height: 1.35;
  border-left: 1px solid transparent;
  padding-left: 10px;
  margin-left: -10px;
  transition:
    color 120ms ease,
    border-color 120ms ease;
}
.toc__item:hover {
  color: var(--ink);
}
.toc__num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-4);
}
.toc__title em {
  font-style: italic;
}
.toc__item.is-active {
  color: var(--ink);
  border-left-color: var(--sage-ink);
}
.toc__item.is-active .toc__num {
  color: var(--sage-ink);
}

.toc__progress {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px dashed var(--dash-color);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  display: flex;
  gap: 8px;
  align-items: center;
}
.toc__progress-bar {
  flex: 1;
  height: 1px;
  background: var(--ink-4);
  position: relative;
  overflow: hidden;
}
.toc__progress-fill {
  position: absolute;
  left: 0;
  top: -1px;
  height: 3px;
  background: var(--sage-ink);
  width: 0%;
  transition: width 60ms linear;
}

/* ---------- Main column ------------------------------------------------ */
.paper {
  min-width: 0;
  max-width: 42rem;
  justify-self: center;
}

.title-block {
  margin-bottom: 72px;
}
.title-block__kicker {
  font-family: var(--sans-ui);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 16px;
}
.title-block__title {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: clamp(2.6rem, 5vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.012em;
  margin: 0 0 28px;
  text-wrap: balance;
}
.title-block__title em {
  font-style: italic;
}
.title-block__ornament {
  font-family: var(--serif-display);
  font-size: 20px;
  color: var(--ink-3);
  margin: 0 0 24px;
  letter-spacing: 0.4em;
}
.title-block__sub {
  font-family: var(--serif-text);
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0 0 20px;
  max-width: 34rem;
}
.title-block__byline {
  font-family: var(--sans-ui);
  font-size: 16px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}

/* ---------- Chapter headers ------------------------------------------- */
.chapter {
  scroll-margin-top: 32px;
  margin-top: 80px;
}
.chapter:first-of-type {
  margin-top: 0;
}

.chapter__mark {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 80px 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--dash-color);
}
.chapter:first-of-type .chapter__mark {
  margin-top: 0;
}
.chapter__roman {
  font-family: var(--serif-display);
  font-size: 48px;
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
}
.chapter__kicker {
  font-family: var(--sans-ui);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-left: auto;
}
.chapter__title {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: 2.1rem;
  line-height: 1.15;
  letter-spacing: -0.008em;
  margin: 14px 0 32px;
}
.chapter__title em {
  font-style: italic;
}
.chapter__note {
  font-family: var(--serif-text);
  font-style: italic;
  color: var(--ink-3);
  font-size: 15px;
  margin: 6px 0 40px;
}
.chapter__epigraph {
  margin: 32px 0 48px;
  padding: 4px 0 4px 22px;
  border-left: 1px dashed var(--dash-color);
  max-width: 34rem;
}
.chapter__epigraph-text {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0 0 10px;
}
.chapter__epigraph-attr {
  font-family: var(--sans-ui);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  text-transform: uppercase;
}

/* ---------- Body prose ------------------------------------------------- */
.prose p {
  margin: 0 0 18px;
  text-wrap: pretty;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.prose em {
  font-style: italic;
}
.prose p + p {
  text-indent: 1.6em;
}
.prose section + section {
  margin-top: 20px;
}
.prose section[data-first] + section p:first-child {
  text-indent: 1.6em;
}

/* first paragraph of first section of first chapter gets drop cap */
.chapter--first .prose section:first-child p:first-of-type::first-letter {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: 5.2em;
  line-height: 0.85;
  float: left;
  padding: 6px 10px 0 0;
  color: var(--ink);
}
.chapter--first .prose section:first-child p:first-of-type {
  text-indent: 0;
}
.prose section > p:first-child {
  text-indent: 0;
}

.prose__section-mark {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-3);
  margin: 40px 0 10px;
  text-align: center;
  letter-spacing: 0.2em;
}

.prose blockquote {
  margin: 22px 0 22px 0;
  padding: 4px 0 4px 22px;
  border-left: 1px dashed var(--dash-color);
  font-family: var(--serif-text);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 36rem;
}
.prose blockquote p {
  margin: 0 0 12px;
  text-indent: 0;
}
.prose blockquote p:last-child {
  margin-bottom: 0;
}

.prose ol.rules {
  list-style: none;
  padding: 0;
  margin: 18px 0 24px 0;
  font-family: var(--serif-text);
  font-size: 16.5px;
  color: var(--ink);
  max-width: 36rem;
}
.prose ol.rules li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--dash-color);
  font-style: italic;
}
.prose ol.rules li:last-child {
  border-bottom: 0;
}
.prose ol.rules .rule-num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
  font-style: normal;
  padding-top: 3px;
}

/* footnote refs (inline) */
.fnref {
  display: inline;
  color: var(--sage-ink);
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 0 1px;
  font-family: var(--serif-text);
  text-decoration: none;
}
.fnref sup {
  font-family: var(--sans-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  vertical-align: super;
  line-height: 0;
}
.fnref:hover sup {
  color: var(--ink);
}
.fnref.is-active sup {
  color: var(--rust);
}

/* author-note refs */
.anref {
  display: inline;
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 0;
  vertical-align: baseline;
  font-size: inherit;
  color: inherit;
}
.anref__marker {
  font-family: var(--serif-text);
  font-size: 0.9em;
  vertical-align: super;
  line-height: 0;
  color: var(--rust);
}
.anref:hover .anref__marker {
  color: var(--ink);
}

/* Mobile aside drawer */
.an-drawer {
  display: none;
}

/* ---------- Right rail: sidenotes -------------------------------------- */
.rail {
  position: relative;
  font-family: var(--sans-ui);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
  min-height: 100%;
}
.sidenote {
  position: absolute;
  left: 0;
  right: 0;
  padding: 8px 0 8px 0;
  transition: opacity 150ms ease;
}
.sidenote__head {
  font-family: var(--sans-ui);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.sidenote__num {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--sage-ink);
  letter-spacing: 0;
}
.sidenote__num--an {
  color: var(--rust);
}
.sidenote__body {
  border-top: 1px dashed var(--dash-color);
  padding-top: 6px;
  color: var(--ink-2);
}
.sidenote__body em {
  font-style: italic;
}

/* hover highlight */
.fnref.is-hover sup {
  color: var(--ink);
}
.sidenote.is-hover .sidenote__body {
  color: var(--ink);
}
.sidenote.is-hover .sidenote__num {
  color: var(--rust);
}

/* ---------- Footnotes page -------------------------------------------- */
.notes {
  margin-top: 120px;
  padding-top: 24px;
  border-top: 1px dashed var(--dash-color);
  scroll-margin-top: 32px;
}
.notes__kicker {
  font-family: var(--sans-ui);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.notes__title {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 500;
  font-size: 2rem;
  margin: 0 0 32px;
}
.notes ol {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 1;
  font-family: var(--sans-ui);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.notes ol li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--paper-edge);
  scroll-margin-top: 32px;
}
.notes__num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  padding-top: 1px;
}
.notes__body em {
  font-style: italic;
}
.notes__back {
  border: 0;
  color: var(--sage-ink);
  font-family: var(--serif-display);
  font-size: 14px;
  text-decoration: none;
  padding-left: 4px;
  cursor: pointer;
  background: transparent;
}
.notes__back:hover {
  color: var(--ink);
}

/* ---------- Colophon --------------------------------------------------- */
.colophon {
  grid-column: 1 / -1;
  margin-top: 96px;
  padding-top: 20px;
  border-top: 1px dashed var(--dash-color);
  display: flex;
  justify-content: space-between;
  gap: 40px;
  font-family: var(--sans-ui);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.colophon__center {
  color: var(--ink-3);
  font-style: italic;
  font-family: var(--serif-text);
  font-size: 13px;
  letter-spacing: 0;
}
.colophon a {
  color: var(--ink-3);
  border-bottom: 1px dashed var(--ink-4);
  text-decoration: none;
  padding-bottom: 1px;
}
.colophon a:hover {
  color: var(--sage-ink);
  border-bottom-color: var(--sage-ink);
}

/* ---------- Fleuron ---------------------------------------------------- */
.fleuron {
  text-align: center;
  margin: 48px 0;
  font-family: var(--serif-display);
  font-size: 22px;
  color: var(--ink-3);
  letter-spacing: 0.4em;
}

/* Mobile title — hidden on desktop, shown below breakpoint */
.title-mobile {
  display: none;
}

/* ---------- Narrow viewports ------------------------------------------ */
@media screen and (max-width: 1100px) {
  .layout {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 32px 28px 120px;
  }
  .toc {
    position: static;
    margin-bottom: 48px;
    padding-right: 0;
  }
  .toc__list {
    display: block;
  }
  .toc__item {
    border-left: 0;
    border-bottom: 1px dashed transparent;
    padding: 6px 0;
    margin-left: 0;
    width: 100%;
  }
  .toc__item.is-active {
    border-left: 0;
    border-bottom-color: var(--sage-ink);
  }
  .toc__progress {
    display: none;
  }
  .rail {
    display: none;
  }
  .masthead {
    margin-bottom: 48px;
    justify-content: space-between;
    align-items: center;
  }
  .paper {
    max-width: 100%;
  }
  .title-block {
    display: none;
  }
  .title-mobile {
    display: block;
    font-family: var(--serif-display);
    font-weight: 500;
    font-size: clamp(2rem, 6vw, 3rem);
    line-height: 1.07;
    letter-spacing: -0.012em;
    margin: 0 0 40px;
    text-wrap: balance;
    grid-column: 1 / -1;
  }
  .title-mobile {
    margin-bottom: 16px;
  }
  .title-mobile em {
    font-style: italic;
  }
  .toc__byline {
    text-align: right;
  }
  /* Asides: dashed underline trigger, hide asterisk */
  .anref__phrase {
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-color: var(--sage-ink);
    text-underline-offset: 3px;
  }
  .anref__marker {
    display: none;
  }
  /* Aside drawer (bottom sheet) */
  .an-drawer {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--paper);
    border-top: 1px dashed var(--dash-color);
    padding: 20px 28px 40px;
    z-index: 200;
    font-family: var(--sans-ui);
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-2);
    max-height: 50vh;
    overflow-y: auto;
  }
  .an-drawer__close {
    position: absolute;
    top: 14px;
    right: 20px;
    background: transparent;
    border: 0;
    font-size: 20px;
    color: var(--ink-3);
    cursor: pointer;
    line-height: 1;
    padding: 4px 6px;
  }
  .an-drawer__close:hover {
    color: var(--ink);
  }
  .an-drawer__body em {
    font-style: italic;
  }
}

@media screen and (max-width: 600px) {
  .masthead {
    flex-wrap: nowrap;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
  }
  .masthead__meta span {
    display: none;
  }
  .title-block__title {
    font-size: 2rem;
  }
  body {
    font-size: 16.5px;
  }
}

/* Hide print-only elements on screen */
.print-only {
  display: none;
}

/* ==========================================================================
   PRINT STYLESHEET — book-like, generous, no UI chrome.
   ========================================================================== */
@media print {
  @page {
    size: A4;
    margin: 0.9in 0.85in 1in 0.85in;
    @bottom-center {
      content: counter(page);
      font-family: "IBM Plex Mono", monospace;
      font-size: 9pt;
      color: #7a7a77;
    }
    @top-right {
      content: "The Problem of the Plain Style";
      font-family: "Source Serif 4", Georgia, serif;
      font-style: italic;
      font-size: 9pt;
      color: #7a7a77;
    }
  }
  @page :first {
    @top-right {
      content: none;
    }
  }

  html,
  body {
    background: #fff !important;
    color: #111 !important;
    font-size: 11pt;
    line-height: 1.5;
  }
  body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Kill UI chrome */
  .toc,
  .rail,
  .masthead__actions,
  .colophon__left,
  .colophon__right {
    display: none !important;
  }
  .masthead {
    padding-bottom: 6pt;
    margin-bottom: 24pt;
  }
  .masthead__meta {
    display: none !important;
  }

  .layout {
    display: block;
    max-width: 100%;
    padding: 0;
    margin: 0;
  }

  .paper {
    max-width: 100%;
  }

  /* Title page */
  .title-block {
    page-break-after: always;
    text-align: center;
    padding: 18% 0 0;
    margin: 0;
  }
  .title-block__title {
    font-size: 32pt;
    line-height: 1.05;
    margin: 0 auto 24pt;
    max-width: 22em;
  }
  .title-block__byline {
    font-size: 10pt;
    font-family: "Source Serif 4", Georgia, serif;
    color: #4a4a47;
    margin-top: 24pt;
    letter-spacing: 0.02em;
  }
  .print-only {
    display: block !important;
  }

  /* Chapters */
  .chapter {
    page-break-before: always;
    margin-top: 0;
    padding-top: 24pt;
  }
  .chapter:first-of-type {
    page-break-before: always;
  }
  .chapter__mark {
    border-bottom: 0.5pt dashed #888;
    margin: 0 0 8pt;
    padding-bottom: 6pt;
  }
  .chapter__roman {
    font-size: 28pt;
  }
  .chapter__kicker {
    font-size: 8pt;
  }
  .chapter__title {
    font-size: 18pt;
    margin: 8pt 0 20pt;
  }
  .chapter__epigraph {
    font-size: 10pt;
    margin: 16pt 0 24pt;
    border-left: 0.5pt dashed #888;
  }
  .chapter__epigraph-text {
    font-size: 10.5pt;
  }
  .chapter__epigraph-attr {
    font-size: 8pt;
  }

  /* Body */
  .prose p {
    orphans: 3;
    widows: 3;
    margin: 0 0 0;
    text-indent: 1.4em;
  }
  .prose section > p:first-child,
  .prose section[data-first] > p:first-child {
    text-indent: 0;
  }
  .prose section + section {
    margin-top: 10pt;
  }
  .chapter--first .prose section:first-child p:first-of-type::first-letter {
    font-size: 4em;
    padding: 4pt 6pt 0 0;
  }
  .prose blockquote {
    font-size: 10pt;
    margin: 8pt 0 8pt 18pt;
    padding: 2pt 0 2pt 10pt;
    border-left: 0.5pt dashed #888;
    page-break-inside: avoid;
  }
  .prose ol.rules {
    font-size: 10.5pt;
    margin: 8pt 0;
  }
  .prose ol.rules li {
    border-bottom: 0.5pt dashed #bbb;
    padding: 4pt 0;
  }
  .prose__section-mark {
    font-size: 11pt;
    margin: 18pt 0 6pt;
  }

  /* Footnote refs become classical superscript numbers */
  .fnref {
    color: #111;
  }
  .fnref sup {
    font-size: 7pt;
    color: #555;
  }
  .anref {
    color: #555;
  }

  /* Footnotes page */
  .notes {
    page-break-before: always;
    margin-top: 0;
    border-top: 0;
    padding-top: 24pt;
  }
  .notes__title {
    font-size: 18pt;
    margin-bottom: 16pt;
  }
  .notes ol {
    columns: 2;
    column-gap: 24pt;
    font-size: 9pt;
    line-height: 1.4;
  }
  .notes ol li {
    page-break-inside: avoid;
    border-bottom: 0.5pt dashed #ccc;
  }
  .notes__back {
    display: none !important;
  }

  .colophon {
    display: block;
    text-align: center;
    border-top: 0.5pt dashed #888;
    margin-top: 24pt;
    font-size: 9pt;
  }
  .colophon__center {
    font-size: 9pt;
  }

  /* no interaction states */
  .fnref.is-active sup,
  .fnref.is-hover sup {
    color: #555;
  }

  a {
    color: inherit;
    text-decoration: none;
    border: 0;
  }
}

/* flash highlight for scrolled-to footnote */
.notes ol li.flash {
  background: var(--sage-wash);
  transition: background 900ms ease;
}