/* ==========================================================================
   Work. Six colour worlds, one after another, each a full bleed block.

   Every value here is off the signed off MattHart_Work_FINAL.pdf, read through
   its render source reference/build-source/workall.html, at 1600 wide.

   From 1280 up, each block is the render itself, scaled. --u is one pixel of
   the 1600 wide render: the block is 760u tall and everything in it is placed
   in u, so text and artwork keep their relationship at any width instead of
   colliding. Type never drops below 86 per cent (--t), so it stays readable
   on a 1280 laptop. Above 1600 the stage stops growing and centres, and the
   grounds and photographs run on to the edges.

   Below 1280 there is no room for artwork beside the words, so each block
   stacks: words, then the artwork under them. The design has no drawn phone
   version of Work; this one follows the phone rule the design system gives
   the home descent: story first, the built thing underneath.
   ========================================================================== */

.wk { --u: min(calc(100vw / 1600), 1px); --t: max(var(--u), .86px) }

/* ── the intro, on cream ──────────────────────────────────────────────────── */

.wk-intro { padding: 97px var(--gutter) 42px 96px }
.wk-intro .eyebrow { display: block }
.wk-intro h1 { margin: 20px 0 0 0; font-size: 46px; font-weight: 800;
               letter-spacing: -1.6px; line-height: 1.1 }
.wk-intro p { margin-top: 22px; max-width: 680px; font-size: 19px;
              line-height: 1.21; color: var(--mut) }

/* ── the block ───────────────────────────────────────────────────────────── */

.wk-blk { position: relative; overflow: hidden; height: calc(760 * var(--u)) }
.wk-stage { position: relative; width: calc(1600 * var(--u)); height: 100%;
            margin: 0 auto }
.wk-in { position: absolute; left: calc(96 * var(--u)); z-index: 10;
         width: calc(700 * var(--u)) }
.wk-n { display: block; font-family: var(--mono); font-size: calc(12 * var(--t));
        letter-spacing: .14em; text-transform: uppercase }
.wk-in h2 { margin: 0; font-size: calc(52 * var(--t)); font-weight: 900;
            letter-spacing: calc(-1.9 * var(--t)); line-height: 1.02 }
.wk-in p { margin: calc(22 * var(--t)) 0 0 0; width: calc(540 * var(--u));
           max-width: 100%; font-size: calc(19 * var(--t)); line-height: 1.5 }
.wk-btn { display: inline-block; margin-top: calc(30 * var(--t));
          padding: calc(13 * var(--t)) calc(24 * var(--t)); border-radius: 2px;
          font-size: calc(15 * var(--t)); font-weight: 800; line-height: 1.2;
          text-decoration: none }
.wk-mk { display: block; width: auto; max-width: none;
         margin-bottom: calc(30 * var(--t)) }
.wk-art { position: absolute; display: block; max-width: none }
.wk-scrim { position: absolute; inset: 0 }
.wk-defs { position: absolute; width: 0; height: 0; overflow: hidden }

/* ── 1 Superfandom ───────────────────────────────────────────────────────── */

.wk-sf { background: #141414; color: #fff }
.wk-sf-photo { left: calc(230 * var(--u)); top: calc(-422 * var(--u));
               width: calc(2400 * var(--u)); height: calc(1600 * var(--u)); object-fit: cover }
.wk-sf .wk-scrim { background: linear-gradient(90deg, #141414 0%,
  rgba(20,20,20,.98) 30%, rgba(20,20,20,.80) 46%, rgba(20,20,20,.28) 62%,
  rgba(20,20,20,0) 78%) }
.wk-sf .wk-in { top: calc(110 * var(--u)) }
/* the one eyebrow on the page that is not mono: Figtree, and coral */
.wk-sf .wk-n { font-family: var(--sans); font-size: calc(16 * var(--t));
               font-weight: 600; letter-spacing: .22em; color: #E96A4E }
.wk-cone { display: block; width: calc(190 * var(--t)); height: calc(70 * var(--t));
           margin: calc(30 * var(--t)) 0 }
.wk-sf h2 { color: #EA555D }
.wk-sf .wk-btn { background: #ED2A7B; color: #fff }

/* ── 2 BetterIdeasFaster ─────────────────────────────────────────────────── */

.wk-bif { background: #0B0B0C; color: #fff }
.wk-bif-photo { left: calc(-170 * var(--u)); top: calc(-165 * var(--u));
                width: calc(1930 * var(--u)); height: calc(1086 * var(--u));
                object-fit: cover; opacity: .92;
                /* Matt, 18 Sept: tinted yellow, so it reads as a workshop */
                filter: url(#wk-yellow-soft) contrast(1.08) brightness(1.1) }
.wk-bif .wk-scrim { background: linear-gradient(90deg, rgba(11,11,12,.96) 0%,
  rgba(11,11,12,.92) 30%, rgba(11,11,12,.60) 50%, rgba(11,11,12,.18) 72%,
  rgba(11,11,12,0) 88%) }
.wk-bif .wk-in { top: calc(120 * var(--u)) }
/* past 1600 the photo runs off the stage on the left; the scrim follows it */
.wk-bif .wk-scrim { box-shadow: -400px 0 0 rgba(11,11,12,.96) }
.wk-bif .wk-n, .wk-bif h2 { color: var(--yellow) }
.wk-bif .wk-mk { height: calc(56 * var(--t)); margin-top: calc(30 * var(--t)) }
.wk-bif p { opacity: .9 }
.wk-bif .wk-btn { background: var(--yellow); color: var(--ink) }

/* ── 3 IndustryApproved ──────────────────────────────────────────────────── */

.wk-ia { background: #fff; color: var(--ink) }
.wk-ia .wk-in { top: calc(112 * var(--u)) }
.wk-ia .wk-n { color: #8A8C8E }
/* the scanned lettering stays raw, paper grain and all */
.wk-lettering { display: block; width: calc(700 * var(--t)); max-width: none;
                margin-top: calc(34 * var(--t)) }
/* 22 under the lettering, as the PDF measures it (the source's 18 plus the
   inline image's descender gap, which a block image does not have) */
.wk-ia-rule { display: block; width: calc(700 * var(--t)); height: 2px;
              background: var(--ink); margin-top: calc(22 * var(--t)) }
.wk-ia h2 { margin-top: calc(44 * var(--t)); font-size: calc(46 * var(--t));
            letter-spacing: calc(-1.6 * var(--t)) }
.wk-ia p { color: #3A3C3E }
.wk-ia .wk-btn { background: var(--ink); color: #fff }
/* Cropped in, as the PDF has it. Matt tried the whole sheet on 18 Sept and
   preferred it pulled in. The phone pulls in a little less (below). */
.wk-ia-photo { right: 0; top: 0; width: calc(700 * var(--u)); height: 100%;
               object-fit: cover; object-position: 52% center; background: #fff }
.wk-ia-vrule { right: calc(700 * var(--u)); top: 0; bottom: 0; width: 2px;
               background: var(--ink) }
.wk-ia-dot { right: calc(740 * var(--u)); top: calc(90 * var(--u));
             width: calc(14 * var(--u)); height: calc(14 * var(--u));
             border-radius: 50%; background: var(--yellow) }

/* ── 4 Ideas School ──────────────────────────────────────────────────────── */

.wk-is { background: #8FBBF2; color: var(--ink) }
.wk-is-photo { inset: 0; width: 100%; height: 100%; object-fit: cover;
               object-position: center 42% }
.wk-is .wk-scrim { background: linear-gradient(90deg, #8FBBF2 0%, #8FBBF2 32%,
  rgba(143,187,242,.88) 46%, rgba(143,187,242,.46) 60%, rgba(143,187,242,.12) 72%,
  rgba(143,187,242,0) 82%) }
.wk-is .wk-in { top: calc(118 * var(--u)) }
.wk-is .wk-n { color: #33506E }
.wk-is .wk-mk { height: calc(86 * var(--t)); margin-top: calc(30 * var(--t)) }
.wk-is h2 { font-size: calc(46 * var(--t)); letter-spacing: calc(-1.6 * var(--t)) }
.wk-is p { color: #1C2530 }
.wk-is .wk-btn { background: var(--yellow); color: var(--ink) }
.wk-is-teachers { right: calc(56 * var(--u)); top: calc(96 * var(--u));
                  width: calc(520 * var(--u)); height: auto;
                  z-index: 4;
                  box-shadow: 0 28px 64px rgba(0,0,0,.34) }
/* Stacked under the classroom photo, same width, a 14 gap, both at their own
   shape. The render overlapped them, and with the collage being four photos
   already, the overlap read as a jumble; Matt, 18 Sept. Each carries a 6
   yellow frame, the button's yellow, which pulls them off the school behind.
   With the frame: 96 + 297 + 14 = 407. */
/* rounded, to soften them; Matt, 18 Sept, both widths */
.wk-is-teachers, .wk-is-collage { border: calc(6 * var(--u)) solid var(--yellow);
                                  border-radius: calc(14 * var(--u)) }
.wk-is-collage { right: calc(56 * var(--u)); top: calc(407 * var(--u));
                 width: calc(520 * var(--u)); height: auto;
                 z-index: 4;
                 box-shadow: 0 24px 54px rgba(0,0,0,.30) }
/* The PDF closes this block with a 10px yellow bar. Matt dropped it, 18 Sept:
   it read as a stray line, not part of anything. */

/* ── 5 Madix ─────────────────────────────────────────────────────────────── */

.wk-mx { background: #366FF3; color: #fff }
.wk-mx-chap { right: calc(-70 * var(--u)); top: calc(30 * var(--u));
              width: calc(520 * var(--u)); transform: rotate(3deg); opacity: .9 }
.wk-mx-books { right: calc(250 * var(--u)); top: calc(130 * var(--u));
               width: calc(600 * var(--u)); transform: rotate(-3deg);
               filter: drop-shadow(0 22px 40px rgba(0,0,0,.42)) }
.wk-mx-robot { left: calc(150 * var(--u)); bottom: calc(30 * var(--u));
               width: calc(330 * var(--u)); opacity: .85; transform: rotate(-6deg) }
.wk-mx .wk-in { top: calc(58 * var(--u)) }
.wk-mx .wk-n { color: rgba(255,255,255,.82) }
.wk-mx .wk-mk { height: calc(96 * var(--t)); margin-top: calc(24 * var(--t)) }
.wk-mx .wk-btn { background: #FF6009; color: #fff }

/* ── 6 BIFKiDS ───────────────────────────────────────────────────────────── */

.wk-bk { background: var(--yellow); color: var(--ink) }
.wk-bk-kids { left: calc(1030 * var(--u)); top: calc(150 * var(--u));
              width: calc(520 * var(--u)) }
.wk-bk-hands { right: calc(620 * var(--u)); top: 0; width: calc(400 * var(--u));
               height: 100%; object-fit: cover }
.wk-bk .wk-in { top: calc(120 * var(--u)); width: calc(500 * var(--u)) }
.wk-bk .wk-n { color: rgba(16,17,18,.6) }
.wk-bk .wk-mk { height: calc(96 * var(--t)); margin-top: calc(26 * var(--t)) }
.wk-bk h2 { font-size: calc(46 * var(--t)) }
.wk-bk p { width: calc(470 * var(--u)) }
.wk-bk .wk-btn { background: var(--ink); color: var(--yellow) }

/* ── below 1280: words, then the artwork under them ─────────────────────────
   Every block keeps its ground and its colours. The photographs run edge to
   edge and fade up out of the ground, where on the wide page a scrim fades
   them in from the side. */

@media (max-width: 1279px) {
  .wk { --t: 1px }
  .wk-blk { height: auto }
  /* a column, with the words first whatever order the artwork sits in */
  .wk-stage { width: auto; height: auto; padding: 64px var(--gutter) 0 var(--gutter);
              display: flex; flex-direction: column }
  .wk-stage > .wk-in { order: -1 }
  .wk-in, .wk-bk .wk-in { position: static; width: auto; max-width: 640px }
  .wk-in p, .wk-bk p { width: auto }
  .wk-scrim, .wk-art { display: none }
  .wk-lettering, .wk-ia-rule { width: 100% }

  /* the artwork that comes back, in the flow */
  .wk-sf-photo, .wk-bif-photo, .wk-ia-photo, .wk-is-teachers, .wk-is-collage,
  .wk-mx-books, .wk-bk-kids {
    display: block; position: static; transform: none; box-shadow: none }
  .wk-sf-photo, .wk-bif-photo, .wk-ia-photo {
    width: calc(100% + 2 * var(--gutter)); height: 300px; max-width: none;
    margin: 48px calc(-1 * var(--gutter)) 0 calc(-1 * var(--gutter));
    object-fit: cover;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 40%);
            mask-image: linear-gradient(180deg, transparent 0, #000 40%) }
  /* this one sits outside the stage, so it needs no pull past the gutter */
  /* pulled in slightly, as on the wide screen: a 6 by 5 window on the sheet
     shows about 87 per cent of its width (Matt, 18 Sept) */
  .wk-ia-photo { -webkit-mask-image: none; mask-image: none; height: auto;
                 aspect-ratio: 6 / 5; object-position: 52% center;
                 width: 100%; margin: 48px 0 0 0; border-top: 2px solid var(--ink) }
  /* tint only on a phone, no softening */
  .wk-bif-photo { filter: url(#wk-yellow) contrast(1.08) brightness(1.1) }
  .wk-is-teachers, .wk-is-collage { border: 5px solid var(--yellow); border-radius: 12px }
  /* The two Ideas School photos stack square on a phone. The wide page's
     overlap looked like a mistake at this size; Matt, 18 Sept. */
  .wk-is-teachers { width: 100%; height: auto; margin-top: 44px;
                    box-shadow: 0 20px 44px rgba(0,0,0,.22) }
  .wk-is-collage { width: 100%; height: auto; margin: 14px 0 0 0;
                   position: static; box-shadow: 0 20px 44px rgba(0,0,0,.22) }
  .wk-is .wk-stage { padding-bottom: 58px }
  .wk-mx-books { width: 92%; align-self: center; margin: 40px auto 0 auto; transform: rotate(-3deg);
                 filter: drop-shadow(0 18px 30px rgba(0,0,0,.4)) }
  .wk-mx .wk-stage, .wk-bk .wk-stage { padding-bottom: 56px }
  .wk-bk-kids { width: 84%; align-self: center; margin: 40px auto 0 auto }
}

@media (max-width: 900px) {
  .wk-intro { padding: 52px var(--gutter) 40px var(--gutter) }
  .wk-intro h1 { font-size: 30px; letter-spacing: -.9px }
  .wk-intro p { font-size: 17px; line-height: 1.45 }
  .wk-stage { padding-top: 56px }
  .wk-in h2 { font-size: 30px; letter-spacing: -.9px; line-height: 1.06 }
  .wk-in p { font-size: 17px }
  .wk-in h2 br { display: none }
  .wk-sf .wk-n { font-size: 14px; letter-spacing: .18em }
  .wk-cone { width: 160px; height: 59px }
  .wk-bif .wk-mk { height: 48px }
  .wk-is .wk-mk { height: 72px }
  .wk-mx .wk-mk, .wk-bk .wk-mk { height: 80px }
  .wk-sf-photo, .wk-bif-photo { height: 240px }
}