/* =====================================================================
   CreativeWNW — Katarzyna Wasiak

   Wspólna powierzchnia: jasny szary beton z delikatną strukturą.
   Ma się dać uwierzyć, że można na nim położyć dokument, przykleić
   zdjęcie, zostawić karteczkę albo przypiąć wycinek.

   Neon należy do Creative Store i drobnych aktywnych elementów.
   Kolor interakcji (niebieski / róż) pojawia się przy hover na
   komputerze oraz przy dotknięciu i zaznaczeniu na dotyku.

   Tożsamość wynika z typografii, betonu, fotografii i zachowania
   przedmiotów — bez wymyślonego znaku graficznego.
   ===================================================================== */

/* ── 1. TOKENY ─────────────────────────────────────────────────────── */
:root{
  /* beton */
  --wall:#CFCFCA;
  --wall-hi:#DCDCD8;
  --wall-lo:#C1C1BC;
  --paper:#EDECE9;
  --paper-2:#F6F5F3;
  --line:#B0AFA9;
  --line-soft:#C2C1BB;

  /* atrament */
  --ink:#22221C;
  --ink-2:#4E4E46;
  --ink-3:#4E4E48;
  --on-dark:#F2F1ED;
  --on-dark-2:#B6B4AC;

  /* interakcja */
  --blue:#2036D6;
  --pink:#D81B60;      /* wypełnienia, obrysy, podkreślenia */
  --pink-ink:#970D47;  /* tekst na betonie */

  /* neonowy papier — Creative Store */
  --n-yellow:#F5EC3D;
  --n-pink:#FF5FA2;
  --n-green:#6BE882;
  --n-orange:#FF9433;

  /* Fundacja */
  --f-green:#1B9444;
  --f-green-ink:#12602F;
  --f-green-dark:#0D4623;
  --f-gray:#54544F;
  --f-sun:#F5B800;

  /* typografia */
  --f-display:'Fraunces','Iowan Old Style','Georgia',serif;
  --f-ui:'Manrope','Segoe UI',system-ui,-apple-system,sans-serif;
  --f-mono:'IBM Plex Mono','Cascadia Mono',Consolas,monospace;
  --f-marker:'Caveat','Segoe Script','Bradley Hand',cursive;
  --wonk:'SOFT' 44,'WONK' 1;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:72px; --s9:104px;

  --pad:clamp(20px,5vw,72px);
  --maxw:1240px;
  --r:10px; --r-sm:6px; --r-lg:20px;

  --z-appbar:400; --z-tabbar:420; --z-sheet:600; --z-toast:700;
  --t-fast:.14s; --t:.26s; --t-slow:.46s;
  --ease:cubic-bezier(.22,.61,.36,1);

  --beton:url("../img/tex/beton.png");
  --plyta:url("../img/tex/plyta.png");
  --plyta-pokoj:url("../img/tex/plyta-pokoj.png");
  --papier:url("../img/tex/papier.png");
}

/* ── 2. RESET ──────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
/* własne display: (grid/flex) wygrywa z atrybutem hidden z arkusza przeglądarki */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,ul,ol,figure,figcaption,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
img{max-width:100%;height:auto;display:block}
button,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}

html{scroll-behavior:smooth}
body{
  font-family:var(--f-ui);font-size:17.5px;line-height:1.68;
  color:var(--ink);background:var(--wall);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}

/* powierzchnia betonu */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 78% at 16% 0%, #DADAD6 0%, transparent 56%),
    radial-gradient(86% 64% at 84% 26%, #D4D4D0 0%, transparent 54%),
    radial-gradient(72% 58% at 40% 96%, #C4C4BF 0%, transparent 60%),
    linear-gradient(180deg,#D2D2CD 0%,#C9C9C4 100%);
}
/* Faktura betonu w dwóch rolach. Kafelek niesie samo ziarno i wżery —
   przy 300 px nie da się go odczytać jako wzoru. Duże rysy, pęknięcia
   i ślady zacierania siedzą na osobnej płycie, która nigdy się nie
   powtarza, więc powierzchnia nie wygląda na kafelkowaną. Obie tekstury
   mają średnią 127, więc soft-light rzeźbi je, nie ruszając jasności. */
body::after{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:var(--beton);
  background-size:300px 300px;
  mix-blend-mode:soft-light;opacity:.8;
}
html::after{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:var(--plyta);
  background-size:cover;background-position:center;
  mix-blend-mode:soft-light;opacity:.95;
}
/* „Mam na to papiery” ma pod sobą własną, jedną płytę — globalna
   warstwa rys ustępuje jej miejsca, żeby rysunek się nie dublował */
html:has(body[data-pokoj="papiery"])::after{opacity:0}
main,.appbar,.tabbar,.foot,.sheet,.toast{position:relative;z-index:1}

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{
  position:fixed;top:8px;left:8px;z-index:900;padding:12px 18px;
  background:var(--blue);color:#fff;font-family:var(--f-mono);border-radius:var(--r-sm);
  transform:translateY(-180%);transition:transform var(--t) var(--ease);
}
.skip-link:focus{transform:none}
:focus-visible{outline:2.5px solid var(--blue);outline-offset:3px;border-radius:2px}

/* ── 3. ELEMENTY WSPÓLNE ───────────────────────────────────────────── */
.ico{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;display:block}
#i-grab circle,#i-more circle,#i-play path{fill:currentColor;stroke:none}

/* napis wyryty w betonie — wgłębienie robi jasny refleks pod literami,
   sam tekst zostaje ciemny, żeby dało się go przeczytać */
.carved{
  font-family:var(--f-mono);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-2);
  text-shadow:0 1px 0 rgba(255,255,255,.85), 0 -1px 1px rgba(0,0,0,.22);
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:14px 26px;
  font-family:var(--f-ui);font-size:15.5px;font-weight:600;
  border:1.5px solid var(--line);border-radius:var(--r);
  background:#FFFFFF4D;color:var(--ink);
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease),
             color var(--t) var(--ease),transform var(--t-fast) var(--ease),
             box-shadow var(--t) var(--ease);
  touch-action:manipulation;text-align:center;
}
.btn .ico{width:19px;height:19px}
.btn--lg{min-height:58px;padding:16px 30px;font-size:16.5px}

.btn--primary{background:var(--ink);color:var(--paper-2);border-color:var(--ink)}
.btn--quiet{background:transparent;border-color:transparent;color:var(--ink-2)}

/* kolor przy ruchu: komputer — hover, dotyk — aktywacja */
.btn:hover,.btn:focus-visible{border-color:var(--blue);color:var(--blue);background:#2036D60F}
.btn:active{background:var(--blue);border-color:var(--blue);color:#fff;transform:scale(.975)}
.btn--primary:hover,.btn--primary:focus-visible{background:var(--blue);border-color:var(--blue);color:#fff}
.btn--primary:active{background:var(--pink);border-color:var(--pink);color:#fff}
.btn--found{background:var(--f-green-ink);border-color:var(--f-green-ink);color:#fff}
.btn--found:hover,.btn--found:focus-visible{background:var(--f-green-dark);border-color:var(--f-green-dark);color:#fff}

.link-arrow{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-weight:600;font-size:15.5px;color:var(--ink-2);
  transition:color var(--t) var(--ease);
}
.link-arrow .ico{width:17px;height:17px;transition:transform var(--t) var(--ease)}
.link-arrow:hover,.link-arrow:focus-visible{color:var(--pink-ink)}
.link-arrow:hover .ico{transform:translateX(4px)}

.link-quiet{
  font-family:var(--f-mono);font-size:12.5px;color:var(--ink-3);
  border-bottom:1px solid var(--line);padding:4px 0;min-height:44px;
  transition:color var(--t) var(--ease),border-color var(--t) var(--ease);
}
.link-quiet:hover{color:var(--pink-ink);border-color:var(--pink)}

/* ── 4. GÓRNY PASEK ────────────────────────────────────────────────── */
/* Pasek nie jest osobnym interfejsem unoszącym się nad stroną: to ten sam
   beton, na którym leży cała reszta. Stąd brak szkła i brak ramki —
   zamiast nich ta sama faktura, która biegnie dalej w dół, i krawędź
   światła na dole, jak na półce wylanej razem ze ścianą. */
.appbar{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-appbar);
  display:flex;align-items:center;gap:var(--s5);padding:0 var(--pad);
  padding-top:env(safe-area-inset-top);
  height:calc(72px + env(safe-area-inset-top));
  isolation:isolate;
  background:linear-gradient(180deg,#D4D4CF 0%,#D1D1CC 58%,#CFCFCAF2 82%,#CECEC900 100%);
}
/* ziarno paska trzyma ten sam raster co ściana (oba są position:fixed,
   więc kafelki 300 px zaczynają się w tym samym punkcie) */
.appbar::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--beton);background-size:300px 300px;
  mix-blend-mode:soft-light;opacity:.75;
  -webkit-mask-image:linear-gradient(180deg,#000 76%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 76%,transparent 100%);
}
/* dolna krawędź: refleks, nie kreska */
.appbar::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,#FFFFFF00,#FFFFFFA6 14%,#FFFFFFA6 86%,#FFFFFF00);
}
.appbar__brand{
  font-family:var(--f-display);font-variation-settings:var(--wonk),'opsz' 24;
  font-size:22px;font-weight:600;letter-spacing:-.015em;flex:none;
  min-height:44px;display:flex;align-items:center;
  text-shadow:0 1px 0 #FFFFFFB8, 0 -1px 1px #00000024;
  transition:color var(--t) var(--ease);
}
.appbar__brand b{font-weight:inherit;color:var(--ink-3)}
.appbar__brand:hover{color:var(--pink-ink)}
.appbar__nav{
  display:flex;gap:var(--s5);margin-left:auto;align-items:center;
  font-size:16.5px;font-weight:500;
}
/* Nazwy pokoi są wyryte w płycie: jasny refleks pod literą i cień
   nad nią, czyli światło padające do wgłębienia z góry. */
.appbar__nav a{
  color:var(--ink-2);padding:8px 0;position:relative;white-space:nowrap;
  text-shadow:0 1px 0 #FFFFFFB8, 0 -1px 1px #00000026;
  transition:color var(--t) var(--ease);
}
/* podkreślenie to rowek wydrapany w betonie, nie belka interfejsu */
.appbar__nav a::after{
  content:'';position:absolute;left:0;right:0;bottom:2px;height:2px;
  background:linear-gradient(180deg,#00000038,#00000012);
  box-shadow:0 1px 0 #FFFFFFA6;border-radius:1px;
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--t) var(--ease);
}
.appbar__nav a:hover,.appbar__nav a:focus-visible{color:var(--pink-ink)}
.appbar__nav a:hover::after{transform:scaleX(1)}
.appbar__nav a.is-here{color:var(--ink);font-weight:600}
.appbar__nav a.is-here::after{
  transform:scaleX(1);
  background:linear-gradient(180deg,#2036D6D9,#2036D68A);
  box-shadow:0 1px 0 #FFFFFFB3;
}
.appbar__cta{flex:none;min-height:44px;padding:11px 20px;font-size:15px}

/* ── 5. POKOJE ─────────────────────────────────────────────────────── */
.room{
  position:relative;
  max-width:var(--maxw);margin:0 auto;
  padding:calc(112px + env(safe-area-inset-top)) var(--pad) var(--s9);
  min-height:100vh;min-height:100dvh;
}
.room[hidden]{display:none}
.room__title{
  font-family:var(--f-display);font-variation-settings:var(--wonk),'opsz' 96;
  font-weight:600;font-size:clamp(38px,6.2vw,76px);line-height:1;letter-spacing:-.032em;
  margin-bottom:var(--s7);outline:none;
}
.room__title--tight{margin-bottom:0}

/* ── 6. START ──────────────────────────────────────────────────────── */
.cover{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s8);align-items:center}
.cover__title{
  font-family:var(--f-display);font-variation-settings:var(--wonk),'opsz' 144;
  font-weight:600;font-size:clamp(52px,9.5vw,124px);line-height:.94;letter-spacing:-.042em;
  margin:var(--s4) 0 var(--s5);outline:none;
}
.cover__lead{max-width:46ch;font-size:clamp(17.5px,1.5vw,20px);color:var(--ink-2);line-height:1.62}
.cover__actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
.cover__photo{display:flex;justify-content:center}

/* Wejścia do pokoi nie są kafelkami interfejsu: to nazwy rzeczy
   wypisane na tej samej powierzchni, oddzielone rysą w betonie. */
.entries{
  display:flex;flex-direction:column;
  margin-top:var(--s9);padding-top:var(--s5);
  border-top:1px solid #00000014;box-shadow:0 -1px 0 #FFFFFF7A;
}
.entry{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  min-height:64px;padding:var(--s4) 2px;position:relative;
  border-bottom:1px solid #00000012;box-shadow:0 1px 0 #FFFFFF70;
  transition:padding-left var(--t) var(--ease),color var(--t) var(--ease);
}
.entry:hover,.entry:focus-visible{padding-left:14px;color:var(--pink-ink)}

.entry__label{
  font-family:var(--f-display);font-variation-settings:var(--wonk),'opsz' 26;
  font-weight:600;font-size:clamp(20px,2.2vw,25px);line-height:1.22;letter-spacing:-.022em;
  text-shadow:0 1px 0 #FFFFFFAD, 0 -1px 1px #00000021;
}
.entry__go{width:20px;height:20px;color:var(--ink-3);flex:none;transition:transform var(--t) var(--ease),color var(--t) var(--ease)}
.entry:hover .entry__go,.entry:focus-visible .entry__go{transform:translateX(6px);color:var(--pink-ink)}

/* ── 7. ODBITKI ────────────────────────────────────────────────────── */
.print{
  background:#FCFBF9;padding:11px 11px 0;border-radius:3px;
  box-shadow:0 12px 26px #4A473C33,0 2px 6px #4A473C29;
  cursor:pointer;user-select:none;
  transition:box-shadow var(--t) var(--ease),transform var(--t-fast) var(--ease);
}
.print__img,.print__frame{
  display:block;width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:1px;
}
.print__frame{
  background:
    radial-gradient(70% 50% at 50% 30%,#E3E2DD,transparent 70%),
    linear-gradient(160deg,#DAD9D4,#CDCCC6);
}
.print__cap{
  padding:10px 3px 12px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.07em;
  color:var(--ink-2);text-transform:uppercase;line-height:1.45;
}
.print:hover,.print:focus-visible{box-shadow:0 18px 40px #4A473C45,0 0 0 2px var(--pink)}
.print.is-drag{box-shadow:0 26px 54px #4A473C59,0 0 0 2px var(--blue)}

.print--cover{width:min(360px,80vw);transform:rotate(-2.5deg)}
.print--cover .print__img,.print--cover .print__frame{aspect-ratio:4/5}
.print--still{width:min(300px,74vw);transform:rotate(1.5deg)}
.print--tail{width:min(230px,60vw);transform:rotate(2deg)}
.print--wall{position:absolute;left:7%;bottom:6%;width:min(190px,34vw);transform:rotate(-3.5deg);z-index:2}

/* stół sesji */
.table{position:relative;touch-action:pan-y;margin-top:var(--s5)}
.table .print{position:absolute;width:200px;touch-action:none}

/* ── 8. PRACA — dokumenty leżą na betonie ──────────────────────────── */
.desk-docs{display:flex;flex-wrap:wrap;gap:var(--s7);align-items:flex-start}
.reports,.traces,.diploma{margin-top:var(--s9);display:flex;flex-wrap:wrap;gap:var(--s6);align-items:flex-start}
.archive{margin-top:var(--s8);display:flex;flex-wrap:wrap;gap:var(--s4);align-items:flex-start}

.doc{
  display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start;
  background:none;border:0;padding:0;text-align:left;cursor:pointer;
}
.doc__paper{
  position:relative;display:block;overflow:hidden;border-radius:2px;
  background:linear-gradient(160deg,#FDFDFC,#EFEEEB);
  box-shadow:0 14px 30px #4A473C2E,0 2px 6px #4A473C24;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.doc__face{
  display:block;width:100%;aspect-ratio:1/1.414;
  background-size:cover;background-position:top center;background-repeat:no-repeat;
  background-color:#F2F1EE;
}
/* papier bez okładki dostaje delikatne zagięcia zamiast pustki */
.doc:not(.has-face) .doc__face{
  background-image:
    linear-gradient(114deg,transparent 0 46%,#00000008 46.4% 47%,transparent 47.4%),
    linear-gradient(72deg,transparent 0 63%,#0000000A 63.4% 64%,transparent 64.4%);
}
.doc__tape{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:86px;height:26px;background:#FFFFFF8A;
  border-left:1px dashed #00000012;border-right:1px dashed #00000012;
  box-shadow:0 1px 3px #00000024;
}
.doc__label{
  font-family:var(--f-display);font-variation-settings:var(--wonk),'opsz' 28;
  font-weight:600;font-size:20px;letter-spacing:-.018em;color:var(--ink);
  display:flex;flex-direction:column;gap:3px;max-width:30ch;
}
.doc__label em{
  font-family:var(--f-ui);font-style:normal;font-weight:500;
  font-size:13.5px;line-height:1.45;color:var(--ink-2);letter-spacing:0;
}
/* rok prowadzi wzrok po chronologii, zanim padnie nazwa dokumentu */
.doc__rok{
  font-family:var(--f-mono);font-weight:500;font-size:12px;letter-spacing:.16em;
  color:var(--ink-3);
}
/* Aneks jest dalszym ciągiem świadectwa, więc podpina się pod nie
   klamrą, zamiast stać obok jako drugi niezależny dokument. */
.doc--ciag{
  position:relative;align-self:flex-start;
  margin-left:var(--s5);padding-top:var(--s6);
}
.doc--ciag::before{
  content:'';position:absolute;left:calc(-1 * var(--s5) + 3px);top:calc(var(--s6) + 34px);
  width:calc(var(--s5) - 8px);height:1px;background:#00000029;
  box-shadow:0 1px 0 #FFFFFF94;
}
.archive .doc--ciag .doc__paper{width:min(132px,34vw);transform:rotate(2.4deg)}
.archive .doc--ciag .doc__label{font-size:13px}
.doc:hover .doc__paper,.doc:focus-visible .doc__paper{
  transform:rotate(0) translateY(-6px);
  box-shadow:0 26px 52px #4A473C4A,0 0 0 2px var(--blue);
}

.doc--main .doc__paper{width:min(340px,80vw);transform:rotate(-2.2deg)}
.doc--main .doc__label{font-size:30px}
.doc--report .doc__paper{width:min(290px,74vw);transform:rotate(1.8deg)}
.doc--archive .doc__paper{width:min(168px,44vw);transform:rotate(-1deg)}
.doc--archive .doc__label{font-size:14px;font-family:var(--f-mono);letter-spacing:.04em;color:var(--ink-2)}
.doc--diploma .doc__paper{width:min(310px,78vw);transform:rotate(1.2deg)}

/* kanał jako materialny ślad, nie moduł social media */
.trace-note{
  display:inline-flex;align-items:center;gap:14px;min-height:66px;padding:16px 22px;
  background:linear-gradient(160deg,#F5F3EC,#E9E7DE);border-radius:2px;
  box-shadow:0 8px 18px #4A473C33,0 1px 3px #4A473C26;
  transform:rotate(-1.6deg);
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.trace-note:hover,.trace-note:focus-visible,.trace-note:active{
  transform:rotate(0) translateY(-4px);box-shadow:0 16px 30px #4A473C40;
}
.trace-note__mark{width:32px;height:32px;display:grid;place-items:center;color:#C4160F;flex:none}
.trace-note__mark .ico{width:32px;height:32px}
.trace-note__label{
  font-family:var(--f-display);font-variation-settings:var(--wonk),'opsz' 24;
  font-weight:600;font-size:19px;letter-spacing:-.015em;display:flex;flex-direction:column;
}
.trace-note__label em{
  font-family:var(--f-mono);font-style:normal;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);
}
.tail-photo{margin-top:var(--s8);display:flex}

/* Pod dokumentami leży jeden kawał betonu, a nie wzorek złożony
   z powtarzanych kafelków: duża płyta rozciąga się na cały pokój,
   drobne ziarno tylko ją dosypuje. Krawędzie płyty pokazują, że to
   wylany fragment powierzchni, nie tło. */
.room--papiery{isolation:isolate}
.room--papiery::before{
  content:'';position:absolute;z-index:-2;pointer-events:none;
  left:50%;transform:translateX(-50%);width:100vw;top:0;bottom:0;
  background:
    radial-gradient(78% 52% at 28% 8%, #DDDDD9 0%, transparent 62%),
    radial-gradient(64% 46% at 82% 66%, #C6C6C1 0%, transparent 60%),
    linear-gradient(168deg,#D6D6D1 0%,#CBCBC6 52%,#C6C6C1 100%);
  box-shadow:inset 0 1px 0 #FFFFFF8A, inset 0 -1px 0 #00000012;
}
.room--papiery::after{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  left:50%;transform:translateX(-50%);width:100vw;top:0;bottom:0;
  background-image:var(--plyta-pokoj);
  background-size:100% 100%;background-repeat:no-repeat;
  mix-blend-mode:soft-light;opacity:1;
}

/* Nagłówek pokoju jest płytko wyryty w tej płycie: litery zostają
   ciemne, pod nimi kładzie się refleks światła, nad nimi cień. */
.room__title--ryte{
  text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(31px,5.4vw,66px);
  color:#3C3C34;
  text-shadow:
    0 1px 0 #FFFFFFC2,
    0 2px 1px #FFFFFF6B,
    0 -1px 1px #0000002E,
    0 -2px 3px #00000021;
}
.room__title--ryte .usmiech{
  -webkit-text-fill-color:initial;font-size:.72em;margin-left:.12em;
  text-shadow:none;filter:saturate(.72) contrast(.94) opacity(.9);
}

/* Raport jest publikacją położoną na betonie, nie kolejną kartką:
   grubszy blok stron, mocniejsza pierwsza strona i wyraźne
   podniesienie przy najechaniu. */
.doc--report .doc__paper{
  width:min(320px,78vw);transform:rotate(1.8deg);
  border-radius:2px 3px 3px 2px;
  box-shadow:
    0 14px 30px #4A473C33,
    2px 0 0 #EFEEE9, 3px 1px 0 #E4E3DD, 4px 2px 0 #DAD9D2,
    5px 3px 10px #4A473C2E;
}
.doc--report .doc__face{aspect-ratio:1/1.32;background-position:top center}
.doc--report .doc__paper::after{           /* grzbiet wydania */
  content:'';position:absolute;left:0;top:0;bottom:0;width:9px;
  background:linear-gradient(90deg,#00000021,#00000000);
}
.doc--report .doc__label{font-size:23px}
.doc--report:hover .doc__paper,.doc--report:focus-visible .doc__paper{
  transform:rotate(0) translateY(-10px);
  box-shadow:
    0 32px 60px #4A473C4A,
    2px 0 0 #EFEEE9, 3px 1px 0 #E4E3DD, 4px 2px 0 #DAD9D2,
    5px 3px 12px #4A473C33,
    0 0 0 2px var(--blue);
}

/* ── 9. TEKSTY ─────────────────────────────────────────────────────── */
.clippings{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s4)}
.clip{
  grid-column:span 6;display:flex;flex-direction:column;gap:var(--s4);
  padding:var(--s6) var(--s5);text-align:left;position:relative;overflow:hidden;
  background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r);
  box-shadow:0 2px 5px #4A473C12;
  transition:transform var(--t) var(--ease),border-color var(--t) var(--ease),
             box-shadow var(--t) var(--ease),background var(--t) var(--ease);
  touch-action:manipulation;
}
.clip:nth-child(5n+1){grid-column:span 12}
.clip:nth-child(5n+4){grid-column:span 7}
.clip:nth-child(5n+5){grid-column:span 5}
.clip::after{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent;
  transition:background var(--t) var(--ease);
}
.clip:hover,.clip:focus-visible{
  transform:translateY(-4px);background:var(--paper-2);
  border-color:var(--line);box-shadow:0 14px 30px #4A473C24;
}
.clip:hover::after,.clip:focus-visible::after{background:var(--blue)}
.clip:nth-child(even):hover::after{background:var(--pink)}
.clip:active{background:#fff}

/* tytuł jest najważniejszy */
.clip__title{
  font-family:var(--f-display);font-variation-settings:var(--wonk),'opsz' 72;
  font-weight:600;line-height:1.06;letter-spacing:-.03em;
  font-size:clamp(26px,3.4vw,44px);
}
.clip:nth-child(5n+1) .clip__title{font-size:clamp(30px,4.4vw,56px)}
.clip:nth-child(5n+5) .clip__title{font-size:clamp(23px,2.4vw,32px)}
.clip__pull{
  font-family:var(--f-display);font-variation-settings:var(--wonk),'opsz' 14;
  font-style:italic;font-weight:400;font-size:17px;line-height:1.5;color:var(--ink-2);
  max-width:62ch;
}

/* ── 10. MEDIA ─────────────────────────────────────────────────────── */
.project{display:grid;grid-template-columns:auto 1fr;gap:var(--s8);align-items:start}
.project__body{display:flex;flex-direction:column;gap:var(--s4);max-width:58ch}
.project__title{
  font-family:var(--f-display);font-variation-settings:var(--wonk),'opsz' 72;
  font-weight:600;font-size:clamp(32px,4.6vw,58px);line-height:1.02;letter-spacing:-.03em;
}
.project__lead{color:var(--ink-2)}
.credits{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);margin-top:var(--s2)}
.credit{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);padding:7px 12px;border:1px solid var(--line-soft);border-radius:var(--r-sm);
  background:#FFFFFF52;
}
.project__links{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s3)}

/* etykieta i metadane materiału: pola pomocnicze, nie nagłówki */
.project__label{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-3);
  text-shadow:0 1px 0 #FFFFFF9E, 0 -1px 1px #0000001F;
}
.project__meta{
  font-family:var(--f-mono);font-size:12.5px;letter-spacing:.1em;color:var(--ink-3);
  margin-top:calc(-1 * var(--s2));
}
.project__body p{color:var(--ink-2)}
.project__body>.project__lead{color:var(--ink-2);font-size:clamp(17.5px,1.5vw,19.5px)}

/* materiały w pokoju Media stoją osobno, każdy z własnym końcem */
#media .project + .project{
  margin-top:var(--s9);padding-top:var(--s9);
  border-top:1px solid #00000014;box-shadow:inset 0 1px 0 #FFFFFF80;
}
.project--text{grid-template-columns:1fr}
.project--spread{grid-template-columns:1fr;gap:var(--s7)}

/* Rozkładówka leży na betonie jak otwarte czasopismo: cień od grzbietu
   w środku i lekkie uniesienie krawędzi. */
.spread{position:relative;max-width:860px}
.spread__open{
  display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;
  position:relative;line-height:0;border-radius:2px;
  filter:drop-shadow(0 18px 34px #4A473C33) drop-shadow(0 3px 8px #4A473C29);
  transition:transform var(--t) var(--ease),filter var(--t) var(--ease);
}
.spread__open img{width:100%;height:auto;border-radius:2px;display:block}
.spread__open::after{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:2px;
  background:linear-gradient(90deg,#00000000 46%,#0000002E 49.6%,#0000002E 50.4%,#00000000 54%);
}
.spread__open:hover,.spread__open:focus-visible{
  transform:translateY(-4px);
  filter:drop-shadow(0 28px 50px #4A473C42) drop-shadow(0 4px 10px #4A473C2E);
}
.spread__zoom{
  position:absolute;right:14px;bottom:14px;width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#22221CD6;color:#F4F3EF;
  opacity:0;transform:scale(.9);transition:opacity var(--t) var(--ease),transform var(--t) var(--ease);
}
.spread__open:hover .spread__zoom,.spread__open:focus-visible .spread__zoom{opacity:1;transform:none}
.spread__cap{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;color:var(--ink-3);
  margin-top:var(--s3);
}
/* na dotyku nie ma hoveru — lupa jest widoczna od razu */
@media (hover:none){
  .spread__zoom{opacity:1;transform:none}
}
/* Kadr powiększenia: obraz w naturalnej szerokości, kadr przewijany
   w obie strony. Na telefonie to jedyny sposób, żeby dwie kolumny
   gazety dało się realnie przeczytać. */
.pv__kadr{
  overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  touch-action:pan-x pan-y pinch-zoom;
  max-height:min(70vh,720px);border-radius:2px;background:#00000010;
  box-shadow:inset 0 0 0 1px #00000014;
}
.pv__kadr:focus-visible{outline:2.5px solid var(--blue);outline-offset:2px}
.pv__img--spread{display:block;width:1391px;max-width:none;height:auto}
/* zdjęcia dostają szerszy arkusz niż tekst: mają być oglądane, nie czytane */
.sheet[data-mode="photo"] .sheet__panel{width:min(1180px,100%)}

/* Miejsce na kadr, którego jeszcze nie ma: ramka zaklejona taśmą,
   z opisem, co ma tu stanąć. Nie udaje zdjęcia. */
.project__shot--pusty{display:flex;flex-direction:column;gap:var(--s3)}
.kadr{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:min(300px,74vw);aspect-ratio:3/2;transform:rotate(1.5deg);
  background:repeating-linear-gradient(135deg,#E6E5DF 0 9px,#DEDDD6 9px 18px);
  border:1px solid #00000017;border-radius:2px;
  box-shadow:0 12px 26px #4A473C24,inset 0 0 0 1px #FFFFFF6B;
}
.kadr__tasma{
  position:absolute;top:-10px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:96px;height:24px;background:#FFFFFF8A;
  border-left:1px dashed #00000012;border-right:1px dashed #00000012;
  box-shadow:0 1px 3px #00000024;
}
.kadr__tresc{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:var(--s4);text-align:center;color:var(--ink-3);
}
.kadr__tresc b{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;
}
.kadr__tresc em{font-style:normal;font-size:13px;line-height:1.5;max-width:30ch}
.kadr__cap{font-family:var(--f-mono);font-size:12px;color:var(--ink-3)}

/* tytuł wprowadzenia, gdy tekst wchodzi w temat własnym zdaniem */
.project__body .project__podtytul{
  font-family:var(--f-display);font-variation-settings:var(--wonk),'opsz' 30;
  font-weight:600;font-size:clamp(18px,1.9vw,21.5px);line-height:1.3;letter-spacing:-.018em;
  color:var(--ink);margin-top:calc(-1 * var(--s2));
}
/* rozkładówka, która otwiera dokument, a nie powiększenie */
.spread__open[data-dok]{cursor:pointer}

/* ── UTWÓR PRZY PUBLIKACJI ───────────────────────────── */
/* Piosenka nie jest papierem, więc nie udaje dokumentu: leży na betonie
   jako ciemna płyta z jednym przyciskiem. Płyta ma dokładnie te proporcje
   co odtwarzacz, który ją zastępuje, więc układ nie drgnie po kliknięciu. */
.utwor-blok{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4);
  margin-top:var(--s7);padding-top:var(--s6);
  border-top:1px solid #00000014;box-shadow:inset 0 1px 0 #FFFFFF80;
}
.utwor-blok__zaproszenie{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-3);
  text-shadow:0 1px 0 #FFFFFF9E, 0 -1px 1px #0000001F;
}
.utwor{display:flex;flex-direction:column;gap:var(--s3);width:min(560px,100%)}
.utwor__plyta,.utwor__ramka{
  display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:3px;
}
.utwor__plyta{
  position:relative;padding:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;
  background:linear-gradient(162deg,#31312A 0%,#1C1C17 58%,#26261F 100%);
  color:#F2F1EC;
  box-shadow:0 16px 34px #4A473C3D, 0 3px 8px #4A473C33, inset 0 1px 0 #FFFFFF17;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
/* ta sama faktura co ściana, tylko przygaszona — płyta należy do tego świata */
.utwor__plyta::before{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:3px;
  background-image:var(--beton);background-size:300px 300px;
  mix-blend-mode:overlay;opacity:.3;
}
.utwor__play{
  position:relative;width:64px;height:64px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:#F2F1EC;color:#1C1C17;box-shadow:0 6px 16px #00000047;
  transition:transform var(--t) var(--ease),background var(--t) var(--ease);
}
.utwor__play .ico{width:26px;height:26px;margin-left:3px}
.utwor__nazwa{
  position:relative;text-align:center;padding:0 var(--s4);
  font-family:var(--f-display);font-variation-settings:var(--wonk),'opsz' 28;
  font-weight:600;font-size:clamp(19px,2.2vw,24px);line-height:1.18;letter-spacing:-.02em;
}
.utwor__marka{
  position:relative;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:#D4D2CB;
}
.utwor__plyta:hover,.utwor__plyta:focus-visible{
  transform:translateY(-4px);
  box-shadow:0 26px 50px #4A473C4F, 0 4px 10px #4A473C3D, inset 0 1px 0 #FFFFFF21;
}
.utwor__plyta:hover .utwor__play,.utwor__plyta:focus-visible .utwor__play{
  transform:scale(1.07);background:#FFFFFF;
}
.utwor__ramka{box-shadow:0 16px 34px #4A473C3D, 0 3px 8px #4A473C33}
.utwor__cap{font-size:13.5px;line-height:1.55;color:var(--ink-2);max-width:52ch}
.utwor-blok__zewn{display:inline-flex;align-items:center;gap:8px}
.utwor-blok__zewn .ico{width:16px;height:16px}

/* ── 11. SESJE ─────────────────────────────────────────────────────── */
.sessions{display:flex;flex-direction:column;gap:var(--s9)}
.session{scroll-margin-top:100px}
.session__head{display:flex;flex-direction:column;gap:var(--s2);max-width:56ch}
.session__title{
  font-family:var(--f-display);font-variation-settings:var(--wonk),'opsz' 48;
  font-weight:600;font-size:clamp(24px,3.2vw,38px);line-height:1.1;letter-spacing:-.026em;
}
.session__desc{color:var(--ink-2);font-size:16.5px}

/* ── 12. CREATIVE STORE ────────────────────────────────────────────── */
.room--store{max-width:var(--maxw)}

/* ściana jest jasnym betonem — karteczki są jedynym neonem */
.wall{
  position:relative;min-height:min(62vh,540px);overflow:hidden;
  border-radius:var(--r-lg);
  background:
    radial-gradient(90% 70% at 50% 0%,#E4E3DF,transparent 66%),
    linear-gradient(180deg,#DBDAD5,#D2D1CC);
  box-shadow:inset 0 2px 0 #FFFFFF8C, inset 0 -26px 50px #A9A79C33;
  touch-action:pan-y;
}
.wall::before{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background-image:var(--plyta),var(--beton);
  background-size:cover,280px 280px;
  background-position:center,0 0;
  mix-blend-mode:soft-light;opacity:.85;
}
.wall__empty{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:var(--s5);
  font-family:var(--f-mono);font-size:13px;color:var(--ink-3);letter-spacing:.04em;
}

/* karteczka — papier, nie świecący kwadrat */
.note{
  position:absolute;width:178px;height:178px;
  perspective:840px;cursor:grab;touch-action:none;user-select:none;
  transition:filter var(--t) var(--ease);
}
.note.is-drag{cursor:grabbing;filter:drop-shadow(0 20px 26px #4A473C52)}
/* Karteczka: włókno papieru, pasek kleju u góry, światło z lewej
   i cień, który jest ciasny przy górnej krawędzi, a rozlewa się
   przy dolnej — bo notes trzyma się ściany górą. */
.note__paper{
  position:absolute;left:0;right:0;bottom:0;height:178px;
  border-radius:1px;
  background:
    linear-gradient(158deg, rgba(255,255,255,.36) 0%, rgba(255,255,255,0) 34%,
                    rgba(0,0,0,.03) 72%, rgba(0,0,0,.07) 100%),
    var(--nc);
  box-shadow:
    0 1px 1px rgba(74,71,60,.22),
    0 5px 9px -4px rgba(74,71,60,.26),
    0 15px 20px -11px rgba(74,71,60,.30);
  display:flex;align-items:flex-start;
  clip-path:inset(0 0 0 0);
  transition:clip-path var(--t-slow) var(--ease),box-shadow var(--t) var(--ease);
}
.note__paper::before,
.note__face--front::before,
.note__face--back::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:var(--papier);background-size:170px 170px;
  mix-blend-mode:soft-light;opacity:.7;
}
/* pasek kleju: papier jest tam odrobinę ciemniejszy i mniej chłonny */
.note__paper::after{
  content:'';position:absolute;left:0;right:0;top:0;height:24%;
  pointer-events:none;z-index:0;
  background:linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.015) 60%, rgba(0,0,0,0));
}
/* podwinięty dolny róg */
.note::after{
  content:'';position:absolute;right:0;bottom:0;width:22px;height:22px;
  z-index:3;pointer-events:none;
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--nc) 58%, #000) 0%,
    color-mix(in srgb, var(--nc) 86%, #fff) 100%);
  clip-path:polygon(100% 0, 100% 100%, 0 100%);
  box-shadow:-2px -2px 5px rgba(74,71,60,.26);
}
.note.is-drag::after{opacity:.85}
.note.is-folded .note__paper{clip-path:inset(50% 0 0 0)}
.note__msg{
  position:relative;z-index:1;
  padding:17px 16px;font-family:var(--f-marker);font-size:22px;line-height:1.26;
  color:var(--mkc);word-break:break-word;overflow:hidden;max-height:100%;width:100%;
}
.note__flap{
  position:absolute;left:0;right:0;bottom:89px;height:89px;
  transform-origin:bottom center;transform-style:preserve-3d;
  transition:transform var(--t-slow) var(--ease);
}
.note.is-folded .note__flap{transform:rotateX(-180deg)}
.note__face{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden}
.note__face--front{
  background:
    linear-gradient(158deg, rgba(255,255,255,.36) 0%, rgba(255,255,255,0) 60%),
    var(--nc);
  border-radius:1px 1px 0 0;
}
.note__face--front .note__msg{padding:17px 16px;height:178px}
/* spód kartki: bez nadruku, z cieniem zagięcia przy krawędzi */
.note__face--back{
  transform:rotateX(180deg);border-radius:1px 1px 0 0;
  background:
    linear-gradient(0deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,.02) 18%, rgba(0,0,0,0) 46%),
    linear-gradient(200deg, rgba(0,0,0,.10), rgba(255,255,255,.16) 60%),
    color-mix(in srgb, var(--nc) 92%, #fff);
  display:grid;place-items:center;box-shadow:0 -2px 10px #0000002E;
}
.note__face--back span{
  position:relative;z-index:1;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:#1A1A14A8;
}
.note__tools{
  position:absolute;left:0;right:0;top:-42px;display:flex;gap:6px;justify-content:flex-end;
  opacity:0;pointer-events:none;
  transition:opacity var(--t) var(--ease),top var(--t-slow) var(--ease);
}
.note.is-folded .note__tools{top:calc(50% - 46px)}
.note:hover .note__tools,.note:focus-within .note__tools{opacity:1;pointer-events:auto}
.note__tool{
  width:36px;height:36px;display:grid;place-items:center;border-radius:var(--r-sm);
  background:#FFFFFFE6;border:1px solid var(--line);color:var(--ink-2);
  box-shadow:0 2px 6px #4A473C29;
  transition:color var(--t) var(--ease),border-color var(--t) var(--ease);
}
.note__tool:hover{color:var(--blue);border-color:var(--blue)}
.note__tool--del:hover{color:var(--pink-ink);border-color:var(--pink)}
.note__tool .ico{width:16px;height:16px}

/* mały ślad redakcyjny */
.trace{
  font-family:var(--f-display);font-variation-settings:var(--wonk),'opsz' 14;
  font-style:italic;font-size:19px;color:var(--ink-3);
  margin:var(--s5) 0 var(--s8);
}

/* warsztat pod ścianą */
.compose{
  display:grid;grid-template-columns:auto 1fr;gap:var(--s7);align-items:start;
  padding-top:var(--s6);border-top:1px solid var(--line);
}
.compose__label{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:var(--s4);
}
/* bloczek: bierze się konkretną kartkę, nie abstrakcyjną próbkę */
.pad-stack{position:relative;width:150px;height:172px}
.sheet-pick{
  position:absolute;width:104px;height:104px;border-radius:2px;
  background:var(--nc);border:0;padding:0;
  left:calc(var(--i) * 13px);top:calc(var(--i) * 15px);
  transform:rotate(calc((var(--i) - 1.5) * 3.4deg));
  box-shadow:0 5px 12px #4A473C33,0 1px 2px #4A473C2E;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease);
  touch-action:manipulation;
}
.sheet-pick:hover{transform:rotate(calc((var(--i) - 1.5) * 3.4deg)) translateY(-7px)}
.sheet-pick.is-on{
  transform:rotate(calc((var(--i) - 1.5) * 3.4deg)) translateY(-13px) scale(1.06);
  box-shadow:0 14px 26px #4A473C45,0 0 0 2px var(--ink);z-index:5;
}
.compose__sheet{display:flex;flex-wrap:wrap;gap:var(--s5);align-items:flex-start}

/* kartka, na której się pisze — proporcje papieru, nie paska */
.writing{
  position:relative;flex:0 1 460px;min-width:min(100%,280px);max-width:460px;
  background:var(--nc);border-radius:2px;
  box-shadow:0 10px 24px #4A473C33,0 1px 3px #4A473C2E;
  transform:rotate(-.8deg);
}
.writing__field{
  display:block;width:100%;min-height:150px;
  padding:var(--s5) var(--s5) var(--s6);
  font-family:var(--f-marker);font-size:27px;line-height:1.34;
  color:var(--mkc);outline:none;word-break:break-word;white-space:pre-wrap;
}
.writing__field:focus{outline:none}
.writing__field.is-empty::before{content:attr(data-placeholder);color:#00000052;pointer-events:none}
.writing:focus-within{box-shadow:0 14px 30px #4A473C40,0 0 0 2.5px var(--blue)}
.writing__count{
  position:absolute;right:14px;bottom:10px;
  font-family:var(--f-mono);font-size:11px;color:#0000006B;
}
.writing__count.is-full{color:#8C0B22;font-weight:600}
.writing.is-faint::after{
  content:'Ten marker będzie słabo widoczny';
  position:absolute;left:14px;bottom:10px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;color:#00000075;
}

/* markery leżą obok jako przedmioty */
.pens{display:flex;gap:var(--s3);flex-wrap:wrap}
.pen{
  width:44px;height:112px;position:relative;border:0;padding:0;
  background:linear-gradient(180deg,#3A362E 0 22%,var(--mk) 22% 100%) no-repeat center bottom / 26px 96px;
  transition:transform var(--t) var(--ease),filter var(--t) var(--ease);
  touch-action:manipulation;
}
.pen::before{
  content:'';position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:9px;height:14px;background:var(--mk);clip-path:polygon(50% 0,100% 100%,0 100%);
}
.pen:hover{transform:translateY(-6px)}
.pen.is-on{transform:translateY(-12px);filter:drop-shadow(0 8px 12px #4A473C59)}
.pen.is-on::after{
  content:'';position:absolute;left:50%;bottom:-13px;transform:translateX(-50%);
  width:7px;height:7px;border-radius:50%;background:var(--ink);
}
.compose__ways{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s2)}
.store__aside{margin-top:var(--s7)}

/* ── 13. FUNDACJA ──────────────────────────────────────────────────── */
.found__head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s6);margin-bottom:var(--s7)}
.found__logo{width:min(190px,44vw);height:auto;flex:none}
.found__lead{max-width:66ch;display:flex;flex-direction:column;gap:var(--s4)}
.found__claim{
  font-family:var(--f-display);font-variation-settings:var(--wonk),'opsz' 60;
  font-weight:600;font-size:clamp(26px,3.8vw,44px);line-height:1.06;letter-spacing:-.028em;
  color:var(--f-green-ink);
}
.found__lead p{color:var(--ink-2)}
.found__questions{
  border-left:2px solid var(--f-green);padding-left:var(--s4);
  font-family:var(--f-display);font-variation-settings:var(--wonk),'opsz' 14;
  font-style:italic;font-size:18px;line-height:1.55;color:var(--ink) !important;
}
.found__strong{
  font-family:var(--f-display);font-variation-settings:var(--wonk),'opsz' 36;
  font-weight:600;font-size:clamp(20px,2.4vw,28px);line-height:1.2;
  color:var(--ink) !important;letter-spacing:-.02em;
}
.found__lead .btn{align-self:flex-start;margin-top:var(--s3)}

.found__cols{
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s5);
  margin-top:var(--s9);padding-top:var(--s6);border-top:1px solid var(--line);
}
.found__card{
  display:flex;flex-direction:column;gap:var(--s3);padding:var(--s6) var(--s5);
  background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r);
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease);
}
.found__card:hover{transform:translateY(-4px);box-shadow:0 16px 34px #4A473C26;border-color:#12602F45}
.found__card h2{
  font-family:var(--f-display);font-variation-settings:var(--wonk),'opsz' 36;
  font-weight:600;font-size:clamp(21px,2.4vw,28px);line-height:1.14;letter-spacing:-.024em;
  color:var(--f-green-ink);
}
.found__sub{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);
}
.found__card p{font-size:16px;line-height:1.65;color:var(--ink-2)}
.found__card .link-arrow{margin-top:auto}

/* ── 14. YOUTUBE ───────────────────────────────────────────────────── */
.yt{display:grid;grid-template-columns:1fr auto;gap:var(--s8);align-items:center}
.yt__shot img{
  width:100%;border-radius:var(--r);
  box-shadow:0 24px 50px #4A473C3D;
}
.yt__side{display:flex;flex-direction:column;gap:var(--s5);align-items:center}
.qr{background:#fff;padding:15px;border-radius:var(--r);box-shadow:0 16px 36px #4A473C33}
.qr img{width:min(220px,54vw);height:auto}

/* ── 15. STOPKA ────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line-soft);margin-top:var(--s9)}
.foot__in{
  max-width:var(--maxw);margin:0 auto;padding:var(--s7) var(--pad);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s6);
}
.foot__brand{
  font-family:var(--f-display);font-variation-settings:var(--wonk),'opsz' 24;
  font-weight:600;font-size:21px;letter-spacing:-.018em;min-height:44px;display:flex;align-items:center;
}
.foot__brand b{font-weight:inherit;color:var(--ink-3)}
.foot__cols{display:flex;flex-wrap:wrap;gap:var(--s4);font-size:15px;color:var(--ink-2)}
.foot__cols a{
  transition:color var(--t) var(--ease);
  min-height:44px;min-width:44px;padding-inline:2px;
  display:inline-flex;align-items:center;justify-content:center;
}
.foot__cols a:hover{color:var(--pink-ink)}
.foot__mail{margin-left:auto;font-family:var(--f-mono);font-size:13px;color:var(--ink-2)}
.foot__mail a{min-height:44px;display:inline-flex;align-items:center}
.foot__mail a:hover{color:var(--blue)}

/* ── 16. DOLNA NAWIGACJA ───────────────────────────────────────────── */
.tabbar{display:none}

/* ── 17. ARKUSZ / TOAST ────────────────────────────────────────────── */
.sheet{position:fixed;inset:0;z-index:var(--z-sheet)}
.sheet[hidden]{display:none}
.sheet__scrim{position:absolute;inset:0;background:#22221CA6;backdrop-filter:blur(4px);animation:fade var(--t) var(--ease)}
.sheet__panel{
  position:absolute;right:0;top:0;bottom:0;width:min(780px,100%);
  background:var(--paper-2);border-left:1px solid var(--line);
  display:flex;flex-direction:column;box-shadow:-30px 0 80px #22221C40;
  animation:slideR var(--t-slow) var(--ease);
}
.sheet__grab{display:none}
.sheet__x{
  position:absolute;top:16px;right:16px;z-index:2;
  width:44px;height:44px;display:grid;place-items:center;border-radius:99px;
  background:#E4E3DFCC;border:1px solid var(--line);color:var(--ink-2);
  transition:all var(--t) var(--ease);
}
.sheet__x:hover{color:#fff;background:var(--pink);border-color:var(--pink)}
.sheet__scroll{overflow-y:auto;overscroll-behavior:contain;padding:var(--s8) clamp(24px,4.5vw,64px) var(--s9)}
.sheet__scroll:focus{outline:none}
@keyframes fade{from{opacity:0}}
@keyframes slideR{from{transform:translateX(26px);opacity:0}}
@keyframes slideUp{from{transform:translateY(28px);opacity:0}}

.art__title{
  font-family:var(--f-display);font-variation-settings:var(--wonk),'opsz' 72;
  font-weight:600;line-height:1.06;letter-spacing:-.03em;
  font-size:clamp(28px,3.8vw,46px);margin-bottom:var(--s5);
}
.art__pull{
  font-family:var(--f-display);font-variation-settings:var(--wonk),'opsz' 18;
  font-style:italic;font-weight:400;font-size:clamp(19px,2vw,25px);line-height:1.44;
  color:var(--pink-ink);border-left:3px solid var(--pink);padding-left:var(--s5);
  margin-bottom:var(--s7);
}
.art__body p{margin-bottom:var(--s5);max-width:66ch;font-size:18px;line-height:1.78}
.art__body p:first-child::first-letter{
  font-family:var(--f-display);font-variation-settings:var(--wonk),'opsz' 96;
  font-weight:600;float:left;font-size:64px;line-height:.86;padding:4px 12px 0 0;
}
.art__sign{
  margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line-soft);
  font-family:var(--f-mono);font-size:12.5px;letter-spacing:.1em;color:var(--ink-3);
}

.pv__img{width:100%;max-height:58vh;object-fit:contain;background:#E4E3DF;margin-bottom:var(--s5);border-radius:var(--r-sm)}
.pv__blank{width:100%;aspect-ratio:3/2;background:linear-gradient(160deg,#E4E3DF,#D5D4CF);border-radius:var(--r-sm);margin-bottom:var(--s5)}
.pv__title{
  font-family:var(--f-display);font-variation-settings:var(--wonk),'opsz' 40;
  font-weight:600;font-size:clamp(23px,2.6vw,33px);margin-bottom:var(--s3);letter-spacing:-.024em;
}
.pv__desc{color:var(--ink-2);max-width:60ch}

.send__note{margin:0 auto var(--s6);width:178px;height:178px;position:relative;padding:var(--s6);box-sizing:content-box}
.send__box{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s3)}
.send__link{
  flex:1;min-width:min(100%,240px);padding:14px var(--s4);
  background:#E7E6E2;border:1px solid var(--line);border-radius:var(--r-sm);
  font-family:var(--f-mono);font-size:12px;color:var(--ink-2);
  word-break:break-all;line-height:1.65;max-height:112px;overflow:auto;
}
.send__hint{font-family:var(--f-mono);font-size:12px;color:var(--ink-3);line-height:1.75;margin-bottom:var(--s5)}

.menu-list{display:flex;flex-direction:column;gap:var(--s2)}
.menu-item{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  min-height:60px;padding:14px var(--s4);
  border:1px solid var(--line-soft);border-radius:var(--r);background:#FFFFFF52;
  font-family:var(--f-display);font-variation-settings:var(--wonk),'opsz' 24;
  font-weight:600;font-size:20px;letter-spacing:-.018em;
  transition:all var(--t) var(--ease);
}
.menu-item:hover,.menu-item:active{border-color:var(--blue);color:var(--blue);background:#FFFFFFA6}
.menu-item .ico{width:19px;height:19px;color:var(--ink-3)}
.menu-item--cta{background:var(--ink);color:var(--paper-2);border-color:var(--ink)}
.menu-item--cta .ico{color:inherit}

.toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,150%);
  z-index:var(--z-toast);max-width:min(92vw,470px);
  padding:15px 22px;background:var(--ink);color:var(--paper-2);border-radius:var(--r);
  font-size:14.5px;font-weight:500;box-shadow:0 16px 40px #22221C4D;
  transition:transform var(--t-slow) var(--ease);
}
.toast.is-on{transform:translate(-50%,0)}

/* ── 18. RESPONSYWNOŚĆ ─────────────────────────────────────────────── */
@media (max-width:1100px){
  .appbar__nav{gap:var(--s4);font-size:15.5px}
  .cover{grid-template-columns:1fr;gap:var(--s7)}
  .cover__photo{justify-content:flex-start}
  .project{grid-template-columns:1fr;gap:var(--s6)}
  .yt{grid-template-columns:1fr;gap:var(--s6)}
  .yt__side{align-items:flex-start}
  .clip,.clip:nth-child(n){grid-column:span 12}
  .clip:nth-child(5n+4),.clip:nth-child(5n+5){grid-column:span 6}
}

@media (max-width:900px){
  .appbar__nav,.appbar__cta{display:none}
  .appbar{justify-content:space-between;height:calc(62px + env(safe-area-inset-top))}
  .room{padding-top:calc(96px + env(safe-area-inset-top))}

  /* dolny pasek dostaje ten sam materiał co górny */
  .tabbar{
    display:grid;grid-template-columns:repeat(5,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:var(--z-tabbar);
    isolation:isolate;
    background:linear-gradient(0deg,#D4D4CF 0%,#D1D1CC 62%,#CFCFCAF7 88%,#CECEC9D9 100%);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .tabbar::before{
    content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
    background-image:var(--beton);background-size:300px 300px;
    mix-blend-mode:soft-light;opacity:.75;
  }
  .tabbar::after{
    content:'';position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
    background:linear-gradient(90deg,#FFFFFF00,#FFFFFF99 14%,#FFFFFF99 86%,#FFFFFF00);
  }
  .tab span{text-shadow:0 1px 0 #FFFFFFAD, 0 -1px 1px #00000021}
  .tab{
    min-height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    font-size:10.5px;font-weight:600;color:var(--ink-3);position:relative;
    touch-action:manipulation;
    transition:color var(--t) var(--ease),transform var(--t-fast) var(--ease);
  }
  .tab .ico{width:22px;height:22px}
  .tab:active{transform:scale(.92);color:var(--blue)}
  .tab.is-here{color:var(--ink)}
  .tab.is-here::before{
    content:'';position:absolute;top:0;left:26%;right:26%;height:2.5px;
    background:var(--blue);border-radius:0 0 3px 3px;
  }
  .tab--mid .tab__pop{
    width:50px;height:50px;display:grid;place-items:center;margin-top:-22px;border-radius:16px;
    background:var(--n-yellow);color:#22221C;
    box-shadow:0 6px 18px #4A473C40,0 0 0 4px #D2D2CDE8;
    transition:background var(--t) var(--ease);
  }
  .tab--mid.is-here .tab__pop{background:var(--n-pink);color:#fff}
  .tab--mid.is-here::before{background:var(--pink)}

  body{padding-bottom:calc(60px + env(safe-area-inset-bottom))}

  .sheet__panel{
    top:auto;right:0;left:0;bottom:0;width:100%;height:min(92dvh,92vh);
    border-left:0;border-top:1px solid var(--line);border-radius:22px 22px 0 0;
    animation:slideUp var(--t-slow) var(--ease);
  }
  .sheet__grab{display:block;width:46px;height:5px;border-radius:99px;background:var(--line);margin:10px auto 0;flex:none}
  .sheet__x{top:10px;right:10px}
  .sheet__scroll{padding:var(--s5) var(--s5) calc(var(--s8) + env(safe-area-inset-bottom))}
  .toast{bottom:calc(78px + env(safe-area-inset-bottom))}

  .compose{grid-template-columns:1fr;gap:var(--s6)}
  .desk-docs{gap:var(--s5)}
  .found__cols{grid-template-columns:1fr}
  .note__tool{width:44px;height:44px}
  .note__tools{top:-52px}
  .note.is-folded .note__tools{top:calc(50% - 54px)}
}

@media (max-width:640px){
  body{font-size:16.5px}
  .room{padding-bottom:var(--s8)}
  .clip,.clip:nth-child(n){grid-column:span 12}
  .table .print{width:158px}
  /* Na wąskim ekranie dokumenty archiwalne czyta się w pionie, więc
     aneks schodzi pod świadectwo, a klamra zmienia się w zagięcie
     prowadzące od dokumentu wyżej. */
  .archive{flex-direction:column;align-items:flex-start}
  .archive .doc--ciag{margin-left:var(--s6);padding-top:var(--s4)}
  .archive .doc--ciag::before{
    left:calc(-1 * var(--s6) + 4px);top:-26px;
    width:calc(var(--s6) - 14px);height:54px;background:none;box-shadow:none;
    border-left:1px solid #0000002E;border-bottom:1px solid #0000002E;
    border-bottom-left-radius:9px;
  }
  .doc__paper{width:180px}
  .doc--main .doc__paper{width:min(300px,84vw)}
  .note{width:152px;height:152px}
  .note__paper{height:152px}
  .note__flap{height:76px;bottom:76px}
  .note__face--front .note__msg{height:152px}
  .note__msg{font-size:19px;padding:14px 13px}
  .wall{min-height:440px}
  .pad-stack{width:132px;height:150px}
  .sheet-pick{width:92px;height:92px}
  .pen{width:44px;height:96px;background-size:24px 82px}
  .writing textarea{font-size:24px;min-height:130px}
  .compose__ways .btn{width:100%}
  .art__body p:first-child::first-letter{font-size:52px}
  .foot__mail{margin-left:0}
}

@media (max-height:520px) and (orientation:landscape){
  .room{min-height:auto}
  .wall{min-height:340px}
}

/* ── 19. RUCH / DRUK ───────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}
@media print{
  .appbar,.tabbar,.compose,.wall,.sheet,.toast{display:none !important}
  body{background:#fff;color:#000}
  body::before,body::after,html::after,
  .room--papiery::before,.room--papiery::after{display:none}
  .room[hidden]{display:block !important}
}


/* ── 20. ZNAK AUTORSKI ─────────────────────────────────────────────── */
/* Motyl jest śladem ręki, nie logotypem: statyczny, drugi plan,
   ale na tyle duży, żeby wejść do pamięci. Wraca w finale.

   Nie jest przedmiotem położonym ani przypiętym do ściany — jest na
   niej narysowany. Dlatego zero cienia i zero papieru pod spodem, a
   kreska wsiąka w podłoże przez multiply: tam, gdzie beton jest
   ciemniejszy, rysunek też ciemnieje, tak jak tusz na chłonnej
   powierzchni. */
.mark{
  display:block;pointer-events:none;z-index:2;
  mix-blend-mode:multiply;
  filter:saturate(.88) contrast(.94);
}
.butterfly{display:block;width:100%;height:100%;overflow:visible}
.mark--found{
  position:absolute;right:clamp(10px,4vw,64px);bottom:clamp(16px,5vw,72px);
  width:clamp(104px,12vw,164px);aspect-ratio:210/200;opacity:.82;
}
.mark--final{
  position:absolute;right:clamp(12px,6vw,80px);bottom:clamp(16px,6vw,72px);
  width:clamp(132px,17vw,224px);aspect-ratio:210/200;opacity:.86;
}

/* ── 21. GALERIA SESJI ─────────────────────────────────────────────── */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--s3)}
.gallery img{
  width:100%;border-radius:2px;background:#DCDBD7;
  box-shadow:0 6px 16px #4A473C26;
}
.session__more{margin-top:var(--s4)}

/* ── 22. CZYTNIK DOKUMENTU ─────────────────────────────────────────── */
.viewer{
  width:100%;height:min(70vh,780px);margin-bottom:var(--s4);
  border:1px solid var(--line);border-radius:var(--r-sm);
  overflow:hidden;background:#DCDBD7;
}
.viewer iframe{width:100%;height:100%;border:0;display:block}

/* ── 23. KARTECZKA W LOCIE ─────────────────────────────────────────── */
.note--ghost{
  position:fixed;z-index:800;pointer-events:none;
  perspective:840px;will-change:transform,opacity;
}

/* ── 24. WYCINEK JAKO ZŁOŻONA KARTKA ───────────────────────────────── */
/* W stanie zamkniętym liczy się charakter obiektu: pogięty papier
   z mocnym tytułem. Pełna czytelność przychodzi po otwarciu. */
.clip{
  background:
    linear-gradient(101deg,transparent 0 38%,#00000007 38.3% 38.9%,transparent 39.2%),
    var(--paper);
}
.clip__crease{
  position:absolute;left:0;right:0;top:52%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,#00000016 14%,#00000016 86%,transparent);
  box-shadow:0 1px 0 #FFFFFFB3;
}
.clip::before{
  content:'';position:absolute;right:0;top:0;width:26px;height:26px;
  background:linear-gradient(225deg,var(--wall) 50%,transparent 50%);
  box-shadow:-1px 1px 2px #00000012;
}

@media (max-width:640px){
  .mark--found,.mark--final{position:static;margin:var(--s6) 0 0 auto;width:clamp(110px,32vw,150px)}
  .gallery{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .viewer{height:min(62vh,560px)}
}