/* =========================================================================
   Studio3D — site footer.

   Loaded last, after main.css and every surface sheet, and built only on
   tokens system.css owns. main.css no longer redeclares any of them: its
   :root block is a compatibility shim that maps legacy names onto the new
   values, so --r-card, --r-pill, --r-chip, --pad and the three durations all
   resolve to the design-system figures here.

   Rules this file holds itself to, in the order they get broken:

     radii        --r-chip -10- and --r-pill -999-. Nothing else needs one:
                  every band is full-bleed, so nothing has a corner.
     borders      var(--hairline), or var(--hairline-2) on hover. One value.
     durations    --t-quick only. Nothing here opens, and the one thing that
                  animates is scrolled, not timed — scroll motion is exempt.
     weights      400 / 500 / 700.
     transform    none, on any state. The hairline or the fill changes instead.
     colour       no literal anywhere — every value is a token or a
                  color-mix() of one.
     accent       exactly ONE occurrence in the whole footer: the filled CTA.
                  Plus the focus ring inherited from system.css. A link list
                  is not an action and a tally is not a live reading.
     gradients    one, on the wordmark: single-hue luminance, which is the only
                  kind the system permits.

   Structure, top to bottom — four regions, four different weights:

     .s3-ft-close   surface-1, full-bleed. Display type + the page's last
                    way in. This is what leads.
     .s3-ft-body    identity + the licence positions, then four link columns.
     .s3-ft-bottom  the copyright line, on its own.
     .s3-ft-sig     the wordmark at display scale, drawn on arrival and
                    clipped by the page edge. This is the ending.

   WHAT WAS DELETED, AND WHY THE SHEET IS SHORTER THAN THE MARKUP SUGGESTS

   A .s3-ft-rail region used to sit between the closing band and the columns:
   four mono readouts — 249px of footer at 1440, and 688px at 390 once they
   stacked into a single column — every figure in it a restatement of something
   the band directly above the footer had already said in a full sentence.
   Nothing took its place. The closing band is the statement, the columns are
   the utility, the wordmark is the signature, and the wordmark needed the room
   far more than a fourth grey box did.
   ========================================================================= */

.s3-ft {
  background: var(--bg);
  color: var(--muted);
  border-top: 1px solid var(--hairline);
  overflow-wrap: break-word;
}

.s3-ft a {
  color: var(--muted);
  transition: color var(--t-quick) var(--ease);
}

.s3-ft a:hover {
  color: var(--text);
}

/* ===================================================== 1 · closing band ==
   The one region of the footer that is allowed to be loud. Raised onto
   surface-1 and cut top and bottom by full-bleed hairlines, so it reads as a
   band of the page rather than as footer chrome. */

.s3-ft-close {
  background: var(--surface-1);
  border-bottom: 1px solid var(--hairline);
}

.s3-ft-close-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(30px, 3.6vw, 76px);
  padding-block: clamp(52px, 6vw, 104px);
}

.s3-ft-close-copy {
  min-width: 0;
}

/* Two sentences, two blocks, two weights of attention: the first states the
   product, the second states the alternative. Above 32px the system requires
   negative tracking and leading at or below 1.06 — both are set here. */
.s3-ft-title {
  margin: 0;
  font-size: clamp(32px, 4vw, 64px);
  line-height: 1.03;
  letter-spacing: -.038em;
  font-weight: 500;
}

.s3-ft-title-a,
.s3-ft-title-b {
  display: block;
}

.s3-ft-title-a {
  color: var(--text);
}

.s3-ft-title-b {
  color: var(--muted);
}

.s3-ft-lede {
  margin: clamp(16px, 1.6vw, 24px) 0 0;
  max-width: 54ch;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--muted);
}

.s3-ft-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

/* The page's single filled action. It is never on screen with a band CTA —
   every one of those sits above the footer — so it does not compete with the
   one-filled-CTA-per-screen rule, it inherits it.

   Built from scratch rather than on .s3-btn, which main.css gives a
   translateY(-1px) and a coloured drop shadow on hover. */
.s3-ft-cta,
.s3-ft-cta-2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding-inline: 26px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
  transition: background var(--t-quick) var(--ease),
              border-color var(--t-quick) var(--ease),
              color var(--t-quick) var(--ease);
}

/* Type selector in `.s3-ft a` above outranks a bare class, so these carry the
   ancestor to win the colour back. Without it the filled CTA renders --muted
   ink on the lime fill: 1.03:1. */
.s3-ft a.s3-ft-cta {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}

.s3-ft a.s3-ft-cta:hover {
  background: color-mix(in srgb, var(--accent) 86%, var(--text));
  color: var(--accent-ink);
}

.s3-ft a.s3-ft-cta .s3-icon {
  color: var(--accent-ink);
}

.s3-ft a.s3-ft-cta-2 {
  background: var(--glass-1);
  border-color: var(--hairline);
  color: var(--text);
  font-weight: 500;
}

.s3-ft a.s3-ft-cta-2:hover {
  background: var(--glass-2);
  border-color: var(--hairline-2);
  color: var(--text);
}

/* A live count riding inside a secondary action. Mono and muted, not lime:
   the accent in this band belongs to the filled control. */
.s3-ft-cta-n {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding-inline: 8px;
  border-radius: var(--r-chip);
  background: var(--glass-2);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

/* ====================================================== 2 · link region ==
   Identity and the two licence positions on the left; four intent columns on
   the right. The asymmetry is what stops this reading as five equal columns
   of nothing. */

.s3-ft-body {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 2.7fr);
  gap: clamp(34px, 4vw, 84px);
  padding-block: clamp(46px, 4.8vw, 78px);
}

.s3-ft-id {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

/* The mark alone: the header names the brand once and the wordmark below
   names it again at display scale. A third wordmark here would be noise. */
.s3-ft-mark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-right: 14px;
  color: var(--text);
}

.s3-ft-mark:hover {
  color: var(--text);
}

.s3-ft-what {
  margin: 14px 0 0;
  max-width: 30ch;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
}

.s3-ft-policy {
  display: grid;
  gap: 16px;
  margin: clamp(24px, 2.4vw, 34px) 0 0;
}

.s3-ft-policy-row {
  display: grid;
  gap: 5px;
}

/* Grotesk, not mono uppercase: these labels do not sit beside a number, and
   that treatment is reserved for the ones that do. */
.s3-ft-policy dt {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text);
}

.s3-ft-policy dd {
  margin: 0;
  max-width: 40ch;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--muted);
}

/* --------------------------------------------------------- the columns -- */

.s3-ft-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px 24px;
}

.s3-ft-col {
  min-width: 0;
}

/* Heads lead their lists. The previous footer set them fainter than the links
   below them, which inverted the hierarchy it was trying to create. */
.s3-ft-h {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--text);
}

.s3-ft-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.s3-ft-list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-block: 7px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

.s3-ft-label {
  min-width: 0;
}

/* Live per-category counts. Muted, not lime — a tally the link is describing
   is data, not an instrument reading. */
.s3-ft-n {
  flex: none;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  color: var(--faint);
}

/* ======================================================== 3 · bottom bar ==
   One line. The "last added" stamp that used to sit opposite it is gone: the
   newest model is already one click away in the Shop column, and a dated
   product title is the sort of thing that reads as stale the week nobody
   uploads anything. */

.s3-ft-bottom {
  padding-block: 18px 22px;
  border-top: 1px solid var(--hairline);
}

.s3-ft-copy {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--faint);
}

/* ========================================================== 4 · wordmark ==
   Scale, and the closing moment of every page on the site.

   It is SVG, not a heading, because the move is an OUTLINE and only SVG gives
   real stroke control over type. footer.php's script un-draws the outline and
   lays it back down against scroll position as the footer arrives, then brings
   the fill in behind it over the last third — so everything declared below is
   the FINISHED state. With JavaScript off, with GSAP missing, or under
   prefers-reduced-motion the mark is simply already there, at full contrast.

   The stroke used to be var(--hairline-2) — white at 17% on near-black, one
   device pixel wide. That is technically drawn and practically invisible, which
   is why the mark read as an empty band twice in review. It is now a
   color-mix() of --text, which is the same tokenised white and roughly four
   times the contrast. The hairline rule governs borders; this is ink on display
   type, and it is the last thing the visitor sees.

   No accent. The footer's one accent is the closing action, and a wordmark this
   size in lime would beat it from across the room. */

/* The band's own height is the animation's entire scroll budget: the mark ends
   on the last pixel of the document, so the only scroll that exists while it is
   visible is the band rising into view. The top padding is therefore doing two
   jobs — giving the wordmark air after the copyright rule, and buying the draw
   another ~90px of runway on a desktop viewport. */
/* The mark used to be cut off by the document edge — the descender of the y ran
   out of page. It now sits complete, with air under it, so the page ends on a
   margin rather than on a severed glyph. The svg still clips its own overflow,
   so no horizontal or vertical scroll can come from the type. */
.s3-ft-sig {
  overflow: hidden;
  padding-top: clamp(34px, 5vw, 96px);
  padding-bottom: clamp(30px, 3.6vw, 72px);
}

.s3-ft-sig-svg {
  display: block;
  width: 100%;
  max-width: 1760px;
  height: auto;
  margin-inline: auto;
}

.s3-ft-sig-t {
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: -.055em;
  fill-opacity: 1;
  stroke: color-mix(in srgb, var(--text) 64%, transparent);
  stroke-width: 1;
  stroke-linejoin: round;
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
  paint-order: fill stroke;
  user-select: none;
}

/* The fill: a single-hue luminance gradient, the only kind the system allows,
   so the mark falls away as it leaves the page instead of stopping flat.
   Declared on the stops rather than in the markup so it stays tokenised.

   Deliberately weaker than the stroke, and deliberately far stronger than the
   11% it was: at 21% under the outline the word reads as a solid mass of ink
   caught by a bright edge, which is what an outlined wordmark is. Any higher
   and the fill swallows the outline it is supposed to sit behind. */
.s3-ft-sig-s0 {
  stop-color: var(--text);
  stop-opacity: .21;
}

.s3-ft-sig-s1 {
  stop-color: var(--text);
  stop-opacity: .05;
}

/* ============================================================= responsive ==
   Widest-first, because the cascade is decided on source order. */

/* The identity block keeps its own track until the four link columns would
   drop below the width of "Environments 3" on one line. */
@media (max-width: 1080px) {
  .s3-ft-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .s3-ft-what {
    max-width: 52ch;
  }

  .s3-ft-policy {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 40px;
  }
}

/* The closing band stacks: the actions go under the copy rather than beside
   it, and stay left so they line up with the heading they answer. */
@media (max-width: 900px) {
  .s3-ft-close-in {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(26px, 4vw, 40px);
  }

  .s3-ft-acts {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .s3-ft-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 22px;
  }

  .s3-ft-policy {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

/* 390px: two link columns, full-width actions, everything flush to the gutter.
   Rows are the only thing that stacks; nothing shrinks below a 44px tap
   target. */
@media (max-width: 620px) {
  .s3-ft-close-in {
    padding-block: 44px 46px;
  }

  .s3-ft-lede {
    font-size: 16px;
  }

  .s3-ft-acts {
    align-self: stretch;
    gap: 10px;
  }

  .s3-ft-cta,
  .s3-ft-cta-2 {
    flex: 1 1 100%;
    min-height: 54px;
  }

  .s3-ft-body {
    padding-block: 38px 34px;
  }

  .s3-ft-nav {
    gap: 22px 20px;
  }

  /* Every footer link becomes a 44px target. At 14px/1.4 the text box is
     ~20px, so the padding does the rest. */
  .s3-ft-list a {
    min-height: 44px;
    align-items: center;
    padding-block: 11px;
  }

  .s3-ft-bottom {
    padding-block: 18px 24px;
  }
}

/* The link region stays two-up all the way down to 320px: measured there, the
   longest row ("Environments" plus its count) still clears the column, and a
   label that ever does outgrow it wraps onto a second line rather than pushing
   the page sideways — every track is minmax(0, …), every label carries
   min-width: 0, and .s3-ft-sig clips its own overflow on both axes. */

/* On cart and checkout the page already owns a lime action, so the footer's
   closing CTA steps down to glass rather than competing with the purchase. */
.s3-ft-acts.is-quiet .s3-ft-cta {
  background: var(--glass-2);
  color: var(--text);
  border: 1px solid var(--hairline);
  box-shadow: var(--glass-edge);
}

.s3-ft-acts.is-quiet .s3-ft-cta:hover {
  background: var(--glass-3);
  border-color: var(--hairline-2);
}