/*
 * Blueprint Theme for Reveloni CMS
 * Version: 1.0.2
 *
 * The whole site as a sheet of an architectural drawing: a cyanotype print.
 * Everything is line work on a Prussian-blue field - no fills, no boxes.
 * Dark mode (default) = the blueprint itself. Light mode = tracing paper:
 * navy pencil lines on ivory vellum.
 *
 * Signature: the footer is a real technical-drawing title block, and the
 * page is framed like a numbered drawing sheet with ruler ticks.
 *
 * Typography: Big Shoulders (display) / IBM Plex Sans (body) / IBM Plex Mono
 * (annotations, dimensions, captions).
 */

/* === TOKENS === */
:root {
    /* Cyanotype field */
    --bp-field: #123a5e;
    --bp-field-deep: #0c2840;
    --bp-field-raised: #17446e;

    /* Drafting lines - milky, never pure white */
    --bp-line: #e8f1fa;
    --bp-line-soft: rgba(232, 241, 250, 0.55);
    --bp-line-faint: rgba(232, 241, 250, 0.28);
    --bp-line-ghost: rgba(232, 241, 250, 0.12);

    /* Faded annotation blue */
    --bp-anno: #9fc3e8;

    /* Revision pencil - the ONLY foreign color. Stamps, revision marks, CTA. */
    --bp-red: #e4572e;
    --bp-red-soft: rgba(228, 87, 46, 0.14);

    /* Millimeter grid */
    --bp-grid-thin: rgba(232, 241, 250, 0.05);
    --bp-grid-major: rgba(232, 241, 250, 0.11);

    /* Type */
    --font-display: 'Big Shoulders', 'Arial Narrow', sans-serif;
    --font-body: 'IBM Plex Sans', 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', 'Consolas', monospace;

    /* Engine compatibility aliases (markup uses these in inline styles) */
    --text: var(--bp-line);
    --text-light: var(--bp-anno);
    --border: var(--bp-line-faint);
    --accent: var(--bp-anno);

    --transition: 0.25s ease;
    --transition-fast: 0.15s ease;

    --sheet-inset: 14px;
}

/* Light mode = tracing paper (kalka techniczna) */
[data-theme="light"] {
    --bp-field: #f4f0e5;
    --bp-field-deep: #ece7d8;
    --bp-field-raised: #faf7ef;

    --bp-line: #1d3a5f;
    --bp-line-soft: rgba(29, 58, 95, 0.62);
    --bp-line-faint: rgba(29, 58, 95, 0.30);
    --bp-line-ghost: rgba(29, 58, 95, 0.12);

    --bp-anno: #54749a;

    --bp-red: #c8401d;
    --bp-red-soft: rgba(200, 64, 29, 0.10);

    --bp-grid-thin: rgba(29, 58, 95, 0.06);
    --bp-grid-major: rgba(29, 58, 95, 0.13);
}

/* === BASE === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--bp-line);
    background-color: var(--bp-field);
    /* Millimeter grid: thin every 8px, major every 40px */
    background-image:
        linear-gradient(var(--bp-grid-major) 1px, transparent 1px),
        linear-gradient(90deg, var(--bp-grid-major) 1px, transparent 1px),
        linear-gradient(var(--bp-grid-thin) 1px, transparent 1px),
        linear-gradient(90deg, var(--bp-grid-thin) 1px, transparent 1px);
    background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px;
    min-height: 100vh;
    transition: background-color var(--transition), color var(--transition);
}

/* === SHEET FRAME & RULERS (signature, part 1) === */
/* The page is a drawing sheet: a fixed frame with tick rulers on two edges.
   All decorative overlays are pointer-events:none - they must never eat
   clicks (known engine constraint with pseudo-element hit areas). */
body::before {
    content: '';
    position: fixed;
    inset: var(--sheet-inset);
    border: 1px solid var(--bp-line-faint);
    outline: 1px solid var(--bp-line-ghost);
    outline-offset: 4px;
    pointer-events: none;
    z-index: 1500;
}

/* Top ruler ticks */
html::before {
    content: '';
    position: fixed;
    top: 0;
    left: var(--sheet-inset);
    right: var(--sheet-inset);
    height: var(--sheet-inset);
    background-image: repeating-linear-gradient(
        90deg,
        var(--bp-line-faint) 0 1px,
        transparent 1px 40px
    );
    background-position: bottom;
    background-size: 100% 6px;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 1500;
}

/* Left ruler ticks */
html::after {
    content: '';
    position: fixed;
    top: var(--sheet-inset);
    bottom: var(--sheet-inset);
    left: 0;
    width: var(--sheet-inset);
    background-image: repeating-linear-gradient(
        180deg,
        var(--bp-line-faint) 0 1px,
        transparent 1px 40px
    );
    background-position: right;
    background-size: 6px 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 1500;
}

/* Sheet draw-in on load */
@keyframes bp-draw-frame {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
}

body::before {
    animation: bp-draw-frame 0.9s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    body::before { animation: none; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* === LAYOUT === */
.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 2rem;
}

main {
    min-height: 55vh;
    padding-bottom: 3rem;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--bp-line);
    text-decoration: none;
    /* Axis-line underline (center line of a drawing) */
    border-bottom: 1px dashed var(--bp-anno);
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

a:hover {
    color: var(--bp-anno);
    border-bottom-color: var(--bp-line);
}

::selection {
    background: var(--bp-anno);
    color: var(--bp-field-deep);
}

/* === TYPOGRAPHY === */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.035em;
    line-height: 1.12;
    color: var(--bp-line);
}

h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.25rem; }

p { margin-bottom: 1.1rem; }

/* === HEADER (drawing header strip) === */
header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bp-field-deep);
    border-bottom: 2px solid var(--bp-line);
    box-shadow: 0 1px 0 var(--bp-line-ghost), 0 6px 24px rgba(0, 0, 0, 0.25);
}

[data-theme="light"] header {
    box-shadow: 0 1px 0 var(--bp-line-ghost), 0 6px 24px rgba(29, 58, 95, 0.10);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    gap: 2rem;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
    /* v1.0.1: the title column shrinks instead of colliding with the menu */
    flex: 1 1 auto;
}

.logo-container img {
    height: 64px;
    width: auto;
    flex-shrink: 0;
}

.logo-container a {
    color: inherit;
    border-bottom: none;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.site-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.55rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.18;
    /* v1.0.1: long names wrap to the next line (like the older themes)
       instead of being cut off with an ellipsis */
    overflow-wrap: break-word;
    min-width: 0;
}

/* Position-mark glyph before the title, like a survey point */
.site-title::before {
    content: '⌖';
    color: var(--bp-anno);
    font-family: var(--font-mono);
    font-weight: 400;
    margin-right: 0.45rem;
    font-size: 0.85em;
}

/* === BREADCRUMBS (sheet locator) === */
.breadcrumbs {
    padding: 1.4rem 0 0.25rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bp-anno);
}

.breadcrumbs::before {
    content: 'LOK / ';
    color: var(--bp-line-faint);
}

.breadcrumbs a {
    color: var(--bp-anno);
    border-bottom: none;
}

.breadcrumbs a:hover {
    color: var(--bp-line);
}

.breadcrumbs span {
    margin: 0 0.3rem;
    color: var(--bp-line-faint);
}

/* === NAVIGATION === */
nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.hamburger-menu {
    position: relative;
}

.hamburger-btn {
    background: transparent;
    border: 1px solid var(--bp-line-soft);
    color: var(--bp-line);
    padding: 0.55rem 1.05rem;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    transition: all var(--transition-fast);
}

/* v1.0.1: the markup ships its own <span>☰</span> - the old ::before icon
   doubled it. The markup span is styled instead. */
.hamburger-btn span:first-child {
    color: var(--bp-anno);
    letter-spacing: 0;
}

.hamburger-btn:hover {
    border-color: var(--bp-line);
    background: var(--bp-field-raised);
}

/* v1.0.1: the engine renders this button AFTER the footer, outside the
   header - it must be position:fixed (like the older themes), otherwise it
   lands bottom-left in the document flow. */
.dark-mode-toggle {
    position: fixed;
    bottom: 1.6rem;
    right: 1.6rem;
    z-index: 1200;
    background: var(--bp-field-deep);
    border: 1px solid var(--bp-line-soft);
    color: var(--bp-line);
    width: 44px;
    height: 42px;
    cursor: pointer;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.30);
    transition: all var(--transition-fast);
}

[data-theme="light"] .dark-mode-toggle {
    box-shadow: 0 8px 24px rgba(29, 58, 95, 0.18);
}

.dark-mode-toggle:hover {
    border-color: var(--bp-line);
    background: var(--bp-field-raised);
}

/* === DROPDOWN MENU (sheet index) === */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 270px;
    max-height: 80vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    margin-top: 0.6rem;
    background: var(--bp-field-deep);
    border: 1px solid var(--bp-line);
    outline: 1px solid var(--bp-line-ghost);
    outline-offset: 3px;
    padding: 0.45rem 0;
    list-style: none;
    z-index: 1000;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
    font-family: var(--font-mono);
}

[data-theme="light"] .dropdown-menu {
    box-shadow: 0 14px 40px rgba(29, 58, 95, 0.18);
}

@keyframes bp-unfold {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.dropdown-menu.active {
    display: block;
    animation: bp-unfold 0.18s ease-out;
}

.dropdown-menu ul {
    display: block;
    list-style: none;
}

.dropdown-menu li { margin: 0; }

.dropdown-menu a {
    display: block;
    padding: 0.55rem 1.1rem;
    border-bottom: none;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bp-line);
    transition: background var(--transition-fast), color var(--transition-fast),
                padding-left var(--transition-fast);
}

.dropdown-menu a::before {
    content: '— ';
    color: var(--bp-line-faint);
}

.dropdown-menu a:hover,
.dropdown-menu a.active {
    background: var(--bp-field-raised);
    color: var(--bp-anno);
    padding-left: 1.4rem;
}

.dropdown-menu a.active::before,
.dropdown-menu a:hover::before {
    color: var(--bp-red);
}

.dropdown-submenu {
    padding-left: 1rem;
    font-size: 0.8rem;
    list-style: none;
}

.dropdown-submenu a { padding: 0.45rem 1.1rem; }

.dropdown-subsubmenu {
    padding-left: 2rem;
    font-size: 0.76rem;
    list-style: none;
}

.dropdown-subsubmenu a { padding: 0.4rem 1.1rem; }

/* === HERO (drawing title field) === */
.hero {
    padding: 5.5rem 0 3.5rem;
    position: relative;
}

.hero h1 {
    margin-bottom: 0.4rem;
}

/* Dimension line under the title: |<--------->| */
.hero h1::after {
    content: '';
    display: block;
    width: min(420px, 70%);
    height: 11px;
    margin-top: 1.1rem;
    background-image:
        /* end bars */
        linear-gradient(var(--bp-anno), var(--bp-anno)),
        linear-gradient(var(--bp-anno), var(--bp-anno)),
        /* center line */
        linear-gradient(var(--bp-anno), var(--bp-anno)),
        /* arrowheads */
        linear-gradient(45deg, transparent 46%, var(--bp-anno) 46% 54%, transparent 54%),
        linear-gradient(-45deg, transparent 46%, var(--bp-anno) 46% 54%, transparent 54%);
    background-repeat: no-repeat;
    background-size: 1px 100%, 1px 100%, calc(100% - 2px) 1px, 9px 9px, 9px 9px;
    background-position: left center, right center, center center, left 1px center, right 1px center;
}

.hero p {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    color: var(--bp-anno);
    max-width: 640px;
    margin-bottom: 0;
}

/* === CONTENT === */
.content-section {
    padding: 1.6rem 0 2.4rem;
}

.content-section h2 {
    margin: 2.2rem 0 1rem;
    padding-bottom: 0.55rem;
    position: relative;
}

/* Section headings carry a short dimension rule |—| */
.content-section h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 120px;
    height: 7px;
    background-image:
        linear-gradient(var(--bp-line-soft), var(--bp-line-soft)),
        linear-gradient(var(--bp-line-soft), var(--bp-line-soft)),
        linear-gradient(var(--bp-line-soft), var(--bp-line-soft));
    background-repeat: no-repeat;
    background-size: 1px 100%, 1px 100%, 100% 1px;
    background-position: left center, right center, center center;
}

.content-section h3 {
    margin: 1.6rem 0 0.7rem;
    color: var(--bp-anno);
}

.content-section ul,
.content-section ol {
    margin: 0 0 1.1rem 1.4rem;
}

.content-section li::marker {
    color: var(--bp-anno);
}

.content-section blockquote {
    margin: 1.4rem 0;
    padding: 0.9rem 1.3rem;
    border-left: 2px solid var(--bp-red);
    background: var(--bp-red-soft);
    font-family: var(--font-mono);
    font-size: 0.92rem;
}

.content-section img {
    border: 1px solid var(--bp-line-faint);
    outline: 1px solid var(--bp-line-ghost);
    outline-offset: 4px;
    margin: 0.6rem 0;
}

.content-section table {
    border-collapse: collapse;
    width: 100%;
    margin: 1.2rem 0;
    font-size: 0.92rem;
}

.content-section th,
.content-section td {
    border: 1px solid var(--bp-line-faint);
    padding: 0.5rem 0.8rem;
    text-align: left;
}

.content-section th {
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    color: var(--bp-anno);
}

/* Price annotation */
.price-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    color: var(--bp-line);
    border: 1px solid var(--bp-line-soft);
    padding: 0.35rem 0.9rem;
    margin: 0.4rem 0 1rem;
}

.price-tag::before {
    content: '≈ ';
    color: var(--bp-anno);
}

/* === BUTTONS === */
/* CTA = approval stamp: double frame, revision ink, slight tilt */
.cta-button {
    display: inline-block;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--bp-red);
    background: transparent;
    border: 3px double var(--bp-red);
    border-bottom: 3px double var(--bp-red);
    padding: 0.85rem 1.9rem;
    margin: 1.2rem 0;
    transform: rotate(-1.5deg);
    transition: transform var(--transition-fast), background var(--transition-fast),
                box-shadow var(--transition-fast);
}

.cta-button:hover {
    transform: rotate(0deg);
    background: var(--bp-red-soft);
    color: var(--bp-red);
    box-shadow: 0 0 0 1px var(--bp-red-soft);
}

/* Generic button = drafting line frame */
.btn {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--bp-line);
    background: transparent;
    border: 1px solid var(--bp-line-soft);
    border-bottom: 1px solid var(--bp-line-soft);
    padding: 0.75rem 1.6rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn:hover {
    border-color: var(--bp-line);
    background: var(--bp-field-raised);
    color: var(--bp-line);
}

/* === PAGE CARDS (mini sheets) === */
.page-cards-grid,
.subpages-sections .page-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    justify-content: center;
    gap: 2rem;
    padding: 2rem 0 3rem;
}

.page-card {
    background: var(--bp-field-deep);
    border: 1px solid var(--bp-line-faint);
    outline: 1px solid var(--bp-line-ghost);
    outline-offset: 4px;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition), border-color var(--transition);
}

/* Revision triangle in the corner of each sheet */
.page-card::after {
    content: 'Δ';
    position: absolute;
    top: 0.45rem;
    right: 0.65rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--bp-red);
    pointer-events: none;
}

.page-card:hover {
    transform: translateY(-4px);
    border-color: var(--bp-line-soft);
}

.page-card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-bottom: 1px solid var(--bp-line-faint);
    filter: grayscale(1) sepia(0.35) hue-rotate(175deg) saturate(2.1) brightness(0.88);
    transition: filter var(--transition);
}

[data-theme="light"] .page-card-image {
    filter: grayscale(1) sepia(0.25) hue-rotate(175deg) saturate(1.4) brightness(1.02) contrast(0.92);
}

.page-card:hover .page-card-image {
    filter: none;
}

.page-card-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-bottom: 1px solid var(--bp-line-faint);
    background-image:
        linear-gradient(45deg, transparent calc(50% - 0.5px), var(--bp-line-ghost) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
        linear-gradient(-45deg, transparent calc(50% - 0.5px), var(--bp-line-ghost) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: var(--bp-line-faint);
}

.page-card-content {
    padding: 1.2rem 1.3rem 1.4rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.page-card-title {
    font-size: 1.3rem;
    margin-bottom: 0.45rem;
}

.page-card-excerpt {
    font-size: 0.92rem;
    color: var(--bp-anno);
    flex: 1;
}

.page-card-link {
    align-self: flex-start;
    margin-top: 1rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--bp-line);
    border-bottom: 1px dashed var(--bp-anno);
}

.page-card-link::after {
    content: ' →';
    color: var(--bp-red);
}

.page-card-link:hover {
    color: var(--bp-anno);
}

/* === GALLERY (figure plates) === */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    justify-content: center;
    gap: 1.6rem;
    counter-reset: bp-figure;
    padding: 0.6rem 0 1rem;
}

.gallery-item {
    position: relative;
    border: 1px solid var(--bp-line-faint);
    outline: 1px solid var(--bp-line-ghost);
    outline-offset: 4px;
    cursor: zoom-in;
    counter-increment: bp-figure;
    background: var(--bp-field-deep);
    transition: border-color var(--transition);
}

.gallery-item:hover {
    border-color: var(--bp-line-soft);
}

.gallery-item img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    /* Cyanotype duotone; full color develops on hover */
    filter: grayscale(1) sepia(0.35) hue-rotate(175deg) saturate(2.1) brightness(0.88);
    transition: filter var(--transition);
}

[data-theme="light"] .gallery-item img {
    filter: grayscale(1) sepia(0.25) hue-rotate(175deg) saturate(1.4) brightness(1.02) contrast(0.92);
}

.gallery-item:hover img {
    filter: none;
}

/* Figure caption strip - decorative, must never intercept the click */
.gallery-item::after {
    content: 'RYS. ' counter(bp-figure, decimal-leading-zero);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.3rem 0.7rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    color: var(--bp-line);
    background: var(--bp-field-deep);
    background: color-mix(in srgb, var(--bp-field-deep) 82%, transparent);
    border-top: 1px solid var(--bp-line-faint);
    pointer-events: none;
}

/* === LIGHTBOX === */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(7, 22, 38, 0.94);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.lightbox.active {
    display: flex;
}

.lightbox img {
    max-width: 90%;
    max-height: 88%;
    border: 1px solid var(--bp-line-faint);
    outline: 1px solid var(--bp-line-ghost);
    outline-offset: 5px;
}

.lightbox-close,
.lightbox-nav,
.lightbox-prev,
.lightbox-next {
    position: absolute;
    width: 46px;
    height: 46px;
    background: transparent;
    color: #e8f1fa;
    border: 1px solid rgba(232, 241, 250, 0.45);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-family: var(--font-mono);
    transition: all var(--transition-fast);
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
    border-color: #e8f1fa;
    background: rgba(232, 241, 250, 0.1);
}

.lightbox-close { top: 1.5rem; right: 1.5rem; }
.lightbox-prev { left: 1.5rem; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 1.5rem; top: 50%; transform: translateY(-50%); }

.lightbox-counter {
    position: absolute;
    bottom: 1.4rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    color: rgba(232, 241, 250, 0.8);
}

/* === TESTIMONIALS (site notes) === */
.testimonials-section {
    padding: 2.5rem 0 3rem;
}

.testimonials-section h2 {
    margin-bottom: 1.6rem;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 1.8rem;
}

.testimonial-card {
    background: var(--bp-field-deep);
    border: 1px solid var(--bp-line-faint);
    outline: 1px solid var(--bp-line-ghost);
    outline-offset: 4px;
    padding: 1.4rem 1.5rem 1.2rem;
    position: relative;
}

/* Field-note label */
.testimonial-card::before {
    content: 'NOTATKA Z BUDOWY';
    display: block;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    color: var(--bp-line-faint);
    margin-bottom: 0.7rem;
}

.testimonial-text {
    font-size: 0.95rem;
    font-style: italic;
}

.testimonial-author {
    margin-top: 0.9rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--bp-anno);
}

.testimonial-author::before {
    content: '— ';
    color: var(--bp-line-faint);
}

.testimonial-rating {
    margin-top: 0.35rem;
    color: var(--bp-red);
    letter-spacing: 0.2em;
    font-size: 0.85rem;
}

/* === CONTACT FORM (specification sheet) === */
.contact-form {
    max-width: 620px;
    margin: 1rem 0 2rem;
}

.form-group {
    margin-bottom: 1.3rem;
}

.form-group label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--bp-anno);
    margin-bottom: 0.4rem;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    background: var(--bp-field-deep);
    border: 1px solid var(--bp-line-faint);
    color: var(--bp-line);
    font-family: var(--font-body);
    font-size: 0.95rem;
    padding: 0.75rem 0.9rem;
    transition: border-color var(--transition-fast), outline-color var(--transition-fast);
    border-radius: 0;
}

.form-group textarea {
    min-height: 150px;
    resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--bp-line);
    outline: 1px solid var(--bp-line-ghost);
    outline-offset: 3px;
}

/* Form status notes */
.success,
.error {
    font-family: var(--font-mono);
    font-size: 0.86rem;
    padding: 0.85rem 1.1rem;
    margin: 1rem 0;
    border: 1px solid;
}

.success {
    color: var(--bp-line);
    border-color: var(--bp-anno);
    background: color-mix(in srgb, var(--bp-anno) 12%, transparent);
}

.success::before { content: '✓ '; color: var(--bp-anno); }

.error {
    color: var(--bp-red);
    border-color: var(--bp-red);
    background: var(--bp-red-soft);
}

.error::before { content: '⚠ '; }

/* === ONE-PAGE & SUBPAGE SECTIONS === */
.onepage-sections section,
.subpages-sections section {
    padding: 2.4rem 0;
    border-top: 1px dashed var(--bp-line-ghost);
}

.onepage-sections section:first-child,
.subpages-sections section:first-child {
    border-top: none;
}

/* === SCROLL ANIMATIONS === */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll {
        opacity: 1;
        transform: none;
    }
}

/* === FOOTER = TITLE BLOCK (signature, part 2) === */
/* The footer is a technical-drawing title block: a bordered grid of
   labeled fields, exactly like the tabelka rysunkowa on a real sheet. */
footer {
    margin-top: 4rem;
    background: var(--bp-field-deep);
    border-top: 2px solid var(--bp-line);
    color: var(--bp-line);
}

footer > .container {
    padding-top: 0;
    padding-bottom: 0;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    border-left: 1px solid var(--bp-line-faint);
    border-right: 1px solid var(--bp-line-faint);
}

/* Each footer section is one cell of the title block */
.footer-section {
    padding: 1.3rem 1.4rem 1.5rem;
    border-right: 1px solid var(--bp-line-faint);
    min-width: 0;
}

.footer-section:last-child {
    border-right: none;
}

/* Field labels - small mono caps with an index, like real block fields */
.footer-section h3 {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bp-anno);
    border-bottom: 1px solid var(--bp-line-faint);
    padding-bottom: 0.45rem;
    margin-bottom: 0.8rem;
}

.footer-section p {
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
}

.footer-section a {
    color: var(--bp-line);
}

.footer-section a:hover {
    color: var(--bp-anno);
}

.footer-menu {
    list-style: none;
}

.footer-menu li {
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
}

.footer-menu a {
    border-bottom: none;
}

.footer-menu a::before {
    content: '— ';
    color: var(--bp-line-faint);
}

.footer-menu a:hover {
    color: var(--bp-anno);
}

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

.social-links a {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 1px solid var(--bp-line-faint);
    border-bottom: 1px solid var(--bp-line-faint);
    padding: 0.35rem 0.8rem;
    transition: all var(--transition-fast);
}

.social-links a:hover {
    border-color: var(--bp-line);
    color: var(--bp-line);
}

/* Bottom strip of the title block: scale field + copyright + sheet number */
.copyright {
    border: 1px solid var(--bp-line-faint);
    border-bottom: none;
    border-top: 2px solid var(--bp-line);
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 0.65rem 1.4rem;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bp-anno);
}

.copyright::before {
    content: 'SKALA 1:1';
    color: var(--bp-line-faint);
    border-right: 1px solid var(--bp-line-faint);
    padding-right: 1.2rem;
    white-space: nowrap;
}

.copyright::after {
    content: 'ARK. 1/1';
    margin-left: auto;
    color: var(--bp-line-faint);
    border-left: 1px solid var(--bp-line-faint);
    padding-left: 1.2rem;
    white-space: nowrap;
}

.copyright p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.copyright a {
    border-bottom: none;
    color: var(--bp-anno);
}

.copyright a:hover {
    color: var(--bp-line);
}

/* === ACCESSIBILITY === */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--bp-anno);
    outline-offset: 3px;
}

/* === RESPONSIVE === */
@media (max-width: 900px) {
    .footer-content {
        grid-template-columns: 1fr;
    }
    .footer-section {
        border-right: none;
        border-bottom: 1px solid var(--bp-line-faint);
    }
    .footer-section:last-child {
        border-bottom: none;
    }
}

@media (max-width: 768px) {
    :root {
        --sheet-inset: 8px;
    }

    .container {
        padding: 0 1.1rem;
    }

    .header-content {
        gap: 0.7rem;
    }

    nav {
        flex-shrink: 0;
    }

    /* v1.0.1: on narrow screens the button slims down to the ☰ glyph */
    .hamburger-btn {
        padding: 0.55rem 0.8rem;
    }

    .hamburger-btn span:last-child {
        display: none;
    }

    .dark-mode-toggle {
        bottom: 1.1rem;
        right: 1.1rem;
        width: 40px;
        height: 38px;
    }

    .logo-container img {
        height: 46px;
    }

    .site-title {
        font-size: 1.2rem;
    }

    .hero {
        padding: 3.2rem 0 2.4rem;
    }

    .dropdown-menu {
        /* Mobile fix (6.2.5): bind top AND bottom so the scroll area
           equals the visible screen - reaches the last item in landscape.
           Paired with the body-scroll lock in script.js. */
        position: fixed;
        top: 68px;
        bottom: 12px;
        left: 1rem;
        right: 1rem;
        margin-top: 0;
        max-height: none;
        padding-bottom: 0.4rem;
        min-width: 0;
    }

    .copyright {
        flex-wrap: wrap;
        gap: 0.6rem;
    }

    .copyright::before,
    .copyright::after {
        display: none;
    }

    .page-cards-grid,
    .gallery-grid,
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    html::before,
    html::after,
    body::before {
        display: none;
    }
}

/* === PRINT (a blueprint should print like a drawing) === */
@media print {
    body {
        background: #fff;
        color: #1d3a5f;
    }
    html::before,
    html::after,
    body::before,
    header,
    .dark-mode-toggle,
    .hamburger-menu {
        display: none;
    }
}

/* === PLACEHOLDER COMPOSITIONS (v1.0.3) ===
   Unfinished drawing: rings, dimension lines, crosshatch and the
   revision triangle; on hover the draftsman nudges the compasses. */
.page-card-placeholder span { display: none; }

.page-card-placeholder {
    position: relative;
    overflow: hidden;
    background: var(--bp-field-deep);
}

.page-card-placeholder::before,
.page-card-placeholder::after {
    content: '';
    position: absolute;
    animation: none;
    -webkit-mask-image: none;
    mask-image: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    filter: none;
    opacity: 1;
    width: auto;
    height: auto;
    inset: auto;
    transition: transform 0.5s ease;
}

/* Composition 1: compass ring + dimension line */
.page-card-placeholder::before {
    inset: 0;
    background:
        radial-gradient(circle at 38% 46%,
            transparent 0 19%, var(--bp-line-soft) 19% 19.8%, transparent 19.8%),
        radial-gradient(circle at 38% 46%, var(--bp-line-soft) 0 1.2%, transparent 2%),
        linear-gradient(var(--bp-anno), var(--bp-anno)) 60% 78% / 1px 12px no-repeat,
        linear-gradient(var(--bp-anno), var(--bp-anno)) 88% 78% / 1px 12px no-repeat,
        linear-gradient(var(--bp-anno), var(--bp-anno)) 74% 78% / 28% 1px no-repeat;
}

.page-card-placeholder::after {
    width: 64px;
    height: 64px;
    top: 14%;
    right: 12%;
    background:
        repeating-linear-gradient(45deg, var(--bp-line-ghost) 0 1px, transparent 1px 7px);
    border: 1px solid var(--bp-line-faint);
}

/* Composition 2: registration cross + revision triangle */
.page-card:nth-child(2n) .page-card-placeholder::before {
    background:
        linear-gradient(var(--bp-line-faint), var(--bp-line-faint)) 50% 50% / 56% 1px no-repeat,
        linear-gradient(var(--bp-line-faint), var(--bp-line-faint)) 50% 50% / 1px 56% no-repeat,
        radial-gradient(circle at 50% 50%,
            transparent 0 9%, var(--bp-line-soft) 9% 9.9%, transparent 9.9%);
}

.page-card:nth-child(2n) .page-card-placeholder::after {
    width: 30px;
    height: 30px;
    top: auto;
    right: auto;
    bottom: 16%;
    left: 14%;
    border: none;
    background:
        conic-gradient(from 240deg at 50% 66%,
            transparent 0 60deg, var(--bp-red) 60deg 62deg, transparent 62deg 118deg,
            var(--bp-red) 118deg 120deg, transparent 120deg);
    border-bottom: 1.5px solid var(--bp-red);
}

/* Composition 3: section arc + hatched band */
.page-card:nth-child(3n) .page-card-placeholder::before {
    background:
        radial-gradient(circle at 18% 110%,
            transparent 0 52%, var(--bp-line-soft) 52% 52.7%, transparent 52.7% 66%,
            var(--bp-line-faint) 66% 66.7%, transparent 66.7%);
}

.page-card:nth-child(3n) .page-card-placeholder::after {
    width: 44%;
    height: 18px;
    top: 20%;
    right: 12%;
    border: 1px solid var(--bp-line-faint);
    background:
        repeating-linear-gradient(-45deg, var(--bp-line-ghost) 0 1px, transparent 1px 6px);
}

.page-card:hover .page-card-placeholder::before {
    transform: rotate(-2deg) scale(1.04);
}

.page-card:hover .page-card-placeholder::after {
    transform: translate(-6px, 4px) rotate(2deg);
}

@media (prefers-reduced-motion: reduce) {
    .page-card-placeholder::before,
    .page-card-placeholder::after {
        transition: none !important;
    }
}