/*!
Theme Name: STOP 6.0
Theme URI: http://stopdesign.com/
Author: Douglas Bowman
Author URI: https://stopdesign.com/
Description: Custom theme for stopdesigncom
Version: 6.0.4
Text Domain: stop
Tags: 
*/

/*!-------------------------------------------------------------
### COLORS
---------------------------------------------------------------- */

:root {
  /* Primary */
  --c-teal-dark:      #46a0af;  /*  70, 160, 175   */
  --c-teal:           #38b29d;  /*  56, 178, 157   */
  --c-green:          #52cc94;  /*  82, 204, 148   */
  --c-green-yellow:   #a6cc52;  /*  166, 204, 82   */
  --c-yellow:         #e5db5c;  /*  229, 219, 92   */
  --c-yellow-orange:  #e5bb5c;  /*  229, 187, 92   */
  --c-orange:         #e59a5c;  /*  229, 154, 92   */
  --c-orange-red:     #d86c6c;  /*  216, 108, 108  */
  --c-red:            #cc5484;  /*  204, 84, 132   */
  --c-purple:         #ac60bf;  /*  172, 96, 191   */
  --c-violet:         #7562d9;  /*  117, 98, 217   */
  --c-blue:           #527acc;  /*  82, 122, 204   */

  /* Primary + 30% black */
  --ck-teal-dark:     #31707a;  /*  49, 112, 122   */
  --ck-teal:          #277c6e;  /*  39, 124, 110   */
  --ck-green:         #398e67;  /*  57, 142, 103   */
  --ck-green-yellow:  #748e39;  /*  116, 142, 57   */
  --ck-yellow:        #a09940;  /*  160, 153, 64   */
  --ck-yellow-orange: #a08340;  /*  160, 131, 64   */
  --ck-orange:        #a06b40;  /*  160, 107, 64   */
  --ck-orange-red:    #974b4b;  /*  151, 75, 75    */
  --ck-red:           #8e3b5c;  /*  142, 59, 92    */
  --ck-purple:        #784385;  /*  120, 67, 133   */
  --ck-violet:        #524497;  /*  82, 68, 151    */
  --ck-blue:          #39558e;  /*  57, 85, 142    */

  /* Cool grays */
  --c-000:  #09090a;  /*  9, 9, 10       */
  --c-111:  #14151a;  /*  20, 21, 26     */
  --c-222:  #22242b;  /*  34, 36, 43     */
  --c-333:  #37373b;  /*  55, 55, 59     */
  --c-555:  #575961;  /*  87, 89, 97     */
  --c-777:  #737580;  /*  115, 117, 128  */
  --c-999:  #999cad;  /*  153, 156, 173  */
  --c-bbb:  #b3b6c7;  /*  179, 182, 199  */
  --c-ddd:  #d8dae5;  /*  216, 218, 229  */
  --c-eee:  #edeef2;  /*  237, 238, 242  */
  --c-fff:  #f7f8fc;  /*  247, 248, 252  */  
  
  /* Fonts */
  --fam-serif:  freight-text-pro,serif;
  --fam-sans:   ff-meta-web-pro,sans-serif;
  --fam-sans-h: ff-meta-headline-web-pro,sans-serif;
  --fam-fa:     "Font Awesome 6 Pro";
  }

/*
==============================================================*/


/*!-------------------------------------------------------------
### TABLE OF CONTENTS:
----------------------------------------------------------------
# Setup
  - Normalize
  - Box sizing (css-tricks.com)
# Base
  - Typography
  - Elements
  - Lists
  - Links
  - Forms
# Layout
  - Groups
  - Grids
# Header
  - Logo
  - Nav
==============================================================*/


/*!-----------------------------------------------------------
#
### Setup
#
==============================================================
==============================================================*/

/*!Normalize
--------------------------------------------- */
/*!normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bold}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}


/*!Viewport
--------------------------------------------- */
@viewport {width: device-width;} @-ms-viewport {width: device-width;}


/*!Box sizing
--------------------------------------------- */
/*!Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*, ::after, ::before {box-sizing: border-box;} html {box-sizing: border-box;}



/*!-----------------------------------------------------------
#
### Base
#
==============================================================
==============================================================*/

/*!Typography
--------------------------------------------- */
html {
	font-size: 62.5%;
  }
body {
  font-family: var(--fam-serif);
  font-size: 2.1rem;
  line-height: 1.5;
  font-weight: 400;
  }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fam-sans-h);
  margin: 0 0 0.2em;
  line-height: 1.5;
  font-weight: 700;
  clear: both;
  }
h1 { font-size: 3.4rem; }
h2 { font-size: 2.8rem; text-transform: lowercase; line-height: 1.25; }
h2:not(:first-child) { margin-top: 0.8em; }
h3 { font-size: 2.4rem; font-weight: 600; text-transform: lowercase; }
h3:not(:first-child) { margin-top: 0.8em; }
h4 { font-size: 1.8rem; font-weight: 600; }
h5 { font-size: 1.6rem; }
h6 { font-size: 1.4rem; }
h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus { outline: none; }

p {
  margin: 0;
  margin-bottom: 1.2rem;
  }
p:last-child {
  margin-bottom: 0;
  }

cite, dfn, em, i {
  font-style: italic;
  }
address {
  margin: 0 0 1.5rem;
  }
pre {
  background: var(--c-eee);
  font-family: "Courier 10 Pitch",courier,monospace;
  line-height: 1.6;
  margin-bottom: 1.6em;
  max-width: 100%;
  overflow: auto;
  padding: 1.6em;
  border-radius: 5px;
  }
code, kbd, tt, var {
  font-family: monaco,consolas,"Andale Mono","DejaVu Sans Mono",monospace;
  font-size: 1.7rem;
  }
p code {
  color: var(--ck-green);
  }
pre.wp-block-code {
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  }
abbr, acronym {
  border-bottom: 1px dotted #666;
  cursor: help;
  }
ins, mark {
  background: #fff9c0;
  text-decoration: none;
  }
big {
  font-size: 125%;
  }
*::selection {
  background: rgba(229, 187, 92, 0.5);
  }
.sub {
  font-size: 0.8em;
  line-height: 1.5;
  color: var(--c-777);
  }
.single .sub, .single .sub a {
  font-family: var(--fam-sans);
  font-weight: 300;
  }




/*!Elements
--------------------------------------------- */
body {
  background: #fff;
  color: var(--c-111);
  }
hr {
  background-color: var(--c-ddd);
  border: 0;
  height: 1px;
  margin-bottom: 1.5em;
  }
embed, iframe, object {
  /*!Make sure embeds and iframes fit their containers. */
  max-width: 100%;
  }
img {
  height: auto;
  max-width: 100%;
  }
figure {
  margin: 0;
  max-width: 100%;
  }
figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5px;
  }
figure.is-resized img {
  width: auto;
  }
figcaption {
  margin-top: 0.4rem;
  font-family: var(--fam-sans);
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 1.4;
  color: var(--c-555);
  }

blockquote {
  margin: 1rem 0;
  }
blockquote:not(.twitter-tweet) {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 4px;
  margin: 0;
  font-style: italic;
  }
:not(figure) > blockquote:not(.twitter-tweet) {
  background: var(--c-fff);
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 18px 18px 18px 12px;
  border-radius: 5px;
  color: var(--c-333);
  }
.summaries :not(figure) > blockquote:not(.twitter-tweet) {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 12px 16px 14px 8px;
  }
blockquote > * {
  grid-column: 2 / span 1;
  }
blockquote::before, blockquote p:last-child::after, blockquote p:only-of-type::after {
  font-family: var(--fam-fa);
  font-weight: bold;
  opacity: 0.8;
  color: var(--c-bbb);
  }
blockquote:not(.twitter-tweet)::before {
  content: '\f10d';
  font-size: 1em;
  position: relative;
  top: -.2em;
  padding: 0 2px;
  }
  @media only screen and (min-width:1000px) {
    blockquote {
      column-gap: 6px;
      }
    :not(figure) > blockquote:not(.twitter-tweet) {
      padding: 20px 24px 24px;
      }
    .summaries :not(figure) > blockquote:not(.twitter-tweet) {
      padding: 12px 20px 14px 12px;
      }
    blockquote::before {
      top: -.2em;
      }
    }
blockquote:not(.twitter-tweet) p:last-child::after, blockquote:not(.twitter-tweet) p:only-of-type::after {
  content: '\f10e';
  margin-left: 0.2em;
  padding: 0 2px;
  font-size: 0.6em;
  vertical-align: text-top;
  }
blockquote p:only-of-type {
  margin-bottom: 0.5rem;
  }
blockquote cite {
  font-family: var(--fam-sans);
  font-size: 2rem;
  font-style: normal;
  font-weight: 300;
  }



/*!Lists
--------------------------------------------- */
ol, ul {
  margin: 0 0 1.8rem;
  }
p + ol, p + ul {
  margin-top: -0.4rem;
  }
ul {
  list-style: disc;
  }
ol {
  list-style: decimal;
  }
li>ol, li>ul {
  margin-bottom: 0;
  margin-left: 1.5em;
  }
dt {
  font-weight: 700;
  }
dd {
  margin: 0 0 .5em;
  }



/*!Links
--------------------------------------------- */
a {
  color: var(--c-teal-dark);
  text-decoration: none;
  }
a:active, a:focus, a:hover {
  color: var(--ck-teal-dark);
  }
a:active, a:hover {
  outline: 0;
  text-decoration: underline;
  }
main p a {
  font-weight: 700;
  }
.external-link a {
  display: grid;
  grid-template-columns: 1fr auto;
  }
.external-link a::after {
  content: "\f08e";
  position: relative;
  top: .1em;
  padding-left: .1em;
  font-family: var(--fam-fa);
  font-size: .6em;
  font-weight: normal;
  }

main a.more-link {
  font-family: var(--fam-sans);
  font-size: 1.5rem;
  font-weight: 300;
  white-space: nowrap;
  }
.more-link::after {
  content: '\2009\f061';
  font-family: var(--fam-fa);
  font-weight: 300;
  font-size: 0.7em;
  }



/*!Forms
--------------------------------------------- */
form { max-width: 100%; font-size: 1.8rem; }
button, .button, .wp-block-button__link, input[type=button], input[type=reset], input[type=submit] {
  background: var(--c-teal-dark);
  display: inline-block;
  padding: 6px 15px 10px;
  border: 0 none;
  border-radius: 5px;
  font-family: var(--fam-sans);
  font-size: 1em;
  line-height: 1.3;
  font-weight: 700;
  white-space: nowrap;
  color: #fff;
  }
button:hover, .button:hover, .wp-block-button__link:hover, input[type=button]:hover, input[type=reset]:hover, input[type=submit]:hover, button:focus, .button:focus, .wp-block-button__link:focus, input[type=button]:focus, input[type=reset]:focus, input[type=submit]:focus {
  background: var(--ck-teal-dark);
  outline: 0;
  text-decoration: none;
  filter: contrast(120%);
  cursor: pointer;
  color: #fff;
  }
input[type=text], input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=range], input[type=search], input[type=tel], input[type=time], input[type=url], input[type=week], textarea {
  background-color: var(--c-fff);
  padding: 8px 12px 10px;
  border: 1px solid var(--c-ddd);
  border-radius: 5px;
  width: 100%;
  max-width: 100%;
  font-family: var(--fam-sans);
  font-weight: 500;
  font-size: 1em;
  line-height: 1.3;
  color: var(--c-555);
  }
input:not([type="submit"]):focus, textarea:focus {
  outline: none;
  border-color: var(--c-teal-dark);
  }
textarea {
  padding-top: 8px;
  }
form input::placeholder, form textarea::placeholder {
  font-family: var(--fam-sans);
  font-size: 1em;
  font-weight: 300;
  color: var(--c-999);
  }
form input:focus::placeholder, form textarea:focus::placeholder {
  color: var(--c-ddd);
  }
select {
  border: 1px solid var(--c-ddd);
  }
/*! Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
  }
input[type=number] {
  /*! Firefox */
  -moz-appearance: textfield;
  }
fieldset {
  margin: 0;
  padding: 0;
  border: 0 none;
  width: 100%;
  }
textarea, form textarea.input-text {
  width: 100%;
  line-height: 1.4;
  }
label {
  margin-top: 1px;
  font-size: 0.88em;
  font-weight: 300;
  line-height: 1.4em;
  color: #57524e;
  }

.mc4wp-response, .mc4wp-form p {
  font-size: 1.6rem;
  }
footer.site .mc4wp-response {
  color: #b3aaa1;
  }



/*!-----------------------------------------------------------
#
### !LAYOUT
#
==============================================================
==============================================================*/

main.content > *, .alignwide > *, .container {
  margin-left: 30px;
  margin-right: 30px;
  }
.page main.content, .journal main.content, .search main.content {
  margin-bottom: 5rem;
  }
  @media only screen and (min-width:640px) {
    main.content > *, .alignwide > *, .container, .alignwide .container  {
      max-width: 580px;
      margin-left: auto;
      margin-right: auto;
      }
    }
  @media only screen and (min-width:1000px) {
    main.content > *, .alignwide > *, .container, .alignwide .container  {
      max-width: 800px;
      }
    .page main.content, .journal main.content, .search main.content {
      margin-bottom: 7rem;
      }
    }
  @media only screen and (min-width:1200px) {
    main.content > *, .alignwide > *, .container, .alignwide .container {
      max-width: 980px;
      }
    }
main.content .alignwide, main.content * .alignwide > *, main.content .container, .container .container {
  margin-left: 0;
  margin-right: 0;
  max-width: none;
  }


/*!Columns
--------------------------------------------- */
.wp-block-columns {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 10px;
  margin-top: 3rem;
  margin-bottom: 3rem;
  }
.wp-block-columns .wp-block-columns, .wp-block-group .wp-block-columns {
  margin: 0;
  }
header.page + .wp-block-columns {
  margin-top: 0;
  }
.wp-block-columns:last-child {
  padding-bottom: 2rem;
  }
.wp-block-group .wp-block-columns:last-child {
  margin-bottom: 0;
  }
.wp-block-group .wp-block-columns + .wp-block-columns, .wp-block-group p + .wp-block-columns {
  margin-top: 3rem;
  }

/* 
 * Credit to David Bushell for aiding push of WP Columns Block to CSS grid 
 * Source: https://dbushell.com/2020/11/02/wordpress-gutenberg-columns-block-css-styles/
 */
.wp-block-columns > * {
  grid-column-start: auto;
  grid-column-end: span 12;
  }
.wp-block-column:only-child, .wp-block-column:last-child {
  margin-bottom: 0;
  }
  @media only screen and (max-width:639px) {
    .col2s .wp-block-column {
      grid-column-start: auto;
      grid-column-end: span 6;
      }
    .col2s .wp-block-column:only-child {
      grid-column-end: span 12;
      }
    .wp-block-columns.swap .wp-block-column:nth-child(2)   {
      order: -1;
      margin-bottom: 2rem;
      }
    }
  @media only screen and (min-width:640px) and (max-width:999px) {
    .col2m .wp-block-column {
      grid-column-start: auto;
      grid-column-end: span 6;
      }
    .col2m .wp-block-column:only-child {
      grid-column-end: span 12;
      }
    /* 1-column small-screen overrides */
    .col1s .wp-block-column[style*='33.33%'], .col1s .wp-block-column[style*='66.66%'], .col1s .wp-block-column[style*='25%'], .col1s .wp-block-column[style*='50%'] {
      grid-column-end: span 12;
      }
    .wp-block-columns.col1s.swap .wp-block-column:nth-child(2)   {
      order: -1;
      }
    }
  @media only screen and (min-width:640px) {
    .wp-block-columns {
      grid-template-columns: repeat(12, 1fr);
      grid-gap: 20px;
      }
    .wp-block-column {
      grid-column-start: auto;
      grid-column-end: span 4;
      }
    .wp-block-column:only-child {
      grid-column-end: span 12;
      }
      
    /* Three column layout */
    .wp-block-column:not([style*='flex-basis']):nth-last-child(3):first-child, .wp-block-column:not([style*='flex-basis']):nth-last-child(3):first-child ~ .wp-block-column {
      grid-column-end: span 4;
      }
      
    /* "25 / 50 / 25" layout */
    .wp-block-column[style*='25%'] {
      grid-column-end: span 3;
      }
    .wp-block-column[style*='50%'] {
      grid-column-end: span 6;
      }
      
    /* "66 / 33" and "33 / 66" layouts */
    .wp-block-column[style*='33.33%'] {
      grid-column-end: span 4;
      }
    .wp-block-column[style*='66.66%'] {
      grid-column-end: span 8;
      }      
    }
  @media only screen and (min-width:1000px) {
    .wp-block-columns {
      grid-gap: 28px;
      }
    .wp-block-columns:last-child {
      padding-bottom: 3rem;
      }
    }



/*!Galleries
--------------------------------------------- */
.wp-block-gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 20px;
  padding: 0;
  margin: 0;
  }
.wp-block-gallery > figure {
  grid-column-start: auto;
  grid-column-end: span 6;
  aspect-ratio: 1 / 1;
  margin: 0;
  overflow: hidden;
  display: flex;
  vertical-align: middle;
  align-items: center;
  }
.wp-block-gallery > figure:only-child {
  grid-column-end: span 12;
  }
.wp-block-gallery > figure:nth-child(odd) {
  grid-row-start: auto;
  grid-row-end: span 2;
  aspect-ratio: 1 / 2;
  }
.wp-block-gallery > figure img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  }
  @media only screen and (min-width:640px) and (max-width:999px) {
    .wp-block-gallery > figure {
      grid-column-end: span 4;
      }
    .wp-block-gallery > figure:nth-child(5) {
      grid-column: 5 / span 4;
      grid-row: 2 / span 2;
      }
    .wp-block-gallery > figure:nth-child(8) {
      grid-column: 5 / span 8;
      grid-row-end: span 2;
      aspect-ratio: unset;
      }
    }
  @media only screen and (min-width:1000px) {
    .wp-block-gallery > figure {
      grid-column-end: span 3;
      }
    .wp-block-gallery > figure:nth-child(7) {
      grid-column: 10 / span 3;
      grid-row: 2 / span 2;
      }
    }



/*!-----------------------------------------------------------
#
### !HEADER
#
==============================================================
==============================================================*/

header.site {
  margin: 0;
  padding: 0;
  }
header.site .container {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: 1rem;
  padding: 2.4rem 0;
  align-items: center;
  }
header.site .logo {
  margin: 0;
  grid-column: 1 / span 1;
  grid-row: 1;
  justify-self: start;
  }
header.site .logo img {
  display: block;
  width: 150px;
  height: auto;
  border-radius: 5px;
  }
header.site .nav-button {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  }
header.site nav.main {
  grid-column: 1 / -1;
  }

  @media (min-width:400px) {
    header.site .logo img {
      width: 170px;
      }
    }
  @media (min-width:1000px) {
    header.site .container {
      grid-template-columns: auto 1fr auto;
      padding: 5rem 0;
      }
    header.site .logo {
      grid-column: 1;
      grid-row: 1;
      }
    header.site .logo img {
      width: 260px;
      }
    header.site nav.main {
      grid-column: 2;
      grid-row: 1;
      }
    }
  @media (min-width:1200px) {
    header.site .logo img {
      width: 300px;
      }
    }


/*!NavMain
--------------------------------------------- */
.nav-lock-scroll {
  }

.nav-button {
  margin-right: -15px;
  display: block;
  width: calc(2.4rem + 30px);
  height: 4.4rem;
  padding: 0 15px;
  overflow: hidden;
  z-index: 902;
  text-decoration: none !important;
  font-size: 3rem;
  line-height: 4.4rem;
  cursor: pointer;
  }
.nav-button {
  color: var(--c-teal-dark);
  }
.nav-button:active, .nav-button:focus, .nav-button:hover {
  color: var(--ck-teal-dark);
  }
.nav-button::before, .icon-menu::before {
  content: "\f0c9"; /*! icon hamburger - mobile menu button */
  display: block;
  font-family: var(--fam-fa);
  font-size: 2.4rem;
  text-decoration: none;
  text-align: center;
  vertical-align: top;
	}

nav.main {
  display: block;
  position: static;
  margin-left: -30px;
  margin-right: -30px;
  font-family: var(--fam-sans-h);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 5rem;
  }
nav.default {
  display: none;
  }
nav.main ul {
  display: block;
  position: relative;
  zoom: 1;
  list-style-type: none;
  margin: 0;
  padding: 0;
  }
nav.main li {
  cursor: pointer;
	}

nav.main a {
  display: grid;
  column-gap: 5px;
  align-items: baseline;
  position: relative;
  padding: 0 30px 1px;
  /* nav text color */
  color: #78726c;
  }
  /* Nav colors */
  nav.main li:nth-child(1) a { color: var(--c-orange); }
  nav.main li:nth-child(2) a { color: var(--c-orange-red); }
  nav.main li:nth-child(3) a { color: var(--c-purple); }
  nav.main li:nth-child(4) a { color: var(--c-blue); }
  nav.main li:nth-child(5) a { color: var(--c-teal-dark); }
  
  /* Nav icons */
  nav.main li a::before {
    display: grid;
    position: relative;
    top: -.05em;
    left: -0.6rem;
    justify-self: center;
    width: 3.2rem;
    height: 2.8rem;
    border: 1px solid transparent;
    border-radius: 4px;
    text-align: center;
    content: '\f059';
    font-family: var(--fam-fa);
    font-weight: 300;
    font-size: 1.8rem;
    line-height: 1;
    align-content: center;
    }
  nav.main li.nav-home a::before { content: '\f015'; }
  nav.main li.nav-journal a::before { content: '\f02d'; }
  nav.main li.nav-portfolio a::before { content: '\f0b1'; }
  nav.main li.nav-about a::before { content: '\e283'; }
  nav.main li.nav-contact a::before { content: '\e5bb'; }
  
  /* main nav hover */
  nav.main li:hover a::before { border: 1px solid var(--c-bbb); }
  nav.main li.nav-home:hover a::before { border-color: var(--c-orange); color: var(--c-orange); }
  nav.main li.nav-journal:hover a::before { border-color: var(--c-orange-red); color: var(--c-orange-red); }
  nav.main li.nav-portfolio:hover a::before { border-color: var(--c-purple); color: var(--c-purple); }
  nav.main li.nav-about:hover a::before { border-color: var(--c-blue); color: var(--c-blue); }
  nav.main li.nav-contact:hover a::before { border-color: var(--c-teal-dark); color: var(--c-teal-dark); }
  
  /* parent only, not current - portfolio page*/
  /* nav.main li a::before { background: rgba(179, 170, 161, 0.2); } */
  /* nav.main li.nav-home a::before { background-color: rgba(229, 154, 92, 0.2); color: var(--ck-orange); } */
  .single.journal nav.main li.nav-journal a::before { background-color: rgba(216, 108, 108, 0.2); color: var(--ck-orange-red); }
  .single.portfolio nav.main li.nav-portfolio a::before { background-color: rgba(172, 96, 191, 0.2); color: var(--ck-purple); }
  /* nav.main li.nav-about a::before { background-color: rgba(82, 122, 204, 0.2); color: var(--ck-blue); } */
  /* nav.main li.nav-contact a::before { background-color: rgba(70, 160, 175, 0.2); color: var(--ck-teal-dark); } */
  
  /* current item */
  nav.main li.current-menu-item a::before { background: #b3aaa1; color: #fff; }
  nav.main li.nav-home.current-menu-item a::before { background-color: var(--c-orange); color: #fff; }
  nav.main li.nav-journal.current-menu-item a::before { background-color: var(--c-orange-red); color: #fff; }
  nav.main li.nav-portfolio.current-menu-item a::before { background-color: var(--c-purple); color: #fff; }
  nav.main li.nav-about.current-menu-item a::before { background-color: var(--c-blue); color: #fff; }
  nav.main li.nav-contact.current-menu-item a::before { background-color: var(--c-teal-dark); color: #fff; }
  
nav.main a:hover, nav.main a:active {
  text-decoration: none;
  }
nav.main li.current-menu-item:hover, nav.main li.current-menu-item:hover a {
  }

  @media only screen and (min-width: 640px) and (max-width: 999px) {
    .nav-button, .nav-close {
      margin-right: -20px;
      }
    }
  
  @media only screen and (max-width: 999px) {
    nav.main li {
      border-bottom: 1px solid rgba(179, 170, 161, 0.2);
	    }
    nav.main li a {
      grid-template-columns: auto 1fr;
      column-gap: 0;
      font-size: 2.2rem;
      }
    .nav-no-js .nav-button:hover + .nav, .nav-no-js .nav:hover, .nav-no-js .nav-button:hover + nav.main + .nav-close, .nav-no-js .nav:hover + .nav-close {
      display: block;
      }
    }
  
  @media only screen and (min-width: 1000px) {
	  .nav-button {
  	  display: none;
		  }
    
    nav.main {
      display: block;
      position: relative;
      justify-self: end;
      align-self: center;
      bottom: auto;
      overflow: visible;
      margin: 0;
      padding: 0 !important;
      line-height:4.4rem;
      }
    nav.main ul {
      display: grid;
      grid-auto-flow: column;
      grid-gap: 10px;
      }
    nav.main li {
      display: inline-block;
      position: relative;
      white-space: nowrap;
      }
  
    nav.main a {
      position: relative;
      padding-left: 0;
      padding-right: 0;
      font-weight: 300;
      border-radius: 5px;
      }
    
    /* custom icons + hover text (span) for desktop */
    nav.main li a::before {
      position: static;
      width: 4.8rem;
      height: 4.4rem;
      font-size: 2.4rem;
      line-height: 4.4rem;
      }
    nav.main li span {
      position: absolute;
      bottom: -1.3em;
      left: 50%;
      transform: translateX(-50%);
      display: none;
      margin: 0;
      font-size: 1.7rem;
      line-height: 1.2;
      text-transform: lowercase;
      }
    nav.main li:hover span {
      display: block;
      }
    }




/*!-----------------------------------------------------------
#
### !CONTENT
#
==============================================================
==============================================================*/


/*!Page-header
--------------------------------------------- */
header.page {
  margin-bottom: 2rem
  }
header.page h1 {
  margin-bottom: 0;
  line-height: 1.1;
  }
body:not(.single.portfolio) header.page h1 {
  text-transform: lowercase;
  }
header.archive h1 {
  text-align: left;
  grid-column: span 2;
  }
body.tag header.archive h1::before {
  content: '#';
  font-family: var(--fam-sans);
  font-weight: 300;
  opacity: 0.5;
  }

header.page .container {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 28px;
  row-gap: 0.6rem;
  }
header.archive {
  font-family: var(--fam-sans);
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.6;
  }
header.archive .container {
  grid-template-columns: 1fr auto;
  }
header.page a {
  font-weight: 300;
  }
  @media only screen and (min-width:1000px) {
    header.page {
      margin-bottom: 3rem
      }
    header.page .container {
      row-gap: 0.8rem;
      }
    }


/*!Breadcrumbs
--------------------------------------------- */
.breadcrumbs {
  margin: 0 0 2rem;
  font-family: var(--fam-sans);
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 1.6;
  color: #363432;
  }
header.archive .breadcrumbs {
  text-align: left;
  }
header.page .breadcrumbs {
  margin-bottom: 0;
  }
.breadcrumbs a {
  font-weight: 300;
  text-transform: lowercase;
  }
.breadcrumbs .divider::after {
  content: '\f105';
  font: normal 300 0.7em/1 var(--fam-fa);
  color: #363432;
  opacity: 0.4;
  }
.breadcrumbs i {
  margin: 0 .1em;
  font-weight: normal;
  font-size: 0.7em;
  color: inherit;
  }
  @media only screen and (min-width:1000px) {
    .breadcrumbs {
      text-align: left;
      }
    }

/*!Filters
--------------------------------------------- */
.filter-link, .filter-link:hover {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 3px;
  align-items: center;
  text-decoration: none;
  text-transform: lowercase;
  }
.filter-link::after {
  content: '\f139';
  font-family: var(--fam-fa);
  font-weight: 300;
  position: relative;
  top: 0.1em;
  }
.closed .filter-link::after {
  content: '\f13a';
  }
.fitler-link:hover::after {
  font-weight: 900;
  }
.filters {
  grid-column: span 2;
  display: block; /* display block this to show by default */
  padding: 1rem 0;
  line-height: 1.4;
  }
.closed .filters {
  display: none;
  }
.filters .filter-columns {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 20px;
  row-gap: 20px;
  }
.filters h3 {
  margin-bottom: 1rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid #edebe8;
  font-size: 1em;
  }
.filters ul {
  list-style: none;
  margin: 0;
  padding: 0;
  }
.filters li {
  margin: 0;
  padding: 0 0 0.4rem;
  display: inline-block;
  width: 100%;
  }
.filter-years ul {
  columns: 4 auto;
  column-gap: 20px;
  }
.filter-tags ul {
  columns: 2;
  column-gap: 20px;
  }
.filter-tags .tag-count {
  font-size: 0.8em;
  color: var(--c-777);
  }
  @media only screen and (min-width:1000px) {
    .filters .filter-columns {
      grid-template-columns: repeat(6, 1fr);
      column-gap: 28px;
      }
    .filter-years ul {
      columns: 2 auto;
      column-gap: 28px;
      }
    .filter-tags {
      grid-column: span 5;
      }
    .filter-tags ul {
      columns: 5;
      column-gap: 28px;
      }
    }


/*!Pagination
--------------------------------------------- */
.pagination {
  display: grid;
  margin: 2rem 0 0;
  font-family: var(--fam-sans);
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 24px;
  }
.pagination div {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  align-items: baseline;
  justify-content: flex-start;
  column-gap: 0;
  }
.pagination a {
  font-weight: 400;
  }
.pagination a:hover, .pagination .current {
  background: var(--c-eee);
  border-radius: 5px;
  text-decoration: none;
  }
.pagination .page-numbers, .pagination .page-label {
  padding: 0.1em .6em 0.4em;
  }
.pagination .page-label {
  padding-left: 0;
  font-size: 0.85em;
  }
.pagination .current {
  font-weight: 700;
  }
.pagination span.dots {
  color: var(--c-777);
  padding-left: 0;
  padding-right: 0;
  }
.pagination .prev, .pagination .next {
  font-size: 0.8em;
  }
  @media only screen and (min-width:1000px) {
    .pagination {
      margin-top: 3rem;
      font-size: 1.8rem;
      line-height: 30px;
      }
    .pagination .page-numbers, .pagination .page-label  {
      padding:.1em .7em .4em;
      }
    .pagination .page-label {
      padding-left: 0;
      }
    }




/*!-----------------------------------------------------------
#
### SINGLE POST singlepost
#
==============================================================
==============================================================*/

/*!Post layout
--------------------------------------------- */
.single article.post {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 20px;
  row-gap: 10px;
  padding: 0 0 3rem;
  }
  @media only screen and (min-width:1000px) {
    .single article.post {
      grid-template-columns: repeat( 12, 1fr );
      column-gap: 28px;
      row-gap: 10px;
      padding: 0 0 4rem;
      }
    .single section.body {
      grid-column: span 8;
      }
    .single .post aside {
      grid-column: 9 / span 4;
      }
    }


/*!Post meta
--------------------------------------------- */
.single .post header {
  display: grid;
  grid-template-areas: 'IMG' 'TTL' 'EXC';
  row-gap: 10px;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #edebe8;
  }
.single .post header h1 {
  grid-area: TTL;
  margin: 0;
  font-size: 2.8rem;
  line-height: 1.2;
  }
.single .post header p.excerpt {
  grid-area: EXC;
  margin: 0;
  font-size: 2.2rem;
  line-height: 1.4;
  font-style: italic;
  font-weight: 400;
  color: #78726c;
  }
.single .post header figure {
  grid-area: IMG;
  margin-bottom: 2px;
  overflow: hidden;
  display: flex;
  vertical-align: middle;
  align-items: center;
  }
.single .post header figure img {
  display: block;
  object-fit: cover;
  object-position: center top;
  width: 100%;
  height: 100%;
  }
  
  @media only screen and (min-width:1000px) {
    .single .post header {
      grid-column: span 12;
      }
    .single .post header h1 {
      font-size: 3.6rem;
      line-height: 1.3;
      }
    .single .post header figure {
      }
    }

.journal section.body figure:not(.link-card) {
  width: auto !important;
  margin-bottom: 1.5rem;
  }
.journal section.body h2 {
  margin: 2rem 0 1rem;
  font-size: 2.4rem;
  line-height: 1.4;
  text-transform: none;
  }
.journal section.body h3:not(.link-title) {
  margin: 2rem 0 1rem;
  font-size: 2.1rem;
  line-height: 1.4;
  text-transform: none;
  }

.single .post aside {
  font-family: var(--fam-sans);
  font-size: 1.6rem;
  line-height: 1.75;
  font-weight: 300;
  }
.single aside nav.post {
  margin-top: 2rem;
  }
.single aside nav.post h2 {
  font-size: 1.8rem;
  line-height: 1.2;
  }
.single aside nav.post .summaries {
  filter: grayscale(40%) opacity(60%);
  }
.single aside nav.post .summaries:hover, .single aside nav.post .summaries:focus {
  filter: grayscale(0%) opacity(100%);
  }
.single aside > .tags {
  margin: 0.6em 0;
  }
.single .meta .tags a {
  color: var(--c-orange-red);
  }
.single nav.next.post {
  margin-top: 2rem;
  border-top: 1px solid var(--c-eee);
  padding-top: 2rem;
  }
  @media only screen and (min-width:1000px) {
    .single .post aside {
      margin-bottom: 2rem;
      }
    }



/*!Related
--------------------------------------------- */
footer.related {
  }
footer.related::before {
  content: '';
  grid-column: 1 / span 6;
  display: block;
  margin-top: 2.5rem;
  padding-bottom: 2rem;
  border-top: 1px solid #edebe8;
  }
footer.related h2 {
  margin: 0 0 2rem;
  font-size: 2.1rem;
  }
footer.related .posts {
  margin-top: 0;
  padding: 0;
  }
footer.related figure:not(.link-card) {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: flex;
  vertical-align: middle;
  align-items: center;
  }
footer.related figure:not(.link-card) img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
  }
  @media only screen and (min-width:1000px) {
    footer.related {
      grid-column: span 12;
      }
    footer.related li:nth-child(n+4) {
      display: none;
      }
    }




/*!-----------------------------------------------------------
#
### BLOCKS
#
==============================================================
==============================================================*/

/*!IntroBlock
--------------------------------------------- */
.intro-block {
  background: #22242b;
  position: relative;
  overflow: hidden;
  padding: 3rem 0 4rem;
  color: #dbd5ce;
  }
.intro-block::before {
  content: '';
  position: absolute;
  top: 260px;
  left: 20px;
  width: 900px;
  height: 160px;
  z-index: 0;
  background: url("/img/logo_stopdesign_500.svg") no-repeat center/cover;
  mix-blend-mode: luminosity;
  opacity: 0.06;
  }
.intro-block > * {
  display: grid;
  row-gap: 0;
  position: relative;
  z-index: 1;
  }
.intro-block h2 {
  margin: 0 0 1rem;
  font-size: 3.6rem;
  line-height: 1.2;
  text-transform: lowercase;
  }
.intro-block h2 span {
  background: linear-gradient(90deg, var(--c-orange), #d67671, #bf678e, #a167a9, #8171b8, #6783b8, #5a98ad, #5ead9a, #76bf83, #a0ca6d, #cecb5e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0 0 1rem;
  filter: brightness(110%) saturate(120%);
  }
.intro-block p {
  font-family: var(--fam-serif);
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 1.5;
  }
  @media only screen and (min-width:400px) {
    .intro-block {
      padding: 3.4rem 0 4.4rem;
      }
    .intro-block::before {
      top: 200px;
      left: 20px;
      }
    .intro-block h2 {
      margin-bottom: 1.2rem;
      font-size: 4rem;
      }
    }
  @media only screen and (min-width:1000px) {
    .intro-block {
      padding: 5rem 0 7rem;
      }
    .intro-block::before {
      top: 190px;
      left: 40px;
      width: 1580px;
      height: 280px;
      }
    .intro-block h2 {
      font-size: 4.8rem;
      }
    .intro-block p {
      font-size: 2.6rem;
      }
    }
  @media only screen and (min-width:1200px) {
    .intro-block {
      padding: 6rem 0 8rem;
      }
    .intro-block::before {
      top: 220px;
      left: 60px;
      width: 1976px;
      height: 350px;
      }
    .intro-block h2 {
      margin-bottom: 2rem;
      font-size: 5.4rem;
      }
    .intro-block p {
      font-size: 3rem;
      }
    }


/*!PostsBlock (Summaries)
--------------------------------------------- */
.home .posts {
  padding: 3rem 0 5rem;
  }
.home .posts:last-child {
  padding-bottom: 0;
  }
.home .module-header {
  margin: 0 0 1.8rem;
  }
.module-header, .module-title {
  display: flex;
  column-gap: 1rem;
  margin: 0 0 1rem;
  align-items: baseline;
  }
.more-link {
  text-transform: lowercase;
  }
.module-header h2, .module-title {
  margin: 0;
  font-size: 2.1rem;
  }
.home .module-header h2 {
  font-size: 2.4rem;
  }
.posts .summaries {
  display: grid;
  list-style: none;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(auto-fill, minmax(185px,1fr));
  justify-content: center;
  column-gap: 20px;
  row-gap: 20px;
  }
.posts .post-grid:not(.no-masonry) {
  grid-auto-rows: 5px;
  }
.posts .summaries > li {
  border-top: 1px solid var(--c-eee);
  }
.posts .summaries .card-content {
  padding-top: 3rem;
  }
.posts .summaries .card-inner {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  row-gap: 0.8rem;
  }
  /* top row */
  .summaries > li:first-child {
    border-top-width: 0;
    }
  .summaries > li:first-child .card-content {
    padding-top: 0;
    }
.summaries .img {
  position: relative;
  display: flex;
  margin: 0;
  vertical-align: middle;
  align-items: center;
  overflow: hidden;
  }
.summaries .img img {
  display: block;
  object-fit: cover;
  filter: saturate(90%);
  width: 100%;
  height: 100%;
  border: 1px solid var(--c-eee);
  border-radius: 5px;
  object-position: center top;
  }

.summaries > li:hover .img img {
  filter: saturate(100%);
  }
.summaries h3 {
  margin: 0 0 0.2rem;
  font-family: var(--fam-sans-h);
  font-size: 2.4rem;
  line-height: 1.2;
  text-transform: none;
  }

.summaries .meta {
  display: flex;
  align-items: baseline;
  column-gap: 5px;
  margin: 0.4rem 0 0.4rem;
  font-family: var(--fam-sans);
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 1.4;
  color: var(--c-777);
  }
li .meta .date::before {
  content: '\f305';
  margin-right: 3px;
  font-family: var(--fam-fa);
  font-size: 1.1rem;
  font-weight: 300;
  position: relative;
  top: 0;
  }
li.link .meta .date::before {
  content: '\f0c1';
  }
li.status .meta .date::before {
  content: '\f075';
  }
li.image .meta .date::before {
  content: '\f03e';
  }
li.gallery .meta .date::before {
  content: '\f302';
  }
li.project .meta .date::before {
  content: '\f0b1';
  }

.meta > a {
  color: inherit;
  }
.meta .tags {
  margin: 0;
  padding: 0;
  list-style: none;
  }
.tags a {
  color: var(--c-purple);
  }
.tags a::before {
  content: '#';
  opacity: 0.5;
  }
.summaries .meta .tags {
  display: flex;
  column-gap: 5px;
  }

.summaries p {
  margin-bottom: 0;
  }
.summaries .ellipsis {
  margin-left: 0.1em;
  color: var(--c-bbb);
  }

  @media only screen and (min-width:450px) {
    /* top row */
    .summaries > li:nth-child(-n+2) {
      border-top-width: 0;
      }
    .summaries > li:nth-child(-n+2) .card-content {
      padding-top: 0;
      }
    }
  @media only screen and (min-width:640px) {
    .posts .summaries {
      grid-template-columns: repeat(auto-fill, minmax(185px,1fr));
      }
    .posts .summaries > li .card-inner {
      row-gap: 5px;
      }
    .summaries .text {
      align-self: start;
      }
    }
  @media only screen and (min-width:1000px) {
    .home .posts {
      padding: 4rem 0 6rem;
      }
    .home .posts:last-child {
      padding-bottom: 0;
      }
    .posts .summaries {
      grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
      column-gap: 28px;
      row-gap: 20px;
      }
    .posts .post-grid:not(.no-masonry) {
      grid-auto-rows: 10px;
      }
    /* top row */
    .posts .summaries > li:nth-child(-n+3) {
      border-top-width: 0;
      }
    .posts .summaries > li:nth-child(-n+3) .card-content {
      padding-top: 0;
      }
    .summaries h3 {
      font-size: 2.4rem;
      }
    }
  @media only screen and (min-width:1000px) {
    .home .posts {
      padding: 5rem 0 7rem;
      }
    }


/*!LinkCard
--------------------------------------------- */
.link-card {
  display: grid;
  max-width: 400px;
  grid-template-columns: auto 1fr;
  border: 1px solid var(--c-eee);
  border-radius: 5px;
  overflow: hidden;
  }
p + .link-card, blockquote + .link-card {
  margin-top: 1rem;
  }
.link-card.hasimg {
  grid-template-columns: 1fr;
  }
.link-card::before {
  background: rgba(82, 122, 204, 0.1);
  content: '\f08e';
  display: block;
  padding: 20px 16px 20px 20px;
  border-right: 1px solid var(--c-eee);
  font-family: var(--fam-fa);
  font-weight: 300;
  font-size: 20px;
  line-height: 20px;
  color: var(--c-blue);
  }
.link-card.hasimg::before {
  display: none;
  }
.link-card.hasimg figcaption {
  order: 2;
  }
.link-card.hasimg img {
  order: 1;
  border-bottom: 1px solid var(--c-eee);
  border-radius: 0;
  }
.link-card figcaption {
  margin: 0;
  padding: 8px 10px;
  line-height: 1.4;
  }
.link-card h3 {
  margin: 0;
  font-size: 1.8rem;
  line-height: 1.3;
  color: var(--c-111);
  }
.link-card:hover h3, .link-card:focus h3 {
  color: var(--c-blue);
  }
.link-card a {
  color: var(--c-777);
  }
.link-card:hover, .link-card:focus {
  border-color: #86a2db;
  }
.link-card:hover h3 {
  color: var(--ck-blue);
  }
.link-card:hover::before, .link-card:focus::before {
  background: rgba(134, 162, 219, 0.6);
  border-right-color: transparent;
  color: #fff;
  }


/*!ImageBlocks
--------------------------------------------- */
figure.wp-block-image, figure.stp-block-image {
  margin: 0 0 1rem;
  }
figure.wp-block-image:only-child, figure.stp-block-image:only-child {
  margin-bottom: 0;
  }




/*!-----------------------------------------------------------
#
### !PORTFOLIO
#
==============================================================
==============================================================*/

/*!ProjectsBlock
--------------------------------------------- */
body.home section.portfolio {
  background: var(--c-eee);
  padding-top: 3rem;
  padding-bottom: 5rem;
  }
section.portfolio .projects .summaries > li.portrait:last-child {
  grid-row: auto / span 1;
  }
  @media only screen and (min-width:640px) {
    }
  @media only screen and (min-width:1000px) {
    body.home section.portfolio {
      padding-top: 4rem;
      padding-bottom: 6rem;
      }
    }
  @media only screen and (min-width:1200px) {
    body.home section.portfolio {
      padding-top: 5rem;
      padding-bottom: 7rem;
      }
    }


/*!ProjectPage
--------------------------------------------- */
body.portfolio {
  font-size: 2rem;
  }
.portfolio main.content {
  background: var(--c-eee);
  padding-top: 4rem;
  padding-bottom: 6rem;
  }
.portfolio header .meta {
  display: flex;
  column-gap: 4px;
  font-family: var(--fam-sans);
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--c-777);
  }
.portfolio header .tags, .portfolio header .tags li {
  display: flex;
  column-gap: 4px;
  }


.portfolio .row {
  margin: 0 0 3rem;
  }
.portfolio .row:last-of-type {
  margin-bottom: 0;
  }
.portfolio .wp-block-columns:last-child {
  padding-bottom: 0;
  }
.portfolio .wp-block-group .wp-block-columns {
  margin-top: 0;
  }
.portfolio figure, .portfolio figure.wp-block-image {
  margin-bottom: 0;
  }

.portfolio figure[class*='ar-'], .stp-block-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 5px;
  }
.portfolio figure.ar-1-1 { aspect-ratio: 1 / 1; }
.portfolio figure.ar-3-4 { aspect-ratio: 3 / 4; }
.portfolio figure.ar-4-3 { aspect-ratio: 4 / 3; }
.portfolio figure.ar-4-5 { aspect-ratio: 4 / 5; }
.portfolio figure.ar-5-4 { aspect-ratio: 5 / 4; }
.portfolio figure.ar-5-7 { aspect-ratio: 5 / 7; }
.portfolio figure.ar-7-5 { aspect-ratio: 7 / 5; }
.portfolio figure[class*='ar-'] img, .stp-block-image img {
  position: relative;
  left: 0 !important;
  object-fit: cover;
  object-position: center center;
  width: 100% !important;
  height: 100% !important;
  }


.portfolio section.body h2 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 2.1rem;
  line-height: 1.4;
  text-transform: none;
  }
.portfolio .wp-block-image + h2, .portfolio p + .wp-block-image, .portfolio .wp-block-image + .wp-block-image {
  margin-top: 3rem;
  }
.portfolio .row .wp-block-columns + h2, .portfolio .row figure + h2, .portfolio .row figure + p {
  margin-top: 1rem;
  }
.portfolio .row p + .wp-block-columns {
  margin-top: 1.5rem;
  }
.portfolio p {
  margin-bottom: 1rem;
  }
.portfolio p:last-child {
  margin-bottom: 0;
  }
.portfolio footer.related::before {
  border-top-color: #fff;
  }

  @media only screen and (max-width:639px) {
    .portfolio .wp-block-columns > * {
      margin-bottom: 1rem;
      }
    .portfolio .wp-block-columns > *:last-child {
      margin-bottom: 0;
      }
    .portfolio .wp-block-columns.swap .wp-block-column.img {
      margin-bottom: 1rem;
      }
    }
  @media only screen and (min-width:640px) {
    }
  @media only screen and (min-width:640px) and (max-width:999px) {
    .portfolio .wp-block-columns.col1s .wp-block-column.img {
      margin-bottom: 1rem;
      }
    }
  @media only screen and (min-width:1000px) {
    .portfolio .row {
      margin: 0 0 5rem;
      }
    }


/*!Summaries (portfolio)
--------------------------------------------- */
.portfolio .projects .summaries {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 10px;
  grid-auto-flow: row dense;
  }
.portfolio .projects .summaries > li {
  grid-column-start: auto;
  grid-column-end: span 6;
  aspect-ratio: 16 / 9
  }
.portfolio .projects .summaries:not(.no-masonry) > li.portrait {
  grid-row: auto / span 3;
  aspect-ratio: auto;
  }
.portfolio .projects .summaries:not(.no-masonry) > li.large:not(.portrait) {
  grid-row: auto / span 2;
  grid-column: 1 / span 12;
  aspect-ratio: auto;
  }
.portfolio .summaries .card-content {
  width: 100%;
  height: 100%;
  }

body:not(.portfolio) .summaries .project .card-inner {
  aspect-ratio: 16 / 9;
  }
.summaries .project .card-inner {
  border-radius: 5px;
  overflow: hidden;
  width: 100%;
  height: 100%;
  }
.summaries .project.portrait .card-inner {
  border-radius: 5px;
  overflow: hidden;
  aspect-ratio: auto;
  height: 100%;
  }
 .summaries .project .img {
  width: 100%;
  height: 100%;
  }
.summaries .project .text {
  background: #000;
  background: linear-gradient(0deg, rgba(0,0,0,0.6) 2rem, rgba(0,0,0,0) 5rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 6px 10px;
  color: #fff;
  }
.summaries .project.darkonlight .text {
  background: #fff;
  background: linear-gradient(0deg, rgba(255,255,255,0.9) 2rem, rgba(255,255,255,0) 7rem);
  color: var(--c-111);
  }
  
.summaries .project h3 {
  margin: 0;
  white-space: nowrap;
  font-size: 1.5rem;
  line-height: 1.3;
  text-transform: none;
  }
.summaries .project h3, .summaries .project .meta {
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  }
.summaries .project .text a {
  color: var(--c-ddd);
  }
.summaries .project .text h3 a {
  color: var(--c-fff);
  }
.summaries .project.darkonlight .text a {
  color: var(--c-111);
  }
.summaries .project .img img {
  border-radius: 0;
  border-width: 0;
  object-position: center center;
  }
.summaries .project .meta {
  margin: 0;
  line-height: 1.4;
  color: var(--c-ddd);
  display: none;
  }
.summaries .project.darkonlight .meta {
  color: var(--c-777);
  }
  @media only screen and (min-width:640px) {
    .summaries .project .meta {
      display: flex;
      }
    .summaries .project .text {
      padding: 10px 15px;
      }
    .summaries .project h3 {
      font-size: 1.7rem;
      }
    .summaries .project .text {
      background: #000;
      background: linear-gradient(0deg, rgba(0,0,0,0.7) 2rem, rgba(0,0,0,0) 8rem);
      }
    .summaries .project.darkonlight .text {
      background: #fff;
      background: linear-gradient(0deg, rgba(255,255,255,0.9) 3rem, rgba(255,255,255,0) 9rem);
      }
    }
  @media only screen and (min-width:1000px) {
    .portfolio .projects .summaries {
      column-gap: 28px;
      row-gap: 24px;
      }
    .portfolio .projects .summaries > li {
      grid-column-end: span 4;
      }
    .portfolio .projects .summaries:not(.no-masonry) > li.portrait {
      grid-row: auto / span 3;
      }
    .portfolio .projects .summaries:not(.no-masonry) > li.large:not(.portrait) {
      grid-row: auto / span 2;
      grid-column: auto / span 8;
      }
    .summaries .project h3 {
      font-size: 1.8rem;
      }
    .summaries .project .text {
      background: #000;
      background: linear-gradient(0deg, rgba(0,0,0,0.7) 2rem, rgba(0,0,0,0) 9rem);
      }
    .summaries .project.darkonlight .text {
      background: #fff;
      background: linear-gradient(0deg, rgba(255,255,255,0.9) 3rem, rgba(255,255,255,0) 10rem);
      }
    }



/*!-----------------------------------------------------------
#
### ABOUT
#
==============================================================
==============================================================*/

.about .intro {
  align-items: end;
  }
.about .intro h2 span {
  background: linear-gradient(90deg, var(--c-orange), #d67671, #bf678e, #a167a9, #8171b8, #6783b8, #5a98ad, #5ead9a, #76bf83, #a0ca6d, #cecb5e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: brightness(110%) saturate(120%);
  margin: 0 0 1rem;
  }
.about .intro .tldr {
  background: var(--ck-teal);
  color: #fff;
  position: relative;
  left: -1px;
  padding: .1em .4em;
  border-radius: 5px;
  font-family: var(--fam-sans);
  font-weight: 700;
  font-size: 0.7em;
  opacity: 0.4;
  }
.about .intro p {
  font-size: 2.4rem;
  line-height: 1.5;
  }
  @media only screen and (min-width:1000px) {
    .about .intro h2 {
      font-size: 3.6rem;
      }
    .about .intro p {
      font-size: 3rem;
      line-height: 1.4;
      }
    }

.about .history {
  margin-top: 2.4rem;
  border-top: 1px solid var(--c-eee);
  padding-top: 2rem;
  }
.about .history .project figure {
  margin-bottom: 0;
  }
  @media only screen and (min-width:1000px) {
     .about .history {
      margin-top: 3.4rem;
      border-top: 1px solid var(--c-eee);
      padding-top: 3rem;
      }
   }


/*!Colophon
--------------------------------------------- */
.colophon p {
  font-family: var(--fam-sans);
  font-size: 1.8rem;
  font-weight: 300;
  line-height: 1.8;
  }
.colophon p a {
  font-weight: 500;
  }
.fa-link::after {
  content: '\f584';
  margin-left: 0.5rem;
  font-family: var(--fam-fa);
  font-weight: 900;
  color: var(--c-red);
  opacity: 0.5;
  }




/*!-----------------------------------------------------------
#
### SEARCH
#
==============================================================
==============================================================*/

/*!Searchform search form
--------------------------------------------- */
.search-form input {
  text-transform: lowercase;
  }
.search-intro {
  font-family: var(--fam-sans);
  font-size: 1.6rem;
  font-weight: 300;
  color: #57524e;
  }
.search-form .search-fieldset {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  min-width: 220px;
  margin-bottom: 0.5em;
  column-gap: 0;
  }
.search-form .search-fieldset .search-field, .search-form .search-fieldset .search-submit {
  align-self: stretch;
  height: auto;
  border-radius: 0;
  }
.search-fieldset label {
  margin-top: 0;
  }
.search-form .search-fieldset .search-field {
  padding-right: 10px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-right-width: 0;
  -webkit-appearance: none;
  }
.search-form .search-fieldset .search-field:focus {
  outline: 0;
  border-color: var(--c-blue);
  }
.search-form .search-fieldset .search-field:focus + input.search-submit {
  background: var(--c-blue);
  color: #fff;
  }
.search-field::-webkit-search-cancel-button {
  -webkit-appearance: none;
  position: relative;
  top: 2px;
  height: 18px;
  width: 18px;
  margin-left: .4em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23b3aaa1'><path d='M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zm97.9-320l-17 17-47 47 47 47 17 17L320 353.9l-17-17-47-47-47 47-17 17L158.1 320l17-17 47-47-47-47-17-17L192 158.1l17 17 47 47 47-47 17-17L353.9 192z'/></svg>");
  cursor: pointer;
  opacity: 0.3;
  }
.search-field:focus::-webkit-search-cancel-button {
  opacity: 0.5;
  }
.search-field::-webkit-search-cancel-button:hover {
  opacity: 1;
  }
.search-form .search-fieldset .search-submit {
  background: var(--c-ddd);
  padding-left: 15px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  color: var(--c-333);
  }
.search-form .search-fieldset .search-submit:hover {
  background: var(--c-blue);
  color: #fff;
  }
.search-form .search-fieldset .search-field:focus + .search-submit:hover {
  background: var(--ck-blue);
  color: #fff;
  }


/*!SearchResults search results
--------------------------------------------- */
.result-items ul {
  margin: 0;
  padding: 0;
  list-style: none;
  }
.result {
  display: block;
  margin: 0 0 1.4rem;
  }
.result-count {
  margin: 2rem 0 3rem;
  font-family: var(--fam-sans);
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--c-555);
  }
.result .result-title {
  margin: 0;
  font-family: var(--fam-sans-h);
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.4;
  text-transform: none;
  }
.result-content.hasimg {
  
  }
.result-image {
  float: right;
  width: 80px;
  aspect-ratio: 4 / 3;
  display: flex;
  vertical-align: middle;
  align-items: center;
  margin-left: 15px;
  padding-top: 0.5rem;
  }
.result-image img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  }
.result .date {
  color: #57524e;
  font-family: var(--fam-sans);
  font-weight: 300;
  font-size: 1.4rem;
  }

.result-text {
  font-size: 2rem;
  line-height: 1.5;
  }
  
.result-type {
  font-family: var(--fam-sans);
  font-size: 1.4rem;
  font-weight: 300;
  color: #999087;
  }
.result-type span::before {
  margin-right: 3px;
  font-family: var(--fam-fa);
  font-size: 1.1rem;
  font-weight: 300;
  }
.result-type.page span::before {
  content: '\f15b\2009';
  position: relative;
  }
.result-type.post span::before {
  content: '\f305';
  position: relative;
  top: -1px;
  }
.result-type.link span::before {
  content: '\f0c1';
  position: relative;
  top: -1px;
  }
.result-type.status span::before {
  content: '\f075';
  }
.result-type.image span::before {
  content: '\f03e';
  }
.result-type.gallery span::before {
  content: '\f302';
  }
.result-type.project span::before {
  content: '\f0b1';
  position: relative;
  top: -1px;
  }


.search-results .post-nav {
  justify-items: start;
  margin-top: 3rem;
  margin-bottom: 1rem;
  margin-left: -0.4rem;
  }
  @media only screen and (min-width:640px) {
    .search .content > .container {
      grid-template-columns: 1fr 1fr;
      }
    .result {
      margin-bottom: 2rem;
      }
    .result-content.hasimg {
      display: grid;
      grid-template-columns: 1fr 120px;
      grid-template-rows: auto 1fr;
      column-gap: 15px;
      }
    .result-title {
      grid-column: 1;
      }
    .result-image {
      grid-column: 2;
      grid-row: 1 / span 2;
      float: none;
      width: auto;
      padding-top: 0.8rem;
      }
    .result-text {
      grid-column: 1;
      grid-row: 2;
      font-size: 2.1rem;
      }
    }
  @media only screen and (min-width:1000px) {
    .search .content > .container {
      grid-template-columns: 1fr 1fr 1fr;
      }
    }





/*!-----------------------------------------------------------
#
### MISC
#
==============================================================
==============================================================*/

/*!Constrained template
--------------------------------------------- */
  @media only screen and (min-width:1000px) {
    .constrained {
      display: grid;
      grid-template-columns: repeat( 12, 1fr );
      column-gap: 28px;
      }
    .constrained > * {
      grid-column-start: 1; /* 1 keep left, 3 center, 5 push right */
      grid-column-end: span 8;
      }
    }

  @media only screen and (min-width:1000px) {
    .pull h2, .pull p {
      margin-right: calc((100% - 28px - 28px) / 3 + 28px);
      }
    .push h2, .push p {
      margin-left: calc((100% - 28px - 28px) / 3 + 28px);
      }
    }


/*!BodyEnd icon
--------------------------------------------- */
main .body::after {
  content: '\f28d';
  font-family: var(--fam-fa);
  font-weight: 300;
  font-size: 1.8rem;
  line-height: 1;
  display: grid;
  justify-items: start;
  margin: 2rem auto 1rem;
  color: var(--c-bbb);
  }


/*!EditLink
--------------------------------------------- */
a.edit-link {
  display: inline-block;
  margin-left: 0.2rem;
  align-items: center;
  opacity: 1;
  text-decoration: none;
  }
.edit-link::before {
  content: '\f044';
  position: relative;
  top: -1px;
  font-family: var(--fam-fa);
  font-weight: 300;
  font-size: 1rem;
  opacity: 0.7;
  color: var(--c-999);
  }



/*!Accessibility
--------------------------------------------- */
.screen-reader-text, .sr-only, .screen-reader-response {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
  }
.screen-reader-text:focus, .sr-only:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: .875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
  }
/*!Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
  outline: 0;
  }
.jumplink {
  margin-top: 1.2em;
  margin-bottom: 1.5em;
  font-size: 1.6rem;
  }
.jumplink a::before {
  content: '\f33d';
  margin-right: 0.25em;
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-size: .8em;
  }
  @media only screen and (min-width:640px) {
    .jumplink {
      display: none;
      }
    }



/*!Linkify
--------------------------------------------- */
.linkify {
  position: relative;
  }
.linkify a {
  position: relative;
  z-index: 10;
  }
.linkify a.linkifier {
  position: static;
  }
.linkify a.linkifier::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  }



/*!Callout
--------------------------------------------- */
.callout {
  background: rgba(237, 232, 233, 0.5);
  padding: 20px;
  border-radius: 10px;
  }
.callout:not(:first-child) {
  margin-top: 2rem;
  }
.callout:not(:last-child) {
  margin-bottom: 2.6rem;
  }
body .callout .wp-block-columns, .callout .wp-block-group__inner-container {
  column-gap: 20px;
  margin: 0;
  padding: 0;
  }
  @media only screen and (min-width:1000px) {
    .callout {
      }
    }
  @media only screen and (min-width:1000px) {
    .callout .wp-block-column[style^="flex-basis:66"] {
      flex-basis: calc(66.2% + 28px) !important;
      }
    }


/*!Other
--------------------------------------------- */
.dashed {
  display: inline-block;
  padding: 0 .15em;
}



/*!ContactForm
--------------------------------------------- */
.contact-form {
  margin-left: 0;
  margin-right: 0;
  }
.contact-form .contact-intro {
  font-size: 1.6rem;
  line-height: 1.5;
  }
.form-response {
  margin: 0;
  }
.wpcf7-response-output {
  background: #edebe8;
  display: none;
  margin: 0 0 1.8rem;
  padding: 5px 10px 8px;
  border-radius: 5px;
  font-family: var(--fam-sans);
  font-size: 1.6rem;
  font-weight: 500;
  }
.invalid .wpcf7-response-output {
  background: var(--c-orange-red);
  display: block;
  padding: 4px 10px 6px;
  color: #fff;
  }
.sent .wpcf7-response-output {
  display: block;
  background: var(--ck-teal);
  color: #fff;
  }
.wpcf7-form .invalid .wpcf7-not-valid-tip {
  color: #c66;
  }
.wpcf7-form .screen-reader-response {
  display: none;
  }
.wpcf7-form-control-wrap {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 2px;
  }
.wpcf7-not-valid-tip {
  font-size: 1.4rem;
  }
.contact-form fieldset, .contact-form.block-preview fieldset {
  padding-bottom: 12px;
  }
.contact-form fieldset.submit {
  padding-bottom: 0;
  }
.contact-form fieldset label, .contact-form.block-preview fieldset label {
  display: none;
  padding-bottom: 4px;
  }
.contact-form fieldset label[for="cf-subscribe"] {
  display: inline-block;
  padding-bottom: 0;
  }
.contact-form input[name="cf-name"], .contact-form input[name="email"], .contact-form.block-preview input[name="cf-name"], .contact-form.block-preview input[name="email"] {
  max-width: 360px;
  }
.contact-form input:not([type="submit"]):focus, .contact-form textarea:focus {
  border-color: var(--c-teal-dark);
  filter: grayscale(0.4);
  }
.contact-form input.wpcf7-submit {
  background: var(--c-teal-dark);
  }
.contact-form input.wpcf7-submit:hover, .contact-form input.wpcf7-submit:focus {
  background: var(--ck-teal-dark);
  }
.contact-form.block-preview form > p {
  display: none;
  }

/*!Contact form loader */
form.wpcf7-form.submitting {
  position: relative;
  }
form.wpcf7-form.submitting > * {opacity:0.5;}
/* use ::before for overlay, icon is set in loader/spinner section using ::after */
form.wpcf7-form.submitting::before { 
  background-color: rgba(255,255,255,0.1);
  position: absolute;
  z-index: 9999;
  content: '';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  }
form.wpcf7-form.submitting::after {
  height:6rem; width:6rem; display:block; position:absolute; z-index:99999; top:40%;left:50%; margin-left:-3rem; margin-top:-3rem; content:""; background:url('img/icons/loader-puff.svg') center center; background-size:cover; line-height:1; text-align:center; font-size:2em; color:rgba(0,0,0,.75); filter:invert(100%); opacity:1;
  }




/* 
------------------------------------------------------------
 *
 * # SHARED STYLES
 *
============================================================*/

.fonta::before, .fonta::after {
	font-family: var(--fam-fa);
	font-style: normal;
	font-variant: normal;
	text-decoration: none;
	text-transform: none;
	vertical-align: top;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
  }
ul.reset, ul.reset li {
  margin-left: 0;
  padding-left: 0;
  list-style: none;
  }


/*!Video
--------------------------------------------- */
.video-r {
  width: 100%;
  height: auto;
  }
.video-1-1 iframe { aspect-ratio: 1 / 1; }
.video-4-3 iframe { aspect-ratio: 4 / 3; }
.video-3-4 iframe { aspect-ratio: 3 / 4; }
.video-16-9 iframe { aspect-ratio: 16 / 9; }
.video-9-16 iframe { aspect-ratio: 9 / 16; }
.video-r > iframe {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  }
figure iframe + figcaption {
  margin-top: 0.4rem;
  }



/*!Alignments
--------------------------------------------- */
figure.alignleft, figure.alignright {
  width: auto;
  position: relative;
  top: 0.5rem;
  }
.alignleft {
  float: left;
  margin-right: 2rem;
  margin-bottom: 1rem;
  }
.alignright {
  float: right;
  margin-left: 2rem;
  margin-bottom: 1rem;
  }
.aligncenter, .has-text-align-center {
  display:flex;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  }
.aligncenter > * {
  display:flex;
  justify-self: center;
  }
  @media only screen and (min-width:1000px) {
    .alignleft {
      margin-right: 28px;
      margin-bottom: 28px;
      }
    .alignright {
      margin-left: 20px;
      margin-bottom: 20px;
      }
    }





/*!-----------------------------------------------------------
#
### Footer
#
==============================================================
==============================================================*/
footer.site {
  margin-top: 3rem;
  padding: 0 0 5rem;
  font-family: var(--fam-sans);
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.4;
  color: var(--c-777);
  }
footer.site form {
  font-size: 1.6rem;
  line-height: 1.4;
  }
footer.site .container {
  display: grid;
  line-height: 1.4;
  }
footer.site .container::before {
  background: url('/img/logo_stopdesign_500.svg') no-repeat 0 0;
  filter: invert(65%) sepia(100%) saturate(100%) hue-rotate(193deg) brightness(100%) contrast(50%);
  background-size: 100% auto;
  fill: #86a2db;
  aspect-ratio: 120 / 21;
  content: '';
  display: grid;
  opacity: 0.3;
  }

footer.site ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-transform: lowercase;
  }
footer.site li {
  margin: 0 ;
  padding: 0;
  }
footer.site h3 {
  margin-bottom: 1rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--c-eee);
  font-size: 1.8rem;
  line-height: 1.2;
  color: var(--c-333);
  }

footer.site .container li {
  margin-bottom: 0.4rem;
  }
footer.site nav.topics li {
  display: inline-block;
  width: 100%;
  }
footer.site nav.topics .tag-count {
  font-size: 0.7em;
  color: #78726c;
  }




nav.end a, nav.end a, nav.end a:active, nav.end a:focus, nav.end a:hover {
  color: var(--c-red);
  }
nav.social a, nav.social a, nav.social a:active, nav.social a:focus, nav.social a:hover {
  color: var(--c-blue);
  }

footer.site .legal {
  grid-column: span 2;
  padding-top: 3rem;
  border-top: 1px solid var(--c-eee);
  line-height: 1.6;
  text-transform: lowercase;
  }
footer.site .legal a, footer.site .legal span {
  white-space: nowrap;
  }

  @media only screen and (max-width:999px) {
    footer.site .container {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto 1fr auto;
      column-gap: 20px;
      row-gap: 3rem;
      }
    footer.site .container::before {
      grid-column: 1 / span 2;
      width: 120px; /* or subtract 20px for gutter, then divide by 2 for column width */
      }
    footer.site nav.end {
      grid-column: 1;
      grid-row: 2;
      }
    footer.site nav.topics {
      grid-column: 2;
      grid-row: 2 / span 2;
      }
    footer.site .search {
      grid-column: 1 / span 2;
      padding-top: 1rem;
      }
    }

  @media only screen and (min-width:1000px) {
    footer.site {
      padding: 0 0 8rem;
      margin-top: 4rem;
      }
    footer.site .container {
      grid-template-columns: repeat(6, 1fr);
      grid-template-rows: auto 1fr;
      column-gap: 28px;
      row-gap: 25px;
      }
    footer.site .container::before {
      grid-column: 1 / span 6;
      width: 150px;
      margin-bottom: 10px;
      }
    footer.site nav.topics {
      grid-column: 2 / span 2;
      }
    footer.site nav.topics .tags {
      columns: 2 auto;
      column-gap: 28px;
      }
    footer.site .search {
      grid-column: 5 / span 2;
      }
    footer.site .legal {
      grid-column: span 6;
      }
    }



/*!SocialNav
--------------------------------------------- */
nav.social ul {
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 2rem;
  line-height: 1;
  }
nav.social li {
  flex: 0 0 auto;
  display: inline-block;
  margin: 0;
  padding: 0;
  }
nav.social li:last-child {
  margin-right: 0;
  }
nav.social li a {
  line-height: 1;
  }
nav.social a::before {
  display: block;
  padding: 0 .05em;
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
  font-style: normal;
  font-variant: normal;
  text-decoration: none;
  text-transform: none;
  vertical-align: top;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  opacity:0.7;
  }
.link-threads a::before { /*! "fab fa-threads" */ content: "\e618"; /*! color: #c34082; */ }
.link-mastodon a::before { /*! "fab fa-mastodon" */ content: "\f4f6"; /*! color: #c34082; */ }
.link-instagram a::before { /*! "fab fa-instagram" */ content: "\f16d"; /*! color: #c34082; */ }
.link-tiktok a::before { /*! "fab fa-tiktok" */ content: "\e07b"; /*! color: #fe2c55; */ }
.link-twitter a::before { /*! "fab fa-twitter" */ content: "\f099"; /*! color: #50a0ec; */ }
.link-facebook a::before { /*! "fab fa-facebook" */ content: "\f082"; /*! color: #4b67ad; */ }
.link-linkedin a::before { /*! "fab fa-linkedin" */ content: "\f08c"; /*! color: #2d64bc; */ }
.link-pinterest a::before { /*! "fab fa-pinterest" */ content: "\f0d2"; /*! color: #ab2626; */ }
nav.social a, nav.social a:hover, nav.social a:active {
  display: block;
  position: relative;
  text-decoration: none;
  }
nav.social a:hover::before, nav.social a:active::before {
  opacity: 1;
  }