/* =========================================================
   MAD ONES – BASE

   The ground floor the site is built on. Until version 2.0.0 this came from
   Understrap, which brought the whole of Bootstrap along for it: a reset, a
   font stack, and the .container that centres every section. The site used
   none of Bootstrap's grid or components, so the theme now carries only the
   handful of rules it was actually standing on, written out here.

   Everything that makes the site look like the site is in
   css/madones-homepage.css. This file is only what comes before that.
   ========================================================= */

/* =========================================================
   01. GROUND RULES
   ========================================================= */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Inter, variable, self hosted, latin and latin-ext.
 *
 * It is here for the headlines and for one reason: the site sets no font of
 * its own, so a heading is San Francisco on an Apple device, Segoe UI on
 * Windows and Roboto on Android, and only the first of those three is the
 * typeface this site was drawn to. Inter is the free face cut to that model,
 * which is why the printed ticket embeds it too.
 *
 * Nothing is loaded on an Apple device: the display stack below names
 * -apple-system first, so the system face wins there, Inter is never used to
 * render anything, and a browser does not download a face it does not use.
 * Google is not asked for it either, here or anywhere: a font request is a
 * visit to another company logged against the reader.
 *
 * OFL 1.1, LICENSE.txt sits beside the files. */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("../assets/fonts/inter-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* A second file for the accents Western Europe does not use, so a Polish or a
   Czech band name is set in Inter too, and nobody else downloads it. */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("../assets/fonts/inter-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	/* The site sets no font of its own, so this stack is the site's typeface. */
	--madones-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--madones-font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

	/* Headlines. -apple-system and BlinkMacSystemFont resolve on Apple devices
	   and nowhere else, which is the whole trick: San Francisco there, Inter
	   everywhere else, and the ordinary stack if Inter cannot be loaded. */
	--madones-font-display: -apple-system, BlinkMacSystemFont, "Inter", var(--madones-font-sans);
}

body {
	margin: 0;
	font-family: var(--madones-font-sans);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #212529;
	background-color: #ffffff;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
}

/* =========================================================
   02. TYPOGRAPHY

   The sizes below the 1200px breakpoint are fluid, which is what the headings
   on this site were sized against before they were given their own clamp().
   ========================================================= */

h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
	margin-bottom: 0.5rem;
	font-family: var(--madones-font-display);
	font-weight: 500;
	line-height: 1.2;
}

/* The headlines that are not headings. The site has four kinds of display
   string and they are all named for what they are, in the theme and in the
   plugins alike: a title, a heading, the kicker above one, and the names on a
   bill. One rule reaches all of them, including the ones written after this. */
[class*="__title"],
[class*="__heading"],
[class*="__kicker"],
[class*="__names"],
.madones-kicker {
	font-family: var(--madones-font-display);
}

h1 { font-size: calc(1.375rem + 1.5vw); }
h2 { font-size: calc(1.325rem + 0.9vw); }
h3 { font-size: calc(1.3rem + 0.6vw); }
h4 { font-size: calc(1.275rem + 0.3vw); }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

@media (min-width: 1200px) {
	h1 { font-size: 2.5rem; }
	h2 { font-size: 2rem; }
	h3 { font-size: 1.75rem; }
	h4 { font-size: 1.5rem; }
}

p {
	margin-top: 0;
	margin-bottom: 1rem;
}

ol,
ul,
dl {
	margin-top: 0;
	margin-bottom: 1rem;
}

ol,
ul {
	padding-left: 2rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
	margin-bottom: 0;
}

dd {
	margin-bottom: 0.5rem;
	margin-left: 0;
}

blockquote {
	margin: 0 0 1rem;
}

b,
strong {
	font-weight: bolder;
}

small {
	font-size: 0.875em;
}

sub,
sup {
	position: relative;
	font-size: 0.75em;
	line-height: 0;
	vertical-align: baseline;
}

sub { bottom: -0.25em; }
sup { top: -0.5em; }

code,
kbd,
samp,
pre {
	font-family: var(--madones-font-mono);
	font-size: 1em;
}

pre {
	margin-top: 0;
	margin-bottom: 1rem;
	overflow: auto;
}

hr {
	margin: 1rem 0;
	color: inherit;
	border: 0;
	border-top: 1px solid;
	opacity: 0.25;
}

a {
	color: #0d6efd;
	text-decoration: underline;
}

a:hover {
	color: #0a58ca;
}

/* An anchor with no href is a target, not a link, and should not look like one. */
a:not([href]):not([class]),
a:not([href]):not([class]):hover {
	color: inherit;
	text-decoration: none;
}

/* =========================================================
   03. MEDIA, TABLES, FORMS
   ========================================================= */

img,
svg {
	vertical-align: middle;
}

table {
	caption-side: bottom;
	border-collapse: collapse;
}

th {
	text-align: inherit;
}

thead,
tbody,
tfoot,
tr,
td,
th {
	border-color: inherit;
	border-style: solid;
	border-width: 0;
}

label {
	display: inline-block;
}

/* Form controls fall back to the browser's own font unless they are told. */
input,
button,
select,
optgroup,
textarea {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

button,
select {
	text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/* Safari rounds buttons on its own, and nothing here is rounded. */
button,
input,
select,
textarea {
	border-radius: 0;
}

button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled),
[role="button"] {
	cursor: pointer;
}

textarea {
	resize: vertical;
}

fieldset {
	min-width: 0;
	padding: 0;
	margin: 0;
	border: 0;
}

legend {
	float: left;
	width: 100%;
	padding: 0;
	margin-bottom: 0.5rem;
	line-height: inherit;
}

[hidden] {
	display: none !important;
}

/* =========================================================
   04. WHAT WORDPRESS EXPECTS A THEME TO CARRY

   Labels that exist only for a screen reader are printed by the theme and by
   three of the plugins. Without this rule they are ordinary visible text.
   ========================================================= */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	z-index: 100000;
	top: 8px;
	left: 8px;
	width: auto;
	height: auto;
	padding: 12px 18px;
	clip: auto;
	color: #111111;
	background: #ffffff;
	font-size: 0.9rem;
	text-decoration: none;
}

.alignnone {
	margin: 0.5rem 1rem 1rem 0;
}

.aligncenter {
	display: block;
	margin: 0.5rem auto 1rem;
}

.alignleft {
	float: left;
	margin: 0.5rem 1.5rem 1rem 0;
}

.alignright {
	float: right;
	margin: 0.5rem 0 1rem 1.5rem;
}

.wp-caption {
	max-width: 100%;
	margin-bottom: 1rem;
}

.wp-caption img {
	display: block;
	max-width: 100%;
	height: auto;
}

.wp-caption-text {
	margin: 0.5rem 0 0;
	font-size: 0.85rem;
	opacity: 0.75;
}

.sticky,
.gallery-caption,
.bypostauthor {
	display: block;
}

/* =========================================================
   05. THE CONTAINER

   Every section on the site sizes itself against this one class. The steps are
   the ones the site was laid out under; the homepage, header and footer
   narrow it to 1240px themselves in madones-homepage.css.
   ========================================================= */

.container {
	width: 100%;
	max-width: 100%;
	padding-right: 0.75rem;
	padding-left: 0.75rem;
	margin-right: auto;
	margin-left: auto;
}

@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

/* =========================================================
   06. THE PLAIN PAGES

   A page, a post, an archive with no template of its own. Understrap used to
   render these on white with a sidebar; they are the site's own screens now,
   so they are dark like the rest of it.
   ========================================================= */

.madones-plain {
	background:
		radial-gradient(circle at top left, rgba(184, 255, 82, 0.08), transparent 24%),
		radial-gradient(circle at bottom right, rgba(255, 79, 163, 0.05), transparent 22%),
		var(--madones-bg, #070707);
	color: var(--madones-text, #f4f0e8);
}

/* Held to the same width and gutters as every other screen on the site. */
.madones-plain .container {
	max-width: var(--madones-max, 1240px);
	padding-left: var(--madones-gutter, 0px);
	padding-right: var(--madones-gutter, 0px);
}

.madones-plain__header {
	max-width: 760px;
	margin: 0 0 2.5rem;
}

.madones-plain__title {
	margin: 0 0 1rem;
	font-size: clamp(1.9rem, 4vw, 3.6rem);
	font-weight: 900;
	line-height: 0.95;
	letter-spacing: -0.04em;
	text-transform: uppercase;
}

.madones-plain__meta {
	margin: 0;
	color: var(--madones-text-soft, #c9c2b8);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.madones-plain__content {
	max-width: 820px;
	color: var(--madones-text-soft, #c9c2b8);
	font-size: 1.02rem;
	line-height: 1.75;
}

.madones-plain__content > :first-child {
	margin-top: 0;
}

.madones-plain__content h2,
.madones-plain__content h3,
.madones-plain__content h4 {
	margin: 2.4rem 0 0.9rem;
	color: var(--madones-text, #f4f0e8);
	font-weight: 900;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

.madones-plain__content h2 { font-size: 1.6rem; }
.madones-plain__content h3 { font-size: 1.25rem; }
.madones-plain__content h4 { font-size: 1.05rem; }

.madones-plain__content a {
	color: var(--madones-acid, #b8ff52);
	text-decoration: none;
	border-bottom: 1px solid var(--madones-line-strong, rgba(255, 255, 255, 0.22));
}

.madones-plain__content a:hover,
.madones-plain__content a:focus-visible {
	color: var(--madones-acid-bright, #d2ff8a);
	border-bottom-color: currentColor;
}

.madones-plain__content img {
	max-width: 100%;
	height: auto;
}

.madones-plain__content blockquote {
	margin: 1.6rem 0;
	padding-left: 1.2rem;
	border-left: 2px solid var(--madones-acid, #b8ff52);
	color: var(--madones-text, #f4f0e8);
}

.madones-plain__content hr {
	margin: 2.4rem 0;
	border-top-color: var(--madones-line, rgba(255, 255, 255, 0.12));
	opacity: 1;
}

.madones-plain__list {
	display: grid;
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--madones-line-faint, rgba(255, 255, 255, 0.06));
	border: 1px solid var(--madones-line-faint, rgba(255, 255, 255, 0.06));
}

.madones-plain__item {
	padding: 1.5rem;
	background: var(--madones-bg, #070707);
}

.madones-plain__item-title {
	margin: 0 0 0.5rem;
	font-size: 1.3rem;
	font-weight: 900;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

.madones-plain__item-title a {
	color: inherit;
	text-decoration: none;
}

.madones-plain__item-title a:hover,
.madones-plain__item-title a:focus-visible {
	color: var(--madones-acid, #b8ff52);
}

.madones-plain__item-meta {
	margin: 0 0 0.75rem;
	color: var(--madones-text-soft, #c9c2b8);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.madones-plain__item-teaser {
	margin: 0;
	color: var(--madones-text-soft, #c9c2b8);
	line-height: 1.7;
}

/* The way out of the events archive, under the last row. */
.madones-past-shows-more {
	margin: 2.5rem 0 0;
}