/* Base — reset, typography, layout primitives */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

/* Any anchor target (#form, #programy, FAQ/TOC ids, ...) must clear the fixed floating header */
[id]{ scroll-margin-top: calc(var(--header-h) + 40px); }

body{
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.1vw, 1.125rem);
  line-height: 1.75;
  color: var(--text-body);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; overflow-wrap: anywhere; }
button{ font: inherit; cursor: pointer; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
table{ border-collapse: collapse; width: 100%; }

h1, h2, h3, h4{
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-strong);
  line-height: 1.2;
  margin: 0;
  overflow-wrap: break-word;
}
h1{ font-size: clamp(2.2rem, 5vw, 3.8rem); }
h2{ font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
h3{ font-size: clamp(1.2rem, 1.6vw, 1.5rem); }
p{ margin: 0 0 1rem; max-width: 72ch; }

.container{
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 24px;
}

.section{ padding: 96px 0; position: relative; }
@media (max-width: 768px){ .section{ padding: 64px 0; } }

.section-header{ text-align: center; max-width: 640px; margin: 0 auto 48px; }
.section-header p{ margin-left: auto; margin-right: auto; color: var(--text-muted); }

.longread{ max-width: 72ch; }
.longread h2{ margin: 0 0 20px; text-align: left; }
.longread h2 + p, .longread h3 + p{ margin-top: 0; }
.longread > * + h2{ margin-top: 48px; }
.longread > * + h3{ margin-top: 32px; }
.longread p{ margin: 0 0 20px; }
.longread ul, .longread ol{ margin: 0 0 20px; padding-left: 1.4rem; }
.longread li{ margin-bottom: 8px; }
.longread ul{ list-style: disc; }
.longread ol{ list-style: decimal; }

/* "Breathing" content blocks inside longreads */
.breather{
  background: var(--tint-2);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin: 40px 0;
}
.breather.breather--accent{ background: var(--tint-3); }

.longread table{ display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 24px 0 32px; font-size: .95rem; }
.longread table thead, .longread table tbody{ display: table; width: 100%; }
.longread table caption{ text-align: left; font-weight: 700; margin-bottom: 8px; color: var(--text-strong); }
.longread th, .longread td{ padding: 12px 16px; border-bottom: 1px solid var(--tint-1); text-align: left; }
.longread th{ font-family: var(--font-display); color: var(--text-strong); background: var(--tint-2); }
.longread tr:last-child td{ border-bottom: none; }

.visually-hidden{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

:focus-visible{ outline: 3px solid var(--brand-primary-dark); outline-offset: 3px; border-radius: 4px; }

.selectable{ user-select: text !important; -webkit-user-select: text !important; }

/* Doodle decor */
.doodle{ position: absolute; color: var(--brand-accent); opacity: .55; pointer-events: none; }
.doodle--primary{ color: var(--brand-primary); }
.doodle-float{ animation: doodle-float 6s ease-in-out infinite; }
@keyframes doodle-float{
  0%, 100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-8px) rotate(4deg); }
}
@media (prefers-reduced-motion: reduce){ .doodle-float{ animation: none; } }

/* Reveal-on-scroll */
.reveal{ opacity: 0; translate: 0 32px; transition: opacity var(--dur-med) var(--ease), translate var(--dur-med) var(--ease); }
.reveal.is-visible{ opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity: 1; translate: 0 0; transition: none; } }

/* Shapes (technique Б — squircle) */
.photo-squircle{
  border-radius: 48px 32px 56px 36px / 40px 52px 34px 50px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 8px solid var(--bg-base);
  rotate: -2deg;
}
.photo-squircle img{ width: 100%; height: 100%; object-fit: cover; object-position: center; }
.photo-squircle.rotate-right{ rotate: 2deg; }

/* Shapes (technique В — clip-path masks with border-radius fallback) */
.photo-shape{ overflow: hidden; box-shadow: var(--shadow-md); }
.photo-shape img{ width: 100%; height: 100%; object-fit: cover; object-position: center; }
.photo-shape--arch{ clip-path: url(#shape-arch); border-radius: var(--radius-lg); }
.photo-shape--blob-a{ clip-path: url(#shape-blob-a); border-radius: var(--radius-xl); }
.photo-shape--blob-b{ clip-path: url(#shape-blob-b); border-radius: var(--radius-xl); }
.photo-shape--petal{ clip-path: url(#shape-petal); border-radius: var(--radius-lg); }
.photo-shape--wave-bottom{ clip-path: url(#shape-wave-bottom); border-radius: var(--radius-lg); }
@supports not (clip-path: url(#x)){
  .photo-shape--arch, .photo-shape--blob-a, .photo-shape--blob-b, .photo-shape--petal, .photo-shape--wave-bottom{
    clip-path: none; border-radius: var(--radius-xl);
  }
}

/* Cut-out (technique А) */
.cutout-wrap{ position: relative; display: inline-block; }
.cutout-blob{ position: absolute; inset: 8% 4% 0 4%; z-index: 0; }
.cutout-photo{
  position: relative; z-index: 1; display: block; max-width: 100%; height: auto;
  filter: drop-shadow(0 12px 24px rgba(31,42,19,.18));
}

.pill-label{
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--brand-accent); color: #fff;
  border-radius: var(--radius-pill);
  padding: 6px 18px; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em;
}

.eyebrow-row{ text-align: center; margin-bottom: 16px; }

.breadcrumbs{ font-size: .875rem; color: var(--text-muted); margin: 24px 0; }
.breadcrumbs a{ color: var(--brand-primary-dark); }
.breadcrumbs a:hover{ text-decoration: underline; }
.breadcrumbs span[aria-hidden]{ margin: 0 6px; }

.skip-link{
  position: absolute; left: -9999px; top: 0; background: var(--brand-primary); color: #fff;
  padding: 12px 20px; border-radius: 0 0 12px 0; z-index: 10000;
}
.skip-link:focus{ left: 0; }