[hidden] {
  display: none !important;
}

body {
  --font-geist-sans: "Segoe UI", Inter, Arial, sans-serif;
}

/*
 * The original interface used buttons for many navigational controls. The PHP
 * edition uses real links, so explicitly inherit the designed foreground
 * colour instead of allowing browser-default blue and purple link colours.
 */
a {
  color: inherit;
}

.brand {
  color: inherit;
  text-decoration: none;
}

.event-code-card,
.submit-world > a,
.host-event-strip > a {
  color: inherit;
  text-decoration: none;
}

.submit-world > a,
.host-event-strip > a {
  align-self: center;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #2faab2;
  padding: 11px 18px;
  color: #fff;
  font-size: 12px;
  font-weight: 850;
}

.world-detail-title > a {
  border: 2px solid #fff;
  border-radius: 999px;
  background: #2faab2;
  padding: 12px 19px;
  color: #fff;
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}

.world-detail-title > a span {
  margin-left: 14px;
}

a.map-node {
  color: inherit;
  text-decoration: none;
}

.launcher-action {
  color: inherit;
  text-decoration: none;
}

.primary-cta,
.outline-cta,
.enter-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  text-decoration: none;
}

.global-search-backdrop:not([hidden]) {
  display: grid;
}

.search-filters nav a {
  min-height: 42px;
  display: grid;
  grid-template-columns: 8px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  border-radius: 8px;
  color: #9da2a1;
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
}

.search-filters nav a > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #565b5a;
}

.search-filters nav a.active,
.search-filters nav a:hover {
  background: rgba(76, 196, 201, .1);
  color: #fff;
}

.search-filters nav a.active > span {
  background: #58d2d7;
  box-shadow: 0 0 9px #58d2d7;
}

.search-page-input button {
  min-width: 105px;
  align-self: stretch;
  border: 0;
  border-radius: 999px;
  background: #35acb7;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.php-hub-page {
  background:
    radial-gradient(circle at 76% 12%, rgba(63, 39, 134, .26), transparent 32%),
    linear-gradient(180deg, rgba(8,13,25,.18), #080d19 760px),
    url("/homespace-night.png?v=ddbbfd739039") center top / cover fixed no-repeat;
}

.php-hub-page > section,
.php-hub-page > .site-footer {
  position: relative;
  z-index: 1;
}

.php-hub-hero {
  width: min(1180px, calc(100% - 48px));
  min-height: 470px;
  margin: 20px auto 38px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(330px, .8fr);
  align-items: center;
  gap: 55px;
}

.php-hub-hero h1 {
  max-width: 720px;
  margin: 15px 0 18px;
  font-size: clamp(50px, 5.2vw, 70px);
  line-height: .95;
  letter-spacing: -4px;
}

.inner-page .php-hub-hero p {
  max-width: 650px;
  margin: 0 0 28px;
  color: #b2b7b6;
  font-size: 16px !important;
  line-height: 1.65;
}

.php-hub-art {
  position: relative;
  min-height: 330px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 30px;
}

.php-hub-art img {
  position: relative;
  z-index: 2;
  width: 90px;
  height: 90px;
}

.php-hub-art i {
  position: absolute;
  width: 280px;
  height: 125px;
  border: 1px solid rgba(91, 214, 220, .32);
  border-radius: 50%;
  transform: rotate(30deg);
}

.php-hub-art i:last-child {
  transform: rotate(-30deg);
}

.php-hub-grid {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto 90px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.php-hub-grid > a {
  position: relative;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: 25px;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease;
}

.php-hub-grid > a:hover {
  border-color: rgba(95, 215, 220, .42);
  transform: translateY(-4px);
}

.php-hub-card-thumb {
  height: 148px;
  flex: 0 0 148px;
}

.php-hub-card-copy {
  min-height: 190px;
  display: flex;
  flex-direction: column;
  padding: 24px 29px 27px;
}

.php-hub-grid h2 {
  margin: auto 0 11px;
  font-size: 27px;
  line-height: 1.08;
  letter-spacing: -1.2px;
}

.inner-page .php-hub-grid p {
  margin: 0;
  color: #aeb3b2;
  font-size: 14px !important;
}

.php-hub-grid b {
  position: absolute;
  top: 170px;
  right: 27px;
  color: #58d2d7;
  font-size: 18px;
}

.php-hub-grid > a:hover .php-hub-card-thumb > img {
  transform: scale(1.08);
}

.official-links-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 980px;
}

.official-links-grid > a {
  min-height: 350px;
}

.official-links-note {
  width: min(980px, calc(100% - 48px));
  margin: -52px auto 80px;
  color: #8f9695;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.php-not-found {
  position: relative;
  z-index: 1;
  width: min(760px, calc(100% - 40px));
  margin: 85px auto 120px;
  padding: clamp(40px, 7vw, 85px);
  border-radius: 30px;
  text-align: center;
}

.php-not-found h1 {
  margin: 15px 0;
  font-size: clamp(42px, 6vw, 65px);
  line-height: 1;
  letter-spacing: -3px;
}

.inner-page .php-not-found p {
  margin: 0 auto 30px;
  color: #aeb3b2;
  font-size: 16px !important;
}

.markdown-table-wrap {
  overflow-x: auto;
}

@media (max-width: 850px) {
  .php-hub-hero {
    grid-template-columns: 1fr;
    padding: 35px 0;
  }

  .php-hub-art {
    min-height: 250px;
  }

  .php-hub-grid {
    grid-template-columns: 1fr;
  }

  .official-links-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .php-hub-hero,
  .php-hub-grid {
    width: min(100% - 30px, 1180px);
  }

  .php-hub-hero {
    min-height: auto;
    gap: 28px;
  }

  .php-hub-hero h1 {
    font-size: clamp(43px, 13vw, 55px);
    letter-spacing: -3px;
  }

  .php-hub-art {
    display: none;
  }
}

/* Persistent PHP navigation dock */
.site-shell,
.inner-page {
  overflow-x: clip;
  overflow-y: visible;
}

.topbar,
.inner-header {
  width: min(1320px, calc(100% - 24px));
  min-height: 82px;
  height: auto;
  margin: 10px auto 0;
  padding: 11px 16px 11px 20px;
  position: sticky;
  top: 10px;
  z-index: 100;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 22px;
  background:
    linear-gradient(110deg, rgba(28, 30, 34, .96), rgba(13, 17, 29, .92));
  box-shadow:
    0 18px 48px rgba(0, 0, 0, .38),
    inset 0 1px rgba(255, 255, 255, .08);
  backdrop-filter: blur(18px) saturate(125%);
}

.topbar .brand,
.inner-header .brand {
  flex: 0 0 auto;
  color: #f7f7f3;
  font-size: 24px;
  text-decoration: none;
}

.primary-nav,
.inner-nav {
  min-height: 54px;
  padding: 6px;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 16px;
  background: rgba(5, 8, 16, .35);
}

.primary-nav a,
.inner-nav a {
  min-height: 42px;
  padding: 11px 15px !important;
  border-radius: 11px;
  color: #c8cccb;
  font-size: 17px !important;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .1px;
  opacity: 1;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}

.primary-nav a:hover,
.inner-nav a:hover {
  background: rgba(255, 255, 255, .075);
  color: #fff;
  transform: translateY(-1px);
}

.primary-nav a.active,
.inner-nav a.active {
  background: rgba(57, 181, 188, .15);
  color: #fff;
}

.primary-nav a.active::after,
.inner-nav a.active::after {
  left: 15px;
  right: 15px;
  bottom: 5px;
  height: 3px;
}

.header-actions,
.inner-header-actions {
  flex: 0 0 auto;
  gap: 10px;
}

.topbar .global-search-button,
.inner-header .global-search-button {
  width: 46px;
  height: 46px;
  border-color: rgba(255, 255, 255, .26);
  background: rgba(7, 10, 19, .52);
}

.topbar .enter-pill,
.inner-header .enter-pill {
  min-height: 46px;
  padding: 0 20px;
  border-color: rgba(255, 255, 255, .85);
  background: rgba(7, 10, 19, .42);
  font-size: 13px !important;
  letter-spacing: .3px;
}

.topbar .enter-pill:hover,
.topbar .enter-pill:focus-visible,
.inner-header .enter-pill:hover,
.inner-header .enter-pill:focus-visible {
  border-color: #65d5da;
  background: rgba(101, 213, 218, .13);
  color: #fff;
}

@media (max-width: 1120px) {
  .topbar,
  .inner-header {
    padding-left: 15px;
  }

  .topbar .brand,
  .inner-header .brand {
    font-size: 21px;
  }

  .primary-nav a,
  .inner-nav a {
    padding-inline: 10px !important;
    font-size: 15px !important;
  }

  .topbar .enter-pill,
  .inner-header .enter-pill {
    padding-inline: 15px;
  }
}

@media (max-width: 900px) {
  .topbar,
  .inner-header {
    width: calc(100% - 20px);
    min-height: 72px;
    top: 7px;
    margin-top: 7px;
    border-radius: 18px;
  }

  .primary-nav,
  .inner-nav {
    display: none;
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    width: min(310px, calc(100vw - 20px));
    min-height: 0;
    padding: 10px;
    gap: 5px;
    border-radius: 17px;
    background: rgba(25, 27, 30, .98);
    box-shadow: 0 22px 55px rgba(0, 0, 0, .52);
    flex-direction: column;
    align-items: stretch;
  }

  .primary-nav.open,
  .inner-nav.open {
    display: flex;
  }

  .primary-nav a,
  .inner-nav a {
    width: 100%;
    min-height: 48px;
    padding: 14px 15px !important;
    font-size: 17px !important;
  }

  .primary-nav a.active::after,
  .inner-nav a.active::after {
    display: none;
  }

  .menu-button,
  .inner-menu-button {
    display: grid;
  }
}

@media (max-width: 600px) {
  .topbar,
  .inner-header {
    width: calc(100% - 14px);
    padding: 9px 10px 9px 13px;
  }

  .topbar .brand,
  .inner-header .brand {
    gap: 8px;
    font-size: 19px;
  }

  .topbar .enter-pill,
  .inner-header .enter-pill {
    display: none;
  }
}

/* Markdown-powered worlds, events and community collections */
.content-directory-page,
.content-detail-page {
  background:
    radial-gradient(circle at 78% 8%, rgba(50, 40, 138, .3), transparent 31%),
    radial-gradient(circle at 8% 29%, rgba(91, 28, 130, .2), transparent 26%),
    linear-gradient(180deg, rgba(8,13,25,.18), #080d19 760px),
    url("/homespace-night.png?v=ddbbfd739039") center top / cover fixed no-repeat;
}

.content-directory-page > section,
.content-directory-page > .site-footer,
.content-detail-page > header,
.content-detail-page > section,
.content-detail-page > .site-footer {
  position: relative;
  z-index: 1;
}

.content-directory-hero,
.content-directory-panel,
.content-detail-hero,
.content-detail-shell {
  width: min(1180px, calc(100% - 48px));
  margin-right: auto;
  margin-left: auto;
}

.content-directory-hero {
  min-height: 355px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(290px, .65fr);
  align-items: center;
  gap: 55px;
  padding: 30px 0 38px;
}

.content-directory-hero h1,
.content-detail-hero h1 {
  max-width: 720px;
  margin: 15px 0 18px;
  font-size: clamp(46px, 5vw, 66px);
  line-height: .98;
  letter-spacing: -3.5px;
}

.inner-page .content-directory-hero p,
.inner-page .content-detail-hero p {
  max-width: 650px;
  margin: 0;
  color: #b7bcbb;
  font-size: 16px !important;
  line-height: 1.65;
}

.content-directory-art {
  position: relative;
  min-height: 250px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 28px;
}

.content-directory-art img,
.content-detail-art img {
  position: relative;
  z-index: 3;
  width: 74px;
  height: 74px;
  object-fit: contain;
}

.content-directory-art i,
.content-detail-art i {
  position: absolute;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(91, 210, 217, .32);
  border-radius: 50%;
}

.content-directory-art i:nth-of-type(1),
.content-detail-art i:nth-of-type(1) {
  transform: rotate(29deg) scaleY(.48);
}

.content-directory-art i:nth-of-type(2),
.content-detail-art i:nth-of-type(2) {
  transform: rotate(-34deg) scaleY(.56);
}

.content-directory-art > span {
  position: absolute;
  right: 22px;
  bottom: 18px;
  color: #68d9de;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.content-directory-panel {
  margin-bottom: 90px;
  padding: 34px;
  border-radius: 28px;
}

.content-directory-panel > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  padding-bottom: 25px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.content-directory-panel > header h2 {
  margin: 7px 0 0;
  font-size: 32px;
  letter-spacing: -1px;
}

.content-directory-panel > header label {
  width: min(340px, 100%);
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0 17px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 999px;
  background: rgba(5, 8, 14, .35);
}

.content-directory-panel > header input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 13px;
}

.content-directory-panel .directory-categories {
  margin: 18px 0 26px;
}

.content-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.content-directory-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 22px;
}

.content-card-art {
  position: relative;
  min-height: 178px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(76, 199, 205, .18), transparent 32%),
    linear-gradient(145deg, rgba(24, 65, 76, .85), rgba(16, 24, 31, .96));
  color: #fff;
  text-decoration: none;
}

.accent-green .content-card-art {
  background: radial-gradient(circle, rgba(74, 160, 91, .25), transparent 33%), linear-gradient(145deg, #244f3a, #131b1a);
}

.accent-gold .content-card-art,
.accent-amber .content-card-art {
  background: radial-gradient(circle, rgba(190, 143, 45, .24), transparent 33%), linear-gradient(145deg, #5b4421, #1d1b17);
}

.accent-violet .content-card-art {
  background: radial-gradient(circle, rgba(146, 77, 184, .25), transparent 33%), linear-gradient(145deg, #4d2d63, #17151e);
}

.content-card-art > span {
  position: absolute;
  top: 15px;
  left: 17px;
  z-index: 2;
  color: #d7ffff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.1px;
}

.content-card-art > div {
  position: absolute;
  inset: 0;
}

.content-card-art i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130px;
  height: 130px;
  border: 1px solid rgba(115, 222, 227, .25);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(28deg) scaleY(.48);
}

.content-card-art i:last-child {
  transform: translate(-50%, -50%) rotate(-38deg) scaleY(.55);
}

.content-card-art img {
  position: relative;
  z-index: 2;
  width: 54px;
  height: 54px;
  object-fit: contain;
}

.content-card-copy {
  min-height: 258px;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 22px;
}

.content-card-copy > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.content-card-copy > div:first-child span,
.content-card-copy > div:first-child small {
  color: #64d8dd;
  font-size: 12px !important;
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.content-card-copy > div:first-child small {
  color: #929a98;
  text-align: right;
}

.content-card-copy h2 {
  margin: 15px 0 10px;
  font-size: 23px;
  line-height: 1.12;
  letter-spacing: -.7px;
}

.content-card-copy h2 a {
  color: #fff;
  text-decoration: none;
}

.inner-page .content-card-copy p {
  margin: 0 0 20px;
  color: #aeb4b3;
  font-size: 13px !important;
  line-height: 1.6;
}

.content-card-copy footer {
  min-height: 36px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 17px;
  border-top: 1px solid rgba(255, 255, 255, .09);
}

.content-card-copy footer > a {
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .5px;
  text-decoration: none;
}

.content-card-copy footer > a b {
  margin-left: 7px;
  color: #64d8dd;
}

.content-detail-hero {
  min-height: 410px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .7fr);
  align-items: center;
  gap: 62px;
  padding: 38px 0 46px;
}

.content-detail-breadcrumbs {
  display: flex;
  gap: 9px;
  margin-bottom: 25px;
  color: #828a89;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.content-detail-breadcrumbs a {
  color: #68d9de;
  text-decoration: none;
}

.content-detail-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}

.content-detail-art {
  position: relative;
  min-height: 290px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 28px;
}

.content-detail-art > span {
  position: absolute;
  top: 20px;
  left: 22px;
  color: #68d9de;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.content-detail-art > div {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.portfolio-world-detail {
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1fr);
}

.world-detail-photo {
  aspect-ratio: 4 / 3;
  min-height: 0;
  margin: 0;
  background: #12161d;
}

.content-detail-art.world-detail-photo > img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.world-detail-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(5, 8, 15, .03) 54%, rgba(5, 8, 15, .56) 100%);
  pointer-events: none;
}

.content-detail-art.world-detail-photo > span {
  top: auto;
  bottom: 20px;
  z-index: 3;
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(8,12,20,.72);
  color: #fff;
  backdrop-filter: blur(8px);
}

.world-visit-cta {
  min-height: 45px;
  padding: 0 18px;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .45px;
}

.world-visit-cta:hover {
  border-color: #65d7dc;
  color: #78e2e6;
}

.content-detail-shell {
  display: grid;
  grid-template-columns: 215px minmax(0, 1fr) 180px;
  align-items: start;
  gap: 20px;
  padding-bottom: 95px;
}

.content-detail-facts,
.content-detail-body {
  border-radius: 23px;
}

.content-detail-facts {
  position: sticky;
  top: 92px;
  padding: 22px;
}

.content-detail-facts > strong,
.content-detail-toc > strong {
  display: block;
  margin-bottom: 14px;
  color: #64d8dd;
  font-size: 12px;
  letter-spacing: 1px;
}

.content-detail-facts > div {
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, .09);
}

.content-detail-facts span,
.content-detail-facts b {
  display: block;
}

.content-detail-facts span {
  margin-bottom: 5px;
  color: #7f8786;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .8px;
}

.content-detail-facts b {
  color: #e8e9e6;
  font-size: 12px;
  line-height: 1.45;
}

.content-detail-facts > a {
  display: block;
  margin-top: 14px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.content-detail-body {
  min-width: 0;
  padding: 38px 42px;
}

.content-detail-body .markdown-body {
  max-width: 720px;
  margin: 0 auto;
}

.content-detail-body .markdown-body h2 {
  scroll-margin-top: 110px;
}

.content-detail-body .post-tags {
  max-width: 720px;
  margin: 35px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.content-detail-toc {
  position: sticky;
  top: 100px;
  padding: 16px 0;
}

.content-detail-toc > a {
  display: block;
  padding: 8px 0;
  color: #9da3a2;
  font-size: 12px;
  line-height: 1.4;
  text-decoration: none;
}

.content-detail-toc > a:hover {
  color: #fff;
}

.content-detail-toc > div {
  margin-top: 18px;
  padding-top: 17px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: #7f8786;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .7px;
}

@media (max-width: 1050px) {
  .content-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .content-detail-shell {
    grid-template-columns: 210px minmax(0, 1fr);
  }

  .content-detail-toc {
    display: none;
  }
}

@media (max-width: 780px) {
  .content-directory-hero,
  .content-detail-hero {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 48px 0 34px;
  }

  .portfolio-world-detail {
    grid-template-columns: 1fr;
  }

  .content-directory-art,
  .content-detail-art {
    min-height: 210px;
  }

  .content-directory-panel > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .content-directory-panel > header label {
    width: 100%;
  }

  .content-detail-shell {
    grid-template-columns: 1fr;
  }

  .content-detail-facts {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 20px;
  }

  .content-detail-facts > strong,
  .content-detail-facts > a {
    grid-column: 1 / -1;
  }
}

@media (max-width: 650px) {
  .content-directory-hero,
  .content-directory-panel,
  .content-detail-hero,
  .content-detail-shell {
    width: min(100% - 30px, 1180px);
  }

  .content-directory-hero h1,
  .content-detail-hero h1 {
    font-size: 44px;
    letter-spacing: -2.7px;
  }

  .content-directory-panel {
    padding: 23px 18px;
  }

  .content-card-grid {
    grid-template-columns: 1fr;
  }

  .content-card-copy {
    min-height: 235px;
  }

  .content-detail-body {
    padding: 29px 22px;
  }
}

.site-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1000;
  max-width: min(360px, calc(100% - 30px));
  border: 1px solid rgba(91, 211, 217, .42);
  border-radius: 14px;
  background: #202829;
  box-shadow: 0 18px 55px rgba(0, 0, 0, .45);
  padding: 14px 18px;
  color: #fff;
  font-size: 13px;
  font-weight: 750;
}

.content-directory-card {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease;
}

.content-directory-card:hover {
  border-color: rgba(95, 215, 220, .45);
  transform: translateY(-4px);
}

.content-directory-card:focus-visible {
  outline: 3px solid #64d7dc;
  outline-offset: 4px;
}

.content-card-copy h2 {
  color: #fff;
}

.content-card-copy footer {
  justify-content: flex-end;
}

.content-card-copy footer strong {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 12px;
  letter-spacing: .7px;
}

.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 3px;
  pointer-events: none;
}

.reading-progress i {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, #32aeb7, #72dfe3);
  box-shadow: 0 0 12px rgba(91, 211, 217, .6);
}

.saved-items-page,
.settings-local-page {
  background:
    radial-gradient(circle at 78% 9%, rgba(63, 39, 134, .24), transparent 32%),
    linear-gradient(180deg, rgba(8,13,25,.18), #080d19 760px),
    url("/homespace-night.png?v=ddbbfd739039") center top / cover fixed no-repeat;
}

.saved-items-page > section,
.settings-local-page > section,
.saved-items-page > .site-footer,
.settings-local-page > .site-footer {
  position: relative;
  z-index: 1;
}

.saved-hero,
.settings-local-hero,
.settings-local-shell {
  width: min(1120px, calc(100% - 48px));
  margin-inline: auto;
}

.saved-hero {
  min-height: 350px;
  display: grid;
  grid-template-columns: 1fr 210px;
  align-items: center;
  gap: 45px;
}

.saved-hero h1,
.settings-local-hero h1 {
  margin: 13px 0 15px;
  font-size: clamp(48px, 5.2vw, 68px);
  line-height: .96;
  letter-spacing: -4px;
}

.inner-page .saved-hero p,
.inner-page .settings-local-hero p {
  max-width: 640px;
  margin: 0;
  color: #b0b6b5;
  font-size: 16px !important;
}

.saved-counter {
  min-height: 180px;
  display: grid;
  place-content: center;
  gap: 6px;
  border-radius: 28px;
  text-align: center;
}

.saved-counter strong {
  color: #63d8dd;
  font-size: 58px;
  line-height: 1;
  letter-spacing: -3px;
}

.saved-counter span {
  color: #89908f;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.2px;
}

.saved-library {
  width: min(1120px, calc(100% - 48px));
  min-height: 380px;
  margin: 0 auto 85px;
  border-radius: 28px;
  padding: clamp(25px, 5vw, 48px);
}

.saved-library > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 25px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  padding-bottom: 22px;
}

.saved-library h2 {
  margin: 7px 0 0;
  font-size: 32px;
}

.saved-library > header button,
.settings-local-list > footer button {
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 999px;
  background: transparent;
  padding: 10px 14px;
  color: #aeb4b3;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.saved-items-grid {
  display: grid;
  gap: 13px;
  margin-top: 24px;
}

.saved-local-card {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  border-radius: 18px;
  padding: 17px;
}

.saved-local-icon {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border-radius: 15px;
  background: #286a6f;
}

.saved-local-icon.violet { background: #604175; }
.saved-local-icon.green { background: #326c43; }
.saved-local-icon.gold,
.saved-local-icon.amber { background: #806121; }
.saved-local-icon.blue { background: #286b8d; }

.saved-local-icon img {
  width: 35px;
  height: 35px;
}

.saved-local-card small {
  color: #5fd7dc;
  font-size: 12px !important;
  font-weight: 900;
  letter-spacing: 1px;
}

.saved-local-card h2 {
  margin: 6px 0;
  font-size: 20px;
}

.saved-local-card h2 a {
  color: #fff;
  text-decoration: none;
}

.inner-page .saved-local-card p {
  margin: 0;
  color: #9ea4a3;
  font-size: 13px !important;
}

.saved-local-card > div:last-child {
  display: flex;
  align-items: center;
  gap: 9px;
}

.saved-local-card > div:last-child a,
.saved-local-card > div:last-child button {
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 999px;
  background: transparent;
  padding: 9px 12px;
  color: #fff;
  font-size: 12px !important;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

.saved-local-card > div:last-child a {
  border-color: rgba(91, 211, 217, .4);
  color: #6fdde1;
}

.saved-empty {
  min-height: 285px;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
}

.saved-empty > span {
  color: #5fd7dc;
  font-size: 36px;
}

.saved-empty h2 {
  margin: 12px 0 8px;
}

.inner-page .saved-empty p {
  margin: 0 0 20px;
  color: #939998;
  font-size: 14px !important;
}

.saved-empty a {
  color: #fff;
  font-size: 12px !important;
  font-weight: 900;
  text-decoration: none;
}

.settings-local-hero {
  min-height: 310px;
  display: grid;
  align-content: center;
}

.settings-local-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  align-items: start;
  gap: 22px;
  margin-bottom: 90px;
}

.settings-local-summary,
.settings-local-list {
  border-radius: 25px;
}

.settings-local-summary {
  display: grid;
  justify-items: start;
  padding: 28px;
}

.settings-local-summary > span {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50%;
  background: #2f8d95;
  font-size: 12px;
  font-weight: 900;
}

.settings-local-summary strong {
  margin-top: 22px;
  color: #64d8dd;
  font-size: 12px;
  letter-spacing: 1px;
}

.inner-page .settings-local-summary p {
  color: #9da3a2;
  font-size: 13px !important;
}

.settings-local-summary a {
  color: #fff;
  font-size: 12px !important;
  font-weight: 800;
  text-decoration: none;
}

.settings-local-list {
  overflow: hidden;
  padding: 35px;
}

.settings-local-list > header {
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  padding-bottom: 24px;
}

.settings-local-list h2 {
  margin: 7px 0 0;
  font-size: 32px;
}

.preference-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  align-items: center;
  gap: 20px;
  min-height: 100px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  cursor: pointer;
}

.preference-row strong,
.preference-row small {
  display: block;
}

.preference-row strong {
  font-size: 14px;
}

.preference-row small {
  margin-top: 7px;
  color: #8e9594;
  font-size: 12px !important;
}

.preference-row input {
  position: absolute;
  opacity: 0;
}

.preference-row > i {
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: #3b3f40;
  transition: background .2s ease;
}

.preference-row > i::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #aeb4b3;
  transition: transform .2s ease, background .2s ease;
}

.preference-row input:checked + i {
  background: #2d9da6;
}

.preference-row input:checked + i::after {
  background: #fff;
  transform: translateX(20px);
}

.preference-row input:focus-visible + i {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.settings-local-list > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 24px;
}

.inner-page .settings-local-list > footer p {
  margin: 0;
  color: #858c8b;
  font-size: 12px !important;
}

.pref-high-contrast .alt-panel {
  border-color: rgba(255, 255, 255, .34);
}

.pref-high-contrast .inner-page p,
.pref-high-contrast .inner-page small {
  color: #d8dcdb !important;
}

.pref-reduced-motion *,
.pref-reduced-motion *::before,
.pref-reduced-motion *::after {
  scroll-behavior: auto !important;
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}

@media (max-width: 780px) {
  .saved-hero {
    grid-template-columns: 1fr;
    padding: 40px 0;
  }

  .saved-counter {
    display: none;
  }

  .settings-local-shell {
    grid-template-columns: 1fr;
  }

  .saved-local-card {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .saved-local-icon {
    width: 54px;
    height: 54px;
  }

  .saved-local-card > div:last-child {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

@media (max-width: 650px) {
  .saved-hero,
  .settings-local-hero,
  .settings-local-shell,
  .saved-library {
    width: min(100% - 30px, 1120px);
  }

  .saved-hero h1,
  .settings-local-hero h1 {
    font-size: 46px;
    letter-spacing: -3px;
  }

  .saved-library,
  .settings-local-list {
    padding: 24px 20px;
  }

  .saved-library > header,
  .settings-local-list > footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .site-toast {
    right: 15px;
    bottom: 15px;
  }
}

/* Readable blog navigation and article shortcuts */
.blog-category-bar {
  min-height: 66px;
  gap: 4px;
  padding: 10px 12px;
}

.blog-category-bar a {
  min-height: 46px;
  padding: 13px 20px;
  font-size: 15px !important;
  line-height: 1.2;
  letter-spacing: .1px;
}

.blog-category-bar .blog-feed-link {
  padding-inline: 18px;
  font-size: 14px !important;
}

.post-rail-card {
  padding: 26px;
}

.post-rail-card > span {
  margin-bottom: 12px;
  font-size: 13px !important;
  line-height: 1.3;
  letter-spacing: 1.15px;
}

.post-rail-card a {
  min-height: 58px;
  gap: 14px;
  padding: 17px 0;
  font-size: 15px !important;
  line-height: 1.45;
}

.post-rail-card a strong {
  font-size: inherit;
  line-height: inherit;
}

.post-rail-card a b {
  display: grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(90, 208, 212, .35);
  border-radius: 50%;
  place-items: center;
  font-size: 15px;
}

.post-rail-card a:hover {
  color: #fff;
}

@media (max-width: 650px) {
  .blog-category-bar {
    padding: 8px;
    border-radius: 18px;
  }

  .blog-category-bar a {
    min-height: 44px;
    padding: 12px 16px;
    font-size: 14px !important;
  }
}

/* Community hero artwork */
.community-room-art {
  position: relative;
  height: 340px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 58%, rgba(91, 205, 209, .16), transparent 31%),
    linear-gradient(180deg, #252036 0%, #1c2028 58%, #171a20 100%);
}

.community-room-art::before,
.community-room-art::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto;
  border: 1px solid rgba(103, 208, 212, .16);
  border-radius: 50%;
}

.community-room-art::before {
  width: 410px;
  height: 410px;
  left: calc(50% - 205px);
  top: 31px;
}

.community-room-art::after {
  width: 510px;
  height: 260px;
  left: calc(50% - 255px);
  top: 92px;
}

.community-room-stars i {
  position: absolute;
  z-index: 1;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .7);
  box-shadow: 0 0 8px rgba(255, 255, 255, .45);
}

.community-room-stars i:nth-child(1) { left: 12%; top: 16%; }
.community-room-stars i:nth-child(2) { left: 28%; top: 27%; width: 2px; height: 2px; }
.community-room-stars i:nth-child(3) { right: 18%; top: 19%; }
.community-room-stars i:nth-child(4) { right: 31%; top: 35%; width: 2px; height: 2px; }
.community-room-stars i:nth-child(5) { left: 18%; top: 46%; width: 2px; height: 2px; }
.community-room-stars i:nth-child(6) { right: 11%; top: 47%; width: 2px; height: 2px; }

.community-room-glow {
  position: absolute;
  z-index: 1;
  width: 150px;
  height: 150px;
  left: calc(50% - 75px);
  top: 82px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(103, 208, 212, .5), rgba(103, 208, 212, .12) 38%, transparent 70%);
  filter: blur(3px);
}

.community-room-arch {
  position: absolute;
  z-index: 3;
  width: 104px;
  height: 145px;
  left: calc(50% - 52px);
  top: 74px;
  border: 4px solid #66cdd2;
  border-bottom: 0;
  border-radius: 54px 54px 8px 8px;
  background: linear-gradient(180deg, rgba(49, 164, 176, .24), rgba(17, 27, 40, .74));
  box-shadow:
    0 0 0 9px rgba(94, 202, 208, .08),
    0 0 38px rgba(78, 197, 203, .23);
}

.community-room-arch span {
  position: absolute;
  width: 42px;
  height: 3px;
  left: 27px;
  bottom: 28px;
  border-radius: 999px;
  background: #f3f0e8;
  box-shadow: 0 12px 0 rgba(243, 240, 232, .46);
}

.community-room-hills i {
  position: absolute;
  z-index: 2;
  bottom: 0;
  width: 62%;
  height: 125px;
  background: #17243d;
}

.community-room-hills i:nth-child(1) {
  left: -13%;
  clip-path: polygon(0 100%, 0 66%, 33% 22%, 60% 65%, 81% 37%, 100% 100%);
}

.community-room-hills i:nth-child(2) {
  right: -13%;
  background: #202343;
  clip-path: polygon(0 100%, 16% 55%, 38% 74%, 68% 14%, 100% 67%, 100% 100%);
}

.community-room-hills i:nth-child(3) {
  left: 18%;
  bottom: -34px;
  width: 64%;
  height: 100px;
  border-radius: 50% 50% 0 0;
  background: #101722;
}

.community-room-seats {
  position: absolute;
  z-index: 4;
  inset: auto 0 36px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 46px;
}

.community-room-seats i {
  width: 48px;
  height: 23px;
  border-radius: 50%;
  background: #35838d;
  box-shadow: inset 0 -7px 0 rgba(9, 24, 35, .3), 0 8px 16px rgba(0, 0, 0, .22);
}

.community-room-seats i:nth-child(2) {
  width: 58px;
  height: 27px;
  margin-bottom: 5px;
  background: #b1843a;
}

.community-room-seats i:nth-child(3) {
  background: #3f764e;
}

.community-room-caption {
  position: absolute;
  z-index: 5;
  right: 22px;
  bottom: 18px;
  color: rgba(231, 238, 237, .66);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 1.4px;
}

@media (max-width: 920px) {
  .community-room-art {
    width: min(100%, 520px);
    justify-self: center;
  }
}

@media (max-width: 650px) {
  .community-room-art {
    height: 285px;
    margin: -8px 0 0;
  }

  .community-room-arch {
    top: 50px;
  }

  .community-room-seats {
    bottom: 29px;
    gap: 30px;
  }
}

/* Home profile card */
.home-profile-card {
  align-self: center;
  min-height: 400px;
  overflow: hidden;
  background: linear-gradient(155deg, rgba(49, 51, 51, .98), rgba(20, 22, 23, .99));
}

.home-profile-photo {
  position: relative;
  height: 188px;
  margin: 0;
  overflow: hidden;
  background: #1c2131;
}

.home-profile-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 54%, rgba(20, 22, 23, .82) 100%);
}

.home-profile-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 52%;
  filter: saturate(.82) contrast(1.03);
}

.helper-status {
  position: absolute;
  z-index: 2;
  left: 15px;
  right: 15px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #e9ffef;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
  letter-spacing: .75px;
}

.helper-status b {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(153, 255, 190, .62);
  border-radius: 50%;
  background: linear-gradient(145deg, #3dcc71, #17673a);
  color: #baffd1;
  font-size: 16px;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(4, 46, 20, .7);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .22),
    0 5px 14px rgba(0, 0, 0, .3),
    0 0 16px rgba(60, 204, 113, .18);
}

.helper-status span {
  border: 1px solid rgba(91, 210, 139, .7);
  border-radius: 999px;
  background: rgba(28, 105, 57, .88);
  padding: 6px 9px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}

.home-profile-copy {
  padding: 21px 20px 23px;
}

.home-profile-copy > span {
  color: #6bd1d4;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 1.35px;
}

.home-profile-copy h2 {
  margin: 8px 0 15px;
  color: #f4f5f2;
  font-size: 23px;
  line-height: 1;
  letter-spacing: -.7px;
}

.home-profile-copy p {
  margin: 0;
  color: #c1c5c4;
  font-size: 12px;
  line-height: 1.5;
}

.home-profile-copy p + p {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: #8fd9b0;
}

@media (max-width: 1180px) {
  .home-profile-card {
    display: none;
  }
}

/* Launcher social links */
.launcher-socials {
  margin-top: auto;
  padding: 17px 8px 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  align-items: center;
  gap: 10px;
}

.launcher-socials a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 50%;
  background: rgba(255, 255, 255, .045);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.launcher-socials a img {
  width: 18px;
  height: 18px;
  display: block;
}

.launcher-socials a:hover,
.launcher-socials a:focus-visible {
  transform: translateY(-2px);
  border-color: transparent;
  outline: none;
}

.launcher-socials a.patreon:hover,
.launcher-socials a.patreon:focus-visible {
  background: #ff424d;
}

.launcher-socials a.facebook:hover,
.launcher-socials a.facebook:focus-visible {
  background: #1877f2;
}

.launcher-socials a.instagram:hover,
.launcher-socials a.instagram:focus-visible {
  background: linear-gradient(135deg, #833ab4, #fd1d1d 58%, #fcb045);
}

.launcher-socials a:focus-visible {
  box-shadow: 0 0 0 3px #202323, 0 0 0 5px #65d5da;
}

@media (max-width: 860px) {
  .launcher-socials {
    display: none;
  }
}

/* Editorial thumbnails and source video */
.blog-card-art.has-thumbnail,
.blog-featured-art.has-thumbnail,
.post-hero-art.has-thumbnail {
  background: #171b22;
}

.blog-card-art.has-thumbnail::after,
.blog-featured-art.has-thumbnail::after,
.post-hero-art.has-thumbnail::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 9, 16, .08) 28%, rgba(7, 9, 16, .78) 100%);
}

.blog-card-art > img.editorial-thumbnail,
.blog-featured-art > img.editorial-thumbnail,
.post-hero-art > img.editorial-thumbnail {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
  transform: none;
  filter: saturate(.82) contrast(1.05);
}

.blog-card-art.has-thumbnail > span,
.blog-featured-art.has-thumbnail > span {
  z-index: 3;
}

.post-video-embed {
  margin: 0 0 38px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 19px;
  background: #0d1015;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .24);
}

.post-video-embed iframe {
  width: 100%;
  height: 445px;
  display: block;
  border: 0;
  background: #0d1015;
}

.post-video-embed footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 17px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: #8e9695;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 1px;
}

.post-video-embed footer a {
  color: #66d4d9;
  font-size: 12px !important;
  text-decoration: none;
}

@media (max-width: 650px) {
  .post-video-embed {
    margin-inline: -9px;
    border-radius: 15px;
  }

  .post-video-embed iframe {
    height: 360px;
  }
}

/* Readable featured-story typography */
.inner-page section.blog-featured a.blog-featured-category {
  display: inline-block;
  width: fit-content;
  font-size: 14px !important;
  line-height: 1.25 !important;
  letter-spacing: 1.15px;
}

.inner-page .blog-featured h2 {
  margin: 18px 0 16px;
  font-size: clamp(34px, 3.35vw, 48px);
  line-height: 1.06;
  letter-spacing: -2px;
}

.inner-page .blog-featured h2 > a {
  display: block;
  color: #f7f7f3;
  font-size: inherit !important;
  font-weight: inherit;
  line-height: inherit !important;
  letter-spacing: inherit;
  overflow-wrap: break-word;
}

.inner-page .blog-featured p {
  font-size: 17px !important;
  line-height: 1.6;
}

.inner-page .blog-featured footer {
  font-size: 13px;
  line-height: 1.35;
}

.inner-page .blog-featured footer a {
  font-size: 14px !important;
  line-height: 1.3 !important;
}

@media (max-width: 650px) {
  .inner-page .blog-featured h2 {
    font-size: 32px;
    line-height: 1.08;
    letter-spacing: -1.3px;
  }

  .inner-page .blog-featured p {
    font-size: 16px !important;
  }
}

/* Site-native blog category visuals */
.blog-category-visual {
  position: relative;
  display: grid;
  overflow: hidden;
  place-items: center;
  isolation: isolate;
  background: linear-gradient(145deg, #302447, #111a2c);
}

.blog-category-visual.tone-green {
  background: linear-gradient(145deg, #285f42, #142c2d);
}

.blog-category-visual.tone-gold {
  background: linear-gradient(145deg, #76571f, #30291d);
}

.blog-category-visual.tone-blue {
  background: linear-gradient(145deg, #236f8c, #172e48);
}

.blog-category-visual.tone-teal {
  background: linear-gradient(145deg, #246d72, #152b31);
}

.blog-category-visual::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 48% 0 0;
  background: linear-gradient(transparent, rgba(13, 17, 24, .48));
}

.blog-category-visual > i {
  position: absolute;
  z-index: 1;
  width: 150px;
  height: 66px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  transform: rotate(29deg);
}

.blog-category-visual > i:nth-child(2) {
  transform: rotate(-29deg);
}

.blog-category-visual > img {
  position: relative;
  z-index: 2;
  width: 62px;
  height: 62px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 7px 16px rgba(0, 0, 0, .28));
  transition: transform .22s ease;
}

.blog-categories > div > a:hover .blog-category-visual > img {
  transform: scale(1.08);
}

.blog-archive-art.blog-category-visual {
  min-height: 190px;
}

.blog-archive-art.blog-category-visual > i {
  width: 210px;
  height: 90px;
}

.blog-archive-art.blog-category-visual > img {
  width: 78px;
  height: 78px;
}

/* Flat desktop navigation inside the main header */
@media (min-width: 901px) {
  .primary-nav,
  .inner-nav {
    min-height: 54px;
    padding: 0;
    gap: 18px;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .primary-nav a,
  .inner-nav a {
    min-height: 48px;
    padding: 13px 7px 12px !important;
    border-radius: 0;
    background: transparent;
    transition: color .18s ease;
  }

  .primary-nav a:hover,
  .inner-nav a:hover,
  .primary-nav a.active,
  .inner-nav a.active {
    background: transparent;
    color: #fff;
    transform: none;
  }

  .primary-nav a.active::after,
  .inner-nav a.active::after {
    left: 7px;
    right: 7px;
    bottom: 5px;
    height: 3px;
    border-radius: 999px;
  }
}