/* ============================================================
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 }
/* ============================================================
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
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;
}
/* ============================================================
MOBILE (≤768px)
------------------------------------------------------------
Same mechanism as css/mobile.css on the homepage: this does NOT
re-position the 1440 artboard at phone size (that is the 27%
problem). It drops the artboard back into normal document flow
and stacks it in one column.
`position:static` makes every inline `left:`/`top:` in the markup
go inert on its own — only the inline `width`/`height` (and the
inline `text-align:right` on two labels) still bite, so those are
the !important overrides below.
Two calls that are mine, not the artboard's, and are the first
things to check:
1. The page goes BLACK. On desktop the copy is white because it is
lying on top of the photos; in a stacked column it would be
white-on-white. Rather than re-colour the type per block, the
page inverts — which is also what bloom / sarson / fire-island /
pendulo already do.
2. The frames' pattern crops are dropped: each image becomes a
normal block at 100% width, so the whole mockup photo shows
instead of the artboard's crop of it. The crops here are mild
and a 358px-wide column has no room to spend on them.
============================================================ */
@media (max-width: 768px){
body.case{ background:#000 }
.ps{
height:auto;
overflow:visible;
background:#000;
padding-bottom:76px;
}
.ps__art{
position:static;
display:flex;
flex-direction:column;
width:auto;
height:auto;
transform:none;
}
/* back to flow. Grouped so the inline width/height are killed once. */
.ps__frame,
.ps__para, .ps__stack, .ps__label, .ps__list,
.ps__heading, .ps__news{
position:static;
width:auto !important;
height:auto !important;
max-width:none;
}
/* ---------- frames ---------- */
.ps__frame{
margin:30px 16px 0;
border-radius:14px !important;
overflow:hidden;
}
.ps__frame img{
position:static;
width:100% !important;
height:auto !important;
max-width:100%;
}
/* hero is full-bleed and keeps the artboard's bottom sweep */
.ps__hero{
margin:0;
border-radius:0 0 22px 22px !important;
}
/* image6 is painted and then completely covered by image7 (same x/width,
3593–4579 over 3700–4519). That is true in "print site.svg" too — it is
an artboard leftover, not a stacking mistake — so the column skips it
rather than showing the spread twice. */
.ps__art > :nth-child(12){ display:none }
/* ---------- type ---------- */
.ps__para, .ps__stack, .ps__label, .ps__list,
.ps__news, .ps__heading{
margin-left:22px;
margin-right:22px;
white-space:normal !important;
text-align:left !important;
color:#fff;
}
/* Every line of copy on this page is a hard artboard line break — a
per line, or a
. Both have to stop being breaks or the
column re-wraps on top of them. */
.ps__para{ font-size:15px; line-height:23px; margin-top:16px }
.ps__para--j > span,
.ps__para--j > span.last{ display:inline; text-align:left; text-align-last:left }
.ps__para--r br, .ps__news br{ display:none }
.ps__stack{ margin-top:24px }
.ps__stack b{ font-size:15px; line-height:24px }
.ps__stack span{ display:inline; font-size:15px; line-height:24px }
.ps__label{ font-size:15px; line-height:24px; margin-top:22px }
.ps__list { font-size:15px; line-height:24px; margin-top:0 }
/* 82px does not fit; 34 is the largest that holds "Advertisements" on
one line at 358px. */
.ps__heading{ font-size:34px; line-height:36px; margin-top:48px; color:#fff }
.ps__news{ font-size:15px; line-height:23px; margin-top:14px; color:#fff }
/* ---------- reading order ----------
DOM order is the artboard's PAINT order, which is not top-to-bottom:
image3 (y1782) is authored after image2 (y2135), image7 (y3593) after
image6, and the newspaper pair is right-then-left. Flex `order` puts
the column back into reading order. Indices are children of .ps__art,
which no longer contains the nav — that now lives outside the artboard
as the shared .navlayer component. */
.ps__art > :nth-child(1) { order:-1 } /* visually-hidden h1 */
.ps__art > :nth-child(2) { order:1 } /* hero */
.ps__art > :nth-child(3) { order:2 } /* Zirk intro 1 */
.ps__art > :nth-child(4) { order:3 } /* Zirk intro 2 */
.ps__art > :nth-child(5) { order:4 } /* My Contribution */
.ps__art > :nth-child(6) { order:5 } /* Design Direction */
.ps__art > :nth-child(7) { order:6 } /* image0 y924 */
.ps__art > :nth-child(8) { order:7 } /* image1 y1258 */
.ps__art > :nth-child(10){ order:8 } /* image3 y1782 */
.ps__art > :nth-child(9) { order:9 } /* image2 y2135 */
.ps__art > :nth-child(11){ order:10 } /* image4 y2577 */
.ps__art > :nth-child(13){ order:11 } /* image7 y3593 */
.ps__art > :nth-child(14){ order:12 } /* Escon intro */
.ps__art > :nth-child(16){ order:13 } /* "The brochure balances…" */
.ps__art > :nth-child(17){ order:14 } /* Design Direction */
.ps__art > :nth-child(18){ order:15 } /* list */
.ps__art > :nth-child(15){ order:16 } /* image8 y4603 */
.ps__art > :nth-child(19){ order:17 } /* My Contribution */
.ps__art > :nth-child(20){ order:18 } /* list */
.ps__art > :nth-child(21){ order:19 } /* Newspaper Advertisements */
.ps__art > :nth-child(22){ order:20 } /* newspaper intro */
.ps__art > :nth-child(24){ order:21 } /* image10 y5875 x57 */
.ps__art > :nth-child(23){ order:22 } /* image9 y5875 x731 */
}