/* Still Waters website: wearestillwaters.co.uk
   One photo (the hill and the still pool), white text over the sky, and paper
   notes (an envelope for the email links). Fonts are the app's own, trimmed and
   served from here (no Google requests). */

@font-face {
    font-family: "Montserrat";
    src: url("/assets/fonts/montserrat.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
}
@font-face {
    font-family: "Merriweather";
    src: url("/assets/fonts/merriweather-light.woff2") format("woff2");
    font-weight: 300;
    font-display: swap;
}

:root {
    --ink: #171737;
    --body: #4a4f70;
    --muted: #7a7f99;
    --paper: #fbfaf6;
    --shade: rgba(6, 30, 58, .4);
    --sans: Montserrat, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    --serif: Merriweather, Georgia, "Times New Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
/* Safari on iPhone tints its status bar from the page's background colour, and its
   bottom toolbar from a fixed strip touching the bottom edge, so these are the
   photo's own colours at the very top (sky) and bottom (grass): the bars then
   read as part of the picture. */
html { background: #2a6a90; }
.edge-bottom { position: fixed; left: 0; right: 0; bottom: 0; height: 4px; background: #2f4934; z-index: 0; pointer-events: none; }
body {
    min-height: 100svh;
    font-family: var(--sans);
    color: #fff;
    position: relative;
    -webkit-font-smoothing: antialiased;
}
/* The photo, on a fixed layer that fills the whole screen, including behind the
   iPhone's status bar and Safari's toolbars (so no plain colour shows there),
   with a soft darkening at the top and bottom where the white text sits. */
body::before {
    content: "";
    position: fixed;
    z-index: -1;
    left: 0;
    right: 0;
    top: calc(-1 * env(safe-area-inset-top, 0px));
    height: calc(100lvh + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px));
    background:
        linear-gradient(180deg, rgba(8, 38, 72, .22) 0%, rgba(8, 38, 72, 0) 40%, rgba(8, 38, 72, 0) 60%, rgba(6, 30, 58, .5) 100%),
        url("/assets/hills.jpg") center 62% / cover no-repeat;
    pointer-events: none;
}
/* fine film grain (hides banding in the smooth sky) */
body::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    top: calc(-1 * env(safe-area-inset-top, 0px));
    height: calc(100lvh + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px));
    opacity: .07;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}
@media (max-width: 560px) { body::before { background-position: center, 60% 72%; } }

a { color: inherit; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.page {
    position: relative;
    z-index: 1;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: env(safe-area-inset-top) 20px 0;
}
.shadowed { text-shadow: 0 1px 2px var(--shade), 0 0 10px rgba(6, 30, 58, .22); }

/* ----- footer (every page) ----- */
.foot {
    padding: 0 0 calc(22px + env(safe-area-inset-bottom));
    text-align: center;
    font: 500 11px var(--sans);
    letter-spacing: .06em;
}
.foot a { text-decoration: none; }
.foot a:hover, .foot a:focus-visible { text-decoration: underline; }
.socials { display: flex; gap: 18px; justify-content: center; margin-bottom: 10px; font-size: 12px; }
.socials a { border-bottom: 1px solid rgba(255, 255, 255, .6); padding-bottom: 1px; }
.socials a:hover, .socials a:focus-visible { text-decoration: none; border-bottom-color: #fff; }

/* ----- home ----- */
.home-mid {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: -4vh;
}
.menu {
    position: relative;
    display: flex;
    margin-bottom: 26px;
    background: rgba(255, 255, 255, .26);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(8, 38, 72, .16);
}
/* the little pointer under the menu (sits below it, so nothing overlaps) */
.menu::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    margin-left: -8px;
    width: 16px;
    height: 8px;
    background: rgba(255, 255, 255, .26);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.menu a {
    padding: 12px 20px;
    font: 500 14px var(--sans);
    text-decoration: none;
    white-space: nowrap;
    border-radius: 15px;
}
.menu a + a { border-left: 1px solid rgba(255, 255, 255, .35); border-radius: 0; }
.menu a:last-child { border-radius: 0 15px 15px 0; }
.menu a:first-child { border-radius: 15px 0 0 15px; }
.menu a:only-child { border-radius: 15px; padding: 12px 28px; }
.menu a:hover, .menu a:focus-visible { background: rgba(255, 255, 255, .14); outline: none; }

.title {
    margin: 0;
    font: 700 58px/1 var(--sans);
    letter-spacing: -.02em;
    text-shadow: 0 1px 2px rgba(23, 23, 55, .22), 0 1px 12px rgba(23, 23, 55, .16);
}
.tagline {
    margin: 20px 0 0;
    max-width: 440px;
    font: italic 300 17px/1.7 var(--serif);
    text-wrap: balance;
}
@media (max-width: 560px) {
    .title { font-size: 40px; }
    .tagline { font-size: 15px; }
    .menu a { padding: 11px 14px; font-size: 13px; }
}

/* ----- paper notes (envelope and plain notes) ----- */
.paper {
    position: relative;
    background: linear-gradient(180deg, #fffefa 0%, var(--paper) 60%, #f2f0e7 100%);
    border-radius: 2px;
    color: var(--body);
    text-align: center;
    box-shadow: 0 0 0 .5px rgba(120, 110, 80, .18), 0 -2px 10px rgba(60, 48, 25, .10), 0 1px 2px rgba(60, 48, 25, .12);
}
/* paper grain */
.paper::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: .22;
    mix-blend-mode: multiply;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix values='0 0 0 0 .4  0 0 0 0 .35  0 0 0 0 .25  0 0 0 .55 0'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}
.paper > * { position: relative; }
.paper .from {
    display: block;
    font: 500 9px var(--sans);
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--muted);
    padding-bottom: 9px;
    border-bottom: 1px solid #e1ded2;
}
.paper h1, .paper h2 {
    margin: 22px 0 10px;
    font: 300 30px/1.1 var(--serif);
    color: var(--ink);
}
.paper p { margin: 0 auto 12px; max-width: 280px; font: 400 13px/1.65 var(--sans); }
.paper p.sign { font-style: italic; color: #3a3f5c; }
.paper p.small { font-size: 11.5px; color: var(--muted); }
.paper.note .button { margin-top: 18px; }
.paper a { color: #2f6fd0; }

/* forms on paper */
.paper form { display: flex; flex-direction: column; gap: 5px; max-width: 250px; margin: 4px auto 0; text-align: left; }
.paper label { margin-top: 4px; font: 500 9px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.paper input {
    width: 100%;
    height: 38px;
    padding: 0 11px;
    font: 400 16px var(--sans);
    color: var(--ink);
    background: #fff;
    border: 1px solid rgba(23, 23, 55, .15);
    border-radius: 6px;
}
.paper input:focus { outline: 2px solid #9dbbe4; outline-offset: 1px; border-color: #9dbbe4; }
.paper .hint { font: 400 10.5px var(--sans); color: var(--muted); }
.paper .hint:empty, .paper .error:empty { display: none; }
.paper .hint.ok { color: #3f7d55; }
.paper .error { margin-top: 2px; font: 500 11.5px var(--sans); color: #b3412b; text-align: center; }
.button {
    display: block;
    width: 100%;
    height: 44px;
    margin-top: 6px;
    padding: 0 18px;
    font: 500 14px/44px var(--sans);
    letter-spacing: .02em;
    color: #fff;
    text-align: center;
    text-decoration: none;
    background: #2b2b40;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: opacity .2s;
}
.button:active { opacity: .8; }
/* the smaller button inside the envelope's forms */
.paper form .button { align-self: center; width: auto; min-width: 150px; height: 36px; margin-top: 8px; font-size: 13px; line-height: 36px; }
.paper .button, .paper a.button { color: #fff; }
.button:disabled { opacity: .45; cursor: default; }

/* ----- the envelope -----
   The letter is sized by what's written on it and stands in the envelope with its
   blank lower part tucked into the pocket, so the words always end just above the
   envelope's edge (no empty paper, nothing hidden), whatever the note says. */
.stage {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 0 18px;
    --w: min(380px, 86vw);
    --tuck: calc(var(--w) * .5);   /* how much of the letter sits inside the pocket */
}
.envelope {
    position: relative;
    width: var(--w);
    display: flex;
    flex-direction: column;
    align-items: center;
    filter: drop-shadow(0 30px 36px rgba(8, 30, 60, .32)) drop-shadow(0 6px 8px rgba(8, 30, 60, .2)) drop-shadow(0 1px 1.5px rgba(8, 30, 60, .25));
}
.envelope .letter {
    width: 84%;
    /* --sink (set by site.js) slides the words down into the envelope */
    padding: 7% 7% calc(var(--tuck) + 16px - var(--sink, 0px));
    z-index: 1;
}
.envelope .body {
    position: relative;
    width: 100%;
    aspect-ratio: 380 / 250;
    margin-top: calc(var(--tuck) * -1);
}
.envelope svg { position: absolute; left: 0; top: -52%; width: 100%; height: 152%; overflow: visible; pointer-events: none; }
.envelope .back { z-index: 0; }
.envelope .front { z-index: 3; }
.envelope .grain { mix-blend-mode: multiply; }
@media (prefers-reduced-motion: no-preference) {
    .envelope .letter { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both .15s; }
    @keyframes rise { from { transform: translateY(60px); } to { transform: none; } }
}

.strip {
    width: min(640px, 88vw);
    text-align: center;
    padding: 16px 0 22px;
    border-top: 1px solid rgba(255, 255, 255, .75);
    font: 500 14px var(--sans);
    letter-spacing: .08em;
}
.strip a { text-decoration: none; }
@media (max-width: 560px) {
    .paper h1, .paper h2 { font-size: 26px; margin-top: 18px; }
    .paper p { font-size: 12px; line-height: 1.6; }
    .strip { font-size: 12px; padding: 14px 0 18px; }
}

/* ----- plain notes (download, login, privacy, terms, support, 404) ----- */
.note-stage { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; padding: 40px 0; }
.note { width: min(420px, 90vw); padding: 28px 30px 26px; transform: rotate(-.6deg); box-shadow: 0 0 0 .5px rgba(120, 110, 80, .18), 0 24px 40px rgba(8, 30, 60, .3), 0 3px 6px rgba(8, 30, 60, .18); }
.note .button { margin-top: 10px; }
.home-link { display: inline-block; margin-top: 14px; font: 500 12px var(--sans); color: var(--muted) !important; text-decoration: none; }
.home-link:hover { text-decoration: underline; }
.socials.on-paper { margin: 6px 0 2px; }
.socials.on-paper a { color: var(--ink); border-bottom-color: rgba(23, 23, 55, .3); }

/* back: a plain white chevron at the top left, as in the app */
.back-button {
    position: absolute;
    top: calc(env(safe-area-inset-top) + 10px);
    left: 8px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    filter: drop-shadow(0 1px 2px rgba(23, 23, 55, .4)) drop-shadow(0 2px 10px rgba(23, 23, 55, .3));
    transition: opacity .2s;
    z-index: 5;
}
.back-button:hover { opacity: .85; }
.back-button:active { opacity: .6; }
.back-button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 8px; }

/* the form notes are kept compact so they can sit low in the envelope */
.paper:has(form) h1, .paper:has(form) h2 { margin: 16px 0 8px; }
.paper:has(form) p { margin-bottom: 8px; }
.paper form { gap: 6px; }
.paper input::placeholder { color: rgba(23, 23, 55, .4); }
.paper .hint { margin: -2px 0 2px 2px; }
.paper form .button { margin-top: 6px; }
/* forms sit a little deeper too: the (narrow, centred) button dips into the
   envelope's V-shaped opening, while the wider boxes stay clear of the flaps */
.envelope .letter:has(form) { padding-bottom: calc(var(--tuck) - 22px); }
/* a little more room between the boxes and the button; the letter's padding
   shrinks by exactly what's added, so the paper stays where it is */
.paper form { gap: 10px; }
.paper form .button { margin-top: 12px; }
.paper form { margin-top: 12px; }  /* room above the first box (was 4px) */
.envelope .letter:has(#reset-form) { padding-bottom: calc(var(--tuck) - 22px - 26px); }   /* 3 gaps × 4px + 6px + 8px above */
.envelope .letter:has(#request-form) { padding-bottom: calc(var(--tuck) - 22px - 18px); } /* 1 gap × 4px + 6px + 8px above */
@media (hover: hover) and (pointer: fine) { .edge-bottom { display: none; } }  /* laptops and desktops have no toolbar over it */

/* ----- long documents (privacy, terms) ----- */
.doc-stage { align-items: flex-start; padding: 56px 0 40px; }
.document { width: min(680px, 92vw); padding: 34px 38px 32px; transform: none; text-align: left; }
.document .from { text-align: center; }
.document h1 { margin: 24px 0 2px; text-align: center; }
.document .meta { text-align: center; margin: 0 auto 22px; max-width: none; font-size: 11.5px; color: var(--muted); }
.document h2 { margin: 26px 0 8px; font: 600 12px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.document p, .document li { max-width: none; margin: 0 0 11px; font: 400 14px/1.7 var(--sans); }
.document p { text-align: left; }
.document ul { margin: 0 0 12px; padding-left: 20px; }
.document li { margin-bottom: 7px; }
.document strong { font-weight: 600; color: var(--ink); }
.document a { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 560px) { .document { padding: 26px 22px 24px; } .doc-stage { padding-top: 64px; } .document p, .document li { font-size: 13.5px; } }

.document .button { display: inline-block; width: auto; height: 40px; padding: 0 22px; margin: 4px 0 2px; font: 500 13px/40px var(--sans); text-decoration: none; }
.document .button:hover { opacity: .9; }
.document .small { font-size: 12px; color: var(--muted); }