/* Base / reset
   -------------------------------------------------------------------------- */
* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 70px; /* keep section tops clear of the fixed nav */
}

body {
    font-family: var(--f);
    color: var(--ink);
    font-weight: 400;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
    line-height: 1.06;
    margin: 0;
    font-weight: 600;
}

p {
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

img,
svg {
    display: block;
    max-width: 100%;
}

/* Full-bleed wrapper: the frame itself spans the viewport (it carries the
   site-wide gradient); .pad is what keeps the content column at 1280px. */
#frame {
    position: relative;
    width: 100%;
    margin: var(--h-nav) 0 0;
    background: radial-gradient(2100px 2100px at calc(-400px + var(--gx)) 2180px, var(--orange), transparent 46%),
        radial-gradient(2100px 2100px at calc(2020px + var(--gx)) 3330px, var(--orange), transparent 46%),
        radial-gradient(2100px 2100px at calc(150px + var(--gx)) 4880px, var(--orange), transparent 46%),
        radial-gradient(2100px 2100px at calc(2010px + var(--gx)) 6800px, var(--orange), transparent 46%),
        radial-gradient(2100px 2100px at calc(40px + var(--gx)) 8900px, var(--orange), transparent 46%),
        var(--ink);
}

#stage {
    color: #fff;
}

.pad {
    padding-inline: var(--gutter);
}

.center {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}