/* ============================================================================
   work-mph.css — the masterproductionhouse.com/work LAYOUT SYSTEM, ported onto
   work.html. Founder, 2026-08-06: "can u also do the same treatment for the
   work page as well … our work page because that looks off".

   Loaded LAST on work.html, gated on `body.wk-mph`. Linked by work.html ONLY.
   Nothing here edits a shared sheet, and work-v3.css / work.css /
   mokko/assets/css/style.css are all untouched.

   ── WHAT "LOOKS OFF" ACTUALLY WAS (measured at 1440, both pages) ───────────
   Ours rendered 10,646px to show 17 projects. Theirs renders 6,551px to show
   42. Four faults, in order of how much they cost:

   1. 🔴 THE PAGE SHOWED FIVE PROJECTS TWICE. `#wv3-works` was a 4,034px
      showcase of Surfexcel, Senses 2.0, The Burger Company, Sanatan Shastar
      Vidiya and Artcore London — one ~807px alternating row each — and ALL
      FIVE are also in the 17-item archive grid below it. 38% of the page was a
      second copy of work already scrolled past. Founder chose one gallery;
      the section is commented out in work.html, not deleted.
   2. THREE HEADINGS AT 77.76px. The hero h1, the showcase head and the
      archive head were all the same size, so nothing was subordinate to
      anything. MPH's h1 is 60 and their grid heads are a 12px label.
   3. TWO SHELLS ON ONE PAGE. The wv3 sections ran 1200@120 and the Mokko grid
      ran 1350@45 — different widths AND different left edges, which is the
      "stretch to the corners" fault svc-type.css fixed on services.
   4. TILE TITLES AT 24px UPPERCASE ANTONIO against MPH's 16/24. A catalogue
      label was competing with the artwork.

   ── NOT COPIED, SAME THREE AS bto-about-mph.css ────────────────────────────
   Their typefaces (Inter + Space Grotesk), their ground, and heading
   line-height literally — 1.25 suits sentence-case Space Grotesk, not
   condensed Antonio in caps, which takes 1.05. See that file's header.

   ⚠ NO SECTION IN THIS FILE PAINTS A BACKGROUND. `main.ms-main` is #F0EEEB and
   that warm off-white IS the page surface. Forcing `background:#fff` on a
   section looks right until a child's margin collapses out of it and the
   surface shows through as a seam you then chase through three wrong elements.
   ========================================================================== */


/* ==========================================================================
   §1 · ONE SHELL — 1280 @ 80, replacing 1200@120 and 1350@45
   ==========================================================================
   MPH runs 1280@80 on every band of their work page, hero and grid alike
   (measured on all four of their sections). Ours disagreed with itself. */
body.wk-mph .wv3-hero,
body.wk-mph .wv3-sec,
body.wk-mph .ms-portfolio-filter-area > .container {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 80px;
  width: 100%;
}

/* Bootstrap's own `.container` inside the filter area carries a max-width and
   its own 15px gutter; both have to go or the shell above is re-narrowed. */
body.wk-mph .ms-portfolio-filter-area > .container { max-width: 1440px; }


/* ==========================================================================
   §2 · SECTION PADDING — MPH's, against our 99/54 · 72/0 · 0/54
   ==========================================================================
                            ours        MPH          here
     hero                   99/54       144/0        144/48
     grid section           0/54        64/80        64/80
     (archive head)         72/0        n/a          folded into the grid

   ⚠ 144px top is not a typo and not "a big gap" — it is MPH's `pt-28`, and it
   is what puts the first line clear of the fixed header on a page whose hero
   is type-only. Ours was 99, which is why the kicker sat tight under the bar. */
body.wk-mph .wv3-hero { padding-block: 144px 48px; }
body.wk-mph .ms-portfolio-filter-area { padding-block: 64px 80px; }


/* ==========================================================================
   §3 · THE TYPE SCALE
   ==========================================================================
                          ours              MPH            here
     hero kicker       11.52/17.28 w500    14/20 w600      14/20 w600
     hero h1           77.76/73.87 w700    60/75  w600      60/1.05
     hero lead         16.56/26.5          18/32           18/32
     grid label        —                   12/16 ls.24em   12/16 ls.24em
     grid count line   —                   14/24 w400      14/24 w400
     filter button        15/18            16/24           16/24
     tile title (h3)      24/25.2 UPPER    16/24  w600     16/24  w600
     tile category        16/24            12/16 ls.18em   12/16 ls.18em

   The tile title is the one that changes character, not just size: 24px
   uppercase Antonio → 16/24 sentence-case Neue Montreal, because at 17 tiles a
   display face on every card is 17 things shouting at the artwork. MPH sets
   theirs in the body face for exactly that reason. */

body.wk-mph .wv3-hero .wv3-kicker {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

body.wk-mph .wv3-hero__title,
body.wk-mph .wv3-hero__title .wv3-mask,
body.wk-mph .wv3-hero__title .wv3-line {
  font-size: 60px;
  line-height: 1.05;
  letter-spacing: -.02em;
}

body.wk-mph .wv3-hero__lead {
  font-size: 18px;
  line-height: 32px;
  max-width: 768px;   /* MPH's measured lead box */
  margin-top: 24px;
}


/* ── THE GRID HEAD — MPH has NO big heading here, and that is the point ────
   Their grid opens on a 12px tracked label ("BROWSE BY CATEGORY") and a 14/24
   count line ("42 projects across 6 category rows"). No h2 at all; the work is
   the headline.

   Ours carried `<h2 class="wv3-sec__head">Everything else.</h2>` at 77.76px —
   copy that only parsed as the second half of a pair, because the showcase
   section above it was the first half. With that section gone, "Everything
   else." has nothing to be else THAN. The markup is replaced in work.html by
   MPH's label + count pair, and the count is written at runtime from the real
   tile count (bto-js/work-mph.js) so it cannot drift from the grid. */
body.wk-mph .wkm-gridhead { margin-bottom: 28px; }

body.wk-mph .wkm-gridhead__label {
  display: block;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--fg-accent);
  margin: 0 0 8px;
}

body.wk-mph .wkm-gridhead__count {
  display: block;
  font-size: 14px;
  line-height: 24px;
  font-weight: 400;
  color: var(--fg-body);
  margin: 0;
}


/* ── THE FILTER CHIPS ──────────────────────────────────────────────────────
   🔴 THE LIVE RULES ARE IN mokko/assets/css/style.css, NOT work-mokko.css —
   that file is not in work.html's stylesheet list at all, and grepping it to
   explain this bar is a dead end. The two that matter are :9965
   `.ms-portfolio-filter-area .button-group button` at (0,2,1) and :10016,
   which paints a #f7f7f7 plate on `.button-group`.
   ⚠ Mokko renders the CHECKED state as an `::after` plate at `z-index:-1`, not
   as a background — restyling the button alone leaves a black pill. Beaten
   here at (0,3,1) and (0,4,1); no !important needed. */
body.wk-mph .ms-portfolio-filter-area .button-group button {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}


/* ==========================================================================
   §4 · THE TILES
   ==========================================================================
   ⚠ ASPECT RATIO IS THE SECOND-BIGGEST HEIGHT LEVER ON THIS PAGE. Every clip
   in media/slider-loops/ is 540×960 — 9:16 portrait. Left at source ratio a
   3-up grid of 17 tiles is six rows of ~730px = ~4,400px of tiles alone.
   MPH's portrait tiles are 500×612, i.e. 1:1.22 — they CROP portrait footage
   into a shorter box rather than let the page inherit the phone's aspect. Same
   ratio taken here; `object-fit: cover` does the crop. */
/* ⚠ THE RADIUS AND THE CLIP GO ON THE MEDIA, NOT ON `.item--inner`. The
   caption moves OUT of the image and under it (see below), so a rounded,
   overflow-hidden wrapper around both would clip the text block's corners for
   no reason and re-introduce a box the caption has to live inside. */
body.wk-mph .ms-portfolio-filter-area .grid-item-p .item--inner {
  position: relative;
  overflow: visible;
  border-radius: 0;
}

body.wk-mph .ms-portfolio-filter-area .grid-item-p .ms-p-img {
  position: relative;
  margin: 0;
  aspect-ratio: 500 / 612;   /* MPH's measured portrait tile */
  overflow: hidden;
  border-radius: 14px;
}

body.wk-mph .ms-portfolio-filter-area .grid-item-p .ms-p-img img,
body.wk-mph .ms-portfolio-filter-area .grid-item-p .ms-p-img video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The lazily-attached preview sits ON the poster, not instead of it: the
   poster stays underneath as the first frame and as the permanent fallback if
   the clip never loads. See bto-js/work-mph.js. */
body.wk-mph .ms-portfolio-filter-area .grid-item-p .ms-p-img video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .45s ease;
}
body.wk-mph .ms-portfolio-filter-area .grid-item-p .ms-p-img video.is-playing { opacity: 1; }

/* 🔴 THESE TWO NEED THE FULL BODY CHAIN, AND HERE IS THE ARITHMETIC.
   The first version of this block was
   `body.wk-mph .ms-portfolio-filter-area .grid-item-p … h3` — (0,4,2) — and it
   LOST while its own letter-spacing won, which is the tell: a competing rule
   set font-size and font-family but not letter-spacing. The winners, found with
   CDP getMatchedStylesForNode rather than by grepping:

     .portfolio_wrap .portfolio-feed .custom-ratio .item--inner
       .ms-p-content h3                                        (0,5,1)  24px
     body .portfolio_wrap .filter .item--inner .ms-p-content
       .ms-p-content__inner h3                                 (0,5,2)  --u-display
     .portfolio_wrap .portfolio-feed .fadein .ms-p-content
       .ms-p-cat                                               (0,5,0)  16px

   Five classes beats four, every time, regardless of load order. Chaining the
   two classes `<body>` ALREADY carries (`.masonry.wk-page`) buys three class
   points for free and takes this to (0,7,2) / (0,8,1) — no !important, and no
   dependency on Mokko's own class names staying where they are. */
/* 🔴 THE CAPTION WAS A HOVER-ONLY OVERLAY, AND ON A WORK PAGE THAT IS A GAP,
   NOT A STYLE. Mokko ships `.ms-p-content` as `position:absolute; inset:0;
   opacity:0` — the title and the category only exist while the pointer is on
   the tile, so at rest seventeen tiles carried NO text at all and nothing said
   what any of them was. It is also unreachable by touch and by keyboard.
   MPH puts the title and the category permanently UNDER each tile (measured:
   16/24 title, 12px tracked category, both always on). Same here: the overlay
   is returned to normal flow and sits below the media.

   `opacity: 1` here also neutralises Mokko's own hover rule — that rule is far
   less specific than this chain, so hover becomes a no-op rather than a fight. */
body.wk-mph.masonry.wk-page .ms-portfolio-filter-area .grid-item-p .item--inner .ms-p-content {
  position: static;
  inset: auto;
  opacity: 1;
  transform: none;
  background: none;
  padding: 14px 2px 0;
  text-align: left;
  display: block;
  height: auto;
}

body.wk-mph.masonry.wk-page .ms-portfolio-filter-area .grid-item-p .item--inner .ms-p-content__inner {
  position: static;
  opacity: 1;
  transform: none;
  padding: 0;
  display: block;
}

body.wk-mph.masonry.wk-page .ms-portfolio-filter-area .grid-item-p .item--inner .ms-p-content__inner h3 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  font-family: "Neue Montreal", Archivo, sans-serif;
  margin: 0 0 4px;
  /* 🔴 THE ONE `!important` IN THIS FILE, AND IT IS COUNTERING ONE.
     mokko/assets/css/style.css ships
     `.portfolio_wrap .portfolio-feed .fadein .ms-p-content h3 {
        color: var(--color-white) !important }`
     — white, because that caption was designed to sit ON the image. Moved out
     from over the media onto the page surface it rendered white on #F0EEEB:
     measured 1.16:1, an invisible title on all seventeen tiles. `!important`
     ignores specificity entirely, so the (0,7,2) chain above does not touch it;
     only another `!important` does. Everything else in this file wins on
     specificity alone — if this line ever looks removable, re-check that the
     vendor `!important` is gone first.
     `.ms-p-cat` needs no equivalent: it is not marked important and lands at
     5.93:1 in dark gold. */
  color: var(--fg-ink) !important;
}

body.wk-mph.masonry.wk-page .ms-portfolio-filter-area .grid-item-p .item--inner .ms-p-content .ms-p-cat {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  display: block;
  /* ⚠ --fg-accent (#854D00), NOT --wv3-yellow. palette.css:314 remaps the raw
     #f1b84b to dark gold for TEXT because the raw amber on this light surface
     is 1.41:1. The yellow is for FILLS only; the two are not interchangeable. */
  color: var(--fg-accent);
}


/* ==========================================================================
   §5 · REDUCED MOTION
   ==========================================================================
   The script never attaches a video under reduced motion, so `.is-playing` is
   unreachable and the poster is what renders. This is the belt for a preview
   already attached when the preference flips mid-session. */
@media (prefers-reduced-motion: reduce) {
  body.wk-mph .ms-portfolio-filter-area .grid-item-p .ms-p-img video {
    display: none;
  }
}


/* ==========================================================================
   §6 · NARROW
   ==========================================================================
   MPH steps at breakpoints rather than scaling fluidly. */
@media (max-width: 991px) {
  body.wk-mph .wv3-hero,
  body.wk-mph .wv3-sec,
  body.wk-mph .ms-portfolio-filter-area > .container { padding-inline: 40px; }
  body.wk-mph .wv3-hero { padding-block: 112px 40px; }
  body.wk-mph .ms-portfolio-filter-area { padding-block: 48px 64px; }
  body.wk-mph .wv3-hero__title,
  body.wk-mph .wv3-hero__title .wv3-mask,
  body.wk-mph .wv3-hero__title .wv3-line { font-size: 44px; }
  body.wk-mph .wv3-hero__lead { font-size: 16px; line-height: 28px; }
}

@media (max-width: 575px) {
  body.wk-mph .wv3-hero,
  body.wk-mph .wv3-sec,
  body.wk-mph .ms-portfolio-filter-area > .container { padding-inline: 24px; }
  body.wk-mph .wv3-hero__title,
  body.wk-mph .wv3-hero__title .wv3-mask,
  body.wk-mph .wv3-hero__title .wv3-line { font-size: 34px; }
}


/* ==========================================================================
   §7 · ONTO THE SITE SCALE (2026-08-06)
   ==========================================================================
   Founder: "make everything look and position the same."

   Measured at 2560 this page still ran 54 and 60 where About, Founder and
   Contact run 48. The archive head is `.bw-title` — the AR/VR screen that
   REPLACED the Mokko grid later the same day (see the note at the head of this
   file); it was never on the scale because it did not exist when §1-§6 were
   written.

   ⚠ `.wv3-hero__title` is already 60 (§3) and stays — it is the page h1, and 60
   is the site h1. Only the SECTION heads come to 48. */
body.wk-mph .bw-title,
body.wk-mph .wv3-sec__head {
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: -.02em;
}

body.wk-mph .bw-eyebrow {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
}

@media (max-width: 991px) {
  body.wk-mph .bw-title,
  body.wk-mph .wv3-sec__head { font-size: 36px; }
}
@media (max-width: 575px) {
  body.wk-mph .bw-title,
  body.wk-mph .wv3-sec__head { font-size: 28px; }
}


/* ── THE ARCHIVE HEAD JOINS THE SPINE ─────────────────────────────────────
   `.bw-head` shipped `max-width: 760px; margin-inline: auto`, so it CENTRED
   inside the 1440 shell — measured left 900 at 2560 while `.bw-inner`'s own
   content edge is 640 and every other page's heads are at 640. One page
   centring its head while five left-align it is the inconsistency the founder
   is pointing at ("make everything look and position the same").
   ⚠ `width: 100%` alongside — `margin-inline: auto` on a shrink-to-fit box
   RESIZES it rather than moving it, which is the trap recorded twice already
   (.sva-proc-col 900→500, .svw-head 500→316). */
body.wk-mph .bw-head {
  margin-inline: 0;
  max-width: 100%;
  width: 100%;
  text-align: left;
}