/* Nickolas Tsorvas — October 7 layout polish.
   Loaded after the existing styles. Content, colours and motion remain CMS-owned. */

/* A common square frame aligns the portrait with every campaign thumbnail.
   The desktop list can scroll on short screens instead of shrinking the work. */
@media (min-width:861px) {
  .v3 {
    --index-frame:clamp(112px,12svh,176px);
    grid-template-columns:minmax(0,49fr) minmax(0,51fr);
  }
  .v3-index {padding:16px clamp(24px,2.4vw,40px) 20px var(--gutter);}
  .v3-index-in {max-width:none;}
  .v3-about,.v3-h {font-size:.8125rem; min-height:28px;}
  .v3-hello,.v3-card {grid-template-columns:minmax(0,1fr) var(--index-frame); gap:24px;}
  .v3-hello {align-items:center; margin-top:6px;}
  .v3-greeting {font-size:clamp(2rem,2.8vw,3.5rem); line-height:1.04;}
  .v3-teaser {font-size:clamp(1rem,1.1vw,1.25rem); line-height:1.42; max-width:34ch; margin-top:12px;}
  .v3-portrait {width:var(--index-frame); height:var(--index-frame); aspect-ratio:1; object-fit:cover; object-position:50% 22%;}
  .geo {height:36px; margin:12px 0 4px;}
  .geo-strip {top:12px; height:12px; width:76px;}
  .geo-block {top:5px; width:24px; height:24px;}
  .geo-tri {top:6px; width:28px; height:24px;}
  .geo-disc {top:6px; width:24px; height:24px;}
  .v3-work {margin-top:4px;}
  .v3-row + .v3-row {border-top:1px solid var(--rule);}
  .v3-card {padding:8px 0;}
  .v3-client {font-size:clamp(1.625rem,2.65vw,3rem); line-height:1.02;}
  .v3-name {font-size:.75rem; line-height:1.3; margin-top:8px;}
  .v3-thumb {width:var(--index-frame); height:var(--index-frame); aspect-ratio:1; overflow:hidden;}
  .v3-thumb img {width:100%; height:100%; object-fit:contain; object-position:center !important;}
  .v3-idea {min-height:0; margin-top:16px;}
  .v3-idea-text {font-size:1.0625rem; line-height:1.4; max-width:48ch;}
  .v3-idea-meta {font-size:.75rem; margin-top:8px;}
  .v3-motion {min-height:32px; margin-top:8px; font-size:.75rem;}
  .v3-stage {padding:clamp(20px,2vw,36px); gap:18px;}
}
@media (min-width:861px) and (max-width:1100px) {
  .v3 {--index-frame:112px;}
  .v3-hello,.v3-card {gap:16px;}
  .v3-greeting {font-size:2rem;}
  .v3-client {font-size:1.625rem;}
}
@media (min-width:861px) and (max-height:760px) {
  .v3 {--index-frame:104px;}
  .v3-index {padding-top:10px;}
  .v3-greeting {font-size:2rem;}
  .v3-teaser {font-size:1rem; margin-top:8px;}
  .v3-client {font-size:1.625rem;}
  .v3-card {padding:7px 0;}
  .geo {height:28px; margin-top:8px;}
}
@media (max-width:860px) {
  .v3-hello {grid-template-columns:minmax(0,1fr) clamp(104px,25vw,148px); align-items:center;}
  .v3-portrait {height:auto; aspect-ratio:1; object-fit:cover; object-position:50% 22%;}
  .v3-greeting {font-size:clamp(1.875rem,5vw,2.75rem);}
  .v3-row + .v3-row {margin-top:28px; padding-top:28px; border-top:1px solid var(--rule);}
  .v3-thumb {aspect-ratio:1; overflow:hidden;}
  .v3-thumb img {width:100%; height:100%; object-fit:contain;}
}
@media (max-width:21.5em) {
  .v3-hello {grid-template-columns:1fr;}
  .v3-portrait {width:128px; height:128px;}
}

/* Wider art, comfortable text columns, and less empty space between acts. */
.cp > .wrap,.cp .cs .wrap {max-width:1920px;}
.cp-head {max-width:none; padding:24px 0 32px;}
.cp-head h1 {font-size:clamp(2.5rem,4.2vw,4.75rem);}
.cp-head .p-idea {max-width:62ch; margin-top:18px;}
.cs-list {padding-top:8px;}
.cs {padding:clamp(24px,3vw,44px) 0;}
.cs-words {margin-bottom:24px;}
.cs-split {grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(24px,3.5vw,56px);}
.cs--social-grid .cs-media {grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px;}
.cs--split .cs-media--n1 .cs-piece.is-tall img {max-height:min(90vh,900px);}
.cs-embed {margin-top:32px;}
.cp-credits {margin-top:40px; padding-top:28px; padding-bottom:32px;}
.cp-bottom {padding-bottom:48px;}

/* An opening without overlay copy is actual artwork: show all of it,
   in full colour. Back Market's existing text-over-image hero is unchanged. */
.cs-hero--art {display:block; min-height:0; background:transparent;}
.cs-hero--art::after {display:none;}
.cs-hero--art .cs-hero-bg {position:static; z-index:auto; width:100%; height:auto; object-fit:contain;}
.cs-hero--art .cs-hero-in {display:none;}

@media (min-width:1101px) {
  .cp-head {display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,.35fr); gap:0 clamp(32px,5vw,80px); align-items:start;}
  .cp-head .cp-client,.cp-head h1,.cp-head .p-idea,.cp-head .p-meta {grid-column:1;}
  .cp-head .p-credit {grid-column:2; grid-row:2 / span 3; margin-top:8px; padding-top:16px; border-top:1px solid var(--rule-strong); font-size:1rem; line-height:1.6;}
}
@media (max-width:860px) {
  .cp-head {padding:20px 0 28px;}
  .cp-head h1 {font-size:clamp(2.25rem,7vw,3.5rem);}
  .cs-split {grid-template-columns:1fr; gap:24px;}
  .cs--social-grid .cs-media {gap:16px;}
}
@media (max-width:540px) {
  .cs--social-grid .cs-media {grid-template-columns:1fr;}
}

/* The quieter pages get the same tighter rhythm and larger photographs. */
.wrap--about {max-width:1520px;}
.ab {grid-template-columns:minmax(0,1fr) minmax(300px,420px); gap:clamp(32px,4vw,64px); padding-top:36px; padding-bottom:40px;}
.ab-body {margin-top:28px;}
.ab-contact {margin-top:40px;}
.ab-more {padding-bottom:48px;}
.side-head {padding-bottom:36px;}
.lately-grid {gap:36px 32px;}
.lately-grid .item:nth-child(1),.lately-grid .item:nth-child(3) {grid-column:1 / span 6;}
.lately-grid .item:nth-child(2),.lately-grid .item:nth-child(4) {grid-column:7 / span 6;}
.records {gap:16px;}
.rec {width:calc((100% - 32px) / 3); max-width:220px;}
.rec--poster {width:min(240px,60%); max-width:240px;}
.street {width:min(100%,420px);}
.lookbook {gap:40px 32px; padding-bottom:64px;}
.lookbook figure:nth-child(even) {margin-top:24px;}
.resume-sheet {max-width:1100px; margin-bottom:48px;}
@media (max-width:860px) {
  .ab {padding-top:28px;}
  .ab-me {width:min(100%,420px); margin-top:28px;}
  .ab-contact {margin-top:36px;}
  .lately-grid .item {grid-column:1 / -1 !important;}
  .lookbook {gap:32px;}
  .lookbook figure:nth-child(even) {margin-top:0;}
}