/**
 * The issues index.
 *
 * Proportions and colours are taken from the archive design. As with the
 * line-up, every value is written as the theme's own custom property with the
 * design's measurement as the fallback, so the page follows the site if the
 * palette moves and still looks right without it.
 *
 * Every selector is scoped under .mdose-arch. Nothing here can reach the rest
 * of the page.
 */
.mdose-arch{
	margin:0 0 clamp(28px,4vw,40px);
	/* The listing is dropped into whatever column the page gives it — full
	   width on one template, beside a sidebar on another. What decides how
	   many editions fit on a row is that column, not the window, so the
	   breakpoints below are asked about this element rather than the screen.
	   The viewport queries are kept as a fallback for browsers without
	   container queries, and only ever narrow the grid. */
	container-type:inline-size;
}

/* ---- the page frame ----
   The same measurements the theme's own wide templates use (All Brands,
   Advertise), so the listing lines up with every other page rather than
   inventing a width of its own. */
.mdose-page__inner{
	max-width:var(--wrap,1480px);
	margin:0 auto;
	padding:clamp(28px,5vw,52px) var(--gutter,clamp(20px,5vw,56px)) 72px;
}

/* ---- the opening band ---- */
.mdose-arch__hero{
	/* Words on the left, the signup on the right. Stacked, the band was the
	   height of both added together; side by side it is the height of the
	   taller one. */
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(300px,460px);
	align-items:center;
	gap:clamp(20px,4vw,56px);
	margin:0 0 clamp(26px,3.6vw,38px);
	padding:clamp(24px,3vw,36px) clamp(22px,3vw,34px);
	border-radius:14px;
	background:
		radial-gradient(680px 420px at 88% -8%,var(--accent-soft,#E9EDFE) 0%,rgba(233,237,254,0) 70%),
		radial-gradient(520px 360px at -6% 90%,#FDECF5 0%,rgba(253,236,245,0) 70%),
		var(--paper-2,#F5F8FF);
}

.mdose-arch__title{
	margin:0 0 12px;
	font-family:var(--body,'PT Serif',Georgia,serif);
	font-size:clamp(30px,4.4vw,48px);
	font-weight:700;
	line-height:1.1;
	color:var(--heading-color,#202729);
	text-wrap:balance;
}

.mdose-arch__intro{
	min-width:0;
}

.mdose-arch__side{
	min-width:0;
	padding:20px;
	border:1px solid var(--line,#E3E9F5);
	border-radius:12px;
	background:var(--paper,#fff);
	box-shadow:0 2px 10px rgba(52,88,250,.07);
}

.mdose-arch__blurb{
	margin:0 0 14px;
	max-width:54ch;
	font-size:16px;
	line-height:1.6;
	color:var(--muted,#5B6478);
	text-wrap:pretty;
}

/* Wide enough for the field and the button to sit on one line. At 480px the
   button was left with so little room that its label broke across two lines
   and the button grew tall to match. */
.mdose-arch__form{
	margin:0;
}

/* The theme spaces the embed for a section standing on its own. Inside the
   band that spacing is the band's. Spacing only — as on the issue page, the
   provider's own look is left alone. */
.mdose-arch__form .mb-esp-form,
.mdose-arch__form .mb-esp--embed,
.mdose-arch__form > div[class*="omnisend"],
.mdose-arch__form .mb-esp--embed > div[class*="omnisend"]{
	margin-block:0;
}

.mdose-arch__form > :last-child,
.mdose-arch__form .mb-esp--embed > :last-child{
	margin-bottom:0;
}

/* A submit button is as wide as its label, and its label stays on one line.
   Nothing else about it is touched. */
.mdose-arch__form button,
.mdose-arch__form input[type="submit"]{
	width:auto;
	min-width:0;
	white-space:nowrap;
}

.mdose-arch__form form{
	align-items:center;
}

.mdose-arch__stats{
	display:flex;
	flex-wrap:wrap;
	gap:6px 10px;
	margin:0;
	font-size:12.5px;
	font-weight:600;
	color:var(--faint,#8891A8);
}

/* A separator drawn rather than typed, so it is never read aloud. */
.mdose-arch__stats span + span::before{
	content:"";
	display:inline-block;
	width:3px;
	height:3px;
	margin-right:10px;
	border-radius:50%;
	background:currentColor;
	vertical-align:middle;
}

/* ---- the eyebrow row ---- */
.mdose-arch__head{
	display:flex;
	align-items:center;
	gap:12px;
	margin-bottom:14px;
}

.mdose-arch__eyebrow{
	font-size:11.5px;
	font-weight:700;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--muted,#5B6478);
	white-space:nowrap;
}

.mdose-arch__rule{
	flex:1;
	height:1px;
	background:var(--line,#E3E9F5);
}

/* ---- the latest edition ---- */
.mdose-feat{
	display:grid;
	grid-template-columns:minmax(0,52fr) minmax(0,48fr);
	align-items:stretch;
	margin:0 0 clamp(26px,3.4vw,38px);
	border:1px solid var(--line,#E3E9F5);
	border-radius:10px;
	overflow:hidden;
	background:var(--paper,#fff);
	box-shadow:0 2px 10px rgba(52,88,250,.07);
}

.mdose-feat__media{
	position:relative;
	display:block;
	min-height:260px;
	background:var(--accent-soft,#E9EDFE);
	overflow:hidden;
}

.mdose-feat__media > img{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

.mdose-feat__new{
	position:absolute;
	top:14px;
	left:14px;
	z-index:1;
	padding:6px 12px;
	border-radius:999px;
	background:var(--data,#ED4A9B);
	color:#fff;
	font-size:11.5px;
	font-weight:700;
	letter-spacing:.06em;
	text-transform:uppercase;
	/* The badge sits on top of the link; it must not take the click. */
	pointer-events:none;
}

.mdose-feat__body{
	display:flex;
	flex-direction:column;
	padding:clamp(20px,2.6vw,30px);
}

.mdose-feat__meta{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:4px 8px;
	margin:0 0 10px;
	font-size:12.5px;
	font-weight:600;
	color:var(--accent,#3458FA);
}

.mdose-feat__meta time,
.mdose-feat__meta span:not(.mdose-feat__no){
	color:var(--faint,#8891A8);
}

.mdose-feat__meta > * + *::before{
	content:"·";
	margin-right:8px;
	color:var(--faint,#8891A8);
}

.mdose-feat__title{
	margin:0 0 14px;
	font-family:var(--body,'PT Serif',Georgia,serif);
	font-size:clamp(21px,2.6vw,28px);
	font-weight:700;
	line-height:1.22;
	color:var(--heading-color,#202729);
	text-wrap:pretty;
}

.mdose-feat__foot{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	margin-top:auto;
	padding-top:16px;
}

.mdose-feat__go{
	font-size:13.5px;
	font-weight:700;
	color:var(--accent,#3458FA);
	white-space:nowrap;
}

.mdose-tag{
	display:inline-block;
	padding:4px 10px;
	border-radius:999px;
	background:var(--accent-soft,#E9EDFE);
	color:var(--accent,#3458FA);
	font-size:11.5px;
	font-weight:700;
}

/* ---- an issue with no picture of its own ----
   Shown as the stories inside it. The mosaic fills whatever frame it is put
   in, the wide featured card or a grid card alike. */
.mdose-mosaic{
	position:absolute;
	inset:0;
	display:grid;
	gap:2px;
	background:var(--paper,#fff);
}

.mdose-mosaic__tile{
	position:relative;
	display:block;
	min-width:0;
	min-height:0;
	overflow:hidden;
	background:var(--accent-soft,#E9EDFE);
}

.mdose-mosaic__tile img{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

.mdose-mosaic--1{grid-template-columns:1fr}
.mdose-mosaic--2{grid-template-columns:1fr 1fr}

/* The lead story large on the left, the other two stacked on the right. */
.mdose-mosaic--3{
	grid-template-columns:1fr 1fr;
	grid-template-rows:1fr 1fr;
}

.mdose-mosaic--3 .mdose-mosaic__tile:first-child{
	grid-row:1 / span 2;
}

.mdose-mosaic--4{
	grid-template-columns:1fr 1fr;
	grid-template-rows:1fr 1fr;
}

/* ---- the numbered stories on a card ---- */
.mdose-stories{
	margin:0 0 4px;
	padding:0;
	list-style:none;
}

.mdose-stories__row{
	display:flex;
	gap:8px;
	margin:0 0 6px;
	font-size:13.5px;
	line-height:1.45;
	color:var(--muted,#5B6478);
}

.mdose-stories__no{
	flex:none;
	font-weight:700;
	color:var(--data,#ED4A9B);
	font-variant-numeric:tabular-nums;
}

/* ---- the all-editions bar ---- */
.mdose-arch__bar{
	display:flex;
	flex-wrap:wrap;
	align-items:baseline;
	justify-content:space-between;
	gap:8px 16px;
	margin-bottom:14px;
}

.mdose-arch__h2{
	margin:0;
	font-family:var(--body,'PT Serif',Georgia,serif);
	font-size:clamp(21px,2.4vw,26px);
	font-weight:700;
	color:var(--heading-color,#202729);
}

.mdose-arch__count{
	font-size:12.5px;
	color:var(--faint,#8891A8);
}

/* ---- the topic filters ---- */
.mdose-filters{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin-bottom:18px;
}

.mdose-chip{
	display:inline-flex;
	align-items:center;
	gap:7px;
	padding:8px 14px;
	border:1px solid var(--line-strong,#D8E1FF);
	border-radius:999px;
	background:var(--paper,#fff);
	color:var(--ink,#131B2E);
	font:inherit;
	font-size:13px;
	font-weight:600;
	line-height:1;
	cursor:pointer;
	transition:border-color .16s,background-color .16s,color .16s;
}

.mdose-chip:hover{
	border-color:var(--accent,#3458FA);
	color:var(--accent,#3458FA);
}

.mdose-chip__n{
	font-size:11.5px;
	font-weight:700;
	color:var(--faint,#8891A8);
}

.mdose-chip.is-on{
	border-color:var(--accent,#3458FA);
	background:var(--accent,#3458FA);
	color:#fff;
}

.mdose-chip.is-on .mdose-chip__n{
	color:rgba(255,255,255,.75);
}

.mdose-chip:focus-visible{
	outline:2px solid var(--accent,#3458FA);
	outline-offset:2px;
}

/* ---- the grid of past editions ----

   Sized by the card rather than by a column count. The design draws a 320px
   card, and the listing now runs the full page width, so a fixed three
   across would stretch each card to 455px on a wide screen and squash it on
   a narrow one. A 280px floor keeps the card near the size it was drawn at
   and lets the number per row follow the room available: four across the
   full width, three in a 996px column exactly as the design has it, two on a
   tablet, one on a phone.

   auto-fit, not auto-fill: with only two editions published the tracks
   collapse rather than leaving empty cells beside them. (The issue page's
   line-up uses a fixed count instead, because the lead card spans the row
   there and a track count it does not control would strand a cell.) */
.mdose-cards{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
	gap:18px;
}

.mdose-ed{
	display:flex;
	flex-direction:column;
	border:1px solid var(--line,#E3E9F5);
	border-radius:10px;
	overflow:hidden;
	background:var(--paper,#fff);
	box-shadow:0 2px 10px rgba(52,88,250,.07);
	transition:box-shadow .2s ease,transform .2s ease;
}

.mdose-ed:hover{
	box-shadow:0 12px 28px -8px rgba(52,88,250,.24);
	transform:translateY(-2px);
}

/* Hidden by the filter or still behind "load more". display:none rather than
   visibility, so a hidden card is out of the grid and out of the tab order
   instead of leaving a hole. */
.mdose-ed.is-hidden{
	display:none;
}

.mdose-ed__media{
	position:relative;
	display:block;
	aspect-ratio:16/9;
	background:var(--accent-soft,#E9EDFE);
	overflow:hidden;
}

.mdose-ed__media > img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

.mdose-ed__no{
	position:absolute;
	top:10px;
	left:10px;
	padding:3px 8px;
	border-radius:6px;
	background:rgba(19,27,46,.78);
	color:#fff;
	font-size:10.5px;
	font-weight:700;
	font-variant-numeric:tabular-nums;
	pointer-events:none;
}

.mdose-ed__body{
	display:flex;
	flex-direction:column;
	flex:1;
	padding:16px 18px 18px;
}

.mdose-ed__meta{
	margin:0 0 8px;
	font-size:11.5px;
	font-weight:600;
	color:var(--accent,#3458FA);
}

.mdose-ed__title{
	margin:0 0 12px;
	font-family:var(--body,'PT Serif',Georgia,serif);
	font-size:18px;
	font-weight:700;
	line-height:1.3;
	color:var(--heading-color,#202729);
	text-wrap:pretty;
}

.mdose-ed__go{
	margin-top:auto;
	padding-top:12px;
	font-size:13px;
	font-weight:700;
	color:var(--accent,#3458FA);
}

/* The title and the read link are separate links to the same page, which is
   right for a screen reader but means the underline question again: these are
   headings and a call to action, not prose. */
.mdose-arch a.mdose-feat__go,
.mdose-arch a.mdose-ed__go,
.mdose-arch .mdose-feat__title a,
.mdose-arch .mdose-ed__title a,
.mdose-arch a.mdose-feat__media,
.mdose-arch a.mdose-ed__media{
	text-decoration:none;
	color:inherit;
}

.mdose-arch a.mdose-feat__go,
.mdose-arch a.mdose-ed__go{
	color:var(--accent,#3458FA);
}

.mdose-arch .mdose-feat__title a:hover,
.mdose-arch .mdose-ed__title a:hover{
	color:var(--accent,#3458FA);
}

/* ---- load more ---- */
.mdose-more{
	display:flex;
	justify-content:center;
	margin-top:20px;
}

.mdose-more[hidden]{
	display:none;
}

.mdose-more__btn{
	padding:12px 28px;
	border:1px solid var(--line-strong,#D8E1FF);
	border-radius:8px;
	background:var(--paper,#fff);
	color:var(--accent,#3458FA);
	font:inherit;
	font-size:14px;
	font-weight:700;
	cursor:pointer;
	transition:border-color .16s,background-color .16s;
}

.mdose-more__btn:hover{
	border-color:var(--accent,#3458FA);
	background:var(--accent-soft,#E9EDFE);
}

.mdose-more__btn:focus-visible{
	outline:2px solid var(--accent,#3458FA);
	outline-offset:2px;
}

/* ---- the disclaimer ---- */
.mdose-note{
	margin-top:clamp(26px,3.4vw,38px);
	padding:16px 18px;
	border:1px solid var(--line,#E3E9F5);
	border-left:3px solid var(--accent,#3458FA);
	border-radius:10px;
	background:var(--paper-2,#F5F8FF);
}

.mdose-note__head{
	display:flex;
	align-items:center;
	gap:7px;
	margin:0 0 6px;
	font-size:11.5px;
	font-weight:700;
	letter-spacing:.1em;
	text-transform:uppercase;
	color:var(--accent,#3458FA);
}

.mdose-note__head svg{
	width:15px;
	height:15px;
	fill:none;
	stroke:currentColor;
	stroke-width:1.8;
	flex:none;
}

.mdose-note__body{
	margin:0;
	font-size:13px;
	line-height:1.6;
	color:var(--muted,#5B6478);
	text-wrap:pretty;
}

@media (prefers-reduced-motion:reduce){
	.mdose-ed{transition:none}
	.mdose-ed:hover{transform:none}
}

@media (max-width:820px){
	/* Side by side needs room for both halves; below this the picture goes
	   back on top, as it does on the issue page. */
	.mdose-feat{grid-template-columns:1fr}
	.mdose-feat__media{min-height:0;aspect-ratio:16/9}
	.mdose-feat__media > img{position:static}
}

@media (max-width:600px){
	.mdose-arch__bar{flex-direction:column;align-items:flex-start;gap:4px}
}

/* The featured card is the one thing still counted rather than measured, so
   it is asked about the column it sits in rather than about the window. The
   grid above needs no breakpoints at all: it is sized by the card. */
@container (max-width:760px){
	.mdose-arch__hero{grid-template-columns:1fr}
}

@container (max-width:560px){
	.mdose-feat{grid-template-columns:1fr}
	.mdose-feat__media{min-height:0;aspect-ratio:16/9}
	.mdose-feat__media > img{position:static}
}