/* BYGEARS archives: categories, topics, search, the Latest page, authors and the 404. */
.bg-opener { position: relative; margin-bottom: var(--s16); --cat: var(--cat-e, var(--c-ink)); }
.is-cinematic .bg-opener, .bg-opener.is-cinematic { --cat: var(--cat-c, var(--c-ink)); }
.bg-opener__text { width: min(100% - 2 * var(--bg-gutter), var(--container)); margin-inline: auto; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s4); padding-top: var(--s12); }
.bg-opener__title { margin: 0; font-family: var(--f-display); font-weight: var(--w-display); font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); text-wrap: balance; }
.bg-opener__intro { margin: 0; font-size: var(--fs-dek); line-height: 1.4; color: var(--c-graphite); max-width: 40ch; }
.bg-opener__story { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); margin: 0; font-family: var(--f-sans); font-size: var(--fs-ui); }
.bg-opener__story-label, .bg-opener__count { color: var(--c-muted); font-family: var(--f-sans); font-size: var(--fs-ui); margin: 0; }
.bg-opener__story a { text-decoration-color: var(--c-stone); }
.bg-opener__story a:hover { text-decoration-color: var(--c-accent); }

.bg-opener--photographic .bg-opener__title { position: relative; margin-top: calc(-.62 * var(--fs-display) * var(--lh-display)); padding: var(--s3) var(--s6) 0 0; background: var(--c-paper); color: var(--cat); }
[dir="rtl"] .bg-opener--photographic .bg-opener__title { padding: var(--s3) 0 0 var(--s6); }
.bg-opener--photographic .bg-opener__text { padding-top: 0; }

.bg-opener--cinematic { display: grid; }
.bg-opener--cinematic > * { grid-area: 1 / 1; }
.bg-opener--cinematic .bg-media { aspect-ratio: auto; height: min(78svh, 860px); min-height: 480px; }
.bg-opener--cinematic .bg-opener__media { position: relative; }
.bg-opener--cinematic .bg-opener__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-opener--cinematic .bg-opener__text { position: relative; z-index: 2; align-self: end; padding-bottom: var(--s12); }

.bg-opener--architectural { display: grid; gap: var(--s8); padding: var(--s12) var(--bg-gutter) 0; }
.bg-opener--architectural .bg-opener__text { width: auto; margin: 0; padding: var(--s4) 0 0; border-top: 2px solid var(--cat); order: -1; }
.bg-opener--architectural .bg-opener__title { color: var(--cat); }
@media (min-width: 900px) {
	.bg-opener--architectural { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
	.bg-opener--architectural .bg-opener__media { grid-column: 9 / -1; grid-row: 1; }
	.bg-opener--architectural .bg-opener__text { grid-column: 1 / 8; grid-row: 1; order: 0; }
}

.bg-opener--precise .bg-opener__text { align-items: center; text-align: center; padding-block: var(--s24) var(--s12); border-bottom: var(--rule); }
.bg-opener--precise .bg-opener__title { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: .01em; color: var(--cat); }
.bg-opener--precise .bg-opener__intro { font-size: var(--fs-card); max-width: 46ch; }

.bg-opener--typographic .bg-opener__text { padding-block: var(--s16) var(--s8); border-bottom: var(--rule); }
.bg-opener--typographic .bg-opener__title { font-size: clamp(4rem, 1.8rem + 11.5vw, 13rem); line-height: .9; color: var(--cat); }
html:lang(ar) .bg-opener--typographic .bg-opener__title { line-height: 1.3; font-size: clamp(3.5rem, 1.6rem + 9vw, 10rem); }

.bg-opener--search .bg-opener__title { font-size: var(--fs-h1); line-height: var(--lh-h1); }
.bg-opener--search .bg-searchform { width: min(100%, 900px); margin-top: var(--s4); }

/* Stream */
.bg-stream__open { display: grid; gap: var(--s12) var(--gap); margin-bottom: var(--s16); padding-bottom: var(--s16); border-bottom: var(--rule); }
@media (min-width: 900px) { .bg-stream__open { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; } .bg-stream__open > :first-child { grid-column: 1 / 8; } .bg-stream__open > :last-child { grid-column: 9 / -1; } }
.bg-stream--list { display: block; border-bottom: var(--rule); }

/* Author */
.bg-author { display: grid; gap: var(--s8); padding-block: var(--s12) var(--s16); margin-bottom: var(--s16); border-bottom: var(--rule); }
@media (min-width: 768px) { .bg-author { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s12); align-items: end; } }
.bg-author__media { max-width: 380px; }
.bg-author__initial { display: grid; place-items: center; aspect-ratio: 4 / 5; background: var(--c-sheet); border: var(--rule); font-family: var(--f-display); font-weight: 300; font-size: clamp(6rem, 4rem + 8vw, 12rem); line-height: 1; }
.bg-author__role, .bg-author__count { margin: 0; font-family: var(--f-sans); font-size: var(--fs-small); color: var(--c-muted); }
.bg-author__name { margin: var(--s2) 0 var(--s6); font-family: var(--f-display); font-weight: var(--w-display); font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); }
.bg-author__bio { margin: 0 0 var(--s6); font-size: var(--fs-dek); line-height: 1.45; color: var(--c-graphite); max-width: 44ch; }
.bg-author__links { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); margin: 0 0 var(--s4); padding: 0; }
.bg-author__links a { font-family: var(--f-sans); font-size: var(--fs-ui); text-decoration-color: var(--c-stone); }

/* 404 */
.bg-404 { display: grid; justify-items: start; gap: var(--s6); padding-block: var(--s16) var(--s12); }
.bg-404__number { position: relative; margin: 0; font-family: var(--f-mark); font-weight: 300; font-size: clamp(7rem, 4rem + 16vw, 20rem); line-height: .85; letter-spacing: .04em; direction: ltr; }
.bg-404__number [lang="ar"] { position: absolute; left: .7em; top: .42em; font-family: var(--wp--preset--font-family--arabic-display, serif); font-size: .6em; line-height: 1; color: var(--c-accent); }
.bg-404__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: 16ch; }
.bg-404__text { margin: 0; color: var(--c-graphite); max-width: 46ch; }
.bg-404 .bg-searchform { width: min(100%, 640px); }
.bg-404 .bg-searchform__input { font-size: var(--fs-h2); }
.bg-404__latest { margin-top: var(--s16); }
.bg-404__latest .bg-section-title { margin-bottom: var(--s8); }