/**
 * Release calendar styles.
 *
 * Plain CSS rather than SCSS in the child theme, whose build is pinned to
 * gulp-sass 4 / node-sass 5.
 *
 * Colour, type and shape all come from the theme's own design tokens
 * (theme.json `settings.custom`, which WordPress emits as `--wp--custom--*`
 * custom properties) rather than from a palette invented here, so the calendar
 * reads as part of Siliconera instead of a section bolted onto it. Every var()
 * carries a literal fallback, so a renamed token degrades to the current value
 * rather than to an unstyled page.
 *
 * The site is dark on a visitor's first load but they can switch: header.php
 * toggles `body.dark-mode-enabled` from localStorage. Light is therefore the
 * base here and dark is the override, which is the order the theme uses.
 *
 * Two hard-won rules:
 *
 * 1. Every colour is stated outright. The first pass used `color: inherit`; on
 *    a theme that colours all links red, that gave red body text on a black
 *    card. Nothing below inherits colour from the theme.
 *
 * 2. Selectors stay scoped under .sirc but specific enough to beat the theme's
 *    bare element rules (a, h3, p), which would otherwise win on the cascade.
 */

.sirc {
	--sirc-gap: 1.25rem;

	/* The theme is square — chips, buttons and containers are all radius 0 —
	   so there is one radius here and it is normally zero. */
	--sirc-radius: var(--wp--custom--general-container-border-radius--sm, 0px);

	--sirc-font: var(--wp--custom--font-family--primary, 'Montserrat', Verdana, Geneva, sans-serif);
	/* The theme's label treatment: uppercase, 0.07em, 600-700. */
	--sirc-track: 0.07em;

	--sirc-card: var(--wp--custom--light--general-color-bg--subtle, #f8f8f8);
	--sirc-card-hover: var(--wp--custom--light--neutral--color--10, #e2e2e2);
	/* What sits behind artwork before it loads, and behind a monogram where
	   there is no artwork at all. */
	--sirc-media: var(--wp--custom--light--neutral--color--10, #e2e2e2);
	--sirc-border: var(--wp--custom--light--divider--color-stroke, #a7a7a740);
	--sirc-text: var(--wp--custom--light--general-color--h-1, #171717);
	--sirc-muted: var(--wp--custom--light--general-color--caption, #5d5d5d);
	--sirc-accent: var(--wp--custom--light--hyperlink--enabled--color-fg, #bd000b);
	--sirc-accent-hover: var(--wp--custom--light--hyperlink--hover--color-fg, #970004);

	/* Chip = the theme's own badge component, used for the type badges. */
	--sirc-chip-bg: var(--wp--custom--light--chip--primary--enabled--color-bg--subtle, #bd000b);
	--sirc-chip-fg: var(--wp--custom--light--chip--primary--enabled--color-fg--subtle, #fefefe);

	/* Filter tabs likewise: the site already has a tab component, so the type
	   filter borrows its colours rather than inventing a pill. */
	--sirc-tab-bg: var(--wp--custom--light--filter-tabs--enabled--color-bg, #e2e2e2);
	--sirc-tab-fg: var(--wp--custom--light--filter-tabs--enabled--color-fg, #494949);
	--sirc-tab-active-bg: var(--wp--custom--light--filter-tabs--selected--color-bg, #fefefe);
	--sirc-tab-active-fg: var(--wp--custom--light--filter-tabs--selected--color-fg, #bd000b);

	--sirc-on-accent: var(--wp--custom--light--general-color-bg--minimal, #fefefe);

	/* Countdown urgency reads in the brand red and the neutral ramp. A
	   traffic-light palette is not a colour language this site speaks. */
	--sirc-imminent: var(--sirc-accent);
	--sirc-soon: var(--sirc-accent);
	--sirc-this-month: var(--sirc-text);
	--sirc-upcoming: var(--sirc-muted);
	--sirc-released: var(--sirc-muted);
	--sirc-undefined: var(--sirc-muted);

	padding: 1.5rem 0 4rem;
	color: var(--sirc-text);
	font-family: var(--sirc-font);
}

body.dark-mode-enabled .sirc {
	--sirc-card: var(--wp--custom--dark--general-color-bg--subtle, #212121);
	--sirc-card-hover: var(--wp--custom--dark--neutral--color--20, #353535);
	--sirc-media: var(--wp--custom--dark--neutral--color--20, #353535);
	--sirc-border: var(--wp--custom--dark--divider--color-stroke, #4b4b4bbf);
	--sirc-text: var(--wp--custom--dark--general-color--h-1, #ececec);
	--sirc-muted: var(--wp--custom--dark--general-color--caption, #909090);
	--sirc-accent: var(--wp--custom--dark--hyperlink--enabled--color-fg, #f95a46);
	--sirc-accent-hover: var(--wp--custom--dark--hyperlink--hover--color-fg, #ff8771);

	--sirc-chip-bg: var(--wp--custom--dark--chip--primary--enabled--color-bg--subtle, #bf000c);
	--sirc-chip-fg: var(--wp--custom--dark--chip--primary--enabled--color-fg--subtle, #ffe8e3);

	--sirc-tab-bg: var(--wp--custom--dark--filter-tabs--enabled--color-bg, #353535);
	--sirc-tab-fg: var(--wp--custom--dark--filter-tabs--enabled--color-fg, #cfcfcf);
	--sirc-tab-active-bg: var(--wp--custom--dark--filter-tabs--selected--color-bg, #353535);
	--sirc-tab-active-fg: var(--wp--custom--dark--filter-tabs--selected--color-fg, #ff8771);

	--sirc-on-accent: var(--wp--custom--dark--general-color-bg--minimal, #161616);
}

/* Hero ------------------------------------------------------------------ */

/* The theme's own `.page-heading--has-background`, which is what this site puts
   at the top of a search or archive page: 40px of padding, the subtle
   background, a 1px hairline, an uppercase title.

   An earlier pass invented a band here — red left bar, dot-grid texture, a
   brand-red wash. All three were things this theme does nowhere, which is
   exactly what made it read as decoration applied from outside rather than a
   Siliconera page. The site's own header treatment is flat, and the accent is
   carried by the red word in the title, not by a rule down the side. */
.sirc-hero {
	position: relative;
	margin-bottom: 1.75rem;
	padding: 2.5rem 1.5rem;
	background-color: var(--sirc-card);
	box-shadow: 0 0 0 1px var(--sirc-border);
}

/* A row of counts, in the theme's label treatment rather than pills. Gives the
   band something to hold besides a title, and tells a first-time visitor the
   size of the thing they are looking at. */
.sirc-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.75rem;
	margin: 1.1rem 0 0;
	padding: 0;
	list-style: none;
}

.sirc-hero__stat {
	color: var(--sirc-muted);
	font-size: 0.71429rem;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.sirc-hero__stat b {
	color: var(--sirc-text);
	font-size: 1.125rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

/* `.page-heading__title`: uppercase, 700, 1.8rem at desktop. */
.sirc .sirc-hero__title {
	margin: 0 0 0.5rem;
	color: var(--sirc-text);
	font-size: clamp(1.4rem, 3vw, 1.8rem);
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
}

/* `.page-heading__subtitle`: 1rem, muted, capped at 40em. */
.sirc .sirc-hero__blurb {
	margin: 0.6em 0 0;
	max-width: 40em;
	color: var(--sirc-muted);
	font-size: 1rem;
}

/* Type tabs ------------------------------------------------------------- */

.sirc-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 2.5rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--sirc-border);
}

.sirc .sirc-tabs .sirc-tab {
	padding: 0.5rem 1rem;
	border: 0;
	border-radius: var(--sirc-radius);
	background: var(--sirc-tab-bg);
	color: var(--sirc-tab-fg);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: var(--sirc-track);
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.6;
	cursor: pointer;
	transition: color 0.15s ease;
}

.sirc .sirc-tabs .sirc-tab:hover {
	color: var(--sirc-accent-hover);
}

/* The active tab was a currentColor background flipped with filter:invert,
   which rendered as a cyan blob. Stated plainly, in the theme's own selected
   colours: a red label rather than a red fill. */
.sirc .sirc-tabs .sirc-tab.is-active {
	background: var(--sirc-tab-active-bg);
	color: var(--sirc-tab-active-fg);
	box-shadow: inset 0 -3px 0 var(--sirc-tab-active-fg);
}

/* Sections and grid ----------------------------------------------------- */

.sirc-section {
	margin-bottom: 3rem;
}

/* The theme's own section heading: `.block-heading--line` — uppercase title at
   1.1rem/0.08em, then a 2px rule that flexes across the rest of the row. Every
   block on the homepage and in the footer is titled this way, so a calendar
   section titled any other way reads as a different website. */
.sirc .sirc-section__title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: 100%;
	margin: 0 0 1.4rem;
	color: var(--sirc-text);
	font-size: 1.1rem;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sirc .sirc-section__title::after {
	content: "";
	flex: 1;
	border-top: 2px solid var(--sirc-border);
}

/* A count, not a badge. The theme has no pill component and inventing one to
   hold a single digit is exactly the kind of decoration that makes a section
   look bolted on. */
.sirc-section__count {
	color: var(--sirc-muted);
	font-size: 0.85714rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.sirc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
	gap: var(--sirc-gap);
}

/* Cards ----------------------------------------------------------------- */

/* No box. Siliconera has no card component: every post on the site is art,
   then a red category badge, then a title, separated from the next post by
   whitespace and a rule. A bordered, rounded, filled panel is a design language
   from somewhere else, and it was the single thing making this page read as a
   bolt-on. The art panel carries the visual weight instead. */
.sirc-card {
	position: relative;
	display: flex;
	flex-direction: column;
}

.sirc-card:hover .sirc-card__media img {
	opacity: 0.85;
}

.sirc-card__media img {
	transition: opacity 0.15s ease;
}

.sirc-card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--sirc-media);
}

.sirc-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sirc-card__body {
	padding: 0.85rem 0 0.5rem;
}

/* The theme's `typescale-2` at its small-screen size: post titles on this site
   are large and 700, and shrinking them to fit a card was the other half of
   why these did not look like Siliconera posts. */
/* Clamped to two lines so every card in a row reserves the same title height.
   With the card boxes gone there is no border hiding the fact that a two-line
   title pushed one card's footer 24px below its neighbours' — the rules under
   each footer made the stagger read as a rendering fault. */
.sirc .sirc-card__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	min-height: calc(2 * 1.3em);
	margin: 0 0 0.35rem;
	color: var(--sirc-text);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
}

/* One anchor per card, stretched to cover it — the whole card is clickable
   without every child inheriting link colour. */
.sirc .sirc-card .sirc-card__link {
	color: var(--sirc-text);
	text-decoration: none;
}

.sirc .sirc-card .sirc-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.sirc .sirc-card:hover .sirc-card__link {
	color: var(--sirc-accent);
}

/* `.post__meta`: 0.857rem, muted, regular weight. The bolded credits line was
   competing with the title. */
.sirc .sirc-card__credits {
	margin: 0 0 0.6rem;
	color: var(--sirc-muted);
	font-size: 0.85714rem;
	font-weight: 400;
	line-height: 1.5;
}

.sirc .sirc-card__excerpt {
	margin: 0;
	color: var(--sirc-muted);
	font-size: 0.875rem;
	line-height: 1.5;
}

/* Two rows, always both, so the top rule lands at the same height on every card
   in a row regardless of whether that entry has a buy link. */
.sirc-card__footer {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	margin-top: auto;
	padding: 0.7rem 0 0;
	border-top: 1px solid var(--sirc-border);
}

.sirc-card__when,
.sirc-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 0.75rem;
	min-height: 1.6rem;
}

/* Two rows' worth of height, always reserved: the buttons, then the buy link.
   Letting the buy link wrap only when it did not fit put it on a second row on
   some cards and not others, which is the same misalignment as before wearing a
   different hat. It gets its own row unconditionally, and cards without one
   reserve the space anyway so the footer rule stays level across the grid. */
.sirc-card__actions {
	justify-content: flex-start;
	align-content: flex-start;
	/* 3.2rem is 44.8px against this theme's 14px root, which clears the 44px a
	   button row plus a buy link actually occupies. Worth stating because the
	   first attempt at this used 16px in its head and reserved 40.6px, which
	   looked right and was 4px short. */
	min-height: 3.2rem;
}

.sirc-card__actions .sirc-card__buy {
	flex-basis: 100%;
}

/* The countdown is a fixed-width string that must never break: "1d 23h 48m 45s"
   split over four lines is unreadable and shifts the card's height every second
   as the digits change. */
.sirc-card__footer .sirc-countdown {
	white-space: nowrap;
}

.sirc .sirc-card__date {
	white-space: nowrap;
}

/* Sits above the stretched title link so it stays independently clickable. */
.sirc .sirc-card .sirc-card__buy {
	position: relative;
	z-index: 2;
	color: var(--sirc-accent);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--sirc-track);
	text-decoration: none;
	white-space: nowrap;
}

.sirc .sirc-card .sirc-card__buy:hover {
	text-decoration: underline;
}

/* Countdown badge ------------------------------------------------------- */

.sirc-countdown {
	display: inline-block;
	font-size: 0.8125rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.sirc-countdown--imminent { color: var(--sirc-imminent); }
.sirc-countdown--soon { color: var(--sirc-soon); }
.sirc-countdown--this-month { color: var(--sirc-this-month); }
.sirc-countdown--upcoming { color: var(--sirc-upcoming); }
.sirc-countdown--released { color: var(--sirc-released); }
.sirc-countdown--undefined { color: var(--sirc-undefined); }

/* Staff picks ----------------------------------------------------------- */

/* Same track sizing as .sirc-grid on purpose: two grids a section apart at
   270px and 300px do not line up, and the eye reads the misalignment as
   breakage long before it works out why. */
.sirc-picks__rail {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
	gap: var(--sirc-gap);

	/* The theme's featured rail is framed in red down its outer edges and the
	   cards inside carry no chrome of their own. The frame is on the rail, not
	   the section, so the heading's own trailing rule does not run into it. */
	padding: 0 1.25rem;
	border-left: 3px solid var(--sirc-accent);
	border-right: 3px solid var(--sirc-accent);
}

.sirc-picks {
	margin-bottom: 3rem;
}

.sirc-pick {
	position: relative;
}

.sirc .sirc-pick .sirc-pick__link, .sirc .sirc-picks .sirc-pick a {
	color: var(--sirc-text);
	text-decoration: none;
}

.sirc-pick img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--sirc-radius);
	margin-bottom: 0.6rem;
}

.sirc .sirc-pick__title {
	margin: 0 0 0.6rem;
	color: var(--sirc-text);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
}

/* The short red rule under a featured title is this site's signature, used on
   every card in the homepage rail. Borrowed rather than approximated. */
.sirc .sirc-pick__title::after {
	content: "";
	display: block;
	width: 40px;
	margin-top: 0.6rem;
	border-top: 3px solid var(--sirc-accent);
}

.sirc .sirc-pick__note {
	margin: 0 0 0.6rem;
	color: var(--sirc-muted);
	font-size: 0.8125rem;
	font-style: italic;
	line-height: 1.5;
}

/* Single entry ---------------------------------------------------------- */

.sirc-entry {
	max-width: 820px;
	margin: 0 auto;
}

.sirc-entry__header {
	margin-bottom: 1.5rem;
}

/* `.post__cat--bg` again, as the theme uses it on a single post: the type is a
   solid red badge above the headline, not red text that reads like a link. */
.sirc.sirc-entry a.sirc-entry__type,
.sirc .sirc-entry__type {
	display: inline-block;
	text-decoration: none;
	margin: 0 0 0.7rem;
	padding: 5px 8px;
	background: var(--sirc-chip-bg);
	color: var(--sirc-chip-fg);
	font-size: 0.71429rem;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* Countdown and date on one line: how long, then when. */
.sirc .sirc-entry__when {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.75rem;
	margin: 0 0 0.9rem;
}

.sirc .sirc-entry__date {
	color: var(--sirc-muted);
	font-size: 0.85714rem;
}

.sirc .sirc-entry__title {
	margin: 0 0 0.6rem;
	color: var(--sirc-text);
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.sirc-entry__cover img {
	width: 100%;
	height: auto;
	border-radius: var(--sirc-radius);
}

.sirc-entry__credits {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	margin: 1.75rem 0;
	padding: 1.1rem 1.25rem;
	background: var(--sirc-card);
	border: 1px solid var(--sirc-border);
	border-radius: var(--sirc-radius);
}

.sirc .sirc-entry__credit dt {
	margin: 0;
	color: var(--sirc-muted);
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--sirc-track);
}

.sirc .sirc-entry__credit dd {
	margin: 0.2rem 0 0;
	color: var(--sirc-text);
	font-size: 0.9375rem;
	font-weight: 700;
}

.sirc .sirc-entry__body {
	color: var(--sirc-text);
	font-size: 1.0625rem;
	line-height: 1.65;
}

/* Series rail ------------------------------------------------------------ */

.sirc-entry__series,
.sirc-entry__ties {
	margin-top: 2.5rem;
}

.sirc-series__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sirc-series__item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--sirc-border);
}

.sirc.sirc-entry .sirc-series__link {
	color: var(--sirc-text);
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: none;
}

.sirc.sirc-entry .sirc-series__link:hover {
	color: var(--sirc-accent);
}

/* A type marker on a rail row, not a badge — the two rails mix types now and a
   title alone does not say whether the next thing is a volume or a $400 statue.
   Deliberately the muted label treatment used elsewhere in this file rather
   than .sirc-badge, which is absolutely positioned over artwork. */
.sirc-series__type {
	color: var(--sirc-muted);
	font-size: 0.71429rem;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.sirc-entry__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem;
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--sirc-border);
}

.sirc.sirc-entry .sirc-entry__buy {
	padding: 0.6rem 1.25rem;
	border-radius: var(--sirc-radius);
	background: var(--sirc-accent);
	color: var(--sirc-on-accent);
	font-size: 0.875rem;
	font-weight: 700;
	text-decoration: none;
}

.sirc.sirc-entry .sirc-entry__back {
	color: var(--sirc-accent);
	font-size: 0.875rem;
	font-weight: 600;
}

.sirc.sirc-entry .sirc-entry__back:hover {
	color: var(--sirc-accent-hover);
}

/* The staff review, under the credits. Ruled top and bottom rather than boxed
   or given a left border: the site sets a block apart with a rule, and the
   left-border treatment reads as a generic callout from somewhere else. */
.sirc .sirc-entry__reviewbox {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin: 2rem 0;
	padding: 1.25rem 0;
	border-top: 1px solid var(--sirc-border);
	border-bottom: 1px solid var(--sirc-border);
}

.sirc .sirc-entry__score {
	flex-shrink: 0;
	margin: 0;
	line-height: 1;
	white-space: nowrap;
}

.sirc .sirc-entry__scorenum {
	color: var(--sirc-accent);
	font-size: 2.28571rem;
	font-weight: 700;
}

.sirc .sirc-entry__scoreof {
	color: var(--sirc-muted);
	font-size: 0.85714rem;
	font-weight: 700;
}

.sirc .sirc-entry__reviewsummary {
	margin: 0.5rem 0 0;
	color: var(--sirc-text);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.sirc .sirc-entry__reviewlabel {
	margin: 0 0 0.35rem;
	color: var(--sirc-accent);
	font-size: 0.71429rem;
	font-weight: 700;
	letter-spacing: var(--sirc-track);
	text-transform: uppercase;
}

.sirc.sirc-entry .sirc-entry__reviewlink {
	display: inline-block;
	color: var(--sirc-text);
	font-size: 1.14286rem;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
}

.sirc.sirc-entry .sirc-entry__reviewlink:hover,
.sirc.sirc-entry .sirc-entry__reviewlink:focus-visible {
	color: var(--sirc-accent);
	text-decoration: underline;
}

.sirc .sirc-entry__reviewmeta {
	margin: 0.35rem 0 0;
	color: var(--sirc-muted);
	font-size: 0.85714rem;
}

.sirc .sirc-entry__disclosure {
	flex-basis: 100%;
	margin: 0;
	color: var(--sirc-muted);
	font-size: 0.75rem;
}

.sirc .sirc-empty {
	padding: 2rem 0;
	color: var(--sirc-muted);
}

/* ======================================================================
   Prototype parity: hero eyebrow, controls row, calendar strip, staff
   pick art, newsletter band. Added after comparing the built hub against
   Aidan's mockup, which is considerably denser than the first pass here.
   ====================================================================== */

.sirc .sirc-hero__eyebrow {
	margin: 0 0 0.35rem;
	color: var(--sirc-accent);
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: var(--sirc-track);
	text-transform: uppercase;
}

.sirc .sirc-hero__accent {
	color: var(--sirc-accent);
}

/* Controls row --------------------------------------------------------- */

.sirc-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 2rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--sirc-border);
}

.sirc-controls .sirc-tabs {
	margin: 0;
	padding: 0;
	border: 0;
}

.sirc-controls__right {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-left: auto;
}

.sirc .sirc-search input {
	width: 220px;
	max-width: 100%;
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--sirc-border);
	border-radius: var(--sirc-radius);
	background: var(--sirc-card);
	color: var(--sirc-text);
	font-size: 0.8125rem;
}

.sirc .sirc-search input::placeholder {
	color: var(--sirc-muted);
}

.sirc-sort {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.sirc .sirc-sort__label {
	color: var(--sirc-muted);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: var(--sirc-track);
	text-transform: uppercase;
}

.sirc .sirc-sort__btn {
	padding: 0.4rem 0.8rem;
	border: 1px solid var(--sirc-border);
	border-radius: var(--sirc-radius);
	background: transparent;
	color: var(--sirc-muted);
	font-size: 0.75rem;
	font-weight: 600;
	cursor: pointer;
}

.sirc .sirc-sort__btn.is-active {
	background: var(--sirc-card-hover);
	border-color: var(--sirc-muted);
	color: var(--sirc-text);
}

/* Calendar strip ------------------------------------------------------- */

.sirc-calendar {
	margin-bottom: 2.5rem;
	padding: 1.25rem 1.5rem 1.5rem;
	background: var(--sirc-card);
	border: 1px solid var(--sirc-border);
	border-radius: var(--sirc-radius);
}

.sirc .sirc-calendar__heading {
	margin: 0 0 1.25rem;
	color: var(--sirc-muted);
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: var(--sirc-track);
	text-transform: uppercase;
}

.sirc-calendar__months {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 2rem;
}

.sirc .sirc-calendar__month-label {
	margin: 0 0 0.75rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--sirc-border);
	color: var(--sirc-text);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: var(--sirc-track);
	text-align: center;
}

.sirc-calendar__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sirc-calendar__row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.45rem 0;
}

.sirc-calendar__date {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 2.25rem;
	line-height: 1.05;
}

.sirc-calendar__mon {
	color: var(--sirc-muted);
	font-size: 0.5625rem;
	font-weight: 700;
	letter-spacing: var(--sirc-track);
	text-transform: uppercase;
}

.sirc-calendar__day {
	color: var(--sirc-text);
	font-size: 1.0625rem;
	font-weight: 800;
}

.sirc .sirc-calendar .sirc-calendar__title {
	flex: 1;
	color: var(--sirc-text);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.sirc .sirc-calendar .sirc-calendar__title:hover {
	color: var(--sirc-accent);
}

.sirc .sirc-calendar__empty {
	margin: 0;
	color: var(--sirc-muted);
	font-size: 0.8125rem;
}

/* Badges --------------------------------------------------------------- */

/* The theme's `.post__cat--bg`, to its numbers: 5px 8px, 0.714rem, 700, 1px
   tracking, line-height 1, square, sitting on the artwork. This is the most
   recognisable thing on a Siliconera index page and the calendar should use
   the same one rather than a lookalike a size smaller. */
.sirc-badge {
	position: absolute;
	inset-block-start: 0.6rem;
	inset-inline-start: 0.6rem;
	padding: 5px 8px;
	border: none;
	border-radius: 0;
	font-size: 0.71429rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.sirc-badge--type {
	background: var(--sirc-chip-bg);
	color: var(--sirc-chip-fg);
}

/* The theme's `.post__cat--bg-inverse`. Two red badges on one image read as
   one badge that wrapped; the inverse variant is how this site already
   distinguishes a second label on the same artwork. */
.sirc-badge--pick {
	inset-inline-start: auto;
	inset-inline-end: 0.6rem;
	background: #fff;
	color: #333;
}

/* Sits on the artwork, bottom-left, clear of the type badge (top-left) and the
   staff-pick badge (top-right). Deliberately not in the card footer: that
   footer reserves exactly two rows so the rules align across a grid row. */
.sirc .sirc-card .sirc-card__review {
	position: absolute;
	z-index: 2;
	inset-block-end: 0.6rem;
	inset-inline-start: 0.6rem;
	padding: 5px 8px;
	background: #fff;
	color: #333;
	font-size: 0.71429rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
}

/* The score rides on the same chip rather than sitting beside it, so a card
   with a review is still one object on the artwork, not two. */
.sirc .sirc-card .sirc-card__score {
	margin-inline-start: 0.35rem;
	padding-inline-start: 0.35rem;
	border-inline-start: 1px solid rgba(0, 0, 0, 0.2);
	/* Not the accent red: on the chip's white ground it measures 3.19:1 at
	   10px, and the score is the number people came for. The rule and the
	   weight separate it from the label instead. */
	color: inherit;
	font-size: 0.85714rem;
}

.sirc .sirc-card .sirc-card__review:hover .sirc-card__score,
.sirc .sirc-card .sirc-card__review:focus-visible .sirc-card__score {
	border-inline-start-color: rgba(255, 255, 255, 0.4);
	color: inherit;
}

.sirc .sirc-card .sirc-card__review:hover,
.sirc .sirc-card .sirc-card__review:focus-visible {
	background: var(--sirc-accent);
	color: var(--sirc-on-accent);
}

/* The inline type badge sits on the divider colour, where the muted grey used
   elsewhere measures 3.19:1 at 10px bold — under the 4.5:1 minimum, and this is
   the label that says whether a row is anime or manga. Body text colour clears
   it in both themes. */
.sirc-badge--inline {
	position: static;
	flex-shrink: 0;
	background: var(--sirc-border);
	color: var(--sirc-text);
}

/* Monogram art --------------------------------------------------------- */

.sirc-card__monogram,
.sirc-pick__monogram {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 3rem;
	font-weight: 800;
	letter-spacing: var(--sirc-track);
	color: var(--sirc-muted);
}

/* Placeholder art is a flat neutral panel, not a per-type tint. The type is
   already stated by a chip on every card, so colour-coding it a second time
   only introduces four hues the site does not otherwise use. */
.sirc-card__media,
.sirc-pick__art {
	background: var(--sirc-card-hover);
}

.sirc-card__date {
	color: var(--sirc-muted);
	font-size: 0.75rem;
	font-weight: 600;
}

/* Staff picks ---------------------------------------------------------- */

.sirc-pick {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
	border-left-width: 3px;
}

.sirc-pick__art {
	position: relative;
	aspect-ratio: 16 / 7;
}

.sirc-pick__art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	border-radius: 0;
}

.sirc-pick__body {
	padding: 0.9rem 1rem 1rem;
}

/* Preview banner. Only ever seen by the desk, while the calendar is not live,
   so it is allowed to be loud — its whole job is to stop someone concluding
   from a finished-looking page that readers can see it. */
.sirc-preview-banner {
	margin: 0 0 1.25rem;
	padding: 0.75rem 1rem;
	/* Literal colours, not the plugin's tokens: this banner renders above the
	   .sirc wrapper the tokens are defined on, so a var() here resolves to
	   nothing and the banner comes out as dark text on the page background —
	   which is exactly the "looks finished, must be live" mistake it exists to
	   prevent. */
	background: #d50917;
	color: #fff;
	font-size: 0.85714rem;
	font-weight: 700;
}

.sirc-preview-banner a,
.sirc-preview-banner a:hover,
.sirc-preview-banner a:focus {
	color: #fff !important;
	text-decoration: underline;
}

/* Tracking band -------------------------------------------------------- */

.sirc-track {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	margin: 0 0 3rem;
	padding: 1.5rem 1.75rem;
	background: var(--sirc-card);
	border: 1px solid var(--sirc-border);
	border-radius: var(--sirc-radius);
}

/* The copy is swapped by JS once state lands — a signed-in reader gets what
   they are tracking instead of a signup pitch — so the text column reserves
   its height. Both variants are one line of title and one or two of blurb;
   reserving stops the swap shifting everything below it. */
.sirc .sirc-track__text {
	min-height: 4rem;
}

.sirc .sirc-track__title {
	margin: 0 0 0.25rem;
	color: var(--sirc-text);
	font-size: 1.25rem;
	font-weight: 700;
}

.sirc .sirc-track__blurb {
	margin: 0;
	color: var(--sirc-muted);
	font-size: 0.875rem;
}

.sirc .sirc-track .sirc-track__cta {
	padding: 0.65rem 1.5rem;
	border-radius: var(--sirc-radius);
	background: var(--sirc-accent);
	color: var(--sirc-on-accent);
	font-size: 0.875rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

@media (max-width: 640px) {
	.sirc-controls__right {
		width: 100%;
		margin-left: 0;
	}

	.sirc .sirc-search input {
		width: 100%;
	}
}

/* Timeline ------------------------------------------------------------- */

.sirc-timeline {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0.5rem;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--sirc-border);
}

.sirc-timeline__step {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
}

/* Scaled by share of the busiest month via the --sirc-dot custom property
   the template sets per step. */
.sirc-timeline__dot {
	width: calc(8px + (var(--sirc-dot, 0.35) * 10px));
	height: calc(8px + (var(--sirc-dot, 0.35) * 10px));
	border-radius: 50%;
	background: var(--sirc-border);
}

.sirc-timeline__step.is-current .sirc-timeline__dot {
	background: var(--sirc-accent);
}

.sirc-timeline__label {
	color: var(--sirc-muted);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: var(--sirc-track);
	text-transform: uppercase;
}

.sirc-timeline__step.is-current .sirc-timeline__label {
	color: var(--sirc-text);
}

.sirc-timeline__count {
	color: var(--sirc-muted);
	font-size: 0.625rem;
	font-variant-numeric: tabular-nums;
}

/* Card excerpt ---------------------------------------------------------- */

/* Clamped to three lines, with the height reserved whether the blurb fills them
   or not, so a short blurb does not pull its card's footer up past its
   neighbours'.

   There used to be a "Read more" toggle here, added by JS only where the text
   actually overflowed. It was measured after paint, so it appeared late and
   shoved the footer down — visible layout shift on every load, on some cards
   and not others. It also had little to expand into: the excerpt is trimmed to
   28 words server-side, so the full text is not in the DOM either way. The
   whole card is already a link to the entry, which is where the rest of the
   text lives. */
.sirc-card__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(3 * 1.5em);
}


/* Suggest a release ---------------------------------------------------- */

.sirc .sirc-suggest {
	position: fixed;
	inset-block-end: 1.25rem;
	inset-inline-end: 1.25rem;
	z-index: 40;
	padding: 0.7rem 1.25rem;
	border-radius: var(--sirc-radius);
	background: var(--sirc-accent);
	color: var(--sirc-on-accent);
	font-size: 0.8125rem;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

@media (max-width: 640px) {
	.sirc .sirc-suggest {
		inset-block-end: 0.75rem;
		inset-inline-end: 0.75rem;
		padding: 0.6rem 1rem;
		font-size: 0.75rem;
	}
}

/* Chips ----------------------------------------------------------------- */

.sirc-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 0.8rem;
	margin: 0 0 0.5rem;
	padding: 0;
	list-style: none;
}

/* The theme's borderless `.post__cat`: uppercase, 0.714rem, 700, 1px tracking,
   underlined in its own colour. Boxed pills three to a card was pill soup, and
   the site has no pill anywhere. */
.sirc .sirc-chip {
	padding: 0;
	border: none;
	border-bottom: 1px solid currentColor;
	border-radius: 0;
	color: var(--sirc-muted);
	font-size: 0.71429rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.sirc .sirc-chip--status {
	color: var(--sirc-accent);
}

.sirc .sirc-card__series {
	margin: 0 0 0.5rem;
	color: var(--sirc-muted);
	font-size: 0.75rem;
	font-style: italic;
}

/* Hype and notify -------------------------------------------------------- */

.sirc-engage {
	display: flex;
	flex-basis: 100%;
	gap: 0.5rem;
	margin-top: 0.6rem;
	padding-top: 0.6rem;
	border-top: 1px solid var(--sirc-border);
}

/* In a card the footer already draws that rule, and two rules 30px apart is
   just a mistake that reads as a mistake. */
.sirc-card__footer .sirc-engage {
	flex-basis: auto;
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}


.sirc .sirc-engage .sirc-hype,
.sirc .sirc-engage .sirc-notify {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 5px 8px;
	border: 1px solid var(--sirc-border);
	border-radius: 0;
	background: transparent;
	color: var(--sirc-muted);
	font-family: var(--sirc-font);
	font-size: 0.71429rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.sirc .sirc-engage .sirc-hype:hover,
.sirc .sirc-engage .sirc-notify:hover {
	color: var(--sirc-text);
	border-color: var(--sirc-muted);
}

.sirc .sirc-engage .sirc-hype.is-voted,
.sirc .sirc-engage .sirc-notify.is-subscribed {
	border-color: var(--sirc-accent);
	color: var(--sirc-accent);
}

.sirc .sirc-engage button[disabled] {
	opacity: 0.6;
	cursor: default;
}

.sirc-hype__count {
	font-variant-numeric: tabular-nums;
}

/* Most hyped ------------------------------------------------------------- */

/* Top three, as artwork. A rail of eight identical text rows read as a
   footnote to the page rather than the thing the votes are for. */
/* auto-FILL, and the same track as .sirc-grid. auto-fit collapses the empty
   tracks, so with two entries in the chart each one stretched to half the page
   and the rail turned into two enormous 16:9 slabs. Empty tracks are the
   correct answer here: a chart of two is a small chart, not a big one. */
.sirc-leaderboard__top {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
	gap: var(--sirc-gap);
	margin-bottom: 1.25rem;
}

.sirc.sirc-hub .sirc-leaderboard__card,
.sirc .sirc-leaderboard .sirc-leaderboard__card {
	display: flex;
	flex-direction: column;
	color: var(--sirc-text);
	text-decoration: none;
}

.sirc-leaderboard__art {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	margin-bottom: 0.6rem;
	background: var(--sirc-media);
	overflow: hidden;
}

.sirc-leaderboard__art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: opacity 0.15s ease;
}

.sirc-leaderboard__card:hover .sirc-leaderboard__art img {
	opacity: 0.85;
}

.sirc-leaderboard__monogram {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sirc-muted);
	font-size: 2rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	opacity: 0.5;
}

/* The rank is the point of this rail, so it is set at a size nothing else on
   the card competes with, sitting on the artwork in the brand red. */
.sirc-leaderboard__rank {
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	min-width: 2.2rem;
	padding: 0.1rem 0.5rem;
	background: var(--sirc-chip-bg);
	color: var(--sirc-chip-fg);
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.sirc .sirc-leaderboard .sirc-leaderboard__card-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: 0.3rem;
	color: var(--sirc-text);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
}

.sirc-leaderboard__card:hover .sirc-leaderboard__card-title {
	color: var(--sirc-accent);
}

.sirc-leaderboard__card-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.6rem;
}

.sirc-leaderboard__when {
	color: var(--sirc-muted);
	font-size: 0.71429rem;
	white-space: nowrap;
}

/* The tail of the same chart, ranked 4 and down. */
.sirc-leaderboard__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sirc-leaderboard__item {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--sirc-border);
}

.sirc-leaderboard__row-rank {
	min-width: 1.5rem;
	color: var(--sirc-muted);
	font-size: 0.8125rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

/* Skeletons. Same boxes as the real thing, so the section reserves its final
   height from first paint — the counts cannot be server-rendered, so this
   section is always populated late. */
.sirc-leaderboard__ghost {
	display: block;
	width: min(340px, 60%);
	height: 0.9rem;
	background: var(--sirc-border);
	opacity: 0.6;
	animation: sirc-pulse 1.6s ease-in-out infinite;
}

.sirc-leaderboard__ghost--art {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	margin-bottom: 0.6rem;
}

@keyframes sirc-pulse {
	50% { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
	.sirc-leaderboard__ghost {
		animation: none;
	}
}

.sirc .sirc-leaderboard__empty {
	margin: 0;
	padding: 0.6rem 0;
	color: var(--sirc-muted);
	font-size: 0.875rem;
}

.sirc .sirc-leaderboard .sirc-leaderboard__link {
	flex: 1;
	color: var(--sirc-text);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.sirc .sirc-leaderboard .sirc-leaderboard__link:hover {
	color: var(--sirc-accent);
}

.sirc-leaderboard__count {
	color: var(--sirc-accent);
	font-size: 0.71429rem;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Dialogs ---------------------------------------------------------------- */

/* [hidden] is display:none at 0-1-0, which any class selector outranks. Without
   this, `display: flex` below wins and every dialog is open on page load. */
.sirc [hidden] {
	display: none !important;
}

/* A native <dialog>: no display of our own, because a closed dialog is hidden
   by the UA stylesheet and any `display` here would override that and leave
   both dialogs open on every page load. The panel inside carries the styling;
   this element is only the box the browser centres and the backdrop it paints. */
.sirc .sirc-dialog {
	max-width: min(100% - 2rem, 560px);
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
}

.sirc .sirc-dialog::backdrop {
	background: rgba(0, 0, 0, 0.7);
}

.sirc-dialog__panel {
	width: 100%;
	max-width: 520px;
	max-height: 90vh;
	overflow-y: auto;
	padding: 1.5rem;
	border: 1px solid var(--sirc-border);
	border-radius: var(--sirc-radius);
	background: var(--sirc-card);
}

.sirc-dialog__panel--narrow {
	max-width: 380px;
}

.sirc .sirc-dialog__title {
	margin: 0 0 0.5rem;
	color: var(--sirc-text);
	font-size: 1.25rem;
}

.sirc .sirc-dialog__blurb {
	margin: 0 0 1.25rem;
	color: var(--sirc-muted);
	font-size: 0.875rem;
}

/* Keyboard focus. The theme sets `outline: 0 !important` on every a and button
   (themes/the-next-mag/css/style.css), which leaves a keyboard reader with no
   idea where they are anywhere in the calendar — so this has to be !important
   to land at all. :focus-visible rather than :focus keeps it off mouse clicks. */
.sirc a:focus-visible,
.sirc button:focus-visible,
.sirc input:focus-visible,
.sirc select:focus-visible,
.sirc textarea:focus-visible,
.sirc-dialog a:focus-visible,
.sirc-dialog button:focus-visible,
.sirc-dialog input:focus-visible,
.sirc-dialog select:focus-visible,
.sirc-dialog textarea:focus-visible {
	outline: 2px solid var(--sirc-accent) !important;
	outline-offset: 2px;
}

/* Forms ------------------------------------------------------------------ */

.sirc-field {
	display: block;
	margin-bottom: 0.9rem;
}

.sirc-field__label {
	display: block;
	margin-bottom: 0.3rem;
	color: var(--sirc-muted);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: var(--sirc-track);
	text-transform: uppercase;
}

.sirc .sirc-field input,
.sirc .sirc-field select,
.sirc .sirc-field textarea {
	width: 100%;
	padding: 0.5rem 0.6rem;
	border: 1px solid var(--sirc-border);
	border-radius: var(--sirc-radius);
	background: var(--sirc-card-hover);
	color: var(--sirc-text);
	font-family: var(--sirc-font);
	font-size: 0.875rem;
}

/* Off-screen rather than display:none — a bot that respects display:none
   would skip it, and skipping it is the behaviour we want to detect. */
.sirc-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sirc-form__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem;
	margin-top: 1rem;
}

/* Three classes, not two. Both of these are anchors in the sign-in dialog, and
   the theme's `body.dark-mode-enabled .site-content a` is (0,2,2) — it beat
   `.sirc .sirc-form__submit` and painted the accent-red button's own label
   accent red, 1.69:1 against its background. */
.sirc .sirc-dialog .sirc-form__submit,
.sirc .sirc-form__submit {
	padding: 0.55rem 1.1rem;
	border: 0;
	border-radius: var(--sirc-radius);
	background: var(--sirc-accent);
	color: var(--sirc-on-accent);
	font-family: var(--sirc-font);
	font-size: 0.8125rem;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

.sirc .sirc-dialog .sirc-form__cancel,
.sirc .sirc-form__cancel {
	border: 0;
	background: none;
	color: var(--sirc-muted);
	font-family: var(--sirc-font);
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.sirc .sirc-form__status {
	margin: 0.75rem 0 0;
	color: var(--sirc-muted);
	font-size: 0.8125rem;
	min-height: 1.2em;
}

/* Hub notes -------------------------------------------------------------- */

.sirc-notes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 2rem;
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--sirc-border);
}

.sirc .sirc-notes__title {
	margin: 0 0 0.75rem;
	color: var(--sirc-text);
	font-size: 0.875rem;
	font-weight: 800;
	letter-spacing: var(--sirc-track);
	text-transform: uppercase;
}

.sirc .sirc-notes__blurb p {
	margin: 0 0 0.75rem;
	color: var(--sirc-muted);
	font-size: 0.875rem;
}

.sirc .sirc-faq {
	border-bottom: 1px solid var(--sirc-border);
}

.sirc .sirc-faq__q {
	padding: 0.6rem 0;
	color: var(--sirc-text);
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
}

.sirc .sirc-faq__a {
	margin: 0 0 0.75rem;
	color: var(--sirc-muted);
	font-size: 0.875rem;
}