/* ============================================================
   Print & Collateral — case study
   1:1 reconstruction of "print site.svg".
   Design canvas: 1440 × 6723, white. Every value below is in design
   px and is scaled fluidly by --k, which the inline head script sets
   before first paint. Do not "round" these numbers — they were
   derived from the exported vector outlines and the pattern matrices
   (imgLeft = e·w, imgTop = f·h, imgW = a·IW·w, imgH = d·IH·h).
   ============================================================ */

body.case{ background:var(--c-bg) }

.ps{
  position:relative;
  width:100%;
  height:calc(6723px * var(--k));
  overflow:hidden;
  background:var(--c-bg);
}
.ps__art{
  position:absolute;
  left:0; top:0;
  width:1440px; height:6723px;
  transform-origin:0 0;
  transform:scale(var(--k));
}

/* -- media frames: box in artboard coords, image placed inside by the
      pattern matrix. Several bleed past the frame (and one past the
      artboard's right edge) — that is what overflow:hidden is for. -- */
.ps__frame{ position:absolute; overflow:hidden }
.ps__frame img{ position:absolute; max-width:none; display:block }

/* The hero is one full-bleed photo authored at 1440×899, so it fills the
   frame 1:1 with no crop. The source already has a small baked transparency
   at the bottom corners (~22px); this radius clips further in, so the shape
   comes from here and the two never disagree. */
.ps__hero{ border-bottom-left-radius:40px; border-bottom-right-radius:40px }

/* -- studio-white grounds --------------------------------------------
   zirk1 and zirk4 are full-bleed mockup renders standing on a studio
   white (252-255) ground. This page was pure white when they were
   placed, so that ground was invisible; against the warm ivory it reads
   as a hard, almost-matching rectangle — near enough to look like a
   mistake rather than a photograph. Multiplying the photo over the page
   colour maps its white EXACTLY onto --c-bg and leaves the artwork and
   its soft cast shadow intact (ivory is .97/.96/.93, so the brochure
   itself only warms a fraction).

   isolation:isolate confines the blend to this frame. These frames
   overlap each other by design, and a blend that escaped the frame
   would let the artwork underneath ghost straight through the render
   sitting on top of it.

   Light theme only. On the soft-black ground the same multiply would
   black the photograph out, and there the white plane reads as a lit
   photograph rather than as a plane that missed the page colour. */
html.inv .ps__frame--studio{ background:var(--c-bg); isolation:isolate }
html.inv .ps__frame--studio img{ mix-blend-mode:multiply }

/* ============================================================
   Type — three sizes carry the whole page:
     body     18 / 25   weight 350
     label    18 / 28   weight 500, +0.57px tracking
     lead-out 20 / 28   weight 400   (newspaper intro)
     heading  82 / 82   PP Editorial New Ultralight Italic
   ============================================================ */
.ps__para,
.ps__label,
.ps__list,
.ps__news{
  position:absolute;
  margin:0;
  font-family:'PP Neue Montreal',Helvetica,Arial,sans-serif;
  /* fixed: every one of these blocks is set ON the hero photograph or another
     full-bleed image, which no theme touches. Only .ps__heading and .ps__news
     below sit on the page's own ground, and those follow --c-ink. */
  color:var(--c-ivory);
}
.ps__para{
  font-weight:350;
  font-size:18px;
  line-height:25px;
}
/* Justified paragraphs. A line ended by <br> counts as a last line and
   will not stretch, so each line is its own block and is justified via
   text-align-last; the real final line is left alone. */
.ps__para--j > span{ display:block; text-align:justify; text-align-last:justify }
.ps__para--j > span.last{ text-align-last:left }
.ps__para--r{ text-align:right; white-space:nowrap }

.ps__label{
  font-weight:500;
  font-size:18px;
  line-height:28px;
  letter-spacing:.57px;
  white-space:nowrap;
}
.ps__list{
  font-weight:350;
  font-size:18px;
  line-height:28px;
  white-space:nowrap;
}
/* the hero's two label blocks carry the heading and its lines together,
   at one 28px rhythm */
.ps__stack{ position:absolute; margin:0; white-space:nowrap }
.ps__stack b{
  display:block;
  font-family:'PP Neue Montreal',Helvetica,Arial,sans-serif;
  font-weight:500; font-size:18px; line-height:28px; letter-spacing:.57px;
  color:var(--c-ivory);        /* on the hero photograph */
}
.ps__stack span{
  display:block;
  font-family:'PP Neue Montreal',Helvetica,Arial,sans-serif;
  font-weight:350; font-size:18px; line-height:28px;
  color:var(--c-ivory);        /* on the hero photograph */
}

/* -- the one section that sits on white -- */
.ps__heading{
  position:absolute;
  left:305px; top:5674.5px;
  margin:0;
  font-family:'PP Editorial New',Georgia,serif;
  font-style:italic;
  font-weight:200;
  font-size:82px;
  line-height:82px;
  color:var(--c-ink);
  white-space:nowrap;
}
.ps__news{
  left:0; top:5775px;
  width:1440px;
  text-align:center;
  font-weight:400;
  font-size:20px;
  line-height:28px;
  color:var(--c-ink);
}

/* The phone frame writes "&" where the 1440 board writes "and", in the
   two hero paragraphs. Both are authored; css/print-mobile.css swaps them. */
.ps__para .d{ display:inline; font-style:normal }
.ps__para .m{ display:none }

/* MOBILE lives in css/print-mobile.css — a separate 390x3920 artboard
   rebuilt 1:1 from "print page.svg", not a reflow of this one. */