/* ==========================================================================
   EK Studio — Campaigns & Print page-specific styles
   Extends styles.css (shared tokens, header, footer, buttons, packages, seal).
   Press / paper editorial aesthetic — no device mockups on this page.
   ========================================================================== */

/* ---------- 2. HERO ---------- */
.cp-hero{padding-block:clamp(40px,6vw,80px) clamp(52px,7vw,96px)}
.cp-hero-grid{
  display:grid;grid-template-columns:1.02fr 1fr;gap:clamp(32px,5vw,72px);align-items:center;
}
.cp-hero-copy{min-width:0}
.cp-hero-copy h1{margin:0 0 22px}
.cp-hero-copy h1 em{font-style:italic;color:var(--burgundy)}
.cp-hero .lead{font-size:1.18rem;line-height:1.55;color:var(--body);max-width:52ch}
.cp-hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.cp-hero-tags{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:34px;padding-top:22px;border-top:1px solid var(--divider)}
.cp-hero-tags li{
  font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted-strong);position:relative;padding-left:16px;
}
.cp-hero-tags li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--signal)}

/* hero print collage */
.cp-hero-visual{position:relative;min-width:0}
.cp-tick{
  position:absolute;z-index:3;margin:0;
  font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-strong);display:inline-flex;align-items:center;gap:8px;
}
.cp-tick--tl{top:-6px;left:2px}
.cp-tick--tr{top:-6px;right:2px}
.cp-sig{width:8px;height:8px;border-radius:50%;background:var(--signal);display:inline-block}

.cp-collage{position:relative;padding:26px 8px 8px;isolation:isolate}
.cp-sheet{
  margin:0;background:var(--surface);border:1px solid var(--divider-strong);
  box-shadow:0 20px 44px -22px rgba(36,24,19,.4);overflow:hidden;
}
.cp-sheet img{display:block;width:100%;height:auto}
.cp-sheet--front{
  position:relative;z-index:2;width:74%;margin-inline:auto;
  border-color:var(--burgundy);
}
.cp-sheet--back{
  position:absolute;z-index:1;width:52%;top:0;right:2%;
  transform:rotate(4deg);transform-origin:top right;opacity:.96;
}
/* crop marks on the front sheet */
.cp-crop{position:absolute;z-index:3;width:14px;height:14px;pointer-events:none}
.cp-crop::before,.cp-crop::after{content:"";position:absolute;background:var(--burgundy)}
.cp-crop::before{width:14px;height:1.5px;top:0;left:0}
.cp-crop::after{width:1.5px;height:14px;top:0;left:0}
.cp-crop--tl{top:-7px;left:calc(13% - 7px)}
.cp-crop--tr{top:-7px;right:calc(13% - 7px);transform:scaleX(-1)}
.cp-crop--bl{bottom:-7px;left:calc(13% - 7px);transform:scaleY(-1)}
.cp-crop--br{bottom:-7px;right:calc(13% - 7px);transform:scale(-1,-1)}
.cp-dot{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--signal);z-index:3}
.cp-dot--1{top:20%;left:-4px}
.cp-dot--2{bottom:16%;right:6%}
.cp-caption{
  margin-top:26px;text-align:center;
  font-family:var(--mono);font-size:.78rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--burgundy);
}

/* ---------- 4. CAMPAIGN SYSTEMS (flow) ---------- */
.cp-flow{
  margin-top:clamp(36px,4vw,52px);
  display:grid;grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--divider);
}
.cp-stage{
  position:relative;min-width:0;padding:34px 22px 26px;
  border-top:1.5px solid var(--burgundy);margin-top:-1px;
}
.cp-stage + .cp-stage{border-left:1px solid var(--divider)}
.cp-stage-num{margin:-56px 0 18px}
.cp-stage-num span{
  display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--ivory);border:1.5px solid var(--burgundy);color:var(--burgundy);
  font-family:var(--mono);font-weight:600;font-size:.92rem;
  transition:background-color .2s ease,color .2s ease;
}
.cp-stage:hover .cp-stage-num span{background:var(--burgundy);color:var(--cream)}
.cp-stage-title{font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1.08;letter-spacing:-.01em;color:var(--espresso);margin:0 0 10px}
.cp-stage-desc{font-size:.98rem;line-height:1.5;color:var(--body)}
/* small registration mark bottom-right of each stage */
.cp-stage::after{
  content:"";position:absolute;right:16px;bottom:14px;width:8px;height:8px;
  background:
    linear-gradient(var(--divider-strong),var(--divider-strong)) center/8px 1px no-repeat,
    linear-gradient(var(--divider-strong),var(--divider-strong)) center/1px 8px no-repeat;
}

/* ---------- 5. MATERIALS MATRIX ---------- */
.cp-matrix{
  margin-top:clamp(36px,4vw,52px);
  display:grid;grid-template-columns:repeat(2,1fr);
  border:1px solid var(--divider);
}
.cp-mat{
  min-width:0;padding:30px clamp(22px,2.4vw,34px);
  border-top:1px solid var(--divider);border-left:1px solid var(--divider);
  background:var(--surface);
}
/* first row has no top border; first column no left border (grid outer handled by container) */
.cp-matrix .cp-mat:nth-child(1),
.cp-matrix .cp-mat:nth-child(2){border-top:0}
.cp-matrix .cp-mat:nth-child(odd){border-left:0}
.cp-mat-index{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.14em;color:var(--signal);margin:0 0 14px}
.cp-mat-title{font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1.1;letter-spacing:-.01em;color:var(--espresso);margin:0 0 10px}
.cp-mat-desc{font-size:1rem;line-height:1.55;color:var(--body);max-width:46ch}

/* ---------- 6. ENGAGEMENTS ---------- */
.cp-inc-label{
  font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted-strong);margin:6px 0 12px;
}
.cp-inc{display:flex;flex-direction:column;gap:10px;margin:0 0 26px;flex:1}
.cp-inc li{position:relative;padding-left:20px;font-size:.98rem;line-height:1.45;color:var(--body)}
.cp-inc li::before{
  content:"";position:absolute;left:0;top:.5em;width:9px;height:1.5px;background:var(--burgundy);
}
.package--featured .cp-inc li::before{background:var(--burgundy)}

/* ---------- 7. FEATURED CAMPAIGN WORK ---------- */
/* shared print-frame: a matted paper sheet, natural aspect, no distortion */
.cp-frame{
  margin:0;background:var(--surface);border:1px solid var(--divider-strong);
  padding:12px;box-shadow:0 16px 36px -20px rgba(36,24,19,.34);
  display:flex;align-items:center;justify-content:center;
}
.cp-frame img{display:block;width:100%;height:auto;object-fit:contain}

.cp-feature{
  margin-top:clamp(32px,4vw,48px);
  display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(28px,4vw,56px);align-items:center;
  padding-bottom:clamp(30px,4vw,48px);border-bottom:1px solid var(--divider);
}
.cp-frame--feature{max-width:360px;justify-self:start}
.cp-feature-body{min-width:0}

.cp-grid-work{
  margin-top:clamp(30px,4vw,46px);
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,4vw,48px) clamp(24px,3vw,40px);
  align-items:start;
}
.cp-item{min-width:0;display:flex;flex-direction:column;gap:18px}
/* landscape flyer sits in its own cell (no full-width span) so the 2x2 grid
   has no empty cell and visual order matches DOM/focus order */
.cp-item--wide .cp-frame{padding:14px}
/* center the landscape flyer within its cell; never distort or oversize */
.cp-frame--wide{background:var(--surface);align-self:start}
.cp-frame--wide img{max-height:360px;width:auto;max-width:100%;margin-inline:auto}

.cp-cat{
  font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-strong);margin:0 0 10px;display:flex;align-items:baseline;gap:10px;
}
.cp-index{color:var(--signal);font-weight:600}
.cp-work-title{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2vw,1.9rem);line-height:1.08;letter-spacing:-.01em;color:var(--espresso);margin:0 0 12px}
.cp-work-desc{font-size:1rem;line-height:1.55;color:var(--body);max-width:52ch;margin:0 0 16px}
.cp-actions{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center}

/* ---------- 8. PRINT CONSISTENCY (espresso) ---------- */
.cp-consistency{
  position:relative;overflow:hidden;background:var(--espresso);color:var(--cream-soft);
  padding-block:clamp(64px,8vw,112px);border-top:1px solid var(--divider);
}
.cp-consistency::before{
  content:"";position:absolute;inset:0;opacity:.7;pointer-events:none;
  background-image:
    linear-gradient(rgba(216,99,107,.06) 1px,transparent 1px),
    linear-gradient(90deg, rgba(216,99,107,.06) 1px,transparent 1px);
  background-size:46px 46px;
}
.cp-consistency-inner{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);align-items:center}
.cp-consistency-copy{min-width:0}
.cp-consistency-copy .eyebrow{color:var(--signal-soft)}
.cp-consistency-copy .eyebrow::before{background:var(--signal-soft)}
.cp-consistency-copy h2{color:var(--cream);margin:0 0 18px}
.cp-consistency-copy h2 em{font-style:italic;color:var(--signal-soft)}
.cp-consistency-lede{font-size:1.12rem;line-height:1.6;color:var(--cream-soft);max-width:48ch;margin:0 0 28px}

.cp-stack{position:relative;min-height:380px;min-width:0}
.cp-stack-sheet{
  position:absolute;margin:0;background:var(--espresso);
  border:1px solid rgba(243,234,219,.16);padding:8px;
  box-shadow:0 26px 60px -24px rgba(0,0,0,.7);overflow:hidden;
}
.cp-stack-sheet img{display:block;width:100%;height:auto}
.cp-stack-sheet--front{z-index:3;width:52%;left:24%;top:6%}
.cp-stack-sheet--back-a{z-index:1;width:44%;left:2%;top:20%;transform:rotate(-6deg)}
.cp-stack-sheet--back-b{z-index:2;width:44%;right:2%;top:0;transform:rotate(5deg)}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:900px){
  .cp-flow{grid-template-columns:repeat(1,1fr);border-top:0}
  .cp-stage{
    border-top:0;border-left:1.5px solid var(--burgundy);margin-top:0;
    padding:8px 0 26px 28px;
  }
  .cp-stage + .cp-stage{border-left:1.5px solid var(--burgundy)}
  .cp-stage-num{margin:0 0 12px;position:absolute;left:0;top:2px;transform:translateX(-50%)}
  .cp-stage-num span{width:40px;height:40px;background:var(--ivory)}
  .cp-stage::after{display:none}

  .cp-matrix{grid-template-columns:1fr}
  .cp-matrix .cp-mat{border-left:0}
  .cp-matrix .cp-mat:nth-child(2){border-top:1px solid var(--divider)}
}

@media (max-width:768px){
  .cp-hero-grid{grid-template-columns:1fr;gap:44px}
  .cp-hero-visual{max-width:440px;margin-inline:auto;width:100%}
  .cp-hero-actions{flex-direction:column;align-items:stretch}
  .cp-hero-actions .btn{width:100%}

  .cp-feature{grid-template-columns:1fr;gap:24px}
  .cp-frame--feature{max-width:320px;justify-self:center}

  .cp-grid-work{grid-template-columns:1fr;gap:36px}

  .cp-consistency-inner{grid-template-columns:1fr;gap:40px}
  .cp-stack{min-height:340px;max-width:420px;margin-inline:auto;width:100%}
}

@media (max-width:480px){
  .cp-tick--tr{display:none}
  .cp-sheet--front{width:82%}
  .cp-sheet--back{width:56%}
  .cp-stack{min-height:300px}
  .cp-frame--wide img{max-height:none}
}