/* =========================================================================
   PALETA - wszystko do przestawiania siedzi tutaj.
   Podmieniasz 4 wartosci w bloku LIGHT i cala strona idzie za tym.
   Gotowe alternatywy na dole tego bloku - odkomentuj jedna.
   ========================================================================= */
:root {
   /* --- LIGHT --- */
   --paper:      #f7f3ec;   /* tlo strony */
   --paper-2:    #efe9df;   /* tlo wtracen: cytat, stopka, hover */
   --ink:        #191817;   /* tekst glowny */
   --ink-soft:   #4c4741;   /* tekst akapitowy */
   --ink-faint:  #8d857a;   /* metadane, etykiety */
   --rule:       #ddd4c6;   /* linie i ramki */

   /* Akcent ma dwie role i dlatego dwa tokeny.
      --accent nosi TEKST (daty, klucze, linki) => musi trzymac kontrast >= 4.5:1 na papierze.
      --accent-soft to czysta DEKORACJA (kreski, znaczniki, ramki) => moze byc dowolnie jasny. */
   --accent:      #b44e66;  /* tekstowy roz, 4.5:1 na papierze */
   --accent-2:    #8d3550;  /* ciemniejszy: hover, wypelnienie przycisku */
   --accent-soft: #dc9aa8;  /* jasny roz: markery list, kreski, ramki */
   --accent-wash: #f7e9ec;  /* ledwo widoczny podklad: pasek profilu, zaznaczenie */

   /* --- alternatywy akcentu (podmien cala czworke) ---
   roz mocniejszy: #a8405c / #7d2a44 / #d4879a / #f5e5e9
   terakota:       #a8543c / #7a3a2a / #d9a48f / #f4e9e3   (poprzedni default)
   wino:           #8a3450 / #63233a / #c88fa3 / #f3e6ea
   las:            #2f5d50 / #204039 / #93bdb0 / #e6efec
   atrament:       #2c4a6e / #1d3450 / #93aecb / #e6ecf3
   grafit:         #3d3d40 / #191a1c / #a9a9ad / #eaeae8

   Chlodniejszy papier pod roz: --paper:#f8f3f1; --paper-2:#f0e5e4; --rule:#e2d2cf;
   */

   /* --- TYPOGRAFIA --- */
   --f-hand: "Architects Daughter", "Segoe Script", cursive;
   --f-disp: "Fraunces", Georgia, "Times New Roman", serif;
   --f-text: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

   /* --- SIATKA --- */
   --page:  1180px;                    /* szerokosc arkusza */
   --rail:  clamp(112px, 15vw, 186px); /* lewa szyna z etykietami sekcji */
   --rail-2: clamp(84px, 9.5vw, 124px);/* wezsza szyna kluczy w warsztacie */
   --gutter: clamp(22px, 4vw, 54px);   /* odstep szyna <-> tresc */
   --pad:   clamp(20px, 5vw, 76px);    /* margines strony */
}

/* --- DARK --- */
@media (prefers-color-scheme: dark) {
   :root {
      --paper:     #141312;
      --paper-2:   #1e1c1a;
      --ink:       #efece6;
      --ink-soft:  #bab3a9;
      --ink-faint: #837b70;
      --rule:        #302c28;
      --accent:      #e2919f;
      --accent-2:    #f3b0bc;
      --accent-soft: #8f5261;
      --accent-wash: #2a1d21;
   }
}

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

html {
   -webkit-text-size-adjust: 100%;
   scroll-behavior: smooth;
}

body {
   margin: 0;
   /* pasek drukarski u gory arkusza: gradient accent -> accent-2, lewa do prawej */
   background:
      linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%) top left / 100% 6px no-repeat,
      var(--paper);
   color: var(--ink);
   font-family: var(--f-text);
   font-size: clamp(15px, .55vw + 13.4px, 16.5px);
   line-height: 1.62;
   font-feature-settings: "ss01", "cv05";
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-2); }

::selection { background: var(--accent-wash); color: var(--accent-2); }
:root { accent-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

h1, h2, h3 { margin: 0; font-weight: 400; }

.sheet {
   max-width: var(--page);
   margin: 0 auto;
   padding: clamp(34px, 7vw, 86px) var(--pad) clamp(48px, 8vw, 110px);
}

/* =========================================================================
   NAGLOWEK
   ========================================================================= */
.masthead {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   align-items: end;
   gap: clamp(20px, 4vw, 60px);
   padding-bottom: clamp(18px, 3vw, 30px);
}

.sig {
   display: block;
   font-family: var(--f-hand);
   font-size: clamp(52px, 11.5vw, 128px);
   line-height: .92;
   color: var(--ink);
   letter-spacing: -.005em;
   transform: rotate(-1.2deg);
   transform-origin: left bottom;
   margin-bottom: .06em;
}

.underline {
   display: block;
   width: clamp(180px, 34%, 340px);
   height: 12px;
   overflow: visible;
   color: var(--accent);
   margin-bottom: clamp(14px, 2vw, 22px);
}
.underline path {
   fill: none;
   stroke: currentColor;
   stroke-width: 2.2;
   stroke-linecap: round;
   opacity: .85;
}

.role {
   font-family: var(--f-disp);
   font-optical-sizing: auto;
   font-size: clamp(19px, 2.1vw, 27px);
   font-weight: 500;
   line-height: 1.25;
   letter-spacing: -.01em;
   max-width: 22ch;
}

/* Fallback first: a plain solid accent. Browsers without background-clip:text
   stop here and still get readable, on-brand text. */
.role em {
   font-style: italic;
   color: var(--accent);
   font-weight: 400;
}

/* Progressive enhancement. Firefox took the unprefixed property, WebKit and Blink
   only the prefixed one, hence the "or" - a single condition would drop one camp. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
   .role em {
      background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
      /* the phrase can wrap; without this each line would show a slice of one
         gradient instead of the whole ramp */
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
   }
}

/* --- dossier: klucz recedes, wartosc czyta sie jak tresc, strzalka zaprasza --- */
.dossier {
   font-style: normal;
   min-width: min(330px, 100%);
   border-top: 1px solid var(--rule);
}

.dossier__row {
   display: grid;
   grid-template-columns: 3.5em minmax(0, 1fr) 10px;
   align-items: baseline;
   gap: 0 14px;
   padding: 9px 2px 9px 0;
   border-bottom: 1px solid var(--rule);
   text-decoration: none;
   color: inherit;
   margin: 0;
}

.dossier__k {
   font-family: var(--f-mono);
   font-size: 10px;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--ink-faint);
   opacity: .85;
}

.dossier__v {
   font-size: 14px;
   line-height: 1.4;
   color: var(--ink);
   overflow-wrap: anywhere;
   transition: color .18s ease;
}

/* chevron tylko przy wierszach klikalnych */
a.dossier__row::after {
   content: "";
   align-self: center;
   width: 6px;
   height: 6px;
   border-top: 1.6px solid var(--accent);
   border-right: 1.6px solid var(--accent);
   transform: rotate(45deg) translate(-2px, 2px);
   opacity: 0;
   transition: opacity .18s ease, transform .18s ease;
}
a.dossier__row:hover .dossier__v { color: var(--accent); }
a.dossier__row:hover::after { opacity: 1; transform: rotate(45deg) translate(0, 0); }

/* ostatni wiersz to stan, nie dane kontaktowe */
.dossier__status {
   display: flex;
   align-items: center;
   gap: 9px;
   margin: 12px 0 0;
   font-family: var(--f-mono);
   font-size: 11px;
   letter-spacing: .04em;
   color: var(--ink-soft);
}
.dossier__status i {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: var(--accent);
   box-shadow: 0 0 0 3px var(--accent-wash);
   flex: 0 0 auto;
}

/* pasek akcji */
.actions {
   grid-column: 1 / -1;
   display: flex;
   flex-wrap: wrap;
   gap: 10px 12px;
   margin-top: clamp(20px, 3vw, 34px);
}

.btn {
   font-family: var(--f-mono);
   font-size: 12.5px;
   letter-spacing: .02em;
   padding: 10px 16px;
   border: 1px solid var(--rule);
   background: transparent;
   color: var(--ink-soft);
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   gap: 9px;
   transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { border-color: var(--accent); color: var(--accent); background: var(--paper-2); }
.btn svg { width: 14px; height: 14px; }

.btn--fill {
   background: var(--accent);
   border-color: var(--accent);
   color: var(--paper);
}
.btn--fill:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--paper); }

/* =========================================================================
   SIATKA REDAKCYJNA - lewa szyna + tresc
   ========================================================================= */
.row {
   display: grid;
   grid-template-columns: var(--rail) minmax(0, 1fr);
   column-gap: var(--gutter);
   border-top: 1px solid var(--rule);
   padding: clamp(26px, 3.6vw, 46px) 0;
}

.subrow {
   display: grid;
   grid-template-columns: var(--rail-2) minmax(0, 1fr);
   column-gap: clamp(16px, 2vw, 26px);
}

/* etykieta jedzie z trescia - lewy kanal nigdy nie jest martwy */
.row__label {
   position: sticky;
   top: clamp(16px, 3vh, 34px);
   align-self: start;
   font-family: var(--f-mono);
   font-size: 11.5px;
   font-weight: 500;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: var(--accent);
   padding-top: .45em;
}

.row__label small {
   color: var(--ink-faint);
   display: block;
   margin-top: .5em;
   font-size: 10.5px;
   letter-spacing: .02em;
   text-transform: none;
   opacity: .7;
}

.prose { max-width: 66ch; }

.lead {
   font-family: var(--f-disp);
   font-optical-sizing: auto;
   font-size: clamp(17px, 1.35vw, 21px);
   font-weight: 400;
   line-height: 1.58;
   color: var(--ink-soft);
   margin: 0;
   max-width: 60ch;
}
.lead strong { color: var(--ink); font-weight: 600; }

/* =========================================================================
   DOSWIADCZENIE
   ========================================================================= */
.job + .job {
   margin-top: clamp(26px, 3vw, 38px);
   padding-top: clamp(26px, 3vw, 38px);
   border-top: 1px solid var(--rule);
}

/* dateline nad tytulem zamiast osobnej kolumny dat */
.job__meta {
   font-family: var(--f-mono);
   font-size: 11.8px;
   letter-spacing: .045em;
   line-height: 1.6;
   color: var(--ink-faint);
   font-variant-numeric: tabular-nums;
   margin: 0 0 .5em;
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
   gap: 0 .62em;
}
.job__meta b {
   font-weight: 500;
   color: var(--accent);
   white-space: nowrap;
}
.job__meta i {
   font-style: normal;
   opacity: .45;
}

.job__title {
   font-family: var(--f-disp);
   font-optical-sizing: auto;
   font-size: clamp(20px, 1.75vw, 26px);
   font-weight: 600;
   line-height: 1.22;
   letter-spacing: -.012em;
   margin-bottom: .28em;
}
.job__title span {
   color: var(--accent);
   font-weight: 500;
}

.job__title + ul,
.job__title + .job__note { margin-top: 1.05em; }

.job ul {
   margin: 0;
   padding: 0;
   list-style: none;
   max-width: 68ch;
}

.job li {
   position: relative;
   padding-left: 26px;
   margin-bottom: .62em;
   color: var(--ink-soft);
   font-size: .95em;
}
.job li::before {
   content: "";
   position: absolute;
   left: 0;
   top: .72em;
   width: 13px;
   height: 2px;
   background: var(--accent-soft);
}
.job li b { color: var(--ink); font-weight: 600; }

.stack {
   font-family: var(--f-mono);
   font-size: 11.8px;
   line-height: 1.85;
   color: var(--ink-faint);
   margin: 1.4em 0 0;
   max-width: 74ch;
}
.stack::before {
   content: "stack";
   color: var(--accent);
   margin-right: .9em;
   opacity: .9;
}

.job__note {
   margin: 0;
   color: var(--ink-soft);
   font-size: .95em;
   max-width: 66ch;
}

/* =========================================================================
   UMIEJETNOSCI - typograficznie, bez chmury tagow
   ========================================================================= */
.subrow + .subrow { margin-top: 1.15em; }

.subrow__key {
   font-family: var(--f-mono);
   font-size: 11.5px;
   letter-spacing: .04em;
   color: var(--accent);
   padding-top: .42em;
}

.subrow__val {
   margin: 0;
   color: var(--ink-soft);
   font-size: .95em;
   line-height: 1.72;
   max-width: 70ch;
}
.subrow__val b { color: var(--ink); font-weight: 600; }
.subrow__val i {
   font-style: normal;
   color: var(--ink-faint);
   font-family: var(--f-mono);
   font-size: .88em;
}

/* =========================================================================
   EDUKACJA / JEZYKI
   ========================================================================= */
.item + .item { margin-top: 1.9em; }

.item h3 {
   font-family: var(--f-disp);
   font-optical-sizing: auto;
   font-size: clamp(17px, 1.3vw, 20px);
   font-weight: 600;
   letter-spacing: -.008em;
   margin-bottom: .2em;
}

.item .where {
   font-family: var(--f-mono);
   font-size: 11.8px;
   color: var(--ink-faint);
   margin: 0 0 .55em;
}

.item p:last-child {
   margin: 0;
   color: var(--ink-soft);
   font-size: .93em;
   max-width: 64ch;
}

.thesis {
   border-left: 2px solid var(--accent-soft);
   padding-left: 16px;
}

.item .where b { color: var(--accent); font-weight: 500; }

/* =========================================================================
   STOPKA
   ========================================================================= */
.foot {
   position: relative;
   border-top: 1px solid var(--rule);
   margin-top: clamp(38px, 5vw, 60px);
   padding-top: 34px;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   gap: 10px 24px;
   font-family: var(--f-mono);
   font-size: 11.5px;
   color: var(--ink-faint);
}
.foot a { text-decoration: none; border-bottom: 1px solid var(--rule); }

/* Version stamp. Deliberately near-invisible: present for whoever goes looking,
   silent for everyone else. Also in <meta name="version"> for machine reading.
   Opacity rises on hover so it can be read without hunting for it. */
.ver {
   margin-left: 12px;
   font-size: 9px;
   letter-spacing: .08em;
   color: var(--ink-faint);
   opacity: .35;
   transition: opacity .2s ease;
   cursor: default;
}
.ver:hover { opacity: .9; }

/* Printer's fleuron: the mark sits IN a gap in the rule rather than above it.
   The paper-coloured side padding is what cuts that gap - the border is still one
   unbroken line, it is just masked where the flower crosses it.
   NO opacity here: it would fade the mask too, letting the rule bleed through and
   drawing a visible seam around the flower.
   Used twice - opening the document above Profil, closing it in the footer. */
.mark {
   position: absolute;
   top: 0;
   left: 50%;
   transform: translate(-50%, -50%);
   box-sizing: content-box;
   width: 32px;
   height: 32px;
   padding: 0 14px;
   background: var(--paper);
}

/* the row carrying a mark needs clearance so the lower half of the flower
   does not crowd the label and the lead paragraph */
.row--mark {
   position: relative;
   padding-top: clamp(42px, 4.6vw, 62px);
}

/* =========================================================================
   RWD
   ========================================================================= */
@media (max-width: 860px) {
   .masthead {
      grid-template-columns: minmax(0, 1fr);
      align-items: start;
   }
   .dossier { min-width: 0; width: 100%; }
   .underline { width: min(260px, 60%); }
   .role { max-width: none; }
}

@media (max-width: 720px) {
   .row,
   .subrow {
      grid-template-columns: minmax(0, 1fr);
      row-gap: 14px;
   }
   .row__label {
      position: static;
      padding-top: 0;
      padding-bottom: 2px;
      border-bottom: 1px solid var(--rule);
   }
   .row__label small { display: inline; margin-left: .6em; }
   .subrow { row-gap: 4px; }
   .subrow__key { padding-top: 0; }
   .subrow + .subrow { margin-top: 1.6em; }
   .actions { margin-top: 26px; }
   .btn { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 420px) {
   .sig { font-size: clamp(44px, 15vw, 62px); }
}

/* =========================================================================
   DRUK
   ========================================================================= */
@media print {
   :root {
      --paper: #fff; --paper-2: #fff; --ink: #000;
      --ink-soft: #222; --ink-faint: #666; --rule: #ccc;
   }
   body { font-size: 10.5pt; }
   /* the mark's paper-coloured mask is a background, so on paper the rule would
      run straight through the flower - drop it instead */
   .actions, .underline, .mark { display: none; }
   .foot { padding-top: 22px; }
   .row--mark { padding-top: clamp(26px, 3.6vw, 46px); }
   /* Browsers do not print backgrounds by default. Gradient-clipped text would
      therefore come out INVISIBLE on paper - force it back to solid ink. */
   .role em {
      background: none;
      color: var(--accent);
      -webkit-text-fill-color: var(--accent);
   }
   .row, .job, .item { break-inside: avoid; }
   .sheet { padding: 0; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
   * { transition: none !important; scroll-behavior: auto !important; }
}