/* The site footer (Calvin, 4 Nov: "footer -- let's go playhead"): Wall 1 · Playhead from footer/wall/, with the site map
   under it. Built from the board's own sheets, unchanged, in this order. footer.js runs the wall and Back to top.
   Its buttons are the site's (buttons.css: the Key for Email us, the Line for See more work). Link after tokens.css,
   type.css and buttons.css. */

/* ======== the frame: footer/ft.css ======== */
/* The footer frame (AD board, 4 Nov): <footer class="ft"> holds one CTA (.cta1 ... .cta10, each its own file) and the
   site map (.smap, smap.css). Calvin: "need the CTA section and then site map kinda piece (I think we can steal the
   layout we used on pilogic and valarian)", then "more worried about the CTA portion of it. spin up 10 options".
   Reads the page's tokens and type (tokens.css, type.css). Link after them.

   BUTTONS: .ft-btn is a copy of the homepage's .feat__btn (56 px, mono caps, inset edge), so the footer works on pages
   that don't carry the homepage's <style>. An AD is redrawing the button system (4 Nov): at port, swap .ft-btn for its
   class and drop these rules. .ft-btn--lime is the hi-vis fill, used only where lime is a direction's one thing. */

/* overflow-x: nothing in the footer can push the page sideways. z-index 6: on a case study the footer slides over the
   fixed rail (case-study.css .rail, z-index 5, in the left margin from 1360 px), under the menu (60) and the dock (30) */
.ft { position: relative; z-index: 6; background: var(--ground); color: var(--ink); overflow-x: clip; }
.ft *, .ft *::before, .ft *::after { box-sizing: border-box; }
.ft .ft-in { max-width: 1240px; margin: 0 auto; padding-inline: 16px; box-sizing: content-box; }   /* the homepage's column: 1240 inside a max(16px, 6vw) gutter */
@media (min-width: 600px) { .ft .ft-in { padding-inline: max(16px, 6vw); } }

.ft-acts { display: flex; flex-wrap: wrap; gap: 14px; }
.ft-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 13em; height: 56px; padding: 0 26px; border-radius: 10px;
          box-shadow: inset 0 0 0 1px var(--edge, #3A3A3A); color: var(--ink); font: 400 12.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
          text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: box-shadow .2s ease, background-color .2s ease; }
.ft-btn--fill { background: var(--asphalt, #171717); }
.ft-btn:hover { box-shadow: inset 0 0 0 1px var(--gravel, #8C8C8C); }
.ft-btn--lime { background: var(--lime); color: var(--on-lime, #000); box-shadow: none; }
.ft-btn--lime:hover { background: color-mix(in srgb, var(--lime) 84%, var(--white)); box-shadow: none; }
@media (max-width: 400px) { .ft-acts > .ft-btn { min-width: 0; flex: 1 1 0; padding: 0 14px; } }   /* a row of two at 390, nothing spills */

/* the paper pill tag (the homepage's .feat__tag) */
.ft-tag { display: inline-block; margin: 0; padding: 10px 16px 9px; border-radius: 999px; background: var(--paper); color: var(--black);
          font: 400 12px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }

/* focus: lime is hi-vis (skin.css) */
.ft a:focus-visible, .ft button:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

/* the copy-email chip (menu.js, menu.css) hangs 16 px under any [data-copy]: nothing here clips it */
.ft [data-copy] { overflow: visible; }

.ft .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ======== the site map: footer/smap.css ======== */
/* The site map: one version, under every CTA option. The Valarian and PiLogic footer row, measured from their pages
   (valarian/site-v2 shell.css .cta__foot, pilogic/site index.html .footrow) and rebuilt in Trash's system:
   - their row: a run of boxed cells, four link columns at 1fr and one wide 1.7fr cell, 14 px apart, set 14 to 22 px
     from the window's edges (wider than the content column, a base plate under the CTA); here 16 px, Trash's phone
     gutter, at every width;
   - each cell: a mono caps label, then the links in the body face; the wide cell carries the fine print at its foot
     (theirs: tagline and copyright, a badge or a toggle);
   - Trash's skin: the Growth cards' ground (#0A0A0A, one step up from black) inside a 1 px hairline, 14 px corners,
     Geist for links, Geist Mono for labels; links hover to white with the menu's scramble (sparks.js).
   Columns: Pages · Case studies (two cells wide, two columns of five) · Connect · the wide cell (Email + fine print).
   Two across under 960 px (Pages beside Connect), as both references go to two columns.
   No mark here: the docked capsule carries it at the top of the window the whole time you're down here. */

.smap { padding: 0 16px 16px; }
.smap__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.7fr); gap: 14px; max-width: 1760px; margin: 0 auto; padding: 0; list-style: none; }
.smap__cell { position: relative; min-width: 0; min-height: 212px; padding: 22px 24px 24px; border-radius: 14px; background: #0A0A0A; box-shadow: inset 0 0 0 1px var(--hairline, #1D1D1D); }
.smap__cell--cases { grid-column: span 2; }
.smap__h { margin: 0 0 16px; font: 400 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gravel); }
.smap__list { list-style: none; margin: 0; padding: 0; }
.smap__list--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); grid-auto-flow: column; column-gap: 24px; }
.smap__list li { min-width: 0; }
.smap__a { display: inline-flex; align-items: flex-start; max-width: 100%; padding: 4px 0; color: color-mix(in srgb, var(--ink) 83%, transparent);
           font: 400 clamp(15px, 1.12vw, 16.5px)/1.45 var(--font-body); letter-spacing: -.01em; text-decoration: none; white-space: nowrap;
           -webkit-tap-highlight-color: transparent; transition: color .2s ease; }
.smap__a:hover, .smap__a:focus-visible { color: var(--ink-hi); }
.smap__a[aria-current="page"] { color: var(--ink-hi); }
.smap__go { flex: none; margin: 2px 0 0 6px; font: 400 11px/1 var(--font-mono); color: inherit; }   /* fades with its link, no nudge (the quiet tier, buttons.css) */

/* the wide cell: the address, then the fine print at the foot */
.smap__cell--mail { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.smap__mail { align-self: flex-start; max-width: 100%; color: var(--ink); font: 400 clamp(18px, 1.55vw, 22px)/1.3 var(--font-body); letter-spacing: -.015em;
              text-decoration: none; overflow-wrap: anywhere; -webkit-tap-highlight-color: transparent; }
.smap__fine { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin: 0;
              font: 400 11px/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gravel); }
.smap__top { color: inherit; text-decoration: none; transition: color .2s ease; }
.smap__top:hover, .smap__top:focus-visible { color: var(--ink-hi); }

@media (max-width: 960px) {
  .smap__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; }
  .smap__cell--cases, .smap__cell--mail { grid-column: 1 / -1; }
  .smap__cell { min-height: 0; }
}
@media (max-width: 600px) {
  .smap__grid { gap: 10px; }
  .smap__cell { padding: 18px 18px 20px; }
  .smap__list--2 { column-gap: 16px; }
  .smap__cell--mail { gap: 40px; }
}
@media (prefers-reduced-motion: reduce) { .smap * { transition-duration: 0s !important; } }

/* ======== the wall: footer/wall/wall.css ======== */
/* Footer · Wall, round 2 (AD board, 4 Nov). Calvin: "for the footer, I quite like wall. can we explore 3 different
   versions of this, thoughts 1) it should be a slow, steady scroll rather than whole wall switching at once 2) think we
   could take inspiration from a timeline (in davinci or premiere) or a classic film strip. replace "let's make the next
   one" with don't be boring. CTA = email us. secondary CTA = see more work".
   Shared by the three versions (.wl1 Playhead, .wl2 Strips, .wl3 Tracks; each has its own file) and run by wall.js:
   - the WINDOW (.wl-clip) is the column, clipped at its edges: the work never leaves the page margins (phones too);
   - the RUN (.wl-run) holds two identical copies of the edit (.wl-copy) and moves one copy's width, linear and forever,
     so the loop has no seam; wall.js sets its speed from the track's height, so it reads as slow on every screen;
   - PIECES (.wl-piece) are the case studies' own stills at their own shapes, at one height, never cropped, not links,
     no ground behind them (#161616 shows only until a still loads);
   - the RULER and PLAYHEAD are an edit page's UI (Resolve's, Premiere's): ticks every second, timecode every five, a
     fixed playhead the edit runs under, its timecode running at 24 fps. UI only: nothing here draws film or celluloid.
   Reduced motion: nothing moves; the window becomes a strip you can scroll by hand, each piece once. */

.wl { --pps: 28; padding: clamp(40px, 7vh, 80px) 0 clamp(72px, 12vh, 128px); }
.wl-stage { position: relative; }
.wl-clip { position: relative; overflow: hidden; }
.wl-run { display: flex; width: max-content; will-change: transform; }
.wl-copy { flex: none; display: flex; flex-direction: column; }
.wl-row { display: flex; align-items: flex-start; }
.wl-piece { flex: none; position: relative; margin: 0 var(--gap, 6px) 0 0; }
.wl-img { position: relative; display: block; height: var(--h); aspect-ratio: var(--ar); overflow: hidden; border-radius: var(--r, 12px); background: #161616; }
.wl-img img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.wl-gap { flex: none; width: calc(var(--h) * var(--gw, 1)); }   /* an empty stretch of track: a gap in the edit */
.wl-name { display: block; width: 0; min-width: 100%; margin-top: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
           font: 400 10.5px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gravel); }

/* the ruler: a tick every second, a taller one and its timecode every five (wall.js writes the timecodes) */
.wl-ruler { position: relative; flex: none; height: 24px;
            background-image: linear-gradient(to right, var(--gravel) 1px, transparent 1px), linear-gradient(to right, var(--edge) 1px, transparent 1px);
            background-size: calc(var(--pps) * 5px) 11px, calc(var(--pps) * 1px) 6px; background-repeat: repeat-x; background-position: 0 100%, 0 100%; }
.wl-ruler b { position: absolute; top: 2px; padding-left: 5px; font: 400 10px/1 var(--font-mono); letter-spacing: .04em; color: var(--gravel); white-space: nowrap; }

/* the playhead: fixed, the edit runs under it; its head carries the running timecode */
.wl-ph { position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--ph, 33%); width: 1px; background: var(--paper); pointer-events: none; }
.wl-tc { font: 400 11px/1 var(--font-mono); letter-spacing: .06em; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* the line and the actions */
.wl-h { margin: 0; font: 500 clamp(40px, 5.4vw, 78px)/1 var(--font-display); letter-spacing: -.045em; color: var(--ink); }
.wl-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; padding-bottom: 10px; }

@media (prefers-reduced-motion: reduce) {
  .wl-clip { overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .wl-clip::-webkit-scrollbar { display: none; }
  .wl-copy + .wl-copy { display: none; }
  .wl-run { will-change: auto; }
}

/* ======== Playhead: footer/wall/w1.css ======== */
/* Wall 1 · Playhead. One track of the work at full height (280 px at 1440, the stills as big as the homepage's feature
   media) runs slowly left under a fixed playhead, the ruler moving with it, the playhead's head reading the timecode
   at 24 fps: the footer is the edit, playing. Each still carries its client's name under it, as a clip does. Then the
   line and the actions under the work. About 28 px a second on desktop, the same pace for the stills' size on phones. */
.wl1 { --h: clamp(150px, 19.4vw, 280px); --gap: 6px; --r: 12px; --ph: 34%; }
.wl1 .wl-stage { padding-top: 34px; }
.wl1 .wl-ruler { margin-bottom: 10px; }
.wl1 .wl-ph { top: 4px; bottom: 21px; }   /* from its head to the foot of the stills; the names hang below it */
.wl1 .wl-ph__head { position: absolute; left: 50%; top: 0; transform: translateX(-50%); padding: 7px 10px 6px; border-radius: 999px; background: var(--paper); color: var(--black); }
.wl1 .wl-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 40px; margin-top: clamp(40px, 6vh, 72px); }
@media (max-width: 600px) { .wl1 { --gap: 4px; --r: 10px; --ph: 30%; } .wl1 .wl-name { font-size: 9.5px; } }