/* Images and editorial copy occupy separate areas in every portfolio card. */
.portfolio-grid .portfolio-card{
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:var(--row-visual-height) auto;
  justify-content:stretch;
  align-items:start;
  overflow:hidden;
  background:#101010;
  box-shadow:none;
  transition:border-color .25s ease,box-shadow .25s ease;
  container-type:inline-size;
  container-name:portfolio-card;
}
.portfolio-grid .portfolio-card::after{content:none}
.portfolio-grid .portfolio-card:hover,
.portfolio-grid .portfolio-card:focus-visible{
  transform:translateZ(0);
  border-color:var(--red-text,#ff6262);
  box-shadow:0 0 0 1px rgba(234,24,24,.16);
}
.portfolio-card-visual{
  position:relative;
  isolation:isolate;
  flex:none;
  min-width:0;
  min-height:170px;
  overflow:hidden;
  background:#070707;
  aspect-ratio:16/10;
}
.portfolio-card-visual .mosaic{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  grid-auto-rows:minmax(0,1fr);
}
.portfolio-card-visual .mosaic.cols-1{grid-template-columns:minmax(0,1fr)}
.portfolio-card-visual .mosaic.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.portfolio-card-visual .mosaic.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.portfolio-card-visual .mosaic img{
  min-width:0;
  min-height:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.portfolio-grid .portfolio-card-copy{
  position:relative;
  display:grid;
  grid-template-rows:var(--row-topline-height,auto) var(--row-title-height,auto) var(--row-description-height,auto) var(--row-tags-height,auto);
  grid-row:2;
  align-items:start;
  align-self:stretch;
  z-index:auto;
  width:100%;
  min-width:0;
  gap:9px;
  padding:18px;
  border-top:1px solid var(--line);
  background:#101010;
}
.portfolio-grid .card-topline{
  align-items:flex-start;
  min-width:0;
  font-size:9px;
  line-height:1.5;
  letter-spacing:.07em;
  color:#aaa;
}
.portfolio-grid .card-topline>span:first-child{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.portfolio-grid .card-topline .card-format{flex:none;max-width:100%;color:var(--red-text,#ff6262);font-size:8px;letter-spacing:.05em}
.portfolio-grid .portfolio-card h3{
  max-width:none;
  margin:0;
  white-space:normal;
  overflow-wrap:anywhere;
  text-wrap:balance;
  font:700 clamp(22px,1.65vw,31px)/1.12 var(--font-ui);
  letter-spacing:-.025em;
}
.portfolio-grid .portfolio-card p{
  display:block;
  max-width:65ch;
  margin:0;
  overflow:visible;
  -webkit-line-clamp:unset;
  font-size:14px;
  line-height:1.5;
  color:#bfbfbf;
}
.portfolio-grid .card-tags{gap:5px;margin-top:2px}
.portfolio-grid .card-tag{
  max-width:100%;
  padding:5px 7px;
  border-color:#3b3b3b;
  background:transparent;
  font-size:8px;
  line-height:1.35;
  letter-spacing:.07em;
  overflow-wrap:anywhere;
}
.portfolio-card-copy .media-status{
  position:static;
  align-self:flex-start;
  padding:0;
  border:0;
  background:transparent;
  color:var(--red-text,#ff6262);
  font-size:9px;
  line-height:1.4;
  letter-spacing:.07em;
  pointer-events:none;
}

/* Each row shares image and editorial tracks, using the media's true ratios. */
.portfolio-grid[data-mode="featured"],
.portfolio-grid[data-mode="catalog"]{
  --portfolio-columns:4;
  --portfolio-row-gap:12;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.portfolio-grid[data-mode="catalog"]{--portfolio-row-gap:16;gap:16px}
.portfolio-row{
  display:grid;
  grid-template-rows:auto;
  column-gap:calc(var(--portfolio-row-gap)*1px);
  row-gap:0;
  min-width:0;
}
.portfolio-grid .portfolio-row .portfolio-card{
  grid-column:auto;
  grid-row:1;
  min-width:0;
  min-height:0;
  align-self:stretch;
}
.portfolio-grid .portfolio-row .portfolio-card .portfolio-card-visual{
  grid-row:1;
  height:var(--row-visual-height);
  min-height:0;
  max-height:none;
  aspect-ratio:auto;
}
.portfolio-grid .portfolio-card-copy>*{align-self:start;min-width:0}
.portfolio-actions[hidden]{display:none}

/* Bottles and websites remain complete, including when hovered or focused. */
.portfolio-grid .perfume-card .mosaic,
.portfolio-grid .website-card .mosaic{background:#070707}
.portfolio-grid .perfume-card .mosaic img,
.portfolio-grid .website-card .mosaic img{
  object-fit:contain;
  object-position:center;
  transform:none;
  transition:none;
}
.portfolio-grid .website-card .mosaic img{object-position:top center}
.portfolio-grid .perfume-card .mosaic{padding:0;gap:2px}

/* Ratios come from the actual files. Natural image height fills each cell. */
.portfolio-grid .portfolio-card-visual:has(.portfolio-cover-strip),
.portfolio-grid .portfolio-card-visual:has(.website-presentation){
  height:auto;
  min-height:0;
  max-height:none;
  aspect-ratio:auto;
}
.portfolio-card-visual .mosaic.portfolio-cover-strip{
  position:relative;
  inset:auto;
  display:grid;
  width:100%;
  height:auto;
  padding:0;
  gap:2px;
  grid-template-columns:var(--cover-columns,minmax(0,1fr));
  grid-auto-rows:auto;
  align-items:stretch;
  background:transparent;
}
.portfolio-cover-cell{
  position:relative;
  min-width:0;
  min-height:0;
  overflow:hidden;
  aspect-ratio:var(--cover-ratio,1);
}
.portfolio-card-visual .portfolio-cover-cell img{
  display:block;
  width:100%;
  height:100%;
  min-height:0;
  object-fit:contain;
  object-position:center;
  transform:none;
  transition:none;
}
.portfolio-card-visual .mosaic.cover-variant-wide{display:none}

/* Portrait hero beside two genuine landscape frames, all shown in full. */
.portfolio-card-visual .mosaic.cover-stack{
  grid-template-columns:var(--cover-stack-columns,.75fr .8888889fr);
  grid-template-rows:var(--cover-stack-rows,1fr 1fr);
  aspect-ratio:calc(var(--cover-ratio-1,.75) + var(--cover-ratio-2,1.7777778) * var(--cover-ratio-3,1.7777778) / (var(--cover-ratio-2,1.7777778) + var(--cover-ratio-3,1.7777778)));
}
.cover-stack .portfolio-cover-cell{aspect-ratio:auto}
.cover-stack .portfolio-cover-cell:first-child{grid-column:1;grid-row:1/span 2}
.cover-stack .portfolio-cover-cell:nth-child(2){grid-column:2;grid-row:1}
.cover-stack .portfolio-cover-cell:nth-child(3){grid-column:2;grid-row:2}

/* Genuine homepage captures sit together as a desktop and phone preview. */
.website-presentation{
  position:relative;
  width:100%;
  aspect-ratio:1.85;
  overflow:hidden;
  background:#e8e7e3;
}
.website-desktop,
.website-mobile{
  position:absolute;
  overflow:hidden;
  background:#fff;
  box-sizing:border-box;
}
.website-desktop{
  width:84%;
  top:2%;
  left:2%;
  border:1px solid #b2b1ad;
  border-radius:4px;
  box-shadow:0 3px 9px rgba(0,0,0,.12);
}
.website-mobile{
  width:24%;
  right:2%;
  bottom:2%;
  border:clamp(2px,.6cqi,4px) solid #171717;
  border-radius:clamp(9px,2.4cqi,18px);
  box-shadow:0 3px 9px rgba(0,0,0,.16);
}
.portfolio-grid .website-presentation img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:top center;
  transform:none;
  transition:none;
}

/* Composition variants are selected once per row, before allocating widths. */
.portfolio-row .portfolio-card-visual .mosaic.portfolio-cover-strip{
  height:100%;
  aspect-ratio:auto;
}
.portfolio-row .portfolio-cover-cell{height:100%;aspect-ratio:auto}
.portfolio-row .website-presentation{height:100%;aspect-ratio:auto}
.portfolio-card[data-cover-count="2"] .portfolio-cover-strip:not(.cover-stack){grid-template-columns:var(--cover-columns-2)}
.portfolio-card[data-cover-count="2"] .portfolio-cover-strip:not(.cover-stack) .portfolio-cover-cell:nth-child(n+3){display:none}
.portfolio-card[data-cover-composition="wide"] .cover-variant-wide{display:grid}
.portfolio-card[data-cover-composition="wide"] .cover-variant-compact{display:none}
.portfolio-card[data-cover-composition="single"] .mosaic.cover-stack{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.portfolio-card[data-cover-composition="single"] .cover-stack .portfolio-cover-cell:first-child{grid-column:1;grid-row:1}
.portfolio-card[data-cover-composition="single"] .cover-stack .portfolio-cover-cell:nth-child(n+2){display:none}

@media(max-width:1680px){
  .portfolio-grid[data-mode="catalog"]{--portfolio-columns:3}
}
@media(max-width:1050px){
  .portfolio-grid[data-mode="catalog"]{--portfolio-columns:2}
}
@media(max-width:980px){
  .portfolio-grid .portfolio-card h3{font-size:24px}
}
@media(max-width:620px){
  .portfolio-grid[data-mode="featured"],
  .portfolio-grid[data-mode="catalog"]{--portfolio-columns:1;--portfolio-row-gap:14;gap:14px}
  .portfolio-grid .portfolio-card-copy{padding:17px;gap:8px}
  .portfolio-grid .portfolio-card h3{font-size:clamp(23px,6vw,28px)}
  .portfolio-grid .portfolio-card p{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  .portfolio-grid .portfolio-card{transition:none}
}