: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;

    /* 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. Update both desktop and mobile values
       below if header padding or button sizing changes. */
    --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. */
.site-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 48px;
}

.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: 14px;
    line-height: 1;
    padding: 12px 22px;
    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: 80px 48px;
    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: 25%;
    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: 42px;
    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: 240px;
    height: 12px;
    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: 9px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--color-bone);
    opacity: 0.78;
}

/* ── TAGLINE ──────────────────────────────────────────── */
.tagline {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    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: 22px 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 10px;
    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: 14px;
}
.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: 40px;
}

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

/* 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: 64px 48px;
    text-align: center;
}

.promo-card-inner h2 {
    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 32px;
}

.promo-card-inner p {
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.6;
    color: var(--color-ink);
    max-width: 560px;
    margin: 0 auto 32px;
    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: 14px;
    line-height: 1;
    padding: 14px 28px;
    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: 680px;
    margin: 0 auto;
    padding: 80px 24px 96px;
}

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

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

main.legal h3 {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    font-size: 24px;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--color-green-deep);
    margin: 32px 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%;
    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: 10px 12px;
    border-bottom: 1px solid rgba(26, 29, 26, 0.10);
    vertical-align: top;
}

main.legal.diagnostics .diagnostics-table th {
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--color-ink);
    width: 35%;
}

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;
    gap: 16px;
    margin-top: 32px;
}

.diagnostics-btn {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    padding: 14px 28px;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: filter 150ms cubic-bezier(0.2, 0, 0, 1);
}

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

.diagnostics-btn-error {
    background: var(--signal-error);
    color: var(--color-bone);
}

.diagnostics-btn-warning {
    background: var(--signal-warning);
    color: var(--color-ink);
}

/* ════════════════════════════════════════════════════════ */
/* RESPONSIVE                                               */
/* ════════════════════════════════════════════════════════ */

@media (max-width: 760px) {
    /* Header — keep --site-header-height in sync with the rendered height
       so the hero's calc() subtracts the right value at this breakpoint. */
    :root { --site-header-height: 73px; }
    .site-header { padding: 20px 24px; }
    .site-header .sign-in { font-size: 13px; padding: 10px 18px; }

    /* Homepage */
    .hero { padding: 56px 24px; }
    .stack { width: 100%; }

    /* Promo card */
    .promo { padding: 24px; }
    .promo-card { padding: 48px; }
    .promo-card-inner { padding: 40px 24px; }
    .promo-card-inner h2 { font-size: 24px; margin-bottom: 24px; }
    .promo-card-inner p { font-size: 16px; margin-bottom: 24px; }
    .promo-cta { font-size: 13px; padding: 12px 22px; }
    .wordmark { font-size: 26px; }
    .meander { max-width: 144px; height: 8px; }
    .sublabel { font-size: 6px; letter-spacing: 0.36em; }
    .tagline { font-size: 15px; }
    .site-footer {
        padding: 20px 24px;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        font-size: 9px;
    }

    /* Legal pages */
    main.legal { padding: 56px 24px 72px; }
    main.legal h1 { font-size: 32px; margin-bottom: 24px; }
    main.legal h2 { font-size: 24px; margin-top: 36px; }
    main.legal h3 { font-size: 20px; margin-top: 24px; }
}

@media (max-width: 460px) {
    .site-footer nav { gap: 10px; }
}

@media (max-width: 760px) {
    main.legal.diagnostics .diagnostics-table th { width: 40%; }
    main.legal.diagnostics .diagnostics-table th,
    main.legal.diagnostics .diagnostics-table td { padding: 8px 10px; }
    main.legal.diagnostics .diagnostics-actions { flex-direction: column; }
    .diagnostics-btn { font-size: 13px; padding: 12px 22px; }
}