/* kevintosi.com — rebuilt from the original Cargo "Polaris" layout */

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

html, body { margin: 0; padding: 0; -webkit-text-size-adjust: 100%; }

body {
  background: #fff;
  color: #3e3e3e;
  font-family: futura, "Futura", "Century Gothic", Avenir, sans-serif;
  font-size: 12px;
  line-height: 1.5;
}

img { border: 0; }

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 8px; top: 8px;
  z-index: 1000;
  background: #ffff00;
  padding: 6px 10px;
}

/* ------------------------------------------------------------ header --- */

.site-header {
  position: fixed;
  top: 30px;
  left: 28px;
  z-index: 999;
  width: 200px;
  text-align: center;
}

.site-header img {
  max-width: 200px;
  width: 100%;
  height: auto;
  display: block;
}

/* the Contact link sits under the cat, in the sidebar on desktop */
.contact-link {
  display: inline-block;
  margin-top: 10px;
  margin-left: -50px;
  color: #3e3e3e;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
}

.contact-link:hover { background: #171717; color: #fff; }
.contact-link:active,
.contact-link.active { background: #3e3e3e; color: #fff; }

/* --------------------------------------------------------- container --- */

/* padding-top rather than margin-top, so the banner's own margin can't
   collapse into it and pull everything 14px up the page */
.container {
  margin: 0 0 60px 261px;
  padding-top: 38px;
  position: relative;
}

/* ----------------------------------------------------- game banner --- */

.game-banner {
  display: block;
  margin: 0 0 14px;   /* bottom value = gap down to the first thumbnail */
  max-width: 1015px;
}

.game-banner img {
  width: 100%;
  max-width: 1015px;
  height: auto;
  display: block;
  border-radius: 10px;
}

/* ----------------------------------------------------- thumbnail index --- */

/* Two across once there's room for it, one across when there isn't.
   Capped at 1015px so the grid lines up with the banner above it — at that
   width each column lands on 499px, which is the thumbnails' native 500px,
   so they never get upscaled. Narrower than that and both columns shrink
   together until there's no longer room for two. */
.thumbnails {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 17px;               /* space between thumbnails, both directions */
  max-width: 1015px;
  padding-top: 0;
  clear: both;
}

.project-thumb {
  display: block;
  position: relative;
  max-width: 500px;   /* the banners' native width — never upscale past it */
  opacity: .95;
  text-decoration: none;
  line-height: 0;
}

.project-thumb img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  transition: opacity 1s ease-in-out;
}

.project-thumb:hover img { opacity: .9; }

.project-thumb:active img { transform: translate(0, 2px); }

.project-thumb.active img { outline: 2px solid #333; outline-offset: 2px; }

/* -------------------------------------------------------- project page --- */

.project { clear: both; }

.project h1 {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.5;
  margin: 0;
  text-transform: none;
}

/* the original Cargo layout capped the reading column at 670px — this is what
   sizes the videos and keeps the 500px images one per row */
.project { max-width: 670px; }

.project-content {
  padding-top: 0;
  font-size: 13px;
  font-family: proxima-nova, "Proxima Nova", futura, "Futura", "Century Gothic", Avenir, sans-serif;
  font-weight: normal;
  line-height: 1.5;
}

.project-content br { clear: both; }

.project-content a { color: #242424; text-decoration: none; border-bottom: 1px solid #ccc; }
.project-content a:hover { background: #ffff00; border-bottom-color: transparent; }
.project-content a:active { background: #242424; color: #fff; }

.project-content img {
  margin: 0 15px 22px 0;
  max-width: 100%;
  height: auto;
}

.project-content img[align="left"] { float: left; }

.project-content iframe {
  max-width: 100%;
  border: 0;
}

/* Cargo wrapped some youtube embeds in its own padded ratio box. Leave the
   width alone — capping it would break the ratio, since the percentage padding
   resolves against the container, not the box. */

/* the mixcloud embeds ship hard-coded inline pixel widths — rein them in */
.project-content div[style*="width"],
.project-content p[style*="width"] {
  max-width: 100%;
}

.project-content::after { content: ""; display: block; clear: both; }

/* the thumbnail index sits below the project, like the original */
.project + .thumbnails { padding-top: 40px; }

/* ------------------------------------------------------- contact page --- */

/* the contact header runs wider than the 670px reading column so the whole
   quip sits on one line; the resume below keeps the narrow measure */
.project.contact { max-width: 1015px; }
.resume { max-width: 670px; }

/* the headline steps down in three sizes on one baseline, like the original */
.project h1.contact-head {
  font-size: 30px;
  font-weight: bold;
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin: 0;
  text-transform: uppercase;
}

.project h1.contact-head .ch-2,
.project h1.contact-head .ch-3 { white-space: nowrap; }
.project h1.contact-head .ch-2 { font-size: 20px; letter-spacing: 0; margin-left: .35em; }
.project h1.contact-head .ch-3 { font-size: 10px; letter-spacing: 0; margin-left: .5em; }

.contact-email {
  font-size: 25px;
  font-weight: bold;
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin: 0;
  text-transform: uppercase;
}

.contact-email a {
  color: inherit;
  text-decoration: none;
  border: 0;
}
.contact-email a:hover { background: #3e3e3e; color: #fff; }

.resume-link {
  font-size: 15px;
  font-weight: bold;
  margin: 42px 0 0;
}

.resume-link a {
  color: #3e3e3e;
  text-decoration: none;
  border-bottom: 2px solid #3e3e3e;
  padding-bottom: 1px;
}
.resume-link a:hover { background: #3e3e3e; color: #fff; }

/* resume body — italic section heads, generous letter-spacing, like the PDF */
.resume { margin-top: 46px; letter-spacing: .4px; }

.resume h2 {
  font-family: futura, "Futura", "Century Gothic", Avenir, sans-serif;
  font-size: 21px;
  font-style: italic;
  font-weight: normal;
  letter-spacing: 1px;
  margin: 34px 0 10px;
  text-transform: uppercase;
}

.resume h2:first-child { margin-top: 0; }

.resume .job { margin: 0 0 20px; padding-left: 10px; }

.resume .job b { font-weight: bold; }

/* ------------------------------------------------------------- mobile --- */
/* the cargo original was locked to a 1035px desktop viewport; this keeps
   the same look on desktop and makes it usable on a phone */

@media (max-width: 900px) {
  /* the sidebar becomes a centred header that scrolls away with the page */
  .site-header {
    position: static;
    width: auto;
    text-align: center;
    padding: 22px 18px 0;
  }
  .site-header img {
    max-width: 150px;
    margin: 0 auto;
  }

  /* the desktop nudge would throw the link off-centre under the logo here */
  .contact-link { margin-left: 0; }

  .container {
    margin: 0 0 48px;
    padding: 22px 18px 0;
    max-width: none;
  }

  /* the 3D portfolio has a touch build now, so the banner comes back — sized
     to the thumbnail column so the banner and the index read as one stack */
  .game-banner {
    max-width: 500px;
    margin: 0 auto 12px;
  }

  /* one across, centred, still capped at the artwork's native 500px */
  .thumbnails {
    grid-template-columns: 1fr;
    gap: 12px;
    justify-items: center;
    max-width: none;
  }

  /* a project reads as one centred column, with the text itself left-aligned */
  .project { margin: 0 auto; }

  .project h1 { font-size: 17px; }

  .project-content { font-size: 15px; line-height: 1.55; }

  .project-content img[align="left"] { float: none; }
  .project-content img { margin: 0 0 16px; }

  /* the index below a project needs air above it, not a hard edge */
  .project + .thumbnails { padding-top: 32px; }

  /* contact page: the headline has to wrap and shrink to fit a phone */
  .project.contact { max-width: none; }
  .resume { max-width: none; }

  .project h1.contact-head { font-size: 26px; letter-spacing: 0; }
  .project h1.contact-head .ch-2 {
    font-size: 15px;
    margin-left: .3em;
    white-space: normal;
  }
  .project h1.contact-head .ch-3 {
    font-size: 11px;
    margin-left: .3em;
    white-space: normal;
  }

  .contact-email { font-size: 22px; letter-spacing: 0; overflow-wrap: anywhere; }

  .resume-link { margin-top: 30px; }
  .resume { margin-top: 34px; }
  .resume h2 { font-size: 18px; margin: 28px 0 8px; }
  .resume .job { padding-left: 0; }
}

.notfound { margin: 24px 0 18px; font-size: 12px; line-height: 1.6; }