/*
Theme Name: Jordan Romanoff
Theme URI: https://jordanromanoff.com
Author: Jordan Romanoff
Author URI: https://jordanromanoff.com
Description: Developed by Jordan Romanoff for Jordan Romanoff
Tags: blog
Version: 1.0
*/

/* global fixes */

body {
  background-color:#FAFAFA;
  margin:0;
}

p, h1, h2, h3, h4, h5, img, div, article, figure, ul {box-sizing:border-box;margin:0;}

figure img {
    display: block;
}

.pt16 {padding-top:16px;}

.mw1440 {max-width:1440px;
          width:100%;}

.mw865 {max-width:865px;
        width:100%;}

.display-2, .display-3, .display-4 {
  font-family:"nimbus-sans", Arial, Helvetica, sans-serif;
  font-weight:300;
  color:#121212;
}

p, li, .body-normal, .body-large {
  font-family:"nimbus-sans", Arial, Helvetica, sans-serif;
  font-weight:400;
  color:#121212;
}

.bold {
  font-weight:400;
}

a {color:#123E7C;}

a:hover {opacity:0.5;}

.link-fix {
  color:#121212;
  text-decoration:none;
}

.display-1 {
  font-family:"ivypresto-display", Georgia, serif;
  font-weight:300;
}

#header {width:100svw;
          max-width:1568px;
          box-sizing:border-box;
          position:fixed;
          top:0;
          z-index:1;}

#header-top {
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items: center
}

.nav-link {
  color:#4072A5;
  text-decoration:none;
}

#header-box {width:100svw;
            height:100svh;
            position:fixed;
            top:0;
            left:0;
            z-index:-1;
            background: linear-gradient(
            to bottom,
            rgba(176, 202, 234, 0) 0%,
            rgba(176, 202, 234, 0.6) 100%);}

#header-wrapper {
            width:100%;
            max-width:1568px;
            height:100%;
            margin:auto;}

.name-hero {
  font-family:"ivypresto-display", Georgia, serif;
  font-weight:300;
  margin-bottom:30px;
  margin-top:0;
}

.name-subhead {max-width:903px;
              margin:0;}

#phonehand {
            position:absolute;
            bottom:0;
            right:0;
            max-height:40%;
}

.home-body-wrapper {
  width:100%;
  padding:32px 64px;
  margin:100svh auto 0 auto;
  background-color:#FAFAFA;
}

.home-body-wrapper > *  {
  max-width:1440px;
  margin:auto;
}

.ticker {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  padding:12px 0px 8px 0px;
  border-bottom:1px solid #B0CAEA;
}

.ticker-track {
  display: inline-flex;
  animation: ticker-scroll 40s linear infinite;
}

.ticker-item {
  padding-right: 3rem; /* spacing between repeats */
  font-size: 1rem;
  color:#4072A5;
  margin:0;
}

/* Left → Right scroll */
@keyframes ticker-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.case-study-card {
  width:100%;
  margin-top:32px;
  padding-bottom:32px;
  border-bottom:1px solid #B0CAEA;
  display:flex;
  align-items:center;
}

.case-study-card-copy {
  display:flex;
  flex-direction:column;
}


.case-study-tags {
  display:flex;
  gap:8px;
  margin-top:8px;
  flex-wrap:wrap;
  width:100%;
}

.case-study-tag {
  padding:6px 12px 0 12px;
  border:1px solid #B0CAEA;
}

.case-study-link {color:#4072A5}

.work-card-img-wrapper {
  position:relative;
  width:100%;
  margin-bottom:16px;
  background-color:#F5F5F5;
  border-radius:16px;
  overflow:hidden;
  padding:16px;
}

.work-card-img {
  z-index:-1;
  width:100%;
}

.work-card-category {
  position:absolute;
  top:8px;
  right:8px;
  padding:6px 12px 0px 12px;
  background-color:#F5F5F5;
  border:1px solid #B0CAEA;
}

.see-all-spacer {
  padding:64px 0;
  width:100%;
}

.see-all-button {
  display:block;
  padding:12px 18px 12px 12px;
  border:1px solid #4072A5;
  border-radius:999px;
  width:100%;
  text-align:center;
  box-sizing:border-box;
  transition: background-color .3s ease-out;
}

.see-all-button:hover {
  background-color:#B0CAEA;
}

.selected-visual-design-wrapper {
    width:100%;
    margin:auto;
}

.work-grid {
  --gap: 32px;
  --max: 458px;
  --min3: 305px;
  --min2: 227px;
  width:100%;
  max-width:1440px;

  margin-inline: auto;

  display: grid;
  gap: var(--gap);

  /* 3 columns by default */
  grid-template-columns: repeat(3, minmax(var(--min3), var(--max)));
  justify-content: center; /* keeps incomplete rows from stretching */
}

/* <= 948px: go to 2 columns */
@media (max-width: 948px) {
  .work-grid {
    grid-template-columns: repeat(2, minmax(var(--min2), var(--max)));
  }
}

/* <= 458px: go to 1 column */
@media (max-width: 458px) {
  .work-grid {
    grid-template-columns: 1fr;
    justify-content: stretch;
  }
}

#footer {
  border-top:1px solid #B0CAEA;
  display:grid;
  background-color:#FAFAFA;
  width:100svw;
  gap:32px;
}

.work-card {
  opacity:1;
  transition:
  opacity 200ms ease,
  transform 200ms ease,
  position 200ms ease;
}

.work-card.is-hiding {opacity: 0;
  pointer-events: none;
  transform: translateY(4px);}

.work-card.is-hidden {
  display: none;
}

.chips {
  width:100%;
}

.chip {
  padding:6px 12px 0 12px;
  border:1px solid #123E7C;
  border-radius:999px;
  background-color:#fafafa;
  min-width:80px;
  transition: background-color .3s ease-out;
  cursor: pointer;
  margin-bottom:8px;
  text-align:center;
}

.chip:hover {
  background-color:#D7E4F4;
}

.chip[aria-pressed="true"] {
  background-color:#B0CAEA;
}

.page-wrapper {
  width:100%;
  margin:auto;
}

.job-block div {
  display:flex;
  flex-direction:column;
  gap:16px;
}