/* Daily Rider Community 1.9.7: what the plugin's own pages (legal, search) share with the magazine's pages.
   Measured from the live category pages: the theme's container (1290px, 90% on smaller screens), a black title
   band 60px top and bottom with a 35px bold title and 12px capitals for the breadcrumbs, then a main column and a
   348px sidebar (27%, 4% apart), white cards with 30-40px of room, 12px capitals for the small print. Fonts and
   colours are the theme's own, so light and dark mode both hold. */

.drc-wrap { width: var(--theme-container-width, 90vw); max-width: var(--theme-normal-container-max-width, 1290px); margin-right: auto; margin-left: auto; }
.drc-wrap *, .drc-wrap *::before, .drc-wrap *::after { box-sizing: border-box; }

/* The title band. The photo (Jean's pick: the V-Max at the yellow bridge) sits to the right and fades into the
   black; on smaller screens it lies under the words, darkened so they stay easy to read. */
.drc-band { position: relative; isolation: isolate; overflow: hidden; padding: 60px 0; background: #000; color: #fff; }
.drc-band::before { position: absolute; top: 0; right: 0; bottom: 0; z-index: -1; width: min(60%, 820px); background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), url(hero-vmax.webp) 50% 62% / cover no-repeat; content: ""; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 45%); mask-image: linear-gradient(90deg, transparent 0, #000 45%); }
.drc-band__title { margin: 0; color: #fff; font-size: 35px; font-weight: 700; line-height: 1.5; letter-spacing: normal; text-transform: none; overflow-wrap: anywhere; }
.drc-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; margin: 4px 0 0; padding: 0; color: rgba(255, 255, 255, .66); font-size: 12px; font-weight: 600; line-height: 21px; list-style: none; text-transform: uppercase; }
.drc-crumbs li { display: inline-flex; align-items: center; margin: 0; }
.drc-crumbs li + li::before { display: inline-block; width: 5px; height: 5px; margin: 0 10px 0 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; content: ""; transform: rotate(-45deg); }
.drc-crumbs a { color: inherit !important; text-decoration: none !important; transition: color .15s ease; }
.drc-crumbs a:hover { color: #fff !important; }

/* Main column and sidebar */
.drc-cols { display: grid; grid-template-columns: minmax(0, 1fr) 27%; column-gap: 4%; align-items: start; padding: 60px 0 80px; }
.drc-cols > .drc-main { grid-column: 1; grid-row: 1; min-width: 0; }
.drc-cols > .drc-aside { grid-column: 2; grid-row: 1; align-self: stretch; min-width: 0; }
.drc-card { padding: 40px; background: var(--theme-palette-color-8, #fff); }
.drc-small { margin: 0; color: var(--theme-palette-color-3, #5e5e5e); font-size: 12px; font-weight: 600; line-height: 1.6; text-transform: uppercase; }
.drc-small .drc-sep { margin: 0 8px; }
.drc-widget + .drc-widget, .drc-site-widgets { margin-top: 40px; }
.drc-site-widgets .ct-widget:not(:last-child) { margin-bottom: var(--sidebar-widgets-spacing, 40px); }
.drc-widget__title { margin: 0 0 15px; color: var(--theme-palette-color-4, #000); font-size: 18px; font-weight: 700; line-height: 1.5; }

@media (max-width: 999.98px) {
	.drc-cols { grid-template-columns: minmax(0, 1fr); padding: 30px 0 60px; }
	.drc-cols > .drc-main, .drc-cols > .drc-aside { grid-column: auto; grid-row: auto; }
	.drc-site-widgets { display: none; } /* as the theme hides its sidebar on tablets and phones */
	.drc-aside .ct-sidebar[data-sticky] { position: static; }
	.drc-band::before { width: 100%; background: linear-gradient(90deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .72) 100%), url(hero-vmax.webp) 72% 60% / cover no-repeat; -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 689.98px) {
	.drc-band { padding: 40px 0; }
	.drc-band__title { font-size: 28px; line-height: 1.35; }
	.drc-card { padding: 24px 20px; }
}
@media print {
	.drc-band { padding: 0 0 12px; background: none; color: #000; }
	.drc-band::before, .drc-crumbs, .drc-aside { display: none !important; }
	.drc-band__title { color: #000; }
	.drc-cols { display: block; padding-top: 12px; }
	.drc-card { padding: 0; }
}