/* /work/, the work index (docs/17-work-index.md). The mockup of the template's own stylesheet, loaded after
   src/styles/index.css on /work/ only. It reuses the homepage's section head (.work-head) and closing row (.work-more),
   and gives the projects a featured block of their own, never the homepage's Work card (the user, 29 September 2026).
   Every value is the site's unless a comment gives the reason. */

/* ---------- the page ---------- */
/* the section opens with the page head, so it clears the nav as the hero does, and ends on --gap-h like every section */
.wk{--wk-top:calc(env(safe-area-inset-top,0px) + 108px);padding-top:var(--wk-top);padding-bottom:var(--gap-h)}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* without JavaScript the page still reads whole (docs/14, The carry, Without JavaScript, and The dot, point 7).
   These are the fixes docs/14 proposes for every page, shown here on the mockup only. The full stops are printed, the
   loader never covers the page, and the wordmark sits in the nav's slot with its full stop, at the slot's measured
   place with the nav at rest. The loader also stays away once it has played in this visit (loader-seen) */
html:not(.js) .dot-anchor::before{transform:scale(1)}
html:not(.js) .loader,.loader-seen .loader{display:none}

/* ---------- the head ---------- */
/* the title rises with the page's intro, never with the scroll, so it is held here, as .hero .line-in is (hero.css) */
.js:not(.no-libs):not(.rm) .wk-head .line-in{transform:translateY(112%)}
.js:not(.no-libs):not(.rm) .wk-head .work-intro{opacity:0;transform:translateY(14px)}
.wk-title:focus{outline:none}
/* the orb, where the dot shows in full before it lands on the title's full stop, as it does in the homepage's hero.
   Only a place for the dot (src/client/dot.js), drawn by WebGL. The homepage orb's size, in the head's open space */
/* the head's colour zone meets the featured block's. The head to block step sits inside the head as its padding, so
   above the block some zone is always under the middle of the screen, and coming back up from the paper block turns
   the page ink again. With a margin between them nothing did, and the title stayed on paper. The orb keeps its place,
   its top less its share of the step */
.wk-head{position:relative;--step:clamp(70px,11vh,130px);padding-bottom:var(--step)}
/* Keep featured projects below the 55% theme trigger and retain the heading's position as the opening grows. */
.js .wk-head{min-height:calc(62svh - var(--wk-top));align-content:start}
.wk-orb{position:absolute;left:72%;top:calc(40% - var(--step) * .4);width:clamp(190px,30vmin,420px);aspect-ratio:1/1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none}

/* ---------- the featured block, Instrument's Stack, shorter (docs/17, The featured block) ---------- */
/* the user's direction (29 and 30 September 2026), Instrument's work page, "copy the design", 3 or 4 projects instead
   of 6, and not the homepage's own Work card. Values from research/work-index/instrument-stack (Instrument measured) */
/* rows of two on the 12 columns, Instrument's, a wide project (8 columns, 16:9) and a narrow one (4 columns, 16:10),
   tops aligned, the narrow one shorter with paper under it, wide first in odd rows and narrow first in even ones. A last
   card alone takes its whole row, its words beside its picture. The pictures' corners are the site's card radius, the
   service cards' (18px at 1440, 24px at 1920, Instrument's 24px) */
.wk-fs{--rf:clamp(14px,1.25vw,24px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:clamp(70px,11vh,130px);margin:0;padding:0;list-style:none}
.wk-f{min-width:0;align-self:start}
.wk-f[data-slot=wl]{grid-column:1/span 8}
.wk-f[data-slot=nr]{grid-column:9/span 4}
.wk-f[data-slot=nl]{grid-column:1/span 4}
.wk-f[data-slot=wr]{grid-column:5/span 8}
/* the preview's three set, before the first layout (the head script's f3), so the card it leaves out never loads. It
   stays in the page's stylesheet, ./preview.css comes only after the first layout */
.f3 .wk .wk-f[data-slot3=""]{display:none}
.wk-f[data-slot^=b]{grid-column:1/-1}
/* the whole card is one link. It reads without JavaScript, and only then waits hidden for the text's fade up */
.wk-f-a{display:block;color:inherit;text-decoration:none;border-radius:var(--rf)}
.wk-f-a:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.js:not(.no-libs):not(.rm) .wk .wk-f:not(.in) .wk-f-a{opacity:0;transform:translateY(14px)}
/* the picture, the art alone. Its ground follows the theme, a 1px ring keeps the ink covers' edge */
.wk-f-m{position:relative;aspect-ratio:16/9;border-radius:var(--rf);overflow:hidden;background:var(--graphite)}
body[data-bg="paper"] .wk-f-m{background:var(--mist)}
.wk-f-m:not(.wk-f-m-rich) picture{display:contents}
.wk-f-m:not(.wk-f-m-rich) img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.wk-f-m::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line);pointer-events:none}
.wk-f[data-slot^=n] .wk-f-m{aspect-ratio:16/10}
/* the words, one gutter under the picture. The name and the summary take the link's colour, so they follow body's
   0.8s theme change. The tags' own colour carries the same transition */
.wk-f-w{margin-top:24px}
/* Instrument's sizes at 1440, the name 19px on 24, the sentence 23px on 28 at weight 500, one line in a wide card */
.wk-f-n{margin:0;font-size:clamp(17px,1.32vw,20px);line-height:1.26;font-weight:500}
.wk-f-o{margin:8px 0 0;font-size:clamp(20px,1.6vw,24px);line-height:1.22;font-weight:500;letter-spacing:-.005em;text-wrap:pretty}
.wk-f-t{display:flex;flex-wrap:wrap;column-gap:16px;row-gap:4px;margin:16px 0 0;padding:0;list-style:none;font-size:13.5px;line-height:1.3;font-weight:500;color:var(--fg-2);transition:color .8s var(--e-out)}
/* the side-by-side last row, words on the picture's bottom edge */
.wk-f[data-slot^=b] .wk-f-a{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
/* the words level with the picture's top, so the left column carries on from the row above and the paper falls to the
   bottom, where it joins the gap before the list */
.wk-f[data-slot=br] .wk-f-m{grid-column:5/span 8;grid-row:1}
.wk-f[data-slot=br] .wk-f-w{grid-column:1/span 4;grid-row:1;align-self:start;margin-top:0}
.wk-f[data-slot=bl] .wk-f-m{grid-column:1/span 8;grid-row:1}
.wk-f[data-slot=bl] .wk-f-w{grid-column:9/span 4;grid-row:1;align-self:start;margin-top:0}
/* Tab scrolls a card only until its own box fits, so a margin keeps its whole focus ring on screen */
.wk-f-a,.wk-row,.wk-more-btn{scroll-margin-block:24px}
/* the bent bottom edge (Ragged Edge), ./cards-gl.js */
.wk-f.is-gl .wk-f-m{background:none}
.wk-f.is-gl .wk-f-m::after{box-shadow:none}
.wk-f.is-gl .wk-f-m img{visibility:hidden}
.wk-native .wk-f.is-gl .wk-f-m{background:var(--graphite)}
.wk-native body[data-bg="paper"] .wk-f.is-gl .wk-f-m{background:var(--mist)}
.wk-native .wk-f.is-gl .wk-f-m::after{box-shadow:inset 0 0 0 1px var(--line)}
.wk-native .wk-f.is-gl .wk-f-m img{visibility:visible}

/* the outline tags of the case sheet, drawn in the theme's colours so they follow data-bg (the services panel's) */
.wk-tag{padding:7px 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font-size:13.5px;line-height:1.3;font-weight:500;color:var(--fg-2);transition:color .8s var(--e-out),box-shadow .8s var(--e-out)}

/* ---------- clients without a case page (Locomotive's rows, Impact's label rows) ---------- */
/* at least a screen, so Live and landed and More than websites stay a screen apart even with only a few rows, and the
   dot lands on both (docs/14, The dot on every page, point 5) */
.wk-list{margin-top:clamp(80px,12vh,140px);min-height:100svh}
/* the rows and the band open with a section head as the page does (.work-head), a label row, then the headline in
   columns 1 to 8. Their headlines are stations of the dot, and rise with the scroll as the homepage's do */
.wk-rows-wrap{position:relative;margin-top:clamp(70px,11vh,130px)}
/* Locomotive's list. One row per website on the 12 columns, the name, the industry and the place at one size (Lead).
   The rules are 2px and clear, each row overlapping the last by 2px, so a hover rule never doubles */
.wk-rows{margin:0;padding:0;list-style:none}
.wk-r{margin-top:-2px}
.wk-row{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:baseline;padding:4px 0 5px;border-block:2px solid transparent;color:inherit;text-decoration:none;font-family:var(--display);font-weight:500;font-size:clamp(20px,1.75vw,27px);line-height:1.25;letter-spacing:-.022em}
.wk-row>span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.wk-row .scr{display:inline-block}
.wk-r-n{grid-column:1/span 6}
.wk-r-ind{grid-column:7/span 3}
.wk-r-place{grid-column:10/span 3}
/* on hover or focus, a 2px rule under the row, at once as Locomotive's, and the place gives way to where it leads */
.wk-row:hover,.wk-row:focus-visible{border-bottom-color:var(--fg);z-index:1}
.wk-row:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.wk-r-go{display:none}
.wk-row:hover .wk-r-city,.wk-row:focus-visible .wk-r-city{display:none}
.wk-row:hover .wk-r-go,.wk-row:focus-visible .wk-r-go{display:inline}
/* the rows past the first ten wait for View more, only with JavaScript, so without it the whole list reads */
.js .wk-rows:not(.is-open) .wk-r-x{display:none}
/* the row's picture, 210 x 132 as Locomotive's, at the end of the name column, centred on the row's bottom rule, with
   a 4px outline in the page's colour that cuts the rule. Drawn in a canvas that sharpens from coarse blocks */
.wk-pv{position:absolute;left:0;top:0;z-index:2;width:210px;height:132px;outline:4px solid var(--bg);pointer-events:none;opacity:0;transform:translateY(-50%)}
.wk-pv.on{opacity:1}
.wk-pv canvas{display:block;width:100%;height:100%;image-rendering:pixelated}
/* View more, the outline button of the case sheet, in the theme's colours */
.wk-more-btn{display:inline-flex;align-items:center;gap:8px;margin-top:clamp(28px,5vh,56px);padding:12px 20px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font-size:15.5px;font-weight:600;color:var(--fg);transition:background-color .35s var(--e-out),color .35s var(--e-out),box-shadow .35s var(--e-out)}
.wk-more-btn:hover{background:var(--fg);color:var(--bg);box-shadow:inset 0 0 0 1px var(--fg)}
.wk-more-btn:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.wk-more-n{font-variant-numeric:tabular-nums;opacity:.62}
.wk-more{margin-top:clamp(80px,12vh,140px)}

/* ---------- the band to the services (Wolff Olins' layout, the page head's pattern) ---------- */
/* at least a screen, so "More than websites." stays a screen above Contact's headline on a tall portrait tablet too
   (0.88 of a screen at 1024 x 1366 without it), and the dot lands on both (docs/14, The dot on every page, point 5) */
.wk-band{padding-block:var(--gap-h);min-height:100svh;scroll-margin-top:96px}
.wk-band-r{grid-column:9/span 4;align-self:end}
.wk-band-r .work-intro{margin:0 0 24px}
/* Eight landscape motion references. The name, description and pills
   follow the footage in normal flow. Every video uses the same 16:9 frame. Without
   the shared-panel enhancement every service keeps its own complete inline study, including touch and no-JS views. */
.wk-svc-w{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start;margin-top:clamp(70px,11vh,130px)}
.wk-svc{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr);gap:32px;min-width:0;margin:0;padding:0;list-style:none}
.wk-s{display:flex;flex-direction:column;gap:12px;min-width:0}
.wk-s-a{display:grid;grid-template-columns:3.2ch minmax(0,1fr);column-gap:14px;align-items:baseline;min-width:0;padding:24px;border-radius:20px;background:color-mix(in srgb,var(--ink) 58%,transparent);box-shadow:inset 0 0 0 1px var(--line);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);color:var(--fg);text-decoration:none}
.wk-s-a:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.wk-s-i{font-size:15px;line-height:1.3;font-weight:500;color:var(--fg-3);font-variant-numeric:tabular-nums;transition:color .35s cubic-bezier(.4,0,.2,1)}
.wk-s-n{display:block;min-width:0;font-family:var(--display);font-weight:800;font-size:clamp(28px,2.9vw,46px);line-height:1;letter-spacing:-.04em;transition:color .35s cubic-bezier(.4,0,.2,1)}
/* the place of the name's full stop, the size of the cards' drawn one. It prints red in the panel */
.wk-s-at{display:inline-block;width:.2em;height:.2em;margin-left:.04em;border-radius:50%;vertical-align:baseline}
.wk-s-b{display:block;grid-column:2;min-width:0;margin-top:10px;max-width:40ch;color:var(--fg-2)}
.wk-s-d{display:block}
.wk-s-t{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.wk-s-art{display:block;min-width:0;width:100%;overflow:hidden;border-radius:16px}
.wk-s-panel{display:none}
/* The runtime enables this split above 760px. Inactive service names retain the original large-text contrast;
   description and pills move together to the glass block below the footage. */
.pnl-on .wk-svc{grid-column:1/span 6;gap:0}
.pnl-on .wk-s-a{padding:6px 0 8px;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.pnl-on .wk-s-b{display:none}
.pnl-on .wk-s-art{display:none}
.pnl-on .wk-s:not(.on) .wk-s-n{color:var(--fg-3)}
.pnl-on .wk-s.on .wk-s-i{color:var(--fg)}
.pnl-on .wk-s-panel{position:sticky;top:104px;display:flex;grid-column:7/span 6;flex-direction:column;align-self:start;justify-content:flex-start;gap:12px;min-width:0;min-height:0;height:auto;color:var(--fg);overflow:visible}
.wk-sp-v{position:static;inset:auto;flex:none;min-width:0;width:100%;overflow:hidden;border-radius:16px}
.wk-sp-art[hidden]{display:none}
.wk-sp-b{display:none;position:static;min-width:0;padding:clamp(24px,2.6vw,36px);border-radius:20px;background:color-mix(in srgb,var(--ink) 58%,transparent);box-shadow:inset 0 0 0 1px var(--line);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5)}
.wk-sp-n{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(28px,2.6vw,42px);line-height:.95;letter-spacing:-.04em}
.wk-sp-n .wk-s-at{background:var(--red)}
.wk-sp-d{margin:12px 0 0;max-width:34ch;font-size:19px;line-height:1.45;color:var(--fg-2)}
.wk-sp-t{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.wk-sp-replay{display:inline-flex;align-items:center;align-self:flex-start;min-height:44px;padding:0;border:0;background:none;color:var(--fg-2);font:500 15px/1.3 var(--text);text-decoration:underline;text-underline-offset:4px}
.wk-sp-replay:hover{color:var(--fg)}
.wk-sp-replay:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.wk-sp-replay[hidden]{display:none}

/* ---------- the nav's current page: aria-current only, with no visible mark (the user, 29 September 2026) ---------- */

/* ---------- the nav's wordmark inverts what passes under it (DixonBaxi, approved 30 September 2026) ---------- */


/* ---------- the page's note, which answers a link whose page is not built yet (the preview tools' own rules are in
   ./preview.css, which only the dev server loads) ---------- */
.pv-toast{position:fixed;left:50%;bottom:24px;z-index:91;transform:translateX(-50%);padding:10px 16px;border-radius:999px;background:#000;color:#fff;font:500 14px/1.3 var(--text);opacity:0;pointer-events:none;transition:opacity .3s}
.pv-toast.on{opacity:1}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .wk-orb{left:82%;top:calc(66% - var(--step) * .66);width:clamp(120px,20vmin,200px)}
  .wk-r-n{grid-column:1/span 5}
  .wk-r-ind{grid-column:6/span 3}
  .wk-r-place{grid-column:9/span 4}
  .wk-band-r{grid-column:1/span 9;margin-top:clamp(28px,5vh,56px)}

  /* two of 6 columns a row, every picture 16:9, as Instrument's 1024 to 1439 */
  .wk-f[data-slot]{grid-column:span 6}
  .wk-f[data-slot^=n] .wk-f-m{aspect-ratio:16/9}
  .wk-f[data-slot^=b]{grid-column:1/-1}
  /* the side-by-side row takes 4 and 8, so on a tall tablet "Live and landed." stays a screen below the title (6 and 6
     gave 0.967 of a screen at 1024 x 1366) */
  .wk-f[data-slot=br] .wk-f-m{grid-column:5/span 8}
  .wk-f[data-slot=br] .wk-f-w{grid-column:1/span 4}
  .wk-f[data-slot=bl] .wk-f-m{grid-column:1/span 8}
  .wk-f[data-slot=bl] .wk-f-w{grid-column:9/span 4}
}
@media (max-width:760px){
  .wk{--wk-top:calc(env(safe-area-inset-top,0px) + 90px)}
  .wk-orb{left:86%;top:calc(38% - var(--step) * .38);width:min(24vw,96px)}
  .wk-fs{row-gap:44px}
  .wk-f[data-slot]{grid-column:1/-1}
  .wk-f[data-slot^=b] .wk-f-a{display:block}
  .wk-f-w,.wk-f[data-slot^=b] .wk-f-w{margin-top:16px}
  /* on a phone, Locomotive stacks the name over the industry. The place goes, and the row keeps at least 44px */
  .wk-r{margin-top:0}
  .wk-row{grid-template-columns:1fr auto;column-gap:16px;align-items:center;padding:10px 0 12px;min-height:44px;border-width:1px 0 0;border-top-color:var(--line)}
  .wk-r-n{grid-column:1;grid-row:1}
  .wk-r-ind{grid-column:1;grid-row:2;font-family:var(--text);font-weight:400;font-size:15px;letter-spacing:0;color:var(--fg-2)}
  .wk-r-place{grid-column:2;grid-row:1/span 2}
  .wk-r-city{display:none}
  .wk-r-go{display:inline;font-size:0}
  .wk-r-go span{font-size:17px}
  .wk-svc,.pnl-on .wk-svc{grid-column:1/-1;gap:28px}
  .wk-s-a,.pnl-on .wk-s-a{padding:20px 16px;border-radius:20px;background:color-mix(in srgb,var(--ink) 58%,transparent);box-shadow:inset 0 0 0 1px var(--line);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5)}
  .wk-s-b,.pnl-on .wk-s-b{display:block;font-size:15px;line-height:1.45}
  .wk-s-art,.pnl-on .wk-s-art{display:block}
  .pnl-on .wk-s-panel{display:none}
  .pnl-on .wk-s:not(.on) .wk-s-n{color:var(--fg)}
}
@media (hover:none) and (min-width:761px){
  .wk-r-go{display:inline;font-size:0}
  .wk-r-go span{font-size:clamp(20px,1.75vw,27px);margin-left:.35em}
}
@media (max-height:560px){
  .wk{--wk-top:calc(env(safe-area-inset-top,0px) + 70px)}
}
@media print{
  .wk-f.is-gl .wk-f-m{background:var(--graphite)}
  .wk-f.is-gl .wk-f-m::after{box-shadow:inset 0 0 0 1px var(--line)}
  .wk-f.is-gl .wk-f-m img{visibility:visible}
}
@media (forced-colors:active){
  .wk-tag,.wk-f-m::after{box-shadow:none;border:1px solid CanvasText}
}