/* arc-convention participant pages. The Arc Oregon: Poppins, brand blue #005E85, white. */
*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: #fff;
	color: #222;
}

.arc-wrap {
	font-family: Poppins, Helvetica, Arial, sans-serif;
	max-width: 560px;
	margin: 0 auto;
	padding: 24px 16px 48px;
	font-size: 20px;
	line-height: 1.5;
}

.arc-wrap h1 {
	font-size: 32px;
	line-height: 1.25;
	margin: 0 0 4px;
	color: #005E85;
}

.arc-wrap { padding-top: 80px; } /* room for the launcher icon above the content */

/* Wider on bigger screens. Text never runs wider than about 680px, whatever the column. */
@media (min-width: 600px) {
	.arc-wrap { max-width: 760px; }
}

@media (min-width: 960px) {
	.arc-wrap { max-width: 1040px; }
}

.arc-wrap p,
.arc-wrap .arc-hint,
.arc-wrap label {
	max-width: 680px;
}

/* ReciteMe launcher: an icon at the top right of the window, against its right edge, outside the
 * content column. Absolute (not fixed): it scrolls away with the page. Room is reserved by .arc-wrap. */
.arc-tools {
	position: absolute;
	top: 12px;
	right: 6px;
	z-index: 2;
	display: block;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	line-height: 0;
}

.arc-tools svg {
	display: block;
	width: 56px;
	height: 56px;
}

/* Visually hidden, still read by screen readers and translated by ReciteMe. */
.arc-vh {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.arc-crumb {
	margin: 0 0 12px;
	font-size: 17px;
}

.arc-crumb a {
	color: #005E85;
}

.arc-crumb a:focus-visible {
	outline: 3px solid #005E85;
	outline-offset: 2px;
}

.arc-session {
	color: #444;
	margin: 0 0 24px;
}

.arc-speaker {
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
	color: #222;
	margin: -20px 0 24px; /* sits tight under the session line */
}


.arc-wrap label {
	display: block;
	font-weight: 600;
	margin: 20px 0 6px;
}

.arc-hint {
	font-size: 17px;
	color: #444;
	margin: 0 0 6px;
}

.arc-wrap textarea,
.arc-wrap input[type="text"] {
	display: block;
	width: 100%;
	font: inherit;
	padding: 12px;
	border: 2px solid #666;
	border-radius: 8px;
	background: #fff;
	color: #222;
}

.arc-wrap textarea {
	min-height: 150px;
	resize: vertical;
}

.arc-wrap textarea:focus-visible,
.arc-wrap input[type="text"]:focus-visible,
.arc-btn:focus-visible,
.arc-choice:focus-visible,
.arc-tools:focus-visible {
	outline: 3px solid #005E85;
	outline-offset: 3px;
}

.arc-count {
	font-size: 16px;
	color: #444;
	text-align: right;
}

.arc-btn {
	display: block;
	width: 100%;
	margin-top: 24px;
	padding: 16px;
	font: inherit;
	font-weight: 600;
	color: #fff;
	background: #005E85;
	border: 2px solid #005E85;
	border-radius: 8px;
	cursor: pointer;
}

.arc-btn[disabled] {
	opacity: 0.6;
	cursor: wait;
}

.arc-msg {
	margin: 20px 0 0;
	padding: 16px;
	border-radius: 8px;
	background: #e8f2fb;
	border: 2px solid #005E85;
}

.arc-msg.arc-error {
	background: #fdecea;
	border-color: #b3261e;
}

.arc-out:empty {
	display: none;
}

.arc-choice {
	display: block;
	margin-top: 16px;
	padding: 16px;
	text-decoration: none;
	color: #fff;
	background: #005E85;
	border-radius: 8px;
	font-weight: 600;
}

.arc-choice span {
	display: block;
	font-weight: 400;
	font-size: 17px;
}

/* Honeypot: off-screen, not display:none, so simple bots still fill it. */
.arc-hp {
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden;
}

[hidden] {
	display: none !important;
}

@media (min-width: 600px) {
	.arc-btn {
		width: auto;
		min-width: 240px;
	}
}

/* Convention footer: the year's graphics kit, then who hosts. Centered under the content column. */
.arc-footer {
	margin: 40px 0 0;
	text-align: center;
	color: #444;
}

.arc-footer-bands {
	display: block;
	width: 33%;
	min-width: 160px;
	max-width: 300px;
	height: auto;
	margin: 0 auto 16px;
}

.arc-footer-mark {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px 16px;
}

.arc-footer-icon,
.arc-footer-text {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Under about 360px the icon and the text mark stack, icon above. */
@media (max-width: 359px) {
	.arc-footer-mark {
		flex-direction: column;
	}
}

.arc-footer-host {
	margin: 12px 0 0;
	font-size: 15px;
}