:root {
  --bgr-color-dark: #313030;
  --bgr-color-light: white;

  --checkbox-color-dark: white;
  --checkbox-color-light: #ffd465;

  --text-color-dark: white;
  --text-color-light: #313030;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Helvetica, Arial, sans-serif;
}

body.dark,
body.dark .content {
  background-color: var(--bgr-color-dark);
  color: var(--bgr-color-light);
}

* {
  box-sizing: border-box;
}

.noscroll {
  overflow: hidden;
}

/*
    THEME TOGGLE
*/

.checkbox__input {
  width: 0;
  height: 0;
  opacity: 0;
  border: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
  visibility: hidden;
  position: absolute;
}

.checkbox__label {
  position: fixed;
  top: 80px;
  right: 46px;
  display: block;
  -webkit-appearence: none;
  -moz-appearence: none;
  appearence: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  cursor: pointer;
  background-color: var(--text-color-light);
  transition: 0.3s;
}

.checkbox__label::after {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background-color: var(--bgr-color-light);
  border-radius: 50%;
  transform: translate(120%, -120%);
  transition: 0.3s;
}

.checkbox__label::before {
  content: "";
  display: block;
  position: absolute;
  top: -10px;
  left: -10px;
  width: 34px;
  height: 34px;
  background: url(/assets/sun-rays.svg) center no-repeat;
  background-size: contain;
  border-radius: 50%;
  transition: 0.3s;
}

.checkbox__input:checked~.checkbox__label {
  background-color: var(--checkbox-color-dark);
  transform: scale(1.4);
}

.checkbox__input:checked~.checkbox__label::after {
  transform: translate(30%, -30%);
  background-color: var(--bgr-color-dark);
}

.checkbox__input:checked~.checkbox__label::before {
  opacity: 0;
}

@media (max-width: 1100px) {
  .checkbox__label {
    top: 34px;
    right: 96px;
  }
}

@media (max-width: 940px) {
  .checkbox__label {
    display: none;
  }
}

/*
    LOGO
*/

.logo {
  display: flex;
  align-items: center;
  text-decoration: inherit;
  color: inherit;
  width: 200px;
  padding: 0 !important;
}

.logo span {
  margin-left: 10px;
  line-height: 24px;
  font-size: 20px;
  font-family: Helvetica, Arial, sans-serif;
  letter-spacing: 2px;
  font-weight: 300;
}

/*
    CONTENT
*/

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background-color: var(--bgr-color-light);
  color: var(--text-color-light);
  transition: 0.3s;
  min-height: calc(100vh - 220px);
}

.content--blurred {
  filter: blur(8px);
}

.content__header {
  user-select: none;
  margin: 20px 0 50px;
  padding: 70px 20px 30px;
  display: flex;
  justify-content: flex-start;
  max-width: 1220px;
  width: 100%;
}

@media (max-width: 940px) {
  .content__header {
    width: 100%;
    margin: 0;
    justify-content: space-between;
    padding: 50px 20px;
  }

  .content__header .logo {
    max-width: 1220px;
  }
}

@media (min-width: 940px) and (max-width: 1400px) {
  .content__header {
    max-width: 980px;
    padding: 70px 20px 30px;
    margin: 0;
    margin-bottom: 40px;
  }

  .content__header .logo {
    width: 160px;
  }

  .content__header .logo span {
    font-size: 16px;
    line-height: 18px;
  }

  .navigation {
    font-size: 14px;
  }
}

.navigation {
  display: flex;
  align-items: center;
  margin-left: 60px;
  flex: 100px;
}

.navigation>ul {
  display: flex;
  list-style-type: none;
  padding: 0;
  font-size: 1.2em;
  line-height: 1.55em;
  letter-spacing: 1px;
}

.navigation>ul li {
  position: relative;
}

.navigation>ul>li~li {
  margin-left: 40px;
}

.navigation>ul li a {
  color: var(--bgr-color-dark);
}

.dark .navigation>ul li a {
  color: var(--bgr-color-light);
}

.navigation__dropdown {
  position: absolute;
  top: 40px;
  left: 0;
  background-color: var(--checkbox-color-light);
  border-radius: 12px;
  padding: 20px 24px;
  min-width: 340px;
  z-index: 100;
}

.navigation__dropdown>ul {
  padding: 0;
  list-style-type: none;
}

.navigation__dropdown>ul>li~li {
  margin-top: 4px;
}

.navigation__dropdown>ul>li>a {
  color: var(--text-color-light) !important;
  font-size: 1rem;
  text-decoration: underline;
  opacity: 0.85;
  padding: 4px;
  transition: 0.2s opacity cubic-bezier(0.6, -0.28, 0.735, 0.045)
}

.navigation__dropdown>ul li svg {
  margin-bottom: -3px;
}

.navigation__dropdown>ul li a:hover {
  opacity: 1;
}

.join-the-community {
  justify-content: flex-end;
  flex: 140px 0 0;
  display: flex;
  align-items: center;
  position: relative;
}

.burger-menu {
  justify-content: flex-end;
  flex: auto 0 0;
  align-items: center;
  display: none;
}

.burger-menu .open-button {
  border: 0;
  background: transparent;
  margin: 0;
  padding: 0;
  margin-right: 16px;
  cursor: pointer;
  color: var(--text-color-light);
}

body.dark .burger-menu .open-button {
  color: var(--text-color-dark);
}

.burger-menu__dropdown {
  position: fixed;
  top: 0;
  left: 0;
  background-color: var(--checkbox-color-light);
  width: 100%;
  height: 100vh;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 3rem;
}

.burger-menu__dropdown ul {
  list-style-type: none;
  padding: 0;
}

.burger-menu__dropdown ul li {
  font-size: 24px;
  font-weight: bold;
}

.burger-menu__dropdown li~li {
  margin-top: 20px;
}

.burger-menu__dropdown li a {
  font-size: 22px;
  font-weight: bold;
  color: var(--text-color-light);
}

.burger-menu__dropdown .close-button {
  border: 0;
  background: transparent;
  margin: 0;
  padding: 0;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  padding: 36px;
  color: var(--text-color-light);
}

.burger-menu__dropdown ul ul {
  list-style-type: disc;
  padding: 1rem 2rem 0;
  font-size: 24px;
}

@media (max-width: 940px) {
  .burger-menu {
    display: flex;
  }

  .navigation,
  .join-the-community {
    display: none;
  }
}

/*
    ARTICLE
*/

/*
  Article content shares the site's type system (General Sans, the --pf-*
  tokens): weight 400 body, tracking 0, headings 600 with a touch of
  negative tracking. The 630px reading column and the 50px space above an
  h2 are unchanged. The same rules are repeated for .page below.
*/

.article {
  max-width: 920px;
  font-family: var(--pf-font);
  font-weight: 400;
  position: relative;
}

.article h2 {
  max-width: 630px;
  font-weight: 600;
  font-size: 27px;
  letter-spacing: -0.01em;
  margin: 50px auto 0;
  line-height: 1.25;
  scroll-margin: 50px;
}

.article h3 {
  max-width: 630px;
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -0.01em;
  margin: 40px auto 0;
  line-height: 1.3;
  scroll-margin: 50px;
}

.article h4 {
  max-width: 630px;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0;
  margin: 32px auto 0;
  line-height: 1.4;
  scroll-margin: 50px;
}

.article p,
.article ul,
.article ol {
  max-width: 630px;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: 0;
  margin: 20px auto 0;
}

.article b,
.article strong,
.page b,
.page strong {
  font-weight: 600;
}

.article ul li>ul,
.article ol li>ul {
  margin-top: 0;
}

.article img,
.article picture {
  margin: 20px auto 0;
}

.article picture>img {
  margin: 0;
}

.article .main-flow {
  max-width: 630px;
  margin: 20px auto 0;
}

.article .main-flow img {
  width: 100%;
}

.article .spaced {
  margin: 40px auto;
}

.article .article__title {
  text-align: center;
  font-weight: 600;
  font-size: clamp(32px, 4vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
  max-width: 630px;
  margin: 0 auto;
}

.article .article__info {
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--pf-body);
}

body.dark .article .article__info {
  color: rgba(255, 255, 255, 0.72);
}

.article .article__info a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--pf-primary-deep);
}

/* Byline: author · Published · Updated on one centred line. */
.article .article__info {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 0;
  max-width: 630px;
  margin: 20px auto 0;
}

.article .article__info-item {
  white-space: nowrap;
}

.article .article__info-item + .article__info-item::before {
  content: "·";
  margin: 0 8px;
  color: var(--pf-muted);
}

.article .article__by {
  margin-right: 4px;
}

.article .article__avatar {
  width: 16px;
  height: 16px;
  margin: 0 5px 0 0;
  vertical-align: -3px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1.5px var(--pf-primary);
}

/* On narrow screens the dates share the first line; the author takes the next. */
@media (max-width: 480px) {
  .article .article__info-item--author {
    flex-basis: 100%;
    text-align: center;
  }

  .article .article__info-item + .article__info-item--author::before {
    content: none;
  }
}

article a {
  color: var(--text-color-light);
  font-weight: 500;
}

body.dark .article a {
  color: var(--text-color-dark);
}

/*
  Numbered step list. The counter sits in a rounded tile (the same tile the
  hub tool cards use for their icon), ink numeral on the primary yellow.
*/

.article-list__item {
  padding-left: 54px;
  position: relative;
  counter-increment: section;
}

.article .article-list__item {
  margin-top: 28px;
}

.article .article-list__item > :first-child {
  margin-top: 0;
}

.article-list__item::before {
  content: counter(section);
  position: absolute;
  top: -5px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background-color: var(--pf-primary);
  box-shadow: var(--pf-shadow-sm), var(--pf-inset);
  box-sizing: border-box;
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--pf-ink);
}

.article-list__item:nth-of-type(9)~.article-list__item::before {
  font-size: 15px;
}

.article-list__item--vertically-centered::before {
  top: 50%;
  transform: translateY(-50%);
}

.article-list__item--unnumbered::before {
  content: "";
  background-color: transparent;
  box-shadow: none;
}

.article-list__item p {
  margin-top: 6px;
}

.article .table-of-content-container {
  position: absolute;
  height: 100%;
  top: 0;
  left: -350px;
  width: 350px;
  padding-right: 50px;
  padding-top: 100px;
}

.article .table-of-content {
  position: sticky;
  top: 50px;
  line-height: 1.25;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

.article .table-of-content:hover {
  opacity: 1;
}

.article .table-of-content ol {
  margin: 0;
}

.article .table-of-content ol li {
  opacity: 0.9;
  transition: opacity 0.3s ease;
  font-size: 0.9em;
  margin-top: 5px;
}

.article .table-of-content ol li:hover {
  opacity: 1;
}

.article .table-of-content ol li.active {
  opacity: 1;
}

.article .table-of-content ol li.active>a {
  font-weight: bold;
}

/*
 * Article blockquote
 */
.article blockquote {
  max-width: 630px;
  margin: 28px auto 0;
  font-style: normal;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--pf-primary);
  position: relative;
}

.article blockquote p {
  margin-top: 0;
  font-size: inherit;
  line-height: inherit;
}

.article blockquote span {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--pf-body);
  margin-top: 12px;
}

body.dark .article blockquote span {
  color: rgba(255, 255, 255, 0.72);
}

.article__banner {
  max-width: 630px;
  margin: 0 auto;
}

.article__banner--top {
  margin-top: 20px;
}

.article__image--small picture {
  float: right;
  margin: 8px 8px 8px 20px;
}

.article__image--small-left picture {
  float: left;
  margin: 8px 20px 8px 8px;
}

/*
  Article frame
*/

.article-frame {
  color: var(--text-color-light);
  text-decoration: none;
  position: relative;
  border: var(--checkbox-color-light) 8px solid;
  border-radius: 16px;
  padding: 16px;
  margin: 0;
}

.article-frame--centered {
  text-align: center;
}

.article-frame h2,
.article-frame h3,
.article-frame h4 {
  margin: 0;
}

.article-frame p {
  margin: 0;
  margin-top: 8px;
}

body.dark .article-frame {
  color: var(--text-color-dark);
}

/*
  Article alert
*/

/*
  The "loud" sibling of .article-frame: same card shell, plus a primary
  accent bar on the left and a slightly larger heading. Dark mode uses the
  dark surface gradient like every other card.
*/

.article-alert {
  background: var(--pf-surface);
  color: var(--text-color-light);
  padding: 22px 26px 24px;
  text-decoration: none;
  position: relative;
  border: 1px solid var(--pf-line);
  border-radius: 18px;
  box-shadow: inset 4px 0 0 var(--pf-primary), var(--pf-shadow-card), var(--pf-inset);
}

body.dark .article-alert {
  color: var(--text-color-dark);
  border-color: var(--pf-line-dark);
}

.article-alert--centered {
  text-align: center;
  box-shadow: var(--pf-shadow-card), var(--pf-inset);
  border-top: 4px solid var(--pf-primary);
}

.article-alert h3 {
  margin: 0;
  font-size: 20px;
}

.article-alert p {
  margin: 0;
  margin-top: 10px;
}

.divider {
  height: 24px;
  margin: 20px auto 0;
  position: relative;
  color: var(--text-color-light);
  display: flex;
  align-items: center;
  justify-content: center;
}

body.dark .divider {
  color: var(--text-color-dark);
}

.divider svg {
  margin: 0 20px;
}

.divider::before,
.divider::after {
  content: "";
  display: block;
  flex: 1 1 100%;
  height: 1px;
  background-color: var(--pf-rule);
}

.highlighted-link {
  color: var(--text-color-light);
  background-color: var(--pf-primary);
  padding: 2px 6px;
  text-decoration: none;
  border-radius: 8px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background-color 0.2s;
}

.highlighted-link:hover {
  background-color: var(--pf-primary-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.dark .highlighted-link {
  color: var(--text-color-light) !important;
}

/*
  Article table
*/

/*
  Comparison table: card shell, eyebrow-style header row, zebra rows. The
  layered backgrounds are scroll shadows — the two solid-to-transparent
  strips scroll with the content (`local`) and cover the two grey strips
  (`scroll`) until there is something hidden on that side, so an
  overflowing table shows a soft edge where it continues.
*/

.article-table {
  --table-bg: #fff;
  --table-edge: rgba(49, 48, 48, 0.12);
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 20px 0;
  border: 1px solid var(--pf-line);
  border-radius: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--pf-shadow-card), var(--pf-inset);
  background-color: var(--table-bg);
  background-image:
    linear-gradient(to right, var(--table-bg) 40%, rgba(255, 255, 255, 0)),
    linear-gradient(to left, var(--table-bg) 40%, rgba(255, 255, 255, 0)),
    linear-gradient(to right, var(--table-edge), rgba(0, 0, 0, 0)),
    linear-gradient(to left, var(--table-edge), rgba(0, 0, 0, 0));
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 48px 100%, 48px 100%, 16px 100%, 16px 100%;
  background-attachment: local, local, scroll, scroll;
  contain: inline-size;
}

.article-table table {
  border-collapse: collapse;
  color: var(--text-color-light);
  background-color: transparent;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
  margin: 0;
  width: max-content;
  min-width: 100%;
}

.article-table thead {
  background-color: var(--pf-secondary);
}

.article-table th,
.article-table td {
  padding: 14px 16px;
  white-space: nowrap;
  vertical-align: top;
}

.article-table th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9a6b00;
}

.article-table td {
  border-top: 1px solid var(--pf-line);
}

.article-table tbody tr:first-child td {
  border-top: none;
}

.article-table tbody tr:nth-child(even) {
  background-color: rgba(249, 212, 119, 0.14);
}

.article-table td:first-child {
  font-weight: 600;
}

body.dark .article-table {
  --table-bg: #3a3938;
  --table-edge: rgba(0, 0, 0, 0.5);
  border-color: var(--pf-line-dark);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.7), var(--pf-inset);
}

body.dark .article-table table {
  color: var(--text-color-dark);
}

body.dark .article-table thead {
  background-color: rgba(255, 255, 255, 0.06);
}

body.dark .article-table th {
  color: var(--pf-primary-deep);
}

body.dark .article-table td {
  border-top-color: var(--pf-line-dark);
}

body.dark .article-table tbody tr:nth-child(even) {
  background-color: rgba(255, 212, 101, 0.07);
}

@media (max-width: 680px) {
  .article-table {
    font-size: 14px;
  }

  .article-table th,
  .article-table td {
    padding: 10px 12px;
  }
}

.article .comments {
  padding: 20px;
}

body.dark .article .comments {
  background-color: var(--checkbox-color-light);
}

@media (max-width: 1099px) {

  .article img,
  .article picture {
    width: 100%;
  }

  /*
    Small inline illustrations opt out of the full-width rule above. They are
    drawn at 280px or less and are meant to sit beside the text, so stretching
    them to the column upscaled the art and left too little room to wrap into.
    width:auto keeps them at intrinsic size; max-width stops them overflowing a
    column narrower than the asset.
  */
  .article__image--small picture,
  .article__image--small-left picture,
  .article__image--small picture > img,
  .article__image--small-left picture > img {
    width: auto;
    max-width: 100%;
  }
}

@media (max-width: 680px) {
  .article {
    padding: 0 20px;
    overflow-x: hidden;
  }

  /*
    Below this width the column cannot hold a 280px float and a readable line
    of text next to it, so the illustrations become centered blocks instead.
  */
  .article__image--small picture,
  .article__image--small-left picture {
    float: none;
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    margin: 20px auto 0;
  }
}

@media (max-width: 780px) {
  .article picture.placeholder {
    display: block;
    min-height: calc(100vw / 1.5);
  }
}

@media (min-width: 780px) and (max-width: 1099px) {
  .article picture.placeholder {
    display: block;
    min-height: 400px;
  }
}

@media (min-width: 1099px) {
  .article picture.placeholder {
    display: block;
    min-height: 520px;
  }

  .article picture.placeholder.main-flow {
    min-height: 400px;
  }
}

@media (max-width: 1640px) {
  .article .table-of-content-container {
    display: none;
  }
}

/*
    PAGE
*/

.page {
  max-width: 920px;
  font-family: var(--pf-font);
  font-weight: 400;
  margin-top: 50px;
  position: relative;
}

.page h2 {
  max-width: 630px;
  font-weight: 600;
  font-size: 27px;
  letter-spacing: -0.01em;
  margin: 50px auto 0;
  line-height: 1.25;
  scroll-margin: 50px;
}

.page h3 {
  max-width: 630px;
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -0.01em;
  margin: 40px auto 0;
  line-height: 1.3;
  scroll-margin: 50px;
}

.page h4 {
  max-width: 630px;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0;
  margin: 32px auto 0;
  line-height: 1.4;
  scroll-margin: 50px;
}

.page p,
.page ul,
.page ol {
  max-width: 630px;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: 0;
  margin: 20px auto 0;
}

.page ul li>ul,
.page ol li>ul {
  margin-top: 0;
}

.page img,
.page picture {
  margin: 20px auto 0;
}

.page picture>img {
  margin: 20px auto 0;
}

.page .main-flow {
  max-width: 630px;
  margin: 20px auto 0;
}

.page .main-flow img {
  width: 100%;
}

.page .spaced {
  margin: 40px auto;
}

.page .article__title {
  text-align: center;
  font-weight: 600;
  font-size: clamp(32px, 4vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
  max-width: 630px;
  margin: 0 auto;
}

/*
*  MAINPAGE
*/

@media (min-width: 1100px) {
  .mainpage {
    display: flex;
    flex-direction: row-reverse;
    padding: 0 70px 0 20px;
  }

  .mainpage .divider {
    display: none;
  }
}


/*
*   TOPICS
* * */

@media (max-width: 1100px) {
  .topics {
    margin-bottom: 40px;
  }
}

@media (min-width: 1100px) {
  .topics {
    margin-left: 60px;
    margin-top: 30px;
  }
}

a.underlined,
span.underlined {
  display: inline !important;
  cursor: pointer;
  background-image: linear-gradient(transparent 0%,
      transparent calc(50% - 8px),
      var(--pf-highlight) calc(50% - 8px),
      var(--pf-highlight) 100%) !important;
  transition: background-position 0.1s ease-in-out 0s,
    padding 0.1s ease-in-out 0s;
  background-size: 100% 200% !important;
  background-position: 0 0 !important;
  word-break: break-word;
  text-decoration: none;
}

a.underlined:hover,
span.underlined:hover {
  background-image: linear-gradient(transparent 0%,
      transparent calc(50% - 8px),
      var(--pf-primary) calc(50% - 8px),
      var(--pf-primary) 100%) !important;
  background-position: 0 100% !important;
}

body.dark a.underlined:hover,
body.dark span.underlined:hover {
  color: var(--text-color-light) !important;
}

.topic-banner {
  margin: 0 auto;
  margin-bottom: 30px;
  max-width: 580px;
}

.topic {
  position: relative;
  width: 615px;
}

.topic~.topic {
  margin-top: 20px;
}

.topic__header {
  padding: 0 20px;
}

.topic__link {
  display: inline-block;
  color: var(--text-color-light);
  text-decoration: none;
}

body.dark .topic__link {
  color: var(--text-color-dark);
}

.topic__title {
  margin: 0;
  font-weight: 500;
  letter-spacing: 1px;
}

.topic__description {
  font-size: 1.1em;
  line-height: 1.55em;
  letter-spacing: 1px;
  margin: 12px 0 4px;
}

.topic__articles {
  display: flex;
  margin: 0 auto;
  padding: 0 0 16px 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

@media (min-width: 721px) {
  .topic__articles {
    overflow: hidden;
  }
}

@media (min-width: 1100px) and (max-width: 1400px) {
  #productivity-list .article-card:nth-of-type(4),
  #learning-list .article-card:nth-of-type(4),
  #mindfulness-list .article-card:nth-of-type(4) {
    display: none;
  }
}

.topic__scroll {
  position: absolute;
  bottom: 110px;
  font-size: 32px;
  color: var(--text-color-light);
  cursor: pointer;
  user-select: none;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  border: 0;
  background: none;
  text-decoration: none;
}

.dark .topic__scroll {
  color: var(--text-color-dark);
}

.topic__scroll--right {
  right: -40px;
}

.topic__pages.max-right~.topic__scroll--right {
  display: none;
}

.topic__scroll--left {
  left: -40px;
}

.topic__articles.max-left~.topic__scroll--left {
  display: none;
}

.topic__scroll--bounce {
  animation-name: topic-scroll-bounce;
  animation-timing-function: linear;
}

@keyframes topic-scroll-bounce {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(12px);
  }

  100% {
    transform: translateX(0);
  }
}

@media (max-width: 720px) {
  .topic {
    width: 100vw;
  }

  .topic__articles {
    padding: 0 40px;
    scroll-padding: 0 32px;
  }

  .topic__scroll {
    display: none;
  }
}

@media (min-width: 721px) {
  .topic-banner {
    max-width: 580px;
  }
}

@media (min-width: 1100px) and (max-width: 1400px) {
  .topic {
    width: 460px;
  }

  .topic-banner {
    width: 420px;
  }
}

@media (min-width: 600px) and (max-width: 1099px) {
  .topic-banner {
    max-width: 624px;
    padding-right: 46px;
  }
}

@media (max-width: 600px) {
  .topic-banner {
    padding: 0 20px;
  }
}

/* 
*   ARTICLE CARD
* * */

.article-card-container {
  width: 154px;
  height: 220px;
  position: relative;
  flex: 0 0 154px;
  list-style-type: none;
  scroll-snap-align: start;
  transition: transform 0.2s linear, opacity 0.2s linear;
}

.article-card {
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #ffd465;
  padding: 0 12px;
  text-decoration: none;
  transform: scale(0.75);
  transition: transform 0.2s linear, opacity 0.2s linear;
  border-radius: 8px;
  border-bottom: 2px solid #d3ac46;
}

.article-card__spacer {
  flex: 1 1 100%;
}

.article-card__image {
  flex: 1 1 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 20px;
  max-height: 50%;
}

.article-card__image svg {
  width: 80px;
  height: auto;
  max-height: 100%;
  color: var(--text-color-light);
}

h3.article-card__title {
  flex: 0 1 auto;
  color: var(--text-color-light);
  text-decoration: none;
  font-weight: 400;
  margin-bottom: 6px;
  margin-top: 0;
}

.article-card__title--prefix {
  opacity: 0.7;
}

.article-card__date {
  color: var(--text-color-light);
  opacity: 0.5;
  margin-bottom: 6px;
  font-size: 16px;
}

.article-card:hover .article-card__title {
  text-decoration: underline;
}

.article-card--more-articles {
  background-color: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--text-color-light);
}

body.dark .article-card--more-articles {
  color: var(--text-color-dark);
}

.article-card-container:not(.article-card-container--more-articles)::before {
  content: "";
  display: block;
  position: absolute;
  top: 76px;
  left: 23px;
  background: black;
  box-shadow: 0 0 6px 4px black;
  width: calc(100% - 46px);
  height: calc(100% - 108px);
  transition: transform 0.2s linear, opacity 0.2s linear;
  opacity: 0.3;
}

.article-card-container:hover .article-card {
  transform: scale(0.85);
}

.article-card-container:hover::before {
  transform: translateY(18px);
}

.article-card--highlighted {
  background-color: #ffb30b;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 8px;
}

.article-card--highlighted .article-card__title {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.article-card--highlighted .article-card__title span:nth-of-type(1) {
  font-size: 2rem;
  font-weight: bold;
}

.article-card--highlighted .article-card__title span+span {
  margin-top: 6px;
  font-size: 1.2rem;
}

/*
*   INTRO
* * */

.intro__title {
  max-width: 630px;
  margin: 28px auto 4px;
  font-weight: 500;
  letter-spacing: 1px;
  padding: 0 20px;
}

.intro__description {
  max-width: 630px;
  font-size: 1.1em;
  line-height: 1.55em;
  letter-spacing: 1px;
  margin: 20px auto 0;
  padding: 0 20px;
}

.intro__image {
  display: block;
  margin: 20px auto;
  max-width: 100%;
  padding-right: 10px;
}

.intro__image img {
  max-width: 100%;
}

.intro__image {
  transform: scale(0.9);
  min-height: 240px;
}

@media (max-width: 1100px) {
  .intro {
    margin-top: 50px;
  }
}

@media (min-width: 1100px) and (max-width: 1400px) {
  .intro {
    width: 460px;
  }
}

@media (min-width: 720px) {
  .article-card-container--more-articles {
    display: none;
  }
}

/*
*   FOOTER
* * */

.footer {
  padding: 2rem 0 4rem;
  max-width: 640px;
  margin: 0 auto;
}

.footer>*~* {
  margin-top: 1rem;
}

.footer__social-links {
  margin-top: 50px;
}

.footer__social-links,
.footer__terms-links {
  text-align: center;
}

body.dark .footer__social-links {
  color: var(--text-color-dark);
}

@media (max-width: 720px) {
  .footer__terms-links {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

.footer__copyright {
  text-align: center;
}

.footer__link,
.footer__link:visited,
.footer__link:active {
  color: var(--text-color-light);
  font-weight: 500;
  padding: 8px 0 2px 0;
}

.footer__link~.footer__link {
  margin-left: 1rem;
}

@media (max-width: 720px) {
  .footer__terms-links .footer__link~.footer__link {
    margin-top: 0.25rem;
    margin-left: 0;
  }
}

body.dark .footer__link,
body.dark .footer__link:visited,
body.dark .footer__link:active {
  color: var(--text-color-dark);
  font-weight: 500;
}

/*
* ADS
*/

.google-auto-placed {
  margin-top: 20px;
  max-width: 90vw;
}

/*
* COLLAPSIBLE
*/

input#collapsible {
  display: none;
}

.wrap-collapsible {
  color: var(--text-color-light);
  max-width: 630px;
  margin: 20px auto 0;
  font-family: var(--pf-font);
}

body.dark .wrap-collapsible {
  color: var(--text-color-dark);
}

.lbl-toggle {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  padding: 13px 18px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: var(--pf-surface);
  border: 1px solid var(--pf-line);
  border-radius: 16px;
  box-shadow: var(--pf-shadow-sm), var(--pf-inset);
  color: inherit;
}

.lbl-toggle:hover {
  border-color: var(--pf-primary-deep);
}

body.dark .lbl-toggle {
  border-color: var(--pf-line-dark);
}

.wrap-collapsible--toc .table-of-content a,
.wrap-collapsible--toc .table-of-content p {
  color: inherit;
}

.lbl-toggle::before {
  content: " ";
  display: inline-block;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid var(--pf-primary-deep);
  margin-right: 12px;
  transition: transform 0.2s ease-out;
}

.toggle:checked+.lbl-toggle::before {
  transform: rotate(90deg);
}

.collapsible-content {
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.25s ease-in-out;
}

.toggle:checked+.lbl-toggle+.collapsible-content {
  max-height: 1000px;
}

.toggle:checked+.lbl-toggle {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-color: transparent;
}

.collapsible-content .content-inner {
  padding: 8px 18px 14px;
  background: var(--pf-surface);
  border: 1px solid var(--pf-line);
  border-top: none;
  color: inherit;
  border-radius: 0 0 16px 16px;
}

body.dark .collapsible-content .content-inner {
  border-color: var(--pf-line-dark);
}

.collapsible-content .table-of-content ol {
  padding-left: 22px;
}

.collapsible-content .table-of-content ol li {
  font-size: 15px;
  margin-top: 8px;
}

.collapsible-content p {
  margin-bottom: 0;
}

@media (min-width: 1640px) {
  .wrap-collapsible--toc {
    display: none;
  }
}

/*
* Social links
*/

.social-links {
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-link {
  color: var(--text-color-light);
}

.social-link~.social-link {
  margin-left: 16px;
}

.dark .social-link {
  color: var(--text-color-dark);
}

/* ALPINE-JS */

[x-cloak] {
  display: none !important;
}

/* FOLD */

.sharp-fold {
  position: relative;
  background: linear-gradient(-150deg, transparent 1.5em, #ffb30b 0);
  border-radius: .5em;
}

.sharp-fold::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .4)) no-repeat 100% 0;
  width: 1.73em;
  height: 3em;
  transform: translateY(-1.3em) rotate(-30deg);
  transform-origin: bottom right;
  border-bottom-left-radius: inherit;
  box-shadow: -.2em .2em .3em -.1em rgba(0, 0, 0, .15);
}
/*
* MODERN MAIN PAGE (Yellow Tomato style language)
* Scoped to the main page only via body:has(.mainpage) — .mainpage exists
* solely in layouts/index.njk. Other pages are untouched.
*/

:root {
  --pf-primary: #f9d477;
  --pf-primary-deep: #febe16;
  --pf-secondary: #ffe8ae;
  --pf-bg: #fbfff8;
  --pf-ink: #313030;
  --pf-muted: #8c8c8c;
  --pf-body: #5d5c5a;
  --pf-line: rgba(49, 48, 48, 0.1);
  --pf-line-dark: rgba(255, 255, 255, 0.12);
  --pf-font: "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --pf-ease-spring: cubic-bezier(0.2, 0.8, 0.2, 1);
  --pf-shadow-lg: 0 30px 70px -34px rgba(49, 48, 48, 0.4);
  --pf-shadow-card: 0 18px 40px -24px rgba(49, 48, 48, 0.35);
  --pf-shadow-sm: 0 1px 2px rgba(49, 48, 48, 0.05);
  --pf-surface: linear-gradient(158deg, #fff 0%, var(--pf-secondary) 135%);
  --pf-inset: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  /* the marker-pen highlight behind .underlined links, and the hairline
     the fish divider draws; both are dimmed in dark mode below */
  --pf-highlight: rgba(249, 212, 119, 0.75);
  --pf-rule: rgba(49, 48, 48, 0.22);
}

/* base — the main page gets the modern font everywhere; other pages
   only in the shell (see MODERN SHELL section below) */

body:has(.mainpage) {
  font-family: var(--pf-font);
}


/* topics */

body:has(.mainpage) .topic__title {
  font-weight: 600;
  font-size: clamp(26px, 2.6vw, 31px);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

body:has(.mainpage) .topic__description {
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--pf-body);
}

body.dark:has(.mainpage) .topic__description {
  color: rgba(255, 255, 255, 0.72);
}

/* scroll arrows — glass buttons */

body:has(.mainpage) .topic__scroll {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--pf-line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.65);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--pf-shadow-sm);
  font-size: 20px;
  color: var(--pf-ink);
  animation: none;
  transition: transform 0.2s var(--pf-ease-spring), background 0.2s;
}

body:has(.mainpage) .topic__scroll:hover {
  transform: translateY(-1px);
  background: #fff;
}

body:has(.mainpage) .topic__scroll--right {
  right: -56px;
}

body.dark:has(.mainpage) .topic__scroll {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--pf-line-dark);
  color: var(--text-color-dark);
}

body.dark:has(.mainpage) .topic__scroll:hover {
  background: rgba(255, 255, 255, 0.16);
}

@media (max-width: 720px) {
  body:has(.mainpage) .topic__scroll {
    display: none;
  }
}

/* intro */

body:has(.mainpage) .intro__title {
  font-weight: 600;
  font-size: clamp(34px, 4vw, 46px);
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-wrap: balance;
}

/* desktop: lift the left column slightly above the topics column */

@media (min-width: 1100px) {
  body:has(.mainpage) .intro__title {
    margin-top: 0;
  }
}

body:has(.mainpage) .intro__description {
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--pf-body);
  max-width: 630px;
}

body.dark:has(.mainpage) .intro__description {
  color: rgba(255, 255, 255, 0.72);
}

body:has(.mainpage) .intro__image {
  transform: none;
  padding-right: 0;
  width: calc(100% - 40px);
  max-width: 630px;
  margin: 26px auto 0;
}

body:has(.mainpage) .intro__image img {
  width: 100%;
}

/* newsletter moved into the intro column — stack it vertically */

body:has(.mainpage) .intro .newsletter {
  flex-direction: column;
  align-items: stretch;
  width: calc(100% - 40px);
  max-width: 630px;
  margin: 28px auto 0;
}

body:has(.mainpage) .intro .newsletter__description {
  flex-basis: auto;
  padding: 26px 26px 0;
}

body:has(.mainpage) .intro .newsletter__description h2 {
  margin-top: 0;
}

body:has(.mainpage) .intro .newsletter__description p {
  white-space: normal;
}

body:has(.mainpage) .intro .newsletter__form {
  flex-basis: auto;
  padding: 10px 26px 26px;
}

body:has(.mainpage) .intro .newsletter button {
  max-width: none;
}

@media (min-width: 1100px) {

  body:has(.mainpage) .intro__image,
  body:has(.mainpage) .intro .newsletter {
    width: 100%;
  }

  /* stretch the intro to the topics column height and spread the
     illustration + newsletter through the free space */
  body:has(.mainpage) .intro {
    display: flex;
    flex-direction: column;
    padding: 50px 0;
  }

  body:has(.mainpage) .intro__image,
  body:has(.mainpage) .intro .newsletter {
    margin-top: auto;
  }
}

/* the divider before the youtube banner — same look, more breathing room */

body:has(.mainpage) .divider.banner-divider {
  margin: 50px auto;
}

/*
* MODERN SHELL (all pages)
* The site-wide chrome — background, header/nav, dropdowns, search overlay,
* footer, newsletter card — shares the main page's style language so
* navigating between pages feels seamless. Page CONTENT (article typography,
* tool UIs, listing cards) is intentionally left untouched.
*/

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.content__header,
.navigation__dropdown,
.burger-menu__dropdown,
.footer,
.newsletter,
.search-overlay {
  font-family: var(--pf-font);
}

::selection {
  background: var(--pf-primary);
  color: var(--pf-ink);
}

:focus-visible {
  outline: 3px solid var(--pf-primary-deep);
  outline-offset: 3px;
  border-radius: 8px;
}

/* warm background + hero wash everywhere */

body {
  background-color: var(--pf-bg);
}

.content {
  background-color: var(--pf-bg);
  background-image: radial-gradient(70% 90% at 82% 0%, var(--pf-secondary) 0%, rgba(255, 232, 174, 0) 62%);
  background-size: 100% 760px;
  background-position: top;
  background-repeat: no-repeat;
}

body.dark .content {
  background-color: var(--bgr-color-dark);
  background-image: radial-gradient(70% 90% at 82% 0%, rgba(254, 190, 22, 0.13) 0%, rgba(254, 190, 22, 0) 62%);
}

/* dark mode: elevated dark surfaces with a clearly visible warm gradient —
   low contrast against the page, light text on top */

body.dark {
  --pf-primary: #dfb44a;
  --pf-highlight: rgba(223, 180, 74, 0.55);
  --pf-rule: rgba(255, 255, 255, 0.24);
  --pf-surface: linear-gradient(158deg, #413f3c 0%, #5a4b28 135%);
  --pf-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* header + nav */

.content__header .logo span {
  font-family: var(--pf-font);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.navigation > ul {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
}

.navigation__dropdown {
  background-color: #fff;
  border: 1px solid var(--pf-line);
  border-radius: 16px;
  box-shadow: var(--pf-shadow-lg);
  padding: 18px 22px;
}

.navigation__dropdown > ul > li ~ li {
  margin-top: 8px;
}

.navigation__dropdown > ul > li > a {
  text-decoration: none;
  font-weight: 500;
  opacity: 1;
  transition: color 0.2s;
}

.navigation__dropdown > ul > li > a:hover {
  color: var(--pf-primary-deep) !important;
}

body.dark .navigation__dropdown {
  background-color: #3a3938;
  border-color: var(--pf-line-dark);
}

body.dark .navigation__dropdown > ul > li > a {
  color: var(--text-color-dark) !important;
}

body.dark .navigation__dropdown > ul > li > a:hover {
  color: var(--pf-primary-deep) !important;
}

body.dark .navigation__dropdown svg circle,
body.dark .navigation__dropdown svg path,
body.dark .navigation__dropdown svg line {
  stroke: var(--text-color-dark);
}

body.dark .navigation__dropdown svg path[fill],
body.dark .navigation__dropdown svg circle[fill] {
  fill: var(--text-color-dark);
  stroke: none;
}

.social-link {
  display: inline-flex;
  transition: color 0.2s, transform 0.2s var(--pf-ease-spring);
}

.social-link:hover {
  color: var(--pf-primary-deep);
  transform: translateY(-1px);
}

/* newsletter card (footer on inner pages, intro column on the main page).
   Doubled .newsletter class = specificity bump over the include's inline
   <style>, which comes later in the document and would win a tie. */

.newsletter.newsletter {
  border: 1px solid var(--pf-line);
  border-radius: 22px;
  background: var(--pf-surface);
  box-shadow: var(--pf-shadow-lg), var(--pf-inset);
  color: var(--text-color-light);
}

body.dark .newsletter.newsletter {
  border-color: var(--pf-line-dark);
  color: var(--text-color-dark);
}

body.dark .newsletter .newsletter__description p {
  color: rgba(255, 255, 255, 0.72);
}

.newsletter .newsletter__description h2 {
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.newsletter .newsletter__description p {
  letter-spacing: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--pf-body);
}

.newsletter .newsletter__form input {
  border: 1px solid var(--pf-line);
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 16px;
  font-family: var(--pf-font);
  background: rgba(255, 255, 255, 0.85);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.newsletter .newsletter__form input:focus {
  outline: none;
  border-color: var(--pf-primary-deep);
  box-shadow: 0 0 0 3px rgba(254, 190, 22, 0.25);
}

body.dark .newsletter .newsletter__form input {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--pf-line-dark);
  color: var(--text-color-dark);
}

body.dark .newsletter .newsletter__form input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.newsletter.newsletter button,
.newsletter.newsletter a.download-checklist-link {
  border-radius: 999px;
  font-weight: 600;
  font-family: var(--pf-font);
  background-color: var(--pf-primary);
  padding: 11px 14px;
  animation: none;
  box-shadow: 0 10px 22px -10px rgba(254, 190, 22, 0.7);
  transition: transform 0.2s var(--pf-ease-spring), box-shadow 0.2s;
}

.newsletter.newsletter button:hover,
.newsletter.newsletter a.download-checklist-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -10px rgba(254, 190, 22, 0.8);
}

/* search overlay — shell surface shared by all pages; parent-qualified
   selectors out-rank the include's inline <style> */

.search-open .search-overlay {
  background-color: rgba(251, 255, 248, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

body.dark .search-open .search-overlay {
  background-color: rgba(20, 20, 20, 0.55);
}

.search-overlay .search input {
  font-family: var(--pf-font);
  background-color: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--pf-line);
  border-radius: 16px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.search-overlay .search input::placeholder {
  color: var(--pf-muted);
}

.search-overlay .search input:focus {
  border-color: var(--pf-primary-deep);
  box-shadow: 0 0 0 3px rgba(254, 190, 22, 0.25);
}

body.dark .search-overlay .search input {
  background-color: rgba(58, 57, 56, 0.92);
  border-color: var(--pf-line-dark);
}

/* article cards — the shared card component, styled once for every context:
   main page topics, /blog/ listing, "You may also like" rows in articles,
   author pages, and the search overlay */

.article-card {
  font-family: var(--pf-font);
  background: var(--pf-surface);
  border: 1px solid var(--pf-line);
  border-radius: 18px;
  box-shadow: var(--pf-shadow-card), var(--pf-inset);
  transition: transform 0.25s var(--pf-ease-spring), box-shadow 0.25s var(--pf-ease-spring);
}

/* inside an article the generic .article h3 rule would otherwise size the
   card title like a section heading */
.article h3.article-card__title {
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}

.article-card-container:not(.article-card-container--more-articles)::before {
  display: none;
}

.article-card-container:hover .article-card {
  transform: scale(0.8) translateY(-8px);
  box-shadow: 0 28px 54px -26px rgba(49, 48, 48, 0.5), var(--pf-inset);
}

h3.article-card__title {
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.article-card:hover .article-card__title {
  text-decoration: none;
}

.article-card__date {
  font-size: 14px;
  font-weight: 500;
  opacity: 0.55;
}

.article-card--more-articles {
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--pf-muted);
  transition: color 0.2s, transform 0.25s var(--pf-ease-spring);
}

.article-card-container--more-articles:hover .article-card--more-articles {
  color: var(--pf-ink);
}

body.dark .article-card-container--more-articles:hover .article-card--more-articles {
  color: var(--text-color-dark);
}

/* dark mode: light text + inverted line-art icons on the dark card surface */

body.dark .article-card {
  border-color: rgba(255, 255, 255, 0.09);
}

body.dark h3.article-card__title,
body.dark .article-card__date {
  color: var(--text-color-dark);
}

body.dark .article-card__image img {
  filter: invert(1) hue-rotate(180deg);
}

/* highlighted cards (QUIZ / HOW section cards) — ink badge look */

.article-card--highlighted.sharp-fold {
  background: var(--pf-ink);
  border-color: transparent;
  box-shadow: 0 18px 40px -22px rgba(49, 48, 48, 0.55);
}

.article-card--highlighted.sharp-fold::before {
  display: none;
}

/* dark mode flips the accent card to light so it still stands out */

body.dark .article-card--highlighted.sharp-fold {
  background: linear-gradient(158deg, #f6f1e4 0%, #eeda9f 135%);
  border: none;
}

body.dark .article-card--highlighted .article-card__title {
  color: var(--pf-ink);
}

.article-card--highlighted .article-card__title {
  color: var(--pf-bg);
}

.article-card--highlighted .article-card__title span:nth-of-type(1) {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pf-primary-deep);
}

.article-card--highlighted .article-card__title span + span {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-top: 10px;
}

/* article frames — the inline callout boxes in article bodies. The old chunky
   yellow border is replaced by the same gradient card surface every other
   element uses after the redesign. */

.article-frame {
  border: 1px solid var(--pf-line);
  border-radius: 18px;
  padding: 22px 26px;
  background: var(--pf-surface);
  box-shadow: var(--pf-shadow-card), var(--pf-inset);
}

body.dark .article-frame {
  border-color: var(--pf-line-dark);
}

/* card rows scroll without a visible scrollbar */

.topic__articles {
  scrollbar-width: none;
}

.topic__articles::-webkit-scrollbar {
  display: none;
}

/* footer */

.footer__copyright {
  color: var(--pf-muted);
  font-size: 14px;
}

/*
    ARTICLE CHROME AND BANNERS (modern layer)

    Reading-progress bar, the "You may also like" row, the top banners
    (pomodoro-timer-banner.njk and the template banners), the in-article
    CTA button, the small floated illustration, and the product promo
    block. All of them share the card shell and tokens above.
*/

/* reading progress */

.progress {
  background-color: var(--pf-primary);
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 4px;
  z-index: 1;
}

/* "You may also like" — the topic row borrowed from the main page */

.article .topic {
  width: 615px;
  max-width: 90vw;
}

.article .topic h2 {
  padding: 0 20px;
}

/* top banners: one shell for every .banner--* include */

.banner {
  display: block;
  font-family: var(--pf-font);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
  border: 1px solid var(--pf-line);
  border-radius: 18px;
  background: var(--pf-surface);
  box-shadow: var(--pf-shadow-card), var(--pf-inset);
  padding: 16px 20px;
  margin: 0;
  color: var(--text-color-light);
  text-decoration: none;
}

.banner a,
.banner .underlined {
  color: var(--text-color-light);
  font-weight: 600;
}

.banner svg {
  display: inline-block;
  margin-bottom: -2px;
}

.banner svg:first-of-type {
  margin-left: 4px;
}

.banner svg:last-of-type {
  animation: bannerBlink 3s infinite;
}

body.dark .banner {
  border-color: var(--pf-line-dark);
  color: var(--text-color-dark);
}

body.dark .banner a,
body.dark .banner .underlined {
  color: var(--text-color-dark);
}

@keyframes bannerBlink {
  0% {
    opacity: 1;
  }

  25% {
    opacity: 0.2;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

/* in-article CTA: a centred pill button, e.g. "Buy for $5" under a
   product review. Markup: <a class="on-scroll-cta-link"><span
   class="article-cta__button">…</span></a>, or a <p class="article-cta">
   holding the button and an optional note. */

.article .on-scroll-cta-link,
.article .article-cta {
  display: block;
  max-width: 630px;
  margin: 32px auto 0;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0;
}

.article-cta__button {
  display: inline-block;
  padding: 13px 28px;
  border-radius: 999px;
  background-color: var(--pf-primary);
  color: var(--pf-ink);
  font-family: var(--pf-font);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  box-shadow: 0 10px 22px -10px rgba(254, 190, 22, 0.7);
  transition: transform 0.2s var(--pf-ease-spring), box-shadow 0.2s, background-color 0.2s;
}

.article .on-scroll-cta-link:hover .article-cta__button,
.article-cta__button:hover {
  background-color: var(--pf-primary-deep);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -10px rgba(254, 190, 22, 0.8);
}

body.dark .article-cta__button,
body.dark .article .article-cta__button {
  color: var(--pf-ink);
}

.article-cta__note {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  color: var(--pf-body);
}

body.dark .article-cta__note {
  color: rgba(255, 255, 255, 0.72);
}

/* a small logo or cover floated beside the text (product roundups) */

.article img.article__image--float {
  float: right;
  width: 180px;
  height: auto;
  margin: 0 0 12px 30px;
  border-radius: 12px;
}

@media (max-width: 480px) {
  .article img.article__image--float {
    float: none;
    display: block;
    margin: 32px auto;
  }
}

/* product promo block (the Habit Stacking Organizer in habit-stacking) —
   the same framing as the featured template on the collection pages */

.article .organizer-promo {
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 32px 40px;
  border-radius: 24px;
  border: 1px solid var(--pf-line);
  background: var(--pf-surface);
  font-family: var(--pf-font);
  color: var(--pf-ink);
  text-decoration: none;
  letter-spacing: 0;
  box-shadow: var(--pf-shadow-card), var(--pf-inset);
  transition: transform 0.2s var(--pf-ease-spring), box-shadow 0.2s var(--pf-ease-spring);
}

.article .organizer-promo:hover {
  transform: translateY(-2px);
  box-shadow: var(--pf-shadow-lg), var(--pf-inset);
}

.organizer-promo__copy {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

.organizer-promo__kicker {
  display: inline-block;
  background: var(--pf-ink);
  color: var(--pf-primary-deep);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
}

.organizer-promo__title {
  display: block;
  font-size: 36px;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-top: 16px;
}

.organizer-promo__mark {
  background: linear-gradient(transparent 55%, var(--pf-primary) 55%, var(--pf-primary) 94%, transparent 94%);
}

.organizer-promo__text {
  display: block;
  font-size: 16px;
  line-height: 1.5;
  color: var(--pf-body);
  margin-top: 14px;
}

.organizer-promo__badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--pf-body);
  border: 1px solid rgba(49, 48, 48, 0.18);
  border-radius: 999px;
  padding: 6px 14px;
  margin-top: 18px;
}

.organizer-promo__cta {
  display: block;
  width: fit-content;
  background: var(--pf-primary);
  color: var(--pf-ink);
  font-size: 17px;
  font-weight: 600;
  padding: 13px 26px;
  border-radius: 999px;
  margin-top: 18px;
  box-shadow: 0 10px 22px -10px rgba(254, 190, 22, 0.7);
}

.article .organizer-promo:hover .organizer-promo__cta {
  background: var(--pf-primary-deep);
}

.article .organizer-promo__art {
  flex: 0 0 auto;
  width: 400px;
  max-width: 100%;
  margin: 0;
  pointer-events: none;
}

.article .organizer-promo__art img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  user-select: none;
  -webkit-user-select: none;
}

body.dark .article .organizer-promo {
  border-color: var(--pf-line-dark);
  color: var(--text-color-dark);
}

body.dark .organizer-promo__kicker {
  background: var(--pf-primary);
  color: var(--pf-ink);
}

body.dark .organizer-promo__text,
body.dark .organizer-promo__badge {
  color: rgba(255, 255, 255, 0.75);
}

body.dark .organizer-promo__badge {
  border-color: rgba(255, 255, 255, 0.28);
}

body.dark .organizer-promo__mark {
  background: linear-gradient(transparent 86%, var(--pf-primary-deep) 86%, var(--pf-primary-deep) 96%, transparent 96%);
}

@media (max-width: 900px) {
  .article .organizer-promo {
    gap: 28px;
    padding: 28px 30px;
  }

  .organizer-promo__title {
    font-size: 32px;
  }

  .article .organizer-promo__art {
    width: 320px;
  }
}

@media (max-width: 680px) {
  .article .organizer-promo {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 22px;
    gap: 20px;
  }

  .organizer-promo__title {
    font-size: 28px;
  }

  .article .organizer-promo__art {
    order: -1;
    width: 360px;
    align-self: center;
  }

  .organizer-promo__cta {
    width: 100%;
    text-align: center;
  }
}

@media print {
  .article .organizer-promo {
    display: none;
  }
}

/*
    FLOATING CORNER CARDS

    One component, two uses: the "Read next" suggestion (read-next.njk) and
    the product promo that takes over the corner for one stretch of an
    article (habit-stacking-organizer-floating-card.njk). Only one of them
    is ever visible — read-next.njk's script owns the handover.
*/

.read-next {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 5;
    /* 320 + 24 has to clear the 920px article column at the
       1641px breakpoint, where the side gutter is ~353px */
    width: 320px;
    font-family: var(--pf-font);
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 34px, 0) scale(0.96);
    transition: opacity 0.45s var(--pf-ease-spring),
                transform 0.55s var(--pf-ease-spring),
                visibility 0s linear 0.55s;
}

.read-next--visible {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0) scale(1);
    transition: opacity 0.45s var(--pf-ease-spring),
                transform 0.55s var(--pf-ease-spring),
                visibility 0s linear 0s;
}

.read-next__card {
    display: block;
    padding: 16px 18px 15px;
    border: 1px solid var(--pf-line);
    border-radius: 20px;
    background: var(--pf-surface);
    box-shadow: var(--pf-shadow-lg), var(--pf-inset);
    color: var(--text-color-light);
    text-decoration: none;
    transition: transform 0.3s var(--pf-ease-spring), box-shadow 0.3s var(--pf-ease-spring);
}

.read-next__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 34px 60px -28px rgba(49, 48, 48, 0.55), var(--pf-inset);
}

.read-next__eyebrow {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    /* deepened amber — #febe16 on a near-white card is unreadable
       at 11px; the bright token is used in dark mode instead */
    color: #9a6b00;
}

body.dark .read-next__eyebrow {
    color: var(--pf-primary-deep);
}

.read-next__spark {
    animation: read-next-spark 3.2s var(--pf-ease-spring) infinite;
    transform-origin: center;
}

@keyframes read-next-spark {
    0%, 62%, 100% { transform: scale(1) rotate(0deg); opacity: 0.9; }
    72% { transform: scale(1.35) rotate(18deg); opacity: 1; }
    82% { transform: scale(0.95) rotate(-6deg); opacity: 1; }
}

.read-next__main {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 10px;
}

.read-next__thumb {
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--pf-line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.75);
    transition: transform 0.35s var(--pf-ease-spring);
}

.read-next__thumb img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.read-next__card:hover .read-next__thumb {
    transform: rotate(-5deg) scale(1.06);
}

.read-next__title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: text-decoration-color 0.25s;
}

.read-next__card:hover .read-next__title {
    text-decoration-color: currentColor;
}

.read-next__footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid var(--pf-line);
}

.read-next__desc {
    flex: 1 1 auto;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--pf-body);
}

.read-next__arrow {
    flex: 0 0 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--pf-primary);
    color: var(--pf-ink);
    animation: read-next-nudge 2.8s var(--pf-ease-spring) infinite;
    transition: background 0.25s, transform 0.25s var(--pf-ease-spring);
}

@keyframes read-next-nudge {
    0%, 70%, 100% { transform: translateX(0); }
    80% { transform: translateX(4px); }
    90% { transform: translateX(0); }
}

.read-next__card:hover .read-next__arrow {
    background: var(--pf-primary-deep);
    transform: translateX(4px);
    animation: none;
}

.read-next__close {
    position: absolute;
    top: -9px;
    right: -9px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--pf-line);
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--pf-shadow-sm);
    color: var(--pf-body);
    cursor: pointer;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.2s, transform 0.2s var(--pf-ease-spring), color 0.2s;
}

.read-next:hover .read-next__close,
.read-next__close:focus-visible {
    opacity: 1;
    transform: scale(1);
}

.read-next__close:hover {
    color: var(--pf-ink);
}

/* dark mode */

body.dark .read-next__card {
    border-color: var(--pf-line-dark);
    color: var(--text-color-dark);
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.75), var(--pf-inset);
}

body.dark .read-next__card:hover {
    box-shadow: 0 34px 60px -24px rgba(0, 0, 0, 0.85), var(--pf-inset);
}

body.dark .read-next__thumb {
    border-color: var(--pf-line-dark);
    background: rgba(255, 255, 255, 0.08);
}

body.dark .read-next__thumb img {
    filter: invert(1);
}

body.dark .read-next__desc {
    color: rgba(255, 255, 255, 0.72);
}

body.dark .read-next__footer {
    border-top-color: var(--pf-line-dark);
}

body.dark .read-next__close {
    background: #3a3938;
    border-color: var(--pf-line-dark);
    color: rgba(255, 255, 255, 0.7);
}

body.dark .read-next__close:hover {
    color: var(--text-color-dark);
}

/* the responsive step-down for narrower viewports lives below the promo
   variant, so that it can override both uses of the card */

/* promo variant — same card, product framing */

.read-next--promo .read-next__eyebrow {
  color: #9a6b00;
}

.read-next--promo .read-next__thumb {
  flex-basis: 60px;
  width: 60px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
}

.read-next--promo .read-next__thumb img {
  width: 52px;
  height: 40px;
  object-fit: contain;
  /* deliberately small: the sheets must never be legible enough to print */
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

body.dark .read-next--promo .read-next__thumb {
  background: rgba(255, 255, 255, 0.9);
}

body.dark .read-next--promo .read-next__thumb img {
  filter: none;
}

.read-next--promo .read-next__price {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--pf-primary);
  color: var(--pf-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/*
    RESPONSIVE STEP-DOWN

    Only the >=1641px layout has a gutter wide enough to clear the 920px
    article column, but the prose itself is 630px, so empty space beside it
    survives much further down. The card follows that space in steps instead
    of vanishing at 1640px:

      1200-1640px  compact card — same anatomy, no teaser line
       800-1199px  collapsed thumb tile that unfolds on hover / keyboard focus
          <800px   hidden — a phone has no gutter to spare

    Every step keeps its footprint (width + offset) inside (100vw - 630) / 2,
    so the card never lands on a line of text.
*/

@media (max-width: 1640px) {

  .read-next {
    right: 18px;
    bottom: 18px;
    /* 250 + 18 stays inside the 1200px gutter even with a 15px scrollbar */
    width: 250px;
  }

  .read-next__card {
    padding: 13px 15px 12px;
    border-radius: 18px;
  }

  .read-next__main {
    gap: 10px;
    margin-top: 8px;
  }

  .read-next__thumb {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  .read-next__thumb img {
    width: 26px;
    height: 26px;
  }

  .read-next__title {
    /* with the teaser gone the title can afford the third line */
    -webkit-line-clamp: 3;
    font-size: 14.5px;
  }

  /* the teaser is the first thing to go — the title carries the click */
  .read-next__desc {
    display: none;
  }

  .read-next__footer {
    justify-content: flex-end;
    margin-top: 8px;
    padding-top: 0;
    border-top: none;
  }

  .read-next__arrow {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
  }

  .read-next--promo .read-next__thumb {
    flex-basis: 52px;
    width: 52px;
    height: 42px;
  }

  .read-next--promo .read-next__thumb img {
    width: 46px;
    height: 35px;
  }
}

@media (max-width: 1199px) {

  /* collapsed: a thumb tile captioned with the eyebrow — no room for a title */

  .read-next {
    right: 12px;
    bottom: 12px;
    /* 68 + 12 clears the 800px gutter even behind a 15px scrollbar */
    width: 68px;
  }

  .read-next:hover,
  .read-next:focus-within {
    width: 250px;
  }

  .read-next__card {
    padding: 8px;
    text-align: center;
  }

  .read-next__eyebrow {
    display: block;
    font-size: 8px;
    line-height: 1.25;
    letter-spacing: 0.06em;
  }

  /* the label wraps to two lines here, and the spark would claim a third */
  .read-next__spark {
    display: none;
  }

  .read-next__main {
    justify-content: center;
    margin-top: 4px;
  }

  /* one frame is enough at this size — the tile itself is the frame */
  .read-next__thumb {
    flex-basis: 40px;
    width: 40px;
    height: 34px;
    border: none;
    background: none;
  }

  .read-next__thumb img {
    width: 30px;
    height: 30px;
  }

  .read-next__title,
  .read-next__footer,
  .read-next__close {
    display: none;
  }

  body.dark .read-next__thumb {
    background: none;
  }

  .read-next--promo .read-next__thumb {
    flex-basis: 46px;
    width: 46px;
    height: 36px;
    background: none;
  }

  .read-next--promo .read-next__thumb img {
    width: 46px;
    height: 36px;
  }

  body.dark .read-next--promo .read-next__thumb {
    background: none;
  }

  /* unfolded on hover / keyboard focus */

  .read-next:hover .read-next__card,
  .read-next:focus-within .read-next__card {
    padding: 13px 15px 12px;
    text-align: left;
    transform: none;
    transform-origin: 100% 100%;
    animation: read-next-unfold 0.3s var(--pf-ease-spring);
  }

  .read-next:hover .read-next__eyebrow,
  .read-next:focus-within .read-next__eyebrow {
    display: flex;
    font-size: 11px;
    letter-spacing: 0.14em;
  }

  .read-next:hover .read-next__spark,
  .read-next:focus-within .read-next__spark {
    display: block;
  }

  .read-next:hover .read-next__main,
  .read-next:focus-within .read-next__main {
    justify-content: flex-start;
    margin-top: 8px;
  }

  .read-next:hover .read-next__thumb,
  .read-next:focus-within .read-next__thumb {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
    border: 1px solid var(--pf-line);
    background: rgba(255, 255, 255, 0.75);
  }

  body.dark .read-next:hover .read-next__thumb,
  body.dark .read-next:focus-within .read-next__thumb {
    border-color: var(--pf-line-dark);
    background: rgba(255, 255, 255, 0.08);
  }

  .read-next:hover .read-next__thumb img,
  .read-next:focus-within .read-next__thumb img {
    width: 26px;
    height: 26px;
  }

  .read-next:hover .read-next__title,
  .read-next:focus-within .read-next__title {
    display: -webkit-box;
  }

  .read-next:hover .read-next__footer,
  .read-next:focus-within .read-next__footer,
  .read-next:hover .read-next__close,
  .read-next:focus-within .read-next__close {
    display: flex;
  }

  .read-next:hover .read-next__close,
  .read-next:focus-within .read-next__close {
    opacity: 1;
    transform: scale(1);
  }

  .read-next--promo:hover .read-next__thumb,
  .read-next--promo:focus-within .read-next__thumb {
    flex-basis: 52px;
    width: 52px;
    height: 42px;
    border: 1px solid var(--pf-line);
    background: rgba(255, 255, 255, 0.9);
  }

  body.dark .read-next--promo:hover .read-next__thumb,
  body.dark .read-next--promo:focus-within .read-next__thumb {
    background: rgba(255, 255, 255, 0.9);
  }

  .read-next--promo:hover .read-next__thumb img,
  .read-next--promo:focus-within .read-next__thumb img {
    width: 46px;
    height: 35px;
  }
}

@keyframes read-next-unfold {
  from {
    opacity: 0.3;
    transform: translate3d(10px, 6px, 0) scale(0.9);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* a phone screen has no gutter to spare */

@media (max-width: 799px) {

  .read-next {
    display: none;
  }
}

@media print {

  .read-next {
    display: none;
  }
}

/* reduced motion */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}