:root {
    /*
     * Always-dark, frosted-glass palette. The artwork + dark aviation mood
     * are a fixed design decision (docs/design/homepage-direction.md), not
     * something that should invert for visitors in OS light mode, so there
     * is deliberately no `prefers-color-scheme` variant here anymore.
     */
    --ink: #f5f2ea;
    --ink-muted: #cdd2db;

    /*
     * Brightened from the brand gold (#e2b04a) specifically for text/link
     * contrast: against the darkest realistic case behind the glass card
     * (a bright sky pixel from the artwork, scrimmed, then covered by the
     * card's own translucent background) this clears ~5:1, comfortably
     * past WCAG AA's 4.5:1 for normal-size text. #e2b04a alone only
     * reached ~3.8:1 in that same worst case.
     */
    --accent: #f5cd7a;
    --focus: #f5cd7a;

    --line: rgba(255, 255, 255, 0.14);

    --glass-bg: rgba(19, 25, 34, 0.62);
    --glass-bg-soft: rgba(19, 25, 34, 0.55);
    --glass-border: rgba(255, 255, 255, 0.16);
    --glass-highlight: rgba(255, 255, 255, 0.07);

    /* `code` in /bot: a dark navy chip with light ink, for readability
       against the surrounding glass card. */
    --chip-bg: #f5f2ea;
    --chip-ink: #1c2430;
    --chip-border: rgba(255, 255, 255, 0.14);

    /*
     * The home page's hero copy sits on its own dedicated foreground
     * panel — a soft cream cloud graphic (.hero-cloud-panel), not directly
     * on the busy photographic background artwork — so the whole group
     * (tagline, divider, heading) shares one light-backdrop palette: dark
     * ink/warm-amber text on a light, known, controlled surface, rather
     * than colours separately tuned per element to survive wherever they
     * happened to land on the artwork itself. --hero-shadow is a single
     * faint, dark/neutral shadow for a printed-onto-the-poster feel, not a
     * legibility mechanism — contrast comes from the ink/accent colours
     * themselves (checked against the cloud PNG's own cream/pale-blue
     * tonal range).
     */
    --hero-ink: #1c2430;
    /* Deliberately a darker, deeper amber than the site's --accent gold:
       checked against #f5f0e0/#ddd3ba/#c9bfa6/#bcd6e8 (the cloud PNG's own
       cream-through-pale-blue tonal range), this clears WCAG AA's 4.5:1 in
       the worst of those on its own, with no shadow/glow required for
       contrast. Used for both the divider and the "Już wkrótce." heading —
       the heading's much larger size gives it visual prominence without
       needing a separate, lighter colour of its own. */
    --hero-accent: #6e3a0d;
    --hero-shadow: 0 2px 5px rgba(23, 16, 6, 0.22);
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    min-height: 100%;
    margin: 0;
    background-color: #10141b;
    color: var(--ink-muted);
    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
        sans-serif;
    line-height: 1.55;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* .hero below deliberately breaks out of .page's reading-width column
       to show the wider cloud panel — this is the safety net against that
       full-bleed technique ever introducing a horizontal scrollbar. */
    overflow-x: hidden;
}

a {
    color: var(--accent);
}

a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

/*
 * Full-screen background artwork (docs/design/homepage-direction.md).
 * A dedicated fixed, negative-z-index layer rather than a `body`
 * background: sizing it to the body itself would stretch/crop the image
 * against the *document's* height, which grows with page content (e.g.
 * the longer /bot article) rather than the viewport. `background-attachment:
 * fixed` was avoided as a simpler alternative since it is unreliable on
 * iOS Safari.
 *
 * A single "clean" version of the artwork (no AeroPraca lettering/cloud
 * painted into it) — the hero's own logo/cloud panel now provides all of
 * that as real, positionable foreground elements instead. One file is
 * served at every viewport size for now: unlike the previous two-file
 * split, this PNG has not yet been through a compression/resize pass
 * (no image tooling was available in the environment that added it — see
 * the handoff notes), so there is no pre-sized mobile variant to point to
 * yet. Revisit once one exists — background.png is a real, if temporary,
 * payload cost on mobile.
 *
 * The gradient's job is contrast, not just mood: .site-header/.site-footer
 * text used to sit directly on this artwork; now the footer sits on its
 * own frosted strip and only the header (on /bot) still touches the raw
 * scrim directly. The top/bottom bands stay dark enough on their own —
 * independent of whatever the image is doing there — to hold WCAG AA on
 * their own, before the glass layers add further darkening on top. Fixed
 * pixel-height bands (not %) keep that guarantee at any viewport height,
 * short landscape phones included. The middle band is lighter still —
 * the home hero's own cloud panel provides its text's contrast now (see
 * .hero-cloud-panel), so this band only needs to keep the artwork from
 * looking washed-out behind it, not carry any text-legibility duty of
 * its own.
 */
.bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(
            180deg,
            rgba(15, 19, 26, 0.72) 0,
            rgba(15, 19, 26, 0.2) 260px,
            rgba(15, 19, 26, 0.2) calc(100% - 260px),
            rgba(15, 19, 26, 0.78) 100%
        ),
        url("/background.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.page {
    width: 100%;
    max-width: 40rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/*
 * Frosted glass: a semi-transparent dark navy fill (never below ~0.55
 * alpha — deliberately not "too transparent", so the card reads as a
 * solid surface at a glance and stays legible against the busiest parts
 * of the artwork) plus a blur of whatever the .bg layer is doing behind
 * it, a soft light-on-dark border, and a top inner highlight to sell the
 * "edge of glass catching light" look. The outer shadow lifts it off the
 * background instead of relying on transparency for separation.
 */
.card {
    width: 100%;
    background: var(--glass-bg);
    color: var(--ink);
    border: 1px solid var(--glass-border);
    border-radius: 1rem;
    padding: clamp(2rem, 6vw, 3.5rem) clamp(1.5rem, 6vw, 3rem);
    margin: auto 0;
    backdrop-filter: blur(20px) saturate(130%);
    -webkit-backdrop-filter: blur(20px) saturate(130%);
    box-shadow:
        0 1.5rem 3rem rgba(6, 8, 11, 0.45),
        inset 0 1px 0 var(--glass-highlight);
}

.card--article {
    margin: 2rem 0;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: inherit;
}

.brand-mark {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
}

.brand-name {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

h1 {
    font-size: clamp(1.75rem, 6vw, 2.75rem);
    line-height: 1.3;
    font-weight: 600;
    margin: 0 0 1.75rem;
}

/*
 * Home page hero — a self-contained foreground composition (logo + tagline
 * + divider + heading) that sits on its own cloud graphic
 * (.hero-cloud-panel), independent of wherever the photographic background
 * artwork's own art happens to fall. `.hero` horizontally centers that one
 * group and deliberately anchors it toward the top of the available space
 * (see padding-top below) rather than dead-centre — nothing here is
 * positioned relative to the background image's own content, so there is
 * no viewport-specific nudging to maintain as the background/cloud/content
 * sizes change independently.
 */
.hero {
    /* Full-bleed breakout: .page caps its own width at 40rem for the
       site's normal reading-width content (the footer here, the article
       card on /bot), but the cloud panel below needs to grow up to 820px
       to read as a real poster-scale focal element. This escapes that
       constraint for .hero specifically rather than widening .page for
       every page — .site-footer keeps its own comfortable width via
       `width: fit-content`, unaffected by .hero's wider row around it. */
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(1.5rem, 4vw, 3rem) 1rem;
    /* Deliberate compositional placement (poster-style: title block in the
       upper portion of the frame, not dead-centre) — a real vh offset is
       fine here, unlike the removed alignment hacks, because it's no
       longer trying to dodge specific pixels baked into the artwork; the
       new background has no text/cloud of its own to avoid. */
    padding-top: clamp(0.5rem, 1.5vh, 1.25rem);
}

/*
 * The cloud panel: the PNG cloud graphic renders via a ::before pseudo-
 * element sized *larger* than the content box (see below) rather than as
 * the panel's own background-image. A cloud PNG this wide-and-flat
 * (~3:1) can't be locked to the panel's own content-driven aspect ratio
 * without either cropping its puffy edges (`cover`) or rendering it too
 * short to visually contain a multi-line text stack (`contain` sized to
 * the content box exactly) — oversizing the pseudo-element instead lets
 * the cloud render at its natural proportions while still comfortably
 * enveloping whatever height the real content stack needs at any font
 * size/line-wrap. The extra vertical reach (-22%) is larger than the
 * horizontal one (-8%) specifically because the cloud is wide/flat and
 * the content stack is comparatively tall.
 */
.hero-cloud-panel {
    position: relative;
    /* ~13% larger than the original min(92vw, 820px) — requested after
       the foreground cloud read as visually merged with the (since
       replaced) painted cloud mass behind it; enlarging it here is
       independent of that background change. */
    width: min(94vw, 930px);
    padding: clamp(2rem, 6vw, 4rem) clamp(1.75rem, 6vw, 4rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero-cloud-panel::before {
    content: "";
    position: absolute;
    inset: -22% -8%;
    background: center / contain no-repeat url("/hero-cloud.png");
    z-index: -1;
    pointer-events: none;
}

.hero-logo {
    /* 560px → 630px, the same ~13% bump as .hero-cloud-panel's width, so
       the logo doesn't hit its own px cap before the enlarged panel does. */
    width: min(78%, 630px);
    height: auto;
    display: block;
    margin: 0 auto clamp(1rem, 3vw, 1.5rem);
}

.hero-lead {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    font-weight: 500;
    font-size: clamp(1.1rem, 1rem + 1vw, 1.75rem);
    line-height: 1.35;
    color: var(--hero-ink);
    text-shadow: var(--hero-shadow);
    margin: 0 0 1.25rem;
}

.hero-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: clamp(160px, 30vw, 280px);
    margin: 0 auto;
    padding: 0.5rem 0;
}

.hero-divider::before,
.hero-divider::after {
    content: "";
    flex: 1;
    height: 1.5px;
    background: var(--hero-accent);
    opacity: 0.7;
}

.hero-divider svg {
    flex-shrink: 0;
    width: clamp(1.5rem, 3.5vw, 2.25rem);
    height: clamp(1.5rem, 3.5vw, 2.25rem);
    color: var(--hero-accent);
}

.hero-title {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    font-weight: 700;
    font-size: clamp(2.25rem, 1.4rem + 5vw, 4.5rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--hero-accent);
    text-shadow: var(--hero-shadow);
    margin: 1.25rem 0 0;
}

/*
 * Mobile/tablet: the cloud panel and its content scale down together as
 * one unit (min(92vw, 820px) already shrinks the panel itself on narrow
 * viewports) — this only tightens spacing and the pseudo-element's extra
 * reach so a shorter text stack (smaller fonts, tighter margins) still
 * sits comfortably inside a proportionally smaller cloud, rather than
 * floating in a now-oversized gap around it.
 */
@media (max-width: 640px) {
    .hero-cloud-panel::before {
        inset: -16% -4%;
    }

    .hero-logo {
        margin-bottom: 0.75rem;
    }

    .hero-lead {
        margin: 0 0 0.75rem;
    }

    .hero-title {
        margin-top: 0.75rem;
    }
}

/* Site-wide header used on non-home pages, e.g. /bot — sits directly on
   the background artwork, so it uses the light on-glass palette. */
.site-header {
    width: 100%;
    padding: 1.5rem 0 0;
    color: var(--ink);
}

/*
 * Footer shared by every page. Previously bare text directly on the
 * artwork, which read as faint/disconnected; it now gets the same
 * frosted-glass treatment as the main card, just smaller and a touch
 * lighter (--glass-bg-soft), so it clearly reads as an intentional
 * secondary element rather than competing with the card.
 */
.site-footer {
    align-self: center;
    width: fit-content;
    max-width: calc(100% - 2rem);
    margin: 1.75rem 0 2rem;
    padding: 0.9rem 1.75rem;
    border-radius: 1rem;
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(16px) saturate(130%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    box-shadow:
        0 0.75rem 2rem rgba(6, 8, 11, 0.3),
        inset 0 1px 0 var(--glass-highlight);
    text-align: center;
    font-size: 0.85rem;
    color: var(--ink-muted);
}

.site-footer a {
    color: var(--ink-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 150ms ease;
}

.site-footer a:hover,
.site-footer a:focus-visible {
    color: var(--accent);
}

.site-footer p {
    margin: 0.25rem 0;
}

/* /bot article styling */
article h1 {
    font-size: clamp(1.5rem, 4vw, 2.1rem);
    margin: 0 0 1rem;
}

article h2 {
    font-size: 1.1rem;
    margin: 2rem 0 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

article p,
article ul {
    margin: 0 0 1rem;
    color: var(--ink-muted);
}

article ul {
    padding-left: 1.25rem;
}

article li {
    margin-bottom: 0.4rem;
}

/* A dark, high-contrast callout for code — the literal User-Agent string
   today, and any inline `code` a future edit adds to the article — using
   --chip-* in :root (dark navy bg, light ink) rather than the reverse. */
article code {
    background: var(--chip-ink);
    border: 1px solid var(--chip-border);
    border-radius: 0.5rem;
    padding: 0.15rem 0.4rem;
    font-size: 0.85rem;
    color: var(--chip-bg);
    overflow-wrap: break-word;
    word-break: break-word;
}

article pre code,
article > code {
    display: block;
    padding: 0.9rem 1rem;
}

.back-link {
    display: inline-block;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    text-decoration: none;
    color: var(--ink-muted);
    transition: color 150ms ease;
}

.back-link:hover,
.back-link:focus-visible {
    color: var(--accent);
}