/* =============================================================================
CORE
============================================================================= */

/* -----------------------------------------------------------------------------
Variables
----------------------------------------------------------------------------- */

:root {
  --unit-maxwidth-text: 35em;
  --unit-line-height: 1.5em;
  --unit-font-large: 2rem;
}


/* -----------------------------------------------------------------------------
Body and Layout
----------------------------------------------------------------------------- */

* {
  box-sizing: border-box;
}

html {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 16px;
  line-height: var(--unit-line-height);
  margin: 0;
  font-feature-settings: "kern",
  /* font-feature-settings: "kern","liga","clig","ss05","ss07"; */
  /*
  ss02 - alt J
  ss03 - alt M
  ss04 - alt a
  ss05 - alt j
  ss06 - alt l
  ss07 - alt t
  */
}

@media (min-width: 1000px) { html { font-size: 17px; } }

body {
  background-color:#f5efe4;
  color: #403524;
  transition: background-color 0.6s ease;
  margin: 0 calc(1*var(--unit-line-height));
}

main {
  min-height: calc(100vh - 19*var(--unit-line-height));
}

main svg, main img {
  width: 100%;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

svg.illo {
  display: block;
  margin: calc(4*var(--unit-line-height)) auto;
  width: 80%;
  max-width: 22em;
  background-color: red;
}

img.dim {
  filter: brightness(0.95);
}

@media (min-width: 1000px) {
  body.consulting main, body.info main, body.colophon main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: var(--unit-line-height);
  }
  svg.illo {
    margin: 0 auto;
  }
}


/* -----------------------------------------------------------------------------
Typography
----------------------------------------------------------------------------- */

/* h1 { font-weight: 500; } */

h1 {
  font-size: var(--unit-font-large);
  /* margin: 0 0 calc(2*var(--unit-line-height)); */
  letter-spacing: 0;
  font-weight: 600;
  line-height: 1.1;
}

h2 {
  font-size: 1rem;
  margin: calc(1.5*var(--unit-line-height)) 0 0;
  /* color: #afa59b; */
  font-weight: 700;
}

h3 {
  font-size: 1rem;
  margin: calc(1*var(--unit-line-height)) 0 0;
  margin-top: 0;
}

.subtitle {
  font-size: 1.3rem;
  opacity: 0.6;
}

a {
  color: #c42209;
  transition: opacity 0.3s ease;
  text-decoration: none;
  font-weight: 600;
}

a.action {
  /* text-transform: lowercase;
  font-feature-settings: "smcp"; */
  border: none;
}

a.action:after {
  display: inline-block;
  margin-left: 0.6em;
  content: '\2192';
  font-size: 76%;
}

p {
  margin: 0 0 1rem;
  max-width: var(--unit-maxwidth-text);
}

p a, li a {
  border-bottom: 1px solid #ccd;
}

a:hover {
  opacity: 0.5;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li.gap {
  margin-top: var(--unit-line-height);
}


/* =============================================================================
NAVIGATION
============================================================================= */

/* -----------------------------------------------------------------------------
Header
----------------------------------------------------------------------------- */

body>header {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  grid-gap: var(--unit-line-height);
  margin-bottom: calc(2*var(--unit-line-height));
  line-height: 1;
  padding-top: var(--unit-line-height);
  font-size: 1.2rem;
}

body>header svg {
  width: 4rem;
  display: block;
}


a.logo {
  width: 4rem;
  color:#403524;
}

/* body header, footer a, footer {
  /* text-transform: lowercase;
  font-feature-settings: "smcp"; */


/* -----------------------------------------------------------------------------
Footer
----------------------------------------------------------------------------- */

footer {
  line-height: var(--unit-line-height);
  display: grid;
  grid-gap: var(--unit-line-height);
  grid-template-columns: repeat(2,1fr);
  padding-top: calc(3*var(--unit-line-height));
  padding-bottom: var(--unit-line-height);
}

footer>div:first-child, footer>div:last-child {
  grid-column: 1 / span 2;
}

footer div.copyright {
  font-size:14px;
}

@media (min-width: 1000px) {
  footer { grid-template-columns: repeat(4,1fr); }
  footer div:last-child { grid-column-start: 3; }
}


/* =============================================================================
PAGE SPECIFIC
============================================================================= */



/* /* -----------------------------------------------------------------------------
Info
----------------------------------------------------------------------------- */

body.info svg.illo {
  max-width: 28em;
}

body.info svg path {
  fill: #44575f;
}

/* body.info h2 {
  color: #afa59b;
} */

div.clientlist ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@media (min-width: 1000px) {
  div.capabilities {
    margin-left: 50%;
    display: block;
  }

  div.capabilities div:last-child h2 {
    margin-top: var(--unit-line-height);
  }
}