/* https://open-props.style/#sizes */
:root {
  --size-3: 1rem;
  --size-4: 1.25rem;
  --size-5: 1.5rem;
  --size-6: 1.75rem;
  --size-7: 2rem;
  --size-8: 3rem;
  --size-9: 4rem;
  --size-10: 5rem;
  --size-fluid-1: clamp(0.5rem, 1vw, 1rem);
  --size-fluid-2: clamp(1rem, 2vw, 1.25rem);
  --size-fluid-3: clamp(1.5rem, 3vw, 2rem);
  --size-fluid-4: clamp(1.5rem, 4vw, 2.5rem);
  --size-fluid-5: clamp(2rem, 5vw, 5rem);
  --size-fluid-6: clamp(3rem, 7vw, 5rem);
  --size-fluid-7: clamp(4rem, 9vw, 6rem);
  --brand-primary: #364048;
  --brand-secondary: #1786e0;
  --color-white: #fff;
  --color-grey-1: #f1f2f4;
  --color-grey-2: #c5cdd3;
  --color-grey-3: #596873;
  --radius-1: 4px;
  --radius-2: 8px;
  --radius-3: 12px;
}

/* Move to utils */
.mb-2 {
  margin-bottom: var(--size-7);
}

/* https://github.com/hankchizljaw/modern-css-reset */
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
ul,
ol {
  margin: 0;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a {
  color: #222;
  text-decoration: none;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
*::before,
*::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
html {
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrapper {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

section {
  padding: 2rem 0;
}

.grid--3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 2rem;
}

.o-wrapper {
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.layout {
  display: grid;
  grid-template-columns: minmax(10px, 1fr);
  grid-gap: 2rem;
}

@media (min-width: 700px) {
  .layout {
    grid-template-columns: minmax(10px, 1fr) 300px;
  }
}
.c-brand {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 2.5rem;
  text-decoration: none;
  font-size: 1.5rem;
}

.c-brand__icon {
  --size: 40px;
  width: var(--size);
  height: var(--size);
  margin-inline-end: 0.75rem;
}

.c-brand__label {
  font-weight: bold;
}

.c-header {
  background: var(--brand-primary);
  padding-top: 2rem;
}

.c-header__top {
  margin-bottom: 1rem;
}

.c-header__wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.c-header__social {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #c5cdd3;
  font-size: 1rem;
}

.c-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.c-nav__item a {
  display: block;
  padding-top: 1rem;
  padding-bottom: 1rem;
  color: #bcd2e7;
}
.c-nav__item:after {
  content: "";
  display: block;
  border: 2px solid transparent;
  border-radius: var(--radius-1);
}
.c-nav__item.is-active a {
  color: #fff;
  font-weight: bold;
}
.c-nav__item.is-active::after {
  border-color: #fff;
}

.c-hero__top {
  position: relative;
  text-align: center;
  padding: var(--size-fluid-5) var(--size-fluid-2);
  background: var(--brand-primary) linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
  overflow: hidden;
}

.c-hero__top > * + * {
  margin-top: var(--size-fluid-1);
}

.c-hero__title {
  color: var(--color-white);
  font-size: var(--size-fluid-4);
}

.c-hero__desc {
  font-size: var(--size-fluid-2);
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.c-hero__desc,
.c-hero__author {
  color: var(--color-grey-2);
}

.c-hero__desc a,
.c-hero__author a {
  color: inherit;
}

.c-hero__decoration {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 3rem;
  pointer-events: none;
}

.c-hero__bottom {
  padding: 1rem;
  background-color: #eef0f2;
}
.c-hero__bottom .o-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.c-tag {
  display: inline-flex;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 100px;
  font-size: 14px;
  padding: 4px 16px;
  text-transform: capitalize;
  transition: background-color 0.25s ease-in-out;
}
.c-tag:hover {
  background-color: #1578c9;
}

.c-section {
  padding: var(--size-fluid-3) 1rem;
  background-color: #eef0f2;
}

.c-section__title {
  font-size: var(--size-fluid-2);
  margin-bottom: var(--size-6);
}

.c-section[data-name=about] {
  background-color: #fff;
}

.c-section[data-place=post] {
  padding: 1.5rem 0 0;
  margin-top: 1.5rem;
  border-top: 1px solid #e6e6e6;
}

.c-section[data-name=coffee] {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem;
  margin-top: 1.5rem;
  border-radius: var(--radius-2);
}
.c-section[data-name=coffee] .c-section__title {
  margin-bottom: var(--size-2);
}
.c-section[data-name=coffee] svg {
  --size: var(--size-8);
  width: var(--size);
  height: var(--size);
}

.c-section[data-name=intro] {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ebecef;
  margin-top: var(--size-5);
  border-radius: var(--radius-2);
  padding: var(--size-fluid-5) var(--size-fluid-2);
}
.c-section[data-name=intro] a {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  max-width: 850px;
}
@media (min-width: 840px) {
  .c-section[data-name=intro] a {
    flex-direction: row;
  }
}
.c-section[data-name=intro] a:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.c-section[data-name=intro] img {
  width: 350px;
  max-width: 100%;
  border-radius: var(--radius-3);
  box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.15);
  transition: 0.3s ease-out;
}
.c-section[data-name=intro] div {
  flex: 1;
}
.c-section[data-name=intro] p {
  color: var(--color-grey-3);
}
@media (hover: hover) {
  .c-section[data-name=intro]:hover img {
    transform: translateY(-3px);
  }
}

.c-section[data-name=speaking] {
  padding-top: var(--size-fluid-5);
  padding-bottom: var(--size-fluid-5);
}
.c-section[data-name=speaking] .o-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 2rem;
}
@media (min-width: 850px) {
  .c-section[data-name=speaking] .o-wrapper {
    grid-template-columns: 1fr 2fr;
  }
}
.c-section[data-name=speaking] img {
  border-radius: 12px;
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.15);
}
.c-section[data-name=speaking] figcaption {
  font-size: 12px;
  margin-top: 0.35rem;
}
.c-section[data-name=speaking] ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 1rem;
}
.c-section[data-name=speaking] .c-section__title {
  margin-bottom: 0.5rem;
}
.c-section[data-name=speaking] hr {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  border: 0;
  height: 1px;
  background-color: lightgrey;
}
.c-section[data-name=speaking] time {
  font-size: 0.85rem;
}
.c-section[data-name=speaking] small {
  font-weight: 400;
}

.c-person {
  display: flex;
  flex-wrap: wrap;
  max-width: 70ch;
}

.c-person__avatar {
  flex: 0 0 var(--size-10);
  width: var(--size-10);
  height: var(--size-10);
  border-radius: 50%;
}

.c-person__content {
  flex: 1;
  padding-inline-start: var(--size-3);
}
.c-person__content a {
  text-decoration: underline;
}
.c-person__content a:hover {
  color: var(--brand-secondary);
}

.c-social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.c-social-link svg {
  margin-inline-end: var(--size-2);
}
.c-social-link.light span {
  color: #fff;
}

/* footer */
.site-footer {
  padding: var(--size-4) var(--size-3);
  color: #fff;
  font-size: 14px;
  background-color: var(--brand-secondary);
}
.site-footer a {
  color: inherit;
}
.site-footer .wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.site-footer .wrapper > * + * {
  margin-top: var(--size-2);
}
.site-footer ul {
  display: flex;
  gap: 0.5rem;
}

.demo {
  min-height: 250px;
  display: flex;
  flex-direction: column;
  background-color: #d7ecfd;
  border-radius: 8px;
}

.demo-wrapper {
  position: relative;
  max-width: 100%;
  display: flex;
  align-items: center;
  resize: horizontal;
  overflow: hidden;
  flex: 1;
  border-right: solid 2px rgba(0, 0, 0, 0.1);
  padding-right: 3rem;
  padding-left: 1rem;
}

.demo-wrapper:after {
  content: "Resize me";
  position: absolute;
  right: 0;
  top: 50%;
  writing-mode: tb-rl;
  transform: translateY(-50%);
  font-size: 13px;
  line-height: 1.2;
}

.demo__actions {
  padding: 0.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.demo__actions label {
  user-select: none;
}

.demo__actions input:checked + label {
  font-weight: bold;
}

.breadcrumbs {
  --wrap: nowrap;
  display: flex;
  list-style: none;
  flex-wrap: var(--wrap);
}

.breadcrumbs__item:not(:last-child):after {
  content: ">";
  margin-left: 0.5rem;
  margin-right: 1rem;
}

.demo-object-fit #demo-image {
  --object-fit: initial;
  width: 100%;
  height: 140px;
  object-fit: var(--object-fit);
}

.demo-long-content .section-header {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.demo-long-content h3 {
  flex: 1;
}
.demo-long-content h3.truncated {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 1rem;
}
.demo-long-content .more {
  --size: 6px;
  appearance: none;
  border: 0;
}

.demo-spacing .space {
  background-color: tomato;
  align-self: normal;
}
.demo-spacing .section-header {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.demo-spacing h3 {
  flex: 1;
  border: 1px solid deeppink;
}
.demo-spacing h3.truncated {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 1rem;
}
.demo-spacing .more {
  --size: 6px;
  appearance: none;
  border: 0;
}

.demo-auto-fill-fit {
  min-height: 300px;
}
.demo-auto-fill-fit .demo-wrapper {
  justify-content: flex-start;
}
.demo-auto-fill-fit .wrapper {
  min-width: 0;
  --sizing: auto-fit;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(var(--sizing), minmax(100px, 1fr));
  grid-gap: 1rem;
}
.demo-auto-fill-fit .wrapper .card--outline {
  display: none;
}
.demo-auto-fill-fit .wrapper.checked .card--outline {
  display: block;
}
.demo-auto-fill-fit .card--outline {
  border: 1px dashed;
  border-radius: 5px;
  min-height: 20px;
}
.demo-auto-fill-fit .card__thumb {
  height: 90px;
  background-color: cornflowerblue;
}
.demo-auto-fill-fit .card__content {
  padding: 0.5rem;
  background-color: lightsteelblue;
}
.demo-auto-fill-fit p {
  font-size: 13px !important;
}

.demo-bg-repeat {
  min-height: 300px;
}
.demo-bg-repeat .demo-wrapper {
  justify-content: flex-start;
}
.demo-bg-repeat .hero {
  --bg-repeat: ;
  flex: 1;
  min-height: 200px;
  background: #97b5cd url("../img/demos/basha.jpg") center/contain var(--bg-repeat, repeat);
}

.demo-grid-fixed {
  min-height: 300px;
}
.demo-grid-fixed .demo-wrapper {
  justify-content: flex-start;
  overflow-x: auto;
}
.demo-grid-fixed .wrapper {
  --cols: 1fr 100px;
  flex: 1;
  display: grid;
  grid-template-columns: var(--cols);
  grid-gap: 1rem;
}
.demo-grid-fixed .main,
.demo-grid-fixed .aside {
  display: grid;
  place-content: center;
  min-height: 100px;
  background-color: lightblue;
  text-align: center;
  padding: 1rem;
}
.demo-grid-fixed .main p,
.demo-grid-fixed .aside p {
  font-size: 13px;
}
.demo-grid-fixed .hero {
  --bg-repeat: ;
  flex: 1;
  min-height: 200px;
  background: #97b5cd url("../img/demos/basha.jpg") center/contain var(--bg-repeat, repeat);
}

.demo-vars-fallback {
  min-height: 300px;
}
.demo-vars-fallback .element {
  min-height: 150px;
  flex: 1;
  background-color: var(--brand-color);
  outline: solid 1px rgba(0, 0, 0, 0.5);
}

.demo-fixed-sizes {
  min-height: 300px;
}
.demo-fixed-sizes .hero {
  background-color: lightblue;
  height: 80px;
  padding: 1rem;
}

.demo-flex-min-content {
  min-height: 300px;
}
.demo-flex-min-content .wrapper {
  flex: 1;
}
.demo-flex-min-content .card {
  display: flex;
  max-width: 230px;
  margin-left: auto;
  margin-right: auto;
  padding: 1rem;
  background-color: #fff;
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.05);
  border-radius: 8px;
}
.demo-flex-min-content .card__thumb {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.1);
}
.demo-flex-min-content .card__content {
  flex: 1;
  padding-left: 0.5rem;
  overflow-wrap: break-word;
  outline: dashed 1px deeppink;
}

.demo-grid-min-content {
  min-height: 300px;
}
.demo-grid-min-content .wrapper {
  flex: 1;
  min-width: 0;
}
.demo-grid-min-content .page {
  display: grid;
  grid-template-columns: 1fr 100px;
  grid-gap: 1rem;
}
.demo-grid-min-content .page__item {
  padding: 1rem;
  background-color: #fff;
  min-height: 200px;
  border-radius: 8px;
}
.demo-grid-min-content .slider {
  display: flex;
  overflow-x: auto;
}
.demo-grid-min-content .slider__item {
  --size: 50px;
  flex: 0 0 var(--size);
  width: var(--size);
  height: var(--size);
  background-color: antiquewhite;
  margin-right: 1rem;
}

.demo-img-max-width {
  height: 300px;
}
.demo-img-max-width .wrapper {
  flex: 1;
  min-width: 0;
}
.demo-img-max-width img {
  max-width: initial;
}

.demo-pos-sticky-grid {
  height: 300px;
}
.demo-pos-sticky-grid .demo-wrapper {
  padding: 1rem;
  resize: none;
  overflow: initial;
  border-right: 0;
  padding-right: 0;
}
.demo-pos-sticky-grid .demo-wrapper:after {
  display: none;
}
.demo-pos-sticky-grid .page {
  align-self: start;
  display: grid;
  grid-template-columns: minmax(10px, 1fr) 100px;
  grid-gap: 1rem;
  overflow-y: auto;
  height: 200px;
}
.demo-pos-sticky-grid .page__item {
  padding: 1rem;
  background-color: #fff;
  border-radius: 8px;
}
.demo-pos-sticky-grid .page__item--main {
  height: 500px;
}
.demo-pos-sticky-grid .page__item--aside {
  position: sticky;
  top: 0;
  min-height: initial;
}
.demo-pos-sticky-grid .slider {
  display: flex;
  overflow-x: auto;
}
.demo-pos-sticky-grid .slider__item {
  --size: 50px;
  flex: 0 0 var(--size);
  width: var(--size);
  height: var(--size);
  background-color: antiquewhite;
  margin-right: 1rem;
}
.demo-pos-sticky-grid .content > * + * {
  margin-top: 1rem;
}
.demo-pos-sticky-grid .content p {
  color: grey;
}

.demo-scroll-chain {
  height: 300px;
}
.demo-scroll-chain .demo-wrapper:after {
  display: none;
}
.demo-scroll-chain .demo-wrapper {
  padding: 1rem;
  resize: none;
  overflow: initial;
  border-right: 0;
  padding: 0;
  height: 200px;
}
.demo-scroll-chain .demo-wrapper:after {
  display: none;
}
.demo-scroll-chain .body {
  position: relative;
  padding: 1rem;
}
.demo-scroll-chain .modal {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 0 !important;
}
.demo-scroll-chain .modal__body {
  width: 250px;
  max-height: 150px;
  overflow-y: auto;
  background-color: #fff;
  padding: 1rem;
  margin-top: 2rem;
}
.demo-scroll-chain .page {
  overflow-y: auto;
  overscroll-behavior-y: contain;
  height: 100%;
}
.demo-scroll-chain .page * + * {
  margin-top: 1rem;
}
.demo-scroll-chain img {
  width: 150px;
}

.demo-scrollbar {
  height: 300px;
}
.demo-scrollbar .demo-wrapper {
  padding: 1rem;
  resize: none;
  overflow: initial;
  border-right: 0;
  padding: 0;
  height: 200px;
}
.demo-scrollbar .demo-wrapper:after {
  display: none;
}
.demo-scrollbar .body {
  position: relative;
  padding: 1rem;
}
.demo-scrollbar .page {
  overflow-y: scroll;
  height: 100%;
}
.demo-scrollbar .page * + * {
  margin-top: 1rem;
}
.demo-scrollbar img {
  width: 150px;
}

.demo-space-between .page {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
}
.demo-space-between .item {
  --size: 90px;
  flex: 0 0 var(--size);
  width: var(--size);
  height: var(--size);
  background-color: #000;
  opacity: 0.25;
}

.demo__actions {
  padding: 0.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.demo__actions label {
  user-select: none;
}

.demo__actions input:checked + label {
  font-weight: bold;
}

.demo-flexbox-stretch {
  min-height: 400px;
}
.demo-flexbox-stretch .demo-wrapper {
  padding: 1rem;
}
.demo-flexbox-stretch .content {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem;
}
.demo-flexbox-stretch p {
  flex: 1;
}
.demo-flexbox-stretch img {
  flex: 0 0 150px;
  width: 150px;
  object-fit: cover;
}

.demo-button-width {
  min-height: 200px;
}
.demo-button-width .demo-wrapper {
  padding: 1rem;
  border-right: 0;
  resize: none;
  overflow: initial;
}
.demo-button-width .demo-wrapper:after {
  display: none;
}
.demo-button-width .actions-list {
  display: flex;
  gap: 2rem;
}
.demo-button-width .actions-list.fixed .button {
  min-width: 80px;
}
.demo-button-width .button {
  display: inline-block;
  padding: 0.5rem 1rem;
  color: #fff;
  background-color: #1786e0;
  text-decoration: none;
  border-radius: 12px;
  text-align: center;
}

:root {
  --wrapper: 1170px;
  --wrapper-padding: 16px;
  --tip-header-offset: max(
    1rem,
    calc(
      (min(100%, 100vw) - calc(var(--wrapper) - var(--wrapper-padding) * 2)) / 2
    )
  );
}

.tip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--size-fluid-1);
  padding: 3rem 1rem;
  background: var(--brand-secondary);
  margin-bottom: 1rem;
  max-width: 870px;
  border-bottom-right-radius: 50px;
  padding-left: var(--tip-header-offset);
  max-width: calc(870px + var(--tip-header-offset));
}
.tip-header ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.tip-header h1 {
  color: var(--color-white);
  font-size: clamp(1.75rem, 5vw, 2.5rem);
}

.c-link:hover {
  color: var(--brand-secondary);
}

.prose {
  max-width: 75ch;
}
.prose p {
  font-size: 1.05rem;
}
.prose a {
  text-decoration: underline;
}
.prose img {
  border-radius: var(--radius-2);
  border: 1px solid #e6e6e6;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.05);
}
.prose pre[class*=language-] {
  border-radius: var(--radius-2);
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.25);
  padding: 1rem;
  margin-top: 2rem;
}
.prose code[class*=language-],
.prose pre[class*=language-] {
  font-size: 16px;
  line-height: 1.65;
  overflow-wrap: break-word;
}
.prose > ul,
.prose > ol {
  list-style: initial;
  margin-left: var(--size-3);
}
.prose p code,
.prose li code {
  background-color: #e4ebf1;
  color: #374048;
  padding: 0.15em 0.35em;
  border-radius: 5px;
}
.prose h2 + p,
.prose h3 + p {
  margin-top: 0.5rem;
}
.prose blockquote {
  border-left: 3px solid;
  padding-left: 1rem;
}

.prose > * + * {
  margin-top: 2rem;
}

.postlist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 2rem;
}
.all-tips {
  display: none;
}
@media (min-width: 900px) {
  .all-tips {
    display: block;
  }
}

.postlist-aside {
  position: sticky;
  top: 1rem;
  margin-left: 0.8rem;
  max-height: 90vh;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}
.postlist-aside li::marker {
  color: var(--color-grey-2);
}
.postlist-aside li:not(:last-child) {
  margin-bottom: 0.25rem;
}
.postlist-aside a {
  font-size: 0.85rem;
}
.postlist-aside .active {
  color: var(--brand-secondary);
  font-weight: bold;
}
.postlist-aside .active a {
  color: currentColor;
}
.postlist-aside .active::marker {
  color: currentColor;
}

.postlist-item {
  position: relative;
  display: flex;
  align-items: flex-start;
}
.postlist-item:hover img {
  box-shadow: 0 5px 15px 5px rgba(0, 0, 0, 0.05);
}
.postlist-item h3 {
  font-weight: normal;
  font-size: clamp(1rem, 2.5vw, 1.1rem);
}
.postlist-item img {
  flex: 0 0 120px;
  min-width: 0;
  margin-right: var(--size-fluid-1);
  border-radius: var(--radius-3);
  transition: box-shadow 0.3s ease-out;
}
.postlist-item > a {
  flex: 1;
}
@media (min-width: 800px) {
  .postlist-item {
    flex-direction: column;
    align-items: flex-start;
  }
  .postlist-item img {
    margin-right: 0;
    margin-bottom: 0.5rem;
    flex: initial;
  }
}
.postlist-item a:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.article-header {
  max-width: 870px;
  padding-top: var(--size-fluid-3);
  padding-bottom: var(--size-fluid-3);
  margin-bottom: var(--size-fluid-3);
  border-bottom: clamp(1px, 0.3vw, 5px) solid #1786e0;
}
.article-header ul {
  display: flex;
  gap: var(--size-fluid-1);
}
.article-header h1 {
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  line-height: 1.35;
}

.post-pagination {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding-top: 1.5rem;
  margin-top: 1.5rem;
  border-top: 1px solid #e6e6e6;
}
@media (min-width: 400px) {
  .post-pagination {
    grid-template-columns: 1fr 1fr;
  }
}
.post-pagination span {
  display: block;
  font-size: 0.75rem;
}
.post-pagination li {
  position: relative;
}
@media (min-width: 400px) {
  .post-pagination li.next {
    text-align: end;
  }
}
.post-pagination a {
  font-weight: 600;
}
.post-pagination a::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}
.post-pagination a:hover {
  color: var(--brand-secondary);
}

/*# sourceMappingURL=main.css.map */