/* korriwan.com: the ground every page stands on: the reset, the body, the column the words keep to, and
   the shell that holds a clearing with a footer bar across its foot. */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { height: 100%; }
  body {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font: 400 17px/1.47 var(--text);
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
  }
  h1, h2, p, ul { margin: 0; }
  ul { padding: 0; list-style: none; }
  a { color: inherit; }
  button { font: inherit; color: inherit; }
  ::selection { background: color-mix(in srgb, var(--aisha) 34%, transparent); }
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .9s; }
  .wrap {
    width: 100%;
    max-width: calc(var(--column) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  /* the page is the clearing with the footer bar across its foot. The clearing's sky
     and land run on below it (by --under), so the bar has something to frost. */
  .page {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
  }
}