/* ==========================================================================
   The blog: the front page and lists (Views/Blog/List.cshtml, _BlogCard.cshtml) and a post
   (Views/Blog/BlogPost.cshtml). Compile: npx lessc blog.less blog.css (from this folder).

   The list is a news front page after BBC Persian and the big news sites: one lead story with four
   beside it, then the latest stories as rows with a numbered "most discussed" column, a dark video
   band (16:9 cards and a rail of 9:16 shorts), audio cards. Hairlines between stories, not boxes.

   A post is set as a long read: one text column of about 70 characters, the article's own type
   step (below), the product page's text rules (.tc-prose, .tc-content-format in
   css/content-format.less) for everything inside the text, and the inline styles pasted texts
   bring (12pt spans, coloured table heads) set back to the column's.

   The article's type step - a long read wants a larger text than a product description, so the
   post keeps its own tokens instead of the page ladder's (base.less --tc-fs-*), on the same rule:
   no heading bigger than the one that contains it, nothing heavier than 700.
                 desktop   phone
     title        30        22     the post's h1
     standfirst   18        16     the summary under it
     h2           21        18
     h3           18.5      16.5
     body         17        15.5   line height 2.15 / 2.05
     small        14.5      13.5   tables, captions, meta
   ========================================================================== */
/* ---- the shared parts ------------------------------------------------------------------ */
.tc-blog-page .center-1 > .page-title {
  display: none;
}
.tc-mag,
.tc-post {
  --tc-mag-gap: 32px;
  color: #2A303A;
  font-weight: 400;
  text-align: right;
}
.tc-mag a,
.tc-post a {
  color: inherit;
  text-decoration: none;
}
.tc-mag svg,
.tc-post svg {
  flex: none;
}
/* as wide as the home page's content: its rows inside .size2 (1336px less 24px a side) */
.tc-mag {
  max-width: 1288px;
  margin: 0 auto;
  padding: 8px 0 48px;
}
@media only screen and (max-width: 959px) {
  .tc-mag {
    --tc-mag-gap: 20px;
    padding: 4px 16px 32px;
  }
}
/* the product page's breadcrumb (pdp-mobile.css .tc-pdpm-crumbs): underlined grey links and
   chevrons on one line that scrolls sideways; rendered in _Root's Breadcrumb section */
.tc-crumbs {
  display: block;
  max-width: 1288px;
  margin: 20px auto 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.tc-crumbs::-webkit-scrollbar {
  display: none;
}
@media only screen and (max-width: 959px) {
  .tc-crumbs {
    margin: 14px -16px 0;
  }
}
.tc-crumbs__track {
  display: flex;
  align-items: center;
  width: max-content;
  height: 32px;
}
@media only screen and (max-width: 959px) {
  .tc-crumbs__track {
    padding: 0 16px;
  }
}
.tc-crumbs__link {
  padding: 3px 0 2px;
  border-bottom: 1px solid #C0C2C5;
  color: #81858B !important;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.tc-crumbs__link:hover,
.tc-crumbs__link:active {
  color: #424750 !important;
  border-color: #424750;
}
@media only screen and (max-width: 959px) {
  .tc-crumbs__link {
    font-size: 12px;
  }
}
.tc-crumbs__sep {
  display: flex;
  flex: none;
  margin: 0 6px;
  color: #424750;
}
.tc-mag-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
  color: #6B7380;
  font-size: 13px;
  line-height: 1.8;
}
.tc-mag-crumbs a:hover {
  color: var(--ryan-primary, #007ad0);
}
.tc-mag-crumbs > * + *::before {
  content: "/";
  margin-left: 6px;
  color: #B4BAC3;
}
/* ---- the masthead: no big word and no heavy rule - the sections as chips, the date beside them;
   a list page (a desk, a tag, a month) keeps its name over them, light ---------------------------- */
.tc-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.tc-mag-head {
  margin: 0 0 20px;
}
@media only screen and (max-width: 959px) {
  .tc-mag-head {
    margin-bottom: 14px;
  }
}
.tc-mag-head__row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 4px 0 16px;
}
.tc-mag-head__title {
  margin: 0;
  color: #141A23;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.5;
}
@media only screen and (max-width: 959px) {
  .tc-mag-head__title {
    font-size: 20px;
  }
}
.tc-mag-head__date {
  color: #6B7380;
  font-size: 13px;
  line-height: 2;
  white-space: nowrap;
}
@media only screen and (max-width: 959px) {
  .tc-mag-head__date {
    font-size: 12px;
  }
}
.tc-mag-head__bar {
  display: flex;
  align-items: center;
  gap: 16px;
}
.tc-mag-head__bar > .tc-mag-head__date {
  flex: none;
  margin-inline-start: auto;
}
@media only screen and (max-width: 959px) {
  .tc-mag-head__bar > .tc-mag-head__date {
    display: none;
  }
}
/* the sections: one row of chips, sideways on a phone, never wider than the page */
.tc-mag-nav {
  display: flex;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 2px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.tc-mag-nav::-webkit-scrollbar {
  display: none;
}
.tc-mag-nav a {
  flex: none;
  padding: 6px 14px;
  border: 1px solid #E6E9EE;
  border-radius: 999px;
  background: #FFF;
  color: #3A4250;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.8;
  white-space: nowrap;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}
.tc-mag-nav a:hover {
  border-color: #C9CFD8;
  color: #141A23;
}
.tc-mag-nav a.is-active {
  border-color: #141A23;
  background: #141A23;
  color: #FFF;
}
@media only screen and (max-width: 959px) {
  .tc-mag-nav {
    margin: 0 -16px;
    padding: 2px 16px;
  }
  .tc-mag-nav a {
    padding: 5px 12px;
    font-size: 13px;
  }
}
.tc-mag-empty {
  padding: 48px 0;
  color: #6B7380;
  text-align: center;
}
/* ---- a section's title: a short brand bar over the words, as the news sites mark a row ---- */
.tc-mag-section {
  min-width: 0;
}
.tc-mag-section__title {
  position: relative;
  margin: 0 0 18px;
  padding: 12px 0 0;
  color: #141A23;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
}
.tc-mag-section__title::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;
  height: 3px;
  border-radius: 2px;
  background: var(--ryan-primary, #007ad0);
}
@media only screen and (max-width: 959px) {
  .tc-mag-section__title {
    font-size: 16px;
    margin-bottom: 14px;
  }
}
/* ---- the card ------------------------------------------------------------------------------ */
.tc-mag-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.tc-mag-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  background: #F4F5F7;
}
.tc-mag-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.tc-mag-card:hover .tc-mag-card__media img {
  transform: scale(1.035);
}
/* a post without a picture */
.tc-mag-card__blank {
  position: absolute;
  inset: 0;
  background: #ECEEF2;
}
.tc-mag-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.tc-mag-card__kicker {
  align-self: flex-start;
  color: var(--ryan-primary, #007ad0);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.6;
}
.tc-mag-card__title {
  margin: 0;
  color: #141A23;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.75;
  /* the whole card is the link's target, the headline its one link */
}
.tc-mag-card__title a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  transition: color 0.15s;
}
.tc-mag-card__title a:hover {
  color: var(--ryan-primary, #007ad0) !important;
}
.tc-mag-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.tc-mag-card__summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0;
  color: #4A5260;
  font-size: 14px;
  line-height: 2;
}
.tc-mag-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  color: #6B7380;
  font-size: 12.5px;
  line-height: 1.8;
}
.tc-mag-card__comments {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tc-mag-card__comments svg {
  width: 15px;
  height: 15px;
}
/* video / audio, on the picture's corner */
.tc-mag-badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 8px 0 10px;
  border-radius: 14px;
  background: rgba(10, 12, 16, 0.72);
  color: #FFF;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  direction: ltr;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.tc-mag-badge svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}
/* ---- the mosaic: the lead story and four tiles, the words on the picture ---------------- */
.tc-mag-top {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, 260px);
  gap: 16px;
  margin: 0 0 48px;
}
.tc-mag-top > .tc-mag-top__lead {
  grid-row: 1 / span 2;
  min-width: 0;
}
@media only screen and (max-width: 1199px) {
  .tc-mag-top {
    grid-template-rows: repeat(2, 220px);
  }
}
@media only screen and (max-width: 959px) {
  .tc-mag-top {
    display: block;
    margin-bottom: 28px;
  }
  .tc-mag-top > .tc-mag-top__lead {
    margin: 0 0 6px;
  }
}
/* a card on its picture: a dark foot under white words */
.tc-mag-card--lead,
.tc-mag-card--tile {
  height: 100%;
  overflow: hidden;
  border-radius: 16px;
  background: #1B2029;
}
.tc-mag-card--lead .tc-mag-card__media,
.tc-mag-card--tile .tc-mag-card__media {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
}
.tc-mag-card--lead .tc-mag-card__shade,
.tc-mag-card--tile .tc-mag-card__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(8, 10, 14, 0) 35%, rgba(8, 10, 14, 0.78));
}
.tc-mag-card--lead .tc-mag-card__body,
.tc-mag-card--tile .tc-mag-card__body {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 18px;
  pointer-events: none;
}
.tc-mag-card--lead .tc-mag-card__body a,
.tc-mag-card--tile .tc-mag-card__body a {
  pointer-events: auto;
}
.tc-mag-card--lead .tc-mag-card__kicker,
.tc-mag-card--tile .tc-mag-card__kicker {
  padding: 1px 10px;
  border-radius: 6px;
  background: var(--ryan-primary, #007ad0);
  color: #FFF;
  font-size: 12px;
}
.tc-mag-card--lead .tc-mag-card__title,
.tc-mag-card--tile .tc-mag-card__title {
  color: #FFF;
}
.tc-mag-card--lead .tc-mag-card__summary,
.tc-mag-card--tile .tc-mag-card__summary {
  color: rgba(255, 255, 255, 0.82);
}
.tc-mag-card--lead .tc-mag-card__meta,
.tc-mag-card--tile .tc-mag-card__meta {
  color: rgba(255, 255, 255, 0.72);
}
.tc-mag-card--lead .tc-mag-badge,
.tc-mag-card--tile .tc-mag-badge {
  top: 14px;
  right: 14px;
  bottom: auto;
}
.tc-mag-card--lead {
  min-height: 420px;
}
.tc-mag-card--lead .tc-mag-card__body {
  padding: 28px 28px 24px;
  gap: 10px;
}
.tc-mag-card--lead .tc-mag-card__title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.6;
}
.tc-mag-card--lead .tc-mag-card__summary {
  max-width: 640px;
  font-size: 15px;
}
@media only screen and (max-width: 959px) {
  .tc-mag-card--lead {
    min-height: 0;
    aspect-ratio: 4 / 4.4;
    margin: 0 -16px;
    border-radius: 0;
  }
  .tc-mag-card--lead .tc-mag-card__body {
    padding: 16px 16px 18px;
    gap: 6px;
  }
  .tc-mag-card--lead .tc-mag-card__title {
    font-size: 19px;
  }
  .tc-mag-card--lead .tc-mag-card__summary {
    display: none;
  }
}
.tc-mag-card--tile .tc-mag-card__title {
  font-size: 15.5px;
}
.tc-mag-card--tile .tc-mag-card__title a {
  -webkit-line-clamp: 2;
}
.tc-mag-card--tile .tc-mag-card__meta {
  display: none;
}
/* ---- latest stories as rows, "most discussed" beside them -------------------------------- */
.tc-mag-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 48px;
  align-items: start;
  margin: 0 0 48px;
}
@media only screen and (max-width: 959px) {
  .tc-mag-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin-bottom: 32px;
  }
}
@media only screen and (min-width: 960px) {
  .tc-mag-split__side {
    position: sticky;
    top: 96px;
  }
}
.tc-mag-list {
  display: flex;
  flex-direction: column;
}
.tc-mag-card--row {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 20px 0;
  border-bottom: 1px solid #E6E9EE;
}
.tc-mag-card--row:first-child {
  padding-top: 0;
}
.tc-mag-card--row:last-child {
  border-bottom: 0;
}
.tc-mag-card--row .tc-mag-card__title {
  font-size: 17px;
}
/* a phone shows every small card as a row: the picture beside the words */
@media only screen and (max-width: 959px) {
  .tc-mag-card--row,
  .tc-mag-top .tc-mag-card--tile,
  .tc-mag-grid .tc-mag-card--stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 116px;
    gap: 12px;
    align-items: start;
    padding: 14px 0;
    border-bottom: 1px solid #E6E9EE;
  }
  .tc-mag-card--row .tc-mag-card__media,
  .tc-mag-top .tc-mag-card--tile .tc-mag-card__media,
  .tc-mag-grid .tc-mag-card--stack .tc-mag-card__media {
    grid-column: 2;
    grid-row: 1;
    border-radius: 10px;
  }
  .tc-mag-card--row .tc-mag-card__body,
  .tc-mag-top .tc-mag-card--tile .tc-mag-card__body,
  .tc-mag-grid .tc-mag-card--stack .tc-mag-card__body {
    grid-column: 1;
    grid-row: 1;
    gap: 4px;
  }
  .tc-mag-card--row .tc-mag-card__title,
  .tc-mag-top .tc-mag-card--tile .tc-mag-card__title,
  .tc-mag-grid .tc-mag-card--stack .tc-mag-card__title {
    font-size: 14.5px;
    line-height: 1.8;
  }
  .tc-mag-card--row .tc-mag-card__summary,
  .tc-mag-top .tc-mag-card--tile .tc-mag-card__summary,
  .tc-mag-grid .tc-mag-card--stack .tc-mag-card__summary {
    display: none;
  }
  .tc-mag-card--row .tc-mag-card__kicker,
  .tc-mag-top .tc-mag-card--tile .tc-mag-card__kicker,
  .tc-mag-grid .tc-mag-card--stack .tc-mag-card__kicker {
    font-size: 11.5px;
  }
  .tc-mag-card--row .tc-mag-card__meta,
  .tc-mag-top .tc-mag-card--tile .tc-mag-card__meta,
  .tc-mag-grid .tc-mag-card--stack .tc-mag-card__meta {
    font-size: 11.5px;
  }
  .tc-mag-card--row .tc-mag-badge,
  .tc-mag-top .tc-mag-card--tile .tc-mag-badge,
  .tc-mag-grid .tc-mag-card--stack .tc-mag-badge {
    right: 6px;
    bottom: 6px;
    height: 22px;
    padding: 0 6px;
    font-size: 10.5px;
  }
  .tc-mag-card--row .tc-mag-badge svg,
  .tc-mag-top .tc-mag-card--tile .tc-mag-badge svg,
  .tc-mag-grid .tc-mag-card--stack .tc-mag-badge svg {
    width: 11px;
    height: 11px;
  }
  /* a tile is a plain row there */
  .tc-mag-top .tc-mag-card--tile {
    height: auto;
    overflow: visible;
    border-radius: 0;
    background: none;
  }
  .tc-mag-top .tc-mag-card--tile .tc-mag-card__media {
    position: relative;
    inset: auto;
    aspect-ratio: 16 / 10;
  }
  .tc-mag-top .tc-mag-card--tile .tc-mag-card__shade {
    display: none;
  }
  .tc-mag-top .tc-mag-card--tile .tc-mag-card__body {
    margin: 0;
    padding: 0;
    pointer-events: auto;
  }
  .tc-mag-top .tc-mag-card--tile .tc-mag-card__title {
    color: #141A23;
  }
  .tc-mag-top .tc-mag-card--tile .tc-mag-card__meta {
    display: flex;
    color: #6B7380;
  }
  .tc-mag-top .tc-mag-card--tile .tc-mag-card__kicker {
    padding: 0;
    background: none;
    color: var(--ryan-primary, #007ad0);
  }
  .tc-mag-top .tc-mag-card--tile .tc-mag-badge {
    top: auto;
    right: 6px;
    bottom: 6px;
  }
  .tc-mag-top .tc-mag-card--tile:last-child {
    border-bottom: 0;
  }
  .tc-mag-card--row:first-child {
    padding-top: 0;
  }
  .tc-mag-card--row:last-child,
  .tc-mag-grid .tc-mag-card--stack:last-child {
    border-bottom: 0;
  }
}
/* the ranked list: a large figure, the headline, a hairline between */
.tc-mag-rank {
  display: flex;
  flex-direction: column;
  counter-reset: none;
}
.tc-mag-card--rank {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 0 12px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid #E6E9EE;
}
.tc-mag-card--rank:first-child {
  padding-top: 4px;
}
.tc-mag-card--rank:last-child {
  border-bottom: 0;
}
.tc-mag-card--rank .tc-mag-card__title {
  font-size: 15px;
}
.tc-mag-card__rank {
  color: var(--ryan-primary, #007ad0);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
}
/* ---- the video band: dark, the width of the screen --------------------------------------- */
.tc-mag-band {
  position: relative;
  margin: 0 0 48px;
  padding: 44px 0 16px;
  background: #11151C;
  box-shadow: 0 0 0 100vmax #11151C;
  clip-path: inset(0 -100vmax);
  color: #E9ECF1;
}
.tc-mag-band .tc-mag-section {
  margin: 0 0 28px;
}
.tc-mag-band .tc-mag-section__title {
  color: #FFF;
}
.tc-mag-band .tc-mag-card__title {
  color: #F4F6F9;
}
.tc-mag-band .tc-mag-card__meta {
  color: #9AA3B2;
}
.tc-mag-band .tc-mag-card__kicker {
  display: none;
}
.tc-mag-band .tc-mag-card__media {
  background: #1B2029;
}
@media only screen and (max-width: 959px) {
  .tc-mag-band {
    padding: 28px 0 4px;
    margin-bottom: 32px;
  }
}
.tc-mag-rail {
  display: grid;
  grid-auto-flow: column;
  gap: 20px;
  overflow-x: auto;
  padding: 0 0 12px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: #3A4150 transparent;
}
.tc-mag-rail > * {
  scroll-snap-align: start;
}
@media only screen and (max-width: 959px) {
  .tc-mag-rail {
    gap: 12px;
    margin: 0 -16px;
    padding: 0 16px 12px;
    scroll-padding: 0 16px;
    scrollbar-width: none;
  }
  .tc-mag-rail::-webkit-scrollbar {
    display: none;
  }
}
.tc-mag-rail--video {
  grid-auto-columns: calc((100% - 60px) / 4);
  /* the newest video leads at twice the width, as the news sites open their video row */
}
.tc-mag-rail--video .tc-mag-card__media {
  aspect-ratio: 16 / 9;
}
@media only screen and (min-width: 960px) {
  .tc-mag-rail--video > :first-child {
    grid-column: span 2;
  }
  .tc-mag-rail--video > :first-child .tc-mag-card__title {
    font-size: 19px;
    font-weight: 700;
  }
}
@media only screen and (max-width: 959px) {
  .tc-mag-rail--video {
    grid-auto-columns: 78%;
  }
}
/* a short: the 9:16 picture is the card, the headline on its foot */
.tc-mag-rail--short {
  grid-auto-columns: calc((100% - 100px) / 6);
}
@media only screen and (max-width: 959px) {
  .tc-mag-rail--short {
    grid-auto-columns: 42%;
  }
}
.tc-mag-card--short {
  gap: 0;
  cursor: pointer;
}
.tc-mag-card--short .tc-mag-card__media {
  aspect-ratio: 9 / 16;
  border-radius: 14px;
}
.tc-mag-card--short .tc-mag-card__shade {
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.82));
}
.tc-mag-card--short .tc-mag-badge {
  top: 10px;
  bottom: auto;
}
.tc-mag-card--short .tc-mag-card__body {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 12px;
  pointer-events: none;
}
.tc-mag-card--short .tc-mag-card__title {
  color: #FFF;
  font-size: 13.5px;
  line-height: 1.75;
}
.tc-mag-card--short .tc-mag-card__title a {
  pointer-events: auto;
  -webkit-line-clamp: 3;
}
/* ---- audio: square covers, a play button that starts the page's audio bar --------------- */
.tc-mag-audio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 24px;
  margin: 0 0 48px;
}
@media only screen and (max-width: 959px) {
  .tc-mag-audio {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-bottom: 32px;
  }
}
.tc-mag-card--audio {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 12px;
  border: 1px solid #E6E9EE;
  border-radius: 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.tc-mag-card--audio:hover {
  border-color: #D5DAE1;
  box-shadow: 0 6px 20px rgba(20, 26, 35, 0.06);
}
.tc-mag-card--audio .tc-mag-card__media {
  aspect-ratio: 1;
  border-radius: 10px;
}
.tc-mag-card--audio .tc-mag-card__title {
  font-size: 15px;
}
.tc-mag-card--audio .tc-mag-card__meta {
  position: relative;
  z-index: 2;
}
.tc-mag-card--audio.is-playing {
  border-color: var(--ryan-primary, #007ad0);
}
@media only screen and (max-width: 959px) {
  .tc-mag-card--audio {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid #E6E9EE;
    border-radius: 0;
  }
  .tc-mag-card--audio:hover {
    box-shadow: none;
  }
}
.tc-mag-play {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ryan-primary, #007ad0);
  color: #FFF;
  cursor: pointer;
}
.tc-mag-play svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.tc-mag-play .i-pause {
  display: none;
}
.is-playing .tc-mag-play .i-play,
.tc-mag-play.is-playing .i-play {
  display: none;
}
.is-playing .tc-mag-play .i-pause,
.tc-mag-play.is-playing .i-pause {
  display: block;
}
/* ---- the plain grid (page 2 on, a tag, a month, a category) ------------------------------ */
.tc-mag-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px 24px;
  margin: 0 0 40px;
}
@media only screen and (max-width: 1199px) {
  .tc-mag-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media only screen and (max-width: 959px) {
  .tc-mag-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-bottom: 24px;
  }
}
.tc-mag-more {
  display: flex;
  justify-content: center;
  margin: 0 0 24px;
}
.tc-mag-more__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 28px;
  border: 0;
  border-radius: 23px;
  background: var(--ryan-primary, #007ad0);
  color: #FFF !important;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.15s, color 0.15s;
}
.tc-mag-more__btn svg {
  width: 18px;
  height: 18px;
}
.tc-mag-more__btn:hover {
  filter: brightness(0.94);
}
.tc-mag-pager {
  display: flex;
  justify-content: center;
}
/* ---- the running line of the newest headlines ---------------------------------------------- */
.tc-ticker {
  display: flex;
  align-items: stretch;
  height: 44px;
  margin: 0 0 24px;
  overflow: hidden;
  border-radius: 10px;
  background: #F4F5F7;
}
@media only screen and (max-width: 959px) {
  .tc-ticker {
    height: 40px;
    margin: 0 -16px 18px;
    border-radius: 0;
  }
}
.tc-ticker__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  margin: 10px 0;
  padding: 0 16px;
  border-left: 1px solid #DDE1E7;
  color: #141A23;
  font-size: 13px;
  font-weight: 700;
}
.tc-ticker__label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ryan-primary, #007ad0);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ryan-primary, #007ad0) 18%, transparent);
}
@media only screen and (max-width: 959px) {
  .tc-ticker__label {
    padding: 0 12px 0 10px;
    font-size: 12.5px;
  }
}
.tc-ticker__view {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.tc-ticker__track {
  display: flex;
  width: max-content;
  height: 100%;
  animation: tc-ticker 80s linear infinite;
}
.tc-ticker__track:hover,
.tc-ticker__track:focus-within {
  animation-play-state: paused;
}
/* the right-to-left line runs towards the right: the next headline comes in from the left */
@keyframes tc-ticker {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(50%);
  }
}
.tc-ticker__list {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tc-ticker__list li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 0 22px;
  white-space: nowrap;
  font-size: 13.5px;
}
.tc-ticker__list li::before {
  content: "";
  width: 4px;
  height: 4px;
  margin-left: 14px;
  border-radius: 50%;
  background: #B4BAC3;
}
.tc-ticker__list a {
  color: #141A23;
  font-weight: 600;
}
.tc-ticker__list a:hover {
  color: var(--ryan-primary, #007ad0);
}
.tc-ticker__list time {
  color: #6B7380;
  font-size: 12px;
}
@media (prefers-reduced-motion: reduce) {
  .tc-ticker__track {
    animation: none;
  }
  .tc-ticker__view {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tc-ticker__list[aria-hidden] {
    display: none;
  }
}
/* ---- the side column: most discussed, the desks ------------------------------------------------ */
.tc-mag-split__side {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.tc-mag-box {
  padding: 20px 20px 8px;
  border-radius: 16px;
  background: #F4F5F7;
}
@media only screen and (max-width: 959px) {
  .tc-mag-box {
    padding: 16px 16px 4px;
  }
}
.tc-mag-topics {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.tc-mag-topics li + li {
  border-top: 1px solid #E6E9EE;
}
.tc-mag-topics a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  color: #141A23;
  font-size: 14.5px;
  font-weight: 600;
}
.tc-mag-topics a:hover {
  color: var(--ryan-primary, #007ad0);
}
.tc-mag-topics span {
  flex: 1;
}
.tc-mag-topics b {
  color: #6B7380;
  font-size: 12.5px;
  font-weight: 400;
}
/* ---- the desks: a block each, its newest story and three more -------------------------------- */
.tc-mag-desks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 0 0 56px;
}
@media only screen and (max-width: 959px) {
  .tc-mag-desks {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 32px;
  }
}
.tc-desk {
  padding: 20px;
  border: 1px solid #E6E9EE;
  border-radius: 16px;
  background: #FFF;
}
@media only screen and (max-width: 959px) {
  .tc-desk {
    padding: 16px;
  }
}
.tc-desk__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
  padding: 0 0 12px;
  border-bottom: 1px solid #E6E9EE;
}
.tc-desk__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #141A23;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}
.tc-desk__title::before {
  content: "";
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background: var(--ryan-primary, #007ad0);
}
.tc-desk__title a:hover {
  color: var(--ryan-primary, #007ad0);
}
@media only screen and (max-width: 959px) {
  .tc-desk__title {
    font-size: 16px;
  }
}
.tc-desk__all {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--ryan-primary, #007ad0) !important;
  font-size: 13px;
  font-weight: 600;
}
.tc-desk__all svg {
  width: 16px;
  height: 16px;
  transition: transform 0.15s;
}
.tc-desk__all:hover svg {
  transform: translateX(-3px);
}
.tc-desk__body {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.tc-desk__body > .tc-mag-card--stack .tc-mag-card__title {
  font-size: 16.5px;
  font-weight: 700;
}
.tc-desk__body > .tc-mag-card--stack .tc-mag-card__kicker {
  display: none;
}
@media only screen and (max-width: 1199px) {
  .tc-desk__body {
    grid-template-columns: minmax(0, 1fr);
  }
}
.tc-desk__list {
  display: flex;
  flex-direction: column;
}
/* a small card: a thumbnail beside the headline */
.tc-mag-card--mini {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #E6E9EE;
}
.tc-mag-card--mini:first-child {
  padding-top: 0;
}
.tc-mag-card--mini:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.tc-mag-card--mini .tc-mag-card__media {
  aspect-ratio: 4 / 3;
  border-radius: 10px;
}
.tc-mag-card--mini .tc-mag-card__body {
  gap: 2px;
}
.tc-mag-card--mini .tc-mag-card__title {
  font-size: 14px;
  line-height: 1.8;
}
.tc-mag-card--mini .tc-mag-card__title a {
  -webkit-line-clamp: 2;
}
.tc-mag-card--mini .tc-mag-card__meta {
  font-size: 11.5px;
}
.tc-mag-card--mini .tc-mag-badge {
  right: 5px;
  bottom: 5px;
  height: 20px;
  padding: 0 5px;
  font-size: 10px;
}
.tc-mag-card--mini .tc-mag-badge svg {
  width: 10px;
  height: 10px;
}
/* ---- the editor's picks: four older stories on a grey panel ----------------------------------- */
.tc-mag-picks {
  margin: 0 0 56px;
  padding: 28px;
  border-radius: 20px;
  background: #F4F5F7;
}
@media only screen and (max-width: 959px) {
  .tc-mag-picks {
    margin: 0 -16px 32px;
    padding: 22px 16px;
    border-radius: 0;
  }
}
.tc-mag-picks__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
@media only screen and (max-width: 1199px) {
  .tc-mag-picks__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media only screen and (max-width: 959px) {
  .tc-mag-picks__grid {
    display: flex;
    gap: 14px;
    margin: 0 -16px;
    padding: 0 16px 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .tc-mag-picks__grid::-webkit-scrollbar {
    display: none;
  }
  .tc-mag-picks__grid > * {
    flex: 0 0 72%;
    scroll-snap-align: start;
  }
  .tc-mag-picks__grid .tc-mag-card__title {
    font-size: 14.5px;
  }
}
/* ---- the podcast: audio cards under a plain head ---------------------------------------------- */
.tc-mag-pod {
  margin: 0 0 48px;
}
.tc-mag-pod .tc-mag-audio {
  margin: 0;
}
@media only screen and (max-width: 959px) {
  .tc-mag-pod {
    margin-bottom: 32px;
  }
}
.tc-mag-pod__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
}
.tc-mag-pod__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--ryan-primary, #007ad0);
  color: #FFF;
}
.tc-mag-pod__icon svg {
  width: 22px;
  height: 22px;
}
.tc-mag-pod__title {
  margin: 0;
  color: #141A23;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
}
@media only screen and (max-width: 959px) {
  .tc-mag-pod__title {
    font-size: 16px;
  }
}
.tc-mag-pod__lead {
  margin: 0;
  color: #6B7380;
  font-size: 13.5px;
  line-height: 1.9;
}
/* ==========================================================================
   A POST
   ========================================================================== */
.tc-post {
  --tc-art-title: 30px;
  --tc-art-lead: 18px;
  --tc-art-h2: 21px;
  --tc-art-h3: 18.5px;
  --tc-art-body: 17px;
  --tc-art-small: 14.5px;
  --tc-art-lh: 2.15;
  max-width: 1288px;
  margin: 0 auto;
  padding: 8px 0 56px;
}
@media only screen and (max-width: 959px) {
  .tc-post {
    --tc-art-title: 22px;
    --tc-art-lead: 16px;
    --tc-art-h2: 18px;
    --tc-art-h3: 16.5px;
    --tc-art-body: 15.5px;
    --tc-art-small: 13.5px;
    --tc-art-lh: 2.05;
    padding: 4px 16px 40px;
  }
}
/* the reading progress, a brand line under the header */
.tc-post-progress {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000;
  height: 3px;
  pointer-events: none;
}
.tc-post-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ryan-primary, #007ad0);
  transform: scaleX(0);
  transform-origin: right;
}
.tc-post__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 56px;
  align-items: start;
}
@media only screen and (max-width: 1199px) {
  .tc-post__grid {
    gap: 40px;
    grid-template-columns: minmax(0, 1fr) 260px;
  }
}
@media only screen and (max-width: 959px) {
  .tc-post__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}
.tc-post__main {
  min-width: 0;
}
/* ---- the header ---------------------------------------------------------------------------- */
.tc-post-head {
  margin: 18px 0 24px;
}
/* the breadcrumb sits right above the title since the kicker went: a clear step between them */
@media (max-width: 959.98px) {
  .tc-post-head {
    margin-top: 14px;
  }
}
.tc-post-head__kicker {
  display: block;
  margin: 0 0 10px;
  color: var(--ryan-primary, #007ad0);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.6;
}
.tc-post-head__title {
  display: block;
  margin: 0 0 14px;
  color: #141A23;
  font-size: var(--tc-art-title);
  font-weight: 700;
  line-height: 1.6;
}
.tc-post-head__lead {
  margin: 0 0 20px;
  color: #4A5260;
  font-size: var(--tc-art-lead);
  font-weight: 400;
  line-height: 2;
}
.tc-post-byline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  padding: 14px 0;
  border-top: 1px solid #E6E9EE;
  border-bottom: 1px solid #E6E9EE;
}
.tc-post-byline__who {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.tc-post-byline__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border-radius: 50%;
  background: #F4F5F7;
  color: var(--ryan-primary, #007ad0);
}
.tc-post-byline__avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.tc-post-byline__avatar svg {
  width: 22px;
  height: 22px;
}
.tc-post-byline__name {
  display: block;
  color: #141A23;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.7;
}
.tc-post-byline__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  color: #6B7380;
  font-size: 12.5px;
  line-height: 1.8;
}
.tc-post-byline__facts > * + *::before {
  content: "·";
  margin-left: 12px;
}
.tc-post-byline__facts a:hover {
  color: var(--ryan-primary, #007ad0);
}
/* ---- share --------------------------------------------------------------------------------- */
.tc-share {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tc-share__btn {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid #E6E9EE;
  border-radius: 50%;
  background: #FFF;
  color: #3A4250 !important;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.tc-share__btn svg {
  width: 17px;
  height: 17px;
}
.tc-share__btn:hover {
  border-color: #141A23;
  color: #141A23 !important;
}
.tc-share__btn.is-done {
  border-color: #0B8A55;
  color: #0B8A55 !important;
}
/* ---- the hero: a picture, or the video / the audio player --------------------------------- */
.tc-post-hero {
  margin: 0 0 28px;
  /* the picture as it is drawn - posts' pictures often carry words, a crop would cut them -
       no taller than most of a screen, the sides then left soft grey */
}
.tc-post-hero[hidden] {
  display: none;
}
.tc-post-hero img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(72vh, 620px);
  object-fit: contain;
  border-radius: 14px;
  background: #F4F5F7;
}
.tc-post-hero figcaption {
  margin: 8px 0 0;
  color: #6B7380;
  font-size: 13px;
  line-height: 1.8;
}
@media only screen and (max-width: 959px) {
  .tc-post-hero {
    margin: 0 -16px 22px;
  }
  .tc-post-hero img {
    border-radius: 0;
  }
  .tc-post-hero figcaption {
    padding: 0 16px;
  }
}
.tc-post-video {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #000;
  /* a portrait cut: centred at a screen's height, its own poster blurred behind the sides */
}
.tc-post-video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}
.tc-post-video.is-portrait {
  display: flex;
  justify-content: center;
  background: #0E1116;
}
.tc-post-video.is-portrait::before {
  content: "";
  position: absolute;
  inset: -40px;
  background: var(--tc-poster) center / cover no-repeat;
  filter: blur(28px) brightness(0.55);
}
.tc-post-video.is-portrait video {
  position: relative;
  width: auto;
  max-width: 100%;
  height: min(78vh, 760px);
  aspect-ratio: 9 / 16;
}
@media only screen and (max-width: 959px) {
  .tc-post-video {
    border-radius: 0;
  }
  .tc-post-video.is-portrait video {
    height: auto;
    width: 100%;
    max-height: 82vh;
  }
}
.tc-post-cut {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin: 10px 0 0;
}
.tc-post-cut button {
  height: 30px;
  padding: 0 12px;
  border: 1px solid #E6E9EE;
  border-radius: 15px;
  background: #FFF;
  color: #3A4250;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.tc-post-cut button.is-active {
  border-color: #141A23;
  color: #141A23;
  font-weight: 600;
}
@media only screen and (max-width: 959px) {
  .tc-post-cut {
    padding: 0 16px;
  }
}
/* the audio player: a cover, a big play button, the seek line, skip, speed */
.tc-audio {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: 16px;
  border-radius: 16px;
  background: #12161D;
  color: #E9ECF1;
}
@media only screen and (max-width: 959px) {
  .tc-audio {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 14px;
    margin: 0 16px;
    padding: 12px;
  }
}
.tc-audio__cover {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 12px;
  background: #1F2530;
}
.tc-audio__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  aspect-ratio: 1;
}
.tc-audio__label {
  margin: 0 0 8px;
  color: #9AA3B2;
  font-size: 12.5px;
  line-height: 1.6;
}
.tc-audio__controls {
  display: flex;
  align-items: center;
  gap: 10px;
  direction: ltr;
}
.tc-audio__btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #E9ECF1;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.tc-audio__btn svg {
  width: 22px;
  height: 22px;
}
.tc-audio__btn:hover {
  background: rgba(255, 255, 255, 0.08);
}
.tc-audio__toggle {
  width: 48px;
  height: 48px;
  background: var(--ryan-primary, #007ad0);
  color: #FFF;
}
.tc-audio__toggle svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}
.tc-audio__toggle .i-pause {
  display: none;
}
.tc-audio__toggle:hover {
  background: var(--ryan-primary, #007ad0);
  filter: brightness(1.08);
}
.is-playing .tc-audio__toggle .i-play {
  display: none;
}
.is-playing .tc-audio__toggle .i-pause {
  display: block;
}
.tc-audio__seek {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 0;
  direction: ltr;
  font-size: 12px;
  color: #9AA3B2;
  font-variant-numeric: tabular-nums;
}
.tc-range {
  flex: 1;
  min-width: 0;
  height: 18px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  --tc-fill: 0%;
}
.tc-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--ryan-primary, #007ad0) var(--tc-fill), rgba(255, 255, 255, 0.18) var(--tc-fill));
}
.tc-range::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--ryan-primary, #007ad0) var(--tc-fill), rgba(255, 255, 255, 0.18) var(--tc-fill));
}
.tc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border: 0;
  border-radius: 50%;
  background: #FFF;
}
.tc-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: #FFF;
}
/* the page's one audio bar: whatever audio plays, it shows here once its own player is out of view */
.tc-audio-bar {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 990;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: min(440px, calc(100% - 32px));
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(18, 22, 29, 0.96);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  color: #E9ECF1;
  transform: translateY(calc(100% + 140px));
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.2s, visibility 0s 0.3s;
}
.tc-audio-bar.is-shown {
  transform: none;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.2s;
}
.tc-audio-bar img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  background: #1F2530;
}
@media only screen and (max-width: 959px) {
  .tc-audio-bar {
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: calc(100% - 24px);
  }
  body.vp-bn-glass-on .tc-audio-bar {
    bottom: calc(72px + env(safe-area-inset-bottom));
  }
}
.tc-audio-bar__title {
  display: block;
  overflow: hidden;
  color: #FFF;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.7;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tc-audio-bar__seek {
  display: flex;
  align-items: center;
  gap: 8px;
  direction: ltr;
  color: #9AA3B2;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.tc-audio-bar__actions {
  display: flex;
  align-items: center;
  gap: 2px;
  direction: ltr;
}
.tc-audio-bar__actions .tc-audio__toggle {
  width: 38px;
  height: 38px;
}
.tc-audio-bar__actions .tc-audio__toggle svg {
  width: 18px;
  height: 18px;
}
.tc-audio-bar__actions .tc-audio__btn:not(.tc-audio__toggle) svg {
  width: 18px;
  height: 18px;
}
/* ---- the text ------------------------------------------------------------------------------ */
.tc-article {
  color: #2A303A;
  font-size: var(--tc-fs-body);
  line-height: 2.1;
  font-weight: var(--tc-fw-text);
  letter-spacing: normal;
  text-align: right;
  overflow-wrap: break-word;
}
.tc-article :is(p, li, td, th, summary, blockquote, h1, h2, h3, h4, h5, h6) {
  letter-spacing: normal;
}
.tc-article p:not(.tc-lead):not(.tc-note) {
  color: #2A303A;
  font-size: 1em;
  line-height: inherit;
  font-weight: var(--tc-fw-text);
}
/* the rhythm: each block ends a gap down, nothing pushes from above */
.tc-article :is(p, ul, ol, table, blockquote, figure, dl) {
  min-height: auto !important;
  margin: 0 0 20px !important;
  padding-bottom: 0;
}
.tc-article p.tc-note {
  margin: 4px 0 20px !important;
  font-size: var(--tc-fs-small);
  line-height: 1.95;
}
/* ---- headings ---- */
.tc-article :is(h1, h2, h3, h4, h5, h6) {
  display: block;
  min-height: auto !important;
  padding: 0;
  border: 0;
  color: #141A23;
  font-weight: var(--tc-fw-label);
  line-height: 1.65;
  text-align: right;
}
/* an h1 inside a text is the text's top heading, not the page's: it is set as an h2 */
.tc-article :is(h1, h2) {
  margin: 44px 0 14px !important;
  font-size: var(--tc-fs-h2);
}
.tc-article h3 {
  margin: 30px 0 10px !important;
  font-size: var(--tc-fs-h3);
  font-weight: var(--tc-fw-label);
}
.tc-article :is(h4, h5, h6) {
  margin: 24px 0 8px !important;
  font-size: var(--tc-fs-h4);
  font-weight: var(--tc-fw-label);
}
/* a part straight under its section: the section's gap is enough */
.tc-article :is(h1, h2, h3) + :is(h2, h3, h4, h5, h6) {
  margin-top: 0 !important;
}
/* ---- lists ---- */
.tc-article :is(ul, ol):not([class*="tc-list--"]) {
  padding: 0 22px 0 0;
}
.tc-article ul:not([class*="tc-list--"]) {
  list-style: disc outside;
}
.tc-article ol:not([class*="tc-list--"]) {
  list-style: decimal outside;
}
.tc-article li {
  color: #2A303A !important;
  font-size: 1em;
  line-height: 2;
  font-weight: var(--tc-fw-text);
  text-align: right;
}
.tc-article :is(ul, ol):not(.tc-list--tags) > li {
  margin: 0 0 6px !important;
}
.tc-article :is(ul, ol):not(.tc-list--tags) > li:last-child {
  margin-bottom: 0 !important;
}
.tc-article li::marker {
  color: #8A94A3;
}
.tc-article li > :is(p, ul, ol) {
  margin: 6px 0 0 !important;
}
/* a list right after a list - the pros, then the cons - is one block: the items' own gap between them */
.tc-article :is(ul, ol) + :is(ul, ol) {
  margin-top: -14px !important;
}
/* ---- inline ---- */
.tc-article :is(strong, b) {
  color: #141A23;
  font-weight: var(--tc-fw-label);
}
.tc-article a {
  color: #0A58B5;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
/* ---- the table: a line under every row, the header tinted, the first column the row's label ---- */
.tc-article table {
  width: 100% !important;
  max-width: 100%;
  margin: 4px 0 28px !important;
  border: 1px solid #E2E6EC !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 12px;
  overflow: hidden;
  background: #FFF;
  box-shadow: none !important;
  font-size: var(--tc-fs-small);
  line-height: 1.85;
}
.tc-article :is(th, td) {
  padding: 11px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid #EDF0F4 !important;
  background: #FFF;
  color: #2A303A;
  font-size: var(--tc-fs-small);
  line-height: 1.85;
  font-weight: var(--tc-fw-text);
  text-align: right;
  vertical-align: top;
}
.tc-article :is(th, td) + :is(th, td) {
  border-right: 1px solid #EDF0F4 !important;
}
.tc-article :is(th, thead td) {
  background: #F5F7FA;
  color: #141A23;
  font-weight: var(--tc-fw-label);
}
.tc-article tbody td:first-child:not(:only-child) {
  width: 28%;
  color: #141A23;
  font-weight: var(--tc-fw-label);
}
.tc-article tbody > tr:nth-child(even) > td {
  background: #FAFBFC;
}
.tc-article tbody > tr:last-child > * {
  border-bottom: 0 !important;
}
.tc-article :is(th, td) :is(p, ul, ol) {
  margin: 0 !important;
  font-size: inherit;
  line-height: inherit;
}
/* ---- pictures, questions ---- */
.tc-article img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto !important;
  margin: 8px auto !important;
  border-radius: 12px;
}
.tc-article details {
  margin: 0 0 10px !important;
}
.tc-article details > summary {
  font-size: 1em;
  line-height: 1.8;
}
.tc-article details > :not(summary) {
  margin: 0 0 14px !important;
}
/* the text starts and ends flush with its box */
.tc-article > :first-child {
  margin-top: 0 !important;
}
.tc-article > :last-child {
  margin-bottom: 0 !important;
}
.tc-article .tc-c-brand {
  color: var(--ryan-primary, #007ad0);
}
.tc-article .tc-c-good {
  color: #0B8A55;
}
.tc-article .tc-c-bad {
  color: #D2303C;
}
.tc-article mark {
  padding: 1px 3px;
  border-radius: 4px;
  background: #FFF0B3;
  color: inherit;
}
/* a box is as wide as its words and a little more, not the column: a one-line tip in a bar
       running to the far edge reads as a banner (a long note still wraps at the column) */
.tc-article p.tc-note {
  position: relative;
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  margin: 4px 0 16px;
  padding: 12px 44px 12px 14px;
  border-radius: 12px;
  background: #F2F6FC;
  color: #2F3B4C;
}
.tc-article p.tc-note::before {
  content: "";
  position: absolute;
  top: 15px;
  right: 14px;
  width: 20px;
  height: 20px;
  background: #3B6FD8;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5v.01'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5v.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tc-article p.tc-note--warn {
  background: #FFF6E5;
  color: #4A3A17;
}
.tc-article p.tc-note--warn::before {
  background: #D98A00;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.2 2.6 17.6A2 2 0 0 0 4.3 20.6h15.4a2 2 0 0 0 1.7-3L13.7 4.2a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5v4.5M12 17.2v.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.2 2.6 17.6A2 2 0 0 0 4.3 20.6h15.4a2 2 0 0 0 1.7-3L13.7 4.2a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5v4.5M12 17.2v.01'/%3E%3C/svg%3E");
}
.tc-article p.tc-note--tip {
  background: #EAF7F0;
  color: #17402C;
}
.tc-article p.tc-note--tip::before {
  background: #0B8A55;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.6 10.8c.7.5 1.1 1.3 1.1 2.2h5c0-.9.4-1.7 1.1-2.2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.6 10.8c.7.5 1.1 1.3 1.1 2.2h5c0-.9.4-1.7 1.1-2.2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E");
}
/* the opening paragraph: what the product is, a step larger and darker than the text after it,
       not heavier (the ladder's weights, base.less) */
.tc-article p.tc-lead {
  font-size: 1.07em;
  font-weight: var(--tc-fw-text);
  color: #1B2430;
}
/* lists with an icon for a marker: the marker is drawn, so the list keeps no indent of its own
       (the full description's desktop style puts a disc on every li with !important) */
.tc-article ul:is(.tc-list--check, .tc-list--star, .tc-list--cross) {
  list-style: none;
  padding-right: 0;
}
.tc-article :is(.tc-list--check, .tc-list--star, .tc-list--cross, .tc-list--steps, .tc-list--tags) > li {
  list-style: none !important;
}
/* who or what it suits, as flat topic pills (One UI's "Settings topics") - not the page's
       pills and chips (variants, product tags): a full round on a soft fill and a hairline, a
       small outline tag before the word, the text a step under the paragraph's */
.tc-article ul.tc-list--tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
}
.tc-article ul.tc-list--tags > li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 5px 14px 5px 12px;
  border: 1px solid #E8EAEE;
  border-radius: 999px;
  background: #F4F5F7;
  color: #2B3240 !important;
  font-size: 0.88em;
  font-weight: var(--tc-fw-text);
  line-height: 1.8;
}
.tc-article ul.tc-list--tags > li::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: #6B7380;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8Z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8Z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.3'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* each pill its own icon for what it names - a sofa for «اتاق نشیمن», a table for «میز عسلی»;
       the plain tag above stays for a pill no topic fits */
.tc-article ul.tc-list--tags > li[data-tc-icon="cup"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 8h1a4 4 0 0 1 0 8h-1'/%3E%3Cpath d='M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4z'/%3E%3Cpath d='M7 2v3M11 2v3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 8h1a4 4 0 0 1 0 8h-1'/%3E%3Cpath d='M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4z'/%3E%3Cpath d='M7 2v3M11 2v3'/%3E%3C/svg%3E");
}
.tc-article ul.tc-list--tags > li[data-tc-icon="meal"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 2v7a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2V2M6 2v20'/%3E%3Cpath d='M21 15V2a5 5 0 0 0-5 5v6a2 2 0 0 0 2 2h3zm0 0v7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 2v7a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2V2M6 2v20'/%3E%3Cpath d='M21 15V2a5 5 0 0 0-5 5v6a2 2 0 0 0 2 2h3zm0 0v7'/%3E%3C/svg%3E");
}
.tc-article ul.tc-list--tags > li[data-tc-icon="party"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z'/%3E%3Cpath d='M19 15v4M17 17h4M5 3v3M3.5 4.5h3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z'/%3E%3Cpath d='M19 15v4M17 17h4M5 3v3M3.5 4.5h3'/%3E%3C/svg%3E");
}
.tc-article ul.tc-list--tags > li[data-tc-icon="table"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h20'/%3E%3Cpath d='M4 8v12M20 8v12M7 8v4h10V8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h20'/%3E%3Cpath d='M4 8v12M20 8v12M7 8v4h10V8'/%3E%3C/svg%3E");
}
.tc-article ul.tc-list--tags > li[data-tc-icon="bed"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6v14M3 16h18v4M21 16v-3a3 3 0 0 0-3-3h-8v6'/%3E%3Ccircle cx='6.5' cy='12' r='1.6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6v14M3 16h18v4M21 16v-3a3 3 0 0 0-3-3h-8v6'/%3E%3Ccircle cx='6.5' cy='12' r='1.6'/%3E%3C/svg%3E");
}
.tc-article ul.tc-list--tags > li[data-tc-icon="armchair"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 11V7a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v4'/%3E%3Cpath d='M4 11a2 2 0 0 1 2 2v2h12v-2a2 2 0 0 1 4 0v4a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-4a2 2 0 0 1 2-2z'/%3E%3Cpath d='M6 18v2M18 18v2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 11V7a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v4'/%3E%3Cpath d='M4 11a2 2 0 0 1 2 2v2h12v-2a2 2 0 0 1 4 0v4a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-4a2 2 0 0 1 2-2z'/%3E%3Cpath d='M6 18v2M18 18v2'/%3E%3C/svg%3E");
}
.tc-article ul.tc-list--tags > li[data-tc-icon="sofa"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10V8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M2 13a2 2 0 0 1 4 0v2h12v-2a2 2 0 0 1 4 0v4a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3Cpath d='M5 18v2M19 18v2M12 6v9'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10V8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M2 13a2 2 0 0 1 4 0v2h12v-2a2 2 0 0 1 4 0v4a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3Cpath d='M5 18v2M19 18v2M12 6v9'/%3E%3C/svg%3E");
}
.tc-article ul.tc-list--tags > li[data-tc-icon="lamp"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3h8l3 8H5z'/%3E%3Cpath d='M12 11v8M8 21h8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3h8l3 8H5z'/%3E%3Cpath d='M12 11v8M8 21h8'/%3E%3C/svg%3E");
}
.tc-article ul.tc-list--tags > li[data-tc-icon="home"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}
.tc-article ul.tc-list--tags > li[data-tc-icon="gift"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7'/%3E%3Cpath d='M7.5 8a2.5 2.5 0 0 1 0-5C10 3 12 8 12 8s2-5 4.5-5a2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7'/%3E%3Cpath d='M7.5 8a2.5 2.5 0 0 1 0-5C10 3 12 8 12 8s2-5 4.5-5a2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E");
}
.tc-article ul.tc-list--tags > li[data-tc-icon="work"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2M2 13h20'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2M2 13h20'/%3E%3C/svg%3E");
}
.tc-article ul.tc-list--tags > li[data-tc-icon="sport"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 6.5v11M17.5 6.5v11M3.5 9v6M20.5 9v6M6.5 12h11'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 6.5v11M17.5 6.5v11M3.5 9v6M20.5 9v6M6.5 12h11'/%3E%3C/svg%3E");
}
.tc-article ul.tc-list--tags > li[data-tc-icon="travel"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='7' width='14' height='13' rx='2'/%3E%3Cpath d='M9 7V4h6v3M9.5 11v5M14.5 11v5M8 20v1.5M16 20v1.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='7' width='14' height='13' rx='2'/%3E%3Cpath d='M9 7V4h6v3M9.5 11v5M14.5 11v5M8 20v1.5M16 20v1.5'/%3E%3C/svg%3E");
}
.tc-article ul.tc-list--tags > li[data-tc-icon="nature"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.5 19 2c1 2 2 4.2 2 8 0 5.5-4.8 10-10 10z'/%3E%3Cpath d='M2 21c0-3 1.9-5.4 5.2-6.1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.5 19 2c1 2 2 4.2 2 8 0 5.5-4.8 10-10 10z'/%3E%3Cpath d='M2 21c0-3 1.9-5.4 5.2-6.1'/%3E%3C/svg%3E");
}
.tc-article ul.tc-list--tags > li[data-tc-icon="kids"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 14a4 4 0 0 0 7 0M9 9.5h.01M15 9.5h.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 14a4 4 0 0 0 7 0M9 9.5h.01M15 9.5h.01'/%3E%3C/svg%3E");
}
.tc-article ul.tc-list--tags > li[data-tc-icon="study"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9l10-5 10 5-10 5z'/%3E%3Cpath d='M6 11v5c0 1.5 3 3 6 3s6-1.5 6-3v-5M22 9v5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9l10-5 10 5-10 5z'/%3E%3Cpath d='M6 11v5c0 1.5 3 3 6 3s6-1.5 6-3v-5M22 9v5'/%3E%3C/svg%3E");
}
.tc-article ul.tc-list--tags > li[data-tc-icon="heart"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-9.3-9A5 5 0 0 1 12 6a5 5 0 0 1 9.3 5C19 15.6 12 20 12 20z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-9.3-9A5 5 0 0 1 12 6a5 5 0 0 1 9.3 5C19 15.6 12 20 12 20z'/%3E%3C/svg%3E");
}
.tc-article ul.tc-list--tags > li[data-tc-icon="people"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
}
.tc-article ul.tc-list--tags > li[data-tc-icon="daily"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E");
}
.tc-article ul.tc-list--tags > li[data-tc-icon="luxury"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12l4 6-10 12L2 9z'/%3E%3Cpath d='M2 9h20M12 21 8 9l2-6M12 21l4-12-2-6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12l4 6-10 12L2 9z'/%3E%3Cpath d='M2 9h20M12 21 8 9l2-6M12 21l4-12-2-6'/%3E%3C/svg%3E");
}
.tc-article ul.tc-list--tags > li[data-tc-icon="clothes"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.4 6.6 16 4a4 4 0 0 1-8 0L3.6 6.6a1 1 0 0 0-.5 1.2l1 3a1 1 0 0 0 1.2.6L7 11v9a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-9l1.7.4a1 1 0 0 0 1.2-.6l1-3a1 1 0 0 0-.5-1.2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.4 6.6 16 4a4 4 0 0 1-8 0L3.6 6.6a1 1 0 0 0-.5 1.2l1 3a1 1 0 0 0 1.2.6L7 11v9a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-9l1.7.4a1 1 0 0 0 1.2-.6l1-3a1 1 0 0 0-.5-1.2z'/%3E%3C/svg%3E");
}
.tc-article ul.tc-list--tags > li[data-tc-icon="winter"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20M3.3 7l17.4 10M3.3 17 20.7 7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20M3.3 7l17.4 10M3.3 17 20.7 7'/%3E%3C/svg%3E");
}
.tc-article ul.tc-list--tags > li[data-tc-icon="summer"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E");
}
.tc-article ul.tc-list--tags > li[data-tc-icon="water"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3s6 6.5 6 11a6 6 0 0 1-12 0c0-4.5 6-11 6-11z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3s6 6.5 6 11a6 6 0 0 1-12 0c0-4.5 6-11 6-11z'/%3E%3C/svg%3E");
}
.tc-article ul.tc-list--tags > li[data-tc-icon="car"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17v-5l2.2-5h13.6l2.2 5v5M3 12h18M6 17h12'/%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17v-5l2.2-5h13.6l2.2 5v5M3 12h18M6 17h12'/%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E");
}
/* a question and its answer: the question a row to open, the answer under it */
.tc-article details {
  margin: 0 0 10px;
  padding: 0 16px;
  border: 1px solid #E6E8EC;
  border-radius: 12px;
  background: #FFF;
}
.tc-article details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  font-weight: var(--tc-fw-label);
  color: #1B2430;
  list-style: none;
  cursor: pointer;
}
.tc-article details > summary::-webkit-details-marker {
  display: none;
}
.tc-article details > summary::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: #8A9099;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s ease;
}
.tc-article details[open] > summary::after {
  transform: rotate(180deg);
}
.tc-article details > :not(summary) {
  margin: 0 0 14px !important;
}
@media (prefers-reduced-motion: reduce) {
  .tc-article details > summary::after {
    transition: none;
  }
}
.tc-article :is(.tc-list--check, .tc-list--star, .tc-list--cross) > li {
  position: relative;
  padding-right: 28px;
}
.tc-article :is(.tc-list--check, .tc-list--star, .tc-list--cross) > li::before {
  content: "";
  position: absolute;
  /* level with the first line: half the line's height, less half the icon */
  top: calc(0.95em - 9px);
  right: 0;
  width: 18px;
  height: 18px;
  -webkit-mask: var(--tc-list-icon) center / contain no-repeat;
  mask: var(--tc-list-icon) center / contain no-repeat;
}
.tc-article .tc-list--check > li::before {
  --tc-list-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='m'%3E%3Ccircle cx='12' cy='12' r='11' fill='white'/%3E%3Cpath d='m7 12.5 3.2 3.2L17 9' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Crect width='24' height='24' mask='url(%23m)'/%3E%3C/svg%3E");
  background: #0B8A55;
}
.tc-article .tc-list--star > li::before {
  --tc-list-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4l-5.8 3.1 1.1-6.5L2.6 9.4l6.5-.9z'/%3E%3C/svg%3E");
  background: #F5A623;
}
.tc-article .tc-list--cross > li::before {
  --tc-list-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='m'%3E%3Ccircle cx='12' cy='12' r='11' fill='white'/%3E%3Cpath d='m8.5 8.5 7 7m0-7-7 7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/mask%3E%3Crect width='24' height='24' mask='url(%23m)'/%3E%3C/svg%3E");
  background: #D2303C;
}
/* steps: the number in a round badge, in Persian digits as the rest of the page */
.tc-article ol.tc-list--steps {
  list-style: none;
  padding-right: 0;
  counter-reset: tc-step;
}
.tc-article ol.tc-list--steps > li {
  position: relative;
  min-height: 26px;
  padding-right: 36px;
  counter-increment: tc-step;
}
.tc-article ol.tc-list--steps > li::before {
  content: counter(tc-step, persian);
  position: absolute;
  top: calc(0.95em - 13px);
  right: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  /* a pale tint of the store's colour, whatever it is set to */
  background: #EEF4FB;
  background: color-mix(in srgb, var(--ryan-primary, #007ad0) 12%, #FFF);
  color: var(--ryan-primary, #007ad0);
  font-size: 13px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
}
/* a link to a part of the page: the link colour and a small arrow pointing down the page */
.tc-article a.tc-jump {
  font-weight: 600;
  white-space: nowrap;
}
.tc-article a.tc-jump::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 3px;
  vertical-align: -1px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tc-article hr {
  height: 0;
  margin: 20px 0;
  border: 0;
  border-top: 1px solid #EEEEF0;
}
.tc-article img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}
.tc-article {
  font-size: var(--tc-art-body);
  line-height: var(--tc-art-lh);
  color: #2A303A;
  /* what pasted texts bring - 12pt spans, a font of their own, coloured table heads - gives way
       to the column's */
  /* a table wider than the column scrolls inside its own frame (blog.js wraps it) */
  /* a tall picture stays within a screen: as wide as it may be at that height, centred */
  /* a quote set apart: larger, under a brand bar */
  /* the products a post names (RichBlog's data-entity="product" / "category" blocks) */
}
.tc-article [style] {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}
.tc-article :is(h1, h2) {
  font-size: var(--tc-art-h2);
  font-weight: 700;
  line-height: 1.7;
  margin: 48px 0 14px !important;
}
.tc-article h3 {
  font-size: var(--tc-art-h3);
  font-weight: 600;
  line-height: 1.75;
  margin: 34px 0 10px !important;
}
.tc-article :is(h4, h5, h6) {
  font-size: var(--tc-art-body);
  font-weight: 600;
  margin: 26px 0 8px !important;
}
.tc-article :is(h1, h2, h3, h4) {
  scroll-margin-top: 110px;
}
.tc-article > :first-child {
  margin-top: 0 !important;
}
.tc-article :is(p, ul, ol, table, blockquote, figure, dl) {
  margin-bottom: 1.3em !important;
}
.tc-article li {
  line-height: 2 !important;
}
.tc-article :is(table, th, td, caption) {
  font-size: var(--tc-art-small) !important;
}
.tc-article tr[style],
.tc-article th[style],
.tc-article td[style] {
  background: inherit !important;
  color: inherit !important;
}
.tc-article thead tr > *,
.tc-article tr:first-child > th {
  background: #F5F7FA !important;
  color: #141A23 !important;
}
.tc-article .tc-article__table {
  overflow-x: auto;
  margin: 4px 0 1.5em;
  -webkit-overflow-scrolling: touch;
}
.tc-article .tc-article__table > table {
  margin: 0 !important;
  min-width: 520px;
}
.tc-article img {
  width: auto !important;
  max-height: min(80vh, 640px);
  object-fit: contain;
  margin: 28px auto !important;
  border-radius: 12px;
}
.tc-article figure {
  margin: 28px 0 !important;
}
.tc-article figure img {
  margin: 0 auto 10px !important;
}
.tc-article figcaption {
  color: #6B7380;
  font-size: var(--tc-art-small);
  line-height: 1.9;
  text-align: center;
}
.tc-article blockquote {
  margin: 32px 0 !important;
  padding: 4px 22px 4px 0;
  border-right: 3px solid var(--ryan-primary, #007ad0);
  color: #141A23;
  font-size: 1.12em;
  font-weight: 400;
  line-height: 2;
}
.tc-article blockquote p {
  color: inherit !important;
  font-size: inherit !important;
}
.tc-article blockquote > :last-child {
  margin-bottom: 0 !important;
}
.tc-article hr {
  width: 64px;
  height: 0;
  margin: 40px auto;
  border: 0;
  border-top: 2px solid #E6E9EE;
}
.tc-article iframe {
  display: block;
  width: 100% !important;
  max-width: 100%;
  height: auto !important;
  aspect-ratio: 16 / 9;
  margin: 28px 0;
  border: 0 !important;
  border-radius: 12px;
}
.tc-article video,
.tc-article audio {
  width: 100%;
  max-width: 100%;
  margin: 28px 0;
  border-radius: 12px;
}
.tc-article a:hover {
  color: var(--ryan-primary, #007ad0);
}
.tc-article .product-blog-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 20px;
  align-items: center;
  margin: 28px 0 !important;
  padding: 16px;
  border: 1px solid #E6E9EE;
  border-radius: 14px;
  background: #FFF;
}
.tc-article .product-blog-item img {
  margin: 0 !important;
  border-radius: 10px;
}
@media only screen and (max-width: 959px) {
  .tc-article .product-blog-item {
    grid-template-columns: minmax(0, 1fr) 110px;
    gap: 12px;
    padding: 12px;
  }
}
.tc-article .product-blog-item_caption {
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
}
.tc-article .product-blog-title {
  display: block;
  margin: 0 0 8px;
  color: #141A23 !important;
  font-size: var(--tc-art-body);
  font-weight: 600;
  line-height: 1.8;
  text-decoration: none !important;
}
.tc-article .product-blog-mainProperties,
.tc-article .product-blog-mainProperties li {
  font-size: var(--tc-art-small) !important;
  line-height: 1.9 !important;
  color: #6B7380 !important;
}
.tc-article .product-blog-mainproPerties_list {
  margin: 4px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.tc-article .product-blog-mainproPerties_list li {
  margin: 0 !important;
  list-style: none !important;
}
.tc-article .product-blog-price {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 10px 0 !important;
  color: #141A23;
  font-weight: 700;
}
.tc-article .product-blog-price img {
  width: 18px !important;
  height: auto;
}
.tc-article .product-blog-item .km-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: 40px;
  border-radius: 10px;
  text-decoration: none !important;
  font-size: 13.5px;
}
/* ---- after the text: tags, share, the comments ---------------------------------------------- */
.tc-post-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin: 36px 0 0;
  padding: 20px 0;
  border-top: 1px solid #E6E9EE;
  border-bottom: 1px solid #E6E9EE;
}
.tc-post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tc-post-tags a {
  padding: 4px 14px;
  border-radius: 999px;
  background: #F4F5F7;
  color: #3A4250;
  font-size: 13px;
  line-height: 1.9;
}
.tc-post-tags a:hover {
  background: #E9EBEF;
  color: #141A23;
}
.tc-post-share-label {
  margin-left: 6px;
  color: #6B7380;
  font-size: 13px;
}
/* ---- the side column: contents, then the most discussed ----------------------------------- */
.tc-post__side {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media only screen and (max-width: 959px) {
  .tc-post__side {
    position: static;
    display: none;
  }
}
.tc-toc {
  padding: 0;
}
.tc-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-right: 2px solid #E6E9EE;
}
.tc-toc a {
  display: block;
  margin-right: -2px;
  padding: 6px 14px 6px 0;
  border-right: 2px solid transparent;
  color: #4A5260;
  font-size: 13.5px;
  line-height: 1.85;
  transition: color 0.15s, border-color 0.15s;
}
.tc-toc a:hover {
  color: #141A23;
}
.tc-toc a.is-active {
  border-right-color: var(--ryan-primary, #007ad0);
  color: #141A23;
  font-weight: 600;
}
.tc-toc .tc-toc__sub a {
  padding-right: 28px;
  font-size: 13px;
}
.tc-toc__title {
  margin: 0 0 10px;
  color: #141A23;
  font-size: 14px;
  font-weight: 700;
}
/* the phone's contents (blog.js tocSheet): a round white button at the right, as the glass bottom
   bar (bottom-nav-glass.css: white 92%, a hairline and a soft shadow), a ring for the reading;
   the list a sheet from the bottom. Wide screens keep the side's contents */
.tc-tocfab {
  position: fixed;
  right: 16px;
  bottom: calc(76px + env(safe-area-inset-bottom));
  z-index: 980;
  display: none;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.1);
  color: #242424;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s, bottom 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.tc-tocfab.is-shown {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.tc-tocfab.is-shown:active {
  transform: scale(0.94);
}
@media only screen and (max-width: 959px) {
  .tc-tocfab {
    display: grid;
  }
}
/* above the audio bar while it shows */
body:has(.tc-audio-bar.is-shown) .tc-tocfab {
  bottom: calc(158px + env(safe-area-inset-bottom));
}
.tc-tocfab__icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.tc-tocfab__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg) scaleY(-1);
  pointer-events: none;
}
.tc-tocfab__ring circle {
  fill: none;
  stroke: var(--ryan-primary, #007ad0);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: calc(var(--tc-done, 0) * 1) 100;
  transition: stroke-dasharray 0.2s;
}
.tc-tocsheet {
  position: fixed;
  inset: 0;
  z-index: 1000;
  visibility: hidden;
  transition: visibility 0s 0.3s;
}
.tc-tocsheet.is-open {
  visibility: visible;
  transition: none;
}
.tc-tocsheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 21, 28, 0.45);
  opacity: 0;
  transition: opacity 0.25s;
}
.is-open > .tc-tocsheet__backdrop {
  opacity: 1;
}
.tc-tocsheet__panel {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  max-height: 72vh;
  padding: 6px 0 calc(12px + env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0;
  background: #FFF;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.is-open > .tc-tocsheet__panel {
  transform: none;
}
.tc-tocsheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px 12px 12px;
  border-bottom: 1px solid #E6E9EE;
}
.tc-tocsheet__title {
  margin: 0;
  color: #141A23;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}
.tc-tocsheet__count {
  color: #6B7380;
  font-size: 12px;
}
.tc-tocsheet__close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #F4F5F7;
  color: #141A23;
  cursor: pointer;
}
.tc-tocsheet__close svg {
  width: 18px;
  height: 18px;
}
/* the list: the sections numbered, the one being read in the brand colour */
.tc-toc.tc-tocsheet__list {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 12px 4px;
}
.tc-toc.tc-tocsheet__list ol {
  border: 0;
  counter-reset: tc-sec;
}
.tc-toc.tc-tocsheet__list a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  padding: 11px 12px;
  border: 0;
  border-radius: 12px;
  color: #3A4250;
  font-size: 14.5px;
  line-height: 1.8;
}
.tc-toc.tc-tocsheet__list a.is-active {
  background: #F4F5F7;
  color: #141A23;
  font-weight: 600;
}
.tc-toc.tc-tocsheet__list a.is-active::before {
  color: var(--ryan-primary, #007ad0);
}
.tc-toc.tc-tocsheet__list li:not(.tc-toc__sub) > a::before {
  counter-increment: tc-sec;
  content: counter(tc-sec, persian);
  flex: none;
  min-width: 18px;
  color: #6B7380;
  font-size: 13px;
  font-weight: 600;
}
.tc-toc.tc-tocsheet__list .tc-toc__sub a {
  padding-right: 42px;
  font-size: 13.5px;
}
/* ---- more to read ------------------------------------------------------------------------- */
.tc-post-more {
  margin: 56px 0 0;
  padding: 0;
}
.tc-post-more .tc-mag-section__title {
  margin-bottom: 20px;
}
.tc-post-more__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
@media only screen and (max-width: 1199px) {
  .tc-post-more__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media only screen and (max-width: 959px) {
  .tc-post-more__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .tc-post-more__grid .tc-mag-card--stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 116px;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #E6E9EE;
  }
  .tc-post-more__grid .tc-mag-card--stack .tc-mag-card__media {
    grid-column: 2;
    grid-row: 1;
    border-radius: 10px;
  }
  .tc-post-more__grid .tc-mag-card--stack .tc-mag-card__body {
    grid-column: 1;
    grid-row: 1;
    gap: 4px;
  }
  .tc-post-more__grid .tc-mag-card--stack .tc-mag-card__title {
    font-size: 14.5px;
  }
  .tc-post-more__grid .tc-mag-card--stack:last-child {
    border-bottom: 0;
  }
}
/* ---- comments ----------------------------------------------------------------------------- */
.tc-comments {
  margin: 48px 0 0;
  scroll-margin-top: 100px;
}
.tc-comments__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 18px;
}
.tc-comments__head .tc-mag-section__title {
  margin: 0;
}
.tc-comments__count {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 24px;
  margin-right: 8px;
  padding: 0 8px;
  border-radius: 12px;
  background: #F4F5F7;
  color: #3A4250;
  font-size: 12.5px;
  font-weight: 600;
  vertical-align: 3px;
}
.tc-comments__sort {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: #F4F5F7;
}
.tc-comments__sort button {
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #6B7380;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.tc-comments__sort button.is-active {
  background: #FFF;
  color: #141A23;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.tc-compose {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  margin: 0 0 28px;
  padding: 16px;
  border: 1px solid #E6E9EE;
  border-radius: 16px;
  background: #FFF;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.tc-compose:focus-within {
  border-color: #C9CFD8;
  box-shadow: 0 6px 24px rgba(20, 26, 35, 0.06);
}
@media only screen and (max-width: 959px) {
  .tc-compose {
    grid-template-columns: minmax(0, 1fr);
    padding: 14px;
  }
  .tc-compose .tc-avatar {
    display: none;
  }
}
.tc-compose__field {
  display: block;
  width: 100%;
  min-height: 52px;
  max-height: 320px;
  padding: 8px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #141A23;
  font: inherit;
  font-size: 15px;
  line-height: 2;
  resize: none;
}
.tc-compose__field::placeholder {
  color: #9AA3B2;
}
.tc-compose__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid #F4F5F7;
}
.tc-compose__as {
  color: #6B7380;
  font-size: 12.5px;
  line-height: 1.8;
}
.tc-compose__as a {
  color: var(--ryan-primary, #007ad0);
  font-weight: 600;
}
.tc-compose__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
}
.tc-compose__counter {
  color: #9AA3B2;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.tc-compose__counter.is-over {
  color: #D2303C;
}
.tc-compose__send {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 20px;
  border: 0;
  border-radius: 20px;
  background: var(--ryan-primary, #007ad0);
  color: #FFF;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.tc-compose__send:disabled {
  opacity: 0.4;
  cursor: default;
}
.tc-compose__send.is-busy {
  opacity: 0.7;
  cursor: progress;
}
.tc-compose__status {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.9;
}
.tc-compose__status[hidden] {
  display: none;
}
.tc-compose__status.is-ok {
  background: #EAF7F0;
  color: #17402C;
}
.tc-compose__status.is-error {
  background: #FDECEE;
  color: #7A1C25;
}
.tc-comments__closed,
.tc-comments__empty {
  margin: 0 0 24px;
  padding: 18px;
  border-radius: 12px;
  background: #F4F5F7;
  color: #6B7380;
  font-size: 14px;
  text-align: center;
}
.tc-comment-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tc-comment {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid #E6E9EE;
}
.tc-comment:first-child {
  padding-top: 4px;
}
.tc-comment[hidden] {
  display: none;
}
.tc-comment.is-new {
  animation: tc-comment-in 0.6s ease;
}
@media only screen and (max-width: 959px) {
  .tc-comment {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
  }
}
@keyframes tc-comment-in {
  from {
    background: #FFF8E1;
  }
  to {
    background: transparent;
  }
}
.tc-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #ECEEF2;
  color: #3A4250;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
.tc-avatar svg {
  width: 20px;
  height: 20px;
}
@media only screen and (max-width: 959px) {
  .tc-avatar {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
}
.tc-comment__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin: 0 0 4px;
}
.tc-comment__name {
  color: #141A23;
  font-size: 14px;
  font-weight: 600;
}
.tc-comment__date {
  color: #9AA3B2;
  font-size: 12px;
}
.tc-comment__text {
  margin: 0;
  color: #2A303A;
  font-size: 14.5px;
  line-height: 2.05;
  overflow-wrap: anywhere;
}
.tc-comments__more {
  display: flex;
  justify-content: center;
  margin: 20px 0 0;
}
.tc-comments__more button {
  height: 42px;
  padding: 0 24px;
  border: 1px solid #E6E9EE;
  border-radius: 21px;
  background: #FFF;
  color: #141A23;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.tc-comments__more button:hover {
  border-color: #141A23;
}
/* ---- the post's accents: the brand colour on the kicker, the headings' marks, the quotes ---- */
.tc-post-head__kickers {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}
.tc-post-head__kickers .tc-post-head__kicker {
  display: inline-flex;
  margin: 0;
  padding: 2px 12px;
  border-radius: 6px;
  background: var(--ryan-primary, #007ad0);
  color: #FFF;
  font-size: 13px;
}
.tc-post-head__media {
  padding: 1px 10px;
  border: 1px solid #E6E9EE;
  border-radius: 6px;
  color: #3A4250;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.9;
}
.tc-post-head__lead {
  padding: 0 16px 0 0;
  border-right: 3px solid var(--ryan-primary, #007ad0);
}
.tc-article :is(h1, h2) {
  position: relative;
  padding-right: 16px;
}
.tc-article :is(h1, h2)::before {
  content: "";
  position: absolute;
  top: 0.5em;
  right: 0;
  bottom: 0.5em;
  width: 4px;
  border-radius: 2px;
  background: var(--ryan-primary, #007ad0);
}
.tc-article blockquote {
  padding: 16px 20px 16px 18px;
  border-right: 3px solid var(--ryan-primary, #007ad0);
  border-radius: 0 12px 12px 0;
  background: #F4F5F7;
}
/* the desk's newest, beside the text */
.tc-post-desk {
  padding: 18px 18px 14px;
  border-radius: 16px;
  background: #F4F5F7;
}
.tc-post-desk .tc-desk__list {
  margin: 0 0 14px;
}
.tc-post-desk .tc-mag-card--mini {
  grid-template-columns: 76px minmax(0, 1fr);
}
.tc-post-desk .tc-mag-card--mini .tc-mag-card__title {
  font-size: 13.5px;
}
.tc-post-desk__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  color: #141A23;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}
.tc-post-desk__title::before {
  content: "";
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: var(--ryan-primary, #007ad0);
}
.tc-post-desk__title a {
  color: inherit;
}
.tc-post-desk__title a:hover {
  color: var(--ryan-primary, #007ad0);
}
/* ---- the previous and the next post ------------------------------------------------------- */
.tc-post-pn {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 28px 0 0;
}
@media only screen and (max-width: 959px) {
  .tc-post-pn {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
}
.tc-post-pn__item {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid #E6E9EE;
  border-radius: 14px;
  background: #FFF;
  transition: border-color 0.15s;
  /* wide: «قبلی» on the right, «بعدی» on the left, its picture on the outer edge */
}
.tc-post-pn__item:hover {
  border-color: #C9CFD8;
}
.tc-post-pn__item:hover .tc-post-pn__title {
  color: var(--ryan-primary, #007ad0);
}
.tc-post-pn__item.is-bare {
  grid-template-columns: minmax(0, 1fr);
}
@media only screen and (min-width: 960px) {
  .tc-post-pn__item.is-next {
    direction: ltr;
  }
  .tc-post-pn__item.is-next .tc-post-pn__body {
    direction: rtl;
    text-align: left;
    align-items: flex-end;
  }
}
.tc-post-pn__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 10px;
  background: #F4F5F7;
}
.tc-post-pn__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tc-post-pn__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.tc-post-pn__label {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #6B7380;
  font-size: 12.5px;
  font-weight: 600;
}
.tc-post-pn__label svg {
  width: 15px;
  height: 15px;
  flex: none;
}
.tc-post-pn__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: #141A23;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.8;
  transition: color 0.15s;
}
@media only screen and (max-width: 959px) {
  .tc-post-pn__gap {
    display: none;
  }
}
/* RichBlog's own share row and picture, replaced by the post's */
.tc-blog-page .post-footer {
  display: none !important;
}
/* ==========================================================================
   The shorts player: a 9:16 clip over the page, swipe or arrows between clips
   ========================================================================== */
.tc-shorts {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  background: rgba(6, 8, 11, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
}
.tc-shorts.is-open {
  opacity: 1;
  visibility: visible;
}
.tc-shorts__stage {
  position: relative;
  height: min(88vh, 860px);
  aspect-ratio: 9 / 16;
  max-width: 100vw;
  overflow: hidden;
  border-radius: 16px;
  background: #000;
}
.tc-shorts__stage video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media only screen and (max-width: 959px) {
  .tc-shorts__stage {
    height: 100%;
    width: 100%;
    aspect-ratio: auto;
    border-radius: 0;
  }
}
.tc-shorts__bars {
  position: absolute;
  top: 10px;
  right: 10px;
  left: 10px;
  z-index: 2;
  display: flex;
  gap: 4px;
  direction: ltr;
}
.tc-shorts__bars span {
  flex: 1;
  height: 3px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
}
.tc-shorts__bars span i {
  display: block;
  width: 0;
  height: 100%;
  background: #FFF;
}
.tc-shorts__info {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  padding: 64px 16px calc(18px + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.85));
  color: #FFF;
}
.tc-shorts__info strong {
  display: block;
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.8;
}
.tc-shorts__info a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  border-radius: 18px;
  background: #FFF;
  color: #141A23 !important;
  font-size: 13px;
  font-weight: 600;
}
.tc-shorts__close,
.tc-shorts__nav,
.tc-shorts__sound {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #FFF;
  cursor: pointer;
}
.tc-shorts__close svg,
.tc-shorts__nav svg,
.tc-shorts__sound svg {
  width: 22px;
  height: 22px;
}
.tc-shorts__close:hover,
.tc-shorts__nav:hover,
.tc-shorts__sound:hover {
  background: rgba(255, 255, 255, 0.24);
}
.tc-shorts__close {
  top: 20px;
  left: 20px;
}
.tc-shorts__sound {
  top: 24px;
  right: 14px;
  width: 36px;
  height: 36px;
}
.tc-shorts__sound svg {
  width: 18px;
  height: 18px;
}
.tc-shorts__nav--prev {
  right: calc(50% + min(44vh, 430px) * 9 / 16 + 24px);
  top: 50%;
}
.tc-shorts__nav--next {
  left: calc(50% + min(44vh, 430px) * 9 / 16 + 24px);
  top: 50%;
}
@media only screen and (max-width: 959px) {
  .tc-shorts__nav {
    display: none;
  }
  .tc-shorts__close {
    top: calc(22px + env(safe-area-inset-top));
    left: 12px;
  }
}
body.tc-shorts-on {
  overflow: hidden;
}
/* ==========================================================================
   INSIDE THE TEXT (_BlogArticle.cshtml): a picture with its caption and credit, the card a
   "read also" line becomes - beside the text or in rows - and the most read near the middle.
   Flat: the brand colour and greys.
   ========================================================================== */
.tc-article {
  /* what comes in a block of its own does not sit beside a card */
  /* ---- a picture: as wide as the picture, its caption under it on a hairline */
  /* ---- a "read also" post beside the text */
  /* ---- "read also" lines in rows: the title, the date, an arrow */
  /* ---- the most read, a list with pictures near the middle of the text */
}
.tc-article :is(.tc-fig, .tc-refs, .tc-reads, .tc-article__table, iframe, table) {
  clear: both;
}
.tc-article .tc-fig {
  width: fit-content;
  max-width: 100%;
  margin: 32px auto !important;
}
.tc-article .tc-fig__media {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
.tc-article .tc-fig__media img {
  display: block;
  margin: 0 auto !important;
  border-radius: 0;
}
.tc-article .tc-fig__credit {
  position: absolute;
  bottom: 0;
  left: 0;
  max-width: 70%;
  padding: 3px 10px;
  background: rgba(17, 21, 28, 0.78);
  color: #FFF;
  direction: ltr;
  font-size: 11.5px;
  line-height: 1.8;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.tc-article .tc-fig__caption {
  contain: inline-size;
  margin: 10px 0 0;
  padding: 0 12px 0 0;
  border-right: 2px solid #C9CFD8;
  color: #6B7380;
  font-size: var(--tc-art-small);
  line-height: 1.9;
  text-align: right;
}
.tc-article .tc-inset {
  float: left;
  width: 264px;
  margin: 6px 32px 18px 0;
  /* the text runs on its right (rtl) */
}
@media only screen and (max-width: 959px) {
  .tc-article .tc-inset {
    float: none;
    width: auto;
    margin: 24px 0;
  }
}
.tc-article .tc-inset__link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 12px 14px;
  border: 1px solid #E6E9EE;
  border-radius: 14px;
  background: #FFF;
  color: #141A23 !important;
  text-decoration: none !important;
  transition: border-color 0.15s;
}
.tc-article .tc-inset__link:hover {
  border-color: #C9CFD8;
}
.tc-article .tc-inset__link:hover .tc-inset__title {
  color: var(--ryan-primary, #007ad0);
}
@media only screen and (max-width: 959px) {
  .tc-article .tc-inset__link {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 12px;
    row-gap: 2px;
    align-items: start;
  }
}
.tc-article .tc-inset__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 9px;
  background: #ECEEF2;
}
.tc-article .tc-inset__media img {
  width: 100% !important;
  height: 100%;
  max-height: none;
  margin: 0 !important;
  object-fit: cover;
  border-radius: 0;
}
@media only screen and (max-width: 959px) {
  .tc-article .tc-inset__media {
    grid-row: 1 / 3;
    aspect-ratio: 4 / 3;
  }
}
.tc-article .tc-inset__label {
  margin-top: 4px;
  color: var(--ryan-primary, #007ad0);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
}
@media only screen and (max-width: 959px) {
  .tc-article .tc-inset__label {
    margin-top: 0;
  }
}
.tc-article .tc-inset__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.85;
  transition: color 0.15s;
}
.tc-article .tc-refs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 26px 0 !important;
}
.tc-article .tc-refs__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 10px;
  background: #F4F5F7;
  color: #141A23 !important;
  text-decoration: none !important;
  transition: background-color 0.15s;
}
.tc-article .tc-refs__item:hover {
  background: #ECEEF2;
}
.tc-article .tc-refs__item:hover .tc-refs__title {
  color: var(--ryan-primary, #007ad0);
}
@media only screen and (max-width: 959px) {
  .tc-article .tc-refs__item {
    gap: 10px;
    padding: 12px 14px;
  }
}
.tc-article .tc-refs__media {
  flex: none;
  width: 56px;
  height: 56px;
  overflow: hidden;
  border-radius: 8px;
  background: #FFF;
}
.tc-article .tc-refs__media img {
  width: 100% !important;
  height: 100%;
  max-height: none;
  margin: 0 !important;
  object-fit: cover;
  border-radius: 0;
}
.tc-article .tc-refs__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tc-article .tc-refs__title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.85;
  transition: color 0.15s;
}
@media only screen and (max-width: 959px) {
  .tc-article .tc-refs__title {
    font-size: 14px;
  }
}
.tc-article .tc-refs__meta {
  color: #6B7380;
  font-size: 12.5px;
  line-height: 1.7;
}
.tc-article .tc-refs__go {
  flex: none;
  width: 20px;
  height: 20px;
  color: #3A4250;
}
.tc-article .tc-reads {
  margin: 40px 0 !important;
}
.tc-article .tc-reads__title {
  margin: 0 0 14px;
  color: #141A23;
  font-size: var(--tc-art-h2);
  font-weight: 700;
  line-height: 1.6;
}
.tc-article .tc-reads__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.tc-article .tc-reads__list li {
  margin: 0 !important;
  padding: 0 !important;
  line-height: inherit !important;
  list-style: none !important;
}
.tc-article .tc-reads__list li::before,
.tc-article .tc-reads__list li::marker {
  content: none;
}
.tc-article .tc-reads__item {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 10px;
  border-radius: 10px;
  background: #F4F5F7;
  color: #141A23 !important;
  text-decoration: none !important;
  transition: background-color 0.15s;
}
.tc-article .tc-reads__item:hover {
  background: #ECEEF2;
}
.tc-article .tc-reads__item:hover .tc-reads__name {
  color: var(--ryan-primary, #007ad0);
}
@media only screen and (max-width: 959px) {
  .tc-article .tc-reads__item {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 12px;
    padding: 8px;
  }
}
.tc-article .tc-reads__media {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 7px;
  background: #ECEEF2;
}
.tc-article .tc-reads__media img {
  width: 100% !important;
  height: 100%;
  max-height: none;
  margin: 0 !important;
  object-fit: cover;
  border-radius: 0;
}
.tc-article .tc-reads__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.9;
  transition: color 0.15s;
}
@media only screen and (max-width: 959px) {
  .tc-article .tc-reads__name {
    font-size: 14px;
    -webkit-line-clamp: 3;
  }
}
/* ==========================================================================
   THE PRODUCT ROWS UNDER THE PAGE (recently viewed, Components/RecentlyViewedProductsBlock, drawn as
   the home page's showcase row) - in the product page's hairline frame, the same rule word for word
   (pdp-shared.css, body.page-product .tc-showcase): on the white page it says where the row starts
   and stops. Wide screens; on a phone the row runs edge to edge as on the product page.
   ========================================================================== */
@media only screen and (min-width: 960px) {
  body.tc-blog-page .tc-showcase {
    padding: 20px 16px 16px;
    border: 1px solid #EDEDED;
    border-radius: 0;
    background: #fff;
  }
}
/* "recently viewed" (and any other showcase row in .rvp-row) under a blog page: its frame as wide
   as the blog's content above it - the home page's rows have their own width, set by .size2 */
@media only screen and (min-width: 960px) {
  /* product-card.css fills the container with "body .size .rvp-row.size" (!important) */
  body.tc-blog-page .size .rvp-row.size {
    width: 100% !important;
    max-width: 1288px !important;
    margin-inline: auto;
    padding-inline: 0;
  }
}
/* ==========================================================================
   PRODUCTS IN A POST (_BlogArticle.cshtml): the blocks the editor places in the text and the
   post's related products after it. They stand between the text's .tc-article pieces, out of its
   rules. Flat: the brand colour and greys.
   ========================================================================== */
.tc-embed-block {
  clear: both;
  margin: 36px 0;
}
@media only screen and (max-width: 959px) {
  .tc-embed-block {
    margin: 28px 0;
  }
}
/* a row of the shop's product cards (HomepageShowcase), at the column's width */
.tc-embed-row .tc-showcase {
  margin: 0;
}
.tc-embed-row--end {
  margin-top: 48px;
}
/* one product, set as an offer */
.tc-promo {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  padding: 16px;
  border: 1px solid #E6E9EE;
  border-radius: 16px;
  background: #FFF;
}
@media only screen and (max-width: 959px) {
  .tc-promo {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 14px;
    padding: 12px;
  }
}
.tc-promo__media {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 12px;
  background: #F4F5F7;
}
.tc-promo__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tc-promo__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.tc-promo__label {
  color: var(--ryan-primary, #007ad0);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.6;
}
a.tc-promo__name {
  color: #141A23;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
}
a.tc-promo__name:hover {
  color: var(--ryan-primary, #007ad0);
}
@media only screen and (max-width: 959px) {
  a.tc-promo__name {
    font-size: 15px;
  }
}
.tc-promo__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: #6B7380;
  font-size: 13.5px;
  line-height: 1.9;
}
@media only screen and (max-width: 959px) {
  .tc-promo__text {
    display: none;
  }
}
.tc-promo__buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
}
.tc-promo__price {
  display: flex;
  flex-direction: column;
  line-height: 1.5;
}
.tc-promo__price del {
  color: #6B7380;
  font-size: 12.5px;
}
.tc-promo__price b {
  color: #141A23;
  font-size: 17px;
  font-weight: 700;
}
a.tc-promo__go {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 22px;
  border-radius: 10px;
  background: var(--ryan-primary, #007ad0);
  color: #FFF !important;
  font-size: 14px;
  font-weight: 600;
}
a.tc-promo__go:hover {
  filter: brightness(0.94);
}
@media only screen and (max-width: 959px) {
  a.tc-promo__go {
    height: 38px;
    padding: 0 16px;
    font-size: 13px;
  }
}
/* a category or a brand, as a card */
a.tc-catcard__link {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  padding: 16px;
  border-radius: 16px;
  background: #F4F5F7;
}
a.tc-catcard__link:hover .tc-catcard__name {
  color: var(--ryan-primary, #007ad0);
}
@media only screen and (max-width: 959px) {
  a.tc-catcard__link {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 12px;
  }
}
.tc-catcard__media {
  display: flex;
  gap: 6px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 12px;
  background: #ECEEF2;
}
.tc-catcard__media img {
  display: block;
  flex: 1;
  min-width: 0;
  height: 100%;
  object-fit: cover;
}
.tc-catcard__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.tc-catcard__label {
  color: #6B7380;
  font-size: 12.5px;
  line-height: 1.6;
}
.tc-catcard__name {
  color: #141A23;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  transition: color 0.15s;
}
@media only screen and (max-width: 959px) {
  .tc-catcard__name {
    font-size: 17px;
  }
}
.tc-catcard__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  color: #6B7380;
  font-size: 13.5px;
  line-height: 1.9;
}
.tc-catcard__go {
  margin-top: 4px;
  color: var(--ryan-primary, #007ad0);
  font-size: 14px;
  font-weight: 600;
}
/* a phone's byline: who wrote it on one line; «شنیدن مطلب» and the share buttons below it, in one row.
   The phone's own share sheet (shown when the browser has one) stands for Telegram, WhatsApp and X */
@media only screen and (max-width: 959px) {
  .tc-post-byline__who {
    flex: 1 0 100%;
  }
  .tc-post-byline .tc-share {
    margin-inline-start: auto;
  }
  .tc-post-byline .tc-share:has([data-share="native"]:not([hidden])) :is([data-share="telegram"], [data-share="whatsapp"], [data-share="x"]) {
    display: none;
  }
}
/* the byline's «شنیدن مطلب» (BlogPost.cshtml): a light pill; the brand colour on its round icon only */
.tc-listen {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  margin-inline-start: auto;
  padding: 0 4px 0 14px;
  border: 0;
  border-radius: 999px;
  background: #F4F5F7;
  color: #141A23;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s;
}
.tc-listen:hover {
  background: #ECEEF2;
}
.tc-listen .tc-listen__pause {
  display: none;
}
.tc-listen.is-playing .tc-listen__play {
  display: none;
}
.tc-listen.is-playing .tc-listen__pause {
  display: block;
}
@media only screen and (max-width: 959px) {
  .tc-listen {
    margin-inline-start: 0;
  }
}
.tc-listen__icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ryan-primary, #007ad0);
  color: #FFF;
}
.tc-listen__icon svg {
  width: 13px;
  height: 13px;
}
.tc-listen__time {
  color: #6B7380;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}