/* global color palette */

html {
  --color-white: rgb(255, 255, 255);
  --color-black: rgba(0, 0, 0, 0.95);
  --color-grey: rgb(196, 196, 196);
  --color-red: rgb(255, 2, 45);
  --color-green: rgb(0, 109, 64);
  --color-blue: rgb(0, 125, 255);
  --color-pink: rgb(255, 172, 181);
  --color-orange: rgb(255, 127, 39);
  --color-yellow: rgb(255, 206, 0);
}

.grey    a:hover { color: var(--color-grey); }
.red     a:hover { color: var(--color-red); }
.green   a:hover { color: var(--color-green); }
.blue    a:hover { color: var(--color-blue); }
.pink    a:hover { color: var(--color-pink); }
.orange  a:hover { color: var(--color-orange); }
.yellow  a:hover { color: var(--color-yellow); }

.bg-grey   { background-color: var(--color-grey); }
.bg-red    { background-color: var(--color-red); }
.bg-green  { background-color: var(--color-green); }
.bg-blue   { background-color: var(--color-blue); }
.bg-pink   { background-color: var(--color-pink); }
.bg-orange { background-color: var(--color-orange); }
.bg-yellow { background-color: var(--color-yellow); }

li.grey:hover   * { color: var(--color-grey) !important; }
li.red:hover    * { color: var(--color-red) !important; }
li.green:hover  * { color: var(--color-green) !important; }
li.blue:hover   * { color: var(--color-blue) !important; }
li.pink:hover   * { color: var(--color-pink) !important; }
li.orange:hover * { color: var(--color-orange) !important; }
li.yellow:hover * { color: var(--color-yellow) !important; }

li.grey:hover:before {
  background-color: var(--color-grey);
  color: var(--color-grey);
}

li.red:hover:before {
  background-color: var(--color-red);
  color: var(--color-red);
}

li.green:hover:before {
  background-color: var(--color-green);
  color: var(--color-green);
}

li.blue:hover:before {
  background-color: var(--color-blue);
  color: var(--color-blue);
}

li.pink:hover:before {
  background-color: var(--color-pink);
  color: var(--color-pink);
}

li.orange:hover:before {
  background-color: var(--color-orange);
  color: var(--color-orange);
}

li.yellow:hover:before {
  background-color: var(--color-yellow);
  color: var(--color-yellow);
}

/* 1. Typography */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
  line-height: 1.3;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
}

body {
  color: var(--color-black);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

@media all and (min-width: 40rem) { body { font-size: 1.00rem; } }
@media all and (min-width: 45rem) { body { font-size: 1.07rem; } }
@media all and (min-width: 55rem) { body { font-size: 1.18rem; } }
@media all and (min-width: 60rem) { body { font-size: 1.28rem; } }
@media all and (min-width: 65rem) { body { font-size: 1.39rem; } }
@media all and (min-width: 70rem) { body { font-size: 1.50rem; } }
@media all and (min-width: 75rem) { body { font-size: 1.60rem; } }

h1, h2, h3, h4, h5, h6, figure, p, ul, blockquote {
  font-size: 100%;
  font-weight: normal;
  margin: 0;
  padding: 0;
}

/* 1-1. Big */

.typesetting-big {
  font-family: "Times New Roman", "Times", serif;
  text-align: center;
  font-size: 1.65rem;
  letter-spacing: -0.0325ex;
  word-spacing: -0.065ex;
  line-height: 1.1;
}

@media all and (min-width: 45rem) { .typesetting-big { font-size: 1.60rem; } }
@media all and (min-width: 55rem) { .typesetting-big { font-size: 1.76rem; } }
@media all and (min-width: 60rem) { .typesetting-big { font-size: 1.92rem; } }
@media all and (min-width: 65rem) { .typesetting-big { font-size: 2.09rem; } }
@media all and (min-width: 70rem) { .typesetting-big { font-size: 2.25rem; } }
@media all and (min-width: 75rem) { .typesetting-big { font-size: 2.41rem; } }

/* 1-2. Body */

.typesetting-body a {
  border-bottom: 0.15ex solid;
}

.typesetting-body a:hover {
  text-decoration: none;
}

.typesetting-body em {
  font-style: italic;
}

.typesetting-body strong {
  font-weight: normal;
}

.typesetting-body p,
.typesetting-body blockquote {
  margin-bottom: calc(1em * 1.3 * 0.5); /* 50% leading */
}

.typesetting-body blockquote p {
  margin-bottom: 0;
  text-indent: -0.4ex; /* hanging indents */
}

@media all and (min-width: 45rem) {

  .typesetting-body .layout-sidebar p,
  .typesetting-body .layout-sidebar ul,
  .typesetting-body .layout-sidebar h4,
  .typesetting-body .layout-sidebar h5 {
    padding: 0 0.15em;
  }

  .typesetting-body .layout-main p,
  .typesetting-body .layout-main ul,
  .typesetting-body .layout-main h4,
  .typesetting-body .layout-main h5 {
    padding: 0 0.3em;
  }
}

.typesetting-body h1,
.typesetting-body h2,
.typesetting-body h3 {
  border-top: 0.15ex solid;
  margin-top: calc(1em * 1.3 * 1); /* 100% leading */
  padding-top: calc(1em * 1.3 * 0.5); /* 50% leading */
  text-transform: uppercase;
  letter-spacing: 0.01ex;
  text-align: center;
}

.typesetting-body h1,
.typesetting-body h2 {
  padding: calc(1em * 1.3 * 2); /* 200% leading */
}

@media all and (min-width: 45rem) {

  .typesetting-body h1,
  .typesetting-body h2 {
    padding: calc(1em * 1.3 * 4); /* 400% leading */
  }

  .typesetting-body h1:first-child,
  .typesetting-body h2:first-child,
  .typesetting-body h3:first-child {
    margin-top: 0;
    border: none;
  }
}

.typesetting-body h5 {
  text-indent: 2.5ex;
}

.typesetting-body ul {
  list-style-type: none;
}

.typesetting-body li {
  margin-left: 2.5ex;
  text-indent: -2.5ex;
}

.typesetting-body li:before,
.typesetting-body .button:before {
  content: "";
  display: inline-block;
  width: 1.2ex;
  height: 1.2ex;
  border-radius: 0.6ex;
  margin-right: 1ex;
  border: 0.15ex solid;
}

.typesetting-body .button a,
.typesetting-body li a {
  text-decoration: none;
  border-bottom: none;
}

.typesetting-body .button:hover a:before {
  background-color: var(--color-black);
}

li:hover:before,
li.is-current:before {
  background-color: var(--color-black);
  color: var(--color-black);
  border: 0.15ex solid;
}

.typesetting-body .faq {
  margin-left: 2.5ex;
}

.typesetting-body .faq span {
  display: inline-block;
  width: 2.5ex;
  margin-left: -2.5ex;
}

/* 2. Defaults */

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

img {
  display: block;
  max-width: 100%;
}

/* 3. Images */

@media all and (min-width: 45rem) {

  .featured {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: -1;
  }
}


.typesetting-body figure {
  margin: calc(1.3em * 3) 0;
}

.typesetting-body figcaption {
  text-align: center;
  margin-top: calc(1em * 1.3 * 0.5); /* 50% leading */
}

.typesetting-body figure img {
  margin: 0 auto;
  max-height: 50vh;
  max-width: 50vw;
  object-fit: contain;
  object-position: center;
}

.typesetting-body figure.big img {
  max-height: 100vh;
  max-width: 100%;
  object-fit: contain;
}

/* 4. Layout */

body {
  max-width: 78rem;
  margin: 0 auto;
  padding: 0.6em 0.8em 0;
}

.layout-chunk {
  margin-bottom: calc(1em * 1.3 * 0.5); /* 50% leading */
}

header.layout-chunk {
  margin-bottom: calc(1em * 1.3 * 0.33); /* 33% leading */

}

.layout-grid {
  display: grid;
  grid-row-gap: calc(1em * 1.3 * 0.5); /* 50% leading */
  grid-column-gap: calc(1em * 1.3 * 0.5); /* 50% leading */
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.layout-grid-cols-2 > *,
.layout-grid-main > *,
.layout-grid-sidebar-main > * {
  grid-column: span 8;
  display: block;
}

@media all and (min-width: 45rem) {

  .layout-grid-cols-2 > * {
    grid-column: span 4;
  }

  .layout-grid-main .layout-main {
    grid-column: 2 / span 6;
  }

  .layout-grid-sidebar-main .layout-sidebar {
    grid-column: span 2;
  }
  .layout-grid-sidebar-main .layout-main {
    grid-column: span 6;
  }

  div.layout-grid-sidebar-main,
  div.layout-grid-main {
    border-top: 0.15ex solid;
    border-bottom: 0.15ex solid;
    padding-bottom: calc(1em * 1.3 * 2); /* 100% leading */
  }
}

@media all and (max-width: 45rem) {

  header.layout-grid {
    grid-row-gap: 0;
  }

  .layout-grid-sidebar-main.is-flipped-on-mobile .layout-sidebar {
    order: 1;
  }

  .layout-grid-main .layout-main h1:first-child {
    margin-top: 0;
  }
}

.layout-target {
  display: none;
}

/* 4. FX */

@media all and (min-width: 45rem) {

  .fx-punctuation a {
    transition: opacity 0.15s linear;
  }

  .fx-punctuation:hover a {
    opacity: 0;
  }

  .fx-punctuation:hover h1 a,
  .fx-punctuation:hover a:hover {
    opacity: 1;
  }
}