/*
 * Well of Grace. Recreates the look of the Drupal site (theme "front" plus
 * files/css/site.css): the well photograph fixed behind the page, the site
 * name glowing over it, and a white card with a frosted border scrolling up
 * over both. Colours, faces and sizes are carried over; line length is capped,
 * body text is a shade darker for legibility, and the photographs are
 * feathered into the card instead of framed.
 */

@font-face {
    font-family: SansationBold;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/SansationBold.woff) format("woff");
}

@font-face {
    font-family: SansationRegular;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/SansationRegular.woff) format("woff");
}

:root {
    --teal: #2b7a7e;
    --teal-dark: #044d51;
    --quote: #108f85;
    --sub: #6cccc7;
    --text: #6b5d5d;
    --frame: rgba(255, 255, 255, 0.5);
}

* { box-sizing: border-box; }

html {
    /* 16px on phones, growing to 20px at 1200px wide, as before. */
    font: clamp(16px, calc(13px + 0.75vw), 20px)/1.45 "Open Sans", Arial, Helvetica, sans-serif;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    color: var(--text);
    letter-spacing: -0.4px;
    background: #1d0f08;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* A fixed layer rather than background-attachment: fixed, which iOS ignores. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: url(../img/well.jpg) center top / cover no-repeat;
}

/* Header: the site name, fixed over the photograph. */

.site-header {
    position: fixed;
    top: 20vh;
    left: 0;
    width: 60%;
    text-align: center;
}

.site-title {
    color: rgba(252, 252, 221, 0.7);
    font: 400 clamp(3rem, 11vw, 5rem)/1 Verdana, Arial, Helvetica, sans-serif;
    letter-spacing: -0.09em;
    text-decoration: none;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.3), 0 0 15px rgba(255, 255, 255, 0.3), 0 0 20px rgba(255, 255, 255, 0.3);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    left: -9999px;
}

.skip-link:focus {
    left: 1rem;
    top: 1rem;
    z-index: 10;
    padding: 0.5rem 1rem;
    background: #fff;
    color: var(--teal);
}

/* The card. */

.card {
    position: relative;
    max-width: 1000px;
    margin: 45vh auto 300px;
    width: 90%;
    border: 10px solid var(--frame);
    border-radius: 3px;
    background: #fff;
    background-clip: padding-box;
}

.card__inner {
    display: flow-root;
    padding: 1.5rem 5% 0;
}

.site-footer {
    padding-bottom: 2rem;
    text-align: center;
}

/* Type. */

h1, h2 {
    color: var(--teal);
    font-family: SansationBold, Verdana, sans-serif;
    font-weight: 700;
}

h1 {
    margin: 0;
    font-size: 2.1rem;
    line-height: 1;
    letter-spacing: -0.11rem;
}

h2 {
    clear: both;
    margin: 2.5rem 0 1rem;
    font-size: 1.75rem;
    line-height: 1.1;
    letter-spacing: -0.08rem;
    text-align: center;
}

.page-head {
    margin: 0.5rem 0 2rem;
    text-align: center;
}

.page-head__sub {
    margin: 0.25rem 0 0;
    color: var(--teal);
    font: 700 1.4rem/1.1 SansationBold, Verdana, sans-serif;
    letter-spacing: 0;
}

p {
    margin: 0 0 15px;
}

em { font-style: italic; }
strong { font-weight: 600; }

a { color: var(--teal); }
a:hover { color: var(--teal-dark); }

.small {
    font-size: 0.75rem;
    margin: 0.5rem 0 0;
}

.center { text-align: center; }

/*
 * Photographs. Each one is feathered into the card like a pool of water, and
 * text wraps around its soft round edge, so they read as part of the page
 * rather than pictures pasted onto it.
 */

img {
    max-width: 100%;
    height: auto;
}

.pool {
    display: block;
    width: 38%;
    max-width: 340px;
    -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
    shape-outside: circle(42%) border-box;
    shape-margin: 0.5rem;
}

.pool--oval {
    shape-outside: ellipse(42% 42%) border-box;
}

.pool--right {
    float: right;
    margin: -1rem -1rem 0.5rem 0.5rem;
}

.pool--left {
    float: left;
    margin: -1rem 0.5rem 0.5rem -1rem;
}

/* The well, looking up to daylight, sits over "a well of water springing up". */
.pool--center {
    width: 60%;
    max-width: 300px;
    margin: 3rem auto -1rem;
}

/* Scripture. */

.quote {
    clear: both;
    margin: 2rem 15% 1rem;
    color: var(--quote);
    font-family: Garamond, Georgia, serif;
    font-size: 1.2em;
    line-height: 1.15;
    letter-spacing: 0;
    text-align: center;
}

.quote blockquote,
.quote p {
    margin: 0;
}

/* Call to action and bottom nav. */

.cta {
    clear: both;
    margin: 2.5rem 0 1rem;
    text-align: center;
}

.button {
    display: inline-block;
    padding: 0.6rem 1.6rem;
    border-radius: 2rem;
    background: var(--teal);
    color: #fff;
    font: 700 1.1rem/1.2 SansationBold, Verdana, sans-serif;
    letter-spacing: 0;
    text-decoration: none;
}

.button:hover,
.button:focus-visible {
    background: var(--teal-dark);
    color: #fff;
}

.nav {
    margin: 1.5rem 0;
}

.nav a {
    display: inline-block;
    padding: 0 5%;
    color: var(--teal);
    font-size: 1.52em;
    text-decoration: none;
}

.nav a:hover {
    color: var(--teal-dark);
    text-decoration: underline;
}

/* Phones. */

@media (max-width: 700px) {
    .quote {
        margin-left: 5%;
        margin-right: 5%;
    }
}

@media (max-width: 520px) {
    .site-header {
        top: 15vh;
        width: 100%;
    }

    .card {
        width: 98%;
        margin-top: 30vh;
        border-width: 5px;
    }

    .pool--right,
    .pool--left {
        float: none;
        width: 65%;
        margin: -1rem auto 0;
    }

    .pool--oval {
        width: 50%;
    }
}