/* ============================================================
   PRINT & COLLATERAL — MOBILE
   ------------------------------------------------------------
   Built 1:1 from "print page.svg" — a 390 x 3920 frame.

   Same mechanism as css/pendulo-mobile.css: this does NOT reflow
   the 1440 desktop artboard, it rebuilds the phone frame as its
   own artboard scaled by --km = clientWidth / 390 (set in the
   inline head script next to --k). Every box below is in the
   frame's own design px.

   Elements are addressed by data-m, added to print.html for this
   sheet — the desktop markup carries inline left/top in 1440
   coordinates and nothing else stable to hook onto.

   Type solved from the outlines, not guessed. Each block's glyph
   subpaths were clustered onto baselines; the size and weight were
   then solved by matching canvas ink metrics (actualBoundingBox*)
   against the frame's own ink box — a candidate is only right when
   sizeFromWidth and sizeFromHeight agree. System that came back:

     body copy            Neue Montreal Book 350, 11px
     newspaper intro      Neue Montreal Regular 400, 11px
     labels               Neue Montreal BOLD 700, 11px and 15px,
                          no tracking (the 1440 board sets these in
                          Medium + .57px; the frame does not)
     section heading      PP Editorial New UltralightItalic 35px
     nav labels           Neue Montreal Regular 400, 6px

   Every `left` solved back to a whole design px (21 / 26 / 15 / 18
   and the nav's 89 / 148 / 205 / 278), which is the check that the
   font, weight and size are the frame's and not a near miss.

   Loaded AFTER css/print.css. Breakpoint 768px.
   ============================================================ */

@media (max-width: 768px){

/* ---------- page frame ---------- */
body.case{ background:var(--c-bg) }
.ps{
  height:calc(3920px * var(--km)) !important;
  overflow:hidden;
  background:var(--c-bg);
  padding-bottom:0;
}
.ps__art{
  position:absolute !important;
  left:0; top:0;
  width:390px !important; height:3920px !important;
  transform-origin:0 0;
  transform:scale(var(--km)) !important;
}

/* ---------- nav ----------
   The frame draws the nav as a hairline pill (55,27 280x19 r9.5,
   .5px white) — the same component the home page's phone frame and
   the Péndulo frame carry.

   Every selector carries `.navlayer--static` on purpose: css/nav.css's
   own @media (max-width:768px) block addresses `.navlayer--static .nav`
   and turns the pill into a generic 44px flex bar. A bare `.nav` here
   loses that on specificity while the :nth-child label rules still win,
   which renders the bar with 6px labels shrink-wrapped to the left edge.

   absolute, NOT fixed: the frame draws the pill once inside the
   390x3920 artboard, so it scrolls away with the artwork.
   ------------------------------------------------------------ */
.navlayer.navlayer--static{
  position:absolute; left:0; top:0;
  width:100%; height:0; z-index:80;
}
.navlayer--static .navlayer__scale{
  position:relative; left:0; top:0;
  width:390px !important; height:0 !important; padding:0;
  transform-origin:0 0; transform:scale(var(--km)) !important;
}
.navlayer--static .nav{
  position:absolute; left:55px; top:27px;
  width:280px; height:19px;
  display:block; padding:0; margin:0;
  /* the hairline is an inset shadow, not a border: a border would move
     the padding box the four absolute labels sit against and drift
     every ink left off the frame by the stroke width. */
  border:0; border-radius:9.5px;
  box-shadow:inset 0 0 0 .5px var(--c-ivory);
  background:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.navlayer--static .nav a{
  position:absolute; color:var(--c-ivory); white-space:nowrap;
  font-family:'PP Neue Montreal',Helvetica,Arial,sans-serif;
  font-weight:400; font-size:6px; line-height:6px;
}
.navlayer--static .nav a .roll{
  display:block; height:auto; overflow:visible;
  padding-right:0; transform:none !important;
}
.navlayer--static .nav a .roll i{ display:none; font-style:normal }
.navlayer--static .nav a .roll i:first-child{ display:block; position:static }
.navlayer--static .nav a:hover .roll i{ transform:none }
.navlayer--static .nav a:nth-child(1){ left:34px !important; top:7px !important }
.navlayer--static .nav a:nth-child(2){ left:93px !important; top:7px !important }
.navlayer--static .nav a:nth-child(3){ left:150px !important; top:7px !important }
.navlayer--static .nav a:nth-child(4){ left:223px !important; top:7px !important }

/* ---------- media ----------
   Boxes are the frame's own rects/paths; each image keeps the crop its
   pattern matrix defines (imgLeft = e·w, imgTop = f·h, imgW = a·IW·w,
   imgH = d·IH·h). Nine of the ten files the frame embeds are the SAME
   full-frame source as assets/img/print-site/*.webp — checked by
   normalised cross-correlation, 0.999+ on every pair — so the matrix
   values transfer straight across. The hero is the exception; see below.

   The five Zirk mockups are square-cornered in the frame and three of
   them bleed past the 390 edge (zirk2 reaches x=464). .ps clips them. */
/* NOTE the selectors below: every per-image rule is written as
   .ps__frame[data-m="…"] rather than [data-m="…"] on its own. Among
   !important declarations the more specific one wins regardless of order,
   so a generic `.ps__frame[data-m]{…!important}` (0,2,0) silently outranks
   a bare `[data-m="hero"]{…!important}` (0,1,0). That is what put the hero
   photo on screen at its intrinsic 1440x899 and flattened every r5 corner
   on the first build. */
.ps__frame[data-m]{
  position:absolute !important;
  overflow:hidden;
}
.ps__frame[data-m] img{
  position:absolute; max-width:none; display:block;
}

/* hero — full bleed, bottom corners r15.
   The frame embeds a WIDER crop of the chair photo (3603x1868) than
   assets/img/print-site/hero.webp is (1440x899 of the same master).
   hero.webp was registered against the frame's copy at ncc 0.9989 and
   covers its x 303..3297, full height, which is where these numbers
   come from — the visible 390x444 band is identical either way. */
.ps__frame[data-m="hero"]{
  left:0 !important; top:0 !important;
  width:390px !important; height:444px !important;
  border-radius:0 0 15px 15px !important;
}
.ps__frame[data-m="hero"] img{ left:-205.16px !important; top:0 !important; width:712.21px !important; height:444.63px !important }

/* The Zirk — five mockups, overlapping in the frame's paint order.
   That order is zirk1, zirk2, zirk4, zirk3, zirk5, escon1, which is
   already the DOM order in print.html, so no z-index is needed:
   zirk3 covers zirk2 and zirk4, zirk5 covers zirk4, escon1 covers zirk5. */
.ps__frame[data-m="zirk1"]{ left:0 !important;   top:658px !important;  width:404px !important; height:289px !important; border-radius:0 !important }
.ps__frame[data-m="zirk1"] img{ left:-63.98px !important; top:-66.63px !important; width:518.15px !important; height:388.36px !important }

.ps__frame[data-m="zirk2"]{ left:13px !important;  top:841px !important;  width:451px !important; height:350px !important; border-radius:0 !important }
.ps__frame[data-m="zirk2"] img{ left:0 !important; top:0 !important; width:451px !important; height:393.89px !important }

.ps__frame[data-m="zirk3"]{ left:0 !important;   top:1143px !important; width:425px !important; height:291px !important; border-radius:0 !important }
.ps__frame[data-m="zirk3"] img{ left:-67.84px !important; top:-75.11px !important; width:530.38px !important; height:398.45px !important }

.ps__frame[data-m="zirk4"]{ left:-14px !important; top:1370px !important; width:392px !important; height:354px !important; border-radius:0 !important }
.ps__frame[data-m="zirk4"] img{ left:-72.62px !important; top:-34.44px !important; width:561.03px !important; height:420.43px !important }

.ps__frame[data-m="zirk5"]{ left:-5px !important;  top:1625px !important; width:395px !important; height:413px !important; border-radius:0 !important }
.ps__frame[data-m="zirk5"] img{ left:-81.01px !important; top:-0.16px !important; width:551.37px !important; height:413.31px !important }

/* Escon Primera */
.ps__frame[data-m="escon1"]{ left:6px !important; top:1996px !important; width:379px !important; height:281px !important; border-radius:5px !important }
.ps__frame[data-m="escon1"] img{ left:-16.6px !important; top:-24.54px !important; width:412.34px !important; height:308.36px !important }

.ps__frame[data-m="escon2"]{ left:6.65332px !important; top:2381px !important; width:377.693px !important; height:278px !important; border-radius:5px !important }
.ps__frame[data-m="escon2"] img{ left:-0.09px !important; top:-4.81px !important; width:377.79px !important; height:283.34px !important }

/* image6 is painted and then wholly covered by image7 on the 1440 board —
   an artboard leftover, not a stacking mistake. The phone frame does not
   draw it at all. */
.ps__frame[data-m="nomob"]{ display:none !important }

/* Newspaper advertisements */
.ps__frame[data-m="news1"]{ left:16px !important; top:3014px !important; width:358px !important; height:443px !important; border-radius:5px !important }
.ps__frame[data-m="news1"] img{ left:0 !important; top:-0.2px !important; width:358px !important; height:443.4px !important }

.ps__frame[data-m="news2"]{ left:15px !important; top:3465px !important; width:358px !important; height:443px !important; border-radius:5px !important }
.ps__frame[data-m="news2"] img{ left:-0.04px !important; top:-61.4px !important; width:358.07px !important; height:536.48px !important }

/* ---------- type ----------
   The page is white here, so everything but the hero copy is black —
   the inverse of the 1440 board, where the copy lies on the photos. */
.ps__para, .ps__stack, .ps__stack b, .ps__stack span,
.ps__label, .ps__list, .ps__news, .ps__heading{ color:var(--c-ink) }

.ps__para{ font-weight:350; font-size:11px; line-height:15px }

/* "and" on the 1440 board, "&" on the phone frame — both blocks.
   The desktop default is in css/print.css. */
[data-m="lead1"] .d, [data-m="lead2"] .d{ display:none }
[data-m="lead1"] .m, [data-m="lead2"] .m{ display:inline; font-style:normal }

/* hero copy — the one white block, and the one that re-wraps.
   Its five phone lines are not the board's three, so the authored
   <span>s run inline and the box does the breaking. 176 sits inside
   the [168.4, 183.3) band that reproduces the frame's own breaks;
   each span carries a trailing space, which a block line end trims
   on desktop and which is the word gap here. */
[data-m="lead1"]{
  left:21px !important; top:249px !important; width:176px !important;
  color:var(--c-ivory);   /* on the hero photograph */
}
[data-m="lead1"] > span,
[data-m="lead1"] > span.last{ display:inline; text-align:left; text-align-last:left }

/* Justified, and the phone frame breaks it exactly where the board
   does, so the authored spans stay one line each. 345.6 is the measure
   the frame's two full lines are stretched to. */
[data-m="lead2"]{
  left:26px !important; top:471px !important; width:345.6px !important;
  line-height:14px;
}

/* the two label stacks under the hero */
[data-m="stack1"]{ left:26px !important; top:537px !important }
[data-m="stack2"]{ left:26px !important; top:606px !important }
.ps__stack b{ font-weight:700; font-size:11px; line-height:17px; letter-spacing:0 }
.ps__stack span{ font-size:11px; line-height:17px }

/* Escon intro — the frame's five lines are the board's five lines,
   so the spans stay blocks; only the justification goes (the frame
   sets this one ragged). */
[data-m="eintro"]{ left:15px !important; top:2290px !important; width:370px !important }
[data-m="eintro"] > span,
[data-m="eintro"] > span.last{ display:block; text-align:left; text-align-last:left }

/* re-wraps: the board's <br>s are in the wrong places, so they are
   hidden and the measure does the breaking. Both widths sit inside the
   band that reproduces the frame's own line breaks
   (ebody [350.9, 362.2), nbody [334.8, 368.9)). */
[data-m="ebody"]{
  left:15px !important; top:2713px !important; width:356px !important;
  text-align:left !important; white-space:normal !important;
}
[data-m="nbody"]{
  left:15px !important; top:2933px !important; width:352px !important;
  text-align:left !important;
  font-weight:400; font-size:11px; line-height:15px;
}
[data-m="ebody"] br, [data-m="nbody"] br{ display:none }

/* Design Direction / My Contribution — two label+list pairs.
   l-dd and list-dd share a baseline (2696) at two different sizes, so
   each is positioned on its own rather than as a stack. */
.ps__label{ font-weight:700; font-size:15px; line-height:15px; letter-spacing:0 }
.ps__list { font-weight:350; font-size:11px; line-height:11px }
[data-m="l-dd"]   { left:15px !important;     top:2684px !important; width:auto !important; text-align:left !important }
[data-m="list-dd"]{ left:150.58px !important; top:2687px !important; width:auto !important; text-align:left !important }
[data-m="l-mc"]   { left:15px !important;     top:2783px !important; width:auto !important; text-align:left !important }
[data-m="list-mc"]{ left:15px !important;     top:2807px !important; width:auto !important; text-align:left !important }

/* the section heading — 82px on the board, 35 here */
[data-m="h-news"]{
  left:18px !important; top:2884.46px !important;
  font-size:35px; line-height:35px;
}

}