.portfolio-page { background: var(--color-cream); }
.portfolio-page .sr-only { width: 1px; max-width: 1px; margin: -1px; }

.portfolio-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: clamp(3rem, 6vw, 6rem);
  width: min(100% - (2 * var(--gutter)), var(--content-wide));
  margin-inline: auto;
  padding-block: clamp(3rem, 5vw, 5rem);
}

#portfolio-gallery, #wall-panels, #sofas-and-sectionals, #beds-and-headboards { scroll-margin-top: 8rem; }

.portfolio-hero.is-image-filtered { grid-template-columns: minmax(0, 1fr); }
.portfolio-hero-copy { max-width: 42rem; }
.portfolio-hero.is-image-filtered .portfolio-hero-copy { max-width: 55rem; }
.portfolio-hero h1 { font-size: clamp(3.5rem, 5.35vw, 6.2rem); }
.portfolio-hero-lead { max-width: 38rem; margin: var(--space-6) 0 0; color: var(--color-muted); font-size: var(--step-1); line-height: 1.6; }
.portfolio-disclosure { max-width: 39rem; margin: var(--space-5) 0 0; padding-top: var(--space-5); border-top: 1px solid var(--color-border); color: var(--color-muted); font-size: var(--step--1); line-height: 1.65; }
.portfolio-hero-visual { width: min(100%, var(--content-max)); min-width: 0; justify-self: center; margin: 0; background: var(--color-taupe-100); }
.portfolio-hero-visual .portfolio-image-link { aspect-ratio: 4 / 3; }
.portfolio-hero-visual .portfolio-image-link img { object-fit: contain; object-position: center; background: var(--color-taupe-100); }

.portfolio-filter-section { background: var(--color-ivory); padding: clamp(2.5rem, 4vw, 4rem) var(--gutter); }
.portfolio-filter-panel { width: min(100%, var(--content-max)); margin-inline: auto; }
.portfolio-filter-panel[hidden] { display: none; }
.portfolio-filter-panel > p:first-child { margin: 0 0 var(--space-4); color: var(--color-walnut); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }
.portfolio-filter-buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.portfolio-filter-buttons button { min-height: 2.875rem; padding: 0.65rem 1rem; border: 1px solid var(--color-border); background: transparent; color: var(--color-text); cursor: pointer; font-size: 0.72rem; letter-spacing: 0.07em; transition: background-color var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast); }
.portfolio-filter-buttons button:hover { border-color: var(--color-walnut); }
.portfolio-filter-buttons button[aria-pressed="true"] { border-color: var(--color-walnut); background: var(--color-walnut); color: var(--color-ivory); }

.portfolio-piece { margin: 0; }
.portfolio-piece[hidden], [data-portfolio-section][hidden] { display: none; }
.portfolio-image-link { position: relative; display: block; overflow: hidden; background: var(--color-taupe-100); }
.portfolio-image-link::after { position: absolute; inset: 0; border: 1px solid transparent; content: ""; pointer-events: none; transition: border-color var(--duration-fast); }
.portfolio-image-link:hover::after { border-color: rgba(91, 67, 52, 0.36); }
.portfolio-image-link:focus-visible { box-shadow: var(--focus-ring); }
.portfolio-image-link img { width: 100%; height: 100%; object-fit: contain; object-position: center; transition: transform var(--duration-slow) var(--ease-standard); }
.portfolio-image-link:hover img { transform: none; }
.portfolio-piece figcaption { margin-top: var(--space-3); color: var(--color-muted); font-size: 0.72rem; letter-spacing: 0.09em; line-height: 1.45; text-transform: uppercase; }
.portfolio-paired-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: clamp(5rem, 8vw, 8rem); width: min(100%, var(--content-max)); margin-inline: auto; }
.portfolio-paired-grid > .portfolio-piece { display: grid; min-width: 0; grid-template-rows: auto auto; align-self: start; }
.portfolio-paired-grid > .portfolio-piece[hidden] { display: none; }
.portfolio-paired-grid .portfolio-image-link { align-self: start; }
.portfolio-paired-grid figcaption { align-self: start; }

.portfolio-split { background: var(--color-cream); }
.portfolio-split-grid { grid-template-columns: minmax(0, 1fr); }
.portfolio-piece-landscape .portfolio-image-link { aspect-ratio: 4 / 3; }
.portfolio-piece-portrait { width: 100%; }
.portfolio-piece-portrait .portfolio-image-link { aspect-ratio: 4 / 3; }

.portfolio-fullwidth { background: var(--color-cream); }
.portfolio-fullwidth > .portfolio-piece { width: min(100%, var(--content-max)); }
.portfolio-fullwidth .portfolio-image-link { aspect-ratio: 4 / 3; }
.portfolio-fullwidth .portfolio-image-link img { object-fit: contain; }

.portfolio-landscape-feature { background: var(--color-cream); }
.portfolio-landscape-feature > .portfolio-piece { width: min(100%, var(--content-max)); }

.portfolio-asymmetric { background: var(--color-cream); }
.portfolio-asymmetric-grid { grid-template-columns: minmax(0, 1fr); }
.portfolio-asymmetric-sofa .portfolio-image-link { aspect-ratio: 4 / 3; }
.portfolio-asymmetric-bed .portfolio-image-link { aspect-ratio: 4 / 3; }

.portfolio-accent { background: var(--color-cream); }
.portfolio-accent-grid { grid-template-columns: minmax(0, 1fr); }
.portfolio-accent-grid .portfolio-image-link { aspect-ratio: 4 / 3; }

.portfolio-split,
.portfolio-fullwidth,
.portfolio-landscape-feature,
.portfolio-asymmetric,
.portfolio-accent {
  padding-block: clamp(2.75rem, 4vw, 4.5rem);
}

.portfolio-split .portfolio-piece,
.portfolio-fullwidth > .portfolio-piece,
.portfolio-landscape-feature > .portfolio-piece,
.portfolio-asymmetric .portfolio-piece,
.portfolio-accent .portfolio-piece {
  width: min(100%, var(--content-max));
  margin-inline: auto;
}

.portfolio-piece .portfolio-image-link {
  aspect-ratio: 4 / 3;
  background: var(--color-taupe-100);
}

.portfolio-approach-section { background: var(--color-charcoal); }
.portfolio-approach { display: grid; grid-template-areas: "eyebrow heading" ". body"; grid-template-columns: minmax(10rem, 0.35fr) minmax(0, 0.65fr); gap: var(--space-6) clamp(3rem, 8vw, 9rem); padding-top: var(--space-7); border-top: 1px solid var(--color-border-dark); }
.portfolio-approach .eyebrow { grid-area: eyebrow; margin: 0; }
.portfolio-approach h2 { grid-area: heading; max-width: 52rem; font-size: clamp(2.6rem, 4.8vw, 5.5rem); line-height: 1.02; }
.portfolio-approach > p:last-child { grid-area: body; max-width: 45rem; margin: 0; color: rgba(243, 239, 231, 0.76); font-size: var(--step-1); line-height: 1.7; }

.portfolio-lightbox { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(28, 27, 25, 0.98); color: var(--color-ivory); }
.portfolio-lightbox::backdrop { background: rgba(28, 27, 25, 0.94); }
.portfolio-lightbox[open] { display: grid; place-items: center; }
.portfolio-lightbox-panel { position: relative; display: grid; width: min(100% - (2 * var(--gutter)), 96rem); min-height: 100%; grid-template-columns: 3.5rem minmax(0, 1fr) 3.5rem; align-items: center; gap: var(--space-4); padding-block: clamp(4.5rem, 8vh, 6rem) var(--space-7); }
.portfolio-lightbox-figure { display: grid; min-width: 0; justify-items: center; margin: 0; }
.portfolio-lightbox-figure img { width: auto; max-width: 100%; height: auto; max-height: 76vh; object-fit: contain; }
.portfolio-lightbox-figure figcaption { margin-top: var(--space-4); color: rgba(243, 239, 231, 0.78); font-size: 0.75rem; letter-spacing: 0.11em; line-height: 1.45; text-align: center; text-transform: uppercase; }
.portfolio-lightbox-close, .portfolio-lightbox-control { display: inline-grid; min-width: 2.75rem; min-height: 2.75rem; place-items: center; border: 1px solid var(--color-border-dark); background: transparent; color: var(--color-ivory); cursor: pointer; }
.portfolio-lightbox-close:hover, .portfolio-lightbox-control:hover { border-color: var(--color-ivory); }
.portfolio-lightbox-close { position: absolute; top: var(--space-5); right: 0; padding-inline: 0.9rem; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; }
.portfolio-lightbox-control { font-size: 1.35rem; }
.portfolio-lightbox-previous { grid-column: 1; }
.portfolio-lightbox-figure { grid-column: 2; }
.portfolio-lightbox-next { grid-column: 3; }
.portfolio-lightbox-position { position: absolute; right: 0; bottom: var(--space-4); left: 0; margin: 0; color: rgba(243, 239, 231, 0.58); font-size: 0.72rem; letter-spacing: 0.1em; text-align: center; }

@media (max-width: 64rem) {
  .portfolio-hero { min-height: auto; grid-template-columns: 1fr; padding-top: clamp(4rem, 8vw, 6rem); }
  .portfolio-hero-copy { max-width: 55rem; }
  .portfolio-hero-visual { width: min(100%, var(--content-max)); justify-self: center; }
  .portfolio-hero-visual .portfolio-image-link { aspect-ratio: 4 / 3; }
  .portfolio-landscape-feature > .portfolio-piece { width: 100%; }
}

@media (max-width: 56rem) {
  .portfolio-split-grid, .portfolio-asymmetric-grid { grid-template-columns: 1fr; gap: clamp(4rem, 8vw, 6rem); }
  .portfolio-piece-portrait, .portfolio-asymmetric-bed { width: 100%; }
}

@media (max-width: 48rem) {
  .portfolio-hero { gap: var(--space-8); }
  .portfolio-hero h1 { font-size: clamp(3.15rem, 13.5vw, 4.75rem); }
  .portfolio-filter-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portfolio-filter-buttons button { width: 100%; }
  .portfolio-split-grid, .portfolio-asymmetric-grid, .portfolio-accent-grid { grid-template-columns: 1fr; gap: clamp(3.5rem, 10vw, 5rem); }
  .portfolio-piece-portrait { width: 100%; justify-self: stretch; }
  .portfolio-image-link img { object-fit: contain; }
  .portfolio-fullwidth .portfolio-image-link img { object-fit: contain; }
  .portfolio-approach { grid-template-areas: "eyebrow" "heading" "body"; grid-template-columns: 1fr; gap: var(--space-5); }
  .portfolio-approach h2 { font-size: clamp(2.65rem, 12vw, 4rem); }
  .portfolio-lightbox-panel { width: min(100% - 2rem, 96rem); grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem; gap: var(--space-2); }
  .portfolio-lightbox-figure img { max-height: 70vh; }
  .portfolio-lightbox-close { right: 0; }
}

@media (max-width: 30rem) {
  .portfolio-filter-buttons { grid-template-columns: 1fr; }
  .portfolio-lightbox-panel { grid-template-columns: 1fr 1fr; align-content: center; }
  .portfolio-lightbox-figure { grid-column: 1 / -1; grid-row: 1; }
  .portfolio-lightbox-previous { grid-column: 1; grid-row: 2; justify-self: start; }
  .portfolio-lightbox-next { grid-column: 2; grid-row: 2; justify-self: end; }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-image-link img { transition: none; }
  .portfolio-image-link:hover img { transform: none; }
}