@charset "utf-8";
/* Avalon:  global reset, base typography and container spacing. */
body {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  background-color: #000;
  font-weight: 400;
  font-size: 15px;
  color: #7f7f7f;
}
.orange {
	color: var(--action-orange);
}
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
	margin:0;
	padding:0;
}

fieldset, img {
	border:0;
}

#container {
	margin: 8px auto;
	width: 100%;
	height: 100%;
}

@media screen and (min-width:  1023px) {
#container {
	margin: 10px auto;
}
}

@media screen and (min-width:  1279px) {
#container {
	margin: 15px auto;
}
}

@media screen and (min-width:  1365px) {
#container {
	margin: 20px auto;
}
}

/* Shared text, links and action buttons.  Page titles retain their own sizing. */
:root { --paragraph-size: clamp(15px, 1.2vw, 18px); --paragraph-font: "Roboto", Arial, sans-serif; --paragraph-weight: 400; --list-weight: 450; --action-orange: #ff9933; }
@font-face { font-family: "Roboto"; src: url(../fonts/Roboto-Variable.ttf) format("truetype"); font-style: normal; font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url(../fonts/SourceSans3-Regular.ttf) format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url(../fonts/SourceSans3-Semibold.woff) format("woff"); font-style: normal; font-weight: 600; font-display: swap; }
p { font-family: var(--paragraph-font); font-weight: var(--paragraph-weight); font-size: var(--paragraph-size); line-height: 1.5; margin-inline-start: var(--paragraph-indent, 0); }
a { color: var(--action-orange); text-decoration: underline; text-underline-offset: .15em; }
a:hover, a:focus-visible { color: #fff; }
:where(button, input[type="submit"], input[type="button"], input[type="reset"]), .button {
  display: inline-block;
  box-sizing: border-box;
  padding: 1vmin 3vmin;
  border: 1px solid var(--action-orange);
  border-radius: .4vmin;
  background: rgba(0, 0, 0, .55);
  box-shadow: none;
  color: var(--action-orange);
  font-family: inherit;
  font-size: var(--paragraph-size);
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
:is(button, input[type="submit"], input[type="button"], input[type="reset"], .button):hover,
:is(button, input[type="submit"], input[type="button"], input[type="reset"], .button):focus-visible { border-color: #fff; background: rgba(0, 0, 0, .8); color: #fff; }
:is(button, input[type="submit"], input[type="button"], input[type="reset"], .button):active { border-color: var(--action-orange); background: #000; color: #fff; }
:where(a, button, input[type="submit"], input[type="button"], input[type="reset"]):focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@font-face { font-family: AvalonSemibold; src: url(../fonts/SourceSans3-Semibold.woff) format("woff"); font-style: normal; font-weight: 600; font-display: swap; }

/* Normal-width subheadings; indent the paragraph immediately following h3. */
:root { --subheading-indent: 3vmin; }
h2, h3 { font-family: AvalonBold, "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-weight: 400; font-stretch: normal; letter-spacing: normal; line-height: 1.3; margin-block: 2vmin 1vmin; }
h2 { font-size: clamp(24px, 3.5vmin, 28px); }
h3 { font-family: AvalonSemibold, "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-weight: 600; font-size: clamp(20px, 2.75vmin, 26px); margin-inline-start: var(--subheading-indent); text-decoration: none; }
h3 + p { --paragraph-indent: var(--subheading-indent); }

/* Fine-pointer desktop text is lighter; touch lists retain a little more presence. */
@media (min-width: 800px) and (hover: hover) and (pointer: fine) {
  :root { --paragraph-weight: 350; --list-weight: 300; }
}