/* =============================================================================
   File    : site.css
   Creator : Mark Kiessling
   Created : October 17, 2026
   Purpose : Look of subzerobadass.com. Colours and sizes come from Scott's
             LayoutForClaude.txt: one continuous navy gradient, pale silver
             text, cyan accents, NO boxes behind the transparent artwork (its
             glows and shadows must sit straight on the page colour).
   ============================================================================= */
:root {
    color-scheme: only dark;
    --silver: #E8F1F8;
    --silver-dim: #A9BCCB;
    --cyan: #50D8FF;
    --serif: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
    --sans: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: #05111E; }
body {
    margin: 0; min-height: 100vh; color: var(--silver);
    font: 19px/1.6 var(--sans);
    overflow-x: hidden;
}
/* The gradient lives on a fixed layer the size of the window, so it fills any
   window (phone to 5K) and never ends partway down a long page - background-
   attachment: fixed is ignored by phones and cut off in full-page captures.
   The cyan glow sits behind the masthead to tie the artwork to the page. */
body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(ellipse 70% 38% at 50% 14%, rgba(80, 216, 255, .16), transparent 70%),
        linear-gradient(#05111E 0%, #0B2031 55%, #102D41 100%);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--cyan); }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; border-radius: 10px; }

/* ---------- top bar ---------- */
.top-in {
    width: min(1100px, calc(100% - 32px)); margin: 0 auto;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 8px 24px; padding: 14px 0 12px;
    border-bottom: 1px solid rgba(232, 241, 248, .28);
}
.brand { color: var(--silver); text-decoration: none; letter-spacing: .14em; font-size: 18px; }
.nav { display: flex; flex-wrap: wrap; gap: 6px 30px; font: 19px var(--serif); }
.nav a { color: var(--silver); text-decoration: none; padding: 6px 2px; }
.nav a:hover { color: var(--cyan); }

/* ---------- page ---------- */
.page { width: min(1100px, calc(100% - 32px)); margin: 0 auto; text-align: center; }
.masthead { margin: clamp(14px, 3vw, 34px) 0 0; font-size: 0; }
.masthead img { width: 100%; }          /* whole picture, never cropped or stretched */
.block { margin-top: clamp(10px, 2vw, 22px); }
.title {
    font: 700 clamp(30px, 4vw, 44px)/1.15 var(--serif); margin: 0;
    color: var(--silver); text-shadow: 0 2px 14px rgba(80, 216, 255, .25);
}
.title.big { font-size: clamp(34px, 5.4vw, 62px); }
.lede { font: clamp(20px, 2.4vw, 28px)/1.3 var(--serif); margin: 6px 0 0; }
.lede.small { font-size: clamp(19px, 2vw, 23px); margin-top: 18px; }

/* Email cards: 400 x 250 each, 32 px apart = 832 px; stack on narrow screens. */
.cards {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 32px;
    margin: clamp(20px, 3vw, 34px) auto 0; max-width: 900px;
}
.card { display: block; width: min(400px, 100%); line-height: 0; border-radius: 16px; }
.card img { width: 100%; transition: transform .15s ease, filter .15s ease; }
.card:hover img { transform: translateY(-2px); filter: brightness(1.06); }

.divider {
    position: relative; height: 1.5px; width: min(1000px, 100%);
    margin: clamp(40px, 5.5vw, 62px) auto clamp(22px, 2.6vw, 30px);
    background: linear-gradient(90deg, transparent, rgba(80, 216, 255, .75) 25%, rgba(80, 216, 255, .75) 75%, transparent);
}
.divider::after {                        /* small cyan diamond in the middle */
    content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px;
    background: var(--cyan); transform: translate(-50%, -50%) rotate(45deg);
    box-shadow: 0 0 10px rgba(80, 216, 255, .8);
}

/* Libraries: a grid, so more cards drop in later without a redesign. */
.libs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 400px));
        justify-content: center; gap: 32px; margin-top: clamp(16px, 2.4vw, 26px); }
.lib { margin: 0; position: relative; }
.lib img { width: 100%; }
.soon {
    position: absolute; top: 10px; right: 10px;
    font: 600 15px var(--sans); color: #05111E; background: var(--cyan);
    padding: 3px 12px; border-radius: 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}
.planned { list-style: none; padding: 0; margin: 14px 0 0;
           display: flex; flex-wrap: wrap; justify-content: center; font: 21px var(--serif); }
.planned li { padding: 2px 26px; }
.planned li + li { border-left: 1px solid rgba(232, 241, 248, .4); }
.planned-note { margin: 4px 0 0; font-size: 16px; color: var(--silver-dim); }

.whisker { display: flex; justify-content: center; margin: clamp(40px, 6vw, 64px) 0 0; }

/* ---------- footer ---------- */
.foot { width: min(1100px, calc(100% - 32px)); margin: clamp(30px, 4vw, 44px) auto 0;
        border-top: 1px solid rgba(232, 241, 248, .28); padding: 16px 0 28px;
        text-align: center; font: 18px var(--serif); }
.foot p { margin: 0; }

@media (max-width: 520px) {
    .page, .top-in, .foot { width: calc(100% - 24px); }
    .top-in { justify-content: center; }
    .planned { flex-direction: column; }
    .planned li + li { border-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .card img { transition: none; } }
/* Co-authored by Claude AI */