@import url('https://rsms.me/inter/inter.css');
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+KR:200,300,500');

:root {
  --body-font-size: 18px;
  --tinylist-font-size: 12px;
  --summary-font-size: 18px;
  --article-font-size: 18px;
  --article-font-weight: 200;
  --footer-font-size: 14px;
  --sans-serif: 'Inter', sans-serif;
  --serif: 'Noto Serif KR', serif;
}

@media screen and (max-width: 36em) {
  :root {
    --body-font-size: 14px;
    --tinylist-font-size: 14px;
    --summary-font-size: 14px;
    --article-font-size: 16px;
    --article-font-weight: 300;
    --footer-font-size: 12px;
  }
}

@media print {
  :root {
    --body-font-size: 10pt;
  }
  @page {
    padding: 20em 0;
  }
}

@supports (font-variation-settings: normal) {
  :root {
    --sans-serif: 'Inter var', sans-serif;
  }
}

html {
  box-sizing: border-box;
}

body {
  border-top: 12px solid rgba(250,184,31,1);
  color: rgba(29,34,36,1);
  font-family: var(--sans-serif);
  font-size: var(--body-font-size);
  font-weight: 300;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}



a:link {
  /* color: rgba(29,34,36,1); */
  color: black;
  font-weight: bolder;
}
a:visited {
  color: black;
}



/* Layout */

/* .container {
  margin: 0 auto;
  padding: 0 1em;
  max-width: 1028px;
} */



/* Navigation */

nav {
  position: fixed;
  bottom: 2em;
  left: 2em;
}

nav .home {
  background-image: url('/assets/images/nav-home.svg');
  background-size: contain;
  display: block;
  height: 48px;
  width: 48px;
}

nav .home span {
  display: none;
}

@media screen and (max-width: 36em) {
  nav {
    bottom: 1em;
    left: 1em;
  }
}



/* Header */

.header {
  margin: 6rem auto;
}

.title {
  font-size: 1.75em;
  font-weight: 800;
  margin: 0 0 .25em 0;
  text-align: center;
}

.hide {
  display: none;
}

.summary {
  font-size: var(--summary-font-size);
}
.summary .bigger {
  font-size: 1.25em;
}

.avatar {
  border-radius: 100%;
  margin: 0 auto 2rem auto;
  display: block;
  width: 100%;
  max-width: 228px;
}

@media screen and (max-width: 36em) {
  .header {
    margin: 0 auto;
    padding: 3rem 0;
  }
  .avatar {
    max-width: 120px;
  }
}

.microheading,
.subtitle {
  color: rgba(58,118,156,1);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .75px;
  text-transform: uppercase;
  margin: 0 0 .5em 0;
}
.subtitle {
  margin-bottom: 3rem;
}

.tinylist {
  font-size: var(--tinylist-font-size);
  font-weight: 300;
  list-style: none;
  margin: 0 0 3rem 0;
  padding: 0;
}

  .tinylist li {
    margin-bottom: .5em;
  }

.centered {
  text-align: center;
}



/* Article */

article {
  font-size: var(--article-font-size);
  font-weight: var(--article-font-weight);
  margin: 0 auto;
}

section {
  margin-bottom: 3rem;
}

.typeset {
  font-family: var(--serif);
}

.typeset h1, .typeset h2, .typeset h3, .typeset h4, .typeset h5, .typeset h6 {
  font-family: var(--sans-serif);
}

.typeset h2 {
  text-align: center;
}

.typeset table {
  font-family: var(--sans-serif);
  font-size: 12px;
}
.typeset table th {
  font-weight: 600;
}
.typeset table ul {
  margin: 0 0 0 1.5em;
}



/* Figures */

figure,
.typeset figure {
  font-family: var(--sans-serif);
  font-size: 12px;
  font-weight: 300;
  margin: 0 0 1.5em 0;
  padding: 0;
}

  figure img,
  .typeset figure img {
    display: block;
    height: auto;
    max-width: 100%;
  }

figcaption,
.typeset figcaption {
  color: rgba(29,34,36,.7);
  font-size: 12px;
  font-weight: 400;
  margin-top: 1em;
  text-align: center;
}



/* Footer */

.endnotes {
  /* background: rgba(29,34,36,1); */
  /* background: rgba(0, 140, 255, 0.1); */
  /* color: rgba(227, 238, 242, 1); */
  /* color: rgba(29,34,36,1); */
  color: rgba(29,34,36,.8);
  font-family: var(--sans-serif);
  font-size: var(--footer-font-size);
  font-weight: 300;
  /* margin: 3em 0 0 0; */
  padding: 3em 0 6em 0;
}
.endnotes .typeset {
  font-family: var(--sans-serif);
}

.endnotes hr {
  background: rgba(29,34,36,.1);
  border: none;
  height: 1px;
  margin-bottom: 2em;
}

.endnotes h2 {
  display: none;
}

li:target { /* Highlight selected endnote */
  background-color: rgba(0, 140, 255, .1);
  color: rgba(29,34,36,1);
}

a.endnoteBackLink {
  text-decoration: none;
  font-size: .75em;
}



/* .row {
  display: flex;
  flex-flow: row nowrap;
  max-width: 960px;
  margin: 0 auto;
}
.row._reverse {
  flex-flow: row-reverse nowrap;
}

.column {
  flex-basis: 100%;
  margin: 0 1rem;
}
.column._33 {
  flex-basis: 33%;
}
.column._66 {
  flex-basis: 66%;
} */




/* .grid {
  display: flex;
  flex-flow: row wrap;
}

  .x2 .cell {
    flex: calc(100% / 2);
  }
  .x4 .cell {
    flex: calc(100% / 4);
  }
  @media all and (max-width: calc(600px)) {
    .x4 .cell { flex: calc(100% / 2); }
  }

  .grid figcaption {
    flex: 100%;
  } */



/* Print styles */

@media print {
  image {
    display: block;
    max-width: 50% !important;
    margin: 0 auto;
  }

  .container {
    max-width: 960pt !important;
  }
  h2,
  .typeset h2 {
    break-before: page;
    padding-top: 1em;
    page-break-before: always;
  }
  h2, h3 {
    break-after: avoid-page;
    page-break-after: avoid;
  }
  p {
    orphans: 2;
    widows: 2;
  }
  footer {
    background: inherit;
    color: inherit;
  }
  footer a:link,
  footer a:visited {
    color: inherit;
  }
}