/* ============================================================
   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:#fff }

.ps{
  position:relative;
  width:100%;
  height:calc(6723px * var(--k));
  overflow:hidden;
  background:#fff;
}
.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 }

/* -- nav pill: rect 425,41 590×55 r27.5, #000 @18%.
      The 1px light stroke is NOT in the export — Figma dropped it, the same
      way it dropped the homepage panel's background blur — but the artboard
      clearly has one, and it is what the other case-study pages use. Without
      it the pill reads as a vague tint rather than a shape.
      box-sizing is border-box globally, so the outer box stays 590×55 and
      only the padding box (which the links are positioned against) moves in
      by 1px — the link offsets below already account for that. -- */
.ps__nav{
  position:absolute;
  left:425px; top:41px;
  width:590px; height:55px;
  border:1px solid #EBEBEB;
  border-radius:27.5px;
  background:rgba(0,0,0,.18);
}
/* links live inside the pill, so their coords are relative to it (425,41) */
.ps__nav a{
  position:absolute;
  /* Baseline 72.0. Measured with a zero-size vertical-align:baseline probe —
     Range.getClientRects() returns the inline box, not the line box, and
     mixing the two double-counts the half-leading. */
  top:20px;                        /* artboard 62.0 - 41, less the 1px border */
  font-family:'PP Neue Montreal',Helvetica,Arial,sans-serif;
  font-weight:400;
  font-size:12px;
  line-height:12px;
  color:#fff;
  text-decoration:none;
  white-space:nowrap;
}
/* ink lefts 487.19 / 610.08 / 738.89 / 899.46, less the pill's 425 */
.ps__nav a:nth-of-type(1){ left:61.00px }
.ps__nav a:nth-of-type(2){ left:184.00px }
.ps__nav a:nth-of-type(3){ left:312.01px }
.ps__nav a:nth-of-type(4){ left:473.01px }

/* ============================================================
   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;
  color:#fff;
}
.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:#fff;
}
.ps__stack span{
  display:block;
  font-family:'PP Neue Montreal',Helvetica,Arial,sans-serif;
  font-weight:350; font-size:18px; line-height:28px;
  color:#fff;
}

/* -- 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:#000;
  white-space:nowrap;
}
.ps__news{
  left:0; top:5775px;
  width:1440px;
  text-align:center;
  font-weight:400;
  font-size:20px;
  line-height:28px;
  color:#000;
}