:root {
    --color-green-deep: #1f4220;
    --color-green: #336633;
    --color-bone: #ffffff;
    --color-sage-bone: #c9d1c8;
    --color-ochre: #b8732a;
    --color-footer-bg: #14301a;
    --color-ink: #1a1d1a;
    --color-stone: #6b6e68;
    --signal-link: #3a5a78;
    --signal-warning: #c89a2a;
    --signal-error: #b03030;
    --font-serif: "Crimson Pro", Georgia, serif;
    --font-body: "Rethink Sans", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: "IBM Plex Mono", "SF Mono", monospace;

    /* Containers */
    --container-text: 680px;       /* reading line length for body prose */
    --container:      1280px;
    --container-wide: 1600px;      /* hero / data viz / forecast grids */

    /* Breakpoints (mobile-first, min-width targets). CSS custom
       properties cannot appear inside @media query conditions, so the
       numeric values are duplicated in the @media rules below — keep
       both in sync if either is changed. */
    --bp-sm:   480px;              /* Large phone */
    --bp-md:   768px;              /* Tablet portrait */
    --bp-lg:  1024px;              /* Tablet landscape, small laptop */
    --bp-xl:  1280px;              /* Desktop */
    --bp-2xl: 1600px;              /* Wide desktop, hero / data viz */

    /* Rendered height of <header class="site-header"> at the current
       breakpoint. The hero subtracts this from 100vh so the header + hero
       fill the viewport exactly. Mobile is the default below; --bp-md
       bumps the value. Update both the default and the @media override
       if header padding or button sizing changes. */
    --site-header-height: 73px;
}

@media (min-width: 768px) { /* --bp-md */
    :root { --site-header-height: 82px; }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
    font-family: var(--font-body);
    border-top: 3px solid var(--color-ochre);
    overflow-x: hidden;
    /* Body bg matches the footer so any leftover viewport space below the
       <main> wrapper looks like a continuation of the footer band, not a
       sandwich of mismatched colors. The .body-content wrapper carries the
       per-page bg (bone for legal, deep moss for the homepage). */
    background: var(--color-footer-bg);
    min-height: 100vh;
    min-height: 100svh;
}

/* Wraps @RenderBody() in the layout. Default bg is bone — suits the legal
   pages and any future content-on-bone page. The homepage overrides below. */
.body-content {
    background: var(--color-bone);
}

/* main carries the bone "page surface" so promo sections can sit on white
   without each declaring their own bg. The hero overrides this with deep
   moss further down so the night-sky illustration stays legible. */
main {
    background: var(--color-bone);
}

/* ════════════════════════════════════════════════════════ */
/* HEADER (every page)                                      */
/* ════════════════════════════════════════════════════════ */

/* Transparent strip across the top of .body-content. Home icon left,
   Sign In right. position: relative + z-index lifts it above the
   homepage's absolute-positioned illustration. Mobile-first defaults;
   --bp-md bumps padding and button sizing below. */
.site-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 24px;
}

.site-header .home-link {
    display: inline-flex;
    align-items: center;
    color: inherit;
    transition: opacity 150ms cubic-bezier(0.2, 0, 0, 1);
}
.site-header .home-link:hover { opacity: 0.7; }
.site-header .home-link:focus-visible {
    outline: 2px solid var(--color-ochre);
    outline-offset: 4px;
}
.site-header .home-link svg { display: block; }

.site-header .sign-in {
    display: inline-block;
    background: var(--color-green);
    color: var(--color-bone);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
    padding: 10px 18px;
    text-decoration: none;
    border: 0;
    transition: background 150ms cubic-bezier(0.2, 0, 0, 1);
}
.site-header .sign-in:hover { background: var(--color-green-deep); }
.site-header .sign-in:focus-visible {
    outline: 2px solid var(--color-ochre);
    outline-offset: 4px;
}

/* ════════════════════════════════════════════════════════ */
/* HOMEPAGE                                                 */
/* ════════════════════════════════════════════════════════ */

body.home {
    color: var(--color-bone);
}

body.home .body-content {
    background: var(--color-green-deep);
}

/* ── BACKGROUND ILLUSTRATION (full-bleed) ─────────────── */
.illo {
    position: absolute;
    inset: 0;
    width: 100%;
    z-index: 0;
    pointer-events: none;
    display: grid;
    place-items: center;
}
.illo svg {
    width: 100%;
    height: 100%;
    opacity: 0.15;
    display: block;
}

/* ── HERO (homepage first section) ───────────────────── */
/* The hero section fills the viewport vertically — header sits above it,
   additional sections (and the footer) sit below and require scrolling
   to reach. The wordmark stack is vertically centered inside. .hero is
   also the positioned ancestor for the absolute-positioned .illo. */
.hero {
    position: relative;
    z-index: 1;
    padding: 56px 24px;
    min-height: calc(100vh - var(--site-header-height));
    min-height: calc(100svh - var(--site-header-height));
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* Override main's bone bg so the night-sky illustration shows on dark. */
    background: var(--color-green-deep);
}

.stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    text-align: center;
    width: 100%;
    min-width: 280px;
}

/* ── LOGO (W4-i: italic Pebble + & Silver, meander, "Sites" mono) ── */
.logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--color-bone);
}
.wordmark {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 26px;
    letter-spacing: -0.025em;
    line-height: 1;
    white-space: nowrap;
    color: var(--color-bone);
    margin: 0;
}
.wordmark .it { font-style: italic; }
.wordmark .up { font-style: normal; }

.meander {
    display: block;
    width: 100%;
    max-width: 144px;
    height: 8px;
    margin: -1px auto 0;
}
.meander path {
    stroke: var(--color-bone);
    stroke-width: 1.5;
    fill: none;
    stroke-linecap: round;
}

.sublabel {
    align-self: center;
    margin-top: 5px;
    font-family: var(--font-mono);
    font-size: 6px;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: var(--color-bone);
    opacity: 0.78;
}

/* ── TAGLINE ──────────────────────────────────────────── */
.tagline {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.55;
    color: var(--color-sage-bone);
    margin: 0;
    max-width: 560px;
    text-wrap: pretty;
}

/* ── LEGAL BAR (homepage footer) ──────────────────────── */
.site-footer {
    position: relative;
    z-index: 1;
    border-top: 3px solid var(--color-ochre);
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    background: var(--color-footer-bg);
}
.site-footer .copyright { white-space: nowrap; }
.site-footer nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.site-footer nav a {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    transition: color 150ms cubic-bezier(0.2, 0, 0, 1);
}
.site-footer nav a:hover,
.site-footer nav a:focus-visible {
    color: var(--color-bone);
    text-decoration: underline;
    text-underline-offset: 4px;
    outline: none;
}
.site-footer nav .sep {
    opacity: 0.4;
    user-select: none;
}

/* ════════════════════════════════════════════════════════ */
/* PROMO (portfolio-site spotlight, e.g. upcomingweather.com) */
/* ════════════════════════════════════════════════════════ */

/* Three nested layers: section (bone outline) → card (Pebble Green frame)
   → inner box (bone content area). The card's padding equals the section's
   padding, so the dark "frame" matches the white "outline" thickness. */

.promo {
    padding: 24px;
}

.promo-card {
    background: var(--color-green);
    padding: 48px;
}

/* Inner is bone at 90% opacity so 10% of the Pebble Green frame shows
   through, giving the white surface a faint green undertone that ties
   it to the surrounding card. */
.promo-card-inner {
    background: rgba(255, 255, 255, 0.9);
    padding: 40px 24px;
    text-align: center;
}

.promo-card-inner h2 {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    font-size: 24px;
    letter-spacing: -0.025em;
    line-height: 1.05;
    color: var(--color-green-deep);
    margin: 0 0 24px;
}

.promo-card-inner p {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-ink);
    max-width: 560px;
    margin: 0 auto 24px;
    text-wrap: pretty;
}

.promo-cta {
    display: inline-block;
    background: var(--color-green);
    color: var(--color-bone);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
    padding: 12px 22px;
    text-decoration: none;
    border: 0;
    transition: background 150ms cubic-bezier(0.2, 0, 0, 1);
}
.promo-cta:hover { background: var(--color-green-deep); }
.promo-cta:focus-visible {
    outline: 2px solid var(--color-ochre);
    outline-offset: 4px;
}

/* ════════════════════════════════════════════════════════ */
/* LEGAL PAGES                                              */
/* ════════════════════════════════════════════════════════ */

body.legal {
    color: var(--color-ink);
    font-size: 16px;
    line-height: 1.6;
    text-wrap: pretty;
}

main.legal {
    max-width: var(--container-text);
    margin: 0 auto;
    padding: 56px 24px 72px;
}

main.legal h1 {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    font-size: 32px;
    letter-spacing: -0.025em;
    line-height: 1.05;
    color: var(--color-green-deep);
    margin: 0 0 24px;
}

main.legal h2 {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    font-size: 24px;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: var(--color-green-deep);
    margin: 36px 0 16px;
}

main.legal h3 {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    font-size: 20px;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--color-green-deep);
    margin: 24px 0 12px;
}

main.legal h5.legal-last-modified {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-stone);
    margin: 0 0 16px;
}

main.legal p {
    margin: 0 0 16px;
}

main.legal ul {
    margin: 0 0 16px;
    padding-left: 24px;
}

main.legal li {
    margin: 0 0 8px;
}

main.legal a {
    color: var(--signal-link);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 150ms cubic-bezier(0.2, 0, 0, 1);
}

main.legal a:hover,
main.legal a:focus-visible {
    color: var(--color-green-deep);
    outline: none;
}

/* ════════════════════════════════════════════════════════ */
/* DIAGNOSTICS (operator-only /check-server page)           */
/* ════════════════════════════════════════════════════════ */

/* Wider than the standard legal-page width — diagnostic tables run with
   long values (file paths, runtime descriptions). */
main.legal.diagnostics {
    max-width: 960px;
}

main.legal.diagnostics .diagnostics-snapshot {
    color: var(--color-stone);
    font-size: 14px;
    margin: 0 0 32px;
}

main.legal.diagnostics .diagnostics-table {
    width: 100%;
    max-width: var(--container-text);
    border-collapse: collapse;
    margin: 0 0 32px;
    font-size: 14px;
    line-height: 1.5;
}

main.legal.diagnostics .diagnostics-table th,
main.legal.diagnostics .diagnostics-table td {
    text-align: left;
    padding: 8px 12px;
    border: 1px solid rgba(26, 29, 26, 0.10);
    vertical-align: top;
}

main.legal.diagnostics .diagnostics-table th {
    /* --color-mist (#f5f6f5) — not defined as a token in this site's :root. */
    background: #f5f6f5;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    width: 30%;
}

main.legal.diagnostics .diagnostics-table td code {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--color-ink);
    background: transparent;
    padding: 0;
    word-break: break-word;
}

main.legal.diagnostics .diagnostics-actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 32px;
}

.diagnostics-btn {
    display: inline-block;
    align-self: flex-start;
    background: var(--color-green);
    color: var(--color-bone);
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1;
    padding: 12px 22px;
    text-decoration: none;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    transition: background 150ms cubic-bezier(0.2, 0, 0, 1);
}

.diagnostics-btn:hover {
    background: var(--color-green-deep);
    color: var(--color-bone);
}

.diagnostics-btn:focus-visible {
    outline: 2px solid var(--color-ochre);
    outline-offset: 4px;
}

/* ════════════════════════════════════════════════════════ */
/* RESPONSIVE — desktop bumps (mobile is the default above) */
/* ════════════════════════════════════════════════════════ */

@media (min-width: 480px) { /* --bp-sm */
    .site-footer nav { gap: 14px; }
}

@media (min-width: 768px) { /* --bp-md */
    /* Header — kept in sync with --site-header-height override above. */
    .site-header { padding: 22px 48px; }
    .site-header .sign-in { font-size: 14px; padding: 12px 22px; }

    /* Homepage */
    .hero { padding: 80px 48px; }
    .stack { width: 25%; }
    .wordmark { font-size: 42px; }
    .meander { max-width: 240px; height: 12px; }
    .sublabel { font-size: 9px; letter-spacing: 0.4em; }
    .tagline { font-size: 16px; }

    /* Site footer */
    .site-footer {
        padding: 22px 48px;
        flex-direction: row;
        align-items: center;
        gap: 24px;
        font-size: 10px;
    }

    /* Promo card */
    .promo { padding: 40px; }
    .promo-card { padding: 80px; }
    .promo-card-inner { padding: 64px 48px; }
    .promo-card-inner h2 { font-size: 32px; margin-bottom: 32px; }
    .promo-card-inner p { font-size: 18px; margin-bottom: 32px; }
    .promo-cta { font-size: 14px; padding: 14px 28px; }

    /* Legal pages */
    main.legal { padding: 80px 24px 96px; }
    main.legal h1 { font-size: 44px; margin-bottom: 32px; }
    main.legal h2 { font-size: 32px; margin-top: 48px; }
    main.legal h3 { font-size: 24px; margin-top: 32px; }

    /* Diagnostics — base styles already match the Apps look; only the
       button row goes horizontal on wider viewports. */
    main.legal.diagnostics .diagnostics-actions { flex-direction: row; }
}