/* MAGMA — base element defaults shared by every surface built on this system. */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font:var(--type-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* height:auto is the other half of max-width:100%, and it was missing. WordPress
   writes width and height attributes on every image it inserts, so an image wider
   than its column had its width capped and its height held at the attribute — the
   reproduction inside an Art of Payments story came out 656x646 against a true
   1578x996, squashed to 64% of its proper width. An image already narrower than
   its column is unaffected: auto is its natural height. */
img{display:block;max-width:100%;height:auto}
a{color:var(--magma-ink);text-decoration:none;transition:color var(--dur-fast) var(--ease-standard),text-decoration-color var(--dur-fast) var(--ease-standard)}
a:hover{color:var(--magma-flame-3);text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--magma-flame-3);text-underline-offset:5px}
a:active{color:var(--magma-flame-2)}
/* buttons, icon chips and plates own their states */
a[data-variant]:hover,a.magma-pressable:hover,a[data-magma]:hover{text-decoration:none;color:inherit}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
::selection{background:var(--magma-ink);color:var(--magma-white)}

/* Layout helper used by every page template */
.magma-container{width:100%;max-width:var(--layout-content);margin:0 auto;padding-inline:var(--layout-gutter)}
.magma-inset{width:100%;max-width:var(--layout-inset-col);margin:0 auto;padding-inline:var(--layout-gutter)}