@font-face {
  font-family: "Rapport";
  font-weight: normal;
  src: url("../fonts/Rapport/Rapport-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Rapport";
  font-weight: bold;
  src: url("../fonts/Rapport/Rapport-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Rapport";
  font-weight: normal;
  font-style: italic;
  src: url("../fonts/Rapport/Rapport-RegularItalic.woff2") format("woff2");
}
@font-face {
  font-family: "Rapport";
  font-weight: bold;
  font-style: italic;
  src: url("../fonts/Rapport/Rapport-BoldItalic.woff2") format("woff2");
}
@font-face {
  font-family: "Blanchard";
  font-weight: normal;
  src: url("../fonts/Blanchard/BlanchardUpright-VF.ttf") format("truetype");
}
* {
  margin: 0;
  box-sizing: border-box;
}

:root {
  --size-base: 18px;
  --size-l: calc( 2 * var(--size-base));
  --size-m: calc( 1.4 * var(--size-base));
  --size-leading: calc(1.2 * var(--size-base));
  --size-caption: calc(var(--size-base)*0.85);
  --pad: var(--size-base);
  --pad-l: calc( 4 * var(--size-base));
  --pad-m: calc( 2 * var(--size-base));
  --color-white: rgb(255 255 255);
  --color-base: rgb(20 80 0);
  --color-purple: rgb(50 40 80);
  --color-orange: rgb(255 100 20);
  --color-blue: rgb(0 165 190);
  --color-green: rgb(5 160 60);
  --color-pink: rgb(255, 60, 100);
}

body {
  color: var(--color-base);
  font-feature-settings: "onum" 1;
}

h1, h2, h3, h4, h5, h6, p, ul, li, body {
  font-weight: normal;
  font-family: "Rapport", sans-serif;
  font-size: var(--size-base);
}

a {
  color: var(--color-blue);
  text-decoration: none;
}

main {
  padding: var(--pad);
  padding-top: var(--pad-l);
  position: relative;
}

img {
  width: 100%;
}

p {
  font-size: var(--size-base);
  line-height: var(--size-leading);
  margin-top: var(--size-leading);
}

ul, ol {
  padding: 0;
}

/* ==============================
	 NAVIGATION
================================= */
.nav-menu {
  position: fixed;
  display: none;
  z-index: 100;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  background: var(--color-white);
  flex-direction: column;
  padding: var(--pad-l) var(--pad);
}
.nav-menu li {
  list-style-type: none;
}
.nav-menu li a {
  display: block;
  font-size: var(--font-l);
  padding: var(--pad-s);
}
.nav-menu-title {
  font-size: var(--size-l);
  margin-bottom: var(--pad);
}
.nav-menu-title, .nav-menu-section {
  font-family: "Blanchard";
  font-variation-settings: "wght" 500;
  letter-spacing: 0;
}
.nav-menu-heading {
  text-transform: uppercase;
  margin-bottom: var(--pad);
}
.nav-menu-section {
  font-size: var(--size-m);
  margin-bottom: var(--pad);
}
.nav-menu-group {
  display: none;
}
.nav-menu-section a {
  color: var(--color-section);
}

.menu-sections {
  margin: var(--pad-m) 0 var(--pad-m) var(--pad-m);
}

.nav-toggle {
  background: none;
  border: none;
  width: 50px;
  cursor: pointer;
  padding: 0;
  position: fixed;
  z-index: 200;
  top: 30px;
  right: var(--pad);
}
.nav-toggle .bar {
  height: 4px;
  background-color: var(--color-blue);
  margin: 5px;
  transition: transform 300ms ease-in-out;
}

.is-open .nav-toggle .bar {
  background-color: var(--color-blue);
}
.is-open .nav-toggle .bar:nth-child(1) {
  transform: rotate(45deg) translateY(6px);
}
.is-open .nav-toggle .bar:nth-child(2) {
  opacity: 0;
}
.is-open .nav-toggle .bar:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -13px);
}
.is-open .nav-menu {
  display: flex;
}

.layout-section main {
  color: white;
  letter-spacing: 0.01em;
}
.layout-section h1, .layout-section h1 + p {
  margin: auto;
  margin-bottom: var(--pad);
  line-height: 1.3;
  text-align: center;
  max-width: 20em;
}
.layout-section h1 {
  font-family: "Blanchard";
  font-variation-settings: "wght" 500;
  font-size: var(--size-l);
  max-width: 80%;
  margin-top: calc(3 * var(--pad));
}
.layout-section h1 + p {
  font-size: var(--size-m);
  margin-bottom: calc(8 * var(--pad));
}
.layout-section .bar {
  background-color: white;
}

#swan-point-cemetery {
  background: var(--color-purple);
}

[data-section=section-s] {
  --color-section: var(--color-purple);
}

#blackstone-park-conservation-district {
  background: var(--color-orange);
}

[data-section=section-b] {
  --color-section: var(--color-orange);
}

#east-bay-bike-path {
  background: var(--color-green);
}

[data-section=section-e] {
  --color-section: var(--color-green);
}

#narragansett-bay {
  background: var(--color-blue);
}

[data-section=section-n] {
  --color-section: var(--color-blue);
}

.bird-post {
  min-height: calc(100vh - 4 * var(--pad));
}

.nav-page {
  height: calc(4 * var(--pad));
  align-items: flex-end;
  display: flex;
  font-weight: bold;
  text-align: center;
  border-bottom: 5px solid var(--color-section);
}
.nav-page a {
  display: inline-block;
  width: 100%;
}

.nav-next, .nav-previous {
  flex: none;
  width: 6em;
  font-size: 1.25em;
  position: relative;
}
.nav-next a, .nav-previous a {
  color: var(--color-section);
}

.nav-section {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8em;
  flex: 1;
  padding: 12px;
  border-radius: 12px 12px 0 0;
  background: var(--color-section);
  color: white;
}

.nav-chapter-title, .nav-section-title {
  display: none;
}

.nav-list-bird {
  text-align: center;
  margin: var(--pad-l) -16px;
}
.nav-list-bird li {
  list-style-type: none;
  display: block;
  font-size: var(--size-caption);
  letter-spacing: 0.05em;
  margin: var(--pad);
}
.nav-list-bird li a {
  color: var(--color-white);
  display: inline-block;
  border: 1px solid;
  padding: 6px 16px;
  border-radius: 25px;
}
.nav-list-bird li a:hover {
  background: rgba(255, 255, 255, 0.2);
}

.bird-group h1 {
  font-size: var(--size-l);
}

.bird-post .bird-img {
  margin: var(--pad-l) 0 var(--pad-m);
}
.bird-post h1 {
  font-size: var(--size-m);
}
.bird-post h2 {
  font-style: italic;
}
.bird-post .status {
  font-weight: normal;
}
.bird-post .duration {
  text-transform: lowercase;
  font-style: normal;
  letter-spacing: 0.02em;
  font-feature-settings: "smcp" 1;
  opacity: 0.6;
}

.svg-arrow {
  display: inline-block;
  width: 23px;
  position: relative;
  top: 5px;
  left: 5px;
}
.svg-arrow polygon {
  fill: var(--color-pink);
}

/* ==============================
	PAGE LAYOUT
================================= */
.layout-page h1 {
  text-transform: uppercase;
  font-weight: bold;
}