/* ==========================================================================
   J-Keebs — Design System v4
   
   Design Philosophy: Nostalgic, elegant, earthy aesthetic. Warm gold accent
   with muted charcoal and cream tones. Sharp edges, no bevels or rounded corners.
   
   Design Elements:
   - Caslon serif for serene, classic headings
   - IBM Plex Sans for modern body text
   - Courier Prime monospace for structural/code elements
   - Playwrite DE Grund handwriting for project cheat sheets
   
   Responsive & Accessible:
   - Light/Dark theme via [data-theme] attribute
   - Full i18n support via [data-i18n] attributes
   - CSS custom properties for dynamic theming
   - Keyboard-navigable interactions
   - WCAG 2.1 AA color contrast compliance
   
   ========================================================================== */

/* FONTS: self-hosted (no third-party font requests)
   All four families are served from /fonts/ (woff2, Latin subset; licences
   and provenance in fonts/README.md). Paths are relative to this stylesheet,
   so they resolve correctly from every page. font-display: swap keeps text
   visible while a font loads. The --font-* tokens below keep their system
   fallbacks. Do not add third-party font <link> tags or @import rules. */

@font-face {
    font-family: "Libre Caslon Text";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("./fonts/libre-caslon-text-latin-400-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Libre Caslon Text";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("./fonts/libre-caslon-text-latin-400-italic.woff2") format("woff2");
}

@font-face {
    font-family: "Libre Caslon Text";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("./fonts/libre-caslon-text-latin-700-normal.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("./fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("./fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("./fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("./fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Courier Prime";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("./fonts/courier-prime-latin-400-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Courier Prime";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("./fonts/courier-prime-latin-700-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Silkscreen";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("./fonts/silkscreen-latin-400-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Silkscreen";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("./fonts/silkscreen-latin-700-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Playwrite DE Grund";
    font-style: normal;
    font-weight: 100 400;
    font-display: swap;
    src: url("./fonts/playwrite-de-grund-wght-normal.woff2") format("woff2");
}

:root,
[data-theme="dark"] {
    color-scheme: dark;

    /* COLOR PALETTE: Neutral swatches define the foundation
       All colors are named for their intended use, not their hex value,
       making future theme updates simpler. */
    
    --swatch-mocha: #8c7e74;
    --swatch-greige: #c3b8ad;
    --swatch-offwhite: #e9e3d3;
    --swatch-cream: #f4f0e1;
    --swatch-charcoal: #4c4b4e;
    --swatch-steel: #030a0c;
    --swatch-slate: #5c5654;
    --swatch-camel: #b2977e;
    --swatch-olive: #5a5c58;
    --swatch-terracotta: #b37563;

    /* SEMANTIC COLOR TOKENS: Map swatches to their function
       These variables are overridden per theme in [data-theme="light"] below. */
    
    --bg: #3a3736;                    /* Primary background */
    --surface: var(--swatch-charcoal); /* Cards, surfaces */
    --surface-2: var(--swatch-slate);  /* Secondary surfaces */
    --border: rgba(195, 184, 173, 0.16); /* Subtle borders */
    --border-strong: var(--swatch-mocha); /* Emphasized borders */
    --text: var(--swatch-cream);      /* Primary text */
    --text-dim: var(--swatch-greige); /* Secondary/muted text */

    --accent: #b3a078;                /* Primary accent color (warm gold) */
    --accent-bright: #cfbc96;         /* Lighter accent for hover states */
    --accent-shade: #6e644e;          /* Darker accent for depth */
    --accent-2: var(--swatch-greige); /* Secondary accent */
    --accent-2-bright: #ebded1;       /* Lighter secondary accent */

    --paper: var(--swatch-cream);     /* Paper background (illustrations, printed elements) */
    --paper-ink: var(--swatch-charcoal); /* Ink on paper */

    /* SHADOWS: Depth and layering */
    --shadow: 0 18px 40px rgba(6, 4, 2, 0.5); /* Strong shadows */
    --shadow-soft: 0 8px 20px rgba(6, 4, 2, 0.32); /* Subtle shadows */

    /* LAYOUT & SPACING */
    --radius: 0;      /* No border radius — sharp, clean aesthetic */
    --radius-sm: 0;   /* Consistent throughout */
    --max: 1180px;    /* Max content width for desktop layout */

    /* TYPOGRAPHY: Font family tokens */
    --font-display: "Libre Caslon Text", Georgia, "Times New Roman", serif;
    --font-body: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
    --font-mono: "Courier Prime", "Cascadia Code", Consolas, monospace;
    --font-hand: "Playwrite DE Grund", cursive;
    --font-keycap: "Helvetica", Arial, sans-serif;
}

[data-theme="light"] {
    /* LIGHT THEME: Inverts color values for comfortable daytime viewing.
       All semantic tokens are redefined here while maintaining hierarchy
       and contrast ratios. */
    color-scheme: light;

    --bg: var(--swatch-cream);
    --surface: var(--swatch-offwhite);
    --surface-2: var(--swatch-greige);
    --border: rgba(78, 78, 84, 0.14);
    --border-strong: var(--swatch-mocha);
    --text: var(--swatch-charcoal);
    --text-dim: var(--swatch-olive);

    --accent: #b3a078;
    --accent-bright: #cfbc96;
    --accent-shade: #6e644e;
    --accent-2: #61482c;
    --accent-2-bright: #a88771;

    --paper: #fafaf2;
    --paper-ink: var(--swatch-charcoal);

    --shadow: 0 18px 34px rgba(83, 84, 84, 0.479);
    --shadow-soft: 0 8px 18px rgba(83, 84, 84, 0.14);
}

* { box-sizing: border-box; }

button, input, textarea, select {
    appearance: none;
    -webkit-appearance: none;
    border-radius: 0;
}

.carousel-dots button { border-radius: 0; }

html {
    scroll-behavior: smooth;
    /* SCROLL OFFSET: Compensates for sticky header (~70-80px) so anchor links
       (#switches, #plates, #mods from guides navigation and dropdowns on any page)
       do not hide beneath the header. Set generously to ensure clear spacing. */
    scroll-padding-top: 96px;
    /* ROTATED GALLERIES: Polaroid frames are rotated via transform:rotate(),
       which does not change their layout width but does affect their rendered size.
       On narrow mobile widths, rotated edges can extend beyond the viewport,
       causing unwanted horizontal scrolling of the entire page. overflow-x:hidden
       cleanly clips this without affecting vertical scroll. */
    overflow-x: hidden;
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    margin: 0;
    background:
        radial-gradient(circle at 1px 1px, var(--border) 1px, transparent 0) 0 0 / 26px 26px,
        var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.65;
    overflow-wrap: break-word;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease, color 0.2s ease;
}

a, button, [role="button"] {
    touch-action: manipulation;
}

img { display: block; max-width: 100%; }

a { color: var(--accent-bright); text-decoration: none; }
a:hover { color: var(--accent); }

:focus-visible { 
    outline: 2px solid var(--accent-bright); 
    outline-offset: 3px; 
    border-radius: 2px;
}

/* Better focus state for buttons */
button:focus-visible { 
    outline: 2px solid var(--accent-bright); 
    outline-offset: 2px; 
}

p { margin: 0 0 1rem; max-width: 62ch; }
p:last-child { margin-bottom: 0; }

h1, h2, h3 {
    margin: 0;
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: 0.1px;
}



h1 { font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 5.2rem); font-weight: 700; line-height: 1.04; -webkit-text-stroke: 0.35px currentColor; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.9rem); }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); }
h4 { margin: 0; font-size: 0.95rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text); }

ul, ol { margin: 0; padding-left: 1.2rem; }
li + li { margin-top: 0.5rem; }

code { font-family: var(--font-mono); color: var(--accent-bright); }

.skip-link {
    position: absolute;
    left: 1rem;
    top: 0.75rem;
    z-index: 100;
    transform: translateY(-160%);
    background: var(--bg);
    color: var(--text);
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--accent);
}

.skip-link:focus { transform: translateY(0); }

/* =========================================================================
   HEADER & NAVIGATION LAYOUT
   ========================================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.9rem;
    padding: calc(0.85rem + env(safe-area-inset-top)) calc(clamp(1rem, 4vw, 2.5rem) + env(safe-area-inset-right)) 0.85rem calc(clamp(1rem, 4vw, 2.5rem) + env(safe-area-inset-left));
    background: rgba(54, 56, 58, 0.92);
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    border-bottom: 1px solid var(--border-strong);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0 9px;
    border: 2px solid var(--accent);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.12s ease;
}

.nav-toggle:active,
.nav-toggle[aria-expanded="true"] {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.nav-toggle:active {
    transform: scale(0.94);
}

.nav-toggle:focus-visible {
    outline: 2px solid var(--accent-bright);
    outline-offset: 2px;
}

.nav-toggle span {
    display: block;
    height: 2px;
    background: var(--accent);
    transform-origin: center;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1280px) {
    .site-header {
        justify-content: space-between;
        padding: calc(0.75rem + env(safe-area-inset-top)) calc(1rem + env(safe-area-inset-right)) 0.75rem calc(1rem + env(safe-area-inset-left));
    }

    .nav-toggle {
        display: flex;
    }

    .lang-toggle, .theme-toggle {
        height: 38px;
    }

    .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 25;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        max-height: 0;
        overflow: hidden;
        overflow-x: hidden;
        white-space: normal;
        font-size: 1rem;
        background: var(--bg);
        border-bottom: 1px solid var(--border-strong);
        box-shadow: var(--shadow);
        transition: max-height 0.25s ease;
    }

    .site-nav.is-open {
        max-height: 80vh;
        overflow-y: auto;
    }

    .site-nav > a {
        padding: 0.95rem calc(1.2rem + env(safe-area-inset-right)) 0.95rem calc(1.2rem + env(safe-area-inset-left));
        border-bottom: 1px solid var(--border);
        text-align: center;
        transform: none;
    }

    .site-nav > a:last-child {
        border-bottom: 0;
    }

    /* MOBILE UTILITY NAV: Language and theme toggles are now positioned
       inside the mobile dropdown (moved from fixed right position on desktop).
       They get their own row with centered alignment instead of right-aligned. */
    .site-nav .utility-nav {
        margin-left: 0;
        justify-content: center;
        gap: 0.75rem;
        padding: 1rem calc(1.2rem + env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom)) calc(1.2rem + env(safe-area-inset-left));
        border-top: 1px solid var(--border);
    }

    /* MOBILE DROPDOWN ACCORDION: The "Guides & Tutorials" menu is now an
       accordion row in the mobile dropdown. The trigger behaves like a normal
       nav item with the panel collapsing below it, unlike the floating
       desktop panel implementation. */
    .nav-dropdown {
        display: block;
        width: 100%;
        border-bottom: 1px solid var(--border);
    }

    .nav-dropdown__trigger {
        display: flex;
        width: 100%;
        justify-content: center;
        padding: 0.95rem calc(1.2rem + env(safe-area-inset-right)) 0.95rem calc(1.2rem + env(safe-area-inset-left));
        text-align: center;
    }

    .nav-dropdown__panel {
        width: 100%;
        max-height: 0;
        overflow: hidden;
        background: color-mix(in srgb, var(--surface-2) 55%, var(--bg));
        transition: max-height 0.22s ease;
    }

    .nav-dropdown.is-open .nav-dropdown__panel {
        max-height: 11rem;
    }

    .nav-dropdown__panel a {
        padding: 0.8rem calc(1.2rem + env(safe-area-inset-right)) 0.8rem calc(1.2rem + env(safe-area-inset-left));
        text-align: center;
    }
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--text);
    min-width: 0;
}

.brand__logo {
    display: block;
    height: 2.8rem;
    width: auto;
}

.footer-logo {
    display: block;
    width: min(11rem, 100%);
    height: auto;
    margin-bottom: 0.85rem;
}

.brand:hover .brand__logo {
    transform: translateY(-1px);
}

.brand:active .brand__logo {
    transform: translateY(1px);
}

.brand__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.card--wide { grid-column: 1 / -1; }

.site-nav {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    margin-left: clamp(0.5rem, 1.8vw, 1.8rem);
    min-width: 0;
    gap: 0.1rem;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
}

.site-nav::-webkit-scrollbar {
    display: none;
}

.site-nav > a,
.nav-dropdown__trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    border: 0;
    background: transparent;
    color: var(--text-dim);
    padding: 0.6rem 0.55rem;
    font: inherit;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: color 0.15s ease, transform 0.12s ease;
}

/* NAVIGATION UNDERLINE: Animated line accent that appears on hover and remains
   visible on the current page. Uses the same press/lift physics as the keycap logo
   (.keycap:hover/:active) but with subtle restraint. */
.site-nav > a::after,
.nav-dropdown__trigger::after {
    content: "";
    position: absolute;
    left: 0.55rem;
    right: 0.55rem;
    bottom: 0.32rem;
    height: 2px;
    background: var(--accent-bright);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (hover: hover) and (min-width: 1281px) {
    .site-nav > a:hover,
    .nav-dropdown__trigger:hover {
        color: var(--accent-bright);
        transform: translateY(-1px);
    }

    .site-nav > a:hover::after,
    .nav-dropdown__trigger:hover::after {
        transform: scaleX(1);
    }
}

.site-nav > a:active,
.nav-dropdown__trigger:active {
    transform: translateY(1px);
}

.site-nav > a[aria-current="page"],
.nav-dropdown__trigger[aria-expanded="true"],
.nav-dropdown__trigger[aria-current] {
    color: var(--accent-bright);
}

.site-nav > a[aria-current="page"]::after,
.nav-dropdown__trigger[aria-expanded="true"]::after,
.nav-dropdown__trigger[aria-current]::after {
    transform: scaleX(1);
}

/* MOBILE ACCENT BAR: On mobile, the pseudo-element accent transforms from an
   underline to a vertical left bar (opposite of desktop). IMPORTANT: This block
   must come AFTER the base rule above. Both selectors have identical specificity,
   and in cascade conflicts, the last rule in source order wins regardless of
   media query state. If this block were placed before the base rule, desktop
   properties (bottom/height) would incorrectly override mobile styles from the
   media query—resulting in a 3×2px dot instead of a full-height bar. Placing
   this after ensures correct mobile styling. */
@media (max-width: 1280px) {
    .site-nav > a::after,
    .nav-dropdown__trigger::after {
        left: 0;
        right: auto;
        bottom: 0;
        top: 0;
        width: 3px;
        height: auto;
        transform: scaleY(0);
        transform-origin: top;
    }

    .site-nav > a[aria-current="page"]::after,
    .site-nav > a:active::after,
    .nav-dropdown__trigger[aria-expanded="true"]::after,
    .nav-dropdown__trigger[aria-current]::after {
        transform: scaleY(1);
    }
}

/* =========================================================================
   GUIDES & TUTORIALS DROPDOWN MENU
   ========================================================================= */

.nav-dropdown {
    position: relative;
    display: inline-flex;
    align-items: stretch;
}

@media (max-width: 1280px) {
    .nav-dropdown {
        display: block;
    }

    .nav-dropdown__trigger {
        display: flex;
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .nav-dropdown__panel {
        width: 100%;
    }
}

.nav-dropdown__panel a {
    display: block;
    color: var(--text-dim);
    padding: 0.55rem 0.7rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.nav-dropdown__panel a:hover,
.nav-dropdown__panel a[aria-current="page"] {
    background: var(--accent);
    color: var(--bg);
}

@media (min-width: 1281px) {
    /* FIXED POSITIONING FOR DROPDOWN: We use position:fixed instead of absolute
       because .nav-dropdown is nested within .site-nav which has overflow-x:auto
       (safety net for too many nav items on narrow desktops). Per CSS spec,
       when one axis is 'auto', the other cannot be 'visible', so overflow-y
       becomes 'auto'. This clips the panel that extends below (top:100%),
       making it invisible despite correct opacity/visibility (the arrow rotates
       correctly, but the panel doesn't show). Using position:fixed lets the panel
       escape this clipping. Position is calculated relative to the viewport via
       JavaScript (main.js, initNavDropdowns -> positionPanel) since top/left
       with fixed positioning don't respect .nav-dropdown's coordinates. */
    .nav-dropdown__panel {
        position: fixed;
        top: 0;
        left: 0;
        min-width: 190px;
        padding: 0.4rem;
        background: var(--surface);
        border: 1px solid var(--border-strong);
        box-shadow: var(--shadow);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-4px);
        transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
        z-index: 40;
    }

    .nav-dropdown:focus-within .nav-dropdown__panel,
    .nav-dropdown:hover .nav-dropdown__panel,
    .nav-dropdown.is-open .nav-dropdown__panel {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

/* On desktop, hover and keyboard focus reveal the categories. The parent label
    still navigates to guides.html; that destination restores the open state when
    it was reached through the label. */

.utility-nav {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 0.6rem;
    margin-left: auto;
}

/* =========================================================================
   LANGUAGE & THEME TOGGLE BUTTONS
   ========================================================================= */

.lang-toggle,
.theme-toggle {
    position: relative;
    display: inline-flex;
    width: 70px;
    height: 32px;
    box-sizing: border-box;
    border: 2px solid var(--accent);
    background: transparent;
    border-radius: 6px;
    overflow: hidden;
    vertical-align: middle;
}

.lang-toggle button,
.theme-toggle button {
    flex: 1 1 50%;
    border: 0;
    background: transparent;
    color: var(--accent);
    font: inherit;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.lang-toggle button[aria-pressed="true"],
.theme-toggle button[aria-pressed="true"] {
    background: var(--accent);
    color: var(--bg);
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.28);
}

@media (hover: hover) {
    .lang-toggle button:not([aria-pressed="true"]):hover,
    .theme-toggle button:not([aria-pressed="true"]):hover {
        background: transparent;
        color: var(--accent-bright);
        transform: translateY(-1px);
    }
}

.theme-toggle button svg { width: 13px; height: 13px; fill: currentColor; stroke: currentColor; }

/* =========================================================================
   HERO SECTION (Illustrative with scattered keycaps, not photo)
   ========================================================================= */

.hero {
    border-bottom: 1px solid var(--border-strong);
    background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
}

.hero__inner {
    width: min(var(--max), 100%);
    max-width: 840px;
    margin: 0 auto;
    padding: clamp(3.2rem, 8vw, 6rem) clamp(1rem, 4vw, 2rem);
}

@media (max-width: 768px) {
    .hero__inner {
        padding: clamp(2rem, 6vw, 3rem) clamp(1rem, 4vw, 1.5rem);
    }
}

@media (max-width: 480px) {
    .hero__inner {
        padding: 1.5rem 1rem;
    }
}

.hero__lead {
    max-width: 560px;
    margin-top: 1.1rem;
    color: var(--text-dim);
    font-size: clamp(1rem, 1.6vw, 1.15rem);
}

.hero__actions, .section__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.6rem;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 0.7rem 1.1rem;
    background: var(--accent);
    color: var(--bg);
    cursor: pointer;
    font: inherit;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: none;
    letter-spacing: 0.04em;
    box-shadow: 0 3px 0 var(--accent-shade);
    transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}

@media (hover: hover) {
    .button:hover { 
        background: var(--accent-bright); 
        color: var(--bg); 
        transform: translateY(2px); 
        box-shadow: 0 1px 0 var(--accent-shade); 
    }
}

.button:active {
    transform: translateY(3px);
    box-shadow: 0 0px 0 var(--accent-shade);
}

.button:focus-visible {
    outline: 2px solid var(--accent-bright);
    outline-offset: 2px;
}

.button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.button--secondary { 
    background: transparent; 
    color: var(--text); 
    border-color: var(--border-strong); 
    box-shadow: none; 
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

@media (hover: hover) {
    .button--secondary:hover { 
        background: var(--surface-2); 
        color: var(--text); 
        transform: none; 
        border-color: var(--text-dim);
    }
}

.button--ghost { 
    background: transparent; 
    border-color: var(--border-strong); 
    color: var(--accent-bright); 
    box-shadow: none; 
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

@media (hover: hover) {
    .button--ghost:hover { 
        background: var(--surface-2); 
        color: var(--accent-bright); 
        transform: none; 
        border-color: var(--accent-bright);
    }
}

@media (max-width: 640px) {
    .button {
        min-height: 2.5rem;
        padding: 0.6rem 0.9rem;
        font-size: 0.8rem;
    }
}

.hero__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
    max-width: 560px;
    margin-top: clamp(1.6rem, 4vw, 2.4rem);
}

@media (max-width: 768px) {
    .hero__stats {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.stat { 
    border-left: 4px solid var(--accent); 
    padding: 1rem;
    padding-left: 1rem;
    background: var(--surface);
    border-radius: 2px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

@media (hover: hover) {
    .stat:hover {
        background: rgba(158, 141, 105, 0.08);
        border-left-color: var(--accent-bright);
    }
}

.stat strong { 
    display: block; 
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2.2vw, 1.6rem); 
    line-height: 1.1;
    margin-bottom: 0.4rem;
}

.stat span { 
    display: block; 
    color: var(--text-dim); 
    font-size: 0.85rem; 
    line-height: 1.4;
    font-weight: 500;
}

.eyebrow {
    margin: 0 0 0.7rem;
    color: var(--accent);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    display: inline-block;
}

/* -- Abschnitte -- */

.section { padding: clamp(2.6rem, 7vw, 5rem) clamp(1rem, 4vw, 2rem); border-bottom: 1px solid var(--border); }
.section--muted { background: var(--surface); }
.section--paper { background: var(--paper); color: var(--paper-ink); }
.section--paper h2, .section--paper h3, .section--paper h4 { color: var(--paper-ink); }
.section--paper .eyebrow { color: var(--accent); }
.section--paper .muted { color: #6b5c42; }
.section--paper a { color: var(--accent); }
.section--paper a:hover { color: var(--accent); }

.section__inner, .section__head, .page-hero, .site-footer__inner { width: min(var(--max), 100%); margin: 0 auto; }

.section__head { 
    display: flex; 
    align-items: flex-end; 
    justify-content: space-between; 
    gap: 1.5rem; 
    margin-bottom: clamp(1.5rem, 4vw, 2.4rem); 
    flex-wrap: wrap;
}

.section__head p { max-width: 540px; color: var(--text-dim); }

/* Zweite Spalte im Kategorie-Kopf auf guides.html: Intro-Text + automatisch
   berechnetes Status-Badge ("1 von 2 verfügbar") übereinander statt nebeneinander,
   damit .section__head weiterhin nur 2 Flex-Kinder hat (space-between bleibt stabil). */
.section__head-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

@media (max-width: 768px) {
    .section__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}

.muted { color: var(--text-dim); }

.grid { display: grid; gap: 1rem; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1024px) {
    .grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .grid--2,
    .grid--3 {
        grid-template-columns: 1fr;
    }
}

.card { 
    background: var(--surface); 
    border: 1px solid var(--border-strong); 
    border-radius: var(--radius); 
    box-shadow: var(--shadow-soft); 
    overflow: hidden; 
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

@media (hover: hover) {
    .card:hover {
        box-shadow: var(--shadow);
        transform: translateY(-4px);
        border-color: var(--accent);
    }
}

.card__body { 
    padding: clamp(1.2rem, 2.5vw, 1.8rem); 
}

.card h3 + p, .card h4 + p { 
    margin-top: 0.6rem; 
}

.card .meta {
    display: inline-block;
    margin-bottom: 0.75rem;
    padding: 0.3rem 0.6rem;
    background: var(--accent);
    color: var(--bg);
    border-radius: 3px;
}

.meta { 
    margin-bottom: 0.8rem; 
    color: var(--accent); 
    font-family: var(--font-body); 
    font-size: 0.75rem; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 0.08em;
    display: inline-block;
    padding: 0.3rem 0.6rem;
    background: rgba(158, 141, 105, 0.1);
    border-radius: 2px;
}

/* Karten mit mehreren Badges (z. B. Kategorie + Werbekennzeichnung) */
.card__badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
}

.card__badges .meta {
    margin-bottom: 0;
}

.badge--disclosure {
    display: inline-block;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--accent);
    border-radius: 2px;
    color: var(--accent);
    background: transparent;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* PARTNER LOGO BAND: Uses the full-width header approach instead of a small
   sticker logo, mounted on --paper background. This maintains the "photo on
   paper" visual language used for Polaroid frames elsewhere, adapted here
   for partner logos with unknown color schemes. */
.partner-card__logo-band {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.7rem 1.4rem;
    background: var(--paper);
    border-bottom: 1px solid var(--border);
}

.partner-card__logo {
    display: block;
    width: 100%;
    max-width: 200px;
    height: auto;
    object-fit: contain;
}

/* TEXT WORDMARK: Stand-in for partners without a supplied logo file yet
   (e.g. OWA LABS). Sits in the same .partner-card__logo-band slot as
   .partner-card__logo, so the two card types line up visually; swap this
   for a real <img class="partner-card__logo"> once artwork exists. Uses
   --accent-shade (identical value in both themes) rather than --accent-2
   (which shifts toward the paper's own tone in dark mode) so contrast on
   the light --paper background stays reliable regardless of site theme. */
.partner-card__wordmark {
    margin: 0;
    padding: 1.6rem 0;
    color: var(--accent-shade);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: 0.03em;
    text-align: center;
}

/* HEADING SEMANTICS: Semantically this should be h2 (no wrapper h2 before the card
   on this page per initGuideJumpnav comment on heading hierarchy), but visually
   it maintains the same size as card titles on guide/blog pages (which correctly
   use h3 because they sit under an h2 section). */
.partner-card h2 {
    font-size: clamp(1.15rem, 1.7vw, 1.4rem);
}

/* =========================================================================
   WORKBENCH TIMELINE
   ========================================================================= */

.timeline { 
    position: relative; 
    margin-top: 1.8rem; 
    padding-left: 1.53rem; 
    border-left: 3px solid var(--accent); 
}

.timeline-entry { 
    position: relative; 
    padding-bottom: 1.8rem; 
}

.timeline-entry:last-child { 
    padding-bottom: 0; 
}

.timeline-entry::before {
    content: "";
    position: absolute;
    left: -2rem;
    top: 0.35rem;
    width: 0.7rem;
    height: 0.7rem;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 0 5px var(--bg), 0 0 0 6px var(--accent);
    transition: transform 0.2s ease;
}

.timeline-entry:hover::before {
    transform: scale(1.3);
}

.timeline-entry__label { 
    display: block; 
    font-family: var(--font-body); 
    color: var(--accent); 
    font-size: 0.8rem; 
    font-weight: 700;
    letter-spacing: 0.06em; 
    margin-bottom: 0.3rem; 
    text-transform: uppercase; 
}

.timeline-entry p { 
    color: var(--text-dim); 
    margin: 0; 
    line-height: 1.6;
}

/* =========================================================================
   PORTFOLIO GALLERY: Photo carousel with cheat sheet that slides out below
   ========================================================================= */

.gallery-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    align-items: start;
    gap: clamp(2rem, 4vw, 2.6rem);
}

@media (max-width: 768px) {
    .gallery-row {
        grid-template-columns: 1fr;
    }
}

.gallery-item { display: flex; }

.gallery-item__stage {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* CHEAT SHEET STACK: The visible "paper" box with expand animation and shadow.
   Each gallery photo gets its own .cheat-sheet card inside; main.js switches
   via .is-active to show only the card matching the active photo
   (see initGallery -> cheatSlides). */
.cheat-sheet-stack {
    order: 2;
    margin-top: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0 1.2rem;
    background: var(--paper);
    color: var(--paper-ink);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    font-family: var(--font-hand);
    transition: max-height 0.3s ease, opacity 0.2s ease, margin-top 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item__stage:hover .cheat-sheet-stack,
.gallery-item__stage:focus-within .cheat-sheet-stack,
.gallery-item__stage.is-open .cheat-sheet-stack {
    margin-top: 0.6rem;
    max-height: 22rem;
    opacity: 1;
    padding: 1rem 1.2rem;
    box-shadow: var(--shadow-soft);
}

.cheat-sheet { display: none; }
.cheat-sheet.is-active { display: block; }

.cheat-sheet h2, .cheat-sheet h3 { font-family: var(--font-hand); color: var(--paper-ink); font-size: 1.5rem; margin-bottom: 0.35rem; }
.cheat-sheet__desc { margin: 0 0 0.6rem; font-family: var(--font-hand); font-size: 1rem; font-weight: 400; font-style: italic; line-height: 1.35; opacity: 0.85; }
.cheat-sheet ul { list-style: none; padding: 0; margin: 0; font-size: 0.8rem; font-weight: 800; line-height: 1.4; }
.cheat-sheet li + li { margin-top: 0.1rem; }
.cheat-sheet li strong { color: var(--accent-2); font-family: var(--font-mono); font-size: 1rem; letter-spacing: 0.02em; }

.polaroid-frame {
    order: 1;
    position: relative;
    z-index: 2;
    width: 90%;
    background: var(--paper);
    padding: 0.55rem 0.55rem 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transform: rotate(var(--tilt, -1.2deg));
    cursor: pointer;
    transition: transform 0.2s ease;
}

.polaroid-frame:hover {
    transform: rotate(var(--tilt, -1.2deg)) scale(1.02);
}

.cheat-toggle {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    z-index: 3;
    width: 30px;
    height: 30px;
    border: 1.5px solid var(--accent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--bg) 65%, transparent);
    color: var(--accent-bright);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.cheat-toggle::before {
    /* TOUCH TARGET ENLARGEMENT: Invisible expansion to ~44px without visually
       enlarging the badge. Improves mobile usability. */
    content: "";
    position: absolute;
    inset: -7px;
}

@media (hover: hover) {
    .cheat-toggle:hover { background: var(--accent); color: var(--bg); }
}

.cheat-toggle:focus-visible {
    outline: 2px solid var(--accent-bright);
    outline-offset: 2px;
}

.gallery-item__stage:hover .cheat-toggle,
.gallery-item__stage.is-open .cheat-toggle {
    background: var(--accent);
    color: var(--bg);
}

.polaroid-frame__viewport { 
    position: relative; 
    aspect-ratio: 16 / 9;
    overflow: hidden; 
    background: var(--bg);
}

.polaroid-frame__viewport img,
.polaroid-frame__viewport .media-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    border: 0;
    border-radius: 0;
    transition: opacity 0.2s ease;
    background: var(--bg);
}

.polaroid-frame__viewport img.is-active,
.polaroid-frame__viewport .media-placeholder.is-active { 
    opacity: 1; 
}

.polaroid-frame__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.2rem 0.7rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--paper-ink);
}

.polaroid-frame__caption {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: var(--paper-ink);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.carousel-btn {
    border: 1px solid var(--border-strong);
    background: transparent;
    color: var(--paper-ink);
    width: 1.6rem;
    height: 1.6rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: var(--font-mono);
    line-height: 1;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

@media (hover: hover) {
    .carousel-btn:hover { 
        background: var(--accent); 
        color: var(--bg); 
        border-color: var(--accent); 
    }
}

.carousel-btn:active {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
}

.carousel-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .carousel-btn {
        width: 2.2rem;
        height: 2.2rem;
    }
}

.carousel-dots { display: flex; gap: 0.3rem; }

.carousel-dots button {
    position: relative;
    width: 0.5rem;
    height: 0.5rem;
    padding: 0;
    border: 1px solid var(--border-strong);
    background: transparent;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.carousel-dots button::before {
    /* etwas größere Tippfläche, bewusst zurückhaltend dosiert, damit sich eng
       beieinanderliegende Dots nicht gegenseitig überlappen. */
    content: "";
    position: absolute;
    inset: -5px;
}

@media (max-width: 640px) {
    .carousel-dots { gap: 0.45rem; }
    .carousel-dots button { width: 0.65rem; height: 0.65rem; }
}

.carousel-dots button[aria-current="true"] { 
    background: var(--accent); 
    border-color: var(--accent); 
}

.carousel-dots button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.single-polaroid {
    width: 100%;
    height: 100%;
    margin: 0;
    background: var(--paper);
    padding: 0.65rem 0.65rem 0.85rem;
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow);
    transform: rotate(var(--tilt, 1deg));
    transition: transform 0.2s ease;
}

.single-polaroid:hover {
    transform: rotate(var(--tilt, 1deg)) scale(1.02);
}

.single-polaroid img {
    width: 100%;
    height: fit-content;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    object-position: center;
    background: var(--bg);
    cursor: pointer;
}

.single-polaroid figcaption {
    margin-top: 0.55rem;
    color: var(--paper-ink);
    font-family: var(--font-mono);
    font-weight: 600;
    line-height: 1;
    text-align: center;
}

/* =========================================================================
   ACCESSORIES: TAG LIST
   ========================================================================= */

.tag-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; padding: 0; list-style: none; font-family: var(--font-mono); }

.tag-list li, .pill {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 0.25rem 0.55rem;
    color: var(--text-dim);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

a.pill {
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

@media (hover: hover) {
    a.pill:hover {
        background: var(--accent);
        border-color: var(--accent);
        color: var(--bg);
    }
}

a.pill:focus-visible {
    outline: 2px solid var(--accent-bright);
    outline-offset: 2px;
}

/* PARTNER GRID: Starts with 1 card (PCBWay) — using .grid--3 would isolate it
   at top left with dead space to the right. auto-fit with fixed card width +
   justify-content:center centers the current single-card layout and naturally
   grows to a centered multi-column grid as more partners are added, without
   requiring rule updates. */
.partner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 360px));
    justify-content: center;
    gap: 1.4rem;
}

/* -- Guides & Tutorials: Schnellsprung-Leiste zu den drei Kategorien -- */

.guide-jumpnav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.4rem;
}

/* Wird per IntersectionObserver (main.js -> initGuideJumpnav) gesetzt, sobald
   die zugehörige Kategorie im Viewport ist. */
.guide-jumpnav .pill[aria-current="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg);
}

/* =========================================================================
   GUIDES & TUTORIALS: Individual guide card styling
   ========================================================================= */

.guide-card__link {
    display: block;
    color: inherit;
}

.guide-card__link:hover { color: inherit; }

.guide-card--pending {
    opacity: 0.7;
}

@media (hover: hover) {
    .guide-card--pending:hover {
        transform: none;
        box-shadow: var(--shadow-soft);
        border-color: var(--border-strong);
    }
}

.guide-card__status {
    display: inline-block;
    margin-top: 0.7rem;
    padding: 0.2rem 0.5rem;
    border: 1px dashed var(--border-strong);
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.guide-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.7rem;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Verschachtelte Unterpunkte innerhalb einer Karte (z. B. Mods > Switches > Lubing) */
.guide-card__subitems {
    margin: 0.9rem 0 0;
    padding: 0.7rem 0 0;
    border-top: 1px solid var(--border);
    list-style: none;
}

.guide-card__subitems li {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.76rem;
}

.guide-card__subitems li + li {
    margin-top: 0.35rem;
}

.guide-card__subitems li::before {
    content: "–";
    color: var(--accent);
}

/* -- Social-Icons -- */

.social-links { display: flex; gap: 0.6rem; }

.social-links a {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius);
    border: 1px solid var(--border-strong);
    color: var(--text-dim);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

@media (hover: hover) {
    .social-links a:hover { 
        background: var(--accent); 
        border-color: var(--accent); 
        color: var(--bg); 
    }
}

.social-links a:active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg);
}

.social-links a:focus-visible {
    outline: 2px solid var(--accent-bright);
    outline-offset: 2px;
}

.social-links svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }

/* =========================================================================
   FOOTER
   ========================================================================= */

.site-footer { background: var(--surface); color: var(--text-dim); padding: clamp(2.2rem, 6vw, 3.4rem) calc(clamp(1rem, 4vw, 2rem) + env(safe-area-inset-right)) calc(1.3rem + env(safe-area-inset-bottom)) calc(clamp(1rem, 4vw, 2rem) + env(safe-area-inset-left)); border-top: 1px solid var(--border-strong); }
.site-footer a { color: var(--text-dim); }
.site-footer a:hover, .site-footer a[aria-current="page"] { color: var(--accent-bright); }
.site-footer__inner { display: grid; gap: 2rem; }

.footer-grid { 
    display: grid; 
    grid-template-columns: 1.4fr repeat(3, minmax(140px, 0.7fr)); 
    gap: 1.2rem; 
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

.footer-grid h2, .footer-grid h3 { color: var(--text); }
.footer-grid h2 { font-size: 1.35rem; }

.footer-credit {
    margin-top: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    letter-spacing: 0.02em;
}

.footer-grid h3 { 
    margin-bottom: 0.65rem; 
    font-family: var(--font-mono); 
    font-size: 0.78rem; 
    text-transform: uppercase; 
    letter-spacing: 0.05em; 
    color: var(--accent); 
}
.footer-grid ul { padding: 0; list-style: none; }

.footer-bottom { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 1rem; 
    padding-top: 1rem; 
    border-top: 1px solid var(--border); 
    font-size: 0.82rem; 
    font-family: var(--font-mono); 
    flex-wrap: wrap;
}

.footer-bottom nav { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 0.8rem; 
}

@media (max-width: 640px) {
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .footer-bottom nav {
        width: 100%;
    }
}

/* =========================================================================
   BREADCRUMB NAVIGATION (Return path from guide subpages to overview)
   ========================================================================= */

.breadcrumb {
    width: min(var(--max), 100%);
    margin: 0 auto;
    padding: 1.3rem clamp(1rem, 4vw, 2rem) 0;
}

.breadcrumb a {
    display: inline-flex;
    align-items: center;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.15s ease;
}

@media (hover: hover) {
    .breadcrumb a:hover {
        color: var(--accent-bright);
    }
}

.breadcrumb a:focus-visible {
    outline: 2px solid var(--accent-bright);
    outline-offset: 3px;
}

/* SPLIT LAYOUT: Text and image side-by-side (e.g., "Current Project" on homepage).
   Previously implemented as inline styles (which cannot be overridden by media
   queries regardless of specificity). Now implemented as a proper class with
   responsive collapse in the existing 980px rule below. */
.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.85fr);
    gap: clamp(1.4rem, 5vw, 4rem);
    align-items: center;
}

/* =========================================================================
   PAGE HERO SECTION (for subpages without large hero images)
   ========================================================================= */

.page-hero {
    display: grid;
    grid-template-columns: minmax(0, 0.98fr) minmax(280px, 0.8fr);
    gap: clamp(1.5rem, 5vw, 3.5rem);
    align-items: center;
    padding: clamp(2.6rem, 7vw, 5rem) clamp(1rem, 4vw, 2rem);
    border-bottom: 1px solid var(--border-strong);
}

@media (max-width: 768px) {
    .page-hero {
        grid-template-columns: 1fr;
    }
}

.page-hero--single { display: block; max-width: 880px; }
.page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
.page-hero p { margin-top: 0.9rem; color: var(--text-dim); font-size: 1.05rem; }

.about-intro__copy { max-width: 58ch; }
.about-intro__copy .lead { font-size: clamp(1.15rem, 2vw, 1.35rem); line-height: 1.55; color: var(--text); }
.about-story__layout { display: grid; grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1fr); gap: clamp(2rem, 7vw, 6rem); align-items: start; }
.about-story__layout > div:first-child { position: sticky; top: 7rem; }
.about-story__copy { max-width: 68ch; }
.about-story__copy p + p { margin-top: 1.35rem; }
.about-pillars .section__head { align-items: end; }
.about-pillars .section__head > p { max-width: 42ch; }
.about-pillar { height: 100%; }

@media (max-width: 768px) {
    .about-story__layout { grid-template-columns: 1fr; gap: 1.4rem; }
    .about-story__layout > div:first-child { position: static; }
}

/* -- Feature-Liste -- */

.feature-list { display: grid; gap: 0.85rem; margin-top: 1.3rem; padding: 0; list-style: none; }
.feature-list li { border-left: 3px solid var(--accent); padding-left: 0.9rem; }

/* -- Fullscreen Image Viewer -- */

.fullscreen-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 1rem;
}

.fullscreen-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

.fullscreen-overlay__container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fullscreen-overlay__image {
    display: block;
    width: min(90vw, 1400px);
    max-width: 100%;
    max-height: 90vh;
    height: auto;
    object-fit: contain;
    object-position: center;
    border-radius: 4px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
    background: rgba(255,255,255,0.04);
}

.fullscreen-overlay__nav,
.fullscreen-overlay__close {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    color: white;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.35);
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.fullscreen-overlay__nav,
.fullscreen-overlay__close {
    font-size: 0;
}

.fullscreen-overlay__nav::before,
.fullscreen-overlay__close::before {
    display: block;
    color: white;
    font-family: Arial, sans-serif;
    font-weight: 400;
    line-height: 1;
    transform: translateY(-0.04em);
}

.fullscreen-overlay__nav--prev::before { content: "‹"; font-size: 2rem; }
.fullscreen-overlay__nav--next::before { content: "›"; font-size: 2rem; }
.fullscreen-overlay__close::before { content: "×"; font-size: 1.5rem; }

.fullscreen-overlay__nav[hidden],
.fullscreen-overlay__close[hidden] {
    display: none !important;
}

.fullscreen-overlay__nav {
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    line-height: 1;
    z-index: 2;
}

.fullscreen-overlay__nav--prev { left: calc(clamp(0.75rem, 2vw, 1.5rem) + env(safe-area-inset-left)); }
.fullscreen-overlay__nav--next { right: calc(clamp(0.75rem, 2vw, 1.5rem) + env(safe-area-inset-right)); }

.fullscreen-overlay__close {
    top: calc(1rem + env(safe-area-inset-top));
    right: calc(1rem + env(safe-area-inset-right));
    width: 2.75rem;
    height: 2.75rem;
    line-height: 1;
    z-index: 3;
}

.fullscreen-overlay__nav:hover,
.fullscreen-overlay__close:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.7);
}

.fullscreen-overlay__nav:hover {
    transform: translateY(-50%) scale(1.04);
}

.fullscreen-overlay__close:hover {
    transform: scale(1.04);
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.6);
}

.fullscreen-overlay__nav:focus-visible,
.fullscreen-overlay__close:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.9);
    outline-offset: 3px;
}

.fullscreen-overlay__info {
    position: absolute;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    left: calc(1rem + env(safe-area-inset-left));
    right: calc(1rem + env(safe-area-inset-right));
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    text-align: center;
    pointer-events: none;
}

/* -- Blog -- */

.blog-list { display: grid; gap: 1.4rem; }

.blog-post {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding: clamp(1.2rem, 3.5vw, 2.2rem);
}

.blog-post__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    margin-bottom: 0.7rem;
}

.blog-post__meta {
    margin: 0;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.blog-post__date {
    flex-shrink: 0;
    margin-left: auto;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.blog-post h2 { margin-bottom: 1rem; }
.blog-post__content p + p { margin-top: 1rem; }

.pullquote {
    margin: 1.2rem 0;
    border-left: 4px solid var(--accent);
    padding: 0.1rem 0 0.1rem 1rem;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.15rem;
    font-weight: 600;
}

/* -- Hinweis-Kasten -- */

.callout {
    border: 1px solid var(--border-strong);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
    padding: clamp(1rem, 3vw, 1.5rem);
    background: var(--surface);
}

/* -- Vergleichstabelle -- */

.table-wrap { overflow-x: auto; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); }
.compare-table { width: 100%; min-width: 640px; border-collapse: collapse; }
.compare-table th, .compare-table td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.compare-table th { background: var(--bg); font-family: var(--font-mono); text-transform: uppercase; font-size: 0.76rem; letter-spacing: 0.04em; color: var(--text-dim); }
.compare-table tr:last-child td { border-bottom: 0; }

/* -- FAQ -- */

.faq-list { display: grid; gap: 0.7rem; }
.faq-list details { border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); }
.faq-list summary { cursor: pointer; padding: 1rem 1.1rem; font-family: var(--font-display);
 font-weight: 700; }
.faq-list details > div { padding: 0 1.1rem 1.1rem; color: var(--text-dim); }

/* -- Kontakt -- */

.contact-grid { display: grid; grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr); gap: 1.4rem; align-items: start; }
.contact-method { display: grid; gap: 0.9rem; }
.contact-form { display: grid; gap: 1rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

label { display: grid; gap: 0.3rem; color: var(--text-dim); font-family: var(--font-mono); font-size: 0.8rem; font-weight: 200; text-transform: none; letter-spacing: 0.03em; }

input, textarea, select {
    width: 100%;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-family: var(--font-body);
    padding: 0.68rem 0.75rem;
}

input:focus, textarea:focus, select:focus { border-color: var(--accent); }
textarea { min-height: 8.5rem; resize: vertical; }

.form-status {
    margin: 0;
    min-height: 1.2rem;
    font-family: var(--font-mono);
    font-size: 0.82rem;
}

.form-status--success { color: var(--accent-bright); }
.form-status--error { color: var(--swatch-terracotta); }

.section--paper .form-status--success { color: var(--accent-shade); }

/* =========================================================================
   LEGAL PAGES
   ========================================================================= */

.legal { max-width: 900px; }

.legal-card {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    padding: clamp(1rem, 3vw, 1.4rem);
    box-shadow: var(--shadow-soft);
}

/* CONTENT NOTE: Small informational box for preliminary or incomplete content.
   Originally intended for legal pages only, now reusable across the site
   (e.g., partner cards while details are still being added). */
.note {
    padding: 0.55rem 0.75rem;
    border-left: 3px solid var(--accent-2);
    color: var(--text-dim);
    font-size: 0.86rem;
}

.cookie-state-list {
    display: grid;
    gap: 1rem;
}

.cookie-state { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.85rem; align-items: start; }

.cookie-state__mark {
    display: inline-grid;
    width: 2.4rem;
    height: 2.4rem;
    place-items: center;
    border-radius: var(--radius);
    background: rgba(158, 141, 105, 0.18);
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent-bright);
    font-family: var(--font-mono);
    font-weight: 1000;
}

/* LEGAL NAVIGATION SYSTEM: Jump navigation, numbered sections, last-updated date,
   and contact lines enhance the legal section with proper navigation aids for
   longer documents. Numbering is intentionally document-specific: Impressum,
   Datenschutz, and Cookies use ordinal numbers (standard in German privacy docs),
   while Terms (AGB) use "§" numbering since sections represent contract clauses.
   .legal-jumpnav shares scroll-spy logic from initGuideJumpnav in main.js
   (extended there to target both .guide-jumpnav and .legal-jumpnav). */

.legal-jumpnav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.4rem;
}

.guide-jumpnav .pill[aria-current="true"],
.legal-jumpnav .pill[aria-current="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg);
}

.legal-meta {
    display: block;
    margin-top: 0.9rem;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.03em;
}

.legal-meta__label {
    margin-right: 0.35rem;
    color: var(--accent);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.legal-section__head {
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
    margin-bottom: 1rem;
    margin-top: 3rem;
}

.legal-section__index {
    flex-shrink: 0;
    display: inline-block;
    border: 1px solid var(--accent);
    padding: 0.1rem 0.4rem;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.5;
}

.legal h2 {
    font-size: clamp(1.25rem, 2.1vw, 21.6rem);
}

/* Kontaktzeilen mit Icon (Anschrift/Telefon/E-Mail) innerhalb einer .legal-card */
.legal-contact {
    display: grid;
    gap: 1rem;
}

.legal-contact__row {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
}

.legal-contact__icon {
    flex-shrink: 0;
    width: 1.3rem;
    height: 1.3rem;
    margin-top: 0.2rem;
    color: var(--accent);
}

.legal-contact__row p {
    margin: 0;
}

@media (max-width: 640px) {
    .legal-section__head {
        gap: 0.6rem;
    }
}

/* FAQ CUSTOM ARROW: Custom expanding arrow replaces browser default triangle.
    It uses the site's compact navigation affordance language for visual consistency.
   data-i18n intentionally sits on an inner <span>, never on <summary> itself,
   because language switching uses textContent assignment which would remove
   SVG child elements (see main.js applyLang). */

.faq-list summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    padding: 1rem 1.1rem;
    list-style: none;
    font-family: var(--font-display);
    font-weight: 700;
    transition: color 0.15s ease;
}

.faq-list summary::-webkit-details-marker {
    display: none;
}

@media (hover: hover) {
    .faq-list summary:hover {
        color: var(--accent);
    }
}

.faq-list details[open] > summary {
    border-bottom: 1px solid var(--border);
}

.faq-caret {
    flex-shrink: 0;
    width: 11px;
    height: 8px;
    stroke: var(--accent);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    transition: transform 0.2s ease;
}

.faq-list details[open] .faq-caret {
    transform: rotate(180deg);
}

/* =========================================================================
   PAPER SECTION: Adjust appearance to match light paper background
   ========================================================================= */

.section--paper .card,
.section--paper .callout,
.section--paper .table-wrap,
.section--paper .faq-list details,
.section--paper .legal-card,
.section--paper .blog-post {
    background: rgba(255, 255, 255, 0.9);
    background: color-mix(in srgb, var(--paper) 90%, var(--paper-ink) 4%);
    border-color: rgba(78, 78, 84, 0.22);
    border-color: color-mix(in srgb, var(--paper-ink) 22%, transparent);
}

.section--paper .compare-table th { background: var(--paper-ink); color: var(--paper); }
.section--paper .compare-table td, .section--paper .compare-table th { border-bottom-color: rgba(78, 78, 84, 0.15); border-bottom-color: color-mix(in srgb, var(--paper-ink) 15%, transparent); }
.section--paper input, .section--paper textarea, .section--paper select { background: rgba(255, 255, 255, 0.94); background: color-mix(in srgb, var(--paper) 94%, var(--paper-ink) 2%); color: var(--paper-ink); border-color: rgba(78, 78, 84, 0.22); border-color: color-mix(in srgb, var(--paper-ink) 22%, transparent); }
.section--paper label { color: #6b5c42; }

/* -- Responsive -- */

@media (max-width: 980px) {
    .grid--3, .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-hero, .contact-grid, .split { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .hero__stats, .grid--2, .grid--3, .footer-grid, .form-grid { grid-template-columns: 1fr; }
    .section__head { align-items: flex-start; flex-direction: column; }
    .footer-bottom { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 400px) {
    .lang-toggle, .theme-toggle { width: 60px; }
    .lang-toggle button, .theme-toggle button { font-size: 0.68rem; }
    .brand__name { font-size: 0.98rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .polaroid-frame, .keycap, .theme-toggle button, .cheat-sheet, .nav-toggle span { transition: none; }
}


/* Homepage — Website status / pre-launch notice */
.site-status-banner{position:relative;margin:0 auto;padding:0 1.25rem}
.site-status-banner__inner{width:min(var(--max),100%);margin:0 auto;display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.35rem;padding:clamp(1.35rem,3vw,2rem);border:1px solid var(--border-strong);border-left:4px solid var(--accent);background:linear-gradient(135deg,rgba(179,160,120,.11),transparent 58%),var(--surface);box-shadow:var(--shadow-soft)}
.site-status-banner__mark{width:2.7rem;height:2.7rem;display:grid;place-items:center;flex:0 0 auto;border:1px solid var(--accent);color:var(--accent);font-family:var(--font-mono);font-size:1.1rem;font-weight:700}
.site-status-banner__content{min-width:0}
.site-status-banner__content .eyebrow{margin-top:0;margin-bottom:.35rem}
.site-status-banner__content h2{margin-top:0;margin-bottom:.7rem}
.site-status-banner__content p{max-width:76ch}
.site-status-banner__content a:not(.button){color:var(--accent-2);font-weight:600}
.site-status-banner__footer{margin-top:1.1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.site-status-banner__launch{color:var(--text-dim);font-family:var(--font-mono);font-size:.82rem;letter-spacing:.02em}
@media(max-width:560px){.site-status-banner{padding:0 1rem}.site-status-banner__inner{grid-template-columns:1fr;gap:.9rem}.site-status-banner__mark{width:2.35rem;height:2.35rem}.site-status-banner__footer{align-items:flex-start;flex-direction:column}}


/* ==========================================================================
   J-Keebs — Polaroid alignment & responsive layout fix
   ========================================================================== */

/*
 * 1. Single Polaroids were stretching to the full height of their grid row.
 *    This created the large empty paper areas on the homepage and About page.
 * 2. Gallery Polaroids were only 90% wide but remained left-aligned.
 *    On mobile this made the whole gallery look visibly off-center.
 * 3. The gallery stage now owns the alignment, so every Polaroid sits on the
 *    same visual axis without changing the intentional hand-made rotation.
 */

/* --- Single Polaroids: content-sized, centered, never stretched --- */

.single-polaroid {
    width: min(100%, 520px);
    height: auto;
    margin: 0;
    align-self: center;
    justify-self: center;
}

.single-polaroid img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
}

/* The split layouts on index.html and the image/text hero on ueber-uns.html
   should center the Polaroid inside their grid cell instead of stretching it. */
.split > .single-polaroid,
.page-hero > .single-polaroid {
    width: min(100%, 520px);
    height: auto;
    align-self: center;
    justify-self: center;
}

/* --- Gallery: one consistent alignment system --- */

.gallery-row {
    justify-items: center;
}

.gallery-item {
    width: 100%;
    min-width: 0;
    justify-content: center;
}

.gallery-item__stage {
    align-items: center;
    min-width: 0;
}

.gallery-item__stage > .cheat-sheet,
.gallery-item__stage > .cheat-sheet-stack {
    width: 100%;
}

/* Keep the Polaroid at a predictable width while centering it inside each
   gallery column. The max-width is deliberately generous so desktop cards
   don't become tiny. */
.polaroid-frame {
    width: min(100%, 520px);
    max-width: 100%;
    margin-inline: auto;
}

/* Images fill the actual photo window. Using cover here avoids asymmetric
   letterboxing inside the Polaroid; the original source dimensions are all
   close to the 16:9 viewport used by the gallery. */
.polaroid-frame__viewport img,
.polaroid-frame__viewport .media-placeholder {
    display: block;
    object-fit: cover;
    object-position: center;
}

/* Mobile: give the Polaroid a little breathing room while keeping it exactly
   centered. The rotation remains purely decorative and no longer affects the
   layout position. */
@media (max-width: 768px) {
    .gallery-row {
        width: 100%;
        justify-items: center;
        gap: 2.4rem;
    }

    .gallery-item,
    .gallery-item__stage {
        width: 100%;
    }

    .polaroid-frame {
        width: min(100%, 520px);
        margin-inline: auto;
    }

    .single-polaroid,
    .split > .single-polaroid,
    .page-hero > .single-polaroid {
        width: min(100%, 520px);
        margin-inline: auto;
    }
}

@media (max-width: 480px) {
    .gallery-row {
        gap: 2rem;
    }

    .polaroid-frame {
        width: calc(100% - 0.5rem);
    }

    .single-polaroid,
    .split > .single-polaroid,
    .page-hero > .single-polaroid {
        width: calc(100% - 0.5rem);
    }
}


/* ==========================================================================
   J-Keebs — Blog: magazine-style overview (featured article + teaser grid)
   ========================================================================== */

.blog-featured__link {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    color: inherit;
}

.blog-featured__link:hover {
    color: inherit;
}

.blog-featured__media {
    margin: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bg);
}

.blog-featured__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.blog-featured__link:hover .blog-featured__media img {
    transform: scale(1.03);
}

.blog-featured__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.4rem, 3vw, 2.4rem);
}

.blog-featured__body h2 {
    margin: 0.4rem 0 0.9rem;
}

.blog-featured__body .pullquote {
    margin: 0 0 1.1rem;
}

@media (max-width: 768px) {
    .blog-featured__link {
        grid-template-columns: 1fr;
    }
}

.blog-teaser-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
}

@media (max-width: 1024px) {
    .blog-teaser-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .blog-teaser-grid { grid-template-columns: 1fr; }
}

.blog-teaser-card__media {
    margin: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bg);
}

.blog-teaser-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.guide-card__link:hover .blog-teaser-card__media img {
    transform: scale(1.04);
}

.blog-teaser-card__excerpt {
    margin-top: 0.6rem;
    color: var(--text-dim);
    font-size: 0.92rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* BLOG ARTICLE LAYOUT: Hero photo + previous/next navigation at bottom.
   Width and centering are intentionally delegated to the existing .single-polaroid
   rules (including their responsive breakpoints) to avoid specificity conflicts.
   This component only adds spacing. */

/* CONSOLIDATION: Replaces the inline style="max-width:800px;" that was
   previously repeated 7 times on each blog article page (blog-*.html).
   Now a single CSS rule instead of markup duplication. */
.article-body {
    max-width: 800px;
}

.blog-article-photo {
    margin-bottom: clamp(2rem, 5vw, 3rem);
}

.article-nav {
    display: flex;
    gap: 1rem;
    margin-top: clamp(2rem, 5vw, 3rem);
    padding-top: 1.4rem;
    border-top: 1px solid var(--border-strong);
}

.article-nav__link {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem;
    border: 1px solid var(--border-strong);
    color: inherit;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.article-nav__link:hover {
    color: inherit;
}

@media (hover: hover) {
    .article-nav__link:hover {
        background: var(--surface-2);
        border-color: var(--accent);
    }
}

.article-nav__link--next {
    text-align: right;
    align-items: flex-end;
    margin-left: auto;
}

.article-nav__label {
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.article-nav__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.3;
}

@media (max-width: 640px) {
    .article-nav { flex-direction: column; }
    .article-nav__link--next { text-align: left; align-items: flex-start; margin-left: 0; }
}

/* ==========================================================================
/* ==========================================================================
   J-Keebs — Win2K Window UI (Theme-Adapted & Pixelated)
   ========================================================================== */
.win2k-window {
    background-color: var(--surface) !important;
    border-top: 3px solid rgba(255, 255, 255, 0.7) !important;
    border-left: 3px solid rgba(255, 255, 255, 0.7) !important;
    border-right: 3px solid rgba(0, 0, 0, 0.6) !important;
    border-bottom: 3px solid rgba(0, 0, 0, 0.6) !important;
    box-shadow: inset 2px 2px var(--bg), inset -1px -1px var(--border-strong) !important;
    padding: 3px;
    font-family: 'MS Sans Serif', 'Microsoft Sans Serif', Tahoma, sans-serif !important;
    -webkit-font-smoothing: none !important;
    -moz-osx-font-smoothing: grayscale !important;
    font-smooth: never !important;
    color: var(--text) !important;
    margin-bottom: 2rem;
}

[data-theme="dark"] .win2k-window {
    border-top: 3px solid rgba(255, 255, 255, 0.15) !important;
    border-left: 3px solid rgba(255, 255, 255, 0.15) !important;
    border-right: 3px solid rgba(0, 0, 0, 0.9) !important;
    border-bottom: 3px solid rgba(0, 0, 0, 0.9) !important;
}

.win2k-titlebar {
    background: linear-gradient(90deg, var(--accent), var(--accent-2)) !important;
    color: var(--swatch-charcoal) !important;
    padding: 5px 6px 5px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'MS Sans Serif', 'Microsoft Sans Serif', Tahoma, sans-serif !important;
    font-weight: bold;
    font-size: 15px !important;
    letter-spacing: 0.04em;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
}

.win2k-titlebar__text {
    display: flex;
    align-items: center;
    gap: 6px;
}

.win2k-btn {
    background-color: var(--surface) !important;
    border-top: 3px solid rgba(255, 255, 255, 0.7) !important;
    border-left: 3px solid rgba(255, 255, 255, 0.7) !important;
    border-right: 3px solid rgba(0, 0, 0, 0.6) !important;
    border-bottom: 3px solid rgba(0, 0, 0, 0.6) !important;
    box-shadow: inset -2px -2px var(--border-strong), inset 1px 1px rgba(255,255,255,0.3) !important;
    color: var(--text) !important;
    font-family: 'MS Sans Serif', 'Microsoft Sans Serif', Tahoma, sans-serif !important;
    font-weight: bold;
    font-size: 15px !important;
    line-height: 1;
    padding: 2px 7px 3px 7px !important;
    cursor: default;
    min-width: 0;
    -webkit-font-smoothing: none !important;
}

[data-theme="dark"] .win2k-btn {
    border-top: 3px solid rgba(255, 255, 255, 0.15) !important;
    border-left: 3px solid rgba(255, 255, 255, 0.15) !important;
    border-right: 3px solid rgba(0, 0, 0, 0.9) !important;
    border-bottom: 3px solid rgba(0, 0, 0, 0.9) !important;
}

.win2k-btn--close {
    margin-left: auto;
}

.win2k-btn:active {
    border-top: 3px solid rgba(0, 0, 0, 0.6) !important;
    border-left: 3px solid rgba(0, 0, 0, 0.6) !important;
    border-right: 3px solid rgba(255, 255, 255, 0.7) !important;
    border-bottom: 3px solid rgba(255, 255, 255, 0.7) !important;
    box-shadow: inset 2px 2px var(--border-strong) !important;
    padding: 3px 6px 3px 8px !important;
}

[data-theme="dark"] .win2k-btn:active {
    border-top: 3px solid rgba(0, 0, 0, 0.9) !important;
    border-left: 3px solid rgba(0, 0, 0, 0.9) !important;
    border-right: 3px solid rgba(255, 255, 255, 0.15) !important;
    border-bottom: 3px solid rgba(255, 255, 255, 0.15) !important;
}

.win2k-body {
    padding: 16px;
    background-color: var(--surface) !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.win2k-dialog-header {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 8px;
}

.win2k-monitor-icon {
    width: 8rem;
    height: auto;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.win2k-body p, .win2k-body span, .win2k-body h3, .win2k-body label {
    font-family: 'MS Sans Serif', 'Microsoft Sans Serif', Tahoma, sans-serif !important;
    -webkit-font-smoothing: none !important;
    color: var(--text) !important;
    font-size: 13px !important;
}

.win2k-body a {
    color: var(--accent-strong) !important;
    text-decoration: underline !important;
    font-weight: bold !important;
}

.win2k-window input[type="text"],
.win2k-window input[type="email"],
.win2k-window textarea {
    border-top: 3px solid rgba(0, 0, 0, 0.6) !important;
    border-left: 3px solid rgba(0, 0, 0, 0.6) !important;
    border-right: 3px solid rgba(255, 255, 255, 0.7) !important;
    border-bottom: 3px solid rgba(255, 255, 255, 0.7) !important;
    box-shadow: inset 2px 2px var(--border-strong), inset -1px -1px var(--surface) !important;
    background-color: var(--bg) !important;
    color: var(--text) !important;
    border-radius: 0 !important;
    font-family: 'MS Sans Serif', 'Microsoft Sans Serif', Tahoma, sans-serif !important;
    -webkit-font-smoothing: none !important;
    font-size: 13px !important;
    padding: 5px 6px !important;
    transition: none !important;
}

[data-theme="dark"] .win2k-window input[type="text"],
[data-theme="dark"] .win2k-window input[type="email"],
[data-theme="dark"] .win2k-window textarea {
    border-top: 3px solid rgba(0, 0, 0, 0.9) !important;
    border-left: 3px solid rgba(0, 0, 0, 0.9) !important;
    border-right: 3px solid rgba(255, 255, 255, 0.15) !important;
    border-bottom: 3px solid rgba(255, 255, 255, 0.15) !important;
}

.win2k-window input[type="text"]:focus,
.win2k-window input[type="email"]:focus,
.win2k-window textarea:focus {
    outline: 1px dotted var(--text) !important;
    outline-offset: -3px !important;
}

.win2k-window button[type="submit"] {
    background-color: var(--surface) !important;
    border-top: 3px solid rgba(255, 255, 255, 0.7) !important;
    border-left: 3px solid rgba(255, 255, 255, 0.7) !important;
    border-right: 3px solid rgba(0, 0, 0, 0.6) !important;
    border-bottom: 3px solid rgba(0, 0, 0, 0.6) !important;
    box-shadow: inset -2px -2px var(--border-strong), inset 1px 1px rgba(255,255,255,0.3) !important;
    color: var(--text) !important;
    font-family: 'MS Sans Serif', 'Microsoft Sans Serif', Tahoma, sans-serif !important;
    -webkit-font-smoothing: none !important;
    font-size: 15px !important;
    font-weight: normal !important;
    letter-spacing: normal;
    padding: 6px 16px !important;
    cursor: default !important;
    border-radius: 0 !important;
    transition: none !important;
}

[data-theme="dark"] .win2k-window button[type="submit"] {
    border-top: 3px solid rgba(255, 255, 255, 0.15) !important;
    border-left: 3px solid rgba(255, 255, 255, 0.15) !important;
    border-right: 3px solid rgba(0, 0, 0, 0.9) !important;
    border-bottom: 3px solid rgba(0, 0, 0, 0.9) !important;
}

/* Contact form refinement: keep the retro cue, but let the panel belong to the site. */
.win2k-window {
    background: var(--surface) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-soft) !important;
    padding: 0 !important;
    font-family: var(--font-body) !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    color: var(--text) !important;
}

.win2k-titlebar {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border-bottom: 1px solid var(--border-strong);
    padding: 0.75rem 0.9rem;
    font-family: var(--font-body) !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.04em;
    text-shadow: none;
}

.win2k-titlebar__text::before {
    content: "▣";
    color: var(--accent);
    font-family: var(--font-mono) !important;
    margin-right: 0.45rem;
}

.win2k-btn,
.win2k-window button[type="submit"] {
    background: transparent !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: none !important;
    color: var(--text) !important;
    font-family: var(--font-body) !important;
    font-size: 0.85rem !important;
    -webkit-font-smoothing: antialiased !important;
}

.win2k-btn {
    padding: 0.15rem 0.45rem !important;
    min-width: 1.8rem;
    cursor: pointer;
}

.win2k-btn:hover,
.win2k-btn:focus-visible {
    background: var(--accent) !important;
    color: var(--bg) !important;
}

.win2k-btn:active,
.win2k-window button[type="submit"]:active {
    border: 1px solid var(--border-strong) !important;
    box-shadow: none !important;
    padding: 0.15rem 0.45rem !important;
}

.win2k-body {
    padding: clamp(1rem, 3vw, 1.5rem);
    background: var(--surface) !important;
    gap: 1.25rem;
}

.win2k-dialog-header {
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.25rem;
}

.win2k-monitor-icon {
    width: clamp(3.5rem, 16vw, 5rem);
    height: auto;
    flex: 0 0 auto;
}

.win2k-body p,
.win2k-body span,
.win2k-body h3,
.win2k-body label {
    font-family: var(--font-body) !important;
    -webkit-font-smoothing: antialiased !important;
    color: var(--text) !important;
    font-size: inherit !important;
}

.win2k-body .meta {
    color: var(--accent) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.72rem !important;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.win2k-body .muted {
    color: var(--text-muted) !important;
    line-height: 1.55;
}

.win2k-body a {
    color: var(--accent-strong) !important;
    font-weight: 600 !important;
}

.win2k-window input[type="text"],
.win2k-window input[type="email"],
.win2k-window textarea {
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: none !important;
    background: var(--bg) !important;
    color: var(--text) !important;
    font-family: var(--font-body) !important;
    -webkit-font-smoothing: antialiased !important;
    font-size: 1rem !important;
    line-height: 1.4;
    padding: 0.7rem 0.75rem !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.win2k-window input[type="text"]:focus,
.win2k-window input[type="email"]:focus,
.win2k-window textarea:focus {
    outline: 2px solid var(--accent-bright) !important;
    outline-offset: 1px !important;
    border-color: var(--accent-strong) !important;
    box-shadow: none !important;
}

.win2k-window textarea {
    min-height: 8rem;
}

.win2k-window button[type="submit"] {
    background: var(--accent) !important;
    color: var(--bg) !important;
    cursor: pointer !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    padding: 0.75rem 1rem !important;
}

.win2k-window button[type="submit"]:hover,
.win2k-window button[type="submit"]:focus-visible {
    background: var(--accent-bright) !important;
    color: var(--bg) !important;
}

@media (max-width: 480px) {
    .win2k-dialog-header {
        align-items: flex-start;
    }

    .win2k-monitor-icon {
        width: 3.5rem;
    }
}

.win2k-window button[type="submit"]:active {
    border-top: 3px solid rgba(0, 0, 0, 0.6) !important;
    border-left: 3px solid rgba(0, 0, 0, 0.6) !important;
    border-right: 3px solid rgba(255, 255, 255, 0.7) !important;
    border-bottom: 3px solid rgba(255, 255, 255, 0.7) !important;
    box-shadow: inset 2px 2px var(--border-strong) !important;
    transform: none !important;
    padding: 7px 15px 5px 17px !important;
}

[data-theme="dark"] .win2k-window button[type="submit"]:active {
    border-top: 3px solid rgba(0, 0, 0, 0.9) !important;
    border-left: 3px solid rgba(0, 0, 0, 0.9) !important;
    border-right: 3px solid rgba(255, 255, 255, 0.15) !important;
    border-bottom: 3px solid rgba(255, 255, 255, 0.15) !important;
}

.win2k-window button[type="submit"]:active {
    border: 1px solid var(--border-strong) !important;
    box-shadow: none !important;
    padding: 0.75rem 1rem !important;
}

/* Windows 2000 reference, J-Keebs interpretation: pixel labels, terminal colors,
   and a compact title bar without recreating the stock dialog chrome. */
.win2k-window {
    --terminal-ink: #111a2d;
    --terminal-blue: #1d4f78;
    --terminal-cyan: #7be0e4;
    --terminal-coral: #ef806b;
    --terminal-paper: #f4edda;
    --terminal-line: #9bb7b9;
    background: var(--terminal-paper) !important;
    border: 1px solid var(--terminal-blue) !important;
    border-radius: 0.25rem !important;
    box-shadow: 8px 8px 0 rgba(17, 26, 45, 0.18) !important;
    color: var(--terminal-ink) !important;
    overflow: hidden;
}

[data-theme="dark"] .win2k-window {
    background: var(--terminal-ink) !important;
    border-color: var(--terminal-cyan) !important;
    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.35) !important;
    color: var(--terminal-paper) !important;
}

.win2k-titlebar {
    position: relative;
    background: var(--terminal-blue) !important;
    border: 0 !important;
    border-bottom: 3px solid var(--terminal-cyan) !important;
    color: #fff !important;
    min-height: 2.75rem;
    padding: 0.7rem 0.8rem 0.65rem 1rem;
    font-family: var(--font-mono) !important;
    font-size: 0.78rem !important;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.win2k-titlebar__text::before {
    content: "[ ]";
    color: var(--terminal-cyan);
    font-family: var(--font-mono) !important;
    margin-right: 0.5rem;
}

.win2k-titlebar__controls {
    display: flex;
    gap: 0.35rem;
}

.win2k-btn {
    background: var(--terminal-coral) !important;
    border: 0 !important;
    border-radius: 0.15rem !important;
    box-shadow: 2px 2px 0 rgba(17, 26, 45, 0.35) !important;
    color: var(--terminal-ink) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.8rem !important;
    font-weight: 700;
    min-width: 1.6rem;
    padding: 0.2rem 0.35rem !important;
}

.win2k-btn:hover,
.win2k-btn:focus-visible {
    background: var(--terminal-cyan) !important;
    color: var(--terminal-ink) !important;
}

.win2k-btn:active {
    box-shadow: none !important;
    transform: translate(2px, 2px);
}

.win2k-body {
    background: transparent !important;
    color: inherit !important;
    gap: 1.4rem;
    padding: clamp(1.2rem, 3vw, 1.8rem);
}

.win2k-dialog-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    margin-bottom: 0;
    padding-bottom: 1.2rem;
    border-bottom: 1px dashed var(--terminal-line);
}

.win2k-monitor-icon {
    width: clamp(3.75rem, 15vw, 5.5rem);
    height: auto;
    padding: 0.35rem;
    background: var(--terminal-blue);
    border: 2px solid var(--terminal-cyan);
    image-rendering: pixelated;
}

.win2k-body p,
.win2k-body span,
.win2k-body h3,
.win2k-body label {
    color: inherit !important;
    font-family: var(--font-body) !important;
    font-size: inherit !important;
    -webkit-font-smoothing: antialiased !important;
}

.win2k-body .meta,
.win2k-body label > span {
    color: var(--terminal-blue) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.72rem !important;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

[data-theme="dark"] .win2k-body .meta,
[data-theme="dark"] .win2k-body label > span {
    color: var(--terminal-cyan) !important;
}

.win2k-body .muted {
    color: #3d4b59 !important;
    line-height: 1.55;
}

[data-theme="dark"] .win2k-body .muted {
    color: #c5d0d1 !important;
}

.win2k-body a {
    color: var(--terminal-blue) !important;
    font-weight: 700 !important;
}

[data-theme="dark"] .win2k-body a {
    color: var(--terminal-cyan) !important;
}

.win2k-window input[type="text"],
.win2k-window input[type="email"],
.win2k-window textarea {
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid var(--terminal-line) !important;
    border-radius: 0.15rem !important;
    box-shadow: inset 3px 3px 0 rgba(17, 26, 45, 0.08) !important;
    color: var(--terminal-ink) !important;
    font-family: var(--font-body) !important;
    font-size: 1rem !important;
    margin-top: 0.4rem;
    padding: 0.7rem 0.75rem !important;
}

[data-theme="dark"] .win2k-window input[type="text"],
[data-theme="dark"] .win2k-window input[type="email"],
[data-theme="dark"] .win2k-window textarea {
    background: #1b2940 !important;
    border-color: #547789 !important;
    box-shadow: inset 3px 3px 0 rgba(0, 0, 0, 0.25) !important;
    color: var(--terminal-paper) !important;
}

.win2k-window input[type="text"]:focus,
.win2k-window input[type="email"]:focus,
.win2k-window textarea:focus {
    border-color: var(--terminal-coral) !important;
    box-shadow: 0 0 0 2px rgba(239, 128, 107, 0.25) !important;
    outline: 0 !important;
}

.win2k-window textarea {
    min-height: 8rem;
}

.win2k-window button[type="submit"] {
    background: var(--terminal-coral) !important;
    border: 0 !important;
    border-radius: 0.15rem !important;
    box-shadow: 3px 3px 0 var(--terminal-ink) !important;
    color: var(--terminal-ink) !important;
    cursor: pointer !important;
    font-family: var(--font-mono) !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    padding: 0.8rem 1rem !important;
    text-transform: uppercase;
}

.win2k-window button[type="submit"]:hover,
.win2k-window button[type="submit"]:focus-visible {
    background: var(--terminal-cyan) !important;
    color: var(--terminal-ink) !important;
}

.win2k-window button[type="submit"]:active {
    box-shadow: none !important;
    padding: 0.8rem 1rem !important;
    transform: translate(3px, 3px);
}

/* ==========================================================================
/* Final Win2K balance: recognizable chrome, local pixel-mono type, restrained tint. */
.win2k-window {
    --w2k-bg: #3b3028;
    --w2k-panel: #4a3b30;
    --w2k-title: #5a3d24;
    --w2k-text: #f4ead2;
    --w2k-input: #2f271f;
    --w2k-highlight: #cdbb91;
    --w2k-shadow: #211914;
    --w2k-accent: #c59b52;
    background: var(--w2k-bg) !important;
    border: 2px solid var(--w2k-highlight) !important;
    border-right-color: var(--w2k-shadow) !important;
    border-bottom-color: var(--w2k-shadow) !important;
    border-radius: 0 !important;
    box-shadow: inset 1px 1px 0 var(--w2k-panel), 5px 5px 0 rgba(24, 33, 42, 0.18) !important;
    color: var(--w2k-text) !important;
}

[data-theme="dark"] .win2k-window {
    --w2k-bg: #ddd0af;
    --w2k-panel: #eee5cc;
    --w2k-title: #77512e;
    --w2k-text: #2b2119;
    --w2k-input: #fff8e8;
    --w2k-highlight: #fff4d0;
    --w2k-shadow: #6b4b30;
    --w2k-accent: #a87533;
    box-shadow: inset 1px 1px 0 var(--w2k-panel), 5px 5px 0 rgba(0, 0, 0, 0.3) !important;
}

.win2k-titlebar {
    background: linear-gradient(90deg, var(--w2k-title), color-mix(in srgb, var(--w2k-title) 78%, #ffffff)) !important;
    border: 0 !important;
    border-bottom: 2px solid var(--w2k-shadow) !important;
    color: var(--w2k-text) !important;
    font-family: var(--font-body) !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.02em;
    padding: 0.45rem 0.5rem 0.45rem 0.7rem;
    -webkit-font-smoothing: none !important;
}

.win2k-titlebar__text::before {
    content: "▣";
    color: var(--w2k-accent);
    font-family: var(--font-mono) !important;
    margin-right: 0.35rem;
}

.win2k-btn,
.win2k-window button[type="submit"] {
    background: var(--w2k-panel) !important;
    border: 2px solid var(--w2k-highlight) !important;
    border-right-color: var(--w2k-shadow) !important;
    border-bottom-color: var(--w2k-shadow) !important;
    border-radius: 0 !important;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.35) !important;
    color: var(--w2k-text) !important;
    font-family: var(--font-body) !important;
    font-size: 0.8rem !important;
    -webkit-font-smoothing: none !important;
}

.win2k-btn {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    min-width: 1.7rem;
    width: 1.7rem;
    height: 1.7rem;
    padding: 0 !important;
    aspect-ratio: 1;
}

.win2k-btn:hover,
.win2k-btn:focus-visible,
.win2k-window button[type="submit"]:hover,
.win2k-window button[type="submit"]:focus-visible {
    background: var(--w2k-accent) !important;
    color: #ffffff !important;
}

@media (hover: hover) {
    .win2k-window:hover {
        box-shadow: var(--shadow) !important;
        transform: translateY(-4px);
        border-color: var(--accent) !important;
    }
}

.win2k-btn:active,
.win2k-window button[type="submit"]:active {
    border-top-color: var(--w2k-shadow) !important;
    border-left-color: var(--w2k-shadow) !important;
    border-right-color: var(--w2k-highlight) !important;
    border-bottom-color: var(--w2k-highlight) !important;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.18) !important;
    padding: 0 !important;
    transform: none;
}

.win2k-window button[type="submit"] {
    color: var(--w2k-text) !important;
    font-family: var(--font-body) !important;
    font-weight: 700 !important;
    letter-spacing: normal;
    padding: 0.55rem 1rem !important;
    text-transform: none;
}

.win2k-window button[type="submit"]:active {
    padding: 0.55rem 1rem !important;
}

.win2k-body {
    background: var(--w2k-bg) !important;
    color: var(--w2k-text) !important;
    padding: clamp(1rem, 3vw, 1.4rem);
}

.win2k-dialog-header {
    display: grid;
    grid-template-columns: minmax(8rem, 0.42fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 1rem;
    border-bottom: 1px dotted var(--w2k-shadow);
    padding-bottom: 1rem;
}

.win2k-monitor-icon {
    background: var(--w2k-title);
    border: 2px solid var(--w2k-highlight);
    border-right-color: var(--w2k-shadow);
    border-bottom-color: var(--w2k-shadow);
    padding: 0.25rem;
    width: 100%;
    height: 100%;
    min-height: 7rem;
    object-fit: contain;
}

.win2k-body p,
.win2k-body span,
.win2k-body h3,
.win2k-body label {
    color: var(--w2k-text) !important;
}

.win2k-body .meta,
.win2k-body label > span {
    color: var(--w2k-highlight) !important;
    font-family: "Silkscreen", "Fixedsys Excelsior 3.01", Fixedsys, Terminal, "MS Sans Serif", var(--font-mono), monospace !important;
    font-size: 0.72rem !important;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    -webkit-font-smoothing: none !important;
}

[data-theme="dark"] .win2k-body .meta,
[data-theme="dark"] .win2k-body label > span {
    color: var(--w2k-title) !important;
}

.win2k-body .muted {
    color: var(--w2k-text) !important;
    opacity: 0.82;
}

.win2k-body a {
    color: var(--w2k-accent) !important;
    font-weight: 700 !important;
}

@media (max-width: 480px) {
    .win2k-dialog-header {
        grid-template-columns: minmax(5.5rem, 0.36fr) minmax(0, 1fr);
    }

    .win2k-monitor-icon {
        min-height: 5.5rem;
    }
}

.win2k-window input[type="text"],
.win2k-window input[type="email"],
.win2k-window textarea {
    background: var(--w2k-input) !important;
    border: 2px solid var(--w2k-shadow) !important;
    border-right-color: var(--w2k-highlight) !important;
    border-bottom-color: var(--w2k-highlight) !important;
    border-radius: 0 !important;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.22) !important;
    color: var(--w2k-text) !important;
    padding: 0.6rem 0.65rem !important;
}

.win2k-window input[type="text"]:focus,
.win2k-window input[type="email"]:focus,
.win2k-window textarea:focus {
    border-color: var(--w2k-title) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--w2k-accent) 42%, transparent) !important;
    outline: 0 !important;
}

/* PRINT STYLES — Optimized for legal pages (Impressum, Datenschutz, AGB, Cookies):
   Dark headers/footers, film grain textures, and gradients waste ink and reduce
   readability on paper. Reduces to black text on white background, hides pure UI
   elements (nav, theme/language toggles, buttons, jump nav) and prints link
   targets since they are not clickable on paper.
   ========================================================================== */
@media print {
    body {
        background: #fff;
        color: #000;
    }

    .site-header,
    .nav-toggle,
    .utility-nav,
    .skip-link,
    .legal-jumpnav,
    .guide-jumpnav,
    .cheat-toggle,
    .carousel-btn,
    .carousel-dots,
    .fullscreen-overlay {
        display: none !important;
    }

    .section,
    .section--paper,
    .section--muted {
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
        border-color: #999 !important;
    }

    .legal-card,
    .card,
    .callout {
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
        border: 1px solid #999 !important;
    }

    h1, h2, h3, .legal-section__index, .eyebrow {
        color: #000 !important;
    }

    a {
        color: #000 !important;
        text-decoration: underline;
    }

    /* Linkziel hinter externen bzw. internen Links mit ausdrucken, da URLs auf
       Papier nicht anklickbar sind - Mail-/Tel-Links ausgenommen, die sprechen
       für sich. */
    .legal a[href^="http"]::after,
    .legal a[href$=".html"]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        font-weight: normal;
    }

    .site-footer {
        background: #fff !important;
        color: #000 !important;
        border-top: 1px solid #999;
    }

    .site-footer svg,
    .social-links {
        display: none;
    }
}

/* ==========================================================================
   J-Keebs — Contact page: location map (OpenStreetMap)
   Loads automatically with the page (see contact.html; no JS involved).
   Kept desaturated by default and only shows full color on hover/focus, so
   it sits quietly next to the address instead of fighting the earthy
   palette with OSM's own bright default colors.
   ========================================================================== */

.map-embed {
    margin-top: 0.9rem;
    border-radius: var(--radius);
    outline: none;
}

.map-embed__frame {
    aspect-ratio: 4 / 3;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
}

.map-embed__frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(1) contrast(1.05);
    transition: filter 0.25s ease;
}

@media (hover: hover) {
    .map-embed__frame:hover iframe,
    .card__body.contact-method:hover .map-embed__frame iframe {
        filter: grayscale(0);
    }
}

@media (hover: none) {
    .card.is-map-active .map-embed__frame iframe {
        filter: grayscale(0);
    }
}

.card__body.contact-method:active .map-embed__frame iframe,
.map-embed:active .map-embed__frame iframe,
.map-embed:focus .map-embed__frame iframe,
.map-embed__frame:focus-within iframe {
    filter: grayscale(0);
}

.map-embed:focus-visible .map-embed__frame {
    outline: 2px solid var(--accent-bright);
    outline-offset: 3px;
}

@media (max-width: 480px) {
    .map-embed__frame {
        aspect-ratio: 1 / 1;
    }
}