/* =========================================================
   MACIASZEK — tokeny marki nad silnikiem studio-base
   Ciemna galeria: zdjęcia Jakuba są jedynym kolorem.
   Akcent czerwony #C8102E wyłącznie dla decyzji (CTA, stan aktywny).
   Źródło: Klienci/maciaszek-jakub/DESIGN.md
   ========================================================= */

:root{
  /* --- tła --- */
  --c-bg:        #0D0D0D;   /* galeryjna czerń */
  --c-bg-2:      #161616;   /* sekcje wydzielone */
  --c-bg-3:      #1C1C1C;   /* pola formularza, hover */
  --c-surface:   #161616;
  --c-bg-rgb:    13,13,13;

  /* --- tekst --- */
  --c-text:      #F2F0ED;   /* 17,4:1 na --c-bg — AAA */
  --c-muted:     #8A8A8A;   /* 5,6:1 na --c-bg — AA */
  --c-ink-rgb:   242,240,237;

  /* --- linie --- */
  --c-line:      #2A2A2A;

  /* --- akcent: JEDEN kolor, tylko decyzje --- */
  --c-primary:   #C8102E;
  --c-primary-2: #A50D26;   /* hover / wciśnięty */
  --c-primary-3: #E01B3A;   /* focus */
  --c-primary-4: rgba(200,16,46,.12);
  --c-primary-rgb: 200,16,46;

  /* Drugiego koloru akcentowego świadomie NIE ma — patrz ZAKAZANE w DESIGN.md. */
  --c-accent:      #C8102E;
  --c-accent-2:    #A50D26;
  --c-accent-rgb:  200,16,46;

  /* --- typografia --- */
  --font-display: 'Archivo Black', 'Archivo', system-ui, sans-serif;
  --font-body:    'Newsreader', Georgia, 'Times New Roman', serif;
  --font-accent:  'Archivo', system-ui, sans-serif;

  /* --- geometria: zero zaokrągleń, kadr ma ostre rogi --- */
  --r-btn:   0;
  --r-card:  0;
  --r-photo: 0;

  /* --- layout --- */
  --maxw:  1280px;
  --pad:   24px;
  --photo: 4/5;

  /* --- ruch --- */
  --ease:    cubic-bezier(.22,.61,.36,1);
  --outline: 2px solid var(--c-primary-3);
  --solid:   #000;
}

/* =========================================================
   TYPOGRAFIA — skala 1:1,25, baza 16 px
   ========================================================= */
body{
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  background: var(--c-bg);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.05;
}
h1{ font-size: clamp(2.441rem, 5.6vw, 3.815rem); }
h2{ font-size: clamp(1.953rem, 4vw, 2.441rem); }
h3{ font-size: 1.25rem; }
p{ max-width: 62ch; }

/* Nadkreślenia, etykiety, przyciski — grotesk, nie serif. */
.eyebrow,.btn,button,input,textarea,select,label,nav,.cap{
  font-family: var(--font-accent);
}

/* =========================================================
   SYGNATURA — czerwona kreska pod słowem w H1.
   Tekst maluje się NAD kreską: ogonek „j" ją przecina.
   ========================================================= */
.mark-underline{ position: relative; display: inline-block; isolation: isolate; }
.mark-underline .mu-t{ position: relative; z-index: 2; }
.mark-underline svg{
  position: absolute; left: -3%; bottom: -.05em;
  width: 106%; height: .32em; overflow: visible; z-index: 1;
}
.mark-underline path{
  fill: none; stroke: var(--c-primary);
  stroke-width: 7; stroke-linecap: round;
}

/* =========================================================
   FOTOGRAFIA — reguła kadrowania z DESIGN.md.
   Portretów NIE przycinamy: żadnego cover na zdjęciu z człowiekiem.
   ========================================================= */
.portret img,
.hero-split__photo img,
.author__photo img{
  width: 100%;
  height: auto;
  object-fit: initial;   /* nadpisuje ewentualny cover z bazy */
}

/* =========================================================
   DOSTĘPNOŚĆ
   ========================================================= */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline: var(--outline);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}