/* =========================================================================
   OLA WOJCIECHOWSKA
   Paleta nie jest wymyślona — wyciągnięta z sesji zdjęciowej:
     --paper  #EDE6DD  najjaśniejszy ton z ciepłych kadrów (len, kolumnada)
     --ink    #14120F  czerń z kadrów czarno-białych
     --camel  #8C6A4C  marynarka i trencz
   Dzięki temu zdjęcia i strona są z jednego materiału.
   ========================================================================= */

:root {
  /* powierzchnie */
  --paper:      #EDE6DD;
  --paper-2:    #E4DACE;
  --paper-3:    #D9CCBC;
  --chalk:      #F6F2ED;

  /* atrament */
  --ink:        #14120F;
  --ink-2:      #3A342D;
  --muted:      #736A5F;
  --muted-2:    #9C9086;

  /* ciepły akcent */
  --camel:      #8C6A4C;
  --camel-2:    #A8845F;
  --sand:       #C9B49B;

  /* linie */
  --line:       rgba(20, 18, 15, .16);
  --line-2:     rgba(20, 18, 15, .09);
  --line-dark:  rgba(237, 230, 221, .22);
  --line-dark-2:rgba(237, 230, 221, .11);

  /* typografia */
  --display: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --hand:    "Caveat", "Segoe Script", cursive;
  --serif:   "EB Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* rytm */
  --gutter:  clamp(20px, 5vw, 72px);
  --maxw:    1440px;
  --maxw-text: 62ch;
  --section-y: clamp(78px, 11vw, 168px);

  /* ziarno: szum generowany przez przeglądarkę, zero plików */
  --grain-src: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.62'/%3E%3C/svg%3E");

  --ease:     cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; }

::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--camel); outline-offset: 3px; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 780px; }
.section { padding-block: var(--section-y); position: relative; }
.section-tight { padding-block: clamp(52px, 7vw, 104px); }

/* =========================================================================
   TYPOGRAFIA
   Wielkie, cienkie wersaliki jak w galerii; treść czytana szeryfem.
   ========================================================================= */
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
figure { margin: 0; }

.display {
  font-family: var(--display);
  font-weight: 200;
  text-transform: uppercase;
  line-height: .92;
  letter-spacing: -.012em;
  font-size: clamp(2.6rem, 8.4vw, 8.5rem);
}
.d1 {
  font-family: var(--display); font-weight: 200; text-transform: uppercase;
  font-size: clamp(2.1rem, 6.2vw, 5.6rem); line-height: .98; letter-spacing: -.01em;
}
.d2 {
  font-family: var(--display); font-weight: 250; text-transform: uppercase;
  font-size: clamp(1.5rem, 3.2vw, 2.7rem); line-height: 1.06; letter-spacing: -.004em;
}
.d3 {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(.94rem, 1.35vw, 1.08rem); line-height: 1.3; letter-spacing: .06em;
}

/* szeryfowy nagłówek wewnątrz eseju — miękki kontrapunkt dla wersalików */
.serif-h {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: clamp(1.5rem, 2.8vw, 2.3rem); line-height: 1.18; letter-spacing: -.01em;
}

.lede {
  font-size: clamp(1.16rem, 1.75vw, 1.5rem);
  line-height: 1.5; color: var(--ink-2); max-width: 58ch; text-wrap: pretty;
}
p { margin: 0; text-wrap: pretty; }
.body-copy > p + p { margin-top: 1.05em; }
.body-copy { max-width: var(--maxw-text); }

/* mała, rozstrzelona etykieta — spina cały layout */
.meta {
  font-family: var(--sans); font-weight: 400;
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); line-height: 1.5;
}
.meta-ink { color: var(--ink); }
.small { font-size: .92rem; line-height: 1.58; }
.muted { color: var(--muted); }

/* numer pozycji, jak w katalogu wystawy */
.num {
  font-family: var(--sans); font-weight: 300;
  font-size: .72rem; letter-spacing: .14em; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* inicjał otwierający esej */
.opener::first-letter {
  float: left; font-size: 4.6em; line-height: .78; padding: .06em .12em 0 0;
  font-weight: 400; color: var(--camel);
}

hr.rule { border: 0; height: 1px; background: var(--line); margin: 0; }

/* =========================================================================
   NAGŁÓWEK — pozycje widoczne wprost. Wcześniej wszystko chowało się pod
   słowem „Menu" i nie było wiadomo, że stronę można w ogóle zwiedzać.
   ========================================================================= */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 95;
  background: var(--paper);
  border-bottom: 1px solid var(--line-2);
}
.header-in {
  height: 62px; display: flex; align-items: center; gap: clamp(16px, 3vw, 48px);
}
.wordmark {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: .76rem; letter-spacing: .2em; white-space: nowrap;
  display: inline-flex; align-items: center; min-height: 44px; flex: none;
}
.nav { display: flex; align-items: center; gap: clamp(8px, 1.6vw, 26px); margin-left: auto; }
.nav a {
  font-family: var(--sans); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); display: inline-flex; align-items: center; min-height: 44px;
  transition: color .25s var(--ease); position: relative; white-space: nowrap;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 12px; height: 1px; background: var(--camel);
}
.header-right { display: flex; align-items: center; gap: 12px; flex: none; }
.header-link {
  font-family: var(--sans); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); display: inline-flex; align-items: center; min-height: 44px;
  transition: color .25s var(--ease); white-space: nowrap;
  padding-left: clamp(8px, 1.6vw, 22px); border-left: 1px solid var(--line-2);
}
.header-link:hover { color: var(--ink); }

.menu-btn {
  display: none; cursor: pointer;
  width: 44px; height: 44px; align-items: center; justify-content: center;
}
.menu-btn .bars { display: inline-flex; flex-direction: column; gap: 4px; width: 18px; }
.menu-btn .bars i { display: block; height: 1px; background: var(--ink); transition: transform .3s var(--ease-out), opacity .2s; }
body.menu-open .menu-btn .bars i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
body.menu-open .menu-btn .bars i:nth-child(2) { opacity: 0; }
body.menu-open .menu-btn .bars i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
  .header-right { margin-left: auto; }
  .header-link { display: none; }
}

/* =========================================================================
   MEGA MENU — pełny ekran, pozycje odsłaniają zdjęcie (jak u Nadii Lee Cohen)
   ========================================================================= */
.mega {
  position: fixed; inset: 0; z-index: 90;
  background: var(--paper);
  display: grid; grid-template-rows: 64px 1fr auto;
  opacity: 0; visibility: hidden;
  transition: opacity .38s var(--ease), visibility .38s;
}
body.menu-open .mega { opacity: 1; visibility: visible; }
body.menu-open { overflow: hidden; }

.mega-body { display: flex; align-items: center; padding-inline: var(--gutter); overflow-y: auto; }
.mega-list { list-style: none; margin: 0; padding: 0; width: 100%; }
.mega-list li { border-top: 1px solid var(--line-2); }
.mega-list li:last-child { border-bottom: 1px solid var(--line-2); }
.mega-list a {
  display: flex; align-items: baseline; gap: clamp(14px, 3vw, 40px);
  padding: clamp(11px, 1.7vw, 20px) 0;
  font-family: var(--display); font-weight: 200; text-transform: uppercase;
  font-size: clamp(1.6rem, 5.2vw, 4.2rem); line-height: 1.04; letter-spacing: -.01em;
  transition: color .3s var(--ease), transform .5s var(--ease-out);
  transform: translateX(0);
}
.mega-list a .num { flex: none; align-self: center; }
.mega-list a:hover { color: var(--camel); transform: translateX(clamp(6px, 1.2vw, 18px)); }
.mega-list a[aria-current="page"] { color: var(--camel); }


.mega-foot {
  display: flex; flex-wrap: wrap; gap: 10px clamp(18px, 3vw, 40px);
  padding: 22px var(--gutter) 26px;
  border-top: 1px solid var(--line-2);
}
.mega-foot a {
  transition: color .25s var(--ease);
  display: inline-flex; align-items: center; min-height: 44px;
}
.mega-foot a:hover { color: var(--camel); }

/* =========================================================================
   „WELCOME"
   Ten sam krój co nazwisko — wersaliki z rozstrzeleniem. Napis nadal
   odsłania się od lewej, jakby był pisany, tylko już bez odręcznego kroju.
   ========================================================================= */
.welcome {
  /* ten sam krój i ten sam rozmiar co nazwisko, w czerni */
  font-family: var(--display); font-weight: 250;
  font-size: clamp(2.15rem, 4.3vw, 3.7rem); letter-spacing: .06em;
  text-transform: uppercase; line-height: 1.02;
  color: var(--ink);
  position: relative; display: inline-block;
  margin: 0 0 clamp(18px, 2.4vw, 30px);
}
.welcome > span { display: inline-block; padding-right: .1em; }
.js .welcome > span { clip-path: inset(-40% 100% -40% -4%); }
.js .welcome .nib {
  position: absolute; top: 52%; left: 0; width: 7px; height: 7px;
  border-radius: 50%; background: var(--camel); opacity: 0;
  transform: translate(-50%, -50%);
}
.js .welcome.written > span { animation: writeIn 1.5s cubic-bezier(.42,.02,.32,1) .4s forwards; }
.js .welcome.written .nib   { animation: nibRun  1.5s cubic-bezier(.42,.02,.32,1) .4s forwards; }
@keyframes writeIn { to { clip-path: inset(-40% -12% -40% -4%); } }
@keyframes nibRun {
  0%   { left: 0;    opacity: 0; }
  8%   { opacity: .9; }
  86%  { opacity: .9; }
  100% { left: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .js .welcome > span { clip-path: none; }
  .js .welcome .nib { display: none; }
}

/* rysunek protokołu — bez ramki, wprost na papierze */
.figure { margin: 0; }
.figure canvas { width: 100%; height: clamp(240px, 27vw, 330px); display: block; }
.figure figcaption { margin-top: 1.1rem; max-width: 62ch; }

/* Godzina w Dubaju — dwukropek mruga raz na sekundę i to jedyny ruch. */
.clock { display: flex; align-items: baseline; gap: .9em; margin-top: clamp(22px, 2.8vw, 34px); flex-wrap: wrap; }
.clock-time { font-variant-numeric: tabular-nums; color: var(--ink); letter-spacing: .12em; }
.clock-time i { font-style: normal; animation: tick 2s steps(1) infinite; }
.clock-zone { color: var(--muted-2); }
@keyframes tick { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .18; } }
@media (prefers-reduced-motion: reduce) { .clock-time i { animation: none; } }

/* =========================================================================
   LINIA MOMENTU — druga animacja strony głównej.
   Punkt przebiega włos linii, zwalnia i zatrzymuje się. Nic więcej.
   To ta sama myśl co w protokole, sprowadzona do jednego gestu.
   ========================================================================= */
.moment { position: relative; height: 1px; background: var(--line-2); margin-block: clamp(8px, 1.4vw, 18px); }
/* ta sama linia otwiera każdą podstronę, tuż pod etykietą */
.moment-head { margin-top: .9rem; margin-bottom: 0; }
.moment::after {
  content: ""; position: absolute; top: 50%; left: 0;
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: var(--camel);
  box-shadow: 0 0 0 0 rgba(140,106,76,.35);
  animation: momentRun 9s cubic-bezier(.2,.62,.2,1) infinite;
}
@keyframes momentRun {
  0%   { left: 0;   opacity: 0; box-shadow: 0 0 0 0 rgba(140,106,76,.35); }
  6%   { opacity: 1; }
  62%  { left: 62%; opacity: 1; box-shadow: 0 0 0 0 rgba(140,106,76,.35); }
  74%  { left: 62%; box-shadow: 0 0 0 13px rgba(140,106,76,0); }
  88%  { left: 100%; opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .moment::after { animation: none; left: 62%; }
}

/* =========================================================================
   HERO — najpierw wiadomo, czym jest ta strona. Portret towarzyszy, nie rządzi.
   ========================================================================= */
.hero { padding-top: 62px; }
.hero-in {
  display: grid;
  /* kolumna tekstu ma się kończyć tam, gdzie zaczyna się zdjęcie —
     inaczej portret wygląda, jakby był doklejony do rogu */
  grid-template-columns: minmax(0, 1fr) minmax(0, 330px);
  gap: clamp(28px, 4vw, 56px);
  max-width: 1180px; margin-inline: auto;
  align-items: center;
  padding-block: clamp(44px, 7vw, 104px) clamp(40px, 6vw, 88px);
}
.hero-name {
  font-family: var(--display); font-weight: 250; text-transform: uppercase;
  font-size: clamp(2.15rem, 4.3vw, 3.7rem); line-height: 1.02; letter-spacing: -.014em;
  margin: .9rem 0 1.4rem;
}
.hero-type .lede { max-width: 34ch; }
.hero-type .body-copy { max-width: 56ch; }
.hero-photo { align-self: center; }
.hero-photo img { width: 100%; height: auto; }
.hero-photo figcaption { margin-top: .8rem; }

@media (max-width: 860px) {
  .hero-in { grid-template-columns: minmax(0,1fr); gap: 26px; padding-block: 30px 34px; }
  .hero-photo { order: -1; max-width: 300px; }
}

/* =========================================================================
   INDEKS ROZDZIAŁÓW — sam tekst. Zdjęcie podążające za kursorem zasłaniało
   to, w co się klika, więc go nie ma.
   ========================================================================= */
.head-row { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; margin-bottom: .8rem; }

.index-list { list-style: none; margin: 0; padding: 0; }
.index-list li { border-bottom: 1px solid var(--line-2); }
.index-row {
  display: grid; grid-template-columns: auto minmax(0, 240px) minmax(0, 1fr) auto;
  align-items: baseline; gap: clamp(12px, 2.6vw, 40px);
  padding: clamp(16px, 2.2vw, 26px) 0;
  transition: color .25s var(--ease);
}
.index-row .t {
  font-family: var(--display); font-weight: 300; text-transform: uppercase;
  font-size: clamp(1.05rem, 1.7vw, 1.45rem); line-height: 1.1; letter-spacing: .02em;
}
.index-row .d { color: var(--muted); font-size: .98rem; line-height: 1.5; }
.index-row .arrow { font-family: var(--sans); font-size: .95rem; color: var(--muted); transition: transform .4s var(--ease-out), color .25s; }
.index-row:hover { color: var(--camel); }
.index-row:hover .d { color: var(--ink-2); }
.index-row:hover .arrow { transform: translateX(6px); color: var(--camel); }
@media (max-width: 760px) {
  .index-row { grid-template-columns: auto minmax(0,1fr) auto; }
  .index-row .d { grid-column: 2 / -1; }
}

/* =========================================================================
   ŚWIATŁO Z OKNA
   Strona ma być ścianą w mieszkaniu, na którą pada słońce, a portret
   odbiciem w lustrze. Trzy smugi pod jednym kątem: szeroka plama, węższy
   pas obok niej i cienki cień od ramy. Wszystko z gradientów, zero plików
   i zero rozmycia — miękkość robią same przejścia kolorów.
   ========================================================================= */
.daylight { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.daylight::before {
  content: ""; position: absolute; inset: 0;
  /* Żadnej maski i żadnego filtra — one każą przeglądarce rysować ten
     fragment na osobnej warstwie, a na ekranach o szerokiej palecie taka
     warstwa dostaje inną konwersję koloru i widać ją jako prostokąt.
     Wygaszanie krawędzi robią więc dodatkowe warstwy w samym tle:
     kolor papieru namalowany po bokach i u góry/dołu. */
  background:
    /* wygaszenie u góry i u dołu */
    linear-gradient(to bottom,
      var(--paper) 0%, rgba(237,230,221,0) 22%,
      rgba(237,230,221,0) 74%, var(--paper) 100%),
    /* wygaszenie w prawo, w stronę tekstu */
    linear-gradient(to right,
      rgba(237,230,221,0) 0%, rgba(237,230,221,0) 34%, var(--paper) 76%),
    /* szeroka plama słońca */
    linear-gradient(104deg,
      rgba(255,252,246,0)   10%,
      rgba(255,252,246,.30) 17%,
      rgba(255,252,246,.30) 31%,
      rgba(255,252,246,0)   38%),
    /* węższy prostokąt za szczebliną */
    linear-gradient(104deg,
      rgba(255,252,246,0)   40%,
      rgba(255,252,246,.20) 44%,
      rgba(255,252,246,.20) 51%,
      rgba(255,252,246,0)   57%),
    /* cień od ramy okna */
    linear-gradient(104deg,
      rgba(116,90,62,0)     31%,
      rgba(116,90,62,.055)  34%,
      rgba(116,90,62,.055)  37%,
      rgba(116,90,62,0)     41%);
}
.daylight-right::before { background-position-x: right; }
.daylight-soft::before  { opacity: .8; }

.has-light, .hero { position: relative; }
.has-light > .wrap, .hero > .wrap { position: relative; z-index: 1; }

/* =========================================================================
   ROZLANE KSZTAŁTY PORTRETÓW
   Obrysy są rysowane krzywymi (SVG), nie promieniami rogów — dopiero wtedy
   kadr naprawdę się przelewa, zamiast być równym owalem. Pięć wariantów,
   żaden nie powtarza sąsiada.
   Cień idzie filtrem po pudełku, bo clip-path ucina każdy box-shadow.
   Produkty i archiwum zostają prostokątne — tam obcięty róg zjadłby przedmiot.
   ========================================================================= */
.blobs { position: absolute; width: 0; height: 0; overflow: hidden; }

.shot { display: block; line-height: 0; }
.shot img { display: block; width: 100%; height: auto; }

.s1 .shot img { clip-path: url(#blob1); }
.s2 .shot img { clip-path: url(#blob2); }
.s3 .shot img { clip-path: url(#blob3); }
.s4 .shot img { clip-path: url(#blob4); }
.s5 .shot img { clip-path: url(#blob5); }

/* Cień: miękka, ciepła plama namalowana ZA zdjęciem — zwykły gradient,
   bez filtra. Nie obrysowuje kształtu co do piksela, ale tak właśnie
   zachowuje się cień rzucony na ścianę: rozmywa się i traci krawędzie.
   Każdy portret ma inny — inna głębia, inna strona, inna miękkość. */
.plate, .hero-photo { position: relative; }
.cast::before, .cast-soft::before, .cast-left::before, .cast-deep::before {
  content: ""; position: absolute; z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
.cast::before {
  left: 10%; right: -7%; top: 12%; bottom: -5%;
  background: radial-gradient(closest-side ellipse at 50% 50%,
    rgba(52,37,24,.30), rgba(52,37,24,.13) 55%, rgba(52,37,24,0) 78%);
}
.cast-soft::before {
  left: 8%; right: -4%; top: 10%; bottom: -3%;
  background: radial-gradient(closest-side ellipse at 50% 50%,
    rgba(52,37,24,.20), rgba(52,37,24,.08) 55%, rgba(52,37,24,0) 78%);
}
.cast-left::before {
  left: -7%; right: 10%; top: 12%; bottom: -5%;
  background: radial-gradient(closest-side ellipse at 50% 50%,
    rgba(52,37,24,.26), rgba(52,37,24,.11) 55%, rgba(52,37,24,0) 78%);
}
.cast-deep::before {
  left: 12%; right: -9%; top: 14%; bottom: -7%;
  background: radial-gradient(closest-side ellipse at 50% 50%,
    rgba(52,37,24,.36), rgba(52,37,24,.16) 55%, rgba(52,37,24,0) 78%);
}
@media (max-width: 760px) {
  .cast::before, .cast-soft::before, .cast-left::before, .cast-deep::before {
    left: 8%; right: -5%; top: 10%; bottom: -4%;
    background: radial-gradient(closest-side ellipse at 50% 50%,
      rgba(52,37,24,.24), rgba(52,37,24,.10) 55%, rgba(52,37,24,0) 78%);
  }
}

/* =========================================================================
   PŁYTY ZDJĘCIOWE
   Pliki z sesji mają ok. 1000–1120 px szerokości, więc żadnego kadru nie
   powiększam ponad to. Zamiast rozciągać, daję zdjęciu kolumnę i powietrze —
   tak zresztą wygląda odbitka w katalogu, a nie tapeta.
   ========================================================================= */
.plate { position: relative; }
.plate img { width: 100%; height: auto; }
.plate figcaption { margin-top: .9rem; }

/* pojedynczy kadr: wąska kolumna, żeby towarzyszył tekstowi, a nie go zagłuszał */
.plate-wide  { max-width: 760px; }
.plate-quiet { max-width: 340px; }
.plate-right { margin-left: auto; }
@media (max-width: 760px) { .plate-quiet { max-width: 260px; } }
.plate-duo { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(14px, 2.4vw, 40px); align-items: start; }
.plate-duo .offset { margin-top: clamp(28px, 7vw, 120px); }

/* pełna szerokość okna — jedyne miejsce, gdzie kadr jest przycięty celowo */

/* Siatka produktów i archiwum: pola są równe, a zdjęcie mieści się w całości
   (contain), więc nic nie jest ucinane niezależnie od proporcji pliku. */
.prod-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 32px);
}
.prod-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 780px; }
.prod { display: grid; grid-template-rows: auto 1fr; gap: .85rem; }
.prod-frame {
  aspect-ratio: 1 / 1; background: var(--chalk);
  border: 1px solid var(--line-2);
  display: grid; place-items: center; overflow: hidden;
}
.prod-frame img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 900px) { .prod-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .prod-grid, .prod-grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* cytat na środku — oddech między rozdziałami */
.quote {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.4rem, 3.1vw, 2.5rem); line-height: 1.26; letter-spacing: -.012em;
  max-width: 24ch; text-wrap: balance;
}
.quote-center { margin-inline: auto; text-align: center; max-width: 28ch; }

/* =========================================================================
   ROZKŁAD DWUKOLUMNOWY — etykieta z lewej, treść z prawej
   ========================================================================= */
.split {
  display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 64px); align-items: start;
}
.split-wide { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); }
@media (max-width: 860px) { .split, .split-wide { grid-template-columns: minmax(0,1fr); gap: 14px; } }

/* wpis w spisie prac — układ katalogowy: numer / nazwa / opis.
   Trzecia kolumna zagospodarowuje prawą połowę, która wcześniej stała pusta. */
.entry {
  display: grid;
  grid-template-columns: auto minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 52px);
  padding-block: clamp(22px, 3vw, 40px);
  border-top: 1px solid var(--line-2);
  align-items: start;
}
.entry:last-child { border-bottom: 1px solid var(--line-2); }
/* Tytuł wpisu musi się ZMIEŚCIĆ w swojej kolumnie. Wcześniej miał rozmiar
   nagłówka sekcji i długie słowa („MASTERCLASSES") wchodziły na tekst obok. */
.entry-name { min-width: 0; }
.entry-name .d2 {
  font-size: clamp(1.05rem, 1.7vw, 1.5rem);
  line-height: 1.12; letter-spacing: .01em;
  overflow-wrap: break-word; hyphens: auto;
}
.entry .role { font-family: var(--sans); font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-top: .55rem; }
.entry-text p { max-width: 56ch; }
.entry-text > p + p { margin-top: .9rem; }
@media (max-width: 1080px) {
  .entry { grid-template-columns: auto minmax(0, 1fr); }
  .entry-text { grid-column: 2; }
  .entry-name { margin-bottom: .9rem; }
}
@media (max-width: 620px) {
  .entry { grid-template-columns: minmax(0,1fr); gap: 6px; }
  .entry-text { grid-column: auto; }
}

/* lista faktów */
.facts { list-style: none; margin: 0; padding: 0; display: grid; }
.facts li { padding: .78rem 0; border-top: 1px solid var(--line-2); display: grid; grid-template-columns: auto minmax(0,1fr); gap: clamp(12px, 2vw, 30px); }
.facts li:last-child { border-bottom: 1px solid var(--line-2); }

/* link tekstowy z podkreśleniem, które dorasta */
.link {
  display: inline-flex; align-items: center; gap: .4em;
  border-bottom: 1px solid var(--line); padding-bottom: 1px;
  transition: border-color .28s var(--ease), color .28s var(--ease);
}
.link:hover { color: var(--camel); border-color: var(--camel); }

/* przycisk w ramce */
.btn {
  display: inline-flex; align-items: center; gap: .7em;
  padding: .95em 1.5em; border: 1px solid var(--line);
  font-family: var(--sans); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  min-height: 48px;
}
.btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-quiet { border-color: var(--line-2); color: var(--muted); }
.btn-quiet:hover { color: var(--paper); }

/* =========================================================================
   POWIERZCHNIE CIEMNE I PIASKOWE
   ========================================================================= */
.on-ink { background: var(--ink); color: var(--paper); }
.on-ink .meta, .on-ink .muted, .on-ink .num { color: rgba(237,230,221,.58); }
.on-ink hr.rule, .on-ink .entry, .on-ink .facts li, .on-ink .index-list li { border-color: var(--line-dark-2); }
.on-ink .link { border-color: var(--line-dark); }
.on-ink .link:hover, .on-ink .index-row:hover, .on-ink .mega-list a:hover { color: var(--sand); }
.on-ink .link:hover { border-color: var(--sand); }
.on-ink .btn { border-color: var(--line-dark); }
.on-ink .btn:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.on-sand { background: var(--paper-2); }

/* =========================================================================
   STOPKA
   ========================================================================= */
.footer { background: var(--ink); color: var(--paper); padding-block: clamp(52px, 7vw, 96px) 26px; }
.footer a { transition: color .25s var(--ease); }
.footer a:hover { color: var(--sand); }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 60px); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .35rem 1.4rem; align-items: start; }
.footer ul a { display: flex; align-items: center; min-height: 44px; padding: .3rem 0; }
.footer-bottom {
  margin-top: clamp(34px, 4vw, 56px); padding-top: 20px; border-top: 1px solid var(--line-dark-2);
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between;
}
@media (max-width: 620px) {
  .footer-top { grid-template-columns: minmax(0,1fr); }
  .footer { padding-block: clamp(40px, 9vw, 60px) 22px; }
}

/* =========================================================================
   ODSŁANIANIE PRZY PRZEWIJANIU
   ========================================================================= */
.js [data-reveal] { opacity: 0; transform: translateY(16px); }
[data-reveal].in {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease-out) var(--d, 0ms), transform .9s var(--ease-out) var(--d, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}

/* =========================================================================
   TELEFON
   ========================================================================= */
@media (max-width: 900px) {
  body { font-size: 17.5px; }
  /* wersaliki z rozstrzeleniem przy 10,9 px były na telefonie za drobne */
  .meta { font-size: .76rem; letter-spacing: .17em; }
  .num  { font-size: .76rem; }
  .index-row .d { font-size: 1rem; }
  .hero-in { grid-template-columns: minmax(0,1fr); grid-template-rows: auto; gap: 22px; min-height: 0;
    padding-block: 18px 30px; height: auto; min-height: 0; }
  .hero-photo { order: 1; align-self: auto; display: block; }
  .hero-photo img { width: 100%; height: auto; }
  .hero-name  { order: 2; }
  .hero-side  { order: 3; }
  .hero-photo figcaption { position: static; margin-top: .7rem; }
  .plate-duo { grid-template-columns: minmax(0,1fr); }
  .plate-duo .offset { margin-top: 0; }
  .header-in { height: 58px; }
  .wordmark { justify-self: center; font-size: .68rem; letter-spacing: .2em; }
  .header-link { display: none; }
  .header-in > :last-child { justify-self: end; }
  .mega { grid-template-rows: 58px 1fr auto; }
  .mega-body { align-items: flex-start; padding-top: 8px; }
  .quote { max-width: none; }
}
@media (max-width: 420px) {
  .wordmark { font-size: .6rem; letter-spacing: .16em; }
}

/* =========================================================================
   ANIMACJE — jeden język: ciemnia fotograficzna.
   Wszystko poniżej ma ten sam źródłosłów: odbitka, migawka, ziarno, stykówka.
   Każdy efekt wyłącza się przy „prefers-reduced-motion".
   ========================================================================= */

/* ---------- ZIARNO ----------------------------------------------------- */
/* Cienka warstwa ziarna na całej stronie — to, co odróżnia druk od ekranu.
   Trzy klatki przesunięcia wystarczą, żeby ziarno „żyło" bez kosztu. */
.grain {
  /* inset: 0, nie -120px, i ruch przez przesunięcie tła zamiast transformu —
     wcześniej warstwa wystawała poza ekran i na telefonie huśtała stroną. */
  position: fixed; inset: 0; z-index: 200; pointer-events: none;
  opacity: .05;
  background-image: var(--grain-src);
  background-size: 220px 220px;
  animation: grainShift 1.1s steps(3) infinite;
}
@keyframes grainShift {
  0%   { background-position:   0px   0px; }
  33%  { background-position: -38px  22px; }
  66%  { background-position:  26px -34px; }
  100% { background-position:   0px   0px; }
}

/* ---------- ZDJĘCIA: spokojne pojawienie się --------------------------- */
/* Bez rozmycia, skali i odsłaniania. Zdjęcie ma stać w miejscu —
   ruchome portrety przytłaczały stronę. */
.js [data-develop] > img { opacity: 0; }
[data-develop].in > img { opacity: 1; transition: opacity .7s var(--ease) var(--d, 0ms); }
@media (prefers-reduced-motion: reduce) { .js [data-develop] > img { opacity: 1; } }

/* ---------- WERSALIKI WSTAJĄCE ZZA LINII -------------------------------- */
.rise { display: block; overflow: hidden; }
.rise > span { display: block; }
.js .rise > span { transform: translateY(102%); }
.rise.in > span {
  transform: none;
  transition: transform 1.05s var(--ease-out) var(--d, 0ms);
}
@media (prefers-reduced-motion: reduce) { .rise > span { transform: none; } }

/* ---------- CZYTANIE STEROWANE PRZEWIJANIEM ---------------------------- */
/* Słowa rozjaśniają się do czerni w miarę, jak akapit przechodzi
   przez środek ekranu. Czyta się to inaczej niż zwykły tekst. */
.read-in span.w { color: var(--muted-2); transition: color .5s var(--ease); }
.read-in span.w.lit { color: var(--ink); }
.on-ink .read-in span.w { color: rgba(237,230,221,.3); }
.on-ink .read-in span.w.lit { color: var(--paper); }

/* ---------- LINIA, KTÓRA SIĘ RYSUJE ------------------------------------ */
.draw { transform-origin: 0 50%; }
.js .draw { transform: scaleX(0); }
.draw.in { transform: scaleX(1); transition: transform 1.1s var(--ease-out) var(--d, 0ms); }

/* ---------- PRZYCISK: WYPEŁNIENIE OD DOŁU ------------------------------ */
.btn { position: relative; overflow: hidden; z-index: 0; }
.btn::before {
  content: ""; position: absolute; inset: 0; background: var(--ink); z-index: -1;
  transform: translateY(101%); transition: transform .45s var(--ease-out);
}
.btn:hover::before { transform: translateY(0); }
.on-ink .btn::before { background: var(--paper); }

/* ---------- NAGŁÓWEK CHOWA SIĘ PRZY SCROLLU W DÓŁ ---------------------- */
.header { transform: translateY(0); transition: transform .45s var(--ease-out), background .4s var(--ease), border-color .4s var(--ease); }
.header.is-hidden { transform: translateY(-100%); }
body.menu-open .header { transform: none; background: transparent; border-bottom-color: transparent; }


/* =========================================================================
   DIRECT KNOWLEDGE — części własne tej strony
   Paleta, kroje, światło i linia z kropką są te same co na
   olawojciechowska.link. Poniżej tylko to, czego tam nie było.
   ========================================================================= */

/* Menu ma tu tylko dwie pozycje, więc na telefonie nie ma czego chować.
   Nadpisuję regułę z arkusza Oli, gdzie menu chowa się pod przycisk. */
@media (max-width: 860px) {
  .header .nav { display: flex; gap: 14px; }
  .header .nav a { font-size: .64rem; letter-spacing: .1em; }
  .header-link { display: none; }
  .wordmark { font-size: .62rem; letter-spacing: .14em; }
}

/* pozycje menu w ramkach — na prośbę: mają wyglądać jak przyciski */
.nav-framed a {
  border: 1px solid var(--line); padding: .55em 1em;
  min-height: 40px; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.nav-framed a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@media (max-width: 860px) { .nav-framed a { padding: .5em .8em; } }

/* Tytuł książki — krój i styl Twojej strony: Inter, wersaliki, cienkie.
   Jeden blok: „Direct Knowledge" to pierwszy człon tytułu, nie osobny napis. */
.book-title { font-family: var(--display); font-weight: 250; text-transform: uppercase; }
.book-title .t-main {
  display: block;
  font-size: clamp(2.15rem, 4.3vw, 3.7rem); line-height: 1.02; letter-spacing: -.014em;
  color: var(--ink);
}
.book-title .t-sub {
  display: block; margin-top: .1em;
  font-size: clamp(1.35rem, 2.7vw, 2.25rem); line-height: 1.08; letter-spacing: -.006em;
  color: var(--ink);
}

/* etykieta „A BOOK BY" nad nazwiskiem — wróciła, bo bez niej nie było
   wiadomo, czym jest ten napis */
.author-label {
  margin: clamp(26px, 3.2vw, 40px) 0 .5rem;
  padding-top: clamp(20px, 2.4vw, 30px);
  border-top: 1px solid var(--line);
  max-width: 20ch;
}

/* Autorka pod tytułem — większa niż podpisy, ale mniejsza niż tytuł,
   żeby było jasne, że to nazwisko, a nie dalszy ciąg tytułu. */
.author-line {
  /* Ten sam krój co tytuł i wyraźnie większy od tekstu — wcześniej wyglądał
     jak podpis wtopiony w treść. Kreska nad nim oddziela go od tytułu. */
  font-family: var(--display); font-weight: 300; text-transform: uppercase;
  font-size: clamp(1.5rem, 2.9vw, 2.4rem); line-height: 1.08; letter-spacing: .04em;
  color: var(--ink);
  margin: 0 0 clamp(28px, 3.4vw, 42px);
  max-width: 20ch;
}

/* Podpowiedź tylko dla dotyku — na komputerze plik zapisuje się od razu
   i zdanie o udostępnianiu byłoby myląceo. */
.touch-tip { display: none; }
@media (hover: none), (max-width: 860px) {
  .touch-tip {
    display: block; margin-top: .7rem; max-width: 42ch;
    line-height: 1.6; color: var(--muted);
  }
}

/* okładka na stronie wejściowej */
.cover { max-width: 300px; }
.cover img { width: 100%; height: auto; display: block; }
@media (max-width: 860px) { .cover { max-width: 210px; } }

/* dwa wyjścia: czytaj albo pobierz */
.choice { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(26px, 3.4vw, 42px); }
.choice .btn { min-width: 200px; justify-content: center; }
.choice .btn strong { font-weight: 400; }
.choice-note { margin-top: .9rem; }

/* =========================================================================
   CZYTNIK
   ========================================================================= */
body.reader { overflow: hidden; height: 100%; }
.reader-shell {
  position: fixed; top: 0; left: 0; right: 0;
  height: 100vh;            /* zapas dla starszych przeglądarek */
  height: 100dvh;           /* faktycznie widoczna wysokość — bez paska Safari */
  display: grid;
  grid-template-rows: 58px 1fr auto;
  background: var(--paper);
}
.reader-top {
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: clamp(14px, 3vw, 30px);
  border-bottom: 1px solid var(--line-2);
}
.reader-home { font-family: var(--sans); font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); display: inline-flex;
  align-items: center; min-height: 44px; }
.reader-home:hover { color: var(--ink); }
.reader-top a, .reader-top span {
  font-family: var(--sans); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); display: inline-flex; align-items: center; gap: .5em; min-height: 44px;
}
.reader-top a { transition: color .25s var(--ease); }
.reader-top a:hover { color: var(--ink); }

.reader-stage {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 0; padding: clamp(10px, 2vw, 26px) clamp(56px, 8vw, 104px);
}
/* Scena musi być węższa niż DWIE szerokości strony, bo tylko wtedy
   biblioteka przechodzi w tryb jednostronicowy. W rozkładówce przewracała
   po dwie strony naraz i licznik pokazywał lewą z pary — stąd skoki. */
.reader-stage { max-width: 700px; margin-inline: auto; width: 100%; }
#book { max-height: 100%; }
.page { background: #fff; overflow: hidden; }
/* „contain", nie „cover" — inaczej czytnik ucinałby wiersze przy krawędziach */
.page img { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; }
.page.blank {
  background: #f6f3ed; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-family: var(--sans); font-size: .72rem; letter-spacing: .1em;
  text-align: center; padding: 20px; text-transform: uppercase;
}

/* STRZAŁKI — widoczne zawsze, nie tylko pod kursorem */
.page-nav {
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
  width: clamp(46px, 5vw, 58px); height: clamp(46px, 5vw, 58px);
  display: grid; place-items: center; cursor: pointer;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: 50%;
  transition: background .25s var(--ease), border-color .25s var(--ease),
              color .25s var(--ease), transform .3s var(--ease-out);
}
.page-nav svg { width: 40%; height: 40%; fill: none; stroke: currentColor; stroke-width: 1.6; }
@media (hover: hover) and (pointer: fine) {
  .page-nav:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
}
.page-nav:active { background: var(--paper-2); }
.page-nav:disabled { opacity: .3; cursor: default; }
.page-nav:disabled:hover { background: var(--paper); color: var(--ink); border-color: var(--line); }
@media (hover: none) {
  .reader-foot button:hover, .reader-foot a:hover { color: var(--muted); border-color: var(--line-2); }
  .nav-framed a:hover { background: none; color: var(--muted); border-color: var(--line); }
}
#prev { left: clamp(6px, 1.6vw, 22px); }
#next { right: clamp(6px, 1.6vw, 22px); }
#next:not(:disabled) { animation: nudge 3.4s var(--ease) infinite; }
@keyframes nudge {
  0%, 88%, 100% { transform: translateY(-50%) translateX(0); }
  93%           { transform: translateY(-50%) translateX(5px); }
}
@media (prefers-reduced-motion: reduce) { #next { animation: none; } }

.reader-foot {
  /* Spis po lewej, numer strony po prawej — tak jak w górnym pasku. */
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 12px clamp(14px, 3vw, 30px);
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line-2);
}
.reader-foot button, .reader-foot a {
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  font-family: var(--sans); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line-2); background: none;
  padding: .6em 1em; cursor: pointer; min-height: 40px;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.reader-foot button:hover, .reader-foot a:hover { color: var(--ink); border-color: var(--line); }
.progress {
  font-family: var(--sans); font-size: .7rem; letter-spacing: .14em;
  color: var(--muted); font-variant-numeric: tabular-nums; text-align: right;
  white-space: nowrap;
}
.progress b { color: var(--ink); font-weight: 400; }
.reader-foot { gap: 10px clamp(14px, 2vw, 24px); }

/* Na telefonie tytuł pośrodku górnego paska ustępuje miejsca przyciskowi
   rozdziałów. Górnego paska nie nakrywa nic, więc tu dostęp jest pewny. */
.reader-top .top-title { display: inline; }
.reader-top .top-chapters { display: none; }
@media (max-width: 760px) {
  .reader-top .top-title { display: none; }
  .reader-top .top-chapters {
    display: inline-flex; align-items: center; min-height: 44px;
    border: 1px solid var(--line); padding: .4em .9em; background: none;
    font-family: var(--sans); font-size: .66rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ink); cursor: pointer;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  }
}

/* =========================================================================
   LISTA ROZDZIAŁÓW — zwykła strona, zwykłe odnośniki
   Nakładka sterowana skryptem potrafiła nie otworzyć się na telefonie.
   Odnośnik prowadzący na osobną stronę nie ma jak zawieść.
   ========================================================================= */
.chapter-list { list-style: none; margin: 0; padding: 0; }
.chapter-list li { border-bottom: 1px solid var(--line-2); }
.chapter-list a {
  display: grid; grid-template-columns: minmax(0, 160px) minmax(0, 1fr) auto;
  gap: clamp(10px, 2vw, 24px); align-items: baseline;
  padding: 1.05rem 0; min-height: 56px;
  transition: color .2s var(--ease);
}
.chapter-list a:hover { color: var(--camel); }
.chapter-list .t {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: .84rem; letter-spacing: .1em;
}
.chapter-list .d { font-family: var(--serif); font-size: .98rem; line-height: 1.42; color: var(--muted); }
.chapter-list a:hover .d { color: var(--ink-2); }
.chapter-list .n {
  font-family: var(--sans); font-size: .76rem; letter-spacing: .1em;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
@media (max-width: 620px) {
  /* numer strony obok tytułu, opis pod spodem — bez jawnego rozmieszczenia
     numer lądował dopiero w trzecim wierszu, pod opisem */
  .chapter-list a { grid-template-columns: minmax(0,1fr) auto; gap: 3px 12px; padding: .95rem 0; }
  .chapter-list .t { grid-column: 1; grid-row: 1; }
  .chapter-list .n { grid-column: 2; grid-row: 1; }
  .chapter-list .d { grid-column: 1 / -1; grid-row: 2; font-size: .9rem; }
}

/* odnośniki w pasku czytnika — w ramkach, żeby nie ginęły */
.reader-links { display: flex; align-items: center; gap: 8px; }
.reader-links a, .foot-link {
  border: 1px solid var(--line); padding: .45em .85em; min-height: 40px;
  display: inline-flex; align-items: center;
  font-family: var(--sans); font-size: .64rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .reader-links a:hover, .foot-link:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
}
@media (max-width: 420px) {
  .reader-links a, .foot-link { font-size: .58rem; padding: .45em .6em; letter-spacing: .1em; }
}

.resume-note {
  /* Jedyny komunikat w czytniku — pokazuje się raz, przy powrocie do książki. */
  position: fixed; left: 50%; bottom: 76px; transform: translateX(-50%); z-index: 8;
  max-width: calc(100vw - 32px); text-align: center;
  font-family: var(--sans); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--camel); background: var(--paper); padding: .5em .9em;
  border: 1px solid var(--line-2);
  opacity: 0; pointer-events: none; transition: opacity .35s var(--ease);
}
.resume-note.show { opacity: 1; }
.loader {
  font-family: var(--sans); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); text-align: center; line-height: 2;
}

@media (max-width: 760px) {
  .reader-stage { padding: 8px 4px; }
  #prev { left: 2px; } #next { right: 2px; }
  .page-nav { width: 42px; height: 42px; background: rgba(237,230,221,.9); }
  .reader-foot { gap: 10px; padding: 10px clamp(12px,4vw,18px) 14px; }
  .reader-foot button, .reader-foot a {
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; font-size: .58rem; padding: .55em .7em; }
}