/* BYGEARS stories and pages. Reading comes first. */
.bg-article-head { position: relative; }
.bg-article-head__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s4); }
.bg-article-head__title { margin: 0; font-family: var(--f-display); font-weight: var(--w-display); font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); max-width: 18ch; text-wrap: balance; }
html:lang(ar) .bg-article-head__title { max-width: 22ch; }
.bg-article-head__dek { margin: 0; font-size: var(--fs-dek); line-height: 1.4; color: var(--c-graphite); max-width: 40ch; }
.bg-article-head .bg-byline { margin-top: var(--s2); }
.bg-article-head__figure { margin: 0; }
.bg-article-head__figure .bg-media__img { animation: none; }

.bg-article-head--split, .bg-article-head--portrait { display: grid; gap: var(--s8); padding: var(--s8) var(--bg-gutter) 0; }
.bg-article-head--split .bg-article-head__figure, .bg-article-head--portrait .bg-article-head__figure { margin-inline: calc(-1 * var(--bg-gutter)); }
.bg-article-head--split .bg-caption, .bg-article-head--portrait .bg-caption, .bg-article-head--full .bg-caption, .bg-article-head--cinematic .bg-caption { padding-inline: var(--bg-gutter); }
@media (min-width: 900px) {
	.bg-article-head--split, .bg-article-head--portrait { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; padding-top: var(--s6); }
	.bg-article-head--split .bg-article-head__text { grid-column: 1 / 7; grid-row: 1; padding-block: var(--s12); }
	.bg-article-head--split .bg-article-head__figure { grid-column: 7 / -1; grid-row: 1; margin-inline: 0 calc(-1 * var(--bg-gutter)); }
	.bg-article-head--split .bg-caption { padding-inline: 0 var(--bg-gutter); }
	.bg-article-head--split .bg-media { aspect-ratio: auto; height: min(84vh, 920px); }
	.bg-article-head--portrait .bg-article-head__figure { grid-column: 1 / 6; grid-row: 1; margin: 0; }
	.bg-article-head--portrait .bg-caption { padding-inline: 0; }
	.bg-article-head--portrait .bg-article-head__text { grid-column: 7 / -1; grid-row: 1; }
	.bg-article-head--split .bg-article-head__title, .bg-article-head--portrait .bg-article-head__title { font-size: calc(var(--fs-display) * .72); }
}
.bg-article-head--full .bg-article-head__text, .bg-article-head--text .bg-article-head__text { width: min(100% - 2 * var(--bg-gutter), var(--wide)); margin-inline: auto; padding-top: var(--s16); }
.bg-article-head--full .bg-article-head__title, .bg-article-head--text .bg-article-head__title, .bg-article-head--cinematic .bg-article-head__title { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); max-width: 15ch; }
.bg-article-head--full .bg-article-head__figure { margin-top: var(--s12); }
.bg-article-head--text .bg-article-head__text { padding-bottom: var(--s8); border-bottom: var(--rule); }
.bg-article-head--cinematic .bg-media { aspect-ratio: auto; height: calc(100svh - var(--header-h)); min-height: 560px; }
.bg-article-head--cinematic .bg-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--c-veil) 0, var(--c-veil) 40%, rgba(32, 26, 22, 0) 85%); }
.bg-article-head__video { position: absolute; inset: 0; width: 100%; height: calc(100svh - var(--header-h)); min-height: 560px; object-fit: cover; }
.bg-article-head--cinematic .bg-article-head__text { position: absolute; z-index: 2; inset-inline: 0; top: 0; height: calc(100svh - var(--header-h)); min-height: 560px; justify-content: flex-end; padding: 0 var(--bg-gutter) var(--s16); }
.bg-article-head--cinematic .bg-article-head__figure { position: relative; }

/* Body */
.bg-article__body { padding-block: var(--s16) 0; counter-reset: chapter; }
.bg-article--page .bg-article__body { padding-top: var(--s8); }
.bg-page-head { padding-block: var(--s16) var(--s4); }
.bg-page-head__title { margin: 0; font-family: var(--f-display); font-weight: var(--w-display); font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); max-width: 18ch; }
.bg-article__body a { text-decoration-color: var(--c-stone); }
.bg-article__body a:hover { text-decoration-color: var(--c-accent); }
.bg-article__body :where(ul, ol) { padding-inline-start: 1.25em; }
.bg-article__body :where(h2, h3, h4) { font-family: var(--f-display); font-weight: var(--w-head); letter-spacing: var(--tr-h3); text-wrap: balance; margin-top: var(--s12); }
.bg-article__body h2 { font-size: calc(var(--fs-h2) * .85); line-height: var(--lh-h2); }
.bg-article__body h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.bg-article__body h4 { font-family: var(--f-sans); font-size: var(--fs-ui); font-weight: var(--w-ui); letter-spacing: 0; }
@supports (initial-letter: 3) {
	html:not(:lang(ar)) .bg-article:not(.bg-article--page) .bg-article__body > p:first-of-type::first-letter { initial-letter: 3; font-family: var(--f-display); font-weight: 300; margin-inline-end: .1em; color: var(--c-ink); }
}
.bg-article__body .is-style-standfirst { font-size: var(--fs-dek); line-height: 1.45; }
.bg-article__body .is-style-question { margin-top: var(--s8); font-family: var(--f-sans); font-weight: var(--w-ui); font-size: var(--fs-card); line-height: 1.55; color: var(--c-ink); }
.bg-article__body blockquote:not(.wp-block-pullquote blockquote) { margin-inline: 0; padding-inline-start: var(--s6); border-inline-start: 1.5px solid var(--c-ink); }
.bg-article__body cite { display: block; margin-top: var(--s3); font-family: var(--f-sans); font-size: var(--fs-small); font-style: normal; color: var(--c-muted); }
.bg-article__body .wp-block-pullquote { margin-block: var(--s16) !important; padding: 0; border: 0; text-align: start; }
.bg-article__body .wp-block-pullquote:not(.alignwide):not(.alignfull) { max-width: min(100%, 860px) !important; }
.bg-article__body .wp-block-pullquote blockquote { margin: 0; }
.bg-article__body .wp-block-pullquote blockquote::before { content: ""; display: block; width: 48px; height: 2px; margin-bottom: var(--s6); background: var(--c-accent); }
.bg-article__body .wp-block-pullquote p { margin: 0; font-family: var(--f-display); font-weight: var(--w-display); font-size: var(--fs-quote); line-height: 1.15; letter-spacing: var(--tr-h2); text-wrap: balance; }
html:lang(ar) .bg-article__body .wp-block-pullquote p { line-height: 1.55; }
.bg-article__body .wp-block-pullquote p::before { content: open-quote; }
.bg-article__body .wp-block-pullquote p::after { content: close-quote; }
.bg-article__body :where(.wp-block-image, .wp-block-gallery, .bg-video) { margin-block: var(--s12); }
.bg-article__body .wp-block-image img { width: 100%; height: auto; }
.bg-article__body .wp-element-caption, .bg-article__body .blocks-gallery-caption { margin-top: var(--s3); font-family: var(--f-sans); font-size: var(--fs-small); line-height: 1.5; color: var(--c-muted); text-align: start; }
.bg-article__body .alignfull .wp-element-caption, .bg-article__body .alignfull .bg-video__caption { padding-inline: var(--bg-gutter); }
.bg-article__body .wp-block-gallery.has-nested-images { gap: var(--gap); }
.bg-article__body .wp-block-gallery.has-nested-images figure.wp-block-image figcaption { display: none; }
.bg-article__body .wp-block-separator { border: 0; border-top: var(--rule); width: 120px; margin-block: var(--s12) !important; }
.bg-article__body .wp-block-separator.is-style-pause { border: 0; width: auto; text-align: center; height: auto; }
.bg-article__body .wp-block-separator.is-style-pause::before { content: ""; display: inline-block; width: 5px; height: 5px; background: var(--c-ink); transform: rotate(45deg); }
.bg-article__body table { width: 100%; border-collapse: collapse; font-family: var(--f-sans); font-size: var(--fs-small); }
.bg-article__body th, .bg-article__body td { padding: var(--s2) var(--s3); border-bottom: var(--rule); text-align: start; }

/* Chapters */
.bg-chapter { counter-increment: chapter; margin-block: var(--s24) var(--s6) !important; padding-top: var(--s6); border-top: var(--rule); }
.bg-chapter__number { display: block; margin-bottom: var(--s3); font-family: var(--f-sans); font-size: var(--fs-small); color: var(--c-accent); font-variant-numeric: lining-nums; }
.bg-chapter__number::before { content: counter(chapter, decimal-leading-zero); }
.bg-chapter__title { margin: 0 !important; font-family: var(--f-display); font-weight: var(--w-display); font-size: var(--fs-h1) !important; line-height: var(--lh-h1) !important; letter-spacing: var(--tr-h1); }
.bg-chapter__kicker { margin: var(--s3) 0 0; font-size: var(--fs-dek); color: var(--c-graphite); }
.bg-chapters { position: fixed; inset-inline-start: var(--s6); top: 50%; z-index: 20; display: none; width: 210px; transform: translateY(-50%); padding: var(--s4); background: var(--c-paper); border: var(--rule); font-family: var(--f-sans); font-size: var(--fs-small); line-height: 1.4; }
@media (min-width: 1360px) { .bg-chapters.is-visible { display: block; } }
.bg-chapters__title { margin: 0 0 var(--s3); color: var(--c-muted); }
.bg-chapters ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.bg-chapters a { display: grid; grid-template-columns: 2rem 1fr; color: var(--c-muted); text-decoration: none; }
.bg-chapters a span { color: var(--c-stone); font-variant-numeric: lining-nums tabular-nums; }
.bg-chapters a:hover, .bg-chapters a[aria-current="true"] { color: var(--c-ink); }
.bg-chapters a[aria-current="true"] span { color: var(--c-accent); }

/* Close */
.bg-article-foot { margin-top: var(--s16); }
.bg-article-foot__meta { width: min(100% - 2 * var(--bg-gutter), var(--measure)); margin-inline: auto; display: grid; gap: var(--s8); padding-top: var(--s8); border-top: var(--rule); }
.bg-filed__label, .bg-share__label { margin: 0 0 var(--s2); font-family: var(--f-sans); font-size: var(--fs-small); color: var(--c-muted); }
.bg-filed__list, .bg-share__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.bg-filed__list a, .bg-share__list a, .bg-share__list button { font-family: var(--f-sans); font-size: var(--fs-ui); text-decoration: underline; text-decoration-color: var(--c-stone); text-underline-offset: .3em; }
.bg-filed__list a:hover, .bg-share__list a:hover, .bg-share__list button:hover { text-decoration-color: var(--c-accent); }
.bg-share__list button[data-done] { text-decoration-color: var(--c-accent); }
.bg-related { margin-top: var(--s24); }
.bg-next { display: grid; margin-top: var(--s24); text-decoration: none; background: var(--c-sheet); border-block: var(--rule); }
@media (min-width: 768px) { .bg-next { grid-template-columns: 1fr 1fr; } .bg-next__media { aspect-ratio: auto !important; height: 100%; min-height: 440px; } }
.bg-next__text { display: flex; flex-direction: column; justify-content: center; gap: var(--s3); padding: var(--s12) var(--bg-gutter); }
.bg-next__label { font-family: var(--f-sans); font-size: var(--fs-small); color: var(--c-muted); }
.bg-next__title { font-family: var(--f-display); font-weight: var(--w-display); font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); text-wrap: balance; }
.bg-next__dek { font-size: var(--fs-card); line-height: 1.5; color: var(--c-graphite); max-width: 40ch; }
@media (hover: hover) { .bg-next:hover .bg-next__title { text-decoration: underline; text-decoration-thickness: 1.5px; text-decoration-color: var(--c-accent); } }
.bg-article + * .bg-footer, .bg-article ~ .bg-footer { margin-top: 0; }