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

/* Remove default padding */
ul[class], ol[class] {
  padding: 0; }

/* Remove default margin */
body, h1, h2, h3, h4, p, ul[class], ol[class], li, figure, figcaption, blockquote, dl, dd {
  margin: 0; }

/* Set core body defaults */
body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5; }

/* Remove list styles on ul, ol elements with a class attribute */
ul[class], ol[class] {
  list-style: none; }

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto; }

/* Make images easier to work with */
img {
  max-width: 100%;
  display: block; }

/* Natural flow and rhythm in articles by default */
article > * + * {
  margin-top: 1em; }

/* Inherit fonts for inputs and buttons */
input, button, textarea, select {
  font: inherit; }

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important; } }

/*
$unit: percentage(69 / 960);
$gutter: percentage(12 / 960);

$unit: percentage(58 / 960);
$gutter: percentage(24 / 960);

$unit: percentage(68 / 970);
$gutter: percentage(14 / 970);
$unit: percentage(57 / 970);
$gutter: percentage(26 / 970);

$unit: percentage(77 / 1056);
$gutter: percentage(12 / 1056);
*/
/*
$unit: percentage(66 / $fullwidth);
$gutter: percentage(24 / $fullwidth);
*/
/*! layout elements
--------------------------------*/
/* HTML definitions */
body {
  margin: 0;
  padding: 0;
  background: white;
  font-family: "loos-normal", "helvetica neue", helvetica, arial, sans-serif;
  font-style: normal;
  font-weight: 200;
  font-size: 18px;
  line-height: 1.65;
  color: #333; }

::-moz-selection {
  background: #6f99b2;
  color: white;
  text-shadow: none; }

::selection {
  background: #6f99b2;
  color: white;
  text-shadow: none; }

a {
  color: #53809b;
  font-weight: 500; }
  a:visited {
    color: #41657a; }
  a:hover {
    color: #5fa09d;
    text-decoration: none; }
  a:focus {
    outline: thin dotted; }
  a:hover, a:active {
    outline: 0; }

h1, h2, h3, h4, h5, h6 {
  font-family: "loos-wide", "helvetica neue", helvetica, arial, sans-serif;
  font-style: normal;
  font-weight: 200;
  color: #5f7c80;
  margin: 0 0 .4em 0; }
  h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: inherit;
    font-weight: inherit; }

h4, h5, h6 {
  font-weight: 300; }

h1 {
  font-size: 225%;
  color: #999; }

h2 {
  font-size: 200%; }

h3 {
  font-size: 125%; }

h4 {
  font-size: 112.5%; }

h1 a, h2 a, h3 a, h4 a,
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited {
  text-decoration: none;
  font-weight: 400; }

p, ul, ol, hr {
  margin: 0 0 1.5em 0; }

hr {
  clear: both; }

hr.clr {
  visibility: hidden;
  height: 0;
  width: 0;
  margin: 0;
  border: 0; }

iframe {
  width: 100%; }

/*-- form elements
--------------------------------*/
form {
  display: block; }
  form hr {
    width: 100%; }
  form p {
    width: 100%;
    float: left;
    margin-bottom: .1em; }
  form ul {
    margin: 0;
    padding: 0;
    list-style: none; }
    form ul li.submit {
      margin-top: 1rem; }

fieldset legend {
  display: none; }

label {
  display: block;
  margin-bottom: .25em; }

input, textarea {
  font-family: "loos-normal", "helvetica neue", helvetica, arial, sans-serif;
  margin-bottom: .5rem; }

input[type='text'],
input[type='email'],
input[type='tel'],
input[type='search'],
textarea, select {
  display: block;
  width: 47.5%;
  border: 1px solid #ccc;
  padding: .4em 1%;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px; }

input:focus, textarea:focus, select:focus {
  background: #ffe; }

input[type='submit'],
input[type='button'],
button {
  appearance: none;
  width: auto;
  text-align: left;
  margin-bottom: 0;
  padding: .6em 1em;
  font-weight: bold;
  background: #5f7c80;
  color: white;
  border: 0;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px; }
  input[type='submit']:hover,
  input[type='button']:hover,
  button:hover {
    background-color: #5fa09d; }

textarea {
  float: none;
  width: 80%;
  font-size: 100%; }

select {
  width: auto; }

.error {
  color: #bd071a;
  font-style: italic;
  margin-bottom: .5rem; }

/*!-- STRUCTURE
--------------------------------*/
.clearfix {
  *zoom: 1; }
  .clearfix:before, .clearfix:after {
    content: " ";
    /* 1 */
    display: table;
    /* 2 */
    height: 0; }
  .clearfix:after {
    clear: both; }

.aligncenter {
  margin: 0 auto;
  position: relative;
  width: 96%;
  max-width: 1056px;
  clear: both; }

#page {
  background: white; }

#branding {
  background: white;
  padding: 2rem;
  border-bottom: 1px solid #ccc; }
  #branding #site-title {
    width: 100%; }
    #branding #site-title img {
      height: auto; }

#main {
  padding: 2rem;
  display: grid;
  gap: 2rem; }

.headshot img {
  object-fit: cover;
  object-position: center; }

#primary.full-width {
  width: 100%; }

#content {
  width: 100%; }

@media screen and (max-width: 600px) {
  .headshot img {
    aspect-ratio: 16/9; } }

@media screen and (min-width: 601px) {
  h2 {
    grid-column: 1/3;
    order: 0; }
  #main {
    grid-template-columns: repeat(2, 1fr); }
  .bio {
    order: 1; }
  .headshot {
    order: 2; }
    .headshot img {
      aspect-ratio: 1/1; } }

@media screen and (min-width: 771px) {
  #main, #branding {
    padding: 2rem 4rem; }
  .headshot img {
    aspect-ratio: 3/2; } }