/* Atmos Gallery — the site footer.

   One file because FOUR entry points draw this footer and only two of them share a stylesheet:
   privacy, terms and 404 load legal.css, while the app at / is Vite-bundled and loads
   src/styles/global.css. Duplicating a component of this size into both is how the two copies start
   disagreeing — the tokens at the top of legal.css are a deliberate subset copy of global.css's and
   are documented as such, but that is a handful of values, not sixty lines of layout. So the footer
   lives here and every page links it.

   It therefore cannot assume either stylesheet's variables. --on-surface, --on-surface-muted and
   --line-strong exist in both. --page-gutter and --track-flat do NOT: they are legal.css's, so both
   are written with the fallback the app needs, and the fallback is the same value legal.css defines
   rather than a second opinion about it.

   The footer from the design comp (footer-light-mode.pdf / footer-dark-mode.pdf, a 1728×418 frame).
   It closes privacy, terms and 404 — every page except the front page, which is the app itself and
   carries its own chrome.

   The wordmark is the brand SVG used as a MASK, exactly as .mark and .nf-mark already are: one asset,
   inked with --on-surface, so light and dark are one rule and no second file can drift from the first.
   It is atmos-gallery-wordmark-tight.svg rather than the -white one because a masked box only sits
   flush with the rules above and below it if the artwork's box IS its ink — see that file's own note.
   Being artwork rather than set type, it also needs no webfont and no fit-width pass: it is flush at
   every width by construction, which is the one thing fit-width.js cannot promise on the 404.

   Measured off the comp in its own 1728px frame, subpixel, from the rendered PDF:

     rule                                 y   22.3
     wordmark ascender top                    66.1    →  43.8 below the rule
     wordmark baseline                       276.0
     wordmark descender bottom               325.9    →  21.5 above the rule
     rule                                    347.4
     meta cap-height top                     382.3    →  34.9 below the rule
     meta baseline                           390.9    →  27.1 above the frame's bottom edge
     side inset                            x  24.0 left / 24.9 right
     meta type            12px uppercase, flat tracking (cap height measured 8.62 = 12 × NM's 0.715).
                          Set in sentence case rather than uppercase by request; it went to 10px for a
                          while and is back at the comp's 12px, also by request.
     wordmark ink width   1679 — the same width as the rules, i.e. optically flush with both ends

   One deliberate departure from those figures:

   · the side inset is --page-gutter, which now IS the comp's 24px. It sat at 22 for a while, and the
     note that used to be here defended the 2px gap on the grounds that matching the prose above
     mattered more than matching the comp — true, but it was an argument for changing the token, not
     for keeping three wrong figures to avoid a fourth. The token is 24 now, so the comp, the prose
     and this rule are the same line. See the grid block in global.css.
   · the rules are --line-strong, not the comp's ink. The comp draws them at ~100% ink in light and
     ~40% in dark — an asymmetry no single token expresses — while --line-strong is the hairline every
     other structural rule on these pages already uses (.legal-head, .legal-hero::after, h2::before).
     Colours were flagged as not final, so the system's line wins here. */
.site-foot{padding:0 var(--page-gutter, 24px)}

/* The rules ride the inner blocks, not .site-foot, so they stop at the gutter rather than running
   full bleed the way .legal-hero::after deliberately does. */
.site-foot__brand{
  border-top:1px solid var(--line-strong);
  padding:44px 0 22px;
}
/* line-height:0 so the anchor's own line box adds nothing under the mark — the same reason .nf-head a
   and .nf-type carry it. Without it the 22px below reads as ~40. text-decoration:none because this
   anchor's content is a masked graphic, not text: the UA underline is inherited and merely happens to
   have nothing to draw itself under today. */
.site-foot__brand a{display:block;line-height:0;text-decoration:none}
.site-foot__mark{
  display:block;width:100%;
  /* the tight asset's own box: its ink, and nothing else */
  aspect-ratio:876.43/135.6;
  background:var(--on-surface);
  -webkit-mask:url('/assets/atmos-gallery-wordmark-tight.svg') center/100% 100% no-repeat;
          mask:url('/assets/atmos-gallery-wordmark-tight.svg') center/100% 100% no-repeat;
}
/* Offset outward: an inset ring would be drawn across the letterforms themselves. */
.site-foot__brand a:focus-visible{outline:3px solid var(--on-surface);outline-offset:6px}

/* 1fr auto 1fr, not space-between. The two links belong on the PAGE's centre line — the comp puts
   them at 863.1 in an 1728 frame, which is dead centre — and space-between would instead centre them
   in whatever was left between two labels of unequal width (127px and 171px here), landing them 22px
   right of centre and moving them again the moment either label was edited. */
.site-foot__meta{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;
  border-top:1px solid var(--line-strong);
  padding:33px 0 26px;
  font-size:12px;line-height:1;
  letter-spacing:var(--track-flat, 0px);
  /* Stated, not inherited. On the legal pages body carries color:var(--on-surface) and this row picked
     it up for free; the app's body sets no colour at all, so the same markup there fell through to the
     UA default and rendered pure #fff on dark and #000 on light — close enough to look intentional and
     wrong in both. A shared component cannot borrow ink from whichever page happens to be hosting it. */
  color:var(--on-surface);
}
.site-foot__meta p{margin:0}
.site-foot__nav{display:flex;gap:16px;justify-content:center}
.site-foot__rights{justify-self:end}
/* Undecorated at rest, unlike the article's underlined prose links: at this size on a single line
   these read as chrome, and the hover is the affordance. */
/* 24px of target under 12px of ink. These links render on every legal route at every width, so
   unlike the rest of the app they are genuinely reached by touch. The extender is a pseudo-element
   rather than padding because padding here would move the three meta rows apart; -6px vertical
   takes a 12px line to 24. The inline gap between the two nav links is wider than the extenders,
   so they do not overlap. */
.site-foot__meta a{color:inherit;text-decoration:none;position:relative}
.site-foot__meta a::after{content:'';position:absolute;inset:-6px -4px}
.site-foot__meta a:hover{color:var(--on-surface-muted)}
.site-foot__meta a:focus-visible{outline:3px solid var(--on-surface);outline-offset:3px}

/* The one exception, and the reason is the shape of the link rather than a change of mind about the
   rule above. The two nav items ARE their link end to end, so the item's own presence is the
   affordance and no underline is needed. "kau.studio" is one word inside "A part of kau.studio", so
   with the rule above it would be a link nobody can see the edges of — indistinguishable from the
   three words next to it until a pointer happens to cross it, and invisible to anyone not using one.
   So it takes the underline the system already gives links in running text (.toc-article a,
   .legal-foot a), at the same offset and thickness. */
.site-foot__origin a{
  text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;
}


/* The footer's own threshold, and it is not 900px: what breaks here is the meta row, whose three
   labels need ~546px of type before the gutters are counted. Below 700px they are stacked into one
   left-aligned column instead of being crushed into three.

   The wordmark's own gaps come down with it. They are the comp's absolute figures, and the comp is
   1728px wide: 44px over a 259px-tall wordmark is 17% of its height, but 44px over the 51px wordmark
   a 375px phone gets is most of it. Discrete steps rather than a vw expression, because that is how
   the rest of this stylesheet changes with width. */
@media screen and (max-width:700px){
  .site-foot__brand{padding:24px 0 12px}
  .site-foot__meta{
    grid-template-columns:minmax(0,1fr);
    justify-items:start;row-gap:12px;
    padding:24px 0 24px;
  }
  .site-foot__nav{justify-content:flex-start;flex-wrap:wrap}
  .site-foot__rights{justify-self:start}