/* ============================================================
   KROJE — hostowane u nas, przycięte do polskiego zestawu znaków.
   Bricolage Grotesque (zmienny: waga 300–800, oś optyczna 12–96)
   + JetBrains Mono 500 na etykiety, numerację i dane.
   Plik „-pl" niesie polskie znaki diakrytyczne; przeglądarka
   pobiera go tylko wtedy, gdy tekst ich faktycznie używa.

   NAZWY PLIKÓW NIOSĄ NAZWĘ KROJU CELOWO. .htaccess podaje woff2
   z max-age rok i „immutable", więc przeglądarka nie pyta o nowszą
   wersję. Podmiana kroju pod tą samą nazwą zostawiłaby stałych gości
   ze starym fontem na rok. Zmieniasz krój → zmieniasz nazwę pliku.

   Oś wdth (75–100%) została z pliku usunięta celowo: podnosiła
   wagę kroju z 59,8 KB na 142,7 KB, a nic jej nie używa.
   ============================================================ */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-pl.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0104-0107, U+0118-0119, U+011A-011B, U+0141-0144, U+015A-015B, U+0179-017C;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   OBIE STRONY — design system
   papier / atrament / żółty znak · Bricolage Grotesque + JetBrains Mono
   ============================================================ */

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: vt-out 0.18s cubic-bezier(0.23, 1, 0.32, 1) both;
}
::view-transition-new(root) {
  animation: vt-in 0.32s cubic-bezier(0.23, 1, 0.32, 1) both;
}
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(14px); } }

:root {
  color-scheme: light;
  --paper: #F4F2EC;
  --paper-raise: #FCFBF7;
  --paper-alt: #EAE7DF;
  --ink: #0B0B0B;
  --ink-soft: #33332D;
  --muted: #4F4F49;
  --line: #DEDBD2;
  --line-soft: color-mix(in srgb, var(--ink) 7%, transparent);
  --line-strong: #767670;

  /* Znak. Żółty NIGDY nie jest tekstem na jasnym tle (1,26:1) —
     wyłącznie tło, zakreślenie albo kreska. Na nim zawsze --on-brand. */
  --brand: #FFD60A;
  --on-brand: #0B0B0B;

  /* Akcent tekstowy. Na stronie głównej to atrament; podstrony
     nadpisują go własną barwą, która tekstem być może. */
  --accent: #0B0B0B;
  --accent-ink: #33332D;

  --btn-bg: #0B0B0B;
  --btn-ink: #FFD60A;
  --btn-bg-hover: #1F1F1C;

  --spec-social:  #A02A3A;
  --spec-video:   #1F6338;
  --spec-web:     #265D71;
  --spec-ugc:     #6C419E;
  --spec-care:    #4F5860;

  --spec-sport:   #1F6338;
  --spec-gastro:  #A02A3A;
  --spec-lokalny: #265D71;
  --spec-sklep:   #6C419E;

  --shadow: rgba(11, 11, 11, 0.3);


  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  /* Skala typografii i odstępów. 1 = poprzednia wielkość.
     Zmiana tej jednej liczby przeskalowuje całą stronę. */
  --scale: 0.85;

  --sans: "Bricolage Grotesque", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: clamp(1.25rem, 4vw, 4rem);
  --measure: 34em;
}

.theme-sport   { --accent: #1F6338; --accent-ink: #184D2C; }  /* zieleń */
.theme-gastro  { --accent: #A02A3A; --accent-ink: #7D212D; }  /* karmazyn */
.theme-lokalny { --accent: #265D71; --accent-ink: #1E4958; }  /* petrol */
.theme-sklep   { --accent: #6C419E; --accent-ink: #54337B; }  /* fiolet */
.theme-social  { --accent: #A02A3A; --accent-ink: #7D212D; }  /* karmazyn */
.theme-video   { --accent: #1F6338; --accent-ink: #184D2C; }  /* zieleń */
.theme-web     { --accent: #265D71; --accent-ink: #1E4958; }  /* petrol */
.theme-ugc     { --accent: #6C419E; --accent-ink: #54337B; }  /* fiolet */
.theme-care    { --accent: #4F5860; --accent-ink: #3E454B; }  /* grafit */

/* ============================================================
   Tryb ciemny — papier nocą, nie grafit.
   Te same tokeny, inne wartości; reszta arkusza się nie zmienia.

   Dwa wejścia do tego samego zestawu:
   1. ustawienie systemowe — dopóki użytkownik nie wybrał sam
   2. wybór ręczny przez data-theme na <html> (przycisk w nagłówku,
      zapamiętany w localStorage). Ręczny wygrywa z systemowym.
   Wartości są celowo powtórzone: jedna lista, dwa selektory,
   zero sztuczek z @supports czy zagnieżdżaniem.
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0B0B0B;
    --paper-raise: #161614;
    --paper-alt: #1F1F1C;
    --ink: #F4F2EC;
    --ink-soft: #CFCDC4;
    --muted: #A3A39B;
    --line: #2E2E2A;
    --line-soft: rgba(244, 242, 236, 0.09);
    --line-strong: #75756E;

    /* Znak zostaje ten sam w obu motywach. Na ciemnym tle żółty
       ma 13,94:1, więc tutaj może być też tekstem. */
    --brand: #FFD60A;
    --on-brand: #0B0B0B;
    --accent: #FFD60A;
    --accent-ink: #FFE04D;

    --btn-bg: #FFD60A;
    --btn-ink: #0B0B0B;
    --btn-bg-hover: #FFE04D;

    --spec-social:  #DF8F9A;
    --spec-video:   #3FBB6C;
    --spec-web:     #67AFC9;
    --spec-ugc:     #B59AD4;
    --spec-care:    #9EA6AF;

    --spec-sport:   #3FBB6C;
    --spec-gastro:  #DF8F9A;
    --spec-lokalny: #67AFC9;
    --spec-sklep:   #B59AD4;

    --shadow: rgba(0, 0, 0, 0.55);
  }

  :root:not([data-theme="light"]) .theme-sport   { --accent: #3FBB6C; --accent-ink: #5EC985; }  /* zieleń */
  :root:not([data-theme="light"]) .theme-gastro  { --accent: #DF8F9A; --accent-ink: #EEC2C8; }  /* karmazyn */
  :root:not([data-theme="light"]) .theme-lokalny { --accent: #67AFC9; --accent-ink: #8FC4D7; }  /* petrol */
  :root:not([data-theme="light"]) .theme-sklep   { --accent: #B59AD4; --accent-ink: #D7C8E8; }  /* fiolet */
  :root:not([data-theme="light"]) .theme-social  { --accent: #DF8F9A; --accent-ink: #EEC2C8; }  /* karmazyn */
  :root:not([data-theme="light"]) .theme-video   { --accent: #3FBB6C; --accent-ink: #5EC985; }  /* zieleń */
  :root:not([data-theme="light"]) .theme-web     { --accent: #67AFC9; --accent-ink: #8FC4D7; }  /* petrol */
  :root:not([data-theme="light"]) .theme-ugc     { --accent: #B59AD4; --accent-ink: #D7C8E8; }  /* fiolet */
  :root:not([data-theme="light"]) .theme-care    { --accent: #9EA6AF; --accent-ink: #BFC4CA; }  /* grafit */
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0B0B0B;
  --paper-raise: #161614;
  --paper-alt: #1F1F1C;
  --ink: #F4F2EC;
  --ink-soft: #CFCDC4;
  --muted: #A3A39B;
  --line: #2E2E2A;
  --line-soft: rgba(244, 242, 236, 0.09);
  --line-strong: #75756E;

  /* Znak zostaje ten sam w obu motywach. Na ciemnym tle żółty
     ma 13,94:1, więc tutaj może być też tekstem. */
  --brand: #FFD60A;
  --on-brand: #0B0B0B;
  --accent: #FFD60A;
  --accent-ink: #FFE04D;

  --btn-bg: #FFD60A;
  --btn-ink: #0B0B0B;
  --btn-bg-hover: #FFE04D;

  --spec-social:  #DF8F9A;
  --spec-video:   #3FBB6C;
  --spec-web:     #67AFC9;
  --spec-ugc:     #B59AD4;
  --spec-care:    #9EA6AF;

  --spec-sport:   #3FBB6C;
  --spec-gastro:  #DF8F9A;
  --spec-lokalny: #67AFC9;
  --spec-sklep:   #B59AD4;

  --shadow: rgba(0, 0, 0, 0.55);
}

:root[data-theme="dark"] .theme-sport   { --accent: #3FBB6C; --accent-ink: #5EC985; }  /* zieleń */
:root[data-theme="dark"] .theme-gastro  { --accent: #DF8F9A; --accent-ink: #EEC2C8; }  /* karmazyn */
:root[data-theme="dark"] .theme-lokalny { --accent: #67AFC9; --accent-ink: #8FC4D7; }  /* petrol */
:root[data-theme="dark"] .theme-sklep   { --accent: #B59AD4; --accent-ink: #D7C8E8; }  /* fiolet */
:root[data-theme="dark"] .theme-social  { --accent: #DF8F9A; --accent-ink: #EEC2C8; }  /* karmazyn */
:root[data-theme="dark"] .theme-video   { --accent: #3FBB6C; --accent-ink: #5EC985; }  /* zieleń */
:root[data-theme="dark"] .theme-web     { --accent: #67AFC9; --accent-ink: #8FC4D7; }  /* petrol */
:root[data-theme="dark"] .theme-ugc     { --accent: #B59AD4; --accent-ink: #D7C8E8; }  /* fiolet */
:root[data-theme="dark"] .theme-care    { --accent: #9EA6AF; --accent-ink: #BFC4CA; }  /* grafit */

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Żaden z naszych krojów nie ma odmiany pochyłej, a przeglądarka domyślnie
   pochyla <i>, <em>, <cite> i spółkę. Bez prawdziwej kursywy robi z nich
   sztuczny pochył — mechanicznie przekrzywione litery. Zerujemy to na dwa
   sposoby, bo font-synthesis-style nie działa w starszym Safari. */
:root { font-synthesis-style: none; }
i, em, cite, dfn, var, address { font-style: normal; }

html {
  scroll-behavior: smooth;
  --head-h: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.999rem;
  line-height: 1.55;
  font-feature-settings: "ss01" on;
  -webkit-font-smoothing: antialiased;
  min-height: 100svh;
}

.skip {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  transform: translateY(-180%);
  background: var(--ink);
  color: var(--paper);
  padding: 0.7rem 1.1rem;
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 600;
  transition: transform 0.2s var(--ease-out);
}
.skip:focus { transform: translateY(0); }

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

::selection { background: var(--brand); color: var(--on-brand); }

a { color: inherit; text-decoration: none; }

img, svg { max-width: 100%; display: block; }

/* ---------- utility type ---------- */

.label {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.num {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--accent);
}

.prose {
  max-width: var(--measure);
  color: var(--ink-soft);
}
.prose + .prose { margin-top: 1em; }

.accent { color: var(--accent); }

.inline-link {
  border-bottom: 1px solid var(--line);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.inline-link:active { color: var(--accent-ink); border-color: currentColor; }

/* ---------- shell ---------- */

section[id], [id].section, [id].contact { scroll-margin-top: var(--head-h, 5.5rem); }

.shell {
  max-width: 84rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- header ---------- */

.site-head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 72%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.35s ease;
}
.site-head.is-scrolled { border-bottom-color: var(--line-soft); }

.site-head__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-block: 1.05rem;
}

.site-head__brand {
  display: flex;
  align-items: baseline;
  gap: calc(clamp(0.9rem, 2.2vw, 1.7rem) * var(--scale));
}

.wordmark {
  white-space: nowrap;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.015rem;
  letter-spacing: -0.01em;
}
.wordmark i {
  font-style: normal;
  font-weight: 700;
  background: var(--brand);
  color: var(--on-brand);
  /* Padding jest celowo niesymetryczny. Zmierzone odsadniki w Bricolage:
     „s" ma z lewej 0,031 em, „y" z prawej 0,064 em — przy równym paddingu
     szczelina z prawej wychodzi o 0,033 em szersza i widać to gołym okiem.
     Prawa strona jest o tyle mniejsza, więc ODSTĘP DO LITER jest równy. */
  padding: 0.04em 0.227em 0.08em 0.26em;
  border-radius: 4px;
  box-decoration-break: clone;
}

.site-nav {
  display: flex;
  gap: calc(clamp(1rem, 3vw, 2.4rem) * var(--scale));
  font-size: 0.86rem;
  font-weight: 500;
}
.site-link {
  font-size: 0.86rem;
  font-weight: 500;
  white-space: nowrap;
}
.site-nav a, .site-link {
  position: relative;
  padding-block: 0.2rem;
  color: var(--ink-soft);
}
.site-nav a::after, .site-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.24s var(--ease-out);
}
.site-nav a[aria-current="page"]::after, .site-link[aria-current="page"]::after { transform: scaleX(1); }
.site-nav a[aria-current="page"], .site-link[aria-current="page"] { color: var(--ink); }

/* przełącznik motywu — znak firmowy: koło podzielone na dwie strony.
   Wypełniona połowa mówi, która strona jest teraz „na wierzchu".
   Obrót o pół koła przy zmianie — to wszystko. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  margin-left: calc(clamp(0.4rem, 1.2vw, 0.9rem) * var(--scale));
  padding: 0.35rem;
  background: none;
  border: 0;
  color: var(--ink-soft);
  cursor: pointer;
  align-self: center;
  transition: color 0.2s ease, transform 0.16s var(--ease-out);
}
.theme-toggle svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  transition: rotate 0.32s var(--ease-out);
}
.theme-toggle svg path { fill: currentColor; stroke: none; }
.theme-toggle[aria-pressed="true"] svg { rotate: 180deg; }
.theme-toggle:active { transform: scale(0.9); }

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

/* ---------- hero (index) ---------- */

.hero {
  padding-top: calc(clamp(6.5rem, 13vh, 9rem) * var(--scale));
  padding-bottom: calc(clamp(2.5rem, 6vh, 4.5rem) * var(--scale));
  min-height: 62svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hero__kicker {
  display: flex;
  gap: 1.2rem;
  align-items: baseline;
  margin-bottom: calc(clamp(1.4rem, 4vh, 3rem) * var(--scale));
}
.hero__kicker .rule {
  flex: 1;
  height: 1px;
  background: var(--line);
  align-self: center;
}

.display {
  font-family: var(--sans);
  font-weight: 800;
  font-size: calc(clamp(3.2rem, 12.5vw, 10.5rem) * var(--scale));
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.display .it {
  font-weight: 300;
  color: var(--accent);
}

.display-note {
  font-family: var(--sans);
  font-size: calc(clamp(0.95rem, 1.6vw, 1.25rem) * var(--scale));
  color: var(--muted);
  margin-top: 0.4em;
  font-weight: 300;
}

/* masked line reveal — padding keeps descenders unclipped */
.line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.line-inner { display: block; }
.js .line-inner { transform: translateY(112%); }

.hero__cta {
  display: flex;
  align-items: center;
  gap: calc(clamp(1rem, 3vw, 2rem) * var(--scale));
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
  margin-top: calc(clamp(2.5rem, 7vh, 5rem) * var(--scale));
}
.hero__alt {
  position: relative;
  font-size: 0.893rem;
  color: var(--ink-soft);
  padding-bottom: 0.15rem;
}
.hero__alt::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.24s var(--ease-out);
}
.hero__alt:active { color: var(--accent-ink); }
.hero__alt:active::after { transform: scaleX(1); }

/* ---------- section scaffolding ---------- */

.section {
  border-top: 1px solid var(--line);
  padding-block: calc(clamp(3.4rem, 9vh, 6.5rem) * var(--scale));
}

.section__head {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  margin-bottom: calc(clamp(2.2rem, 5vh, 3.8rem) * var(--scale));
}
.section__head .num { font-size: 0.987rem; }
.section__head h2 {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.section__head .rule {
  flex: 1;
  height: 1px;
  background: var(--line-soft);
  align-self: center;
}

.statement {
  font-family: var(--sans);
  font-weight: 700;
  font-size: calc(clamp(1.6rem, 3.6vw, 2.9rem) * var(--scale));
  line-height: 1.05;
  letter-spacing: -0.03em;
  max-width: 24em;
  text-wrap: balance;
}
.statement .it { font-weight: 300; color: var(--accent); }

/* ---------- studio: zdjęcie po lewej, zdanie po prawej ---------- */

.studio-intro {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: calc(clamp(1.6rem, 5vw, 4.5rem) * var(--scale));
  align-items: center;
}
.studio-intro .statement {
  max-width: 19em;
  font-size: calc(clamp(1.95rem, 4.4vw, 3.6rem) * var(--scale));
}

/* Zdjęcie: zaokrąglone rogi, pod kursorem lekki przechył i uniesienie —
   jak odbitka podniesiona ze stołu. Animujemy tylko transform, cień
   „na uniesienie" to osobna warstwa z opacity. */
.polaroid {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 24rem;
  margin: 0;
  border-radius: 0.7rem;
  overflow: hidden;
  background: color-mix(in srgb, var(--ink) 6%, var(--paper));
  transition: transform 0.5s var(--ease-out);
  transform-origin: 50% 60%;
}
.polaroid::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
  pointer-events: none;
}
.polaroid img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.polaroid__lift {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 30px 70px -28px var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease-out);
}

/* ---------- split: the two sides ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: calc(clamp(2.4rem, 6vh, 4rem) * var(--scale));
  border-top: 1px solid var(--line-soft);
}
.split__col { padding-top: 1.6rem; }
.split__col:first-child { padding-right: clamp(1.4rem, 4vw, 3.5rem); }
.split__col:last-child {
  padding-left: clamp(1.4rem, 4vw, 3.5rem);
  border-left: 1px solid var(--line);
}

.split__who {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.1rem;
}
.split__who h3 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: calc(clamp(1.35rem, 2.4vw, 1.9rem) * var(--scale));
  letter-spacing: -0.01em;
}
.split__who .label { color: var(--accent-ink); }

.split p { color: var(--ink-soft); font-size: 0.921rem; max-width: 30em; }

/* offer lists */
.offer {
  list-style: none;
  margin-top: 1.4rem;
}
.offer li {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding-block: 0.72rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.912rem;
}
.offer li:first-child { border-top: 0; }
.offer .idx {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--muted);
  min-width: 1.6em;
}

/* ---------- specialization index ---------- */

.spec-intro { margin-bottom: calc(clamp(2rem, 5vh, 3.2rem) * var(--scale)); }

.spec-list { border-top: 1px solid var(--line); }

.spec-row {
  display: grid;
  grid-template-columns: 3.2rem 1fr auto 2.2rem;
  align-items: center;
  gap: calc(clamp(0.8rem, 2.5vw, 2rem) * var(--scale));
  min-height: clamp(6.5rem, 15vh, 9rem);
  padding-block: 1rem;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background-color 0.18s ease;
}
.spec-row:active { background-color: color-mix(in srgb, var(--ink) 5%, transparent); }
.spec-row .idx {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--muted);
  font-size: 0.893rem;
  transition: transform 0.35s var(--ease-out);
}
.spec-row h3 {
  font-family: var(--sans);
  font-weight: 400;
  font-size: calc(clamp(1.8rem, 5vw, 3.6rem) * var(--scale));
  letter-spacing: -0.02em;
  line-height: 1.05;
  transition: color 0.25s ease, transform 0.35s var(--ease-out);
}
.spec-row .tags {
  font-size: 0.82rem;
  color: var(--muted);
  text-align: right;
  max-width: 22em;
}
.spec-row .arrow {
  font-family: var(--sans);
  font-size: 1.204rem;
  color: var(--muted);
  transition: color 0.25s ease, transform 0.3s cubic-bezier(0.2, 0.6, 0.2, 1);
  justify-self: end;
}

.spec-row--sport   { --spec: var(--spec-sport); }
.spec-row--gastro  { --spec: var(--spec-gastro); }
.spec-row--lokalny { --spec: var(--spec-lokalny); }
.spec-row--ugc     { --spec: var(--spec-ugc); }
.spec-row--sklep   { --spec: var(--spec-sklep); }
.spec-row--social  { --spec: var(--spec-social); }
.spec-row--video   { --spec: var(--spec-video); }
.spec-row--web     { --spec: var(--spec-web); }
.spec-row--care    { --spec: var(--spec-care); }

/* lista branż na podstronie III — ten sam wiersz, mniejszy tytuł */
.spec-list--sub .spec-row { min-height: clamp(5rem, 11vh, 6.5rem); }
.spec-list--sub .spec-row h3 { font-size: calc(clamp(1.4rem, 3.4vw, 2.4rem) * var(--scale)); }

/* ---------- 03 realizacje: stos odbitek na stole ----------
   Trzy odbitki różnej wielkości, nierówno rzucone jedna na drugą: zrzut
   strony na wierzchu, pod nim dwa materiały Kornelii. Przy wejściu w kadr
   rozdają się z talii, pod kursorem rozjeżdżają się szerzej. Ruch prowadzą
   osobne właściwości `rotate` i `translate` — nie `transform` — więc nic
   się nie gryzie z inline stylem, który motion zostawia na opakowaniu. */

.stack-wrap { margin-top: calc(clamp(2.2rem, 5.5vh, 3.6rem) * var(--scale)); }

.stack {
  position: relative;
  display: block;
  max-width: 64rem;
  margin-inline: auto;
  aspect-ratio: 16 / 10.8;
  /* odbitka ląduje na stosie — leciutkie przestrzelenie na końcu */
  --ease-land: cubic-bezier(0.18, 1.22, 0.4, 1);
}

.stack__card {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.7rem 0.8rem;
  background: var(--paper-raise);
  border-radius: 0.4rem;
  box-shadow: 0 22px 50px -30px var(--shadow);
  transition:
    rotate 0.55s var(--ease-land),
    translate 0.55s var(--ease-land),
    box-shadow 0.4s var(--ease-out);
}
/* Stary układ stołu: duża odbitka na środku, rolki w rogach, koncept
   Portfela z tyłu po lewej, kadr z sesji wystaje górą.                */
.stack__card--f {
  left: 0%; top: 2%; width: 46%; aspect-ratio: 1440 / 912;
  rotate: -4deg;
  overflow: hidden;
  background: var(--paper-raise);
  transition-delay: 0s;
}
/* podpis nad zrzutem, nie na nim — inaczej zasłaniałby górę aplikacji */
.stack__card--f .stack__tag { top: 0; bottom: auto; border-top: 0; border-bottom: 1px solid var(--line-soft); }
.stack .stack__card--f img { object-fit: contain; object-position: bottom; }

.stack__card--e {
  left: 53%; top: -4%; width: 18%; aspect-ratio: 4 / 5;
  rotate: 5.5deg;
  overflow: hidden;
  transition-delay: 0.08s;
}
.stack__card--d {
  left: 13%; top: 50%; width: 22%; aspect-ratio: 9 / 16;
  rotate: -9deg;
  overflow: hidden;
  transition-delay: 0.16s;
}
.stack__card--b {
  left: 30%; top: 22%; width: 62%; aspect-ratio: 1440 / 895;
  rotate: 1.2deg;
  overflow: hidden;
  box-shadow: 0 30px 70px -28px var(--shadow);
  transition-delay: 0.22s;
}
.stack__card--c {
  left: 76%; top: 6%; width: 19%; aspect-ratio: 9 / 16;
  rotate: 7deg;
  overflow: hidden;
  transition-delay: 0.28s;
}
.stack__card--h {
  left: 70%; top: 71%; width: 24%; aspect-ratio: 3 / 2;
  rotate: 4.5deg;
  overflow: hidden;
  transition-delay: 0.34s;
}

.stack__card img, .stack__card video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.stack__card[data-no]::after {
  content: attr(data-no);
  position: absolute;
  right: 0.7rem;
  bottom: 0.6rem;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--muted);
}
.stack__what { font-family: var(--sans); font-size: 1.05rem; line-height: 1.2; color: var(--ink); }
.stack__spec { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }

.stack__tag {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0.6rem 1rem;
  background: var(--paper-raise);
  border-top: 1px solid var(--line-soft);
  font-size: 0.74rem;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stack__tag b { font-weight: 600; color: var(--ink); }

.stack__go {
  position: absolute;
  left: 50%;
  bottom: -0.2rem;
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  gap: 0.5rem;
  padding: 0.9rem 1.5rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 0.865rem;
  font-weight: 600;
  box-shadow: 0 14px 30px -18px var(--shadow);
  transition: translate 0.35s var(--ease-land), background-color 0.2s ease, opacity 0.35s ease;
}
.stack__go .arrow { transition: translate 0.3s var(--ease-out); }
.stack:active .stack__go { translate: -50% 2px; }

/* stan „jeszcze w talii" — zdejmuje go skrypt, gdy stos wjedzie w kadr */
.stack.is-stacked .stack__card { rotate: 0deg; }
.stack.is-stacked .stack__card--b { translate: 0 7%; }
.stack.is-stacked .stack__card--c { translate: -30% 20%; }
.stack.is-stacked .stack__card--d { translate: 34% 10%; }
.stack.is-stacked .stack__card--e { translate: -14% 40%; }
.stack.is-stacked .stack__card--f { translate: 40% 22%; }
.stack.is-stacked .stack__card--h { translate: -26% -20%; }
.stack.is-stacked .stack__go { translate: -50% 14px; opacity: 0; }

/* ---------- contact / footer ---------- */

.contact {
  border-top: 1px solid var(--line);
  padding-block: calc(clamp(4rem, 12vh, 8rem) * var(--scale)) clamp(2rem, 5vh, 3rem);
}
.contact .label { display: block; margin-bottom: 1.6rem; }

.mail {
  font-family: var(--sans);
  font-weight: 600;
  font-size: calc(clamp(1.9rem, 7.2vw, 6.2rem) * var(--scale));
  letter-spacing: -0.02em;
  line-height: 1.05;
  display: inline-block;
  position: relative;
  transition: color 0.25s ease;
}
.mail::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.04em;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.24s var(--ease-out);
}
.mail:active { color: var(--accent-ink); }
.mail:active::after { transform: scaleX(1); }

.contact__or {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: calc(clamp(2rem, 6vh, 3.4rem) * var(--scale));
}
.contact__or .rule { flex: 1; height: 1px; background: var(--line); }

.contact__book {
  display: flex;
  align-items: center;
  gap: calc(clamp(1rem, 3vw, 2.2rem) * var(--scale));
  flex-wrap: wrap;
  margin-top: calc(clamp(1.4rem, 4vh, 2.2rem) * var(--scale));
}
.contact__book p {
  font-size: 0.865rem;
  color: var(--ink-soft);
  max-width: 26em;
}

/* live page-weight readout — the technical claim, measured */
.perf {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
  font-size: 0.78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.perf[hidden] { display: none; }
.perf__dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
.perf b { color: var(--ink-soft); font-weight: 600; }

.foot-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: calc(clamp(3rem, 8vh, 5.5rem) * var(--scale));
  padding-top: 1.3rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.82rem;
  color: var(--muted);
}
.foot-meta nav { display: flex; gap: 1.4rem; }

/* ============================================================
   subpages
   ============================================================ */

.page-hero {
  padding-top: calc(clamp(7.5rem, 17vh, 11rem) * var(--scale));
  padding-bottom: calc(clamp(2.6rem, 7vh, 5rem) * var(--scale));
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.6rem;
  align-items: baseline;
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: calc(clamp(1.6rem, 4vh, 2.8rem) * var(--scale));
}
.crumbs .sep { color: var(--line); }

.page-hero .display {
  font-size: calc(clamp(2.8rem, 9.5vw, 7.6rem) * var(--scale));
}

.page-hero__lead {
  margin-top: calc(clamp(1.4rem, 4vh, 2.4rem) * var(--scale));
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--gutter);
  align-items: end;
}
.page-hero__lead .statement { font-size: calc(clamp(1.25rem, 2.4vw, 1.85rem) * var(--scale)); max-width: 22em; }
.page-hero__lead .prose { font-size: 0.912rem; }

/* problem list — editorial, numbered in words */
.friction {
  border-top: 1px solid var(--line);
  margin-top: calc(clamp(2rem, 6vh, 3.4rem) * var(--scale));
}
.friction__row {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 1.4rem;
  padding-block: 1.35rem;
  border-bottom: 1px solid var(--line-soft);
  align-items: baseline;
}
.friction__row .idx {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--accent);
  font-size: 0.893rem;
}
.friction__row p { color: var(--ink-soft); max-width: 40em; }
.friction__row strong { color: var(--ink); font-weight: 600; }

/* artifact — a physical-feeling object on paper */
.artifact-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(clamp(2rem, 5vw, 4.5rem) * var(--scale));
  align-items: center;
  margin-top: calc(clamp(2.4rem, 6vh, 4rem) * var(--scale));
}

.artifact {
  background: var(--paper-raise);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px -24px var(--shadow);
  padding: 1.6rem;
  rotate: -1.2deg;
}
.artifact--alt { rotate: 1deg; }

.artifact .label { color: var(--accent-ink); }

.scoreboard {
  text-align: center;
  padding-block: 1.4rem 1.8rem;
}
.scoreboard__teams {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.6rem;
}
.scoreboard__score {
  font-family: var(--sans);
  font-weight: 800;
  font-size: calc(clamp(3.4rem, 7vw, 5.6rem) * var(--scale));
  line-height: 1;
  letter-spacing: -0.03em;
}
.scoreboard__meta {
  margin-top: 0.7rem;
  font-family: var(--mono);
  font-weight: 500;
  color: var(--accent);
  font-size: 0.893rem;
}

.menu-card { padding-block: 0.4rem; }
.menu-card__row {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding-block: 0.68rem;
  border-bottom: 1px dotted var(--line);
}
.menu-card__row:last-child { border-bottom: 0; }
.menu-card__name {
  font-family: var(--sans);
  font-size: 0.959rem;
}
.menu-card__dots { flex: 1; }
.menu-card__price {
  font-size: 0.9rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.menu-card__note {
  margin-top: 0.9rem;
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--accent);
  font-weight: 300;
}

.gcard { font-size: 0.865rem; }
.gcard__name {
  font-family: var(--sans);
  font-size: 1.075rem;
  margin-bottom: 0.2rem;
}
.gcard__stars { color: var(--accent); letter-spacing: 0.12em; font-size: 0.85rem; }
.gcard__stars span { color: var(--muted); font-size: 0.8rem; letter-spacing: 0; margin-left: 0.5rem; }
.gcard__rows { margin-top: 0.9rem; border-top: 1px solid var(--line-soft); }
.gcard__rows div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-soft);
  font-size: 0.86rem;
}
.gcard__rows b { color: var(--ink); font-weight: 600; }

/* week rhythm table (sport) */
.week {
  border-top: 1px solid var(--line);
  margin-top: calc(clamp(2rem, 5vh, 3rem) * var(--scale));
}
.week__row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 1.4rem;
  padding-block: 1.05rem;
  border-bottom: 1px solid var(--line-soft);
  align-items: baseline;
}
.week__day {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--accent);
  font-size: 0.921rem;
}
.week__row p { color: var(--ink-soft); font-size: 0.902rem; max-width: 38em; }

/* cta band on subpages */
.cta-band {
  border-top: 1px solid var(--line);
  padding-block: calc(clamp(3.2rem, 9vh, 5.5rem) * var(--scale));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: center;
}
.cta-band .statement { font-size: calc(clamp(1.5rem, 3vw, 2.4rem) * var(--scale)); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.865rem;
  color: var(--btn-ink);
  background: var(--btn-bg);
  padding: 1rem 1.6rem;
  border: 0;
  border-radius: 0.4rem;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.16s var(--ease-out);
}
.btn:active { background: var(--btn-bg-hover); transform: scale(0.97); }
.btn .arrow { font-family: var(--sans); }

/* see also */
.see-also { border-top: 1px solid var(--line); padding-block: calc(clamp(2.4rem, 6vh, 4rem) * var(--scale)); }
.see-also__rows { margin-top: 1.6rem; border-top: 1px solid var(--line-soft); }
.see-also__rows a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--sans);
  font-size: calc(clamp(1.25rem, 2.6vw, 1.9rem) * var(--scale));
  letter-spacing: -0.01em;
  transition: color 0.25s ease;
}
.see-also__rows a:active { color: var(--accent-ink); }
.sa__name {
  display: inline-block;
  transition: transform 0.3s var(--ease-out);
}
.see-also__rows .label { font-family: var(--mono); font-weight: 500; letter-spacing: 0.12em; }

/* ---------- reveals ---------- */

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(22px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .line-inner { transform: none; }
  html { scroll-behavior: auto; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
  .mail, .mail::after, .hero__alt::after, .site-nav a::after, .site-link::after, .spec-row .idx, .spec-row h3,
  .spec-row .arrow, .sa__name, .see-also__rows a { transition: none; }
  .btn:active { transform: none; }
  .theme-toggle:active { transform: none; }
  .theme-toggle svg { transition: none; }
  .polaroid, .polaroid__lift { transition: none; }
  .jar__wax { transition: none; }
  .frame--media > img, .frame--media > video { transition: none; }
  .stack__card, .stack__go, .stack__go .arrow { transition: none; }
  .slot:active { transform: none; }
  .day:active { transform: none; }
}

/* ============================================================
   DEMO 1 — plan sali i rezerwacja stolika (gastronomia)
   ============================================================ */

.demo {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: calc(clamp(1.5rem, 4vw, 3.4rem) * var(--scale));
  align-items: start;
  margin-top: calc(clamp(2rem, 5vh, 3.2rem) * var(--scale));
}

.demo__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.demo__badge::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.plan {
  background: var(--paper-raise);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px -30px var(--shadow);
  padding: clamp(0.9rem, 2.4vw, 1.5rem);
}
.plan__caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.9rem;
}
.plan svg {
  width: 100%;
  height: auto;
  display: block;
  touch-action: manipulation;
}

.room { fill: none; stroke: var(--line); stroke-width: 1.6; }
.fixture { fill: color-mix(in srgb, var(--ink) 5%, transparent); stroke: var(--line); stroke-width: 1.1; }
.hatch { stroke: var(--line); stroke-width: 0.8; }
.plan-label {
  font-family: var(--mono);
  font-size: 6.6px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--muted);
}

.tbl { cursor: pointer; }
.tbl__shape {
  fill: var(--paper-raise);
  stroke: var(--ink);
  stroke-width: 1.3;
  transition: fill 0.2s ease, stroke 0.2s ease;
}
.tbl__seat { fill: none; stroke: var(--line); stroke-width: 1.1; }
.tbl__no {
  font-family: var(--sans);
  font-size: 9px;
  fill: var(--ink-soft);
  text-anchor: middle;
  dominant-baseline: central;
  transition: fill 0.2s ease;
  pointer-events: none;
}
.tbl__ring { fill: none; stroke: var(--accent); stroke-width: 1.6; opacity: 0; }

/* obrys skupienia dopasowany do kształtu stolika, nie do jego prostokąta */
.tbl:focus { outline: none; }
.tbl:focus-visible .tbl__shape { stroke: var(--accent); stroke-width: 2.8; }

.tbl--taken, .tbl--small { cursor: not-allowed; }
.tbl--taken .tbl__shape {
  fill: color-mix(in srgb, var(--ink) 7%, transparent);
  stroke: var(--line);
  stroke-dasharray: 3 2.5;
}
.tbl--taken .tbl__no { fill: var(--muted); }

.tbl--small .tbl__shape { fill: var(--paper-raise); stroke: var(--line-soft); }
.tbl--small .tbl__no { fill: var(--muted); }
.tbl--small .tbl__seat { stroke: var(--line-soft); }

.divider {
  fill: none;
  stroke: var(--line);
  stroke-width: 1.1;
  stroke-dasharray: 5 4;
}

.tbl.is-selected .tbl__shape,
.tbl.is-booked .tbl__shape { fill: var(--accent); stroke: var(--accent-ink); }
.tbl.is-selected .tbl__no,
.tbl.is-booked .tbl__no { fill: var(--paper-raise); }

.plan__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.76rem;
  color: var(--muted);
}
.plan__legend span { display: inline-flex; align-items: center; gap: 0.45rem; }
.plan__legend i {
  width: 0.7rem;
  height: 0.7rem;
  border: 1px solid var(--ink);
  background: var(--paper-raise);
}
.plan__legend .lg-taken { border-color: var(--line); border-style: dashed; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.plan__legend .lg-small { border-color: var(--line-soft); background: var(--paper-raise); }
.plan__legend .lg-sel { border-color: var(--accent-ink); background: var(--accent); }

/* --- panel rezerwacji --- */

.booking { position: relative; }
.booking__eyebrow { display: block; margin-bottom: 0.7rem; }
.booking__title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: calc(clamp(1.4rem, 2.6vw, 1.95rem) * var(--scale));
  letter-spacing: -0.01em;
  line-height: 1.12;
}
.booking__hint {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--muted);
  max-width: 26em;
}

.field + .field { margin-top: 1.4rem; }
.field__label {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.65rem;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.avail {
  margin-top: 1.5rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line-soft);
  font-family: var(--sans);
  font-size: 0.987rem;
  color: var(--ink-soft);
}
.avail .digit {
  font-size: 1.29rem;
  color: var(--accent);
  min-width: 1ch;
}
.avail--none { color: var(--muted); }
.avail__none {
  margin-top: 0.5rem;
  font-size: 0.88rem;
  color: var(--accent-ink);
}
.avail__none[hidden] { display: none; }

.ticket {
  margin-top: 1.2rem;
  border-top: 1px solid var(--line-soft);
}
.ticket div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.87rem;
  color: var(--muted);
}
.ticket b { color: var(--ink); font-weight: 600; text-align: right; }
.ticket b.is-empty {
  color: var(--muted);
  font-family: var(--mono);
  font-weight: 500;
}
.slot {
  font-family: var(--mono);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--line);
  padding: 0.52rem 0.85rem;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.18s ease, color 0.18s ease,
              border-color 0.18s ease, transform 0.16s var(--ease-out);
}
.slot:active { transform: scale(0.96); }
.slot[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.slot:disabled {
  color: var(--line);
  border-style: dashed;
  cursor: not-allowed;
  text-decoration: line-through;
}

.booking__cta { margin-top: 1.4rem; }
.booking__cta[disabled] { opacity: 0.32; pointer-events: none; }

.booking__confirm { display: none; }
.booking.is-done .booking__form { display: none; }
.booking.is-done .booking__confirm { display: block; }

.check { width: 2.5rem; height: 2.5rem; color: var(--accent); margin-bottom: 0.9rem; }
.check path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.booking__receipt {
  margin-top: 1rem;
  border-top: 1px solid var(--line-soft);
}
.booking__receipt div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.55rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.88rem;
  color: var(--muted);
}
.booking__receipt b { color: var(--ink); font-weight: 600; }

.reset {
  margin-top: 1.2rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 0 0 0.15rem;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.reset:active { color: var(--ink); }

/* cyfra, która podmienia się z animacją */
.digit {
  display: inline-block;
  min-width: 0.62em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   DEMO — kalendarz zapisów (lokalny biznes)
   ============================================================ */

.daybar {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.4rem;
  margin-bottom: 1.3rem;
}
.day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  font-family: var(--mono);
  font-weight: 500;
  background: transparent;
  border: 1px solid var(--line);
  padding: 0.55rem 0.25rem 0.5rem;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease,
              color 0.18s ease, transform 0.16s var(--ease-out);
}
.day:active { transform: scale(0.97); }
.day[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.day__name {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.day[aria-pressed="true"] .day__name { color: color-mix(in srgb, var(--paper) 72%, transparent); }
.day__date {
  font-family: var(--sans);
  font-size: 1.032rem;
  line-height: 1.1;
}
.day__free {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--accent);
  min-width: 1ch;
}
.day[aria-pressed="true"] .day__free { color: var(--paper); }
.day--full { opacity: 0.4; cursor: not-allowed; }
.day--full .day__free { color: var(--muted); }

.timeline {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 0.7rem;
}
.timeline__hours,
.timeline__track { height: clamp(20rem, 42vh, 27rem); }

.timeline__hours {
  position: relative;
  font-size: 0.7rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.timeline__hours span {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
}

.timeline__track {
  position: relative;
  border: 1px solid var(--line-soft);
  background: var(--paper-raise);
  overflow: hidden;
}
.timeline__track::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    var(--line-soft) 0 1px,
    transparent 1px 12.5%
  );
  pointer-events: none;
}

.busy {
  position: absolute;
  left: 0;
  right: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent 0 4px,
    color-mix(in srgb, var(--ink) 8%, transparent) 4px 8px
  );
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.busy span {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.tslot {
  position: absolute;
  left: 0.3rem;
  right: 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-inline: 0.65rem;
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink);
  background: var(--paper-raise);
  border: 1px solid var(--ink);
  cursor: pointer;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.tslot em {
  font-style: normal;
  font-weight: 400;
  font-size: 0.74rem;
  color: var(--muted);
}
.tslot.is-picked {
  background: var(--accent);
  border-color: var(--accent-ink);
  color: var(--paper);
}
.tslot.is-picked em { color: color-mix(in srgb, var(--paper) 75%, transparent); }

.track-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  font-family: var(--sans);
  font-size: 0.893rem;
  color: var(--muted);
  font-weight: 300;
}

.plan__legend .lg-busy {
  border-color: var(--line-soft);
  background: repeating-linear-gradient(45deg, transparent 0 2px, color-mix(in srgb, var(--ink) 12%, transparent) 2px 4px);
}

.jump {
  font-family: var(--sans);
  font-size: inherit;
  font-weight: 600;
  color: var(--accent-ink);
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  padding: 0;
  cursor: pointer;
}

/* ---------- szkic: test hooków (UGC) ---------- */
.hooks { font-size: 0.86rem; }
.hooks__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.6rem 4.4rem;
  gap: 0.8rem;
  padding-block: 0.55rem;
  border-bottom: 1px solid var(--line-soft);
  align-items: baseline;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.hooks__row:first-child { color: var(--muted); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
.hooks__row:last-child { border-bottom: 0; }
.hooks__row q { font-family: var(--sans); color: var(--ink); quotes: "„" "”"; }
.hooks__row b { color: var(--accent); font-weight: 600; text-align: right; }
.hooks__row span:last-child { text-align: right; }
.hooks__row.is-win { color: var(--ink); }
.hooks__note { margin-top: 0.8rem; font-family: var(--sans); font-size: 0.88rem; color: var(--accent); font-weight: 300;}

/* ---------- szkic: etykieta wysyłkowa (sklep) ---------- */
.ship { font-size: 0.82rem; color: var(--ink-soft); }
.ship__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--ink);
}
.ship__carrier { font-family: var(--sans); font-size: 1.05rem; color: var(--ink); }
.ship__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
  padding-block: 0.8rem;
  border-bottom: 1px solid var(--line-soft);
}
.ship__grid .label { display: block; margin-bottom: 0.2rem; }
.ship__grid b { color: var(--ink); font-weight: 600; }
.ship__code {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 2.4rem;
  margin-top: 0.9rem;
}
.ship__code i { display: block; background: var(--ink); height: 100%; }
.ship__code i:nth-child(3n) { height: 100%; width: 3px; }
.ship__code i:nth-child(3n+1) { width: 1px; }
.ship__code i:nth-child(3n+2) { width: 2px; }
.ship__code i:nth-child(5n) { margin-right: 3px; }
.ship__no { margin-top: 0.4rem; font-variant-numeric: tabular-nums; letter-spacing: 0.12em; font-size: 0.72rem; color: var(--muted); }

/* ============================================================
   DEMO — scenariusz rolki: produkt przepisuje cztery ujęcia
   (UGC)
   ============================================================ */

.reel {
  display: grid;
  grid-template-columns: minmax(0, 12.5rem) minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.2rem);
  align-items: start;
}

.phone {
  position: relative;
  aspect-ratio: 9 / 16;
  border: 1.5px solid var(--ink);
  border-radius: 1.5rem;
  background: var(--paper);
  padding: 0.9rem 0.85rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.phone__bars {
  position: absolute;
  top: 0.75rem;
  left: 0.85rem;
  right: 0.85rem;
  display: flex;
  gap: 0.25rem;
}
.phone__bar {
  flex: 1;
  height: 2px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.phone__bar i {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}
.phone__time {
  position: absolute;
  top: 1.35rem;
  right: 0.85rem;
  font-size: 0.66rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.phone__beat {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 0.4rem;
}
.phone__caption {
  font-family: var(--sans);
  font-size: 1.02rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: pretty;
}

.script { list-style: none; border-top: 1px solid var(--line); }
.beat {
  display: grid;
  grid-template-columns: 3.6rem 3.4rem minmax(0, 1fr);
  gap: 0.75rem;
  width: 100%;
  padding-block: 0.72rem;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: none;
  text-align: left;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.86rem;
  color: var(--ink-soft);
  align-items: baseline;
  cursor: pointer;
  transition: color 0.18s ease;
}
.beat__time { font-size: 0.76rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.beat__kind { font-family: var(--mono); font-weight: 500; color: var(--accent); }
.beat.is-on { color: var(--ink); }
.beat.is-on .beat__time { color: var(--ink); font-weight: 600; }
.beat__text { display: block; }

.reel__foot {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.2rem;
}
.reel__foot .btn { padding: 0.8rem 1.2rem; }
.reel__meta { font-size: 0.8rem; color: var(--muted); }

/* ============================================================
   DEMO — karta produktu: wariant przelicza cenę, stan i wysyłkę
   (sklep)
   ============================================================ */

.pcard {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.2rem, 3vw, 2rem);
  align-items: start;
}
.pcard__art {
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line);
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12%;
}
.pcard__art svg { width: 100%; height: auto; overflow: visible; }
.jar__glass { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.jar__lid { fill: var(--ink); }
.jar__label { fill: var(--paper-raise); stroke: var(--ink); stroke-width: 1; }
.jar__text {
  font-family: var(--sans);
  font-size: 9px;
  fill: var(--ink);
  text-anchor: middle;
}
.jar__text--it { font-family: var(--mono); font-weight: 500; fill: var(--accent); font-size: 7.5px; }
.jar__wax {
  fill: color-mix(in srgb, var(--accent) 22%, transparent);
  /* poziom wosku = skala pionowa zakotwiczona na dnie słoika (y = 118) */
  transform-box: view-box;
  transform-origin: 50px 118px;
  transform: scaleY(var(--wax, 0.688));
  transition: transform 0.45s var(--ease-out);
}

.pcard__name {
  font-family: var(--sans);
  font-weight: 700;
  font-size: calc(clamp(1.25rem, 2.2vw, 1.6rem) * var(--scale));
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.pcard__sub { margin-top: 0.15rem; font-family: var(--sans); font-size: 0.9rem; color: var(--muted); font-weight: 300;}

.price {
  margin-top: 1rem;
  font-family: var(--sans);
  font-size: calc(clamp(1.7rem, 3vw, 2.3rem) * var(--scale));
  line-height: 1;
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}
.price small { font-family: var(--mono); font-weight: 500; font-size: 0.78rem; color: var(--muted); letter-spacing: 0; }

.stock { margin-top: 0.7rem; font-size: 0.84rem; color: var(--ink-soft); }
.stock b { color: var(--accent); font-weight: 600; }
.stock--low b { color: var(--accent-ink); }

.pcard .field { margin-top: 1.2rem; }

.qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line);
  margin-top: 1.2rem;
  font-variant-numeric: tabular-nums;
}
.qty button {
  width: 2.2rem;
  background: none;
  border: 0;
  font-family: var(--sans);
  font-size: 1.1rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.qty button:active { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.qty output {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  border-inline: 1px solid var(--line);
  font-size: 0.9rem;
  font-weight: 600;
}
.pcard__add { margin-top: 1.2rem; }

/* koszyk */
.cart__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--line);
}
.cart__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.55rem;
  height: 1.55rem;
  padding-inline: 0.4rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--paper);
  font-size: 0.74rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cart__badge.is-empty { background: transparent; color: var(--muted); border: 1px dashed var(--line); }

.cart__rows { list-style: none; }
.cart__rows li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.8rem;
  padding-block: 0.6rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.86rem;
  color: var(--ink-soft);
  align-items: baseline;
  font-variant-numeric: tabular-nums;
}
.cart__rows li b { color: var(--ink); font-weight: 600; }
.cart__rows li em { font-style: normal; color: var(--muted); }
.cart__empty {
  padding-block: 1.2rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--muted);
  border-bottom: 1px solid var(--line-soft);
  font-weight: 300;
}
.cart__empty[hidden] { display: none; }
.cart__sum {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.8rem;
  font-size: 0.88rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.cart__sum b { font-family: var(--sans); font-size: 1.25rem; color: var(--ink); font-weight: 700; }
.cart__ship { font-size: 0.8rem; color: var(--muted); margin-top: -0.3rem; }

/* ---------- stykówka: miejsca na materiały, jeszcze bez materiałów ----------
   Kreskowana ramka mówi uczciwie „tu wejdzie kadr". Rozmiary celowo różne:
   to arkusz z sesji, nie siatka kart. Podmiana = <img> w środku ramki. */

.sheet {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: minmax(0, auto);
  grid-auto-flow: dense;
  gap: 0.8rem;
  margin-top: calc(clamp(2rem, 5vh, 3.2rem) * var(--scale));
  padding: 1rem;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border: 1px solid var(--line-soft);
}
.frame {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.2rem;
  padding: 0.7rem 0.75rem;
  border: 1px dashed var(--line);
  background: var(--paper-raise);
  overflow: hidden;
}
.frame::before {
  content: attr(data-no);
  position: absolute;
  top: 0.55rem;
  left: 0.7rem;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--muted);
}
.frame > img, .frame > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame__what { font-family: var(--sans); font-size: 0.95rem; line-height: 1.2; color: var(--ink); }
.frame__spec { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
/* ramka z materiałem: zdjęcie na całość, podpis paskiem na dole, całość klikalna */
.frame--media {
  border: 0;
  border-radius: 0.4rem;
  justify-content: flex-end;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 14px 34px -22px var(--shadow);
}
.frame--media::before { display: none; }
.frame--media > img, .frame--media > video { transition: scale 0.4s var(--ease-out); }
.frame__tag {
  position: relative;
  z-index: 1;
  padding: 0.42rem 0.6rem;
  background: var(--paper-raise);
  border-top: 1px solid var(--line-soft);
  font-size: 0.74rem;
  letter-spacing: 0;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.frame__tag b { font-weight: 600; color: var(--ink); }
.frame__tag .arrow { font-family: var(--sans); }

.frame--45  { aspect-ratio: 4 / 5;  grid-column: span 2; }
.frame--916 { aspect-ratio: 9 / 16; grid-column: span 2; grid-row: span 2; }
.frame--11  { aspect-ratio: 1 / 1;  grid-column: span 2; }
.frame--169 { aspect-ratio: 16 / 9; grid-column: span 4; }
.frame--32  { aspect-ratio: 3 / 2;  grid-column: span 2; }
/* modyfikatory szerokości — arkusz ma być nierówny, nie w kratkę */
.frame--w3 { grid-column: span 3; }
.frame--w4 { grid-column: span 3; }
.sheet__note {
  grid-column: 1 / -1;
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--muted);
  padding-top: 0.3rem;
  font-weight: 300;
}

/* ---------- szkic: kalendarz treści (social) ---------- */
.cal { font-size: 0.8rem; }
.cal__row {
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr) auto;
  gap: 0.8rem;
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--line-soft);
  align-items: baseline;
  color: var(--ink-soft);
}
.cal__row:last-child { border-bottom: 0; }
.cal__day { font-family: var(--mono); font-weight: 500; color: var(--accent); }
.cal__kind { font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.cal__row.is-done { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line); }

/* ---------- szkic: lista ujęć (video) ---------- */
.shots { font-size: 0.82rem; }
.shots__row {
  display: grid;
  grid-template-columns: 2rem 3.2rem minmax(0, 1fr);
  gap: 0.7rem;
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--line-soft);
  align-items: baseline;
  color: var(--ink-soft);
}
.shots__row:last-child { border-bottom: 0; }
.shots__no { font-family: var(--mono); font-weight: 500; color: var(--muted); }
.shots__fmt { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--accent); }
.shots__row.is-done { color: var(--muted); }
.shots__row.is-done .shots__fmt { color: var(--muted); }

/* ---------- szkic: karta stanu (obsługa) ---------- */
.status { font-size: 0.84rem; }
.status__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.55rem;
  border-bottom: 1px solid var(--line-soft);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.status__row:last-child { border-bottom: 0; }
.status__row b { color: var(--ink); font-weight: 600; text-align: right; }
.status__ok { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent); margin-right: 0.45rem; vertical-align: middle; }

/* ---------- szkic: pomiar na żywo (strony) ---------- */
.live { padding-block: 0.3rem; }
.live .perf { margin-top: 0; font-size: 0.9rem; color: var(--ink-soft); }
.live__wait { font-family: var(--sans); font-size: 0.9rem; color: var(--muted); font-weight: 300;}
.live .perf:not([hidden]) + .live__wait { display: none; }

/* ============================================================
   REALIZACJE — dwie strony, dwa różne przedmioty:
   po lewej stykówka Kornelii, po prawej katalog Kuby
   ============================================================ */

.works {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-top: calc(clamp(2.4rem, 6vh, 4rem) * var(--scale));
  border-top: 1px solid var(--line);
}
.works__side { padding-top: 1.6rem; min-width: 0; }
.works__side:first-child { padding-right: clamp(1.4rem, 4vw, 3.5rem); }
.works__side:last-child {
  padding-left: clamp(1.4rem, 4vw, 3.5rem);
  border-left: 1px solid var(--line);
}
.works .sheet { margin-top: 1.4rem; }

.catalog { margin-top: 1.4rem; border-top: 1px solid var(--line); }
.work {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 0.9rem;
  padding-block: 1.4rem;
  border-bottom: 1px solid var(--line-soft);
}
.work__no {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--muted);
  font-size: 0.893rem;
  padding-top: 0.3rem;
}
.work__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem 1rem;
  flex-wrap: wrap;
}
.work__name {
  font-family: var(--sans);
  font-weight: 700;
  font-size: calc(clamp(1.2rem, 2.2vw, 1.6rem) * var(--scale));
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.work__year { font-family: var(--mono); font-weight: 500; color: var(--muted); font-size: 0.9rem; }
.work__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin-top: 0.45rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.work__meta b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.work .perf { margin-top: 0.45rem; font-size: 0.82rem; }
.work__shot {
  margin-top: 1rem;
  aspect-ratio: 16 / 10;
  border-radius: 0.4rem;
  rotate: -0.8deg;
  box-shadow: 0 18px 44px -24px var(--shadow);
}
.work__shot--real { border-style: solid; background: var(--paper-raise); }
.work__shot--wide { aspect-ratio: 1440 / 794; }
/* zrzut z telefonu jest wąski i wysoki — nie wpychamy go w kadr 16:10 */
/* zrzut telefonu w obudowie: pełne proporcje ekranu, czarna ramka,
   zaokrąglenia jak w telefonie — nic nie jest obcinane */
.work__shot--phone {
  aspect-ratio: 560 / 1214;
  max-width: 15.5rem;
  border: 0;
  border-radius: 1.8rem;
  background: var(--ink);
  box-shadow: 0 26px 55px -28px var(--shadow);
  rotate: -1.2deg;
}
.work__shot--real img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* ekran telefonu pokazujemy w całości — proporcja ramki jak przy rolkach */
.work__shot.work__shot--phone img {
  inset: 0.42rem;
  width: calc(100% - 0.84rem);
  height: calc(100% - 0.84rem);
  border-radius: 1.45rem;
  object-fit: cover;
}
.work__link {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--accent-ink);
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.1rem;
  transition: color 0.2s ease;
}
.work__link .arrow { font-family: var(--sans); font-weight: 400; }
.work__link:active { color: var(--ink); }

/* ---------- hover: tylko tam, gdzie istnieje prawdziwy kursor ----------
   na dotyku :hover zostaje przyklejony po tapnieciu                     */

@media (hover: hover) and (pointer: fine) {
  .site-nav a:hover::after, .site-link:hover::after { transform: scaleX(1); }
  .theme-toggle:hover { color: var(--accent-ink); }
  .foot-meta a:hover { color: var(--ink); }
  .crumbs a:hover { color: var(--accent-ink); }
  .btn:hover { background: var(--btn-bg-hover); }

  .mail:hover { color: var(--accent-ink); }
  .mail:hover::after { transform: scaleX(1); }

  .spec-row:hover .idx,
  .spec-row:hover h3 { transform: translateX(8px); }
  .spec-row:hover h3 { color: var(--spec, var(--accent)); }
  .spec-row:hover .arrow {
    color: var(--spec, var(--accent));
    transform: translateX(6px);
  }

  .see-also__rows a:hover { color: var(--accent-ink); }
  .work__link:hover { color: var(--ink); }
  .inline-link:hover { color: var(--accent-ink); border-color: currentColor; }

  .polaroid:hover { transform: rotate(-0.8deg) translateY(-3px) scale(1.025); }
  .frame--media:hover > img, .frame--media:hover > video { scale: 1.04; }
  .frame--media:hover .frame__tag { color: var(--ink); }
  .stack:hover .stack__card--b { rotate: 0.2deg; translate: 0 -10px; box-shadow: 0 40px 80px -30px var(--shadow); }
  .stack:hover .stack__card--c { rotate: 10.5deg; translate: 6% -6%; }
  .stack:hover .stack__card--d { rotate: -12.5deg; translate: -6% 5%; }
  .stack:hover .stack__card--e { rotate: 8.5deg; translate: 5% -6%; }
  .stack:hover .stack__card--f { rotate: -6.5deg; translate: -5% -5%; }
  .stack:hover .stack__card--h { rotate: 7deg; translate: 6% 6%; }
  .stack:hover .stack__go { background: var(--brand); color: var(--on-brand); translate: -50% -4px; }
  .stack:hover .stack__go .arrow { translate: 4px 0; }
  .polaroid:hover .polaroid__lift { opacity: 1; }
  .see-also__rows a:hover .sa__name { transform: translateX(10px); }
  .hero__alt:hover { color: var(--accent-ink); }
  .hero__alt:hover::after { transform: scaleX(1); }

  .slot:not(:disabled):not([aria-pressed="true"]):hover {
    border-color: var(--ink-soft);
    color: var(--ink);
  }
  .reset:hover { color: var(--ink); border-color: var(--ink); }
  .tbl:not(.tbl--taken):not(.is-selected):hover .tbl__shape { fill: color-mix(in srgb, var(--accent) 14%, transparent); }

  .day:not(.day--full):not([aria-pressed="true"]):hover {
    border-color: var(--ink-soft);
  }
  .tslot:not(.is-picked):hover { background: var(--ink); color: var(--paper); }
  .tslot:not(.is-picked):hover em { color: color-mix(in srgb, var(--paper) 75%, transparent); }
  .beat:not(.is-on):hover { color: var(--ink); }
  .qty button:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
}

/* ---------- materialy: szanuj ustawienie przezroczystosci ---------- */

@media (prefers-reduced-transparency: reduce) {
  .site-head {
    background: var(--paper);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom-color: var(--line-soft);
  }
}

/* ---------- responsive ---------- */

@media (max-width: 560px) {
  .daybar { gap: 0.25rem; }
  .day { padding-inline: 0.1rem; }
  .day__date { font-size: 0.94rem; }
  .timeline { grid-template-columns: 2.2rem minmax(0, 1fr); gap: 0.5rem; }
}

@media (max-width: 960px) {
  .demo { grid-template-columns: 1fr; }
}

/* Zakreślenie w znaku poszerzyło wordmark o padding, przez co na wąskich
   ekranach obie strony nagłówka stykały się bez odstępu (zmierzone na 390 px:
   „Realizacje" kończyło się na 192, „Specjalizacje" zaczynały na 192). */
@media (max-width: 480px) {
  .site-head__row { gap: 0.8rem; }
  .site-head__brand { gap: 0.7rem; }
  .wordmark { font-size: 0.94rem; }
  .wordmark i { padding: 0.04em 0.147em 0.08em 0.18em; }
}

@media (max-width: 560px) {
  .sheet { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; padding: 0.6rem; }
  .frame--169, .frame--32 { grid-column: span 4; }
  .reel { grid-template-columns: 1fr; }
  .phone { max-width: 13rem; margin-inline: auto; }
  .pcard { grid-template-columns: 1fr; }
  .pcard__art { max-width: 14rem; }
}

@media (max-width: 860px) {
  .page-hero__lead { grid-template-columns: 1fr; align-items: start; }
  .artifact-wrap { grid-template-columns: 1fr; }
  .artifact { rotate: -0.8deg; max-width: 26rem; }
}

@media (max-width: 640px) {
  .site-head__brand { gap: 0.9rem; }
  .site-nav { gap: 0.9rem; font-size: 0.8rem; }
  .site-link { font-size: 0.8rem; }
  .site-nav a:first-child { display: none; }
  .works { grid-template-columns: 1fr; border-top: 0; }
  .works__side:first-child { padding-right: 0; border-top: 1px solid var(--line-soft); }
  .works__side:last-child { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); margin-top: 1.6rem; }
  .hero { min-height: 50svh; }
  .hero__cta { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .studio-intro { grid-template-columns: 1fr; gap: 1.6rem; }
  .polaroid { max-width: 20rem; }
  /* telefon: odbitki niżej, żeby przycisk miał swoje miejsce pod stosem */
  .stack { aspect-ratio: 4 / 3.8; }
  .stack__card { padding: 0.5rem 0.55rem; }
  .stack__card--b { left: 20%; width: 80%; top: 26%; }
  .stack__card--c { width: 22%; left: 76%; top: 4%; }
  .stack__card--d { width: 26%; left: 6%; top: 52%; }
  .stack__card--e { width: 24%; left: 50%; top: 0%; }
  .stack__card--f { left: 0%; width: 56%; top: 4%; }
  .stack__card--h { left: 62%; width: 36%; top: 68%; }
  .stack__what { font-size: 0.78rem; }
  .stack__spec { display: none; }
  .stack__card[data-no]::after { font-size: 0.7rem; right: 0.5rem; bottom: 0.45rem; }
  .stack__tag { font-size: 0.66rem; padding: 0.4rem 0.6rem; }
  /* podpis drugiej odbitki chowa się za przednią — lepiej go nie ucinać */
  .stack__card--b .stack__tag { display: none; }
  .split { grid-template-columns: 1fr; border-top: 0; }
  .split__col:first-child { padding-right: 0; border-top: 1px solid var(--line-soft); }
  .split__col:last-child {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
    margin-top: 1.6rem;
  }
  .spec-row { grid-template-columns: 2rem 1fr 1.6rem; min-height: 5.6rem; }
  .spec-row .tags { display: none; }
  .cta-band { grid-template-columns: 1fr; }
  .week__row { grid-template-columns: 5.4rem 1fr; gap: 0.9rem; }
}