/* CryptoFrame — single post: the reading column and its tooling. */

.cfx-single__head { margin-bottom: 1.4rem; }
.cfx-single__title { font-size: var(--cfx-fs-6); margin: .2rem 0 .5rem; }

.cfx-single__standfirst {
  max-width: 60ch;
  margin: 0 0 .9rem;
  font-size: var(--cfx-fs-1);
  line-height: 1.5;
  color: var(--cfx-muted);
  text-wrap: pretty;
}

.cfx-single__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-top: 1rem;
  padding-block: .6rem;
  border-block: 1px solid var(--cfx-border);
}

.cfx-single__media { margin: 0 0 1.6rem; }
.cfx-single__media img { border-radius: var(--cfx-radius-card); width: 100%; }
.cfx-single__media figcaption {
  margin-top: .5rem;
  font-size: var(--cfx-fs-xs);
  color: var(--cfx-muted);
}

.cfx-page__head { margin-bottom: 1.2rem; }
.cfx-page__title { font-size: var(--cfx-fs-6); }
.cfx-page__head--centred { text-align: center; }
.cfx-page__head--boxed {
  padding: 1.4rem;
  background: var(--cfx-surface);
  border-radius: var(--cfx-radius-card);
}
.cfx-page__media { margin: 0 0 1.6rem; }
.cfx-page__media img { border-radius: var(--cfx-radius-card); }

/* ---------- The reading column ---------- */

.cfx-prose {
  max-width: var(--cfx-article-width);
  font-size: var(--cfx-article-size, var(--cfx-fs-base));
  line-height: var(--cfx-lh-body);
}
.cfx-prose > * + * { margin-top: 1.1em; }
.cfx-prose h2 { margin-top: 2em; font-size: var(--cfx-fs-3); scroll-margin-top: calc(var(--cfx-sticky-offset) + 1rem); }
.cfx-prose h3 { margin-top: 1.6em; font-size: var(--cfx-fs-2); scroll-margin-top: calc(var(--cfx-sticky-offset) + 1rem); }
.cfx-prose img, .cfx-prose figure { border-radius: var(--cfx-radius-card); }
.cfx-prose figcaption { margin-top: .5rem; font-size: var(--cfx-fs-xs); color: var(--cfx-muted); }
.cfx-prose ul, .cfx-prose ol { padding-left: 1.3em; }
.cfx-prose li + li { margin-top: .35em; }
.cfx-prose a { color: var(--cfx-link); }

.cfx-prose table { margin-block: 1.6rem; font-size: var(--cfx-fs-sm); }
.cfx-prose thead th { background: var(--cfx-surface); }

.cfx-pagelinks { margin-top: 1.6rem; display: flex; gap: .4rem; }

/* ---------- Share, reader tools ---------- */

.cfx-share { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.cfx-share__label {
  margin-right: .2rem;
  font-family: var(--cfx-font-label);
  font-size: var(--cfx-fs-xs);
  letter-spacing: var(--cfx-ls-label);
  text-transform: var(--cfx-case-label);
  color: var(--cfx-muted);
}
.cfx-share__link, .cfx-share__print, .cfx-share__copy {
  display: inline-flex;
  align-items: center;
  padding: .3rem .7rem;
  font-family: var(--cfx-font-label);
  font-size: var(--cfx-fs-xs);
  text-decoration: none;
  color: var(--cfx-heading);
  background: var(--cfx-surface);
  border: 1px solid transparent;
  border-radius: var(--cfx-radius-pill);
  cursor: pointer;
}
.cfx-share__link:hover, .cfx-share__print:hover, .cfx-share__copy:hover {
  background: var(--cfx-primary);
  color: var(--cfx-on-primary);
}

.cfx-readertools { display: flex; align-items: center; gap: .35rem; }
.cfx-readertools__btn {
  padding: .3rem .65rem;
  font-family: var(--cfx-font-label);
  font-size: var(--cfx-fs-xs);
  color: var(--cfx-heading);
  background: transparent;
  border: 1px solid var(--cfx-border);
  border-radius: var(--cfx-radius-pill);
  cursor: pointer;
}
.cfx-readertools__btn:hover { border-color: var(--cfx-primary); color: var(--cfx-primary); }
.cfx-readertools__btn[aria-pressed="true"] {
  background: var(--cfx-primary);
  border-color: var(--cfx-primary);
  color: var(--cfx-on-primary);
}

/* Reading mode: strip everything that is not the article. */
.cfx-reading-mode .cfx-sidebar,
.cfx-reading-mode .cfx-ad,
.cfx-reading-mode .cfx-related,
.cfx-reading-mode .cfx-ticker,
.cfx-reading-mode .cfx-topbar,
.cfx-reading-mode .cfx-authorbox,
.cfx-reading-mode .cfx-comments,
.cfx-reading-mode .cfx-footer__body { display: none !important; }

.cfx-reading-mode .cfx-layout { display: block !important; }
.cfx-reading-mode .cfx-prose { max-width: 68ch; margin-inline: auto; }
.cfx-reading-mode .cfx-single__head { max-width: 68ch; margin-inline: auto; }

/* ---------- Author box ---------- */

.cfx-authorbox {
  display: flex;
  gap: 1.1rem;
  margin-block: 2.4rem;
  padding: 1.3rem;
  background: var(--cfx-surface);
  border-radius: var(--cfx-radius-card);
}
.cfx-authorbox__avatar { border-radius: 50%; flex: 0 0 auto; }
.cfx-authorbox__body { flex: 1 1 auto; min-width: 0; }
.cfx-authorbox__name { margin: 0 0 .4rem; font-size: var(--cfx-fs-1); }
.cfx-authorbox__name a { color: var(--cfx-heading); text-decoration: none; }
.cfx-authorbox__bio { margin: 0 0 .5rem; color: var(--cfx-muted); font-size: var(--cfx-fs-sm); max-width: 62ch; }
.cfx-authorbox__more { margin: 0; font-size: var(--cfx-fs-sm); }

/* ---------- Comments ---------- */

.cfx-comments { margin-top: 2.8rem; padding-top: 1.6rem; border-top: 1px solid var(--cfx-border); }
.cfx-comments__title { font-size: var(--cfx-fs-2); }
.cfx-comments__list, .cfx-comments__list .children { list-style: none; margin: 0; padding: 0; }
.cfx-comments__list .children { margin-left: 1.6rem; padding-left: 1rem; border-left: 1px solid var(--cfx-border); }
.cfx-comments__list .comment-body { padding: 1rem 0; border-bottom: 1px solid var(--cfx-border); }
.cfx-comments__list .comment-author { display: flex; align-items: center; gap: .6rem; font-family: var(--cfx-font-label); }
.cfx-comments__list .comment-author img { border-radius: 50%; }
.cfx-comments__list .comment-meta { font-size: var(--cfx-fs-xs); color: var(--cfx-muted); margin-bottom: .5rem; }
.cfx-comments .comment-respond { margin-top: 1.8rem; }
.cfx-comments .comment-form p { margin-bottom: .9rem; }
.cfx-comments__closed { color: var(--cfx-muted); }

/* ---------- Single tags ---------- */

.cfx-single__tags { margin-top: 1.8rem; }

/* ============================================================
   Post layouts
   ============================================================
   The masthead band spans the full container; the grid below it starts at the
   featured image, so the sidebar begins level with the image rather than level
   with the headline. That is the difference between a sidebar that looks bolted
   on and one that looks composed.
   ------------------------------------------------------------ */

.cfx-singletop { padding-top: .4rem; }
.cfx-singletop .cfx-breadcrumbs { margin-bottom: .8rem; }

/* The headline band is allowed the full container width. */
/*
 * The masthead takes the full container. No `max-width` here on purpose: the
 * headline and standfirst are meant to run the whole 1200px, which is what
 * separates this layout from `standard`.
 */
.cfx-single__head--masthead { max-width: none; padding-bottom: 1.1rem; }
.cfx-single__head--masthead .cfx-single__title { max-width: none; font-size: var(--cfx-fs-6); }
.cfx-single__head--masthead .cfx-single__standfirst {
  max-width: none;
  /* Slightly larger and looser than the standard standfirst: at 1200px the line
     is long, and extra leading is what keeps a long line trackable. */
  font-size: var(--cfx-fs-1);
  line-height: 1.55;
}
.cfx-single__head--masthead .cfx-meta,
.cfx-single__head--masthead .cfx-single__tools { max-width: none; }

/* Flush, so the featured image and the first sidebar block share a top edge. */
.cfx-singletop--masthead + .cfx-container .cfx-single__media,
.cfx-singletop--masthead + .cfx-container .cfx-sidebar__inner > *:first-child { margin-top: 0; }
.cfx-single--masthead > .cfx-single__media:first-child { margin-top: 0; }

/* ---------- Overlay ---------- */

/*
 * Below the overlay breakpoint the headline simply sits under the image. A
 * scrim can be made dark enough for any photograph, but on a narrow screen the
 * headline, standfirst and byline together cover most of the picture — at which
 * point the overlay is costing legibility and giving nothing back.
 */
.cfx-overlayhero .cfx-single__media { margin: 0; }
.cfx-overlayhero .cfx-single__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 52vh;
  object-fit: cover;
  border-radius: var(--cfx-radius-card);
}
.cfx-overlayhero__inner { padding-top: 1rem; }

@media (min-width: 783px) {
  /* Grid stacking rather than absolute positioning or negative margins: the
     image defines the height and the text and scrim are placed into the same
     cell, so nothing has to be nudged back into place. */
  .cfx-overlayhero {
    display: grid;
    border-radius: var(--cfx-radius-card);
    overflow: hidden;
    isolation: isolate;
  }
  .cfx-overlayhero > * { grid-area: 1 / 1; }
  .cfx-overlayhero .cfx-single__media img {
    aspect-ratio: 21 / 9;
    max-height: 62vh;
    border-radius: 0;
  }
  .cfx-overlayhero::after {
    content: "";
    grid-area: 1 / 1;
    /* A solid scrim, not a blend mode: blends behave differently over light and
       dark photographs and cannot guarantee contrast for the headline. */
    background: linear-gradient(to top, rgba(0, 0, 0, .84) 0%, rgba(0, 0, 0, .58) 38%, rgba(0, 0, 0, .14) 70%, transparent 100%);
  }
  .cfx-overlayhero__inner {
    z-index: 1;
    align-self: end;
    padding: clamp(1.2rem, 4vw, 2.6rem);
  }
  .cfx-overlayhero .cfx-single__title,
  .cfx-overlayhero .cfx-eyebrow,
  .cfx-overlayhero .cfx-meta,
  .cfx-overlayhero .cfx-meta a,
  .cfx-overlayhero .cfx-single__standfirst { color: #fff; }
  .cfx-overlayhero .cfx-single__standfirst { opacity: .92; max-width: 62ch; }
  .cfx-overlayhero .cfx-single__title { max-width: 24ch; }
}

/* ---------- Magazine ---------- */

.cfx-maghero { display: grid; gap: clamp(1.2rem, 3vw, 2.2rem); align-items: center; }
@media (min-width: 1025px) {
  .cfx-maghero { grid-template-columns: 1fr 1fr; }
  .cfx-maghero--flip .cfx-maghero__text { order: 2; }
}
.cfx-maghero__text { min-width: 0; }
.cfx-maghero__media { min-width: 0; }
.cfx-maghero__media .cfx-single__media { margin: 0; }
.cfx-maghero__media img { aspect-ratio: 4 / 3; max-height: 52vh; object-fit: cover; width: 100%; }
.cfx-maghero .cfx-single__title { font-size: var(--cfx-fs-5); }

/* ---------- Centred ---------- */

.cfx-layout--single { display: block; }
.cfx-single--centered { margin-inline: auto; max-width: 46rem; }
.cfx-single--centered .cfx-single__head { text-align: center; }
.cfx-single--centered .cfx-single__standfirst { margin-inline: auto; }
.cfx-single--centered .cfx-meta { justify-content: center; }
.cfx-single--centered .cfx-single__tools { justify-content: center; }
.cfx-single--centered .cfx-prose { max-width: none; }
.cfx-single--centered .cfx-breadcrumbs { text-align: center; }
.cfx-single--centered .cfx-breadcrumbs ol { justify-content: center; }

/* ---------- Sidebar blocks ---------- */

.cfx-widget__body > *:last-child { margin-bottom: 0; }

.cfx-sidelist { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.cfx-sidelist__item {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  padding: 0 0 .8rem;
  border-bottom: 1px solid var(--cfx-border);
}
.cfx-sidelist__item:last-child { border-bottom: 0; padding-bottom: 0; }
.cfx-sidelist__media { flex: 0 0 4.4rem; overflow: hidden; border-radius: calc(var(--cfx-radius-card) * .6); }
.cfx-sidelist__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.cfx-sidelist__body { min-width: 0; }
.cfx-sidelist__title {
  display: block;
  font-family: var(--cfx-font-heading);
  font-size: var(--cfx-fs-sm);
  font-weight: 600;
  line-height: 1.3;
  color: var(--cfx-heading);
  text-decoration: none;
}
.cfx-sidelist__title:hover { color: var(--cfx-primary); }
.cfx-sidelist__date { display: block; margin-top: .2rem; font-size: var(--cfx-fs-xs); color: var(--cfx-muted); }

.cfx-widget--topics .cfx-termbuttons { margin: 0; }
.cfx-widget--topics .cfx-termbuttons a { font-size: var(--cfx-fs-xs); padding: .3rem .65rem; }