/* ======================================================================== */
/* Reset & Defaults
 ========================================================================== */
:root {
  --c-bg: #fff;
  --c-loud: #000;
  --c-quiet: #737396; /* 4.54:1 on white | 4.62:1 on black */
  --c-hover: var(--c-loud);
  --c-page-bg: var(--c-loud);
  --c-foot-bg: var(--c-loud);
  --c-headline: var(--c-loud);
  --c-inverse-hover: #ccc;
  --c-highlight: #c8ff00;

  --fs-hero: 12vw;
  --fs-hero-dt: 7vw;
  --fs-headline: .75em;
  --fs-title: 1.25em;
  --fs-copy: .8125em;
}

@media (prefers-color-scheme: dark)   {
  :root {
    --c-bg: #0b0b13;
    --c-loud: #ddd;
    --c-quiet-lt: #9898CE;
    --c-quiet: #9999a9;
    --c-hover: var(--c-loud);
    --c-page-bg: var(--c-bg);
    --c-foot-bg: var(--c-bg);
    --c-headline: var(--c-loud);
    --c-inverse-hover: #ccc;
    --c-highlight: #ff4be0;
  }

  body {
    -webkit-font-smoothing: antialiased;
  }
}

* {box-sizing: border-box;}

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--c-page-bg);
  color: var(--c-quiet);
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.45;
  margin: 0;
  min-height: 100vh;
}

figure {
  margin: 0;
  padding: 0;
}

img {
  aspect-ratio: 1 / 1;
  display: block;
  height: auto;
  max-width: 100%;
  width: 100%;
}

@media (max-width: 420px) {
  img {
    margin-left: 20%;
    max-width: 80%;
  }
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

a:active,
a:hover {
  outline-width: 0;
}

@media all and (min-width: 768px) {
  body { background: var(--c-bg); }
}

/* Layout
 ========================================================================== */
.l_main {
  background: var(--c-bg);
  padding: 1em 2em;
}

.l_hero {
  background: var(--c-bg);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.l_foot {
  background: var(--c-foot-bg);
}

@media all and (min-width: 768px) {
  .l_page {
    display: grid;
    grid-template-columns: .15fr .75fr 1fr;
    grid-template-rows: .5fr 1fr 1fr 2em;
    min-height: 100vh;
  }

  .l_main {
    grid-column: 2 / 3;
    grid-row: 1 / 4;
  }

  .l_hero {
    grid-column: 3 / 5;
    grid-row: 2 / 5;
  }

  .l_foot {
    background: var(--c-bg);
    color: var(--c-quiet);
    grid-column: 1 / 3;
    grid-row: 4 / 5;
  }

  /* Inner Layout */
  .l_main,
  .l_foot {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
}

/* Typography
 ========================================================================== */
.a_hero {
  color: var(--c-headline);
  font-size: var(--fs-hero);
  line-height: .9em;
  margin: 2.414rem 0 1.5rem;
}

.a_section_headline {
  font-size: var(--fs-headline);
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: .1rem;
  margin: 0 0 .25rem;
}

.a_title {
  color: var(--c-headline);
  font-size: var(--fs-title);
  margin: 0;
}

.a_copy {
  font-size: var(--fs-copy);
  margin: 0 0 .5rem 0;
  max-width: 45ch;
}

a, a:visited {
  color: var(--c-quiet);
  display: inline-block;
  min-width: 3rem;
  text-decoration: none;
  transition: all .3s ease-out;
}

a:hover {
  color: var(--c-hover);
  text-decoration: none;
}

a.a_btnlink, a.a_btnlink:visited {
  border: 1px solid var(--c-quiet);
  border-radius: 2px;
  font-weight: bold;
  margin: .5rem 0;
  padding: .5rem 1rem;
}

a.a_btnlink:hover {
  border: 1px solid var(--c-headline);
  color: var(--c-headline);
}

.l_foot a:hover {
  color: var(--c-inverse-hover);
}

::selection {
  background: var(--c-highlight);
}

/* Add in responsive type and style overrides for desktop */
@media all and (min-width: 768px) {
  .a_hero {
    font-size: var(--fs-hero-dt);
  }

  .l_foot a:hover {
    color: var(--c-hover);
    text-decoration: none;
  }
}

/* Modules
 ========================================================================== */
.m_hlist {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0 0 1rem 0;
}

.m_hlist li {
  margin: 0 .5rem .5rem 0; /* ensure touch-target space is 8px */
  padding: 0;
}

.m_hlist li:last-child {
  margin: 0;
  width: 100%;
}

a.a_hlist_textlink {
  display: block;
  height: 3rem;  /* ensure touch-target height of 48px */
}

.l_foot small {
  color: var(--c-quiet);
  font-size: 13px;
  display: block;
  margin: .5em 1em;
}

/* Icons
 ========================================================================== */
.a_icon {
  height: 48px;
  padding: 1rem 1rem 0 0;
  width: 48px;
}

.a_icon path {
  fill: var(--c-quiet);
  transition: fill .3s ease-out;
}

.a_icon:hover path {
  fill: var(--c-hover);
}

/* Accessibility
 ========================================================================== */
.sr_only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}