* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Successor / fonts */

@font-face {
  font-family: 'Successor';
  font-weight: 300;
  font-style: normal;
  src: url('fonts/Successor-Light-Web.woff2') format('woff2'),
       url('fonts/Successor-Light-Web.woff') format('woff');
}

@font-face {
  font-family: 'Successor';
  font-weight: 300;
  font-style: italic;
  src: url('fonts/Successor-LightItalic-Web.woff2') format('woff2'),
       url('fonts/Successor-LightItalic-Web.woff') format('woff');
}

/* MD System / Standard / fonts */

@font-face {
  font-family: 'MDSystem';
  font-weight: 500;
  font-style: normal;
  src: url('fonts/MDSystem-Medium.woff2') format('woff2'),
       url('fonts/MDSystem-Medium.woff') format('woff');
}

@font-face {
  font-family: 'MDSystem';
  font-weight: 500;
  font-style: italic;
  src: url('fonts/MDSystem-MediumItalic.woff2') format('woff2'),
       url('fonts/MDSystem-MediumItalic.woff') format('woff');
}

@font-face {
  font-family: 'MDSystem';
  font-weight: 700;
  font-style: normal;
  src: url('fonts/MDSystem-Bold.woff2') format('woff2'),
       url('fonts/MDSystem-Bold.woff') format('woff');
}

/* MD System / Condensed / fonts */

@font-face {
  font-family: 'MDSystem-Condensed';
  font-weight: 500;
  font-style: normal;
  src: url('fonts/MDSystem-CondensedMedium.woff2') format('woff2'),
       url('fonts/MDSystem-CondensedMedium.woff') format('woff');
}

/* MD System Mono / fonts */

@font-face {
  font-family: 'MDSystemMono';
  font-weight: 500;
  font-style: normal;
  src: url('fonts/MDSystemMono-Medium.woff2') format('woff2'),
       url('fonts/MDSystemMono-Medium.woff') format('woff');
}

html, 
body {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  color: #051820;
  background-color: #f2f2f2;
}

html {
  display: block;
}

body {
  display: flex;
  justify-content: center;
  font-family: 'MDSystem-Condensed';
  font-weight: 500;
}

main {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  font-size: 0.75rem;
  line-height: 0.9rem;
  max-width: 60rem;
  gap: 3.5rem;
  margin: 4.5rem 4.5rem 6rem;
}

section {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 2.75rem;
  padding-bottom: 4.5rem;
}

.block {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 12.5rem;
  height: 12.5rem;
}

.layer, 
.text, 
.drawing {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.layer, 
.text, 
.drawing, 
.drawing svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.text {
  mix-blend-mode: multiply;
  font-variant-numeric: tabular-nums;
}

.intro, 
.outro {
  justify-content: center;
  align-items: flex-start;
  gap: 0.9rem;
}

.outro i {
  font-style: italic;
}

.outro .headline {
  font-family: "Successor";
  font-style: italic;
  font-weight: 300;
  transform: translateX(0.1rem);
}

.outro p {
  position: relative;
}

.hanging {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-100%);
  margin-left: -0.1rem;
}

.blurb {
  gap: 1rem;
  align-items: flex-start;
}

.blurb p {
  font-family: "Successor";
  font-style: normal;
  font-weight: 300;
  font-size: 0.75rem;
  line-height: 0.875rem;
  padding-left: 1.21rem;
  padding-right: 0.605rem;
}

.trim {
  display: flex;
  flex-direction: row;
  width: 9rem;
  transform: translateY(-25%);
}

.blurb .trim {
  margin-left: 1.21rem;
}

.trim-element {
  flex: 1;
  width: auto;
  height: 100%;
  box-sizing: content-box;
}

.trim-element:nth-child(odd)  {transform: translateY( 50%)}
.trim-element:nth-child(even) {transform: translateY(-50%)}

[data-block="blog"]    .trim {width:  9.250rem; height: 0.250rem; gap: 0.15625rem;}
[data-block="rowboat"] .trim {width:  9.750rem; height: 0.250rem; gap: 0;}
[data-block="recent"]  .trim {width: 10.500rem; height: 0.125rem; gap: 0.09375rem;}

[data-block="blog"]    .trim-element {border-top:    0.0625rem dashed}
[data-block="blog"]    .trim-element {border-bottom: 0.0625rem dashed}
[data-block="rowboat"] .trim-element {border-top:    0.0625rem solid}
[data-block="rowboat"] .trim-element {border-bottom: 0.0625rem solid}
[data-block="recent"]  .trim-element {border-top:    0.1250rem dotted}
[data-block="recent"]  .trim-element {border-bottom: 0.1250rem dotted}

[data-block="blog"]    .trim-element:nth-child(even) {margin-top: 0.0625rem}
[data-block="rowboat"] .trim-element:nth-child(even) {margin-top: 0.0625rem}
[data-block="recent"]  .trim-element:nth-child(even) {margin-top: 0.1250rem}

.slash {
  flex: 1;
  height: 100%;
  width: auto;
}

a, 
a:visited, 
a:hover, 
a:focus {
  text-decoration: none;
  color: inherit;
}

.blurb a, 
.blurb a:visited, 
.blurb a:hover, 
.blurb a:focus {
  font-weight: 500;
  text-decoration: underline;
  white-space: nowrap;
  -webkit-transition: color 0.15s ease-in-out;
  -moz-transition: color 0.15s ease-in-out;
  -ms-transition: color 0.15s ease-in-out;
  transition: color 0.15s ease-in-out;
}

a.logo {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 7rem;
  height: auto;
  transform: translateX(-1px);
}

a.logo svg path {
  stroke-width: 0.75px;
  fill: transparent;
  stroke: #051820;
  -webkit-transition: fill 0.15s ease-in-out;
  -moz-transition: fill 0.15s ease-in-out;
  -ms-transition: fill 0.15s ease-in-out;
  transition: fill 0.15s ease-in-out;
}

p {
  font-family: 'MDSystem';
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 0.875rem;
  margin: unset;
}

[data-layer="0"] {
  pointer-events: none;
}

[data-layer="0"] .blurb, 
.blurb .invisible {
  pointer-events: all;
}

[data-layer="0"] .drawing svg path {stroke: #051820}
[data-layer="1"] .drawing svg path {stroke: #13a0dc}
[data-layer="2"] .drawing svg path {stroke: #c9c9c9}
[data-layer="0"] .text {color: #051820}
[data-layer="1"] .text {color: #1296ce}
[data-layer="2"] .text {color: #c9c9c9}
[data-layer="0"] .text .fill {background-color: #051820}
[data-layer="1"] .text .fill {background-color: #13a0dc}

[data-layer="2"] .text .fill {background-color: #d6d6d6}
[data-layer="2"] .text .subbed {text-decoration-color: #d6d6d6}

[data-layer="1"] .text a.logo svg path {stroke: #13a0dc}
[data-layer="2"] .text a.logo svg path {stroke: #c9c9c9}
[data-layer="1"] .text a.logo:hover svg path, [data-layer="1"] .text a.logo:focus svg path {stroke: #0f7eae}

[data-layer="1"] .drawing svg path, 
[data-layer="0"] .drawing svg path {
  stroke-width: 0.75px;
  stroke-dasharray: 1000;
  animation: drawIn 9s ease-in-out both alternate infinite;
}

[data-layer="0"] .blurb a, 
[data-layer="0"] .blurb a:visited, 
[data-layer="0"] .blurb a:focus {color: #1296ce}

[data-layer="0"] .blurb a:hover {color: #0c6388}

[data-layer="1"] .blurb a, 
[data-layer="1"] .blurb a:visited, 
[data-layer="1"] .blurb a:focus {color: #1296ce}

[data-layer="1"] .blurb a:hover {color: #0c6388}

[data-layer="2"] .blurb a, 
[data-layer="2"] .blurb a:visited, 
[data-layer="2"] .blurb a:focus {color: #c9c9c9}

[data-layer="2"] .blurb a:hover {color: #a3a3a3}

[data-layer="0"] .trim {border-color: #051820}
[data-layer="1"] .trim {border-color: #13a0dc}
[data-layer="2"] .trim {border-color: #c9c9c9}

@keyframes drawIn {
  0% {
    stroke-dashoffset: 1000;
  }
  12.5% {
    stroke-dashoffset: 1000;
  }
  31.25% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

.drawing svg {
  -webkit-transition: opacity 0.15s ease-in-out;
  -moz-transition: opacity 0.15s ease-in-out;
  -ms-transition: opacity 0.15s ease-in-out;
  transition: opacity 0.15s ease-in-out;
}

.drawing svg.style-a {animation: showStyleA 36s ease-in-out both infinite}
.drawing svg.style-b {animation: showStyleB 36s ease-in-out both infinite}

@keyframes showStyleA {
    0.0% {opacity: 0}
   47.5% {opacity: 0}
   48.0% {opacity: 1}
   97.5% {opacity: 1}
   98.0% {opacity: 0}
  100.0% {opacity: 0}
}

@keyframes showStyleB {
    0.0% {opacity: 1}
   47.5% {opacity: 1}
   48.0% {opacity: 0}
   97.5% {opacity: 0}
   98.0% {opacity: 1}
  100.0% {opacity: 1}
}

.atmosphere {
  pointer-events: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#backdrop, 
#colors, 
#glow {
  position: fixed;
}

#backdrop {
  background-color: #f2f2f2;
}

#glow {
  background: linear-gradient(rgba(0,0,0,1) 0%, rgba(0,0,0,1) 85%, rgba(255,255,255,0.5) 95%, rgba(255,255,255,0.5) 100%);
  mix-blend-mode: screen;
}

#colors {
  mix-blend-mode: hue;
  overflow: hidden;
}

#colors-block {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #13a0dc;
  animation: tint 144s ease-in-out infinite;
}

.snowfall {
  position: fixed;
  background-color: transparent;
  mix-blend-mode: overlay;
  opacity: 0;
  animation: twinkle 3.0s ease-in-out both infinite;
}

#snowfall-1 {animation-delay: 0.0s}
#snowfall-2 {animation-delay: 1.0s}
#snowfall-3 {animation-delay: 2.0s}

.snowfall svg {
  position: absolute;
  top: 0;
  left: 50%;
  width: auto;
  height: 100%;
  transform: translateX(-50%);
}

@keyframes twinkle {
  0% {
    opacity: 0.0;
  }
  50% {
    opacity: 1.0;
  }
  100% {
    opacity: 0.0;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0.6;
  }
  12.5% {
    opacity: 0.6;
  }
  31.25% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes tint {
    0% {filter: hue-rotate(   0deg) brightness(100%)}
   10% {filter: hue-rotate(   0deg) brightness( 80%)}
   20% {filter: hue-rotate( -72deg) brightness( 60%)}
   30% {filter: hue-rotate(-108deg) brightness( 30%)}
   40% {filter: hue-rotate(-144deg) brightness( 20%)}
   50% {filter: hue-rotate(-180deg) brightness( 20%)}
   60% {filter: hue-rotate(-216deg) brightness( 20%)}
   70% {filter: hue-rotate(-252deg) brightness( 10%)}
   80% {filter: hue-rotate(-288deg) brightness( 10%)}
   90% {filter: hue-rotate(-324deg) brightness( 10%)}
  100% {filter: hue-rotate(-360deg) brightness(100%)}
}

.cover {
  position: absolute;
  top: unset;
  bottom: 0;
  left: unset;
  right: 0;
  height: 110%;
  background-color: white;
  animation: clipIn 9s ease-in-out both alternate infinite;
  pointer-events: none;
}

.reverse-cover {
  position: absolute;
  top: unset;
  bottom: 0;
  left: 0;
  right: unset;
  height: 110%;
  background-color: #ffffff;
  animation: clipOut 9s ease-in-out both alternate infinite;
}

.drawing .reverse-cover {
  background-color: #f2f2f2;
}

@keyframes clipIn {
  0% {
    width: 100%;
  }
  12.50% {
    width: 100%;
  }
  31.25% {
    width: 0;
  }
  100% {
    width: 0;
  }
}

@keyframes clipOut {
  0% {
    width: 0;
  }
  12.50% {
    width: 0;
  }
  31.25% {
    width: 100%;
  }
  100% {
    width: 100%;
  }
}

.stretch .cover {
  animation: clipInStretch 9s ease-in-out both alternate infinite;
  left: unset;
  right: -10%;
}

.stretch .reverse-cover {
  animation: clipOutStretch 9s ease-in-out both alternate infinite;
  left: -10%;
  right: unset;
}

@keyframes clipInStretch {
  0% {
    width: 120%;
  }
  12.50% {
    width: 120%;
  }
  31.25% {
    width: 0%;
  }
  100% {
    width: 0;
  }
}

@keyframes clipOutStretch {
  0% {
    width: 0;
  }
  12.50% {
    width: 0;
  }
  31.25% {
    width: 120%;
  }
  100% {
    width: 120%;
  }
}

[data-block]:nth-child( 2) .drawing svg, [data-block]:nth-child( 2) .drawing svg path, [data-block]:nth-child( 2) .cover, [data-block]:nth-child( 2) .reverse-cover {animation-delay: 0.00s}
[data-block]:nth-child( 3) .drawing svg, [data-block]:nth-child( 3) .drawing svg path, [data-block]:nth-child( 3) .cover, [data-block]:nth-child( 3) .reverse-cover {animation-delay: 0.75s}
[data-block]:nth-child( 4) .drawing svg, [data-block]:nth-child( 4) .drawing svg path, [data-block]:nth-child( 4) .cover, [data-block]:nth-child( 4) .reverse-cover {animation-delay: 1.50s}
[data-block]:nth-child( 5) .drawing svg, [data-block]:nth-child( 5) .drawing svg path, [data-block]:nth-child( 5) .cover, [data-block]:nth-child( 5) .reverse-cover {animation-delay: 2.25s}
[data-block]:nth-child( 6) .drawing svg, [data-block]:nth-child( 6) .drawing svg path, [data-block]:nth-child( 6) .cover, [data-block]:nth-child( 6) .reverse-cover {animation-delay: 3.00s}
[data-block]:nth-child( 7) .drawing svg, [data-block]:nth-child( 7) .drawing svg path, [data-block]:nth-child( 7) .cover, [data-block]:nth-child( 7) .reverse-cover {animation-delay: 3.75s}
[data-block]:nth-child( 8) .drawing svg, [data-block]:nth-child( 8) .drawing svg path, [data-block]:nth-child( 8) .cover, [data-block]:nth-child( 8) .reverse-cover {animation-delay: 4.50s}
[data-block]:nth-child( 9) .drawing svg, [data-block]:nth-child( 9) .drawing svg path, [data-block]:nth-child( 9) .cover, [data-block]:nth-child( 9) .reverse-cover {animation-delay: 5.25s}
[data-block]:nth-child(10) .drawing svg, [data-block]:nth-child(10) .drawing svg path, [data-block]:nth-child(10) .cover, [data-block]:nth-child(10) .reverse-cover {animation-delay: 6.00s}
[data-block]:nth-child(11) .drawing svg, [data-block]:nth-child(11) .drawing svg path, [data-block]:nth-child(11) .cover, [data-block]:nth-child(11) .reverse-cover {animation-delay: 6.75s}
[data-block]:nth-child(12) .drawing svg, [data-block]:nth-child(12) .drawing svg path, [data-block]:nth-child(12) .cover, [data-block]:nth-child(12) .reverse-cover {animation-delay: 7.50s}
[data-block]:nth-child(13) .drawing svg, [data-block]:nth-child(13) .drawing svg path, [data-block]:nth-child(13) .cover, [data-block]:nth-child(13) .reverse-cover {animation-delay: 8.25s}


/* CHART TEXT */

[data-state], 
[data-value], 
[data-shape] {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.01rem;
}

/* SUBBING */

.subbed {
  color: rgba(0, 0, 0, 0);
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-skip-ink: none;
  text-decoration-thickness: 1px;
}

.title.subbed {
  transform: translateY(-1.25rem);
}

p.subbed {
  transform: translateY(-0.375rem);
}

.ortho-note.subbed {
  transform: translateY(-0.375rem);
}

[data-state].subbed,
[data-value].subbed {
  transform: translateY(-0.375rem);
}

[data-shape].subbed, 
[data-town].subbed {
  transform: translateY(-0.25rem);
}


/* INTRO ALIGNMENT */

[data-block="intro"] [data-layer] .text, 
[data-block="outro"] [data-layer] .text {
  transform: translate(9.72%);
}


/* TREEMAP */

[data-block="treemap"] [data-state="vt"] {
  top: 9.72%;
  left: 9.72%;
  width: 20.76%;
  height: 45.96%;
}

[data-block="treemap"] [data-state="nh"] {
  top: 9.72%;
  left: 30.48%;
  width: 20.16%;
  height: 45.96%;
}

[data-block="treemap"] [data-state="me"] {
  top: 9.72%;
  left: 50.64%;
  width: 39.63%;
  height: 80.55%;
}

[data-block="treemap"] [data-state="ma"] {
  top: 55.68%;
  left: 9.72%;
  width: 40.92%;
  height: 19.73%;
}

[data-block="treemap"] [data-state="ct"] {
  top: 75.41%;
  left: 9.72%;
  width: 33.72%;
  height: 14.86%;
}

[data-block="treemap"] [data-state="ri"] {
  top: 75.41%;
  left: 43.44%;
  width: 7.20%;
  height: 14.86%;
}

/* BARS */

/* all state text */

[data-block="bars"] [data-state], 
[data-block="bars"] [data-value] {
  align-items: flex-start;
  width: 12.5%;
  height: 15.28%;
}

[data-block="bars"] [data-state="me"], [data-block="bars"] [data-value="me"] {top:  4.86%}
[data-block="bars"] [data-state="ma"], [data-block="bars"] [data-value="ma"] {top: 20.14%}
[data-block="bars"] [data-state="ct"], [data-block="bars"] [data-value="ct"] {top: 35.42%}
[data-block="bars"] [data-state="ri"], [data-block="bars"] [data-value="ri"] {top: 50.69%}
[data-block="bars"] [data-state="nh"], [data-block="bars"] [data-value="nh"] {top: 65.97%}
[data-block="bars"] [data-state="vt"], [data-block="bars"] [data-value="vt"] {top: 81.25%}

/* state labels */

[data-block="bars"] [data-state] {
  left: 9.72%;
}

/* state values */

[data-block="bars"] [data-value] {
  align-items: flex-end;
  left: 83.33%;
}

/* NETWORK */

[data-block="network"] [data-state] {
  width: 11.11%;
  height: 11.11%;
}

[data-block="network"] [data-state="me"] {
  top: 4.17%;
  left: 81.94%;
}

[data-block="network"] [data-state="vt"] {
  top: 29.17%;
  left: 6.94%;
}

[data-block="network"] [data-state="nh"] {
  top: 29.17%;
  left: 56.94%;
}

[data-block="network"] [data-state="ma"] {
  top: 54.17%;
  left: 31.94%;
}

[data-block="network"] [data-state="ct"] {
  top: 79.17%;
  left: 6.94%;
}

[data-block="network"] [data-state="ri"] {
  top: 79.17%;
  left: 56.94%;
}

/* ORTHOGRAPHY */

.ortho-list {
  display: block;
  position: absolute;
  width: 100%;
  top: 4%;
  left: 10%;
  font-family: 'MDSystemMono';
  font-weight: 500;
  font-size: 0.56rem;
  line-height: 0.67rem;
}

.ortho-row {
  display: block;
  position: relative;
}

.ortho-blocks {
  display: inline-block;
  position: relative;
  width: auto;
  height: 100%;
  background-color: white;
}

.ortho-block {
  display: inline-block;
  position: relative;
  width: 0.22rem;
  height: 0.67rem;
  text-align: center;
}

.invisible {
  opacity: 0;
  pointer-events: none;
}

.ortho-annotation {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}

.ortho-line {
  position: absolute;
  z-index: -2;
  width: 50%;
  height: 1px;
  background-color: black;
  top: 0.3125rem;
  left: 0;
}

.ortho-note {
  position: absolute;
  width: 50%;
  top: 0;
  left: 50%;
  font-family: 'MDSystem-Condensed';
  font-weight: 500;
  font-size: 0.67rem;
  line-height: 0.78rem;
}

.ortho-blocks:before, 
.ortho-line:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 100%;
  right: unset;
  width: 0.9rem;
  height: 0.67rem;
  background-color: white;
}

.ortho-blocks:before {
  transform: translate(-50%, 0);
}

.ortho-line:after {
  transform: translate(-50%, -50%);
}

/* VENN DIAGRAM */

[data-block="venn"] [data-shape] {
  text-align: center;
}

[data-block="venn"] [data-shape^="diagram"] {
  font-size: 0.67rem;
  line-height: 0.78rem;
  top: 31.94%;
  width: 36.11%;
  height: 36.11%;
}

[data-block="venn"] [data-shape="diagram-a"] {
  left: 2.78%;
}

[data-block="venn"] [data-shape="diagram-b"] {
  left: 31.94%;
}

[data-block="venn"] [data-shape="diagram-c"] {
  left: 61.11%;
}

[data-block="venn"] [data-shape^="annotation"] {
  width: 48.61%;
  height: 9.72%;
}

[data-block="venn"] [data-shape="annotation-a"] {
  top: 11.11%;
  left: 11.11%;
}

[data-block="venn"] [data-shape="annotation-b"] {
  top: 79.17%;
  left: 40.28%;
}

/* RECURRENCE */

[data-block="recurrence"] [data-state], 
[data-block="recurrence"] [data-town] {
  position: absolute;
  height: 7.64%;
}

[data-block="recurrence"] [data-state] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  top: 11.46%;
  width: 8.33%;
  font-size: 0.67rem;
  line-height: 0.78rem;
}

[data-block="recurrence"] [data-state="me"] {left: 45.83%}
[data-block="recurrence"] [data-state="vt"] {left: 54.17%}
[data-block="recurrence"] [data-state="nh"] {left: 62.50%}
[data-block="recurrence"] [data-state="ma"] {left: 70.83%}
[data-block="recurrence"] [data-state="ct"] {left: 79.17%}
[data-block="recurrence"] [data-state="ri"] {left: 87.50%}

[data-block="recurrence"] [data-town] {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  font-family: 'MDSystemMono';
  font-weight: 500;
  font-size: 0.56rem;
  line-height: 0.67rem;
  left: 10%;
  width: 37.5%;
}

[data-block="recurrence"] [data-town="0"] {top: 19.01%}
[data-block="recurrence"] [data-town="1"] {top: 26.74%}
[data-block="recurrence"] [data-town="2"] {top: 34.38%}
[data-block="recurrence"] [data-town="3"] {top: 42.01%}
[data-block="recurrence"] [data-town="4"] {top: 49.65%}
[data-block="recurrence"] [data-town="5"] {top: 57.29%}
[data-block="recurrence"] [data-town="6"] {top: 64.93%}
[data-block="recurrence"] [data-town="7"] {top: 72.57%}
[data-block="recurrence"] [data-town="8"] {top: 80.21%}
[data-block="recurrence"] [data-town="9"] {top: 87.85%}


/* CHART TITLES */

.headline, 
.title {
  margin: 0;
}

.headline {
  font-family: "Successor";
  font-style: normal;
  font-weight: 300;
  font-size: 1.25rem;
  line-height: 1.5rem;
}

.headline i {
  font-style: italic;
}

.title {
  font-family: 'MDSystem';
  font-weight: 700;
  font-size: 0.76rem;
  position: absolute;
  top: 0;
  left: 1.21rem;
  transform: translateY(-0.9rem);
}

/* MEDIA QUERIES */

@media screen and (max-width: 699px) {

  main {
    margin-left: 3rem;
    margin-right: 3rem;
  }

}

@media screen and (min-width: 1076px) {

  [data-block="blog"]    .blurb {transform: translateY(-1.5rem)}
  [data-block="rowboat"] .blurb {transform: translateY(0)}
  [data-block="recent"]  .blurb {transform: translateY(1.5rem)}

}

@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
  
  #colors {
    display: none;
  }

  [data-layer="2"] {
    display: none;
  }

  .drawing svg.style-b {
    display: none;
  }
  
  [data-layer="1"] .drawing svg path, 
  [data-layer="0"] .drawing svg path, 
  .drawing svg.style-a, 
  .drawing svg.style-b, 
  #colors-block, 
  .cover, 
  .reverse-cover, 
  .stretch .cover, 
  .stretch .reverse-cover {
    animation: none;
  }

  .text {
    mix-blend-mode: normal;
  }

  .ortho-blocks:before, 
  .ortho-line:after {
    background-color: #f2f2f2;
  }
  
  .ortho-blocks {
    background-color: #f2f2f2;
  }

  .ortho-blocks, 
  .ortho-blocks:before {
    background-color: transparent;
  }

  .ortho-note {
    left: 45%;
  }

  .ortho-note.annotator:before {
    content: "←";
    position: absolute;
    width: auto;
    height: auto;
    background-color: transparent;
    top: 0;
    left: unset;
    right: 100%;
    margin-right: 0.25rem;
  }

}