/* All headings share one pair and one off-centre radial field per visit. */
:root {
  --ink-near: #884f4e;
  --ink-far: #a36844;
  --ink-field: 82% 110% at 30% 24%;
}
:root[data-awe-edition="1"] {
  --ink-near: #774b68;
  --ink-far: #93565a;
  --ink-field: 96% 94% at 69% 42%;
}
:root[data-awe-edition="2"] {
  --ink-near: #465d70;
  --ink-far: #426f68;
  --ink-field: 88% 115% at 38% 74%;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink-near: #f3c0b8;
    --ink-far: #f4ddb5;
  }
  :root[data-awe-edition="1"] {
    --ink-near: #bbd8eb;
    --ink-far: #d5c8ed;
  }
  :root[data-awe-edition="2"] {
    --ink-near: #afdadd;
    --ink-far: #c0d0f1;
  }
}

@media screen and (prefers-color-scheme: dark) and (forced-colors: none) {
  .evidence {
    --panel-ink: #f2f3f0;
    --panel-muted: #bec8c0;
    --panel-hairline: #647569;
    background: radial-gradient(105% 90% at 18% 20%, #253b2b 25%, #233b3c 85%);
  }
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  @media screen and (forced-colors: none) {
    /* :root lifts this above page rules such as .d138{color:...} on the homepage. */
    :root main :is(h1,h2,h3,h4,h5,h6) {
      width: fit-content;
      max-width: 100%;
      background-color: var(--ink-near);
      background-image: radial-gradient(ellipse var(--ink-field), var(--ink-near) 25%, var(--ink-far) 85%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      /* The gradient only paints inside the box. Tight tracking and line-height let
         final letters and descenders overhang it, so pad the painted area and cancel
         the padding with matching negative margins so layout doesn't move. */
      padding: 0 .25em .25em .1em;
      margin-right: -.25em;
      margin-bottom: -.25em;
      margin-left: -.1em;
      box-sizing: content-box;
    }
  }
}