/* News posts, case studies and their index pages.
   Published to chargeqube.com/articles.css by the content editor on
   tools.fellten.com, which owns this file: edit it in /home/fellten/qube-news/
   templates/, not on the site, or the next publish will put it back.
   The rules came from the hand-built case studies, so news and case studies
   read as one publication. print.css (case studies only) builds on them. */

.fade-in { opacity: 1; }

:root { --measure: 1060px; }

/* ---- article ---- */
.article { background: var(--white); color: var(--darkest); padding: 56px 24px 0; }
.article__wrap { max-width: var(--measure); margin: 0 auto; }

.article__back { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(0,0,0,0.5); margin-bottom: 40px; }
.article__back:hover { color: var(--orange); }
.article__back svg { width: 13px; height: 13px; }

.article__kicker { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; font-size: 12px;
  letter-spacing: 1.8px; text-transform: uppercase; color: var(--orange); margin-bottom: 22px; }
.article__kicker .sep { color: rgba(0,0,0,0.22); }
.article__kicker .date { color: rgba(0,0,0,0.45); letter-spacing: 1.4px; }

.article h1 { font-size: clamp(32px, 4.6vw, 46px); font-weight: 400; line-height: 1.14; letter-spacing: -0.4px; margin: 0 0 24px; }

.article__stand { font-size: 21px; font-weight: 300; line-height: 1.6; color: rgba(0,0,0,0.72); margin: 0 0 32px; }

.article__byline { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: 14px; font-weight: 300;
  color: rgba(0,0,0,0.5); border-top: 1px solid rgba(0,0,0,0.1); border-bottom: 1px solid rgba(0,0,0,0.1); padding: 16px 0; }
.article__byline b { font-weight: 400; color: var(--darkest); }
.article__byline a { color: var(--darkest); border-bottom: 1px solid var(--orange); }
.article__byline a:hover { color: var(--orange); }
.article__byline .dot { color: rgba(0,0,0,0.25); }

.figure { margin: 44px auto; max-width: min(var(--measure), 100%); }
.figure .frame { display: block; overflow: hidden; background: var(--light-grey); aspect-ratio: 3 / 2; }
.figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.figure figcaption { max-width: var(--measure); margin: 12px auto 0; font-size: 13.5px; font-weight: 300;
  color: rgba(0,0,0,0.5); line-height: 1.55; }
.figure--portrait { max-width: 620px; }
.figure--portrait .frame { aspect-ratio: 3 / 4; }
.figure--natural { max-width: 720px; }
.figure--natural .frame { aspect-ratio: auto; }
.figure--natural img { height: auto; }
/* natural proportions at full column width, for a landscape photograph that
   is not 3:2 and would otherwise be trimmed to fit */
.figure--full { max-width: none; }
.figure--full .frame { aspect-ratio: auto; }
.figure--full img { height: auto; }

/* an uploaded video keeps its own proportions */
.figure--video-file .frame { aspect-ratio: auto; background: #000; }
.figure--video-file video { width: 100%; height: auto; display: block; }

/* in the PDF a video prints as its cover image, and a body video not at all */
.frame__print { display: none; }
@media print {
  .figure--video-file video, .figure--video iframe { display: none !important; }
  .frame__print { display: block !important; width: 100%; height: auto; }
  .figure--video .frame, .figure--video-file .frame { aspect-ratio: auto !important; background: none !important; }
  .figure--noprint { display: none !important; }
  /* print.css numbers every section; only posts set to numbered keep it */
  .body:not(.body--numbered) h2::before { content: none !important; display: none !important; }
  /* the main photo standing in as a cover is darkened for the white type.
     A filter, not an overlay: Chrome drops backgrounds when printing */
  .brochure-cover--photo .brochure-cover__shot { filter: brightness(0.42) saturate(0.85); }

  /* Page margins live in the article, not in @page: Chrome remembers the
     print dialog's Margins setting, and on "None" an @page margin vanishes
     and the text runs to the paper edge. Padding cloned onto every page
     fragment gives the same 19/18/24mm on every page whatever the dialog says. */
  .article { padding: 19mm 18mm 24mm !important;
    box-decoration-break: clone; -webkit-box-decoration-break: clone; }

  /* a full statement, at print sizes: the pull quote's rule, body-ish type,
     since a statement runs to several paragraphs */
  .statement { margin: 15pt 0 !important; padding: 3pt 0 3pt 15pt !important;
    border-left: 3pt solid #FF7A00 !important; border-top: 0 !important; border-bottom: 0 !important; }
  .statement__label { font-size: 7pt !important; letter-spacing: 1.6px; color: #A64B00 !important; margin: 0 0 7pt !important; }
  .statement blockquote { margin: 0 0 6pt !important; font-size: 11.5pt !important; line-height: 1.45 !important; color: #14141a !important; }
  .statement blockquote p { margin: 0 0 6pt !important; orphans: 2; widows: 2; }
  .statement__by { font-size: 8.5pt !important; color: #55555e !important; break-before: avoid; }
}
@media print {
  @page { margin: 0; }
}

/* video: same frame as a figure, at the player's own 16:9 */
.figure--video .frame { aspect-ratio: 16 / 9; background: #000; }
.figure--video iframe { width: 100%; height: 100%; border: 0; display: block; }

.body { font-size: 18.5px; font-weight: 300; line-height: 1.8; color: rgba(0,0,0,0.8); }
.body p { margin: 0 0 22px; }
.body h2 { font-size: clamp(23px, 2.8vw, 28px); font-weight: 400; color: var(--darkest); line-height: 1.25;
  margin: 52px 0 16px; letter-spacing: -0.2px; }
.body h3 { font-size: 18px; font-weight: 400; color: var(--darkest); margin: 34px 0 10px; }
.body strong { font-weight: 400; color: var(--darkest); }
.body em { font-style: italic; }
.body a.inline { color: var(--darkest); border-bottom: 1px solid var(--orange); }
.body a.inline:hover { color: var(--orange); }
.body ul { margin: 0 0 22px; padding: 0; list-style: none; }
.body ul li { position: relative; padding-left: 22px; margin-bottom: 11px; }
.body ul li::before { content: ""; position: absolute; left: 0; top: 11px; width: 7px; height: 1px; background: var(--orange); }

/* numbered sections, as the case study reports do. Opt-in per post. */
.body--numbered { counter-reset: sec; }
.body--numbered h2 { counter-increment: sec; }
.body--numbered h2::before {
  content: counter(sec, decimal-leading-zero);
  display: block; font-size: 30px; line-height: 1; letter-spacing: -0.5px;
  color: var(--orange); margin-bottom: 12px;
}

.pull { margin: 44px 0; padding: 4px 0 4px 26px; border-left: 3px solid var(--orange); }
.pull p { font-size: 21px; font-weight: 300; line-height: 1.5; color: var(--darkest); margin: 0 0 12px; }
.pull cite { font-size: 13.5px; font-style: normal; color: rgba(0,0,0,0.5); }

/* a full statement: the pull quote's orange rule, at body size so several
   paragraphs of it still read comfortably */
.statement { margin: 44px 0; padding: 4px 0 4px 26px; border-left: 3px solid var(--orange); }
.statement__label { font-size: 11.5px; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--orange); margin: 0 0 16px; }
.statement blockquote { margin: 0 0 18px; font-size: 19px; font-weight: 300; line-height: 1.65; color: var(--darkest); }
.statement blockquote p { margin: 0 0 14px; }
.statement blockquote p:last-child { margin-bottom: 0; }
.statement__by { font-size: 14px; font-weight: 300; color: rgba(0,0,0,0.55); }
.statement__by b { font-weight: 400; color: var(--darkest); }

.aside { border-top: 2px solid var(--darkest); border-bottom: 1px solid rgba(0,0,0,0.14); padding: 22px 0; margin: 44px 0; }
.aside h3 { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--orange); margin: 0 0 20px; font-weight: 400; }
.aside dl { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
@media (min-width: 620px) { .aside dl { grid-template-columns: 1fr 1fr; column-gap: 34px; } }
.aside .row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px dotted rgba(0,0,0,0.2); }
.aside dt { font-size: 14.5px; font-weight: 300; color: rgba(0,0,0,0.58); margin: 0; }
.aside dd { font-size: 14.5px; font-weight: 400; color: var(--darkest); margin: 0; text-align: right;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
/* two columns that mean something, e.g. what is running and what is next */
.aside__cols { display: grid; grid-template-columns: 1fr; gap: 30px; }
@media (min-width: 660px) {
  /* gap shorthand must not follow column-gap here: it resets it */
  .aside__cols { grid-template-columns: 1.3fr 1fr; gap: 0 40px; }
  .aside__col + .aside__col { padding-left: 40px; border-left: 1px solid rgba(0,0,0,0.12); }
}
.aside__colhead { font-size: 11.5px; letter-spacing: 1.8px; text-transform: uppercase;
  color: rgba(0,0,0,0.42); margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(0,0,0,0.16); }
.aside__col dl { display: block; }
.aside .note { font-size: 12.5px; font-weight: 300; color: rgba(0,0,0,0.45); line-height: 1.55; margin: 18px 0 0; }

.endnote { max-width: var(--measure); margin: 0 auto; border-top: 1px solid rgba(0,0,0,0.1); padding: 30px 0 90px; }
.endnote p { font-size: 15px; font-weight: 300; color: rgba(0,0,0,0.6); line-height: 1.7; margin: 0 0 18px; }
.endnote .links { display: flex; flex-wrap: wrap; gap: 24px; }
.endnote .links a { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--darkest);
  border-bottom: 1px solid var(--orange); padding-bottom: 3px; }
.endnote .links a:hover { color: var(--orange); }
.endnote .links a svg { width: 14px; height: 14px; }

/* ---- case study extras: the PDF report ---- */
/* brochure cover: revealed only by print.css */
.brochure-cover { display: none; }
@media print { .brochure-cover[hidden] { display: block !important; } }

/* download-as-PDF control: screen only, hidden by print.css */
.article__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 40px; }
.article__toolbar .article__back { margin-bottom: 0; }
.pdf-btn { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  font-size: 12.5px; letter-spacing: 0.3px; color: var(--darkest); background: none;
  border: 1px solid rgba(0,0,0,0.22); border-radius: 2px; padding: 7px 13px; cursor: pointer;
  font-family: var(--font-body); font-weight: 300; transition: border-color .2s, color .2s; }
.pdf-btn:hover { border-color: var(--orange); color: var(--orange); }
.pdf-btn svg { width: 14px; height: 14px; }

/* sources, closing the article as they close the report */
.print-sources { display: block; max-width: var(--measure); margin: 0 auto; padding-top: 22px;
  border-top: 1px solid rgba(0,0,0,0.12); }
.print-sources__label { display: block; font-size: 12px; letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--orange); margin-bottom: 12px; }
.print-sources__row { display: block; font-size: 17px; line-height: 1.9; }
.print-sources__row a { color: var(--darkest); border-bottom: 1px solid var(--orange); }
.print-sources__row a:hover { color: var(--orange); }

/* ---- index: the case studies reading list ---- */
.idx { background: var(--white); color: var(--darkest); padding: 60px 24px 90px; }
.idx__wrap { max-width: 1060px; margin: 0 auto; }
.idx__head { max-width: 44rem; margin: 0 0 8px; }
.idx__kicker { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--orange); margin: 0 0 16px; }
.idx__intro { font-size: 18.5px; font-weight: 300; line-height: 1.6; color: rgba(0,0,0,0.66); margin: 0; }
.idx__list { margin-top: 56px; border-top: 1px solid rgba(0,0,0,0.12); }
.idx__empty { padding: 34px 0; font-size: 16px; font-weight: 300; color: rgba(0,0,0,0.55); border-bottom: 1px solid rgba(0,0,0,0.12); }

.entry { display: grid; grid-template-columns: 1fr; gap: 22px; padding: 34px 0;
  border-bottom: 1px solid rgba(0,0,0,0.12); align-items: start; color: inherit; }
@media (min-width: 780px) { .entry { grid-template-columns: 300px 1fr; gap: 38px; } }
.entry__shot { overflow: hidden; background: var(--light-grey); aspect-ratio: 3 / 2; }
.entry__shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.entry:hover .entry__shot img { transform: scale(1.03); }
.entry__meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 11.5px;
  letter-spacing: 1.8px; text-transform: uppercase; color: var(--orange); margin-bottom: 13px; }
.entry__meta .sep { color: rgba(0,0,0,0.2); }
.entry__meta .date { color: rgba(0,0,0,0.42); letter-spacing: 1.3px; }
.entry h2 { font-size: clamp(21px, 2.4vw, 26px); font-weight: 400; line-height: 1.26; margin: 0 0 12px; letter-spacing: -0.2px; }
.entry:hover h2 { color: var(--orange); }
.entry p.dek { font-size: 16px; font-weight: 300; line-height: 1.66; color: rgba(0,0,0,0.64); margin: 0 0 16px; }
.entry__foot { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; font-size: 13px;
  font-weight: 300; color: rgba(0,0,0,0.5); }
.entry__foot b { font-weight: 400; color: var(--darkest); }
.entry__go { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--darkest);
  border-bottom: 1px solid var(--orange); padding-bottom: 3px; margin-top: 4px; }
.entry__go svg { width: 14px; height: 14px; }