/* sanguine.css - the whole site's look: header, page, text, images, footer.
   Every page uses this file. */

/* ============================================================
   DESKTOP CONTROLS - set these with desktop-tuner.html, then paste its output over this whole :root block.
   Phones (up to 760px wide) have their own settings in PHONE TAB CONTROLS near the bottom, so these don't change phones.
   Header (every page):
   --sw-title-y      space from the top of the page to the Sanguine Drums title
   --sw-title-size   font size of the Sanguine Drums title
   --sw-gap-1        space from the title to the product row
   --sw-tab-size     font size of the product row
   --sw-tab-gap      space between the tab names (20px on tablets up to 860px wide, see below)
   --sw-header-h     minimum height of the header
   --sw-band-color   background of the header
   Product pages:
   --sw-content-top  space from the header to the first text or image
   --sw-content-w    width of the text and images
   --sw-gap          space between the text and each image
   Home page:
   --sw-signup-y     space from the tab row to the Purchase / Free Trial buttons
   --sw-join-w       width of the mailing list button (not used on this site; the buttons use --sw-btn-w below)
   --sw-join-pad     space above and below the button text (sets the height of every button)
   --sw-join-size    font size of the button text
   --sw-email-w      width of the email box (mailing list, not used on this site)
   --sw-updates-y    space from the Purchase / Free Trial buttons to Recent Updates
   --sw-updates-w    width of the Recent Updates column (centered; 810px = same as the product pages)
   --sw-updates-size font size of the Recent Updates title
   --sw-updates-head space under the Recent Updates title
   --sw-updates-text font size of the month and the list
   --sw-updates-lh   line height of the month and the list (1.6 = same as the product pages)
   --sw-updates-month-gap space under each month
   --sw-updates-item-gap  extra space between list items
   --sw-updates-indent    how far the list is indented (the bullets sit in this space)
   ============================================================ */
:root {
    --sw-title-y: 36px;
    --sw-title-size: 36px;
    --sw-gap-1: 24px;
    --sw-tab-size: 16px;
    --sw-tab-gap: 36px;
    --sw-header-h: 110px;
    --sw-band-color: #fff;
    --sw-content-top: 30px;
    --sw-content-w: 810px;
    --sw-gap: 20px;
    --sw-signup-y: 36px;
    --sw-join-w: 180px;
    --sw-join-pad: 6px;
    --sw-join-size: 16px;
    --sw-email-w: 280px;
    --sw-updates-y: 16px;
    --sw-updates-w: 810px;
    --sw-updates-size: 16px;
    --sw-updates-head: 0px;
    --sw-updates-text: 16px;
    --sw-updates-lh: 1.6;
    --sw-updates-month-gap: 0px;
    --sw-updates-item-gap: 0px;
    --sw-updates-indent: 20px;
}

/* ============================================================
   BUTTONS - Purchase / Free Trial on the home page, and any button on the other pages (Free Trial).
   Same look as the mailing list button (same height, border and font), with their own width.
   Kept out of the tuner blocks above and below, so pasting a tuner's output doesn't remove them.
   Phones have their own copies of these three in the phone section.
   --sw-btn-y    space from the text or image above to the buttons (not on the home page, see --sw-signup-y)
   --sw-btn-w    width of each button
   --sw-btn-gap  space between two buttons
   ============================================================ */
:root {
    --sw-btn-y: 24px;
    --sw-btn-w: 160px;
    --sw-btn-gap: 24px;
}

/* ---------- Page ---------- */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: #fff;
    color: #000;
    font-family: "Jost", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* No visible scrollbar anywhere, so the centered header never shifts sideways between pages */
html {
    scrollbar-width: none;
    -ms-overflow-style: none;
    overflow-y: scroll;
}
html::-webkit-scrollbar {
    display: none;
}

/* Everything under the header; the footer sits at the bottom on short pages */
.sw-site {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.sw-page {
    flex: 1 0 auto;
    width: 100%;
    max-width: calc(var(--sw-content-w) + 40px);
    margin: 0 auto;
    padding: var(--sw-content-top) 20px 0;
}

/* ---------- Header ---------- */
/* min-height, so on a phone where the product row wraps to two lines the header grows instead of
   running into the page (it's the same row on every page, so it's still the same height everywhere) */
.sw-top {
    width: 100%;
    min-height: var(--sw-header-h);
    background: var(--sw-band-color);
    padding: var(--sw-title-y) 40px 0;
}

.sw-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: "Jost", sans-serif;
    font-size: 16px;
    font-weight: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #000;
}

.sw-title a {
    font-family: "Jost", sans-serif;
    font-weight: 400;
    font-size: var(--sw-title-size);
    line-height: 1.2;
    white-space: nowrap;
    color: #000;
    text-decoration: none;
}

.sw-tabs {
    margin-top: var(--sw-gap-1);
    display: flex;
    justify-content: center;
    gap: var(--sw-tab-gap);
    flex-wrap: wrap;
}

.sw-tabs a {
    text-decoration: none;
    color: #000;
    font-size: var(--sw-tab-size);
    line-height: 1.25;
}

.sw-tabs a.inactive {
    color: #aaa;
}

.sw-tabs a:hover {
    color: #666;
}

/* Tablets and small windows: a smaller gap between the names down to 761px wide */
@media (max-width: 860px) {
    :root {
        --sw-tab-gap: 20px;
    }
}

/* ---------- Product text and images ---------- */
.sw-text {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
}

/* Links in the text, like jacobbraun.net: black with a light line under them */
.sw-text a {
    color: #000;
    text-decoration: none;
    border-bottom: 1px solid #ddd;
}

.sw-text a:hover {
    border-bottom-color: #000;
}

.sw-img {
    display: block;
    width: 100%;
    height: auto;
    margin-top: var(--sw-gap);
}

/* Pages with class sw-wide on <main> (freetypewriter.com): the images run edge to edge across the browser window;
   the text and buttons stay in the usual column */
.sw-wide .sw-img {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
}

/* ---------- Footer ---------- */
.sw-footer {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-top: 80px;
    padding: 28px 48px 60px;
    border-top: 1px solid #000;
    color: #000;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: normal;
    font-style: normal;
    letter-spacing: normal;
    text-transform: none;
    line-height: 1.2;
    text-align: center;
}

.sw-footer .sw-col {
    display: flex;
    flex-direction: column;
}

.sw-footer a {
    color: #000;
    text-decoration: none;
}

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

/* ---------- Footer position ----------
   The footer starts at the same distance from the top on every page: where it is on the Open Kick page
   (the longest: header, text, the two Open Kick images and the buttons), so it's below the first screen.
   Terms is longer than that, so its footer comes after its text.
   --sw-ok-text   height of the Open Kick line (1 line wide, 2 lines on phones, 3 on the narrowest)
   --sw-tabs-h    height of the product row (1 line, 2 or 3 lines on phones)
   --sw-btn-h     height of a button (padding, text and border, from the mailing list button's settings)
   --sw-ok-page   height of the Open Kick page content at the current width
   --sw-hdr       header height on home and Terms (all names black)
   --sw-hdr-tp    header height on a product page (one name selected); on phones it has its own settings
   --sw-foot-y    where every footer starts: the taller of the two headers plus the Open Kick content */
:root {
    --sw-ok-text: 1.6em;
    --sw-tabs-h: calc(var(--sw-tab-size) * 1.25);
    --sw-hdr: max(var(--sw-header-h), calc(var(--sw-title-y) + var(--sw-title-size) * 1.2 + var(--sw-gap-1) + var(--sw-tabs-h)));
    --sw-hdr-tp: var(--sw-hdr);
    --sw-btn-h: calc(2 * var(--sw-join-pad) + var(--sw-join-size) * 1.5 + 2px);
    --sw-ok-page: calc(var(--sw-content-top) + var(--sw-ok-text) + 2 * var(--sw-gap) + 2 * min(100vw - 40px, var(--sw-content-w)) * 1709 / 2182 + var(--sw-btn-y) + var(--sw-btn-h));
    --sw-foot-y: calc(max(var(--sw-hdr), var(--sw-hdr-tp)) + var(--sw-ok-page));
}

@media (max-width: 685px) {
    :root {
        --sw-ok-text: 3.2em;
    }
}

@media (max-width: 365px) {
    :root {
        --sw-ok-text: 4.8em;
    }
}

.sw-page {
    min-height: calc(var(--sw-foot-y) - var(--sw-hdr));
}

/* Product pages (one name selected) */
.sw-top:has(.sw-tabs a.inactive) + .sw-site .sw-page {
    min-height: calc(var(--sw-foot-y) - var(--sw-hdr-tp));
}

/* Support: its header has no product row, so it's shorter */
.sw-top:not(:has(.sw-tabs)) + .sw-site .sw-page {
    min-height: calc(var(--sw-foot-y) - var(--sw-header-h));
}

/* About: no header at all */
body > .sw-site:first-child .sw-page {
    min-height: var(--sw-foot-y);
}

@media (max-width: 760px) {
    /* Phones (and anything up to 760px wide): tab row on two or three lines, by default How it Works, Videos /
       Support, Free Trial, Purchase.
       PHONE TAB CONTROLS - set these with tabs-tuner.html, then paste its output over this :root block
       --sw-title-y     space from the top of the screen to the Sanguine Drums title
       --sw-gap-1       space from the Sanguine Drums title to the first line of names
       --sw-m-row-gap   space between the lines
       --sw-m-col-gap   space between the names on a line
       --sw-m-row1-x    moves line 1 left (negative) or right (positive)
       --sw-m-row2-x    moves line 2 left (negative) or right (positive)
       --sw-m-row3-x    moves line 3 left (negative) or right (positive)
       --sw-m-tab-size  font size of the names on phones
       --sw-m-break1    how many names are on line 1 (1 to 4)
       --sw-m-break2    how many names are on lines 1 and 2 together (more than break1; 5 = no third line)
       --sw-content-top space from the names to the page content below them (all pages but home)
       --sw-signup-y    home: space from the names to the Purchase / Free Trial buttons
       --sw-updates-y   home: space from the buttons to Recent Updates
       --sw-updates-head home: space under the Recent Updates title
       --sw-tp-...      the same header settings for product pages (one name selected): title-y, gap-1,
                        row-gap, col-gap, row1-x, row2-x, row3-x, tab-size. The lines (break1, break2)
                        are the same on every page. */
    :root {
        --sw-title-y: 32px;
        --sw-gap-1: 16px;
        --sw-m-row-gap: 4px;
        --sw-m-col-gap: 18px;
        --sw-m-row1-x: 0px;
        --sw-m-row2-x: 0px;
        --sw-m-row3-x: 0px;
        --sw-m-tab-size: 16px;
        --sw-m-break1: 2;
        --sw-m-break2: 5;
        --sw-content-top: 26px;
        --sw-signup-y: 32px;
        --sw-updates-y: 31px;
        --sw-updates-head: 0px;
        --sw-tp-title-y: 32px;
        --sw-tp-gap-1: 16px;
        --sw-tp-row-gap: 4px;
        --sw-tp-col-gap: 18px;
        --sw-tp-row1-x: 0px;
        --sw-tp-row2-x: 0px;
        --sw-tp-row3-x: 0px;
        --sw-tp-tab-size: 16px;
    }

    /* Settings that only the desktop tuner changes, kept at their phone values so phones stay as tuned,
       and the product buttons' phone sizes (two buttons fit on one line down to 320 px wide) */
    :root {
        --sw-btn-y: 24px;
        --sw-btn-w: 124px;
        --sw-btn-gap: 20px;
        --sw-title-size: 32px;
        --sw-header-h: 100px;
        --sw-join-w: 200px;
        --sw-join-pad: 5px;
        --sw-join-size: 16px;
        --sw-email-w: 280px;
        --sw-updates-w: 810px;
        --sw-updates-size: 16px;
        --sw-updates-text: 16px;
        --sw-updates-lh: 1.6;
        --sw-updates-month-gap: 0px;
        --sw-updates-item-gap: 0px;
        --sw-updates-indent: 20px;
    }

    /* How many names are in the tab row (the same on every page), and the row's height on phones
       (2 or 3 lines plus the gaps), used for the footer position */
    :root {
        --sw-m-count: 5;
        --sw-m-lines: calc(2 + clamp(0, var(--sw-m-count) - var(--sw-m-break2), 1));
        --sw-tabs-h: calc(var(--sw-m-lines) * var(--sw-m-tab-size) * 1.25 + (var(--sw-m-lines) - 1) * var(--sw-m-row-gap));
        --sw-hdr-tp: max(var(--sw-header-h), calc(var(--sw-tp-title-y) + var(--sw-title-size) * 1.2 + var(--sw-tp-gap-1) + var(--sw-m-lines) * var(--sw-tp-tab-size) * 1.25 + (var(--sw-m-lines) - 1) * var(--sw-tp-row-gap)));
    }

    /* The lines: the names keep their order (2, 4, ... 10) and two empty full-width items are the line
       breaks, ::before after name number break1 and ::after after name number break2. Each break is a line
       of no height, so the row gap sits half above it, half below. With break2 at the number of names (5) the
       second break goes after the last name, takes no width and cancels its own column gap, so there are
       only two lines. */
    .sw-tabs {
        --cg: var(--sw-m-col-gap);
        --rg: var(--sw-m-row-gap);
        --x1: var(--sw-m-row1-x);
        --x2: var(--sw-m-row2-x);
        --x3: var(--sw-m-row3-x);
        --last: clamp(0, var(--sw-m-break2) - (var(--sw-m-count) - 1), 1);
        column-gap: var(--cg);
        row-gap: calc(var(--rg) / 2);
    }
    .sw-tabs a {
        font-size: var(--sw-m-tab-size);
        position: relative;
    }
    .sw-tabs::before,
    .sw-tabs::after {
        content: "";
        flex-basis: 100%;
        height: 0;
    }
    .sw-tabs::before {
        order: calc(var(--sw-m-break1) * 2 + 1);
    }
    .sw-tabs::after {
        order: calc(var(--sw-m-break2) * 2 + 1);
        flex-basis: calc(100% * (1 - var(--last)));
        margin-left: calc(-1 * var(--cg) * var(--last));
    }
    /* each name moves with the line it's on */
    .sw-tabs a:nth-child(1) { order: 2;  left: calc(var(--x1) + clamp(0, 1 - var(--sw-m-break1), 1) * (var(--x2) - var(--x1)) + clamp(0, 1 - var(--sw-m-break2), 1) * (var(--x3) - var(--x2))); }
    .sw-tabs a:nth-child(2) { order: 4;  left: calc(var(--x1) + clamp(0, 2 - var(--sw-m-break1), 1) * (var(--x2) - var(--x1)) + clamp(0, 2 - var(--sw-m-break2), 1) * (var(--x3) - var(--x2))); }
    .sw-tabs a:nth-child(3) { order: 6;  left: calc(var(--x1) + clamp(0, 3 - var(--sw-m-break1), 1) * (var(--x2) - var(--x1)) + clamp(0, 3 - var(--sw-m-break2), 1) * (var(--x3) - var(--x2))); }
    .sw-tabs a:nth-child(4) { order: 8;  left: calc(var(--x1) + clamp(0, 4 - var(--sw-m-break1), 1) * (var(--x2) - var(--x1)) + clamp(0, 4 - var(--sw-m-break2), 1) * (var(--x3) - var(--x2))); }
    .sw-tabs a:nth-child(5) { order: 10; left: calc(var(--x1) + clamp(0, 5 - var(--sw-m-break1), 1) * (var(--x2) - var(--x1)) + clamp(0, 5 - var(--sw-m-break2), 1) * (var(--x3) - var(--x2))); }

    /* Product pages (one name selected) use the --sw-tp- settings */
    .sw-top:has(.sw-tabs a.inactive) {
        padding-top: var(--sw-tp-title-y);
    }
    .sw-top:has(.sw-tabs a.inactive) .sw-tabs {
        margin-top: var(--sw-tp-gap-1);
        --cg: var(--sw-tp-col-gap);
        --rg: var(--sw-tp-row-gap);
        --x1: var(--sw-tp-row1-x);
        --x2: var(--sw-tp-row2-x);
        --x3: var(--sw-tp-row3-x);
    }
    .sw-top:has(.sw-tabs a.inactive) .sw-tabs a {
        font-size: var(--sw-tp-tab-size);
    }

    /* Phones: footer in two blocks. Left: Home, About, Support, YouTube, Instagram as one list.
       Right: copyright and Terms. */
    .sw-footer {
        display: grid;
        grid-template-columns: 1fr auto;
        column-gap: 24px;
        row-gap: 0;
        text-align: left;
        padding-left: 24px;
        padding-right: 24px;
    }
    .sw-footer .sw-col:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }
    .sw-footer .sw-col:nth-child(3) {
        grid-column: 1;
        grid-row: 2;
    }
    .sw-footer .sw-col:nth-child(2) {
        grid-column: 2;
        grid-row: 1 / 3;
        text-align: right;
        align-items: flex-end;
    }
}

/* First thing on a page sits right at --sw-content-top; text after an image gets the same gap */
.sw-page > :first-child {
    margin-top: 0;
}

.sw-img + .sw-text {
    margin-top: var(--sw-gap);
}

/* ---------- Home page: Purchase / Free Trial buttons and Recent Updates ----------
   The buttons (class sw-home-buttons) sit --sw-signup-y below the tab row. The mailing list rules below are
   kept for the shared look (1px border, fills with ink on hover) but the home page has no mailing list. */
.sw-join,
.sw-signup,
.sw-signup-msg,
.sw-home-buttons {
    margin-top: calc(var(--sw-signup-y) - var(--sw-content-top)) !important;
}
/* One button at first; clicking it swaps in the email box with the submit button under it */
.sw-signup {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.sw-signup[hidden] {
    display: none;
}

.sw-signup input,
.sw-signup button,
.sw-join {
    width: var(--sw-join-w);
    margin: 0;
    padding: var(--sw-join-pad) 10px;
    border: 1px solid #000;
    border-radius: 0;
    background: transparent;
    color: #000;
    font-family: "Jost", sans-serif;
    font-size: var(--sw-join-size);
    line-height: 1.5;
    text-align: center;
    -webkit-appearance: none;
    appearance: none;
}

.sw-signup input {
    width: var(--sw-email-w);
}

.sw-signup input::placeholder {
    color: #aaa;
}

.sw-signup input:focus {
    outline: none;
}

.sw-join {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.sw-join[hidden] {
    display: none;
}

.sw-signup button,
.sw-join {
    cursor: pointer;
}

.sw-signup button:hover,
.sw-join:hover {
    background: #000;
    color: #fff;
}

.sw-signup-msg {
    text-align: center;
}

/* ---------- Buttons: Purchase / Free Trial on the home page, Free Trial on its page ----------
   The mailing list button's look (same padding, font and border, so the same height), side by side */
.sw-buttons {
    display: flex;
    justify-content: center;
    gap: var(--sw-btn-gap);
    margin-top: var(--sw-btn-y);
}

.sw-btn {
    display: block;
    width: var(--sw-btn-w);
    padding: var(--sw-join-pad) 10px;
    border: 1px solid #000;
    background: transparent;
    color: #000;
    font-family: "Jost", sans-serif;
    font-size: var(--sw-join-size);
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

.sw-btn:hover {
    background: #000;
    color: #fff;
}

/* Recent Updates: plain text like the product pages, left-aligned in the same column */
.sw-updates {
    margin-top: var(--sw-updates-y);
    max-width: var(--sw-updates-w);
    margin-left: auto;
    margin-right: auto;
}

.sw-updates .sw-text,
.sw-updates li {
    font-size: var(--sw-updates-text);
    line-height: var(--sw-updates-lh);
}

.sw-updates .sw-updates-title {
    font-size: var(--sw-updates-size);
    font-weight: 500;
    margin-bottom: var(--sw-updates-head);
}

/* Months: every line in Recent Updates that isn't the title or the list */
.sw-updates > p:not(.sw-updates-title) {
    margin-bottom: var(--sw-updates-month-gap);
}

.sw-updates li + li {
    margin-top: var(--sw-updates-item-gap);
}

.sw-updates ul {
    margin: 0;
    padding-left: var(--sw-updates-indent);
}