/* BYGEARS homepage: rhythm through contrast. */
.bg-masthead { padding: var(--s6) var(--bg-gutter) 0; text-align: center; }
.bg-masthead__name { margin: 0; font-family: var(--f-mark); font-weight: 300; font-size: clamp(3.25rem, 13.4vw, 13.5rem); line-height: 1; padding-top: .04em; letter-spacing: .14em; padding-inline-start: .14em; white-space: nowrap; direction: ltr; }
.bg-masthead__name span[aria-hidden] { display: inline-block; }
.bg-masthead__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s4); margin-top: var(--s6); padding-block: var(--s3); border-top: var(--rule); font-family: var(--f-sans); font-size: var(--fs-small); color: var(--c-muted); text-align: start; }
.bg-masthead__meta p { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
	.bg-masthead__name span[aria-hidden] { animation: bg-mast var(--t-lead) var(--ease-reveal) backwards; }
	.bg-lead .bg-media__img { animation: bg-settle var(--t-lead) var(--ease-settle) both; }
}
@keyframes bg-mast { from { clip-path: inset(-30% 50% -30% 50%); } to { clip-path: inset(-30% -2% -30% -2%); } }
@keyframes bg-settle { from { transform: scale(1.04); } to { transform: none; } }

/* Lead story */
.bg-lead { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-inline: var(--bg-gutter); margin-top: var(--s6); }
.bg-lead__media { grid-column: 1 / -1; margin-inline: calc(-1 * var(--bg-gutter)); position: relative; }
@media (max-width: 767px) { .bg-lead--split .bg-media--lead { aspect-ratio: 5 / 4; } .bg-masthead__meta p { display: none; } }
.bg-lead__text { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s4); padding-top: var(--s6); }
.bg-lead__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-lead__title a { text-decoration: none; }
.bg-lead__title span { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.bg-lead__dek { margin: 0; font-size: var(--fs-dek); line-height: 1.4; color: var(--c-graphite); max-width: 34ch; }
@media (hover: hover) { .bg-lead:hover .bg-lead__title span { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--c-accent); text-underline-offset: .12em; } }
@media (min-width: 768px) {
	.bg-lead--split .bg-lead__media { grid-column: 4 / -1; grid-row: 1; margin-inline: 0 calc(-1 * var(--bg-gutter)); }
	.bg-lead--split .bg-lead__text { grid-column: 1 / 10; grid-row: 1; align-self: end; position: relative; z-index: 2; padding-block: var(--s16) 0; }
	.bg-lead--split .bg-lead__title span { background: var(--c-paper); padding-inline-end: .18em; }
	.bg-lead--split .bg-lead__dek, .bg-lead--split .bg-lead__text .bg-byline { background: var(--c-paper); padding-inline-end: var(--s6); }
	.bg-lead--split .bg-lead__text .bg-byline { padding-block-end: var(--s4); }
	.bg-lead--split .bg-lead__text .bg-card__labels { background: var(--c-paper); padding: var(--s2) var(--s4) var(--s1) 0; }
	[dir="rtl"] .bg-lead--split .bg-lead__text .bg-card__labels { padding: var(--s2) 0 var(--s1) var(--s4); }
}
@media (min-width: 1100px) {
	.bg-lead--split .bg-lead__media { grid-column: 5 / -1; }
	.bg-lead--split .bg-lead__media .bg-media { aspect-ratio: auto; height: clamp(460px, calc(100svh - 290px), 820px); }
	.bg-lead--split .bg-lead__text { grid-column: 1 / 9; }
}
.bg-lead--cinematic { display: block; padding: 0; margin-top: 0; }
.bg-lead--cinematic .bg-lead__media { margin: 0; }
.bg-lead--cinematic .bg-media { aspect-ratio: auto; height: calc(100svh - var(--header-h) - 48px); min-height: 520px; }
.bg-lead--cinematic .bg-lead__media::after, .bg-cine__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--c-veil) 0, var(--c-veil) 38%, rgba(32, 26, 22, 0) 82%); pointer-events: none; }
.bg-lead__video, .bg-cine__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bg-lead--cinematic .bg-lead__text { position: absolute; z-index: 2; inset-inline: var(--bg-gutter); bottom: var(--s12); max-width: 1100px; }

/* Beside the lead */
.bg-also { display: grid; gap: var(--s12) var(--gap); margin-top: var(--s16); }
.bg-also__b { display: grid; gap: var(--s12); align-content: start; }
@media (min-width: 768px) {
	.bg-also { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.bg-also__a { grid-column: 1 / 6; }
	.bg-also__b { grid-column: 7 / -1; }
}
@media (min-width: 1100px) { .bg-also { margin-top: var(--s24); } .bg-also__a { grid-column: 1 / 5; } .bg-also__b { grid-column: 6 / -1; grid-template-columns: 1fr 1fr; gap: var(--gap); } }

.bg-home-stream { margin-top: var(--s24); padding-top: var(--s6); border-top: var(--rule); }

/* Category spotlight */
.bg-spotlight { --cat: var(--cat-e, var(--c-accent)); display: grid; gap: var(--s8) var(--gap); margin-top: var(--s24); }
.bg-spotlight__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s4); padding-top: var(--s4); border-top: 2px solid var(--cat); }
.bg-spotlight__name { 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); color: var(--cat); }
.bg-spotlight__name a { text-decoration: none; }
.bg-spotlight__intro { margin: 0; font-size: var(--fs-card); line-height: 1.55; color: var(--c-graphite); max-width: 34ch; }
.bg-spotlight__more { display: grid; gap: var(--s8) var(--gap); align-content: start; }
@media (min-width: 768px) {
	.bg-spotlight { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.bg-spotlight__head { grid-column: 1 / -1; }
	.bg-spotlight__lead { grid-column: 1 / 8; }
	.bg-spotlight__more { grid-column: 8 / -1; }
}
@media (min-width: 1100px) {
	.bg-spotlight__head, .bg-spotlight__lead, .bg-spotlight__more { grid-row: 1; }
	.bg-spotlight--plain .bg-spotlight__head { grid-column: 1 / 4; }
	.bg-spotlight--plain .bg-spotlight__lead { grid-column: 4 / 10; }
	.bg-spotlight--plain .bg-spotlight__more { grid-column: 10 / -1; }
	.bg-spotlight--flip .bg-spotlight__more { grid-column: 1 / 4; }
	.bg-spotlight--flip .bg-spotlight__lead { grid-column: 4 / 10; }
	.bg-spotlight--flip .bg-spotlight__head { grid-column: 10 / -1; }
}
.bg-spotlight__more .bg-card--standard .bg-media { aspect-ratio: 16 / 9; }

/* Cinematic feature */
.bg-cine { position: relative; margin-top: var(--s32); padding-bottom: var(--s16); }
.bg-cine__media { position: relative; }
.bg-cine__text { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s4); margin-top: calc(-1 * var(--s16)); }
@media (min-width: 768px) { .bg-cine__text { margin-top: calc(-1 * var(--s32)); } }
.bg-cine__title { margin: 0; font-family: var(--f-display); font-weight: var(--w-display); font-size: calc(var(--fs-display) * .85); line-height: var(--lh-display); letter-spacing: var(--tr-display); max-width: 15ch; text-wrap: balance; }
.bg-cine__title a { text-decoration: none; }
.bg-cine__dek { margin: 0; font-size: var(--fs-dek); line-height: 1.4; color: var(--c-graphite); max-width: 40ch; }
@media (hover: hover) { .bg-cine:hover .bg-cine__title a { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--c-accent); } }

/* Two contrasting stories */
.bg-pair { display: grid; gap: var(--s16) var(--gap); margin-top: var(--s32); }
@media (min-width: 900px) { .bg-pair { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; } .bg-pair__a { grid-column: 1 / 8; } .bg-pair__b { grid-column: 9 / -1; } }

/* The journal */
.bg-journal { margin-top: var(--s32); }
.bg-journal__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s4); margin-bottom: var(--s8); }
.bg-journal__list { border-bottom: var(--rule); }
.bg-journal__peek { position: fixed; top: 0; left: 0; z-index: 30; width: 200px; aspect-ratio: 4 / 5; object-fit: cover; pointer-events: none; opacity: 0; transition: opacity var(--t-quick) var(--ease-quick); }
.bg-journal__peek.is-on { opacity: 1; }

/* Newsletter */
.bg-home-letter { margin-top: var(--s32); padding-block: var(--s16); border-block: var(--rule); }
.bg-newsletter--home { gap: var(--s8); }
.bg-newsletter--home .bg-newsletter__title { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); max-width: 16ch; }
@media (min-width: 900px) { .bg-newsletter--home { grid-template-columns: 1.4fr 1fr; align-items: end; } }