/* Wide image surfaces with a quiet, light editorial frame. */
.wide-portfolio { --collection-edge:clamp(12px,1.25vw,28px); }
.wide-portfolio .site-header,
.wide-portfolio .site-footer { max-width:none; }
.wide-portfolio .portfolio-main--overview { width:100%; max-width:none; padding:0 0 12px; }
.wide-portfolio .portfolio-main--overview>.editorial-heading {
  width:92%; margin:0 auto; padding:44px 0 36px; gap:32px;
}
.wide-portfolio .editorial-heading h1 {
  font-size:clamp(33.6px,4.48vw,73.6px); line-height:1.03; letter-spacing:-.04em;
}
.wide-portfolio .editorial-eyebrow { margin-bottom:14px; }
.wide-portfolio .editorial-description { font-size:16px; }
.wide-portfolio .portfolio-feature .card-media {
  width:100%; height:clamp(360px,66svh,1000px); max-height:none; aspect-ratio:auto;
}
.wide-portfolio .portfolio-feature .card-media>img { object-position:50% 50%; }
.wide-portfolio .portfolio-feature--packaging .card-media>img { object-position:50% 35%; }
.wide-portfolio .portfolio-feature .card-caption { padding:20px 4vw 0; }
.wide-portfolio .portfolio-feature .card-caption h2 { font-size:clamp(23px,2.1vw,32px); }
.wide-portfolio .portfolio-feature .card-credits { margin:9px 4vw 0; font-size:12px; }
.wide-portfolio .portfolio-feature>.portfolio-card>.vimeo-notice { padding-left:4vw; padding-right:4vw; }
.wide-portfolio .portfolio-feature-label { left:4vw; top:26px; }
.wide-portfolio .portfolio-feature .film-play { right:4vw; top:26px; width:48px; height:48px; }
.wide-portfolio .portfolio-feature .film-play--vimeo { width:auto; height:auto; }
.wide-portfolio .portfolio-tools { width:92%; margin:52px auto 30px; }
.wide-portfolio .portfolio-grid {
  width:calc(100% - 2 * var(--collection-edge)); margin:0 auto;
  grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:16px;
}
.wide-portfolio .portfolio-grid.portfolio-grid--movies { gap:52px 16px; }
.wide-portfolio .portfolio-grid:not(.portfolio-grid--movies) { row-gap:22px; column-gap:16px; }
.wide-portfolio .portfolio-grid .card-caption { padding:14px 8px 4px; }
.wide-portfolio .portfolio-grid:not(.portfolio-grid--movies) .card-caption { padding-bottom:18px; }
.wide-portfolio .portfolio-grid .card-credits { margin-left:8px; margin-right:8px; font-size:12px; }
.wide-portfolio .portfolio-grid .card-caption h2 { font-size:clamp(21px,1.8vw,28px); }
.wide-portfolio .portfolio-mix {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;
  grid-auto-rows:1px;
  width:calc(100% - 2 * var(--collection-edge)); margin:0 auto; align-items:start;
}
.wide-portfolio .portfolio-mix .mix-group,
.wide-portfolio .portfolio-mix .mix-column { display:contents; }
.wide-portfolio .portfolio-mix .mix-group[hidden],
.js .wide-portfolio .portfolio-mix .mix-group[data-mix-deferred] { display:none; }
.wide-portfolio .portfolio-mix .portfolio-card { width:100%; order:initial; }
.wide-portfolio .portfolio-mix .card-caption { opacity:1; padding:24px; }
.wide-portfolio .portfolio-mix .card-caption h2 { font-size:clamp(20px,1.8vw,28px); }
.wide-portfolio .portfolio-intro { width:92%; margin:76px auto 0; padding-top:56px; }
.wide-portfolio .mix-pagination { margin-top:44px; }
.wide-portfolio .project-main { width:100%; max-width:none; padding:44px 0 40px; }
.wide-portfolio .project-topline { width:92%; margin:0 auto 36px; }
.wide-portfolio .project-content { width:calc(100% - 2 * var(--collection-edge)); max-width:none; }
.wide-portfolio .project-content video { object-fit:contain; }
.wide-portfolio .project-content .project-credits { margin-top:44px; }
.wide-portfolio .project-content>.wp-block-image { margin-bottom:var(--collection-edge); }
.wide-portfolio .project-content>.wp-block-image img { max-width:100%; height:auto; }
.wide-portfolio .credits-main { max-width:none; padding-top:44px; }
.wide-portfolio .credits-heading { margin-bottom:36px; }
.wide-portfolio .credits-heading h1,
.wide-portfolio.about-page .page-main h1 { font-size:clamp(33.6px,4.48vw,73.6px); letter-spacing:-.04em; }
.wide-portfolio .credits-stage { max-width:1600px; }
.wide-portfolio .credits-roll { padding:44px 16px 64px; }
.wide-portfolio .credits-content .reference-list--logos { gap:64px clamp(30px,4vw,80px); }
.wide-portfolio .credits-content .reference-list--logos li { height:128px; }
.wide-portfolio .reference-logo img { max-height:96px; }
.wide-portfolio .reference-logo--captioned img { max-height:76px; }
.wide-portfolio .credits-main.is-rolling .credits-stage { height:clamp(420px,68svh,900px); }
.wide-portfolio.about-page .page-main {
  font-size:clamp(20px,1.7vw,26px);
  max-width:calc(42ch + 6cm + 64px); margin:44px auto 80px; display:grid;
  grid-template-columns:minmax(0,1fr) 6cm; column-gap:clamp(32px,4vw,64px);
}
.wide-portfolio.about-page .page-main h1 { grid-column:1/-1; margin:0 0 48px; }
.wide-portfolio.about-page .page-content { grid-column:1; grid-row:2; max-width:42ch; font-size:clamp(20px,1.7vw,26px); line-height:1.7; }
.wide-portfolio.about-page .about-portrait { grid-column:2; grid-row:2; float:none; margin:5px 0 0; justify-self:center; }
.wide-portfolio.about-page .page-main::after { display:none; }
@media(max-width:850px) {
  .wide-portfolio .portfolio-main--overview>.editorial-heading { padding:32px 0 28px; }
  .wide-portfolio .editorial-description { font-size:14px; }
  .wide-portfolio .portfolio-feature .card-media { height:clamp(320px,54svh,620px); }
  .wide-portfolio .portfolio-tools { margin-top:38px; }
  .wide-portfolio .credits-content .reference-list--logos { gap:40px 30px; }
  .wide-portfolio.about-page .page-main { column-gap:36px; grid-template-columns:minmax(0,1fr) 230px; }
}
@media(max-width:640px) {
  .wide-portfolio { --collection-edge:10px; }
  .wide-portfolio .portfolio-main--overview>.editorial-heading { width:88%; padding:30px 0 26px; }
  .wide-portfolio .editorial-heading h1 { font-size:clamp(32px,7.2vw,46.4px); }
  .wide-portfolio .editorial-description { display:none; }
  .wide-portfolio .portfolio-feature .card-media { height:auto; aspect-ratio:4/3; min-height:0; }
  .wide-portfolio .portfolio-feature .card-caption { padding-left:6vw; padding-right:6vw; }
  .wide-portfolio .portfolio-feature .card-credits { margin-left:6vw; margin-right:6vw; }
  .wide-portfolio .portfolio-feature-label { left:6vw; top:18px; }
  .wide-portfolio .portfolio-feature .film-play { right:6vw; top:18px; width:42px; height:42px; }
  .wide-portfolio .portfolio-feature .film-play--vimeo { width:auto; height:auto; }
  .wide-portfolio .portfolio-grid,
  .wide-portfolio .portfolio-grid.portfolio-grid--movies,
  .wide-portfolio .portfolio-mix { grid-template-columns:1fr; }
  .wide-portfolio .portfolio-grid.portfolio-grid--movies { row-gap:34px; }
  .wide-portfolio .portfolio-mix { gap:12px; }
  .wide-portfolio .portfolio-mix .card-caption { padding:20px; }
  .wide-portfolio .portfolio-tools { width:88%; margin:32px auto 24px; }
  .wide-portfolio .portfolio-intro { width:88%; margin-top:48px; padding-top:38px; }
  .wide-portfolio .credits-main { width:88%; padding-top:30px; }
  .wide-portfolio .credits-heading { margin-bottom:22px; }
  .wide-portfolio .credits-content .reference-list--logos { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 26px; }
  .wide-portfolio .credits-content .reference-list--logos li { height:98px; }
  .wide-portfolio .reference-logo img { max-height:72px; }
  .wide-portfolio .reference-logo--captioned img { max-height:56px; }
  .wide-portfolio .credits-main.is-rolling .credits-stage { height:clamp(360px,62svh,640px); }
  .wide-portfolio .credits-roll { padding-left:0; padding-right:0; }
  .wide-portfolio .project-main { padding-top:30px; }
  .wide-portfolio .project-topline { width:88%; }
  .wide-portfolio.about-page .page-main { width:88%; margin:30px auto 56px; display:block; }
  .wide-portfolio.about-page .page-main h1 { margin-bottom:30px; }
  .wide-portfolio.about-page .about-portrait { margin:0 0 34px; }
  .wide-portfolio.about-page .page-content { font-size:20px; }
}
/* Keep a useful layout if JavaScript is unavailable. */
.no-js .wide-portfolio .portfolio-grid:not(.portfolio-grid--movies) { columns:2; display:block; }
.no-js .wide-portfolio .portfolio-mix { grid-auto-rows:auto; }
.no-js .wide-portfolio .portfolio-mix .portfolio-card { grid-row-end:auto; }
@media(max-width:640px) {
  .no-js .wide-portfolio .portfolio-grid:not(.portfolio-grid--movies) { columns:1; }
}

/* Quiet project information: shown over the image on hover or keyboard focus. */
.wide-portfolio .portfolio-card .card-caption {
  position:absolute; inset:auto 0 0; display:block; padding:32px 18px 15px;
  opacity:0; visibility:hidden; pointer-events:none;
  color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.76))!important;
  transition:opacity .18s ease,visibility .18s ease;
}
.wide-portfolio .portfolio-card .card-caption h2 {
  color:#fff; font-size:14px; font-weight:450; letter-spacing:0;
  line-height:1.3; margin:0;
}
.wide-portfolio .portfolio-card .card-caption p { display:none; }
.wide-portfolio .portfolio-card .card-caption .card-credits {
  color:#fff; margin:6px 0 0; font-size:11px; line-height:1.4;
}
.wide-portfolio .portfolio-card:focus-within .card-caption {
  opacity:1; visibility:visible;
}
.wide-portfolio .portfolio-feature-label { opacity:0; visibility:hidden; }
.wide-portfolio .portfolio-card:focus-within .portfolio-feature-label { opacity:1; visibility:visible; }
@media(hover:hover) {
  .wide-portfolio .portfolio-card:hover .card-caption,
  .wide-portfolio .portfolio-card:hover .portfolio-feature-label { opacity:1; visibility:visible; }
}
.wide-portfolio .portfolio-grid:not(.portfolio-grid--movies) { row-gap:16px; }
.wide-portfolio .portfolio-grid.portfolio-grid--movies { row-gap:24px; }
.wide-portfolio .project-topline h1 { font-size:16px; }
.wide-portfolio .lightbox-stage>p { font-size:13px; line-height:1.4; }
.wide-portfolio .lightbox .project-link { font-size:12px; }
/* Keep Bergader's cheese folds in the opening frame on wide screens. */
.wide-portfolio .portfolio-feature--packaging .card-media>img { object-position:50% 42%; }
@media(prefers-reduced-motion:reduce) {
  .wide-portfolio .portfolio-card .card-caption { transition:none; }
}

.wide-portfolio { --portfolio-gap:8px; --collection-edge:8px; }
.wide-portfolio .portfolio-grid,
.wide-portfolio .portfolio-grid:not(.portfolio-grid--movies),
.wide-portfolio .portfolio-mix { column-gap:var(--portfolio-gap); row-gap:0; }
.wide-portfolio .portfolio-grid.portfolio-grid--movies { gap:var(--portfolio-gap); }
.wide-portfolio .portfolio-grid:not(.portfolio-grid--movies) .portfolio-card,
.wide-portfolio .portfolio-mix .portfolio-card { margin:0; }

/* Different image sizes, one continuous collection with a consistent gap. */
@media(min-width:641px) {
  .wide-portfolio .portfolio-grid,
  .wide-portfolio .portfolio-grid.portfolio-grid--movies,
  .wide-portfolio .portfolio-mix { grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr); }
}
.wide-portfolio .portfolio-grid.portfolio-grid--movies { grid-auto-rows:1px; row-gap:0; }
.wide-portfolio .portfolio-grid--movies .portfolio-card { grid-row-end:span 100; }

.wide-portfolio .portfolio-grid,.wide-portfolio .portfolio-mix { grid-auto-flow:dense; }

.wide-portfolio .portfolio-main--overview .portfolio-card .card-caption { padding:30px 16px 13px; }
.wide-portfolio .portfolio-main--overview .portfolio-card .card-caption h2 { font-size:14px; line-height:1.3; }

/* A varied sequence of small, medium and very large work examples. */
@media(min-width:641px) {
  .wide-portfolio .portfolio-grid,
  .wide-portfolio .portfolio-grid.portfolio-grid--movies,
  .wide-portfolio .portfolio-mix { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .wide-portfolio .portfolio-grid .portfolio-card,
  .wide-portfolio .portfolio-mix .portfolio-card { grid-column:span 2; }
  .wide-portfolio .portfolio-card[data-layout-size="medium"] { grid-column:span 4; }
  .wide-portfolio .portfolio-grid .portfolio-card--hero,
  .wide-portfolio .portfolio-mix .portfolio-card--hero { grid-column:1/-1; }
}
@media(max-width:640px) {
  .wide-portfolio .portfolio-grid .portfolio-card,
  .wide-portfolio .portfolio-mix .portfolio-card { grid-column:1/-1; }
}

/* Portrait stays in its small frame; the delivered file is limited to 456 x 608. */
.wide-portfolio.about-page .about-portrait img { pointer-events:none; user-select:none; -webkit-user-drag:none; -webkit-touch-callout:none; cursor:default; }