/* The frame every page of the site stands in: the white mat over the field, the grain
   that runs across it, the block of the iso, and the face the three of them are set in.
   Nothing here lays a page out — that is `base.css`, which only the pages with a footer
   need. A page takes this one on its own when it brings its own shell. */

/* Shared by every page: the white field, the grain and the footer. */

@font-face {
  font-family: "Portrait";
  src: url("assets/fonts/Portrait-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* The statement is the only thing set in the bold, and it is the first thing on the
   page: without the file the browser fakes the weight off the regular. */
@font-face {
  font-family: "Portrait";
  src: url("assets/fonts/Portrait-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* The mat frames the page: a white border over the marmol field. The grain runs over
   it, so the border is not a flat edge. */
.mat {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border: var(--mat) solid var(--white);
}

/* The annual letter lays the grain twice: once on the paper, under everything standing
   on it, and once over the lot. On the field the two read as one grain of twice the
   bite; the type only ever has the one over it. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: var(--grain-bite);
  background-color: var(--grain-ink);
  -webkit-mask-image: var(--grain-mask);
  mask-image: var(--grain-mask);
  will-change: transform;
}

/* The block of the iso, 32 square: the letter hangs it over its index, the home stands
   it in the corner. */
.mark {
  display: block;
  width: 32px;
  height: 32px;
}

.grain--under { z-index: 1; }
.mark__block { fill: var(--grafite); transition: fill 180ms ease; }
.mark__facet { fill: var(--marmol); fill-opacity: 0.4; }

/* The row under it: the legal line, the two accounts, the other letter and the address.
   One row on a wide screen, stacked on a narrow one. */

.footer__links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: var(--small);
  line-height: var(--small-leading);
}

.footer__item { margin: 0; white-space: nowrap; }

.footer__links a {
  color: inherit;
  text-decoration: none;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.footer__links a:hover { text-decoration-line: underline; }
.footer__mail a { text-decoration-line: underline; }

.arrow { display: inline-block; }

/* Stacked, a dotted rule between items gives the list the height a row does not need.
   The 16 rides on the link rather than on the row, so the whole band answers the thumb
   and not just the two words in it. The copyright is no link, so it carries its own. */
@media (max-width: 899px) {
  .footer__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .footer__item + .footer__item { border-top: 1px dotted var(--nuvola); }

  .footer__links a {
    display: block;
    padding: var(--mat) 0;
  }

  .footer__item:first-child { padding-bottom: var(--mat); }
}