/* The project and package collections use the same image proportions and frame. */
.studio-shell :is(.portfolio-grid, .concept-grid) {
  --preview-columns: 4;
  --preview-gap: clamp(.65rem, 1.3vw, 1.2rem);
  container-type: inline-size;
  grid-template-columns: repeat(var(--preview-columns), minmax(0, 1fr));
  gap: var(--preview-gap);
}

.studio-shell :is(.portfolio-image, .concept-card-art).preview-stage {
  --frame-top: color-mix(in srgb, var(--project-color) 25%, white);
  --frame-bottom: color-mix(in srgb, var(--project-color) 58%, white);
  --chrome-top: #fcfaf6;
  --chrome-bottom: #eae5de;
  --chrome-line: #66564c33;
  --chrome-address: #fffdf9;
  --chrome-ink: #564b47;
  --window-border: #fff9f196;
  --window-shadow: #26171f42;

  display: grid;
  place-items: center;
  aspect-ratio: 1.63;
  padding: 4% 5%;
  overflow: hidden;
  background: linear-gradient(142deg, var(--frame-top), var(--frame-bottom));
}

[data-theme="dark"] .studio-shell :is(.portfolio-image, .concept-card-art).preview-stage {
  --frame-top: color-mix(in srgb, var(--project-color) 54%, #141414);
  --frame-bottom: color-mix(in srgb, var(--project-color) 25%, #141414);
  --chrome-top: #43373f;
  --chrome-bottom: #2e252e;
  --chrome-line: #d9bec83b;
  --chrome-address: #231a23;
  --chrome-ink: #e8d8dd;
  --window-border: #d9bec870;
  --window-shadow: #110a11a0;
}

.portfolio-browser {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--window-border);
  border-radius: clamp(4px, .6vw, 8px);
  background: var(--chrome-bottom);
  box-shadow: 0 8px 17px var(--window-shadow);
  transition: transform .2s ease-out;
}

.portfolio-browser-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 5px;
  height: clamp(10px, 1.1vw, 16px);
  padding-inline: clamp(5px, .75vw, 9px);
  border-bottom: 1px solid var(--chrome-line);
  background: linear-gradient(180deg, var(--chrome-top), var(--chrome-bottom));
  color: var(--chrome-ink);
}

.portfolio-browser-dots { display: flex; gap: 2px; }
.portfolio-browser-dots i {
  width: clamp(3px, .35vw, 5px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #d26d62;
}
.portfolio-browser-dots i:nth-child(2) { background: #d9a64a; }
.portfolio-browser-dots i:nth-child(3) { background: #74a879; }

.portfolio-browser-address {
  width: 72%;
  height: 54%;
  justify-self: center;
  border: 1px solid var(--chrome-line);
  border-radius: 8px;
  background: var(--chrome-address);
}
.portfolio-browser-more { font-size: 9px; font-weight: 700; line-height: 1; }

.portfolio-browser-screen {
  display: block;
  position: relative;
  aspect-ratio: 1.9;
  overflow: hidden;
}

.studio-shell .preview-stage .portfolio-browser-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center var(--preview-position, top);
  transform: none;
  transition: none;
}

/* Crop baked-in browser chrome out of the original mockup images. */
.studio-shell :is(.frame-forma-house, .frame-sunday-table, .frame-alder-beam, .frame-fieldnote-goods, .frame-daymark-pilates) .portfolio-browser-screen img {
  position: absolute;
  width: var(--source-width);
  max-width: none;
  height: auto;
  inset: 0 auto auto 0;
  aspect-ratio: auto;
  transform: translate(var(--source-x), var(--source-y));
}

.frame-batch { --project-color: #b2894d; }
.frame-vintage { --project-color: #8f5e42; }
.frame-cedar { --project-color: #65785e; }
.frame-merit { --project-color: #536e95; }
.frame-forma-house {
  --project-color: #b5916d;
  --source-width: 114.12%;
  --source-x: -6.12%;
  --source-y: -13.87%;
}
.frame-sunday-table {
  --project-color: #718754;
  --source-width: 112.28%;
  --source-x: -5.47%;
  --source-y: -13.67%;
}
.frame-alder-beam {
  --project-color: #948475;
  --source-width: 108.17%;
  --source-x: -3.78%;
  --source-y: -14.84%;
}
.frame-fieldnote-goods {
  --project-color: #6088b7;
  --source-width: 110.03%;
  --source-x: -4.56%;
  --source-y: -13.48%;
}
.frame-daymark-pilates {
  --project-color: #94668e;
  --source-width: 106.67%;
  --source-x: -3.13%;
  --source-y: -11.91%;
}
.frame-sideband { --project-color: #625884; --preview-position: 32%; }
.frame-turnline { --project-color: #59796b; --preview-position: 32%; }
.frame-diner { --project-color: #ab6657; --preview-position: 32%; }

.frame-fern { --project-color: #84956f; }
.frame-aster { --project-color: #935e71; }
.frame-stem { --project-color: #8764ad; }
.frame-post { --project-color: #536acb; }
.frame-forno { --project-color: #bc8050; }
.frame-ember { --project-color: #738966; }
.frame-tavola { --project-color: #526e8a; }
.frame-slice { --project-color: #5d9788; }
.frame-clearwell { --project-color: #ba905b; }
.frame-morrow { --project-color: #527462; }
.frame-coatline { --project-color: #5670cc; }
.frame-ledge { --project-color: #c18775; }

@media (prefers-reduced-motion: no-preference) {
  .studio-shell .preview-stage:focus-visible .portfolio-browser {
    transform: scale(1.025);
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .studio-shell .preview-stage:hover .portfolio-browser {
    transform: scale(1.025);
  }
}

@media (max-width: 64rem) {
  .studio-shell :is(.portfolio-grid, .concept-grid) {
    --preview-columns: 2;
  }
}

@media (max-width: 34rem) {
  .studio-shell :is(.portfolio-grid, .concept-grid) {
    --preview-columns: 1;
  }
}

/* Size every title from the same card width and the longest project name. */
.studio-shell :is(.portfolio-card, .concept-card) {
  --preview-copy-padding: clamp(.9rem, 1.6vw, 1.5rem);
  --preview-title-max: 3.35rem;
}

@media (max-width: 64rem) {
  .studio-shell :is(.portfolio-card, .concept-card) { --preview-title-max: 2.75rem; }
}

@media (max-width: 34rem) {
  .studio-shell :is(.portfolio-card, .concept-card) {
    --preview-copy-padding: .85rem;
  }
}

.studio-shell :is(.portfolio-copy h2, .concept-card-copy .concept-card-title) {
  font: 400 clamp(1.25rem, 3vw, var(--preview-title-max)) / 1.04 var(--display);
  letter-spacing: -.025em;
}

@supports (font-size: 1cqi) {
  .studio-shell :is(.portfolio-copy h2, .concept-card-copy .concept-card-title) {
    --preview-column-width: calc((100cqi - (var(--preview-columns) - 1) * var(--preview-gap)) / var(--preview-columns));
    font-size: min(var(--preview-title-max), calc((var(--preview-column-width) - 2 * var(--preview-copy-padding) - .75rem) / 6.6));
  }
}

/* Shared card anatomy, including the projects with an extra feature link. */
.studio-shell .portfolio-card > .portfolio-image { flex: 0 0 auto; }

.studio-shell .portfolio-card .portfolio-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 auto;
  padding: var(--preview-copy-padding);
}

.studio-shell .portfolio-copy h2 {
  margin-block: .33rem .46rem;
}

.studio-shell .portfolio-summary > p {
  color: var(--muted);
  font-size: .89rem;
  line-height: 1.5;
  margin-block-end: .65rem;
}

.studio-shell :is(.portfolio-card, .concept-card) .action {
  min-block-size: 44px;
  max-inline-size: 100%;
  justify-self: start;
  text-decoration: none;
}

.studio-shell :is(.portfolio-card, .concept-card) .portfolio-feature {
  margin-block-end: .55rem;
  border-color: var(--accent);
}

.studio-shell .concept-card-copy {
  align-items: start;
  padding: var(--preview-copy-padding);
}

.studio-shell .concept-card-copy > .tile-meta {
  width: 100%;
  margin-block: 0 .65rem;
}

.studio-shell .concept-card:hover .concept-card-title { text-decoration: none; }

.studio-shell .portfolio-card .tile-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  margin-block-start: auto;
  padding-block-start: .45rem;
  border-block-start: 0;
}

.portfolio-card .tile-meta .format-label { text-wrap: balance; }

@media (max-width: 600px) {
  .studio-shell .portfolio-card .tile-meta { padding-block-start: .18rem; }
  .studio-shell .portfolio-card .tile-meta .format-label {
    border: 0;
    padding: 0;
    justify-self: end;
  }
}

/* Let each row size its text together, including after a portfolio filter. */
@supports (grid-template-rows: subgrid) {
  @media (width > 34rem) {
    .studio-shell :is(.portfolio-card, .concept-card) {
      display: grid;
      grid-template-rows: subgrid;
      row-gap: 0;
    }

    .studio-shell .portfolio-card { grid-row: span 5; }
    .studio-shell .concept-card { grid-row: span 6; }

    .studio-shell :is(.portfolio-card .portfolio-copy, .concept-card .concept-card-copy) {
      display: grid;
      grid-template-rows: subgrid;
      row-gap: 0;
      align-items: start;
    }

    .studio-shell .portfolio-card .portfolio-copy { grid-row: 2 / span 4; }
    .studio-shell .concept-card .concept-card-copy { grid-row: 2 / span 5; }

    .portfolio-copy > .kicker { grid-row: 1; }
    .portfolio-copy > .portfolio-summary { grid-row: 2; }
    .portfolio-copy > .portfolio-feature { grid-row: 3; justify-self: start; }

    .studio-shell .portfolio-copy > .tile-meta { grid-row: 4; }
    .studio-shell .concept-card-copy > .tile-meta { grid-row: 3; }
    .concept-card-copy > .portfolio-feature { grid-row: 4; }
    .concept-card-copy > .concept-project { grid-row: 5; }

    .studio-shell :is(.portfolio-copy, .concept-card-copy) > .tile-meta {
      margin-block-start: 0;
    }
  }
}