@charset "UTF-8";
/*
Use css variables to control broad styling
**********************************************************/
/*
Customise the colour palette
**********************************************************/
:root {
  --white: white;
  --black: hsla(0, 0%, 12%, 1);
  --bone: hsla(43, 46%, 88%, 1);
  --grey-100: hsla(43, 13%, 84%, 1);
  --grey-200: hsla(55, 3%, 73%, 1);
  --grey-300: hsla(70, 2%, 65%, 1);
  --grey-400: hsla(204, 4%, 59%, 1);
  --grey-500: hsla(180, 1%, 58%, 1);
  --grey-600: hsla(212, 4%, 53%, 1);
  --grey-700: hsla(213, 5%, 40%, 1);
  --grey-800: hsla(150, 2%, 37%, 1);
  --grey-900: hsla(33, 6%, 33%, 1);
  --blue-100: hsla(201, 21%, 76%, 1);
  --blue-200: hsla(201, 23%, 73%, 1);
  --blue-300: hsla(207, 33%, 67%, 1);
  --blue-400: hsla(205, 44%, 64%, 1);
  --blue-500: hsla(194, 31%, 54%, 1);
  --blue-600: hsla(220, 38%, 48%, 1);
  --blue-700: hsla(221, 49%, 44%, 1);
  --blue-800: hsla(201, 40%, 40%, 1);
  --blue-900: hsla(227, 37%, 31%, 1);
  --green-100: hsla(147, 13%, 87%, 1);
  --green-200: hsla(147, 19%, 81%, 1);
  --green-300: hsla(104, 16%, 77%, 1);
  --green-400: hsla(84, 38%, 72%, 1);
  --green-500: hsla(84, 37%, 62%, 1);
  --green-600: hsla(89, 29%, 49%, 1);
  --green-700: hsla(149, 37%, 41%, 1);
  --green-800: hsla(149, 26%, 34%, 1);
  --green-900: hsla(122, 28%, 34%, 1);
  --red-100: hsla(6, 39%, 75%, 1);
  --red-200: hsla(12, 41%, 66%, 1);
  --red-300: hsla(14, 67%, 54%, 1);
  --red-400: hsla(9, 61%, 50%, 1);
  --red-500: hsla(5, 50%, 45%, 1);
  --red-600: hsla(359, 47%, 41%, 1);
  --red-700: hsla(353, 42%, 39%, 1);
  --red-800: hsla(347, 44%, 40%, 1);
  --brown-100: hsla(24, 47%, 73%, 1);
  --brown-200: hsla(33, 15%, 67%, 1);
  --brown-300: hsla(24, 20%, 64%, 1);
  --brown-400: hsla(14, 37%, 56%, 1);
  --brown-500: hsla(33, 8%, 53%, 1);
  --brown-600: hsla(12, 38%, 39%, 1);
  --brown-700: hsla(12, 35%, 34%, 1);
  --brown-800: hsla(10, 27%, 32%, 1);
  --brown-900: hsla(17, 11%, 27%, 1);
  --yellow-300: hsla(35, 63%, 78%, 1);
  --yellow-500: hsla(43, 89%, 53%, 1);
  --yellow-700: hsla(52, 55%, 47%, 1);
  --orange-300: hsla(31, 45%, 73%, 1);
  --orange-500: hsla(17, 63%, 63%, 1);
  --orange-700: hsla(29, 55%, 68%, 1);
  --pink-300: hsla(18, 45%, 83%, 1);
  --pink-500: hsla(347, 45%, 75%, 1);
  --pink-700: hsla(358, 34%, 34%, 1);
}

/*
Base styling
**********************************************************/
/* Broad resets */
*, *::before, *::after {
  box-sizing: border-box;
}

*:not(dialog) {
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select {
  font: inherit;
}

#root, #__next {
  isolation: isolate;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: var(--font-body);
  font-weight: var(--weight-normal);
  line-height: var(--base-line-height);
  /* Variable font-scaling */
  --min-fs-rem: var(--min-fs) * 1rem;
  --max-fs-rem: var(--max-fs) * 1rem;
  --min-vw-rem: var(--min-vw) * 1rem;
  --slope: (var(--max-fs) - var(--min-fs)) * (100vw - var(--min-vw-rem)) / (var(--max-vw) - var(--min-vw));
  font-size: clamp(var(--min-fs-rem), var(--min-fs-rem) + var(--slope), var(--max-fs-rem));
  font-stretch: var(--font-stretch);
  color: var(--clr-text);
  background: var(--clr-bg);
}
body main,
body > aside,
body > footer {
  padding: var(--gap);
  max-width: var(--content-limit);
  margin-inline: auto;
}

/* Hide, but not for screen-readers */
.visually-hidden {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: 0;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

table {
  width: 100%;
  border-collapse: collapse;
  display: block;
}
table input,
table textarea,
table select {
  padding: 0 var(--gap--ss);
}

tr {
  border-bottom: var(--border-width) solid currentcolor;
}

td,
th {
  text-align: start;
  vertical-align: baseline;
  padding: var(--gap--ss);
}

/* Classed elements start here */
/* Use h{n}-style variants in the markup to control sizes */
h1,
.h1-style,
h2,
.h2-style,
h3,
.h3-style,
h4,
.h4-style,
h5,
.h5-style {
  line-height: 1;
  margin-block-end: 0.5cap;
  text-wrap: balance;
  overflow-wrap: break-word;
  font-weight: var(--weight-heading);
  font-family: var(--font-heading);
  color: var(--clr-heading);
}

h1,
.h1-style {
  margin-block-start: 0.5cap;
  font-size: var(--h1);
}

h2,
.h2-style {
  font-size: var(--h2);
}

h3,
.h3-style {
  font-size: var(--h3);
}

h4,
.h4-style {
  font-size: var(--h4);
}

h5,
.h5-style {
  font-size: var(--h5);
}

h6,
.h6-style {
  font-size: var(--h6);
  font-weight: var(--weight-heavy);
}

a {
  text-decoration: underline;
  color: currentcolor;
}
a:hover {
  text-decoration-thickness: var(--border-width);
}

p {
  text-wrap: pretty;
  overflow-wrap: break-word;
  max-width: var(--type-measure);
  margin-block-end: var(--gap);
}
p:last-of-type:not(figcaption p) {
  margin-block-end: 0;
}

[itemprop=articleBody] {
  margin-block-end: var(--gap);
}

figcaption {
  margin-block-start: var(--gap--s);
}

dt,
strong,
th {
  font-weight: var(--weight-heavy);
}

ul,
ol {
  padding-inline-start: var(--gap);
}

ul,
ol,
dl {
  margin-block-end: var(--gap);
}

ul {
  list-style-position: outside;
  list-style-type: square;
}

ol {
  list-style-position: outside;
}

li {
  max-width: var(--type-measure);
  margin-block-end: var(--gap--s);
}

dl {
  overflow: auto;
}

dt,
dd {
  margin-block-end: var(--gap--ss);
}

dt {
  float: left;
  min-width: 12ch;
}

blockquote p {
  margin: var(--gap);
  font-family: var(--serif);
}
blockquote p:before, blockquote p:after {
  display: inline-block;
  transform: scale(1.25);
}
blockquote p:before {
  content: "“";
  margin-inline-end: calc(var(--gap--ss) / 2);
}
blockquote p:after {
  content: "”";
}

hr {
  border: 0;
  height: var(--border-width);
  background: var(--clr-border);
  margin-block: var(--gap);
}

p > img,
p > figure {
  margin-block: var(--gap);
}

table,
pre {
  margin-block: var(--gap);
}

pre,
code {
  font-family: var(--mono);
  font-size: smaller;
}

sup {
  font-size: x-small;
}
sup a {
  text-decoration: none;
}

.small,
small {
  font-size: smaller;
}

.list-bare {
  list-style: none;
  padding: 0;
}

/*
Components & layout
**********************************************************/
.header {
  border-bottom: var(--border-width) solid var(--clr-border);
  background: var(--clr-bg--header);
  font-size: var(--header-size);
  font-weight: var(--weight-header);
}
.header__container {
  display: grid;
  gap: 0 var(--gap);
  padding: var(--gap--s) var(--gap);
  /* limit content width (omit for full-width) */
  max-width: var(--content-limit);
  margin-inline: auto;
  grid-template-columns: auto 1fr;
}
@media (min-width: 720px) {
  .header__container {
    grid-template-columns: auto 1fr auto;
  }
}
.header__container > * {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.header__container > p,
.header__container search {
  font-size: 1rem;
  font-weight: var(--weight-normal);
}
.header [rel=home] {
  text-decoration: none;
}
.header search {
  justify-self: end;
}
.header search form {
  position: relative;
}
.header search svg {
  position: absolute;
  z-index: -1;
  width: var(--gap);
}
.header search input {
  width: var(--gap);
  border: 0;
  background-color: transparent;
  cursor: pointer;
}
.header search input::placeholder {
  opacity: 0;
}
.header search input:focus {
  width: auto;
  outline: 0;
  margin-left: var(--gap--b);
  cursor: auto;
}
.header search input:focus::placeholder {
  opacity: 1;
}
@media (max-width: 720px) {
  .header search {
    grid-column: span 2;
  }
}
@media (min-width: 720px) {
  .header {
    position: sticky;
    top: 0;
    z-index: 10;
  }
}

.site-navigation {
  justify-self: center;
}
.site-navigation > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--gap);
  align-content: baseline;
  margin-block-end: 0;
}
.site-navigation li {
  margin-block-end: 0;
}
.site-navigation li.active {
  font-weight: var(--weight-heavy);
}
.site-navigation li a {
  text-decoration: none;
}
.site-navigation li a:hover {
  text-decoration: underline;
}

.auto-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--gap);
}
@media (max-width: 720px) {
  .auto-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--base-unit--b) var(--base-unit);
  }
}

.article {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.article__list {
  padding-inline-start: 0;
}
.article-thumb {
  display: grid;
  grid-template-rows: subgrid;
  gap: var(--gap--s);
  grid-row: span 4;
}
.article-thumb > a {
  display: contents;
}
.article-thumb__image figcaption {
  display: none;
}
.article__header {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.article__header [itemprop=headline] a {
  text-decoration: none;
}
.article__header [itemprop=headline] a:hover {
  text-decoration: underline;
}

.paginator {
  display: flex;
  gap: var(--gap);
}

/*
Support for non-latin languages (can be removed if not required)
**********************************************************/
/**
 * Bidirectional (bidi) text support.
 * See: https://www.w3.org/International/articles/inline-bidi-markup/#cssshim
 */
[dir=ltr],
[dir=rtl] {
  unicode-bidi: isolate;
}

bdo[dir=ltr],
bdo[dir=rtl] {
  unicode-bidi: isolate-override;
}

/**
 * Preferred font for Japanese language.
 */
:lang(ja) {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Meiryo UI", sans-serif;
}

/**
 * Preferred font for Korean language.
 */
:lang(ko) {
  font-family: GulimChe, Gulim, sans-serif;
}

/**
 * Preferred font for simplified Chinese (PRC) language.
 */
:lang(zh-cn) {
  font-family: "PingFang SC", SimHei, sans-serif;
}

/**
 * Preferred font for traditional Chinese (Taiwan, Hong Kong) language.
 */
:lang(zh-tw) {
  font-family: "PingFang TC", PMingLiU, sans-serif;
}

/**
 * Suppress `text-decoration` in some RTL languages for better legibility.
 */
[lang|=ar] a:hover,
[lang|=fa] a:hover,
[lang|=ur] a:hover {
  text-decoration: none;
}

/**
 * Computer code should be LTR.
 */
[dir=rtl] code {
  direction: ltr;
}