/* ==========================================================================
   memo-memo pages stylesheet

   One stylesheet for every page, laid out like the app's
   (memo-memo/public/css/styles.css):

   1. Tokens       every size, colour and gap, desktop then mobile
   2. Base         reset, type defaults
   3. Layout       page shell, sticky footer, header, footer, container,
                   text layout (reading column and aside)
   4. Components   logo, avatar, buttons, fields, finger
   5. Patterns     page top, list of pages, page content, all pages,
                   join for updates

   Tokens, base, header, footer, buttons and fields are copied from the app,
   with the same names and values, so the two look alike. Copy changes across
   by hand: this site never links to the app's stylesheet, so a change there
   can't break these pages. Desktop values are measured from designs 16
   (index) and 17 (a page), drawn at 2x a 1280px page; the mobile block
   overrides the same names.
   ========================================================================== */


/* 1. Tokens
   ========================================================================== */

:root {
    color-scheme: only light;

    /* Colour */
    --c-yellow: #FFF200;
    --c-black: #000000;
    --c-white: #FFFFFF;
    --c-placeholder: #8C8C8C;      /* placeholder text */
    --c-box: #E3E3E3;              /* the Join for updates box (designs 16, 17) */
    --c-code: #F3F3F3;             /* code backgrounds (the app's --c-band) */

    /* Type */
    --font: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --fw-regular: 500;
    --fw-bold: 600;
    --lh-tight: 1.15;
    --lh-body: 1.45;

    --fs-h1: 37px;           /* page titles */
    --fs-h2: 28px;           /* titles in the list of pages */
    --fs-h3: 25px;           /* headings in a page, Join for updates */
    --fs-h4: 21px;           /* smaller headings in a page */
    --fs-standfirst: 24px;   /* the description under a page's title */
    --fs-body: 20px;
    --fs-aside: 18px;        /* the list of all pages beside a page */
    --fs-label: 28px;        /* form labels */
    --fs-field: 25px;        /* text inside fields */
    --fs-btn-lg: 28px;
    --fs-btn: 20px;
    --fs-small: 16px;        /* footer, Our promise */
    --fs-caption: 12px;      /* image credits */

    /* Lines and corners */
    --stroke: 3px;           /* border on every field and button */
    --stroke-footer: 4px;    /* line above the footer */
    --rule-thin: 1px;
    --radius-pill: 999px;
    --radius-box: 20px;
    --radius-small: 6px;     /* inline code */

    /* Controls */
    --field-h: 58px;
    --field-pad-x: 20px;
    --btn-lg-h: 58px;
    --btn-lg-w: 350px;       /* minimum width of large buttons */
    --btn-h: 44px;
    --btn-w: 156px;
    --btn-join-w: 130px;     /* Join, in Join for updates */
    --btn-pad-x: 32px;
    --avatar: 50px;
    --page-icon: 28px;       /* the icon by each title in the list of pages */

    /* Spacing */
    --gap-field: 22px;
    --gap-label: 24px;       /* label to field, side by side */
    --gap-label-stacked: 10px;
    --gap-buttons: 16px;
    --gap-section: 48px;
    --gap-inline: 12px;
    --gap-para: 20px;        /* between paragraphs in a page */
    --gap-heading: 38px;     /* above a heading in a page */
    --gap-block: 56px;       /* around a button in a page */

    /* Page */
    --gutter: 80px;
    --content-w: 1070px;     /* reading column + aside */
    --aside-w: 250px;
    --header-pad-top: 56px;
    --header-gap: 56px;      /* header to page content */
    --page-top-gap: 44px;    /* header to Create a memo */
    --title-above: 32px;     /* Create a memo to the page title */
    --title-gap: 32px;       /* page title to what's under it */
    --list-gap: 44px;        /* and then to the list of pages */
    --list-item-pad: 30px;   /* an excerpt to the rule under it */
    --list-rule-gap: 36px;   /* the rule to the next title */
    --standfirst-gap: 60px;  /* a page's description to its content */
    --box-gap: 116px;        /* content to Join for updates */
    --box-pad: 40px;         /* inside it */
    --box-form-gap: 32px;    /* its text to the form */
    --box-inset: 0px;        /* how far it reaches past the content (mobile) */
    --page-bottom: 64px;     /* Join for updates to the footer */
    --footer-pad-y: 15px;
    --footer-gutter: 70px;
    --footer-link-gap: 0px;  /* between footer links when they're one above another */

    /* Graphics */
    --logo-w: 366px;
    --sigil-w: 83px;
    /* The finger poking in from the right by Create a memo: this tall, this
       far from the button, with the end of its arm past the window's edge */
    --finger-knot-h: 156px;
    --finger-knot-gap: 39px;
    --finger-knot-crop: 44px;

    /* Motion */
    --ease: cubic-bezier(0.2, 0, 0, 1);
    --dur-hover: 150ms;
    --dur-fade: 260ms;
}

@media (max-width: 720px) {
    :root {
        --fs-h1: 37px;
        --fs-h2: 25px;
        --fs-h3: 22px;
        --fs-h4: 19px;
        --fs-standfirst: 24px;
        --fs-body: 18px;
        --fs-aside: 18px;
        --fs-label: 28px;
        --fs-field: 22px;
        --fs-btn-lg: 24px;
        --fs-btn: 17px;
        --fs-small: 14px;

        --stroke: 2.5px;
        --stroke-footer: 3.5px;

        --field-h: 50px;
        --field-pad-x: 16px;
        --btn-lg-h: 48px;
        --btn-lg-w: 0px;
        --btn-h: 38px;
        --btn-w: 120px;
        --btn-pad-x: 24px;
        --avatar: 44px;
        --page-icon: 24px;

        --gap-field: 24px;
        --gap-section: 36px;
        --gap-heading: 40px;
        --gap-block: 40px;

        --gutter: 30px;
        --header-pad-top: 20px;
        --header-gap: 32px;
        --title-above: 56px;
        --title-gap: 48px;
        --list-gap: 32px;
        --standfirst-gap: 48px;
        --box-gap: 72px;
        --box-pad: 30px;
        --box-inset: 10px;
        --page-bottom: 40px;
        --footer-gutter: 20px;
        --footer-link-gap: 3px;

        --logo-w: 257px;
        --sigil-w: 59px;
    }
}


/* 2. Base
   ========================================================================== */

/* Figtree, served from here (no Google Fonts). Licence: assets/fonts/OFL.txt */
@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('/pages/assets/fonts/figtree-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('/pages/assets/fonts/figtree-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--c-white);
    color: var(--c-black);
    font-family: var(--font);
    font-weight: var(--fw-regular);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote {
    margin: 0;
}

h1, h2, h3, h4 {
    font-weight: var(--fw-bold) !important;
    line-height: var(--lh-tight);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

a {
    color: inherit;
}

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

button, input {
    font: inherit;
    color: inherit;
}

:focus-visible {
    outline: var(--stroke) solid var(--c-black);
    outline-offset: 3px;
}

@keyframes fade {
    from { opacity: 0; }
}


/* 3. Layout
   ========================================================================== */

/* Sticky footer: the footer sits at the bottom of the window unless the
   content is taller, when it follows the content. */
body {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.main {
    flex: 1 0 auto;
    padding-top: var(--header-gap);
    /* The finger pokes past the window's edge; that mustn't scroll the page */
    overflow-x: clip;
}

.container {
    width: min(100% - 2 * var(--gutter), var(--content-w));
    margin-inline: auto;
    padding-bottom: var(--page-bottom);
}

/* Header: the logo, and "Sign in or Join" or the user on the right */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-field);
    padding: var(--header-pad-top) var(--gutter) 0;
}

.header-logo {
    display: block;
    width: var(--logo-w);
    max-width: 100%;
}

.auth-section {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.auth-link,
.user-info {
    font-weight: var(--fw-bold);
    text-decoration: none;
    animation: fade var(--dur-fade) var(--ease) both;
}

/* Neither shows until header.js knows who's signed in (body[data-signed-in]) */
body:not([data-signed-in="false"]) .auth-link,
body:not([data-signed-in="true"]) .user-info {
    display: none;
}

.user-info {
    display: flex;
    align-items: center;
    gap: var(--gap-inline);
}

.auth-link:hover,
.user-info:hover .user-greeting {
    text-decoration: underline;
}

/* Mobile: the user above the logo, on the right */
@media (max-width: 720px) {
    .header {
        flex-wrap: wrap;
    }

    .header .auth-section {
        order: -1;
        width: 100%;
        justify-content: flex-end;
    }
}

/* Footer */
.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-field);
    padding: var(--footer-pad-y) var(--footer-gutter);
    background: var(--c-yellow);
    border-top: var(--stroke-footer) solid var(--c-black);
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--footer-link-gap) 1.6em;
}

.footer a {
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: var(--gap-field);
}

.sigil {
    width: var(--sigil-w);
    height: auto;
}

/* Mobile: the links one above another; the sigil above the copyright */
@media (max-width: 720px) {
    .footer {
        align-items: stretch;
    }

    .footer-links {
        flex-direction: column;
    }

    .footer-brand {
        flex-direction: column-reverse;
        justify-content: space-between;
        align-items: flex-end;
        gap: var(--gap-inline);
    }
}

/* Text layout: the reading column, and an aside on the right (the app's
   text page). Mobile: the aside follows the column. */
.text-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--aside-w);
    column-gap: var(--gap-section);
    align-items: start;
}

.text-main {
    grid-column: 1;
}

@media (max-width: 720px) {
    .text-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* 4. Components
   ========================================================================== */

/* Logo */
.logo {
    width: 100%;
    height: auto;
}

/* Avatar: photo if the user has one (e.g. Google), otherwise their initial */
.user-avatar {
    width: var(--avatar);
    height: var(--avatar);
    flex-shrink: 0;
    border-radius: 50%;
    border: var(--stroke) solid var(--c-black);
    background: var(--c-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-weight: var(--fw-bold);
    line-height: 1;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Buttons: .btn small, .btn-lg large; .btn-primary yellow */
.btn {
    display: inline-block;
    height: var(--btn-h);
    line-height: calc(var(--btn-h) - 2 * var(--stroke));
    min-width: var(--btn-w);
    padding: 0 var(--btn-pad-x);
    border: var(--stroke) solid var(--c-black);
    border-radius: var(--radius-pill);
    background: var(--c-white);
    color: var(--c-black);
    font-size: var(--fs-btn);
    font-weight: var(--fw-bold);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur-hover), color var(--dur-hover);
}

.btn-lg {
    height: var(--btn-lg-h);
    line-height: calc(var(--btn-lg-h) - 2 * var(--stroke));
    min-width: var(--btn-lg-w);
    font-size: var(--fs-btn-lg);
}

.btn-primary {
    background: var(--c-yellow);
}

.btn-primary:hover {
    background: var(--c-black);
    color: var(--c-white);
}

/* Fields */
.form-label {
    font-size: var(--fs-label);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
}

.form-input {
    width: 100%;
    min-width: 0;
    height: var(--field-h);
    padding: 0 var(--field-pad-x);
    border: var(--stroke) solid var(--c-black);
    border-radius: var(--radius-pill);
    background: var(--c-white);
    color: var(--c-black);
    font-size: var(--fs-field);
    font-weight: var(--fw-regular);
    line-height: var(--lh-tight);
}

.form-input::placeholder {
    color: var(--c-placeholder);
    opacity: 1;
}

.form-input:focus {
    outline: none;
    box-shadow: 0 0 0 var(--stroke) var(--c-yellow);
}

/* Finger poking in from the window's right edge, beside Create a memo. Its
   right margin reaches from the content's edge to the window's, plus
   --finger-knot-crop, which hides the end of the arm past the edge. */
.finger-knot {
    --margin: max(var(--gutter), (100vw - var(--content-w)) / 2);
    width: auto;
    max-width: none;
    height: var(--finger-knot-h);
    flex-shrink: 0;
    /* Centred on the button without making the row taller */
    margin-block: calc((var(--btn-h) - var(--finger-knot-h)) / 2);
    margin-left: var(--finger-knot-gap);
    margin-right: calc(-1 * var(--margin) - var(--finger-knot-crop));
}


/* 5. Patterns
   ========================================================================== */

/* Page top: Create a memo and the finger (desktop), then the title */
.page-top {
    margin-top: var(--page-top-gap);
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.page-title {
    margin-top: var(--title-above);
    margin-bottom: var(--title-gap);
}

@media (max-width: 720px) {
    .page-top {
        display: none;
    }
}

/* The list of pages on /pages/ (design 16): icon and title, then an excerpt,
   with a rule between pages */
.page-list {
    padding: var(--list-gap) 0 0;
    list-style: none;
}

.page-list-item {
    padding-bottom: var(--list-item-pad);
}

.page-list-item + .page-list-item {
    padding-top: var(--list-rule-gap);
    border-top: var(--rule-thin) solid var(--c-black);
}

.page-list-title {
    display: grid;
    grid-template-columns: var(--page-icon) minmax(0, 1fr);
    column-gap: calc(var(--gap-inline) * 1.5);
    align-items: start;
    font-weight: var(--fw-regular);
}

.page-list-icon {
    width: var(--page-icon);
    height: var(--page-icon);
    /* Level with the first line of the title */
    margin-top: calc((1lh - var(--page-icon)) / 2);
}

.page-list-title a {
    text-decoration: none;
}

.page-list-title a:hover {
    text-decoration: underline;
}

.page-list-excerpt {
    margin-top: var(--gap-label);
}

/* A page (design 17): its description, then what its Markdown makes */
.standfirst {
    margin-bottom: var(--standfirst-gap);
    font-size: var(--fs-standfirst);
}

.prose > * + * {
    margin-top: var(--gap-para);
}

.prose > :is(h2, h3, h4) {
    margin-top: var(--gap-heading);
    font-weight: var(--fw-regular);
}

.prose > :first-child {
    margin-top: 0;
}

.prose > :is(h2, h3, h4) + * {
    margin-top: var(--gap-label);
}

.prose h2 { font-size: var(--fs-h3); }
.prose h3 { font-size: var(--fs-h4); }
.prose h4 { font-size: var(--fs-body); font-weight: var(--fw-bold); } /* body size, so bold to stand out */

.prose :is(ul, ol) {
    padding-left: 1.2em;
}

.prose li + li {
    margin-top: calc(var(--gap-para) / 2);
}

.prose blockquote {
    padding-left: var(--gap-field);
    border-left: var(--stroke) solid var(--c-yellow);
}

.prose code {
    padding: 0.1em 0.3em;
    border-radius: var(--radius-small);
    background: var(--c-code);
    font-family: var(--font-mono);
    font-size: 0.85em;
}

.prose pre {
    overflow-x: auto;
    padding: var(--gap-field);
    border-radius: var(--radius-box);
    background: var(--c-code);
}

.prose pre code {
    padding: 0;
    background: none;
}

.prose hr {
    margin-block: var(--gap-heading);
    border: 0;
    border-top: var(--rule-thin) solid var(--c-black);
}

/* An image: the column's width, its credit or caption under it on the right.
   Mobile: edge to edge. */
.prose img {
    width: 100%;
}

.prose figcaption {
    margin-top: calc(var(--gap-inline) / 2);
    font-size: var(--fs-caption);
    font-weight: var(--fw-bold);
    text-align: right;
}

.prose > figure + * {
    margin-top: var(--gap-heading);
}

@media (max-width: 720px) {
    .prose > figure {
        margin-inline: calc(-1 * var(--gutter));
    }

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

/* A big button in a page ({% button %}), centred, with room around it.
   Mobile: it wraps onto two lines rather than filling the width. */
.cta {
    text-align: center;
}

.prose > .cta {
    margin-block: var(--gap-block);
}

@media (max-width: 720px) {
    .cta .btn-lg {
        height: auto;
        max-width: 75%;
        padding-block: calc(var(--btn-pad-x) / 2);
        line-height: var(--lh-tight);
        white-space: normal;
    }
}

/* All pages, beside a page (mobile: under it, after a rule) */
.text-aside {
    font-size: var(--fs-aside);
    line-height: var(--lh-tight);
}

.aside-title {
    margin-bottom: var(--gap-field);
    font-size: var(--fs-body);
}

.aside-list {
    display: grid;
    gap: var(--gap-field);
    padding: 0;
    list-style: none;
}

.aside-list a {
    text-decoration: none;
}

.aside-list a:hover,
.aside-list a[aria-current="page"] {
    text-decoration: underline;
}

@media (max-width: 720px) {
    .text-aside {
        margin-top: var(--gap-heading);
        padding-top: var(--gap-heading);
        border-top: var(--rule-thin) solid var(--c-black);
    }
}

/* Join for updates: a grey box under the reading column (designs 16, 17) */
.signup {
    width: calc(100% - var(--aside-w) - var(--gap-section));
    margin-top: var(--box-gap);
    padding: var(--box-pad);
    border-radius: var(--radius-box);
    background: var(--c-box);
}

.signup-title {
    font-size: var(--fs-h3);
    font-weight: var(--fw-regular);
}

.signup-text {
    max-width: 28em;
    margin-top: var(--gap-label);
}

.signup-form {
    display: flex;
    align-items: center;
    gap: var(--gap-label);
    margin-top: var(--box-form-gap);
}

.signup-form .form-label {
    font-weight: var(--fw-regular);
}

.signup-form .btn-lg {
    min-width: var(--btn-join-w);
}

.signup-promise {
    margin-top: var(--box-pad);
    font-size: var(--fs-small);
}

/* Mobile: a little wider than the content, the label over the field, Join under it */
@media (max-width: 720px) {
    .signup {
        width: auto;
        margin-inline: calc(-1 * var(--box-inset));
    }

    .signup-form {
        flex-direction: column;
        align-items: stretch;
        gap: var(--gap-label-stacked);
        margin-top: var(--box-pad);
    }

    .signup-form .btn-lg {
        align-self: center;
        margin-top: var(--gap-buttons);
    }
}