/*
 * The shell: one width container, a header that stays with you, a footer.
 *
 * Nothing here knows a colour. Everything references a token.
 */
/*
 * A warm wash across the page, and paper grain over it.
 *
 * Plain white reads as an empty document rather than as a surface. Two very
 * soft fields of the accent colours give the light somewhere to come from.
 *
 * They live on the body with a fixed attachment, so they are sized to the
 * window and have no element edges: put on the opening screen instead, the
 * tint stopped dead at that section's boundary and drew a visible rectangle
 * across the page.
 *
 * Built with colour-mix from the palette, so there is no new colour anywhere
 * and the whole thing follows if the accents ever change. The bands and panels
 * have their own solid surfaces and simply cover it.
 */
body {
  background-color: var(--aii-page);
  background-image:
    radial-gradient(52% 44% at 18% 12%,
      color-mix(in srgb, var(--aii-accent-from) 17%, transparent) 0%, transparent 72%),
    radial-gradient(46% 40% at 84% 22%,
      color-mix(in srgb, var(--aii-accent-to) 13%, transparent) 0%, transparent 70%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 140% 140%, 130% 130%;
  animation: aii-wash 44s ease-in-out infinite;
  color: var(--aii-ink);
  font-family: var(--aii-font-ui);
  font-size: var(--aii-text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/*
 * Slow, and never returning by the road it came. Positions that go there and
 * back read as a loop; three unequal stages do not.
 */
@keyframes aii-wash {
  0%   { background-position: 0% 0%, 100% 0%; }
  33%  { background-position: 38% 22%, 58% 14%; }
  66%  { background-position: 12% 8%, 88% 32%; }
  100% { background-position: 0% 0%, 100% 0%; }
}

/*
 * Paper grain over the whole page.
 *
 * Plain white reads as an empty document rather than as a surface. A very fine
 * noise — four per cent of it — is the difference between the two, and the eye
 * never notices it directly.
 *
 * The noise is generated by the browser from an inline SVG filter: no image
 * file to keep, and no request to anywhere. It sits above everything and takes
 * no clicks, so it cannot get between a visitor and a button.
 */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.7;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='0.09'/></feComponentTransfer></filter><rect width='140' height='140' filter='url(%23g)'/></svg>");
  background-repeat: repeat;
}

h1, h2, .aii-display {
  font-family: var(--aii-font-display);
  font-weight: var(--aii-display-weight);
  letter-spacing: var(--aii-display-tracking);
  line-height: var(--aii-display-leading);
}

h3 {
  font-family: var(--aii-font-ui);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/*
 * GeneratePress boxes the whole document in a 1200px container and lays the
 * content area out as a flex row. Our sections were being centred inside that
 * box and then overflowing it, which put the entire page visibly off-centre.
 *
 * The parent's box is released and .aii-shell becomes the only thing deciding
 * width. That is also what lets the marquee band touch both edges of the
 * screen — nothing can run edge to edge inside a container that stops at 1200.
 */
.site.grid-container {
  max-width: none;
  width: 100%;
}

.site-content {
  display: block;
}

.aii-shell {
  width: min(100% - var(--aii-space-8), var(--aii-shell));
  margin-inline: auto;
}

/*
 * The header follows the reader down the page. On a site whose whole point is
 * "start typing", the way back to the field must never be a scroll away.
 *
 * The bar sticks and paints; the header inside it only holds the content to
 * the page width. Putting both on one element left the backdrop stopping at
 * 1240px with the marquee showing past it on both sides.
 */
.aii-headerbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--aii-page) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}

.aii-headerbar--scrolled {
  border-bottom-color: var(--aii-line);
}

/*
 * Three columns, and the outer two are equal.
 *
 * Spacing them apart instead put the navigation between a short brand and a
 * wide button, so its middle sat left of the page's middle — visibly out of
 * line with the headline underneath. Equal side columns centre the middle one
 * on the page whatever the sides happen to weigh.
 */
.aii-header {
  display: grid;
  /*
   * minmax(0, 1fr), not 1fr. A plain 1fr column refuses to shrink below its
   * own content, and the button on the right does not wrap — at 768 it took
   * more than its share and pushed the navigation 77px left of the page's
   * middle. Measured, not guessed.
   */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--aii-space-6);
  padding-block: var(--aii-space-4);
}

.aii-header > :last-child {
  justify-self: end;
}

.aii-header__brand {
  font-family: var(--aii-font-display);
  font-weight: var(--aii-display-weight);
  font-size: 1.5rem;
  letter-spacing: var(--aii-display-tracking);
  text-decoration: none;
  color: var(--aii-ink);
}

.aii-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--aii-space-6);
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--aii-text-small);
}

.aii-nav a {
  position: relative;
  color: var(--aii-ink-soft);
  text-decoration: none;
  transition: color 160ms ease;
}

/*
 * The underline grows from the left rather than appearing. It costs nothing
 * and it is the difference between a link that responds and a link that
 * changes colour.
 */
.aii-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.aii-nav a:hover,
.aii-nav a:focus-visible {
  color: var(--aii-ink);
}

.aii-nav a:hover::after,
.aii-nav a:focus-visible::after {
  transform: scaleX(1);
}

.aii-nav--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--aii-space-2);
}

.aii-nav--stacked a::after {
  display: none;
}

.aii-section {
  padding-block: var(--aii-space-24);
}

/* The cream band. Used sparingly — its whole value is being the exception. */
.aii-band {
  background: var(--aii-band);
}

/*
 * The footer.
 *
 * No band behind it. The page already ends here; a second surface underneath
 * only cut the page into one more stripe, which is what the cream was doing on
 * the questions section before it came off. A hairline is enough to say "this
 * part is different", and it costs no height.
 *
 * It was 715 pixels tall and nearly all of that was empty. The three columns
 * were not laying out at all: `repeat(auto-fit, ...)` beside a fixed first
 * track collapses to a single column, so everything stacked in a strip down
 * the left. Named tracks now, so what is written is what is drawn.
 */
.aii-footer {
  background: var(--aii-page);
  border-top: 1px solid var(--aii-line);
  padding-top: var(--aii-space-12);
  padding-bottom: var(--aii-space-6);
  color: var(--aii-ink-soft);
  font-size: var(--aii-text-small);
}

.aii-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: var(--aii-space-6) var(--aii-space-8);
  align-items: start;
}

.aii-footer__name {
  font-family: var(--aii-font-display);
  font-size: var(--aii-text-h3);
  color: var(--aii-ink);
  margin: 0 0 var(--aii-space-2);
}

.aii-footer__line {
  margin: 0;
  max-width: 30ch;
}

.aii-footer__heading {
  font-size: var(--aii-text-tiny);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aii-ink);
  margin: 0 0 var(--aii-space-3);
}

.aii-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--aii-space-2);
}

.aii-footer__list a {
  color: inherit;
  text-decoration: none;
}

.aii-footer__list a:hover,
.aii-footer__list a:focus-visible {
  color: var(--aii-accent-to);
  text-decoration: underline;
}

/*
 * The company's identity, on one line. Drawn only when there is something in
 * it — the template omits the whole row while every field is empty, so this
 * rule never paints a line under nothing.
 */
.aii-footer__company {
  display: flex;
  flex-wrap: wrap;
  gap: var(--aii-space-2) var(--aii-space-6);
  margin-top: var(--aii-space-8);
  padding-top: var(--aii-space-4);
  border-top: 1px solid var(--aii-line);
  font-size: var(--aii-text-tiny);
}

.aii-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--aii-space-2) var(--aii-space-6);
  margin-top: var(--aii-space-6);
  padding-top: var(--aii-space-4);
  border-top: 1px solid var(--aii-line);
  font-size: var(--aii-text-tiny);
}

.aii-footer__base p {
  margin: 0;
}

.aii-footer__made span {
  color: var(--aii-ink);
}

@media (max-width: 860px) {
  .aii-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aii-footer__brand {
    grid-column: 1 / -1;
  }
}

/*
 * Two columns are kept all the way down to 375 rather than collapsing to one.
 * The lists are five short links; stacking them made the footer 750px tall on
 * a phone, which is a screen and a half of nothing but links. Measured, not
 * guessed: 375 shows no overflow with two.
 */

/*
 * Desktop is the priority for this audience, so the phone rules only keep the
 * page usable rather than trying to be its own design. The four-width
 * measurement still covers 375 — usable is a promise, not a preference.
 */
/*
 * Below this the three of them will not sit on one line without the sides
 * squeezing the middle off-centre, so brand and button share a line and the
 * navigation takes its own underneath. 860 rather than 700 because that is
 * where the measurement showed it going wrong, not where it looked tight.
 */
@media (max-width: 860px) {
  /* Too narrow for three columns: brand and button on one line, the
     navigation on its own underneath. */
  .aii-header {
    grid-template-columns: 1fr auto;
    gap: var(--aii-space-3);
  }

  .aii-header nav {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .aii-header > :last-child {
    grid-column: 2;
    grid-row: 1;
  }

  .aii-section {
    padding-block: var(--aii-space-12);
  }
}

/*
 * The warm wash is on every page, and this is the second decision about it.
 *
 * On 17 August it was cut back to the front page alone: seen from the top of
 * /styles/, where it is strongest, the owner read it as the cream band that had
 * just been removed, and two things that resemble each other is one thing too
 * many.
 *
 * Later the same day she found the working screens plainly white and asked for
 * the colour back — the change had been made in the morning and her browser had
 * been serving the stylesheet from before it until the asset versions were
 * fixed that evening. So the override is gone rather than narrowed: the pages
 * carry the same surface as the front page, which is what was asked for.
 *
 * If the strong corner ever reads as a band again, the dial is the two
 * percentages in the body rule above — not a rule that removes the wash from
 * some pages, which is what produced two different-looking sites.
 */