/* Podstawa: tokeny z projektu, typografia, przyciski. Mobile-first —
   styl bazowy jest dla telefonu, większe ekrany dokładają min-width. */

:root {
    color-scheme: light;
    --paper: #ffffff;
    --paper-2: #f4f4f2;
    --paper-3: #eceded;
    --ink: #4a4f54;
    --ink-strong: #2b2f33;
    /* Szarości tekstu z kontrastem ≥ 4,5:1 na bieli i na jasnym tle kontaktu (test_contrast.py). */
    --muted: #5f6569;
    --muted-2: #6a7074;
    --line: #dcdedd;
    --line-strong: #c3c7c8;
    --error: #a23b2a;
    --serif: "Forum", "Times New Roman", serif;
    /* Tinos = kształty Times New Roman, ale nasz plik — kursywa wygląda tak samo na Androidzie i iPhonie. */
    --serif-italic: "Tinos", "Times New Roman", Times, serif;
    --sans: "Jost", "Century Gothic", "Futura", system-ui, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, "Courier New", monospace;
    --gutter: clamp(16px, 4.5vw, 64px);
    --masthead-h: 64px;
    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--masthead-h) + 12px);
}
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-weight: 300;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
ul { margin: 0; padding: 0; }
:focus-visible { outline: 1px solid var(--ink-strong); outline-offset: 4px; }

/* Atrybut hidden chowa zawsze — także elementy z własnym display (grid, flex) w arkuszu strony. */
[hidden] { display: none !important; }

/* Ikona Phosphor (partials/icon.html) — kolor z tekstu, rozmiar nadpisuje miejsce użycia. */
.icon { display: block; width: 1.25em; height: 1.25em; flex: 0 0 auto; }

.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
    position: absolute; left: 12px; top: -60px; z-index: 100;
    background: var(--ink-strong); color: #fff; padding: 10px 14px; font-size: 13px;
}
.skip:focus { top: 12px; }

/* Strona przestaje rosnąć na szerokim monitorze — układ się centruje. */
.shell { padding-inline: var(--gutter); max-width: 1500px; margin-inline: auto; }

.eyebrow {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--muted);
}

/* Tytuł dwuwierszowy: druga linia kursywą (Times), jak w projekcie. */
.title {
    font-family: var(--serif); font-weight: 400; color: var(--ink-strong);
    font-size: clamp(30px, 8vw, 44px); line-height: 1.04; letter-spacing: -0.01em;
    font-variant-numeric: lining-nums;
}
.title em {
    display: block; font-family: var(--serif-italic); font-style: italic;
    font-size: 0.9em; letter-spacing: -0.03em;
}

/* Znak pracowni w tekście — środkowe N lustrzane (filtr `wordmark`). */
.wm { --wm-ls: 0.2em; font-weight: 500; letter-spacing: var(--wm-ls); color: var(--ink-strong); white-space: nowrap; }
.wm i {
    display: inline-block; transform: scaleX(-1); font-style: normal;
    margin-left: calc(var(--wm-ls, 0.14em) * -1);
    margin-right: calc(var(--wm-ls, 0.14em) + 0.07em);
}

/* ---------- przyciski ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    min-height: 48px; padding: 14px 20px;
    font-size: 11px; font-weight: 400; letter-spacing: 0.13em; text-transform: uppercase;
    border: 1px solid var(--ink-strong); color: var(--ink-strong); background: transparent;
}
.btn--solid { background: var(--ink-strong); color: #fff; }
.btn--ghost { border-color: var(--line-strong); color: var(--ink); }
.btn__arrow { font-style: normal; font-size: 14px; }
/* Hover: wypełnienie wjeżdża od lewej jak przeciągnięta kreska, a po zjechaniu myszy wyjeżdża w prawo
   (zmiana punktu zaczepienia); tekst i ramka zmieniają kolor w tym samym tempie. Tylko z myszą. */
.theme-classic .btn { position: relative; isolation: isolate; overflow: hidden; }
.theme-classic .btn::before {
    content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink-strong);
    transform: scaleX(0); transform-origin: right center; transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.theme-classic .btn--solid::before { background: #fff; }
.theme-classic .btn--ghost::before { background: var(--paper-2); }
.theme-classic .btn.tap {
    transition: transform var(--press-out), color 0.5s cubic-bezier(0.65, 0, 0.35, 1),
        border-color 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
@media (hover: hover) and (pointer: fine) {
    .btn:hover { background: var(--ink-strong); color: #fff; }
    .btn--solid:hover { background: #fff; color: var(--ink-strong); }
    .btn--ghost:hover { background: var(--paper-2); color: var(--ink-strong); border-color: var(--ink); }
    /* Motyw klasyczny: tło robi wypełnienie (::before), nie skok koloru tła. */
    .theme-classic .btn:hover { background: transparent; }
    .theme-classic .btn--solid:hover { background: var(--ink-strong); }
    .theme-classic .btn:hover::before { transform: none; transform-origin: left center; }
}

/* Przycisk odsłaniający e-mail/telefon i odnośnik, którym się staje. */
.reveal {
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px;
    color: var(--ink-strong); border-bottom: 1px dashed var(--line-strong); padding-block: 6px;
}
.reveal::before { content: "＠"; font-size: 0.85em; color: var(--muted); }
.reveal[data-reveal-kind="tel"]::before { content: "☏"; }
.reveal.is-revealed { border-bottom-style: solid; }
.reveal.is-revealed::before { content: none; }
@media (hover: hover) and (pointer: fine) {
    .reveal:hover { border-bottom-color: var(--ink-strong); }
}

.prose { font-size: 15px; line-height: 1.75; max-width: 70ch; }
.prose h2 { font-family: var(--serif); font-weight: 400; font-size: 28px; color: var(--ink-strong); margin: 1.6em 0 0.5em; }
.prose h3 { font-size: 15px; font-weight: 500; color: var(--ink-strong); margin: 1.4em 0 0.4em; }
.prose p + p { margin-top: 0.9em; }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0.8em 0; }
.prose a { border-bottom: 1px solid var(--line-strong); }
.prose i, .prose em { color: var(--ink-strong); }

@media (min-width: 900px) {
    :root { --masthead-h: 76px; }
    body { font-size: 15px; }
    .title { font-size: clamp(32px, 3.2vw, 44px); }
}

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