/*! HTML5 Boilerplate v6.0.1 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */
 
 @layer theme, base;
 
 @layer theme {
   [data-theme="light"] {
      --color-headings: var(--djw-dark-2);
      --landing-bg-color: #f2f2f2;
      --primary-text: var(--djw-dark-2);
      --secondary-text: var(--gray-base);
      --contrast-text: #fff;
      --link-hover: #292245;
      --very-dark: #1b1725;
      --primary-nav: #2d3142;
      --page-background: #fff;
      --calloutbox-background: rgb(255 255 255 / 90%);
      --project-link-background: var(--djw-accent);
      --project-link-interaction: var(--djw-accent-dark-1);
      --footer-background: var(--djw-dark-2);
      --project-text: var(--djw-dark-2);
      --project-titles-and-headers: var(--djw-dark-1);
      
      & body {
         color: var(--very-dark);
      }
      
      & a {
         color: var(--djw-dark-1);
      }
      
      & header {
         background-color: #fff;
         
         &.page-title {
            background-color: var(--djw-light-5);
         }
         
         & nav h2 {
            color: var(--djw-base);
         }
      }
      
      & main li::marker {
         color: var(--djw-dark-1);
      }
      
      #pgs.portfolio-project-teaser {
         background-image: url(../img/bg1.svg);
      }
      
      #plm.portfolio-project-teaser {
         background-image: url(../img/bg2.svg);
      }
      
      .project-title {
         font-weight: 510;
      }
      
      .project-overview {
         background-color: var(--djw-light-5);
      }
      
      .project-metadata {
         background-color: rgb(255 255 255 / 90%);
         
         .metadata-pair dt {
            color: var(--djw-light-2);
         }
      }
      
      .portfolio-project a {
         color: var(--djw-dark-1);
      }
      
      .project-headers {
         background-image: url(../img/bg4.svg);
      }
      
      .portfolio-media-item {
         color: var(--very-dark);
         background-color: var(--djw-light-6);
         --table-header-row-color: var(--djw-light-6);
         
         &:nth-child(even) {
            background-color: #fff;
            --table-header-row-color: #fff;
         }
      }
      
      .nav-projects {
         background-color: var(--djw-light-5);
      }
      
      .article-block:first-child {
         color: var(--djw-dark-2);
         background-color: var(--djw-light-5);
      }
   }
   
   @supports (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px)) {
      [data-theme="light"] {
         --calloutbox-background: rgb(255 255 255 / 60%);
         
         .project-summary {      
            background-color: rgb(255 255 255 / 80%);
            backdrop-filter: blur(8px) saturate(40%);
            -webkit-backdrop-filter: blur(8px) saturate(40%);
         }
         
         .project-metadata {      
            background-color: rgb(255 255 255 / 60%);
            -webkit-backdrop-filter: blur(8px) saturate(40%);
            backdrop-filter: blur(8px) saturate(40%);
         }
      }
   }
   
   [data-theme="dark"] {
      --color-headings: var(--djw-light-5);
      --landing-bg-color: var(--djw-base);
      --primary-text: #fff;
      --secondary-text: var(--djw-light-2);
      --contrast-text: rgb(255 255 255 / 80%);
      --link-hover: var(--djw-light-2);
      --very-dark: #1e122e;
      --primary-nav: var(--djw-accent);
      --page-background: var(--djw-dark-1);
      --project-link-background: transparent;
      --project-link-interaction: var(--djw-dark-1);
      --footer-background: var(--djw-dark-3);
      --project-text: var(--djw-light-4);
      --project-titles-and-headers: var(--djw-light-2);
      
      & body {
         color: var(--djw-light-4);
         background-color: var(--djw-dark-3);
      }
      
      & a {
         color: var(--djw-light-3);
      }
      
      & header {
         background-color: var(--djw-dark-2);
         
         &.page-title {
            background-color: unset;
         }
         
         & nav {
            & h1 {
               font-family: var(--font-stack-sans);
            }
            
            & h2 {
               color: var(--djw-dark-3);
            }
         }
      }
      
      & blockquote::before {
         color: var(--djw-light-1);
      }
      
      & main li::marker {
         color: var(--djw-light-3);
      }
      
      .titles-wrapper .subtitle {
         color: var(--djw-light-2);
      }
      
      #nav-sections li a:hover {
         color: var(--djw-dark-1);
      }
      
      #nav-sections li {
         &.active a {
           --contrast-text: #fff;
         }
      }
      
      #pgs.portfolio-project-teaser {
         background-image: url(../img/bg1d.svg);
      }
      
      #plm.portfolio-project-teaser {
         background-image: url(../img/bg2d.svg);
      }
      
      .portfolio-project a {
         color: var(--djw-light-3);
      }
        
      .project-headers {
         background-color: var(--djw-dark-2);
         background-image: url('../img/bg4d.svg');
      }
      
      .project-years {
         color: var(--djw-light-1);
      }
      
      .project-intro {
         background-color: var(--djw-base);
      }
      
      .portfolio-project-teaser {
         .project-summary {
            color: var(--contrast-text);
            
            & h1 a {
               color: var(--contrast-text);
            }
            
            .project-link {
               border: 1px solid rgb(255 255 255 / 40%);
            }
            
            .project-title {
               font-weight: 490;
            }
            
            & h1 {
               font-family: var(--font-stack-sans);
               font-weight: normal;
            }
         }
      }
      
      .project-overview {
         background-color: var(--djw-dark-1);
      }
      
      .project-overview:has(> .side-project-headers) {
         background-color: var(--djw-dark-2);
      }
      
      .side-project-headers {
         background-color: var(--djw-base);
      }
      
      .project-metadata {         
         .metadata-pair {         
            & dt {
               color: var(--djw-light-3);
            }
            
            & dd {
               color: var(--djw-light-6);
            }
         }
      }   
      
      .portfolio-media-item {
         --table-header-row-color: var(--djw-dark-1);
         color: var(--djw-light-4);
         background-color: var(--djw-dark-1);
         
         &:nth-child(even) {
            --table-header-row-color: var(--djw-base);
         }
         
         &:nth-child(2n) {
            background-color: var(--djw-base);
         }
      }
      
      .nav-projects {
         background-color: var(--djw-dark-2);
      }
      
      .article-block:first-child {
         color: var(--djw-light-4);
         background-color: var(--djw-dark-1);
      }
      
      .invert-on-dark {
         filter: invert();
      }
      
      .desaturate-on-dark {
         filter: saturate(0%) brightness(1.6);
      }
      
      .company-experience h2 {
         font-family: var(--font-stack-sans);
         font-weight: normal;
      }
   }
   
   @supports (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px)) {
      [data-theme="dark"] {
         --calloutbox-background: rgb(50 0 143 / 95%);
                  
         .porfolio-project-teaser .project-summary {         
            background-color: rgb(50 0 143 / 80%);
            backdrop-filter: blur(8px) saturate(40%);
         }
         
         .project-metadata {
            background-color: var(--calloutbox-background);
            backdrop-filter: blur(8px) saturate(40%);
         }
      }
   } 
 }
 
 @layer base {
    @view-transition {
      navigation: auto;
    }
    
   :root {
      --sizing-unit: 1rem;
      --djw-dark-4: #000001;
      --djw-dark-3: #090024;
      --djw-dark-2: #200057;
      --djw-dark-1: #3a008f;
      --djw-base: #541cc1;
      --djw-light-1: #6d44e4;
      --djw-light-2: #886bff;
      --djw-light-3: #a498ff;
      --djw-light-4: #c4c0ff;
      --djw-light-5: #e7e6ff;
      --djw-light-6: #f7f7ff;
      --djw-accent: #0076a3;
      --djw-accent-dark-1: #00678f;
      --focus-highlight: oklch(81.9% 0.181 78);
      --gray-base: #767676;
      --hover-transition-time: 250ms;
      --hover-transition-scope: all;
      --hover-transition-easing: ease-in-out;
   
      --font-stack-serif: 'Bitter', 'Georgia', 'Times New Roman', Times, serif;
      --font-stack-sans: 'Work Sans', system-ui, 'Helvetica Neue', Arial, sans-serif;
      
      /* Fluid sizing */
       --size-step-0: clamp(1rem, calc(0.96rem + 0.22vw), 1.13rem);
       --size-step-1: clamp(1.25rem, calc(1.16rem + 0.43vw), 1.5rem);
       --size-step-2: clamp(1.56rem, calc(1.41rem + 0.76vw), 2rem);
       --size-step-3: clamp(1.95rem, calc(1.71rem + 1.24vw), 2.66rem);
       --size-step-4: clamp(2.44rem, calc(2.05rem + 1.93vw), 3.55rem);
   
      /* Brand colors */
      --linkedin-primary: #0077b5;
      --dribbble-primary: #ea4c89;
      --codepen-primary: #0ebeff;
      --mastodon-primary: #2b90d9;
      --github-primary: #fff;
   }
   
   *, *::before, *::after {
      box-sizing: border-box;
   }
   
   :is(a, button, input, textarea, summary) {
   --outline-size: max(2px, 0.08em);
   --outline-style: solid;
   --outline-color: var(--focus-highlight, orange);
   }
   
   :is(a, button, input, textarea, summary):focus-visible {
      outline:
         var(--outline-size)
         var(--outline-style)
         var(--outline-color);
      outline-offset: var(--outline-offset, var(--outline-size));
      text-decoration: none;
   }
   
   html {
      font-size: var(--size-step-0);
      font-family: var(--font-stack-sans);
      line-height: 1.4;
      scrollbar-color: var(--djw-light-3) var(--djw-light-5);
   }
   
   [data-theme-toggle] {
      appearance: none;
      width: 44px;
      height: 44px;
      font-size: 20px;
      text-align: center;
      background-color: transparent;
      border: 1px solid var(--primary-nav);
      border-radius: 50%;
      transition: var(--hover-transition-time) var(--hover-transition-scope) var(--hover-transition-easing);
      
      &:hover, &:focus {
         background-color: var(--primary-nav);
         transform: scale(1.2);
         transition: var(--hover-transition-time) var(--hover-transition-scope) var(--hover-transition-easing);
      }
   }
   
   /* Custom fonts */
   @font-face {
      font-family: 'Work Sans';
      src: url('../fonts/WorkSans-VariableFont_wght.ttf') format('truetype-variations');
      font-weight: 250 900;
      font-display: fallback;
   }
   
   @font-face {
      font-family: 'Bitter';
      src: url('../fonts/Bitter-VariableFont_wght.ttf') format('truetype-variations');
      font-weight: 100 900;
      font-display: fallback;
   }
   
   /* ==========================================================================
      Base styles: opinionated defaults
      ========================================================================== */
   
   /*
    * Remove text-shadow in selection highlight:
    * https://twitter.com/miketaylr/status/12228805301
    *
    * Vendor-prefixed and regular ::selection selectors cannot be combined:
    * https://stackoverflow.com/a/16982510/7133471
    *
    * Customize the background color to match your design.
    */
   
   ::-moz-selection {
      text-shadow: none;
      background: #b3d4fc;
   }
   
   ::selection {
      text-shadow: none;
      background: #b3d4fc;
   }
   
   /*
    * Remove the gap between audio, canvas, iframes,
    * images, videos and the bottom of their containers:
    * https://github.com/h5bp/html5-boilerplate/issues/440
    */
   
   audio,
   canvas,
   iframe,
   img,
   svg,
   video {
      vertical-align: middle;
   }
   
   /* ==========================================================================
      Browser Upgrade Prompt
      ========================================================================== */
   
   .browserupgrade {
      margin: 0.2em 0;
      color: #000;
      background: #ccc;
      padding: 0.2em 0;
   }
   
   /* ==========================================================================
      Author's custom styles
      ========================================================================== */
   
   body {
      margin: 0;
   }
   
   p {
      font-family: var(--font-stack-serif);
      line-height: 1.6;
      text-wrap: pretty;
   }
   
   small {
      font-family: var(--font-stack-serif);
   }
   
   abbr[title] {
      text-decoration: none;
   }
   
   a {
      text-decoration: none;
      
      &:hover {
         text-decoration: underline;
         text-decoration-skip: auto;
      }
   }
   
   ul,
   ol {
      font-family: var(--font-stack-serif);
      padding-left: 1em;
   }
   
   dl > div + div {
      margin-top: 1em;
   }
   
   dl dd {
      margin-left: 0;
   }
   
   video {
      width: 100%;  
   }
   
   img {
      max-width: 100%;
   }
   
   body {
      display: grid;
      grid-template-rows: auto 1fr auto;
      grid-template-columns: 1fr;
      height: 100vh;
   }
   
   em {
      font-family: var(--font-stack-sans);
      font-weight: 425;
      font-style: normal;
   }
   
   header {
      display: flex;
      padding: calc(var(--sizing-unit)*2) calc(var(--sizing-unit)*4);
   }
   
   body > header {
      display: grid;
      grid-template-areas: "titles nav theme";
      grid-template-columns: 1fr max-content max-content;
      column-gap: calc(var(--sizing-unit) * 2);
      align-items: center;
      view-transition-name: global-header;
      
      @media screen and (width < 1024px) {
         grid-template-areas: "titles theme"
                              "nav nav";
         grid-template-columns: 1fr max-content;
      }
   }
   
   header nav {
      display: flex;
      align-items: center;
      
      &#nav-home {
         grid-area: titles;
      }
      
      &#nav-internal {
         grid-area: nav;
      }
      
      .site-name {
         display: block;
         color: var(--djw-dark-1);
         font-size: 1.7em;
         line-height: 1.2;
         font-family: var(--font-stack-sans);
         font-weight: 450;
         margin: 0;
      }
   }
   
   
   .headshot-wrapper {
      width: 80px;
      height: 80px;
      border-radius: 100%;
      
      & a {
         display: block;
         width: 100%;
         height: 100%;
         border-radius: 100%;
         
         & img {
            display: block;
            width: 100%;
            height: 100%;
            border: 1px solid rgb(0 0 0 / 20%);
            border-radius: 100%;
         }
      }
   }
   
   .titles-wrapper {
      flex-direction: column;
      margin-left: var(--sizing-unit);
      
      > .subtitle {
         font-size: var(--size-step-0);
      }
   }
   
   .social-links {
      display: flex;
      gap: 1em;
      justify-content: space-around;
      
      & a {
         text-decoration: none;
         
         &:hover {
            outline: 0;
         }
         
         .icn-social-media {
            height: 16px;
            width: 16px;
            color: var(--djw-light-2);
            transition: all 100ms ease-out;
            
            &:hover {
               transform: scale(1.1);
               transition: all 100ms ease-in;
            }
            
            & use {
               fill: currentColor;
            }
         }
      }
   }   
   
   :is(.linkedin:hover, .linkedin:focus) .icn-social-media use {
      fill: var(--linkedin-primary);
   }
   
   :is(.dribbble:hover, .dribbble:focus) .icn-social-media use {
      fill: var(--dribbble-primary);
   }
   
   :is(.codepen:hover, .codepen:focus) .icn-social-media use {
      fill: var(--codepen-primary);
   }
   
   :is(.mastodon:hover, .mastodon:focus) .icn-social-media use {
      fill: var(--mastodon-primary);
   }
   
   :is(.github:hover, .github:focus) .icn-social-media use {
      fill: var(--github-primary);
   }
   
   #nav-internal {
      margin-left: auto;
   }
   
   #nav-sections {
      display: flex;
      padding-left: 0;
      
      & li {
         list-style-type: none;
         
         &:not(:first-child) {
            margin-left: calc(var(--sizing-unit)*2);
         }
         
         & a {
            display: block;
            color: var(--primary-nav);
            font-family: var(--font-stack-sans);
            font-weight: 450;
            text-decoration: none;
            padding: calc(var(--sizing-unit) * 0.75) calc(var(--sizing-unit)*2);
            border: 1px solid var(--primary-nav);
            border-radius: 72px;
            transition: var(--hover-transition-time) var(--hover-transition-scope) var(--hover-transition-easing);
            
            &:hover, &:focus {
               color: var(--contrast-text);
               background-color: var(--primary-nav);
               transform: scale(1.05);
               transition: var(--hover-transition-time) var(--hover-transition-scope) var(--hover-transition-easing);            
            }
            
            &:active {
               box-shadow: inset 0 2px 4px rgb(0 0 0 / 40%);
            }
         }
         
         &.active a {
            color: var(--contrast-text);
            background-color: var(--primary-nav);
            transform: none;
         }
      }
   }
   
   main {
      grid-row: 2;
      display: grid;
      padding: 0;
      background-color: var(--page-background);
      margin: 0;
   }
   
   h1 {
       font-size: var(--size-step-4);
   }
   
   h2 {
       font-size: var(--size-step-3);
   }
   
   h3 {
       font-size: var(--size-step-2);
   }
   
   h4 {
       font-size: var(--size-step-1);
   }
   
   main :is(h1, h2, h3, h4) {
      color: var(--color-headings);
      font-family: var(--font-stack-sans);
      font-weight: 450;
      line-height: 1.1;
      text-wrap: balance;
      margin-top: 0;
      margin-bottom: 0;
   }
   
   main {
      :is(h1, h2, h3, h4) + p {
         margin-top: 0.5em;
      }
      
      & a {
         text-decoration: underline;
         
         :hover {
            color: var(--link-hover);
         }
      }
      
      & li:not(:last-child) {
            margin-bottom: calc(var(--sizing-unit) * 0.75);
         }
      }
   }
   
   .portfolio-project-teaser {
      display: grid;
      grid-template-columns: auto 75px 400px;
      grid-template-rows: minmax(338px, 1fr);
      grid-template-areas: "graphic overlap summary";
      justify-content: center;
      padding: 0 calc(var(--sizing-unit)*4) 100px;
      background-color: var(--landing-bg-color);
      background-repeat: no-repeat;
      background-size: cover;
      
      &:nth-child(even) {
         grid-template-columns: 400px 75px auto;
         grid-template-areas: "summary overlap graphic";
      }
      
      &:first-child {
         padding-top: calc(var(--sizing-unit) * 4);
      }
      
      &:last-child {
         padding-bottom: calc(var(--sizing-unit) * 2);
      }
   }
   
   .project-teaser-image {
      grid-area: graphic;
      
      & a {         
         & img {
            display: block;
            max-width: 100%;
            height: auto;
         }
      }
      
   }
   
   .project-summary {
      z-index: 2;
      grid-area: summary;
      height: min-content;
      font-size: 1.2em;
      line-height: 1.6;
      color: var(--color-headings);
      padding: calc(var(--sizing-unit) * 2);
      background-color: var(--calloutbox-background);
      border-radius: 10px;
      box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%), 0 6px 12px 0 rgb(0 0 0 / 10%);
      
      :is(h1, .project-title) {
         font-family: var(--font-stack-sans);
         letter-spacing: -0.015em;
      }
      
      & h1 {
         font-size: var(--size-step-3);
         margin-block-end: 0.25em;
         
         & a {
            color: var(--primary-text);
            text-decoration: none;
            transition: var(--hover-transition-time) var(--hover-transition-scope) var(--hover-transition-easing);
            
            :hover {
               text-decoration: underline;
               text-decoration-offset: 0.05em;
               text-decoration-thickness: 2px;
               transition: var(--hover-transition-time) var(--hover-transition-scope) var(--hover-transition-easing);
            }
         }
      }
      
      .project-title {
         display: inline-block;
         font-family: var(--font-stack-sans);
         font-size: var(--size-step-0);
         line-height: 1.2;
         text-transform: uppercase;
         letter-spacing: .075em;
         text-wrap: balance;
         mix-blend-mode: hard-light;
         opacity: 0.7;
         margin: 0.5em 0;
      }
      
      .project-link {
         display: inline-block;
         min-width: 120px;
         color: var(--contrast-text);
         text-align: center;
         text-decoration: none;
         padding: calc(var(--sizing-unit) / 2) var(--sizing-unit);
         background-color: var(--project-link-background);
         border-radius: 72px;
         transition: var(--hover-transition-time) var(--hover-transition-scope) var(--hover-transition-easing);
   
         &:hover {
            transform: scale(1.05);
         }
         
         &:hover, &:focus {
            background-color: var(--project-link-interaction);
            transition: var(--hover-transition-time) var(--hover-transition-scope) var(--hover-transition-easing);         
         }
         
         &:active {
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
         }
      }
   }
   
   .macOS {
      font-family: var(--font-stack-sans);
      font-size: 85%;
      text-transform: lowercase;
   }
   
   footer {
      display: flex;
      place-items: center;
      padding: calc(var(--sizing-unit)*2) calc(var(--sizing-unit) * 4);
      background-color: var(--footer-background);
      border-top: 1px solid rgba(0, 0, 0, 0.20);
      
      & span {
         font-size: 0.9rem;
         line-height: 1.2;
         text-align: right;
         color: var(--djw-light-2);
         margin-left: auto;
      }
   }
   
   .portfolio-project {
      color: var(--project-text);
      
      & h2 {
         margin-bottom: 0.4em;
         
      }
      
      & h3:has(a:only-child) {
         font-size: var(--size-step-1);
   
         & a {
            text-decoration: none;
            
            :hover {
               text-decoration: underline;
            }
         }
      }
   }
   
   .project-headers {
      display: grid;
      grid-template-areas: "header header"
                           "image metadata";
      grid-template-columns: 1fr 1fr;
      grid-gap: calc(var(--sizing-unit) * 2);
      padding: calc(var(--sizing-unit)*2) calc(var(--sizing-unit)*4);
      background-repeat: no-repeat;
      background-position: center bottom;
      
      > header {
         all: unset;
         grid-area: header;
      }
      
      & h1 {
         font-size: var(--size-step-4);
         line-height: 1.05;
         margin-bottom: 0.25em;
      }
      
      & h2 {
         margin-bottom: 0;
      }
      
      .project-title {
         font-size: var(--size-step-1);
      }
   }
   
   :is(.project-headers, .side-project-headers) :is(.project-title, .side-project-title) {
      color: var(--project-titles-and-headers);
      text-transform: uppercase;
      letter-spacing: 0.05em;
   }
   
   .project-header-image {
      grid-area: image;
      display: flex;
      justify-content: center;
      
      & img {
         height: auto;
         animation: projectImageIn 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
         animation-fill-mode: forwards;
      }
   }
   
   @keyframes projectImageIn {
      0% {
         transform: translateX(-100px);
         opacity: 0;
      }
      100% {
         transform: translateX(0);
         opacity: 1;
      }
   }
   
   .project-metadata {
      grid-area: metadata;
      align-self: center;
      columns: 2;
      height: fit-content;
      padding: calc(var(--sizing-unit) * 2);
      border-radius: 10px;
      box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.20), 0 3px 6px 0 rgba(0, 0, 0, 0.10);
      margin: 0;
      animation: projectMetadataIn 500ms;
      animation-duration: 500ms;
      animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
      animation-fill-mode: forwards;
      
      .metadata-pair {
         break-inside: avoid-column;
         
         & + .metadata-pair {
            margin-top: calc(var(--sizing-unit) * 2);
         }
         
         & dt {
            display: block;
            font-weight: 450;
            letter-spacing: 0.02em;
            text-transform: uppercase;
            margin-bottom: 0.25em;
         }
         
         & dd {
            display: flex;
            font-family: var(--font-stack-serif);
            line-height: 1.1;
            margin-left: 0;
            
            & + dd {
               margin-top: 0.5em;
            }
         }
      }
   }
   
   @supports (animation-timing-function: linear(0, 1)) {
      .project-metadata {
         animation-duration: 850ms;
         animation-timing-function: linear(
             0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017,
             1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%,
             1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%,
             0.997 69.8%, 1.003 76.9%, 1.004 83.8%, 1
           );         
      }
   }
   
   @keyframes projectMetadataIn {
       0% {
          transform: translateX(100px);
          opacity: 0;
       }
       100% {
          transform: translateX(0);
          opacity: 1;
       }
   }
   
   .side-project-headers {
      padding: calc(var(--sizing-unit)*2) calc(var(--sizing-unit)*4) 0;
      
      & h2 {
         margin-bottom: 0;
      }
      
      .side-project-title {
         font-size: var(--size-step-1);
      }
   }
   
   .project-intro {
      display: grid;
      grid-template-columns: 2fr 1fr;
      grid-gap: calc(var(--sizing-unit)*4);
      padding: calc(var(--sizing-unit)*2) calc(var(--sizing-unit)*4);
      
      & p {
         font-size: var(--size-step-0);
         line-height: 1.6;
         
         &:first-of-type {
            margin-top: 0;
         }
      }
   }
   
   .app-stars {
      display: flex;
      justify-content: center;
      align-items: center;
      max-width: 200px;
      height: 24px;
      margin-bottom: 1em;
   }   
   
   .project-intro-media a {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      text-align: center;
   }
   
   .portfolio-media-item {
      container: portfolio-media-item / inline-size;
      padding: calc(var(--sizing-unit)*3) calc(var(--sizing-unit)*4);
      
      & h3 {
         margin-bottom: 0.5em;
      }
      
      & p:first-child {
         margin-top: 0;
      }
      
      .project-video {
         object-fit: contain;
      }
   }
   
   .portfolio-media-gallery {
      display: grid;
      grid-template: auto / repeat(auto-fit, minmax(256px, 1fr));
      grid-gap: calc(var(--sizing-unit)*2);
      align-items: end;
      padding: calc(var(--sizing-unit)*2) calc(var(--sizing-unit)*4);
   }
   
   .portfolio-images {
      display: grid;
      grid-template-rows: repeat(2, auto);
      align-items: start;
      grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
      column-gap: calc(var(--sizing-unit)*2);
      
      & figure {
         display: grid;
         margin: 0;
         
         *:first-child {
            align-self: end;
         }
      }
   }
   
   .portfolio-images-stacked {
      display: grid;
      grid-template: max-content / 1fr;
      grid-gap: calc(var(--sizing-unit)*2);
      align-items: start;
      
      & figure {
         grid-row: span 1;
         grid-template-rows: max-content auto;
         
         *:first-child {
            align-self: start;
         }
      }
   }
   
   figcaption {
      font-family: var(--font-stack-serif);
      font-size: calc(var(--size-step-0) * 0.8);
      padding-top: var(--sizing-unit);
   }
   
   .portfolio-image-thumb {
      width: 100%;
      height: auto;
      filter: drop-shadow(0 2px 6px rgb(0 0 0 / 20%));
      transition: var(--hover-transition-time) var(--hover-transition-scope) var(--hover-transition-easing);
      
      &:hover {
         filter: drop-shadow(0 4px 12px rgb(0 0 0 / 30%));
         transform: scale(1.02);
         transition: var(--hover-transition-time) var(--hover-transition-scope) var(--hover-transition-easing);
      }
   }
   
   .portfolio-media-video {
      width: 100%;
   }
   
   .portfolio-section-description :is(h3, p:first-of-type) {
      margin-top: 0;
   }
   
   .project-quotes {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      column-gap: calc(var(--sizing-unit) * 2);
      padding: calc(var(--sizing-unit)*4) 5vw;
      
      & blockquote + blockquote {
         border-top: 1px solid var(--djw-light-2);
      }
      
      & figure:nth-of-type(2n) {
         margin-left: 2em;
      }
   }
   
   .quotation {
      max-width: 80ch;
      font-family: var(--font-stack-serif);
      
      & figcaption {
         font-size: var(--size-step-0);
      }
      
      & cite::before {
         content: "—";
      }
   }
   
   blockquote {
      font-size: var(--size-step-1);
      line-height: 1.45;
      margin: 0;
      
      &:first-of-type {
         quotes: "“" "”";
      }
      
      &::before {
         content: open-quote;
         position: absolute;
         color: var(--djw-light-1);
         font-size: 200%;
         margin-top: -0.25em;
         margin-left: -0.5em;
      }
      
      &::after {
         content: close-quote;
      }
   }
   
   .list-project-tools {
      columns: 2;
      column-gap: 2em;
   }
   
   .project-splash {
      display: flex;
      flex-direction: column;
      
      & img {
         max-width: 100%;
         object-fit: scale-down;
      }
      
      & h2 {
         margin-top: 0.4em;
      }
   }
   
   .nav-projects {
      display: flex;
      justify-content: space-between;
      font-family: var(--font-stack-sans);
      font-weight: 450;
      padding: calc(var(--sizing-unit)*2) calc(var(--sizing-unit)*4);
      
      :is(.prev, .nxt) {
         text-decoration: none;
         padding: var(--sizing-unit) calc(var(--sizing-unit)*2);
         border: 1px solid var(--djw-base);
         border-radius: calc(var(--sizing-unit) * 2);
         transition: var(--hover-transition-time) var(--hover-transition-scope) var(--hover-transition-easing);
      }
      
      & a {
         &:hover {
            color: var(--contrast-text);
            background-color: var(--djw-dark-1);
            background-blend-mode: overlay;
            transform: scale(1.05);
            transition: var(--hover-transition-time) var(--hover-transition-scope) var(--hover-transition-easing);
         }
         
         &:active {
            box-shadow: inset 0 2px 4px rgb(0 0 0 / 40%);
         }
      }
   }
   
   .resume-details {
      display: grid;
      grid-template-areas: "experience"
                           "skills"
                           "tools"
                           "education";
      
      .article-block {
         &:first-child {
            background-color: transparent;
         }
         
      }
   }
   
   .article-block {
      padding: calc(var(--sizing-unit)*2) calc(var(--sizing-unit)*4);
      
      :is(h1, h2) {
         font-weight: normal;
      }
      
      & h1 {
         font-size: var(--size-step-3);
         line-height: 1.1;
      }
      
      & h2 {
         font-family: var(--font-stack-sans);
         font-weight: 570;
         font-size: var(--size-step-0);
         text-transform: uppercase;
         letter-spacing: 0.05em;
         
         &:not(:first-of-type) {
            margin-top: 2em;
         }
         
         :is(+ p, + ul) {
            margin-top: 0.5em;
         }
      }
      
      & h2 + h3 {
         font-size: var(--size-step-1);
         margin-top: 1em;
      }
      
      &.sidebar {
         display: grid;
         grid-template-columns: 2fr 1fr;
         grid-gap: calc(var(--sizing-unit)*4);
      }
   }
   
   .skills,
   .design-tools {
      columns: 2;
      column-gap: 2.2em;
      margin-bottom: 0;
   }
   
   .resume-company {
      display: grid;
      grid-template-columns: 1fr 5fr;
      grid-column-gap: calc(var(--sizing-unit)*2);
      margin-top: calc(var(--sizing-unit)*4);
      
      &:first-of-type {
         margin-top: calc(var(--sizing-unit)*2);
      }
      
      & h3 {
         margin: 0;
      }
      
      .company-name {
         text-align: right;
         
         & h1 {
            margin-bottom: var(--sizing-unit);
         }
      }
      
      .company-experience {
         padding-right: calc(var(--sizing-unit)*4);
         
         & h2 {
            font-family: var(--font-stack-sans);
            font-weight: 450;
            font-size: var(--size-step-1);
            line-height: 1.2;
            text-transform: none;
            letter-spacing: normal;
         }
      }
   }
   
   .fancy-ampersand {
      font-family: 'Apple Chancery', Garamond, Georgia, 'Times New Roman', serif;
      font-size: 110%;
   }
   
   .list-intro {
      margin-bottom: 0.5em;
   }
   
   table {
      border-collapse: collapse;
      border-spacing: 0px !important;
      
      & th {
         text-align: left;
         font-weight: 550;
         padding-bottom: 0;
         border-bottom: 2px solid var(--djw-light-4);
         
         @media screen and (max-width: 500px) {
            position: sticky;
            top: 0;
            background-color: var(--table-header-row-color);
            box-shadow: 0 2px 0 var(--djw-light-4);
         }
      }
      
      & th, td {
         font-family: var(--font-stack-sans);
         vertical-align: top;
         padding: 0.75em;
      }
      
      :is(th, td):first-child {
         padding-left: 0;
      }
      
      & td {
         font-family: var(--font-stack-serif);
         font-feature-settings: "tnum" on;
      }
      
      & tr:not(:last-child) td {
         border-bottom: 1px solid var(--djw-light-4);
      }
   }
   
   .align-right {
      text-align: right;
   }
   
   .photo-grid {
      display: grid;
      grid-template-columns: 1fr;
      grid-auto-rows: max-content;
      grid-gap: calc(var(--sizing-unit) * 2);
      
      & figure {
         display: grid;
         grid-template-rows: auto 1fr;
         row-gap: var(--sizing-unit);
         
         & figcaption {
            font-size: calc(var(--size-step-0) * 0.8);
            padding-top: 0;
         }
      }      
   }
   
   .portfolio-gallery {
      grid-column: 1 / 4;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: 1fr auto;
      align-items: end;
      
      & figure {
         grid-row: 1 / 4;
         display: grid;
         grid-template-rows: subgrid;
         
         & a {
            align-self: end;
            
            & picture {
               display: flex;
               justify-content: center;
               
               .phone-landscape {
                  width: 41.47%;
               }
               
               .phone-portrait {
                  width: 22.87%;
               }
               
               .tablet {
                  width: 68.2%;
               }
               
               .laptop {
                  width: 100%;
               }
            }            
         }         
         
         & figcaption {
            text-align: center;
         }
      }
   }
   
   @container portfolio-media-item (width < 920px) {
      .portfolio-gallery {
         padding-top: calc(var(--sizing-unit) * 2);
      }
   }
   
   @container portfolio-media-item (width < 880px) {
      .portfolio-gallery {
         display: flex;
         flex-direction: column;
         align-items: center;
         
         & figure {
            & img {
               width: clamp(200px, 400px, 600px);
            }
         }
      }
   }
   
   /* ==========================================================================
      Helper classes
      ========================================================================== */
   
   /*
    * Hide only visually, but have it available for screen readers:
    * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
    *
    * 1. For long content, line feeds are not interpreted as spaces and small width
    *    causes content to wrap 1 word per line:
    *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
    */
   
   .visuallyhidden {
      border: 0;
      clip: rect(0 0 0 0);
      -webkit-clip-path: inset(50%);
      clip-path: inset(50%);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
      white-space: nowrap;
      /* 1 */
   }
   
   /*
    * Extends the .visuallyhidden class to allow the element
    * to be focusable when navigated to via the keyboard:
    * https://www.drupal.org/node/897638
    */
   
   .visuallyhidden.focusable:active,
   .visuallyhidden.focusable:focus {
      clip: auto;
      -webkit-clip-path: none;
      clip-path: none;
      height: auto;
      margin: 0;
      overflow: visible;
      position: static;
      width: auto;
      white-space: inherit;
   }
   
   @media screen and (min-width: 1200px) {
      .resume-details {
         grid-template-areas: "experience skills"
                              "experience tools"
                              "experience education"
                              "experience .";
         grid-template-rows: max-content max-content;
         align-items: start;
      }
      
      .resume-experience {
         grid-area: experience;
      }
      
      .resume-skills {
         grid-area: skills;
      }
      
      .resume-tools {
         grid-area: tools;
      }
      
      .skills,
      .design-tools {
         columns: 1;
      }
      
      .resume-education {
         grid-area: education;
      }
   }
   
   @media screen and (min-width: 1064px) {
      .portfolio-media-item {
         display: grid;
         grid-template-columns: 2fr 1fr 1fr;
         grid-gap: calc(var(--sizing-unit) * 4);
         
         &:nth-child(odd) {
            grid-template-columns: 1fr 1fr 2fr;
            
            .portfolio-section-description {
               grid-column: 3 / 4;
            }
            
            .portfolio-images {
               grid-column: 1 / 3;
            }
         }
      }   
      
      .portfolio-section-description {
         grid-row: 1;
         grid-column: 1 / 2;
      }
      
      .portfolio-images {
         grid-row: 1;
         grid-column: 2 / 4;
      }   
      
      .portfolio-media-item-wide {
         display: grid;
         grid-template-areas: "description description media";
         grid-template-columns: repeat(3, 1fr);
         grid-gap: calc(var(--sizing-unit)*4);
         
         &:nth-child(odd) {
            grid-template-areas: "media description description";
            grid-template-columns: repeat(3, 1fr);
         }
      }   
      
      .portfolio-media-item-wide:nth-child(odd) .portfolio-section-description,   
      .portfolio-media-item-wide .portfolio-section-description {
         grid-area: description;
      }
      
      .resume-company {
         margin-top: calc(var(--sizing-unit) * 2);
      }
   }
   
   @media screen and (max-width: 1160px) {
      header {
         flex-direction: column;
         justify-content: flex-start;
         
         & nav {
            justify-content: start;
         }
      }
   
      #nav-internal {
         margin: auto;
         margin-top: calc(var(--sizing-unit) * 2);
      }
   
      #nav-sections {
         padding-left: 0;
      }
      
      .project-headers {
         grid-template-areas: "header"
                              "image"
                              "metadata";
         grid-template-columns: 1fr;
      }
      
      .project-headers header {
         margin-bottom: calc(var(--sizing-unit) * 2);
      }
   }
   
   @media screen and (max-width: 920px) {
      :root {
         --sizing-unit: 0.5em;
      }
      
      .titles-wrapper {
         margin-left: calc(var(--sizing-unit) * 2);
      }
   
      .portfolio-project-teaser,
      .portfolio-project-teaser:nth-child(even),
      .portfolio-project-teaser.laptop,
      .portfolio-project-teaser:nth-child(even).laptop {
         grid-template: max-content 1fr / repeat(auto-fit, minmax(256px, 1fr));
         grid-template-areas: "graphic"
                              "summary";
         padding-bottom: calc(var(--sizing-unit) * 8);
      }
      
      .portfolio-project-teaser:first-child {
         padding-top: calc(var(--sizing-unit) * 6);
      }
   
      .portfolio-project-teaser .project-summary,
      .portfolio-project-teaser:nth-child(even) .project-summary {
         padding: calc(var(--sizing-unit) * 2);
      }
   
      .project-teaser-image {
         display: flex;
         place-items: center;
      }
   
      .portfolio-project-teaser .project-link {
         font-size: var(--size-step-0);
      }
   
      .project-headers {
         padding: calc(var(--sizing-unit)*4) calc(var(--sizing-unit)*6);
      }
   
      .project-intro {
         padding: calc(var(--sizing-unit)*2) calc(var(--sizing-unit)*4);
      }
   }
   
   @media screen and (max-width: 800px) {
      .article-block.sidebar {
         grid-template-columns: 3fr 1fr;
      }
   }
   
   @media screen and (max-width: 710px) {
      #nav-sections li:not(:first-child) {
         margin-left: calc(var(--sizing-unit)*2);
      }
   }
   
   @media screen and (min-width: 665px) {
      #nav-sections {
         margin-top: 0;
         margin-bottom: 0;
      }
   }
   
   @media screen and (max-width: 664px) {
      :root {
         --sizing-unit: 0.25em;
      }
   
      header {
         padding: calc(var(--sizing-unit) * 4) calc(var(--sizing-unit) * 6);
         
         & nav {
            align-items: flex-start;
         }
      }
      
      figcaption {
         padding-top: calc(var(--sizing-unit) * 2);
      }
   
      .headshot-wrapper {
         display: none;
      }
   
      .titles-wrapper {
         > * {
            display: inline-block;
         }
         
         > h1 {
            padding-right: 0.5em;
         }
      }
   
      #nav-internal {
         margin: 0;
         
         #nav-sections {
            flex-direction: row;
            justify-content: space-between;
            width: 100%;
            
            & li {
               width: 100%;
               
               &, &:not(:first-child) {
                  text-align: center;
                  font-size: 0.75rem;
                  margin: 0;
               }
               
               &:not(:first-child) a {
                  border-top-width: 1px;
                  border-left-width: 0;
               }
               
               & a {
                  display: flex;
                  justify-content: center;
                  place-items: center;
                  height: 100%;
                  padding: var(--sizing-unit);
                  border-radius: 0;
               }
               
               &:first-child a {
                  border-radius: 16px 0 0 16px;
               }
               
               &:last-child a {
                  padding: var(--sizing-unit) 12px;
                  border-radius: 0 16px 16px 0;
               }
            }
         }
      }
      
      .portfolio-project-teaser .project-summary,
      .portfolio-project-teaser:nth-child(even) .project-summary {
         padding: calc(var(--sizing-unit) * 4);
      }
      
      .portfolio-project-teaser:first-child {
         padding-top: calc(var(--sizing-unit)*8);
      }
   
      .project-summary .project-link {
         display: block;
         text-align: center;
         padding: calc(var(--sizing-unit)*2);
      }
      
      .project-metadata {
         columns: 1;
         padding: calc(var(--sizing-unit) * 4);
      }
   
      .project-intro {
         grid-template-columns: 1fr;
         padding-bottom: calc(var(--sizing-unit) * 8);
      }
      
      .project-quotes {
         grid-template-columns: 1fr;
         row-gap: calc(var(--sizing-unit) * 4);
         padding-left: calc(var(--sizing-unit) * 8);
         
         & figure:nth-of-type(2n) {
            margin-left: 0;
         }
      }
   
      .skills {
         columns: 1;
      }
   
      .resume-company {
         grid-template-columns: 1fr;
         margin-top: calc(var(--sizing-unit)*6);
         
         &:first-of-type {
            margin-top: calc(var(--sizing-unit)*4);
         }
         
         .company-name {
            display: grid;
            grid-template-rows: 1fr min-content;
            text-align: left;
            
            & h1 a img {
               max-width: 30vw;
               height: auto;
            }
         }
      }   
   
      .article-block {
         padding: calc(var(--sizing-unit) * 6);
         
         &.sidebar {
            grid-template-columns: 1fr;
            grid-gap: 0;
            
            .photo-grid {
               row-gap: calc(var(--sizing-unit) * 6);
               
               & figure {
                  row-gap: calc(var(--sizing-unit) * 4);
               }
            }
         }
      }
   
      .design-tools {
         columns: 1;
      }
   
      footer {
         display: grid;
         grid-template-columns: 1fr;
         grid-template-areas: "social"
                              "copyright";
         justify-content: center;
         padding-bottom: calc(var(--sizing-unit) * 4);
         
         .social-links {
            grid-area: social;
            justify-self: unset;
            width: 100%;
            display: grid;
            grid-auto-flow: column;
            grid-column-gap: calc(var(--sizing-unit) * 4);
            justify-items: center;
            margin: calc(var(--sizing-unit) * 4);
            
            .icn-social-media {
               width: 32px;
               height: 32px;
               margin-right: 0;
            }
         }
         
         & span {
            grid-area: copyright;
            text-align: center;
            margin-left: 0;
         }
      }
      
      .nav-projects {
         padding: calc(var(--sizing-unit)*4);
      }
      
      .nav-projects :is(.prev, .nxt) {
         font-size: 0.75rem;
         padding: calc(var(--sizing-unit)*3) calc(var(--sizing-unit)*4);
         border-radius: calc(var(--sizing-unit)*4);
      }
   
      .portfolio-media-item {
         padding: calc(var(--sizing-unit)*4) calc(var(--sizing-unit)*6);
      }
   }
   
   @media screen and (max-width: 375px) {
      #nav-home {
         flex-direction: column;
      }
   
      #nav-sections li {
         width: auto;
         flex-grow: 1;
         
         &:nth-child(3) {
            flex-grow: 2;
         }
      }
   
      #social-links {
         padding: 8px;
      }
   
      .company-experience h2 {
         line-height: 1.2;
      }
   
      .portfolio-project-teaser,
      .portfolio-project-teaser:nth-child(even),
      .portfolio-project-teaser.laptop,
      .portfolio-project-teaser:nth-child(even).laptop {
         grid-template: fit-content(260px) 1fr / repeat(auto-fit, minmax(256px, 1fr));
         grid-template-areas: "graphic"
                              "summary";
      }
   }
   
   /* Sizing for touch devices */
   @media (any-pointer: coarse) {
      #social-links {
         padding: 8px;
      }
   }
   
   /* Style adjustments for high resolution devices */
   @media print,
   (-webkit-min-device-pixel-ratio: 1.25),
   (min-resolution: 1.25dppx),
   (min-resolution: 120dpi) {}
   
   /* Motion reduction */
   @media screen and (prefers-reduced-motion: reduce) {
      .project-teaser-image a img,
      .project-header-image img,
      .project-metadata {
         animation: none;
      }
   }
 }


/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {

   *,
   *:before,
   *:after {
      background: transparent !important;
      /* Black prints faster */
      color: #000 !important;
      box-shadow: none !important;
      text-shadow: none !important;
   }

   a,
   a:visited {
      text-decoration: underline;
   }

   a[href]:after {
      content: " (" attr(href) ")";
   }

   abbr[title]:after {
      content: " (" attr(title) ")";
   }

   /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

   a[href^="#"]:after,
   a[href^="javascript:"]:after {
      content: "";
   }

   .headshot-wrapper a,
   h1 a,
   .project-teaser-image a,
   .skills li a,
   #about-and-contact a {
      text-decoration: none;
   }

   .headshot-wrapper a[href]::after,
   h1 a[href]::after,
   .project-teaser-image a[href]::after,
   .skills li a[href]::after,
   #about-and-contact a[href]::after {
      content: none;
   }

   .project-summary .project-link {
      padding: 0;
      border: 0;
   }

   .project-link[href]::after {
      content: ": http://design.danieljwilson.me" attr(href);
   }

   .icn-social-media {
      margin-right: 0;
   }

   .icn-social-media use {
      fill: #000;
   }

   #nav-internal {
      display: none;
   }

   .nav-projects {
      display: none;
   }

   figure a[href]::after {
      content: none;
   }

   .portfolio-image-thumb {
      object-fit: scale-down;
      border: 1px solid #e8e8e8;
   }

   pre {
      white-space: pre-wrap !important;
   }

   pre,
   blockquote {
      page-break-inside: avoid;
   }

   /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

   thead {
      display: table-header-group;
   }

   tr,
   img {
      page-break-inside: avoid;
   }

   p,
   h2,
   h3 {
      orphans: 3;
      widows: 3;
   }

   h2,
   h3 {
      page-break-after: avoid;
   }
}