/* Shared gallery treatment for live work and the concept portfolio. */
:root {
  --work-paper: #f8fbfc;
  --work-ink: #122e35;
  --work-muted: #52666b;
  --work-rule: #d9e2e3;
}

.work-showcase,
.portfolio-page {
  color: var(--work-ink);
  background: var(--work-paper);
}

.work-showcase {
  padding: clamp(48px, 6vw, 88px) 0 clamp(64px, 7vw, 108px);
  scroll-margin-top: 100px;
}

.work-container {
  width: min(calc(100% - clamp(36px, 6vw, 112px)), 1320px);
  margin-inline: auto;
}

.work-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: clamp(32px, 4vw, 52px);
}

.work-kicker,
.work-count,
.work-category {
  color: var(--work-muted);
  font: 500 11px/1.5 ui-monospace, Consolas, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.work-kicker { margin: 0 0 16px; }
.work-count { margin: 0 0 7px; white-space: nowrap; }

.work-heading h2,
.portfolio-intro h1 {
  margin: 0;
  max-width: 100%;
  color: var(--work-ink);
  font: 500 clamp(38px, 5.2vw, 72px)/1.06 "Segoe UI", ui-sans-serif, sans-serif;
  letter-spacing: -.055em;
}

.work-grid,
.concept-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px;
  align-items: start;
}

.work-project { min-width: 0; }
.work-project-link { display: block; color: var(--work-ink); text-decoration: none; }

.work-stage {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1.48;
  padding: 36px 24px;
  overflow: hidden;
  background: #e4eeea;
  isolation: isolate;
}

.work-stage--bikes { background: #edece2; }
.work-stage--rose { background: #eee4e4; }
.work-stage--sand { background: #eee8df; }
.work-stage--ocean { background: #dfeaf0; }
.work-stage--slate { background: #e4e8ed; }

.work-browser {
  display: block;
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(18, 46, 53, .12);
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 20px 36px -15px rgba(18, 46, 53, .28), 0 3px 8px rgba(18, 46, 53, .04);
  transition: transform 280ms ease, box-shadow 280ms ease;
}

.work-browser-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 27px;
  background: #fafcfb;
  border-bottom: 1px solid #e4e9e6;
  color: #596a64;
  font: 10px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .015em;
}

.work-browser-bar::before {
  content: "";
  position: absolute;
  left: 12px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #b9c5bf;
  box-shadow: 7px 0 #b9c5bf, 14px 0 #b9c5bf;
}

.work-browser img {
  display: block;
  width: 100%;
  aspect-ratio: 1.9;
  height: auto;
  object-fit: cover;
  object-position: top;
}

.work-project-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 24px 0 22px;
}

.work-category { display: block; margin-bottom: 7px; font-size: 10px; }
.work-project-meta h3 {
  margin: 0;
  color: var(--work-ink);
  font: 500 clamp(24px, 2.4vw, 33px)/1.15 "Segoe UI", ui-sans-serif, sans-serif;
  letter-spacing: -.045em;
}

.work-visit {
  display: flex;
  align-items: center;
  gap: 13px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 500;
}

.work-arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid #b6c8c9;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.work-arrow svg { width: 20px; height: 20px; }

.work-project-link:hover .work-arrow,
.work-project-link:focus-visible .work-arrow,
.portfolio-door:hover .work-arrow,
.portfolio-door:focus-visible .work-arrow {
  color: #fff;
  background: var(--work-ink);
  border-color: var(--work-ink);
}

@media (hover: hover) {
  .work-project-link:hover .work-browser {
    transform: translateY(-5px);
    box-shadow: 0 28px 40px -17px rgba(18, 46, 53, .36);
  }
}

.work-project-link:focus-visible,
.portfolio-door:focus-visible,
.work-review summary:focus-visible,
.portfolio-back:focus-visible {
  outline: 2px solid #14776c;
  outline-offset: 6px;
}

.work-review {
  position: relative;
  border-top: 1px solid var(--work-rule);
  padding: 22px 0 0 28px;
}

.work-review::before {
  content: "\201C";
  position: absolute;
  top: 14px;
  left: 0;
  color: #508078;
  font: 42px/1 Georgia, serif;
}

.work-review blockquote {
  margin: 0 0 12px;
  max-width: 460px;
  color: var(--work-ink);
  font: 400 clamp(16px, 1.4vw, 19px)/1.6 "Segoe UI", ui-sans-serif, sans-serif;
  letter-spacing: -.01em;
}

.work-review cite { color: var(--work-muted); font-size: 12px; font-style: normal; }
.work-review details { margin-top: 8px; }
.work-review summary {
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  min-height: 44px;
  color: var(--work-ink);
  font-size: 12px;
  cursor: pointer;
  list-style: none;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.work-review summary::-webkit-details-marker { display: none; }
.work-review summary::after { content: "+"; font-size: 18px; text-decoration: none; }
.work-review details[open] summary::after { content: "\2212"; }
.work-review details p { margin: 6px 0 0; color: var(--work-muted); font-size: 14px; line-height: 1.75; }

.portfolio-door {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: clamp(48px, 6vw, 80px);
  padding: 28px 0;
  border-top: 1px solid var(--work-rule);
  border-bottom: 1px solid var(--work-rule);
  color: var(--work-ink);
  text-decoration: none;
}

.portfolio-miniatures { display: flex; padding-inline: 5px; flex-shrink: 0; }
.portfolio-miniatures img {
  width: 78px;
  height: 58px;
  object-fit: cover;
  object-position: top;
  border: 3px solid var(--work-paper);
  box-shadow: 0 3px 10px #122e3514;
  transform: rotate(-8deg);
}
.portfolio-miniatures img + img { margin-left: -17px; transform: rotate(7deg); }
.portfolio-door-copy { display: grid; gap: 5px; }
.portfolio-door-copy strong { font-size: clamp(19px, 2vw, 25px); font-weight: 500; letter-spacing: -.035em; }
.portfolio-door-copy small { color: var(--work-muted); font-size: 13px; }
.portfolio-door > .work-arrow { margin-left: auto; flex-shrink: 0; }

.portfolio-page .portfolio-main { padding: 60px 0 100px; }
.portfolio-back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: 48px;
  gap: 10px;
  color: var(--work-muted);
  font-size: 13px;
  text-decoration: none;
}
.portfolio-back svg { width: 18px; height: 18px; }
.portfolio-intro { margin-bottom: 56px; }
.portfolio-intro > p:last-child { margin: 22px 0 0; color: var(--work-muted); font-size: 16px; }
.concept-grid { row-gap: 36px; }
.concept-grid .work-stage { aspect-ratio: 1.5; }
.concept-grid .work-browser img { aspect-ratio: 1.6; }
.concept-grid .work-project-meta { border-bottom: 1px solid var(--work-rule); }
.portfolio-end {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 56px;
  margin-top: 24px;
}
.portfolio-end p { margin: 0; color: var(--work-ink); font-size: clamp(24px, 3vw, 38px); letter-spacing: -.04em; }
.portfolio-page .btn { border-radius: 0; }

@media (max-width: 1000px) {
  .work-grid, .concept-grid { gap: 26px; }
  .work-stage { padding: 28px 18px; }
  .work-visit-label { display: none; }
}

@media (max-width: 640px) {
  .work-grid, .concept-grid { grid-template-columns: 1fr; gap: 42px; }
  .work-heading { gap: 16px; align-items: start; }
  .work-count { display: none; }
  .work-kicker { font-size: 10px; }
  .work-stage { aspect-ratio: 1.4; padding: 28px 18px; }
  .work-project-meta { padding-block: 20px; }
  .work-project-meta h3 { font-size: 27px; }
  .work-visit-label { display: inline; }
  .portfolio-door { gap: 16px; padding-block: 24px; }
  .portfolio-miniatures { display: none; }
  .portfolio-page .portfolio-main { padding-top: 28px; padding-bottom: 64px; }
  .portfolio-back { margin-bottom: 32px; }
  .portfolio-intro { margin-bottom: 36px; }
  .portfolio-end { flex-direction: column; align-items: start; padding-top: 36px; }
}

@media (max-width: 800px) {
  .work-container {
    width: calc(100% - 2 * var(--mobile-gutter));
  }

  .work-grid,
  .concept-grid,
  .home-proof .work-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 52px;
    width: 100%;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .work-stage,
  .concept-grid .work-stage,
  .home-proof .work-stage {
    aspect-ratio: auto;
    padding: 20px 12px;
  }

  .work-browser img,
  .concept-grid .work-browser img {
    height: auto;
    aspect-ratio: auto;
  }

  .work-project-meta {
    padding-block: 20px 24px;
  }

  .work-project-meta h3 {
    font-size: 1.65rem;
  }

  .work-review {
    padding-top: 24px;
    padding-left: 24px;
  }

  .work-heading,
  .home-proof .work-heading { flex-direction: column; align-items: start; gap: 20px; }
  .work-project-meta { gap: 16px; }
  .work-project-meta > div { min-width: 0; }
  .work-project-meta h3 { line-height: 1.2; }
  .work-arrow { flex-shrink: 0; width: 44px; height: 44px; }
  .work-review p { font-size: 16px; line-height: 1.75; }
  .work-review summary { min-height: 44px; }

  .portfolio-page .portfolio-main {
    padding-block: 48px 80px;
  }

  .portfolio-intro {
    margin-bottom: 48px;
  }

  .portfolio-end {
    gap: 28px;
    padding-top: 48px;
  }
}

@media (max-width: 360px) {
  .work-container {
    width: calc(100% - 32px);
  }
}