/* Crysten Curry Elementor Widget - Contents / Portfolio Nav (fonts come from fonts.css) */

.cc-contents-wrap {
  --cc-c-bg: #FDFBF5;
  --cc-c-line: #1B1A1A;
  --cc-c-hover: #CDBFB4;
  --cc-c-min: 720px;
  --cc-c-photo-fr: 27;
  --cc-c-chrome: #1B1A1A;
  --cc-c-text: #1B1A1A;
  --cc-c-text-hover: #520000;
  --cc-c-fs: clamp(1.1rem, 2.3vw, 2.4rem);
  --cc-c-gutter: clamp(20px, 3.2vw, 56px);
  --cc-c-pos-y: 15%;
  width: 100%;
  font-size: 13px;
  line-height: 1.85;
  box-sizing: border-box;
}
.cc-contents-wrap *, .cc-contents-wrap *::before, .cc-contents-wrap *::after { box-sizing: border-box; }

.cc-contents {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, var(--cc-c-photo-w, 26.667%)) minmax(0, 1fr);
  background: var(--cc-c-bg);
  min-height: var(--cc-c-min);
}

.cc-contents .cc-chrome {
  position: absolute;
  top: clamp(16px, 1.8vw, 28px);
  left: clamp(20px, 3.2vw, 56px);
  right: clamp(20px, 3.2vw, 56px);
  z-index: 6;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  pointer-events: none;
}
.cc-contents .cc-mono {
  margin: 0;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .05em;
  line-height: 1.9;
  text-transform: uppercase;
  color: var(--cc-c-chrome);
}

.cc-contents__photo { overflow: hidden; }
.cc-contents__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% var(--cc-c-pos-y);
}

.cc-contents__cols {
  display: flex;
  gap: 0;
  padding: clamp(60px, 6vw, 96px) var(--cc-c-gutter) clamp(30px, 3vw, 50px) clamp(20px, 3vw, 56px);
  position: relative;
}
.cc-contents__cols a {
  flex: 1;
  display: flex;
  align-items: flex-end;
  border-left: 1px solid var(--cc-c-line);
  padding: 0 0 8px 0;
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  letter-spacing: .005em;
  line-height: 1;
  font-size: var(--cc-c-fs);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cc-c-text);
  transition: background .3s, color .3s;
}
.cc-contents__cols a:last-child { border-right: 1px solid var(--cc-c-line); }
.cc-contents__cols a span { writing-mode: vertical-rl; transform: rotate(180deg); padding: 18px 10px 0; white-space: nowrap; }
.cc-contents__cols a:hover,
.cc-contents__cols a.on { background: var(--cc-c-hover); }
.cc-contents__cols a:hover { color: var(--cc-c-text-hover); }
.cc-contents__cols a:focus-visible { outline: 2px solid #B0122A; outline-offset: -2px; }