/* The portfolio uses its own layout and leaves the shared site theme in place. */
.portfolio-page {
  --portfolio-paper: #f6f4f0;
  --portfolio-rule: #e7e2d9;
  --portfolio-ink: #282722;
}

.portfolio-page [hidden] { display: none !important; }
.portfolio-page .portfolio-shape-list { display: block; }
.portfolio-page main:has(.portfolio-shape-list) { padding-top: clamp(22px, 3vw, 48px); }
.portfolio-page main:has(.portfolio-shape-list) h1 { margin-block: 0 10px; }
.portfolio-page .portfolio-shapes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-block: 22px 28px;
}
.portfolio-page .portfolio-shape-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 14px;
  border: 1px solid var(--portfolio-rule);
  border-radius: 100px;
  color: var(--portfolio-ink);
  text-decoration: none;
  background: #fff;
}
.portfolio-page .portfolio-shape-link:hover,
.portfolio-page .portfolio-shape-link:focus-visible { background: var(--portfolio-paper); }
.portfolio-chip-count { color: #64594c; font-size: .83em; }
.portfolio-page .portfolio-shape { scroll-margin-top: 100px; margin: 0 0 48px; }
.portfolio-page .portfolio-shape-title {
  margin: 0 0 16px;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.12;
}
.portfolio-tiles,
.portfolio-related-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px 16px;
}
.portfolio-page .portfolio-tile { min-width: 0; margin: 0; }
.portfolio-page .portfolio-tile-media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 5 / 4;
  background: var(--portfolio-paper);
  border-radius: 10px;
}
.portfolio-page :is(.portfolio-tile-media, .portfolio-thumb, .portfolio-related-card) img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.portfolio-page .portfolio-tile-media img { position: absolute; inset: 0; }
.portfolio-page .portfolio-tile-name {
  display: block;
  color: var(--portfolio-ink);
  margin-top: 7px;
  font-size: clamp(.92rem, 1.2vw, 1.1rem);
  line-height: 1.25;
  text-decoration: none;
}
.portfolio-page .portfolio-tile-name:hover { text-decoration: underline; }

.portfolio-page .portfolio-detail.shell {
  max-width: 1232px;
  padding-block: clamp(24px, 3.6vw, 52px) 48px;
}
.portfolio-page .portfolio-detail h1 {
  margin-block: 7px 12px;
  font-size: clamp(2.05rem, 4vw, 3.5rem);
  line-height: 1.12;
}
.portfolio-page .portfolio-detail > p { margin-block: 7px; }
.portfolio-page .portfolio-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(235px, .75fr);
  gap: clamp(22px, 5vw, 66px);
  align-items: start;
  margin-top: clamp(18px, 2.8vw, 32px);
}
.portfolio-media { min-width: 0; }
.portfolio-page .portfolio-stage {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 160px;
  touch-action: pan-y;
  cursor: zoom-in;
  text-decoration: none;
}
.portfolio-page .portfolio-stage img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(58svh, 580px);
  object-fit: contain;
}
.portfolio-detail-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 12px;
}
.portfolio-thumbs {
  display: flex;
  gap: 6px;
  max-width: 100%;
  padding: 4px 2px;
  overflow-x: auto;
}
.portfolio-page .portfolio-thumb {
  display: block;
  flex: 0 0 54px;
  height: 54px;
  padding: 2px;
  border: 1px solid var(--portfolio-rule);
  border-radius: 6px;
  background: #fff;
}
.portfolio-thumb[aria-current="true"] { outline: 2px solid #85633d; outline-offset: -2px; }
.portfolio-inline-pager { display: flex; align-items: center; gap: 6px; color: #64594c; font-size: .875rem; }
.portfolio-inline-pager button,
.portfolio-viewer button {
  display: grid;
  place-items: center;
  border-radius: 100px;
  border: 1px solid var(--portfolio-rule);
  background: #fff;
  color: var(--portfolio-ink);
  cursor: pointer;
  padding: 0;
  min-width: 44px;
  min-height: 44px;
  font: inherit;
  font-size: 26px;
  line-height: 1;
}
.portfolio-page .portfolio-info {
  padding-top: 4px;
  color: var(--portfolio-ink);
}
.portfolio-page .portfolio-info p { margin: 0 0 14px; }
.portfolio-page .portfolio-info .button {
  display: inline-flex;
  width: auto;
  min-height: 48px;
  gap: 22px;
  margin-block: 2px 12px;
  padding-inline: 18px;
  border-radius: 7px;
}
.portfolio-page .portfolio-related { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--portfolio-rule); }
.portfolio-page .portfolio-related h2 { margin: 0 0 16px; font-size: clamp(1.45rem, 3vw, 2.1rem); }
.portfolio-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.portfolio-page .portfolio-related-card { color: var(--portfolio-ink); text-decoration: none; }
.portfolio-page .portfolio-related-card img { height: auto; aspect-ratio: 5 / 3; border-radius: 9px; background: var(--portfolio-paper); }
.portfolio-page .portfolio-related-card span { display: block; margin-top: 7px; }

.portfolio-page img:is([src="/assets/p7-tag-red-emblem-original-1.jpg"],[src="/assets/work-tag-red-emblem-on-table-20261106.webp"]) {
  filter: url("/assets/portfolio-metal-light-20261106.svg#soft-light");
}
.portfolio-page img[src="/assets/work-tag-color-silhouette-20261106.jpg"] {
  filter: url("/assets/portfolio-metal-light-20261106.svg#soft-detail");
}

.portfolio-page:has(.portfolio-viewer[open]) { overflow: hidden; }
.portfolio-page .portfolio-viewer[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: clamp(12px, 2vw, 24px);
  border: 0;
  background: #20221f;
  color: #fff;
}
.portfolio-viewer::backdrop { background: #20221f; }
.portfolio-view-head,
.portfolio-view-foot,
.portfolio-view-links,
.portfolio-view-arrows { display: flex; align-items: center; gap: 8px; }
.portfolio-view-head, .portfolio-view-foot { justify-content: space-between; }
.portfolio-view-head p { margin: 0; font-size: 1rem; line-height: 1.25; }
.portfolio-view-head .portfolio-view-count { color: #d7d4ce; margin-top: 4px; font-size: .85rem; }
.portfolio-viewer button { color: #fff; background: transparent; border-color: #74766f; }
.portfolio-viewer button:hover { background: #393b36; }
.portfolio-view-stage {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  margin-block: 8px;
  touch-action: pan-y;
}
.portfolio-view-stage img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
}
.portfolio-view-foot { flex-wrap: wrap; min-height: 44px; }
.portfolio-view-links { flex-wrap: wrap; }
.portfolio-view-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 10px;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
}
.portfolio-view-links .portfolio-view-order { background: #785833; }
.portfolio-view-error a { color: #fff; }
.portfolio-page :is(.portfolio-tile a, .portfolio-stage, .portfolio-thumb, .portfolio-related-card, .portfolio-viewer a, .portfolio-viewer button):focus-visible {
  outline: 2px solid #c59e6e;
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .portfolio-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .portfolio-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 10px; }
  .portfolio-page .portfolio-detail-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .portfolio-page .portfolio-stage img { max-height: min(52svh, 480px); }
  .portfolio-page .portfolio-info { border-top: 1px solid var(--portfolio-rule); padding-top: 18px; }
  .portfolio-page .portfolio-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .portfolio-page .portfolio-related-card span { font-size: .9rem; }
  .portfolio-page:has(.portfolio-detail) .floating-request { display: none !important; }
  .portfolio-page:has(.portfolio-detail) .footer { padding-bottom: 35px; }
}