/* Official information (Fable 3.10): a blind-embossed seal, cream on cream (shadow only, no ink, no SVG filter), ringed by
   the page's "Last updated" line; pressed once when first seen (page.js .is-in), and again on a click (page.js [data-seal]). */
.of-seal-wrap { position: relative; justify-self: center; z-index: 3; margin: calc(10 * var(--u)) calc(40 * var(--u)) calc(10 * var(--u)) 0; }
.of-seal { display: block; width: calc(190 * var(--u)); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 50% 50%, #F3EDE2 0 62%, #EFE8DB 63% 100%);
  box-shadow: inset 3px 3px 5px rgb(255 255 255 / .9), inset -4px -4px 7px rgb(110 88 60 / .2), 2px 3px 4px rgb(110 88 60 / .14), -1px -1px 2px rgb(255 255 255 / .8); }
.of-seal svg { width: 100%; height: 100%; overflow: visible; }
.of-seal__rim { fill: none; stroke: rgb(255 255 255 / .85); stroke-width: 1.6; filter: drop-shadow(1px 1px 0 rgb(110 88 60 / .22)); }
.of-seal__rim--in { stroke-width: 1.2; }
.of-seal__ring { font: 600 10.5px var(--read); letter-spacing: .2em; fill: #E8E0D1; paint-order: stroke; stroke: rgb(255 255 255 / .75); stroke-width: .6px;
  filter: drop-shadow(.8px .8px 0 rgb(110 88 60 / .3)) drop-shadow(-.6px -.6px 0 rgb(255 255 255 / .9)); }
.of-seal__leaf { fill: #EEE6D7; filter: drop-shadow(1.4px 1.6px 0 rgb(110 88 60 / .28)) drop-shadow(-1px -1px 0 rgb(255 255 255 / .95)); }
.of-seal__vein { fill: none; stroke: rgb(110 88 60 / .2); stroke-width: 1.2; stroke-linecap: round; }
.of-seal:focus-visible { outline: 2px solid var(--hd); outline-offset: 4px; }
/* the press: the relief sinks, then rises in held frames */
.js .of-seal-wrap:not(.is-in) .of-seal svg { opacity: 0; }
.of-seal-wrap.is-in .of-seal svg, .of-seal.is-pressing svg { animation: of-press .62s steps(5, end) both; }
@keyframes of-press { 0% { opacity: 0; transform: scale(1.04); } 40% { opacity: .6; transform: scale(.985); } 100% { opacity: 1; transform: none; } }
.of-note { right: calc(100% + 40px); top: 54%; }
.of-checks { margin: 0; }

@media (max-width: 1100px) {
  .of-seal-wrap { justify-self: start; }
}
@media (max-width: 760px) {
  .of-seal { width: 130px; }
  .of-seal-wrap { margin: 18px 0 0; }
  .of-note { right: auto; left: 150px; top: 30%; }
  /* no filters on phones (Fable 6.4): the relief is the button's own shadows */
  .of-seal__ring, .of-seal__leaf, .of-seal__rim { filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .of-seal-wrap.is-in .of-seal svg, .of-seal.is-pressing svg { animation: none; }
  .js .of-seal-wrap:not(.is-in) .of-seal svg { opacity: 1; }
}