:root {
  --peach: #F5D8C7;
  --light-peach: #fef9f6;
  --plum: #7d6574;
  --denim: #175A82;
  --green: #98BBA5;
  --light-denim: #E8EFF2;
  --darkgray: #333;
  --slate: #606e76;
  --white: #fff;

  --flow-gap: 1.5em;
  --line-height-body: 1.7;
  --line-height-heading: 1.1;
  
  /* https://utopia.fyi/type/calculator/ */
  --step--2: 0.64rem;
  --step--1: 0.8rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.563rem;
  --step-3: 1.953rem;
  --step-4: 2.441rem;
  --step-5: 3.052rem;
  --step-5: 3.052rem;
  --step-6: 3.815rem;

  --space-3xs: clamp(0.31rem, calc(0.29rem + 0.11vw), 0.38rem);
  --space-2xs: clamp(0.63rem, calc(0.60rem + 0.11vw), 0.69rem);
  --space-xs: clamp(0.94rem, calc(0.89rem + 0.22vw), 1.06rem);
  --space-s: clamp(1.25rem, calc(1.21rem + 0.22vw), 1.38rem);
  --space-m: clamp(1.88rem, calc(1.81rem + 0.33vw), 2.06rem);
  --space-l: clamp(2.50rem, calc(2.41rem + 0.43vw), 2.75rem);
  --space-xl: clamp(3.75rem, calc(3.62rem + 0.65vw), 4.13rem);
  --space-2xl: clamp(5.00rem, calc(4.83rem + 0.87vw), 5.50rem);
  --space-3xl: clamp(7.50rem, calc(7.24rem + 1.30vw), 8.25rem);
}

* {
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

html,
body {
  background-color: var(--white);
  color: var(--darkgray);
  font-family: NewAtten, sans-serif;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  font-size: var(--step-1);
  height: 100vh;
  line-height: var(--line-height-body, 1.25);
}

main {
  width: 100%;
}

p {
  margin: 0;
}

strong,
b {
  font-family: NewAttenBold, sans-serif;
}

em,
i {
  font-family: NewAttenItalic, sans-serif;
}

h1,
h2,
h3 {
  font-family: 'Carrie', sans-serif;
  line-height: var(--line-height-heading);
  text-transform: uppercase;
}

a {
  color: var(--denim);
  position: relative;
  text-decoration: none;
  z-index: 0;
  background-image: linear-gradient(var(--light-denim), var(--light-denim));
  background-size: 100% 3px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size .15s ease;
}

a:hover {
  background-size: 100% 100%;
}

a.alt {
  color: var(--peach);
  background-image: linear-gradient(var(--plum), var(--plum));
}

figure {
  margin: 0 0 var(--space-m);
}

figure > a {
  background-image: none;
}

figcaption {
  font-size: var(--step-0);
  text-align: center;
}

h1 {
  margin-top: 0;
}

h2,
h3 {
  max-width: 28ch;
}

h2 {
  font-size: var(--step-4);
  margin-bottom: var(--space-xs);
  margin-top: 0;
}

h3 {
  font-size: clamp(var(--step-1), var(--step-1), var(--step-2));
  margin-bottom: var(--space-xs);
}

img {
  max-width: 100%;
}

hr {
  background-color: var(--light-denim);
  border: none;
  box-shadow: none;
  height: 2px;
}

blockquote {
  max-width: 50ch;
}

code {
  font-size: var(--step-0);
  display: inline-block;
  background-color: var(--light-peach);
}

.global-header {
  background-color: var(--peach);
  padding: var(--space-s);
}

.navbar-wrapper {
  display: flex;
  justify-content: space-between;
  max-width: 60rem;
  margin-left: auto;
  margin-right: auto;
}

.global-header h1 {
  font-size: clamp(var(--step-0),var(--step-3));
  margin: 0;
}

.nav {
  align-items: center;
  display: flex;
  font-family: 'Carrie', sans-serif;
  justify-content: flex-end;
  list-style: none;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}

.nav-item + .nav-item {
  margin-left: 1em;
}

.main-content {
  display: grid;
  grid-template-columns: 100%;
}

@media (min-width: 48rem) {
  .main-content {
    grid-template-columns: 
      minmax(var(--space-s), 1fr)
      minmax(1em, 50rem)
      minmax(var(--space-s), 1fr);
    grid-template-areas:
      'left  headline  right'
      '. main .';
  }
}

.headline-wrapper {
  background-color: var(--peach);
  display: grid;
  grid-template-rows: auto;
  grid-column: 1 / -1;
  grid-row: 1;
  padding: var(--space-xl) var(--space-m);
  position: relative;
  z-index: 1;
}

.home-content .headline-wrapper {
  padding: var(--space-m);
}

@supports(grid-template-columns: subgrid) {
  .headline-wrapper {
    grid-template-columns: subgrid;
  }
}

@supports not (grid-template-columns: subgrid) {
  .headline-wrapper {
    grid-template-columns: 100%;
  }
}

@media (min-width: 48rem) {
  @supports not (grid-template-columns: subgrid) {
    .headline-wrapper {
      grid-template-columns: 
      minmax(var(--space-s), 1fr)
      minmax(1em, 50rem)
      minmax(var(--space-s), 1fr);
    grid-template-areas:
      'left headline right';
    }
  }
}

.article-main .headline-wrapper {
  text-align: center;
}

@media (min-width: 48rem) {
  .headline-wrapper {
    padding-bottom: var(--space-2xl);
    padding-left: 0;
    padding-right: 0;
    padding-top: var(--space-xl);
  }

  .home-content .headline-wrapper {
    padding-bottom: var(--space-m);
    padding-top: var(--space-m);
  }

  .headline, 
  .subheadline,
  .headline-meta {
    grid-area: headline;
  }
}


.headline {
  font-family: 'Carrie', serif;
  text-transform: uppercase;
  font-size: var(--step-5);
  font-weight: 500;
  line-height: var(--line-height-heading);
  margin-bottom: var(--space-xs);
  grid-row: 1;
}

.headline-meta {
  grid-row: 2;
}


@media (min-width: 48em) {
  .headline {
    font-size: var(--step-6);
    grid-row: 1;
  }
}

.subheadline {
  margin-bottom: 0;
  grid-row: 2;
}

.article-main {
  display: grid;
  grid-column: 1 / -1;
}


@supports (grid-template-columns: subgrid) {
  .article-main {
    grid-template-columns: subgrid;
  }
}

@supports not ( grid-template-columns: subgrid) {
  .article-main {
    grid-template-columns: 100%;
  }
}

@media (min-width: 50rem) {
  @supports not ( grid-template-columns: subgrid) {
    .article-main {
      grid-template-columns: 
      minmax(var(--space-s), 1fr)
      minmax(1em, 50rem)
      minmax(var(--space-s), 1fr);
    grid-template-areas:
      'left  headline  right'
      '. main .';
    }
  }
}


.article-content,
.page-content {
  padding: var(--space-l) var(--space-m);
  z-index: 1;
}

.article-content > * {
  max-width: 65ch;
  margin-inline: auto;
}

.article-content h2 + * {
  --flow-gap: 0.75em;
}

@media (min-width: 48rem) {
  .article-content {
    grid-area: main;
  }

  .article-content,
  .page-content {
    padding: var(--space-xl) 0;
  }
  .page-content {
    grid-column: 2 / span 3;
  }
}

footer {
  display: grid;
  grid-gap: var(--space-s);
  grid-template-columns: 
  [full-start] minmax(1em, 1fr) 
  [main-start] minmax(0, 15rem)
  [offset-start] minmax(0, 44rem)
  [main-end] minmax(1em, 1fr) 
  [full-end];
  margin-top: auto;
  padding-bottom: var(--space-m);
  padding-top: var(--space-m);
}

footer h2 {
  grid-column: 2;
  margin: 0;
  font-size: var(--step-3);
}

footer ul {
  columns: 2;
  grid-column: 2 / span 2;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 48em) {
  footer {
    padding-bottom: var(--space-xl);
    padding-top: var(--space-xl);
  }

  footer ul {
    grid-column: 2;
  }
}

/* 
Posts 
*/
.notes-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.noteslist-link {
  font-family: 'Carrie', sans-serif;
  text-transform: uppercase;
  font-size: var(--step-3);
  line-height: var(--line-height-heading);
}

.noteslist-link + * {
  margin-block-start: var(--space-4xs);
}

.note-meta,
.noteslist-date {
  color: var(--slate);
}

.note-title {
  margin-bottom: 0;
}

.direct-link {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.direct-link:hover {
  opacity: 1;
}

/*
Utilities
*/

.flow > * + *,
.flow-list > * + *  {
  margin-block-start: var(--flow-gap, 1em);
}

.flow > * + figure {
  margin-block-start: var(--space-l, 1em);
  margin-block-end: var(--space-l, 1em);
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}