/* ============================================================================
   Folwark Labs — landing pracowni
   Tokeny: css/tokens.css (kopia design/tokens.css)

   Reguła nadrzędna całego arkusza: jeden akcent, dużo pustki, ogromna
   typografia i nic więcej. Każdy element, który nie niesie informacji,
   został usunięty — łącznie z tymi, które wyglądały ładnie.
   ========================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--void);
  color: var(--linen);
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-variation-settings: "wdth" 100;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
h1, h2, h3, h4, p, dl, dd, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }

::selection {
  background: var(--straw);
  color: var(--void);
}

:focus-visible {
  outline: 2px solid var(--straw);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: var(--space-4);
  z-index: 100;
  padding: var(--space-3) var(--space-5);
  background: var(--straw);
  color: var(--void);
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.skip:focus { left: var(--space-4); }

.shell {
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
}

/* ── Typografia wspólna ─────────────────────────────────────────────────── */

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--straw);
}

.section {
  padding-block: var(--section);
  border-top: 1px solid var(--hairline);
}

.section__head {
  max-width: var(--shell-narrow);
  margin-bottom: var(--space-9);
}

.section__title {
  margin-top: var(--space-4);
  font-size: var(--text-display);
  font-weight: 620;
  font-variation-settings: "wdth" 106;
  letter-spacing: var(--track-display);
  line-height: 1.02;
}

.section__lead {
  margin-top: var(--space-5);
  font-size: var(--text-lead);
  color: var(--flax);
  text-wrap: pretty;
}

/* ── Przyciski i linki ──────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.85rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 0.95rem;
  font-weight: 560;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn svg { width: 1em; height: 1em; flex: none; }
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--straw); color: #14100a; }
.btn--primary:hover { background: #ffd15e; }

.link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-small);
  color: var(--straw);
  text-decoration: none;
  border-bottom: 1px solid var(--straw-line);
  padding-bottom: 2px;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.link svg { width: 0.9em; height: 0.9em; transition: transform var(--dur-fast) var(--ease-out); }
.link:hover { border-color: var(--straw); }
.link:hover svg { transform: translateX(3px); }

/* ── Nawigacja ──────────────────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--void) 82%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease-out);
}
.nav[data-scrolled="true"] { border-bottom-color: var(--hairline); }

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  height: 64px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--linen);
  text-decoration: none;
}
.wordmark__glyph { width: 20px; height: 20px; color: var(--straw); }
.wordmark__dim { color: var(--ash); }

.nav__links { display: flex; align-items: center; gap: var(--space-6); }
.nav__links a {
  font-size: 0.9rem;
  color: var(--flax);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__links a:hover { color: var(--linen); }

/* Adres w nawigacji zamiast przycisku. Strona jest portfolio, nie ofertą —
   jedyne, co ktoś może chcieć zrobić, to napisać. */
.nav__mail {
  font-family: var(--font-mono);
  font-size: 0.78rem !important;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--hairline-strong);
  padding-bottom: 2px;
}
.nav__mail:hover { color: var(--straw) !important; border-bottom-color: var(--straw-line); }
.nav__mail-short { display: none; }

/* Wejście do panelu wewnętrznego. Obrys zamiast wypełnienia — ma być
   znalezione przez tego, kto go szuka, a nie rzucać się w oczy jak wezwanie
   do działania. Na stronie portfolio jedynym akcentem wypełnionym zostaje
   „Zobacz systemy" w hero. */
.nav__hq {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.75rem !important;
  font-weight: 500;
  letter-spacing: 0.12em;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.nav__hq svg { width: 0.95em; height: 0.95em; flex: none; }
.nav__hq:hover {
  color: var(--straw) !important;
  border-color: var(--straw-line);
  background: var(--straw-soft);
}

/* Na ekranie dotykowym 31 px wysokości to za mało na kciuk — powiększamy
   sam obszar dotyku, nie typografię. */
@media (pointer: coarse) {
  .nav__hq { padding-block: 0.6rem; }
}

@media (max-width: 860px) {
  .nav__links { gap: var(--space-4); }
  .nav__links a:not(.nav__mail):not(.nav__hq) { display: none; }
}

/* Na wąskim ekranie pełny adres nie mieści się obok znaku firmowego
   i przycisku panelu. Zamiast ukrywać kontakt, skracamy etykietę. */
@media (max-width: 560px) {
  .nav__mail-full { display: none; }
  .nav__mail-short { display: inline; }
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: min(94vh, 54rem);
  padding-top: clamp(3.5rem, 11vh, 8rem);
  padding-bottom: var(--space-6);
  isolation: isolate;
  overflow: hidden;
}

/* ── Scena hero ─────────────────────────────────────────────────────────
   Trzy warstwy: zdjęcie, punktowe światło w oknie i welon, który sprowadza
   lewą stronę kadru do prawie czerni, żeby nagłówek dało się czytać bez
   cienia ani obwódki. Welon nie jest efektem — jest warunkiem czytelności. */

.hero__scene {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--void);
  pointer-events: none;
}

/* Najazd kamery na zabudowania.
   Tempo jest liniowe świadomie. Pierwsza wersja miała `ease-in-out` przez
   44 s i przez to była praktycznie niewidoczna: krzywa jest najwolniejsza na
   końcach, więc przez pierwsze kilkanaście sekund nie działo się nic.
   Teraz ruch jest stały, około 8 px na sekundę — widać go po chwili
   patrzenia, ale nie przeszkadza w czytaniu. */
.hero__plate {
  /* ── Jedyne miejsce do zmiany przy wymianie zdjęcia hero ──────────────
     --foto-x / --foto-y  punkt kadrowania przy `object-fit: cover`
     --lampa-x / --lampa-y  środek świecącego okna, w procentach ZDJĘCIA
     --lampa-r            średnica poświaty, w procentach szerokości zdjęcia

     Współrzędne okna są liczone względem kadru, nie kontenera — przelicza
     je `js/main.js`, bo `cover` przycina obraz inaczej przy każdej
     proporcji okna przeglądarki. */
  --foto-x: 75%;
  --foto-y: 62%;
  --lampa-x: 67.75%;
  --lampa-y: 56%;
  --lampa-r: 5%;

  position: absolute;
  inset: 0;
  /* Punkt, do którego „jedzie kamera" — zabudowania po prawej. */
  transform-origin: 82% 58%;
  animation: dojazd 28s linear infinite alternate;
  will-change: transform;
}

.hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--foto-x, 68%) var(--foto-y, 62%);
}

@keyframes dojazd {
  from { transform: scale(1); }
  to { transform: scale(1.16); }
}

/* Migotanie okna. Siedzi wewnątrz `.hero__plate`, więc jedzie razem
   z najazdem i nie trzeba go przeliczać. Współrzędne ustawia HTML —
   każdy nowy kadr ma okno gdzie indziej. */
.hero__lamp {
  position: absolute;
  left: var(--lampa-x, 76%);
  top: var(--lampa-y, 71%);
  width: var(--lampa-r, 7%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 197, 61, 0.5),
    rgba(255, 176, 48, 0.17) 42%,
    transparent 70%
  );
  mix-blend-mode: screen;
  animation: migotanie 11s linear infinite;
}

/* Nierówne, w większości spokojne. Żarówka na wsi nie stroboskopuje —
   raz na kilka sekund przygasa i wraca. */
@keyframes migotanie {
  0%, 6%   { opacity: 0.9; }
  7%       { opacity: 0.52; }
  8%       { opacity: 0.96; }
  27%      { opacity: 0.84; }
  28%      { opacity: 0.38; }
  29.5%    { opacity: 0.92; }
  30.5%    { opacity: 0.6; }
  32%      { opacity: 0.9; }
  63%      { opacity: 0.86; }
  64%      { opacity: 0.58; }
  65%      { opacity: 0.94; }
  88%      { opacity: 0.88; }
  89%      { opacity: 0.66; }
  90%, 100% { opacity: 0.9; }
}

.hero__veil {
  position: absolute;
  inset: 0;
  background:
    /* od lewej: pełna czerń pod nagłówkiem, przejrzystość nad zabudowaniami */
    linear-gradient(
      98deg,
      var(--void) 14%,
      rgba(8, 9, 11, 0.9) 38%,
      rgba(8, 9, 11, 0.52) 62%,
      rgba(8, 9, 11, 0.3) 82%,
      rgba(8, 9, 11, 0.5) 100%
    ),
    /* domknięcie u góry i u dołu, żeby sekcja przechodziła w tło strony */
    linear-gradient(
      to bottom,
      rgba(8, 9, 11, 0.72) 0%,
      rgba(8, 9, 11, 0.18) 34%,
      rgba(8, 9, 11, 0.72) 82%,
      var(--void) 100%
    );
}

/* Bez własnego `max-width`. Element nosi klasę `.shell`, która centruje przez
   `margin-inline: auto` — węższa wartość centrowałaby cały blok tekstu
   w oknie zamiast trzymać lewej krawędzi siatki, przez co hero odjeżdżałoby
   od nawigacji i księgi o ponad sto pikseli. Szerokość ograniczają
   poszczególne akapity, nie kontener. */
.hero__inner { max-width: none; }

.hero__title {
  margin-top: var(--space-6);
  max-width: 62rem;
  font-size: var(--text-hero);
  font-weight: 680;
  font-variation-settings: "wdth" 104;
  letter-spacing: var(--track-hero);
  line-height: 0.93;
  text-wrap: balance;
}
.hero__title-dim { color: var(--flax); }

.hero__lead {
  margin-top: var(--space-6);
  max-width: 40rem;
  font-size: var(--text-lead);
  color: var(--flax);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

/* Księga: dwie liczby w monospace, oddzielone włoskowatą linią.
   Siedzi na dole hero, na ciemniejszej części welonu. Linie nie idą przez
   całą szerokość — krótsza kreska pod dwiema liczbami czyta się jak celowy
   element, a nie jak tabela, z której ktoś usunął kolumny. */
.ledger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 34rem;
  margin-top: var(--space-8);
  border-top: 1px solid var(--hairline-strong);
  border-bottom: 1px solid var(--hairline);
}
.ledger__item {
  padding: var(--space-5) var(--space-4) var(--space-5) var(--space-4);
  border-left: 1px solid var(--hairline);
}
.ledger__item:first-child { border-left: 0; padding-left: 0; }
.ledger dt {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ash);
}
.ledger dd {
  margin: var(--space-2) 0 0;
  font-family: var(--font-mono);
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--linen);
}

@media (max-width: 480px) {
  .ledger { grid-template-columns: 1fr; }
  .ledger__item { border-left: 0; padding-left: 0; }
  .ledger__item:first-child { border-bottom: 1px solid var(--hairline); }
}

/* ── Miejsca na grafiki ─────────────────────────────────────────────────── */

/* Dopóki pliku nie ma, slot pokazuje opis zamiast ikony zepsutego obrazka.
   Po wgrania grafiki placeholder znika sam — bez zmiany kodu. */
.shot {
  position: relative;
  overflow: hidden;
  background: var(--loam);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.shot--portrait { aspect-ratio: 4 / 5; }
.shot--case { aspect-ratio: 3 / 2; }

.shot__placeholder {
  display: none;
  position: absolute;
  inset: 0;
  place-content: center;
  gap: var(--space-3);
  padding: var(--space-6);
  text-align: center;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(237, 234, 227, 0.022) 0 10px,
      transparent 10px 20px
    ),
    var(--loam);
}
.shot.is-missing img { display: none; }
.shot.is-missing .shot__placeholder { display: grid; }

.shot__id {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--straw);
}
.shot__desc {
  max-width: 32ch;
  margin-inline: auto;
  font-size: 0.95rem;
  color: var(--flax);
  text-wrap: pretty;
}
.shot__meta {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--ash);
}

/* ── Układ dwukolumnowy z obrazem ───────────────────────────────────────── */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(var(--space-6), 6vw, var(--space-9));
  align-items: start;
}
.split__text { min-width: 0; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  /* 4:3 zamiast 3:2 — z pionowego kadru zostaje cały zeszyt, a nie sam środek. */
  .shot--portrait { aspect-ratio: 4 / 3; }
}

/* ── Studia przypadku ───────────────────────────────────────────────────── */

.case {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(var(--space-6), 5vw, var(--space-8));
  align-items: start;
  padding-block: var(--space-9);
  border-top: 1px solid var(--hairline);
}
/* Pierwsze studium nie ma kreski nad sobą, ale musi mieć oddech — nad nim
   stoi plan majątku i bez odstępu obie rzeczy się zlewają. */
.case:first-of-type { border-top: 0; }

/* Odwrócone studium przypadku zamienia kolumny miejscami razem z ich
   szerokościami. Samo `order` przesunęłoby obraz do szerszej kolumny
   i dwa kadry obok siebie miałyby różną wysokość. */
.case--flip { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.case--flip .shot { grid-column: 2; grid-row: 1; }
.case--flip .case__body { grid-column: 1; grid-row: 1; }

.case__body { min-width: 0; }

.case__index {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.case__name {
  margin-top: var(--space-4);
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 640;
  font-variation-settings: "wdth" 104;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.case__claim {
  margin-top: var(--space-3);
  font-size: var(--text-lead);
  color: var(--linen);
}

.case__block { margin-top: var(--space-6); }
.case__block h4 {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
}
.case__block p {
  margin-top: var(--space-3);
  max-width: 38rem;
  color: var(--flax);
  text-wrap: pretty;
}

.case__facts {
  display: grid;
  gap: 1px;
  margin-top: var(--space-6);
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.case__facts li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0.7rem 0.95rem;
  background: var(--soil);
  font-family: var(--font-mono);
  font-size: var(--text-small);
}
.case__facts span { color: var(--ash); }
.case__facts b { font-weight: 500; color: var(--linen); text-align: right; }

@media (max-width: 900px) {
  .case,
  .case--flip { grid-template-columns: 1fr; gap: var(--space-6); }
  .case--flip .shot,
  .case--flip .case__body { grid-column: auto; grid-row: auto; }
}

/* ── Plan folwarku (element sygnaturowy) ────────────────────────────────── */

.plan__stage {
  position: relative;
  padding: clamp(var(--space-4), 3vw, var(--space-7));
  background: linear-gradient(180deg, var(--soil), var(--void));
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.plan__canvas { overflow: visible; }

.plan__svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--font-mono);
}

/* Na wąskim ekranie plan nie da się czytelnie zmniejszyć — podpisy zeszłyby
   do 3 px. Zamiast tego przewija się poziomo we własnym kontenerze, a strona
   nadal nie ma poziomego paska. */
@media (max-width: 760px) {
  .plan__canvas {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    margin-inline: calc(-1 * var(--space-4));
    padding-inline: var(--space-4);
  }
  .plan__svg { min-width: 620px; }
  .plan__canvas::after {
    content: "przewiń w bok, aby zobaczyć cały plan";
    display: block;
    padding-top: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    letter-spacing: 0.08em;
    color: var(--ash);
  }
}

.plan__bounds {
  fill: none;
  stroke: var(--hairline-strong);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}

.plan__sweep { animation: omiot 9s var(--ease-in-out) infinite; }
@keyframes omiot {
  0%, 62% { transform: translateX(0); }
  100% { transform: translateX(1180px); }
}

.plan__track {
  stroke: var(--hairline-strong);
  stroke-width: 1.25;
  stroke-dasharray: 4 7;
  animation: przeplyw 2.6s linear infinite;
}
@keyframes przeplyw { to { stroke-dashoffset: -22; } }

.plan__manor-box {
  fill: rgba(255, 197, 61, 0.05);
  stroke: var(--straw-line);
  stroke-width: 1.25;
}
.plan__manor-roof {
  fill: none;
  stroke: var(--straw);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.plan__manor-label {
  fill: var(--straw);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-anchor: middle;
}
.plan__manor-name {
  fill: var(--linen);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 620;
  letter-spacing: -0.02em;
  text-anchor: middle;
}
.plan__manor-note {
  fill: var(--ash);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-anchor: middle;
}

.plan__wing-box {
  fill: var(--loam);
  stroke: var(--hairline-strong);
  stroke-width: 1.25;
  transition: stroke var(--dur-fast) var(--ease-out), fill var(--dur-fast) var(--ease-out);
}
.plan__wing-name {
  fill: var(--linen);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.plan__wing-note { fill: var(--ash); font-size: 10.5px; letter-spacing: 0.03em; }

.plan__wing:hover .plan__wing-box,
.plan__wing:focus-visible .plan__wing-box {
  stroke: var(--wing);
  fill: color-mix(in srgb, var(--wing) 12%, var(--loam));
}
.plan__wing:focus-visible { outline: none; }
.plan__wing:focus-visible .plan__wing-box { stroke-width: 2; }

/* Pusty plac — jedyny element planu, który jest odnośnikiem. */

.plan__legend {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--hairline);
  max-width: 46rem;
  font-size: var(--text-small);
  color: var(--flax);
}
.plan__legend-mark {
  flex: none;
  width: 10px;
  height: 10px;
  margin-top: 0.45rem;
  border-radius: 2px;
  background: var(--straw);
  box-shadow: 0 0 0 4px var(--straw-soft);
}

/* ── Jak pracujemy ──────────────────────────────────────────────────────── */


/* ── Stopka ─────────────────────────────────────────────────────────────── */

.footer {
  padding-block: var(--space-8) var(--space-7);
  border-top: 1px solid var(--hairline);
}
.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-6);
  align-items: start;
}
.footer__brand p {
  margin-top: var(--space-3);
  max-width: 24rem;
  font-size: var(--text-small);
  color: var(--ash);
}
.wordmark--static { color: var(--linen); }

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: right;
}
.footer__links a {
  font-size: var(--text-small);
  color: var(--flax);
  text-decoration: none;
}
.footer__links a:hover { color: var(--straw); }

.footer__meta {
  grid-column: 1 / -1;
  padding-top: var(--space-6);
  border-top: 1px solid var(--hairline);
  font-size: var(--text-micro);
  color: var(--ash);
}

@media (max-width: 640px) {
  .footer__inner { grid-template-columns: 1fr; }
  .footer__links { text-align: left; }
}

/* ── Sekcja ze zdjęciem w tle ───────────────────────────────────────────── */

.section--photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.section__scene {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--void);
  pointer-events: none;
}

.section__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Kadrowanie na węźle obliczeniowym i uprzęży — lewa część zdjęcia
     to ciemne sklepienie i ona przypada pod nagłówek. */
  object-position: 58% 55%;
}

/* Welon jest warunkiem czytelności, nie efektem: nagłówek stoi po lewej,
   więc tam zdjęcie musi zejść prawie do czerni. Po prawej zostaje tyle
   światła, żeby było widać, na czym stoi tekst. */
.section__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      96deg,
      var(--void) 12%,
      rgba(8, 9, 11, 0.92) 34%,
      rgba(8, 9, 11, 0.62) 58%,
      rgba(8, 9, 11, 0.42) 78%,
      rgba(8, 9, 11, 0.6) 100%
    ),
    linear-gradient(
      to bottom,
      var(--void) 0%,
      rgba(8, 9, 11, 0.4) 22%,
      rgba(8, 9, 11, 0.45) 70%,
      var(--void) 100%
    );
}

@media (max-width: 760px) {
  .section__photo { object-position: 66% 55%; }
  .section__veil {
    background: linear-gradient(
      to bottom,
      var(--void) 4%,
      rgba(8, 9, 11, 0.86) 24%,
      rgba(8, 9, 11, 0.78) 70%,
      var(--void) 100%
    );
  }
}

/* ── Notatki o pracowni ─────────────────────────────────────────────────── */

.notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}

.note {
  padding: clamp(var(--space-5), 3vw, var(--space-6));
  background: var(--soil);
}

.note h3 {
  font-size: 1.15rem;
  font-weight: 620;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-wrap: balance;
}

.note p {
  margin-top: var(--space-3);
  font-size: 0.92rem;
  color: var(--flax);
  text-wrap: pretty;
}

/* ── Odsłanianie przy scrollu ───────────────────────────────────────────── */

.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--reveal-delay, 0) * 90ms);
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .plan__sweep, .plan__track { animation: none; }
  .btn, .link svg { transition: none; }
  /* Hero zostaje nieruchomy, ale światło w oknie nadal się pali — gasnąć
     ma ruch, nie scena. */
  .hero__plate { animation: none; transform: scale(1.04); }
  .hero__lamp { animation: none; opacity: 0.9; }
}

/* Telefon.
   Kadr 21:9 wciśnięty w wąski, wysoki prostokąt zostawia z całego zdjęcia
   osiemnastoprocentowy pasek ze środka — czyli puste pole, bez zabudowań
   i bez okna. Zamiast tego scena zajmuje górne dwie trzecie hero i pokazuje
   prawą część kadru, a dolna jedna trzecia jest zwykłą czernią pod księgę.
   `--foto-x` przesuwamy na zabudowania; ta sama zmienna steruje kadrowaniem
   i przeliczeniem światła, więc jedno nie może uciec drugiemu. */
@media (max-width: 760px) {
  .hero {
    min-height: 0;
    padding-bottom: var(--space-5);
  }
  .hero__scene {
    bottom: auto;
    height: 62%;
  }
  .hero__plate {
    /* Na telefonie widać tylko 29% szerokości kadru. Punkt kadrowania jest
       ten sam co na desktopie — pojazd i świecące okno mieszczą się w tym
       wycinku razem, więc nie trzeba nic przesuwać. Powiększamy tylko
       poświatę, bo okno jest w tej skali mniejsze. */
    --lampa-r: 7%;
    transform-origin: 62% 62%;
  }
  .hero__veil {
    background: linear-gradient(
      to bottom,
      rgba(8, 9, 11, 0.9) 0%,
      rgba(8, 9, 11, 0.6) 26%,
      rgba(8, 9, 11, 0.32) 52%,
      rgba(8, 9, 11, 0.74) 86%,
      var(--void) 100%
    );
  }
}