/* Gaj — wspólny styl obu wersji zielonej propozycji.
   Zieleń nocnego gaju = natura i opieka, złoto = światło, czerwień hibiskusa i jarzębiny = życie i ochrona.
   Każda podstrona ma swoją porę nocy (kolor tła płynnie się zmienia):
   start: noc w gaju, o mnie: ciepło kory, tarot: fiolet intuicji, galeria: szmaragd kamieni,
   blog: granat drogi i morza, kontakt: wino serca. */
@property --bg { syntax: '<color>'; inherits: true; initial-value: #142019; }
@property --glow { syntax: '<color>'; inherits: true; initial-value: #2a3d31; }

:root {
  --night: #142019;
  --moss: #1f2e25;
  --moss-2: #2a3d31;
  --gold: #c9a24e;
  --gold-hi: #ecd38f;
  --hib: #b4232e;
  --plum: #3b2448;
  --parch: #f0e7d3;
  --parch-dim: #c2b99f;

  --bg: var(--night);
  --glow: var(--moss-2);
  --fg: var(--parch);
  --muted: var(--parch-dim);
  --accent: var(--gold);
  --line: rgb(201 162 78 / .32);
  --surface: rgb(255 255 255 / .04);
  --field-bg: rgb(0 0 0 / .18);
  --err: #f08a7e;
  --font-d: 'Marcellus', 'Times New Roman', serif;
  --font-b: 'Literata', Georgia, serif;
  --fs-body: 1.0625rem;
  --max: 68rem;
  --card-radius: 12px;
  --art-radius: 2px;
  --lb-radius: 6px;
  --btn-radius: 999px;
  --field-radius: 6px;
  --backdrop: rgb(10 16 12 / .8);
  --nz1: #c9a24e; --nz2: #f0e7d3; --nz3: #2f5fa8; --nz4: #142019;
  color-scheme: dark;
  transition: --bg 1.1s ease, --glow 1.1s ease;
}
html[data-page="o-mnie"]  { --bg: #172419; --glow: #34422a; }
html[data-page="tarot"]   { --bg: #2a1a36; --glow: #4b2d5c; }
html[data-page="galeria"] { --bg: #0f241f; --glow: #1f4a3d; }
html[data-page="blog"]    { --bg: #131f2a; --glow: #23405a; }
html[data-page="kontakt"] { --bg: #241519; --glow: #4a2328; }

body { background: var(--bg); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-weight: 400; letter-spacing: .01em; }
.lead { font-size: 1.15em; }
:focus-visible { outline-color: var(--gold-hi); }

/* Warstwy liści przy krawędziach (paralaksa) */
.foliage-wrap { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.foliage-wrap::before { content: ""; position: absolute; inset: 0; background: radial-gradient(110% 60% at 50% -5%, var(--glow), transparent 70%); }
.foliage { --tile-ratio: 4.667; position: fixed; top: 0; bottom: 0; width: var(--w); overflow: hidden; pointer-events: none; animation: sway var(--sway, 11s) ease-in-out infinite alternate; }
.foliage--l { left: 0; transform-origin: 0 50%; }
.foliage--r { right: 0; transform-origin: 100% 50%; animation-delay: -4s; }
.foliage__strip { position: absolute; left: 0; right: 0; top: 0; height: calc(100lvh + var(--w) * (var(--tile-ratio) + 1)); background-repeat: repeat-y; background-size: 100% auto; will-change: transform; }
.foliage--far  { --w: clamp(90px, 21vw, 340px); z-index: 0; --sway: 14s; opacity: .95; }
.foliage--mid  { --w: clamp(60px, 13vw, 220px); z-index: 0; --sway: 10s; }
:root { --near-w: clamp(0px, 8vw, 128px); }
.foliage--near { --w: var(--near-w); z-index: 30; --sway: 8s; }
@keyframes sway { from { transform: rotate(-.6deg) translateX(-3px); } to { transform: rotate(.6deg) translateX(3px); } }
/* o zmierzchu (tarot) liście nabierają fioletu */
.foliage--far, .foliage--mid { transition: filter 1.1s; }
html[data-page="tarot"] .foliage--far, html[data-page="tarot"] .foliage--mid { filter: hue-rotate(150deg) saturate(.7) brightness(.95); }
html[data-page="blog"] .foliage--far, html[data-page="blog"] .foliage--mid { filter: hue-rotate(40deg) saturate(.8); }
html[data-page="kontakt"] .foliage--far { filter: hue-rotate(-110deg) saturate(.6) brightness(.9); }
.hd, .ft { position: relative; z-index: 1; }
#main { position: relative; }   /* bez z-index: elementy z ujemnym z-index (wzgórza w B) mogą zejść pod drzewa */

/* Ozdobniki */
.ornament { display: block; width: min(100%, 20rem); height: auto; margin: 0 auto; color: var(--gold); }
.section__head { position: relative; margin-inline: auto; text-align: center; }
.section__head::before { content: ""; display: block; width: 9rem; height: 2.2rem; margin: 0 auto 1.2rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 144 36' fill='none' stroke='%23c9a24e' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M4 18h40M100 18h40' opacity='.6'/%3E%3Cpath d='M72 4c3 2 4 5 3 7 4-1 6 2 3 4 4 0 5 3 1 5 3 2 1 5-3 4 1 3-2 5-4 3l0 4 0-4c-2 2-5 0-4-3-4 1-6-2-3-4-4-2-3-5 1-5-3-2-1-5 3-4-1-2 0-5 3-7z' fill='%23c9a24e' fill-opacity='.18'/%3E%3Cpath d='M50 18c6-6 12-6 16 0-4 6-10 6-16 0zM94 18c-6-6-12-6-16 0 4 6 10 6 16 0z'/%3E%3Ccircle cx='46' cy='18' r='1.6' fill='%23c9a24e'/%3E%3Ccircle cx='98' cy='18' r='1.6' fill='%23c9a24e'/%3E%3C/svg%3E") center / contain no-repeat; }
.section__head h1 { color: var(--gold-hi); }
.section h2 { color: var(--gold-hi); }
/* treść trzyma się z dala od bliskiego planu liści */
.view:not(.view--start) .section { width: min(100% - 2 * var(--near-w) - 2.5rem, var(--max)); margin-inline: auto; }
.wrap { width: min(100% - 2 * var(--near-w) - 2rem, var(--max)); }

/* Przyciski */
.btn { font: 400 1.02rem var(--font-b); letter-spacing: .01em; padding: .85em 1.7em; }
.btn--gold { background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: #1b1608; border-color: var(--gold); box-shadow: 0 6px 22px -8px rgb(236 211 143 / .6); }
.btn--gold:hover { background: var(--gold-hi); color: #1b1608; }

/* Wspólne widoki */
.symbols, .sessions { border-top: 1px solid var(--line); padding-top: clamp(3rem, 8vw, 5rem) !important; }
.symbols__list li { padding: 1rem; border-radius: 10px; transition: background-color .3s; }
.symbols__list li:hover { background: var(--surface); }
.filters { justify-content: center; font-size: 1.05rem; }
.filters a[aria-current] { color: var(--gold-hi); }
.tarot__ritual { margin-inline: auto; text-align: center; font-style: italic; font-size: 1.1em; }
.draw-area { position: relative; text-align: center; padding-top: 1rem; }
.draw-area::before { content: ""; display: block; width: min(100%, 22rem); height: 2rem; margin: 0 auto 1.5rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 20' fill='%23c9a24e'%3E%3Ccircle cx='10' cy='10' r='6' fill='none' stroke='%23c9a24e'/%3E%3Cpath d='M44 4a6 6 0 1 0 0 12 4.5 4.5 0 0 1 0-12z'/%3E%3Cpath d='M74 4a6 6 0 0 0 0 12z'/%3E%3Cpath d='M104 4a6 6 0 1 0 0 12 6 6 0 0 0 0-12z' fill-opacity='.6'/%3E%3Ccircle cx='140' cy='10' r='6'/%3E%3Cpath d='M176 4a6 6 0 0 1 0 12 6 6 0 0 1 0-12z' fill-opacity='.6'/%3E%3Cpath d='M206 4a6 6 0 0 1 0 12z'/%3E%3C/svg%3E") center / contain no-repeat; opacity: .8; }
.draw-row { justify-content: center; }
.session { border: 1px solid var(--line); border-radius: 999px 999px 8px 8px; padding: 3rem 1.6rem 2rem; text-align: center; align-items: center; background: linear-gradient(180deg, rgb(255 255 255 / .04), transparent 60%); }
.session h3 { font-size: 1.5rem; color: var(--gold-hi); }
.session a { color: var(--gold-hi); }
.sessions__note { text-align: center; }
.portrait { justify-self: center; }
.portrait__note { font-size: 18px; font-style: normal; }
.art-card__title, .post-card__title { color: var(--fg); }
.post-card__link:hover .post-card__title { color: var(--gold-hi); }
.form--sent { border-color: var(--gold); }

/* Karta tarota */
.tc { border: 1px solid var(--gold); box-shadow: inset 0 0 0 5px var(--night), inset 0 0 0 6px rgb(201 162 78 / .5); }
.tc--back { background: radial-gradient(circle, var(--moss-2), var(--night) 80%), var(--night); }
.tc--back::before { content: ""; position: absolute; inset: 14%; border: 1px dashed rgb(201 162 78 / .45); border-radius: 50%; }
.tc--back::after { content: ""; position: absolute; inset: 7% 10%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 170' fill='none' stroke='%23c9a24e' stroke-width='1' opacity='.55'%3E%3Cpath d='M50 4l2 6 6 2-6 2-2 6-2-6-6-2 6-2zM50 150l2 6 6 2-6 2-2 6-2-6-6-2 6-2zM8 30c10 4 14 10 12 20M92 30c-10 4-14 10-12 20M8 140c10-4 14-10 12-20M92 140c-10-4-14-10-12-20'/%3E%3C/svg%3E") center / contain no-repeat; }
.tc--front { background: linear-gradient(180deg, #f5ecd8, #e3d3ab); color: var(--night); }
.tc__num, .tc__name { font-family: var(--font-d); }
.tc__sym { color: var(--hib); }
.draw.is-open .tc--front { box-shadow: inset 0 0 0 5px #f5ecd8, inset 0 0 0 6px var(--gold), 0 0 50px rgb(236 211 143 / .35); }

/* Złote drobinki (świetliki) */
.motes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.motes span { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: var(--gold-hi); box-shadow: 0 0 8px 2px rgb(236 211 143 / .5); opacity: 0; animation: mote var(--t) var(--d) linear infinite; }
@keyframes mote { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: .9; } 80% { opacity: .5; } 100% { opacity: 0; transform: translate(30px, -120px); } }

/* Stopka */
.ft { margin-top: clamp(3rem, 8vw, 6rem); padding: 2rem 1.25rem 3rem; text-align: center; color: var(--muted); }
.ft .ornament { margin-bottom: 2rem; }
.ft__cols { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 4rem; }
.ft__cols strong { font: 400 1.5rem var(--font-d); color: var(--gold-hi); }
.ft a { text-decoration: none; }
.ft a:hover { color: var(--gold-hi); }
.ft__small { font-style: italic; font-size: .92em; margin-top: 2rem; }


@media (max-width: 900px) {
  :root { --near-w: 0px; }
  .foliage--near { display: none; }
  .foliage--far { --w: 64px; opacity: .8; }
  .foliage--mid { --w: 38px; opacity: .85; }
}

/* Prace w złotych ramach z passe-partout, ułożone jak na ścianie salonu */
.frame, .art-card .art, .work .art { display: block; width: 100%; height: auto; padding: clamp(7px, 1vw, 12px); background: #0c1510; border: 6px solid transparent;
  border-image: linear-gradient(135deg, #6f5220, #ecd38f 28%, #9c7a35 52%, #e8c877 78%, #6f5220) 1;
  box-shadow: 0 26px 44px -22px rgb(0 0 0 / .85), inset 0 0 0 1px rgb(236 211 143 / .22); border-radius: 0; }
.art-card { position: relative; justify-items: center; text-align: center; gap: .15rem; }
.art-card .art { transition: transform .6s cubic-bezier(.2, .8, .2, 1), box-shadow .6s; }
.art-card:hover .art { transform: translateY(-5px) rotate(-.4deg); box-shadow: 0 34px 50px -22px rgb(0 0 0 / .9), 0 0 30px -6px rgb(236 211 143 / .25), inset 0 0 0 1px rgb(236 211 143 / .35); }
.art-card::before { content: ""; position: absolute; top: -14px; left: 50%; width: 1px; height: 16px; background: linear-gradient(var(--gold), transparent); opacity: .6; }
.art-card__title { margin-top: .9rem; padding: .15rem .9rem; font-size: 1.15rem; background: linear-gradient(180deg, rgb(236 211 143 / .12), rgb(236 211 143 / .04)); border: 1px solid rgb(201 162 78 / .3); border-radius: 3px; }
.art-card__meta { font-size: .85em; }
/* Siatka galerii: grid, nie multicol (nazwane elementy View Transitions w multicolu wywalają renderer Chromium).
   Układ „murarski” robi core.js przez rozpiętość wierszy; bez JS zostaje równy grid. */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 2.6rem clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
.gallery-grid.is-masonry { grid-auto-rows: 8px; row-gap: 0; }
.gallery-grid.is-masonry > .art-card { align-self: start; }
.gallery-grid .art-card { display: grid; margin: 0; }
.work__credit { font-size: .85em; color: var(--muted); font-style: italic; }
.work .art { max-height: 78vh; width: auto; max-width: 100%; margin-inline: auto; }
.post-card__art .art, .post__art .art { --art-radius: 2px; }

/* ── Przejście między podstronami ──────────────────────────────────────────────
   Jedna choreografia: stara treść gaśnie, zdjęcie wspólne dla obu stron płynie na nowe miejsce,
   pod nagłówkiem zapalają się po kolei fazy księżyca, od dołu unoszą się płatki,
   a nowa treść wchodzi od dołu sekcja po sekcji. */
:root { --ease: cubic-bezier(.22, .7, .2, 1); --enter: .1s; }
html.is-nav { --enter: .45s; }
#main { min-height: 60vh; }
html.is-nav #main { view-transition-name: main; }
::view-transition-group(*) { animation-duration: .9s; animation-timing-function: cubic-bezier(.45, 0, .15, 1); }
::view-transition-image-pair(main) { isolation: auto; }
::view-transition-old(main) { animation: vt-leave .45s cubic-bezier(.4, 0, .7, .4) both; mix-blend-mode: normal; }
::view-transition-new(main) { animation: vt-wait .4s steps(1, end) both; mix-blend-mode: normal; }
@keyframes vt-leave { to { opacity: 0; transform: translateY(-3vh) scale(.985); filter: blur(8px); } }
@keyframes vt-wait { from { opacity: 0; } to { opacity: 1; } }
/* zdjęcie wspólne: leci samo, bez podwójnego obrazu */
::view-transition-group(.shared) { z-index: 3; }
::view-transition-old(.shared) { animation: vt-out .3s ease both; }
::view-transition-new(.shared) { animation: vt-in .5s .2s ease both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

/* Zasłona: fazy księżyca 40 px pod nagłówkiem, płatki od dołu */
.veil { position: fixed; inset: 0; z-index: 25; pointer-events: none; visibility: hidden; overflow: hidden; }
html.is-veiled .veil { visibility: visible; }
.veil__moons { position: absolute; left: 50%; top: var(--veil-top, 160px); width: min(60vw, 15rem); height: auto; transform: translateX(-50%); opacity: 0; overflow: visible; }
.veil__moons > * { opacity: .15; }
html.is-veiled .veil__moons { animation: veil-moons 1.8s ease both; }
html.is-veiled .veil__moons > * { animation: phase-on .45s calc(.2s + var(--k) * 80ms) ease both; }
@keyframes veil-moons { 0% { opacity: 0; transform: translate(-50%, 6px); } 18%, 70% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -10px); } }
@keyframes phase-on { to { opacity: 1; filter: drop-shadow(0 0 8px rgb(236 211 143 / .8)); } }
.veil__petal { position: absolute; bottom: -70px; left: var(--x); width: var(--s); height: var(--s); opacity: 0; }
html.is-veiled .veil__petal { animation: petal 2s var(--d) cubic-bezier(.3, .2, .3, 1) both; }
@keyframes petal { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 15% { opacity: 1; } 85% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--dx), -110vh) rotate(var(--r)); } }

/* ── Opowieść: sekcje i ich elementy pojawiają się po kolei, gdy wchodzą w ekran ── */
html.js .rv:not(.in) { opacity: 0; }
.rv.in { animation: rise-in 1.1s var(--enter) var(--ease) both; }
html.js .stg > * { opacity: 0; }
html.js .in .stg > *, html.js .stg.in > * { opacity: 1; animation: rise-in .9s calc(var(--enter) + .25s + var(--i, 0) * .09s) var(--ease) both; }
@keyframes rise-in { from { opacity: 0; transform: translateY(28px); } }

@media (prefers-reduced-motion: reduce) {
  html.js .rv:not(.in), html.js .stg > *, .rv.in, html.js .in .stg > *, html.js .stg.in > * { opacity: 1; animation: none; }
  html.is-veiled .veil { visibility: hidden; }
}

/* ── Tryb jasny: ten sam gaj o poranku ─────────────────────────────────────────
   Pergamin (nocą kolor pisma) staje się papierem, zieleń nocy atramentem, złoto ciemnieje do starego złota.
   Hibiskus, jarzębina, fiołki i nazar bez zmian. Dalekie plany liści jaśniejsze i zamglone, bliski soczysty.
   Kolory podstron zostają jako pastele: lawenda tarota, mięta galerii, błękit bloga, róż kontaktu. */
:root { --n1: #2c4532; --n2: #3a5a40; --n3: #46683f; --n4: #517649; --nstem: #344b2e; --vein: rgb(10 20 14 / .35);
  --sheen: #fff3cf; --text-glow: rgb(0 0 0 / .5); --mat: #0c1510;
  --card-bg: linear-gradient(160deg, #24362b, #16231b); --card-gap: #16231b; --oracle-glow: rgb(75 45 92 / .55);
  --hd-bg: linear-gradient(180deg, rgb(20 32 25 / .9), rgb(20 32 25 / .55));
  --ridge1: #1b2d22; --ridge2: #213a2b; --ridge3: #182a1f; --coin1: #3a5a40; --coin2: #1f2e25; --dusk1: #3b2448; --dusk2: #2a1a36;
  --vgT: #5a3870; --vgG: #1f5a46; --vgB: #244a6a; }
html[data-theme="light"] {
  --bg: #f4efe3; --glow: #fff3d6;
  --fg: #1f2e25; --muted: #5c695e;
  --gold: #b08a3a; --gold-hi: #7d5c1a; --sheen: #e3c377; --text-glow: rgb(125 92 26 / .2);
  --line: rgb(176 138 58 / .4); --surface: rgb(31 46 37 / .05); --field-bg: #fffdf7; --err: #b8322b;
  --nz2: #ffffff; --mat: #faf5e8; --backdrop: rgb(31 46 37 / .55);
  --card-bg: linear-gradient(160deg, #fbf6e9, #efe4c9); --card-gap: #f7f1e2; --oracle-glow: rgb(170 140 200 / .4);
  --hd-bg: linear-gradient(180deg, rgb(244 239 227 / .94), rgb(244 239 227 / .72));
  --ridge1: #b7cbb2; --ridge2: #cadcc4; --ridge3: #e2eadb; --coin1: #a9c7a2; --coin2: #eef2e6; --dusk1: #ddd0ea; --dusk2: #cfc0df;
  --vgT: #c9b6dd; --vgG: #bfe0cf; --vgB: #bcd3e6;
  --n1: #4f8a46; --n2: #5e9a50; --n3: #6a9a46; --n4: #7fae5a; --nstem: #3f6b37; --vein: rgb(20 32 25 / .3);
  color-scheme: light;
}
html[data-theme="light"][data-page="o-mnie"]  { --bg: #f3ead9; --glow: #fde9c8; }
html[data-theme="light"][data-page="tarot"]   { --bg: #ede6f2; --glow: #e3d3ee; }
html[data-theme="light"][data-page="galeria"] { --bg: #e9f0ea; --glow: #d6e8dc; }
html[data-theme="light"][data-page="blog"]    { --bg: #e8eef3; --glow: #d6e3ee; }
html[data-theme="light"][data-page="kontakt"] { --bg: #f3e8e6; --glow: #f0d6d3; }
.foliage__strip { background-image: var(--tile-dark); }
html[data-theme="light"] .foliage__strip { background-image: var(--tile-light); }
html[data-theme="light"] .foliage--near { filter: drop-shadow(0 6px 10px rgb(31 46 37 / .25)); }
html[data-theme="light"] .foliage--far { opacity: .7; }
.veil__moons { color: var(--gold-hi); }
.frame, .art-card .art, .work .art { background: var(--mat); }
.session { background: var(--surface); }
html[data-theme="light"] .tc--front { box-shadow: inset 0 0 0 5px #f5ecd8, inset 0 0 0 6px var(--gold); }
html[data-theme="light"] .ph__f { fill-opacity: .9; }

/* Przełącznik dnia i nocy */
.theme-btn { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--gold-hi); cursor: pointer; box-shadow: 0 4px 14px -6px rgb(0 0 0 / .4); transition: transform .6s var(--ease), background-color .3s, color .3s; }
.theme-btn:hover { transform: rotate(30deg); background: var(--gold); color: var(--bg); }
.theme-btn svg { width: 1.15rem; height: 1.15rem; }
.theme-btn .i-sun { display: none; }
html[data-theme="light"] .theme-btn .i-sun { display: block; }
html[data-theme="light"] .theme-btn .i-moon { display: none; }

/* ── Skraj lasu (B): kompozycja przypięta do okna. Góra: spód korony, środek: pnie, dół: runo. ── */
:root { --far-w: clamp(100px, 22vw, 360px); --mid-w: clamp(70px, 15vw, 260px); }
.forest-edge { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.forest-edge::before { content: ""; position: absolute; inset: 0; background: radial-gradient(110% 60% at 50% -5%, var(--glow), transparent 70%); }
.fx { position: fixed; top: -70px; bottom: -70px; width: var(--w); overflow: hidden; pointer-events: none; will-change: transform; }
.fx--l { left: 0; } .fx--r { right: 0; }
.fx--far { --w: calc(var(--far-w) * 1.4); z-index: -1; }
.fx--mid { --w: calc(var(--mid-w) * 1.4); z-index: -1; }
.fx--near { --w: var(--near-w); z-index: 30; }
.fx__trunk { position: absolute; inset: 0; background: var(--tr) 0 0 / 100% 100% no-repeat; }
.fx__canopy { position: absolute; top: 50px; left: 0; width: 100%; aspect-ratio: 300 / 420; background: var(--cv) 0 0 / 100% 100% no-repeat; }
.fx__floor { position: absolute; bottom: 50px; left: 0; width: 100%; aspect-ratio: 300 / 460; background: var(--fl) 0 0 / 100% 100% no-repeat; }
.fx--far .fx__canopy, .fx--mid .fx__canopy { aspect-ratio: 420 / 420; }
.fx--far .fx__floor, .fx--mid .fx__floor { aspect-ratio: 420 / 460; }
html[data-theme="light"] .fx__trunk { background-image: var(--trl); }
html[data-theme="light"] .fx__canopy { background-image: var(--cvl); }
html[data-theme="light"] .fx__floor { background-image: var(--fll); }
html[data-theme="light"] .fx--far { opacity: .45; }
html[data-theme="light"] .fx--mid { opacity: .9; }
.fx--far, .fx--mid { transition: filter 1.1s; }
html[data-page="tarot"] .fx--far, html[data-page="tarot"] .fx--mid { filter: hue-rotate(150deg) saturate(.7) brightness(.95); }
html[data-page="blog"] .fx--far, html[data-page="blog"] .fx--mid { filter: hue-rotate(40deg) saturate(.8); }
html[data-page="kontakt"] .fx--far { filter: hue-rotate(-110deg) saturate(.6) brightness(.9); }
/* Ożywienie bliskiego planu: spadający liść, nocą świetliki w runie, w dzień smugi światła na pniach */
.fx__leaf { position: absolute; top: 40px; left: var(--x); width: 24px; height: 24px; color: var(--n2); opacity: 0; animation: leaf-fall 17s var(--d) linear infinite; }
.fx__leaf use { transform-box: fill-box; transform-origin: center; animation: leaf-spin 4.5s linear infinite; }
@keyframes leaf-fall { 0% { transform: translate(0, 0); opacity: 0; } 6% { opacity: .95; } 25% { transform: translate(26px, 26vh); } 50% { transform: translate(-16px, 54vh); } 75% { transform: translate(22px, 80vh); } 94% { opacity: .9; } 100% { transform: translate(-8px, 106vh); opacity: 0; } }
@keyframes leaf-spin { to { transform: rotate(360deg) scaleX(-1); } }
.fx__firefly { position: absolute; left: var(--x); bottom: var(--y); width: 4px; height: 4px; border-radius: 50%; background: #ffe9a3; box-shadow: 0 0 8px 3px rgb(255 233 163 / .55); opacity: 0; animation: firefly 7.5s var(--d) ease-in-out infinite; }
@keyframes firefly { 0%, 100% { opacity: 0; transform: translate(0, 0); } 30% { opacity: 1; transform: translate(10px, -14px); } 60% { opacity: .15; transform: translate(-6px, -26px); } 80% { opacity: .9; transform: translate(8px, -36px); } }
html[data-theme="light"] .fx__firefly { display: none; }
.fx__ray { position: absolute; top: 0; left: var(--x); width: 70px; height: 72vh; transform-origin: 50% 0; transform: rotate(var(--rot)); display: none;
  background: linear-gradient(180deg, rgb(255 250 222 / .55), rgb(255 250 222 / 0) 78%); animation: ray 12s var(--d) ease-in-out infinite; }
@keyframes ray { 0%, 100% { opacity: .35; } 50% { opacity: .85; } }
html[data-theme="light"] .fx__ray { display: block; }
@media (max-width: 900px) {
  :root { --far-w: 48px; --mid-w: 32px; }
  .fx--near { display: none; }
}
@media (prefers-reduced-motion: reduce) { .fx__leaf, .fx__firefly, .fx__ray { animation: none; display: none; } }
/* ── Strona pracy: jak w galerii sztuki ─────────────────────────────────────── */
.praca__crumbs { display: flex; gap: .6rem; margin-bottom: 1.5rem; font-size: .95em; color: var(--muted); }
.praca__crumbs a { text-decoration: none; }
.praca__crumbs a:hover { color: var(--gold-hi); }
.praca__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.praca__main { margin: 0; }
.praca__img { width: 100%; height: auto; max-height: 78vh; object-fit: contain; }
.praca__thumbs { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.praca__thumb { all: unset; cursor: pointer; width: 5.5rem; aspect-ratio: 1; overflow: hidden; border: 2px solid transparent; border-radius: 3px; opacity: .75; transition: opacity .3s, border-color .3s; }
.praca__thumb:hover, .praca__thumb.is-active { opacity: 1; border-color: var(--gold); }
.praca__thumb:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.praca__thumb-img { width: 100%; height: 100%; object-fit: cover; }
.praca__kicker { color: var(--muted); margin: 0 0 .4rem; }
.praca__text h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin: 0 0 .4rem; color: var(--gold-hi); }
.praca__medium { font-size: 1.1em; color: var(--muted); margin-bottom: 1.6rem; }
.praca__buy { padding: 1.4rem 1.6rem; margin-bottom: 2rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.praca__buy p { margin: 0 0 .8rem; }
.praca__status { display: inline-flex; align-items: center; gap: .5rem; font-size: .9em; color: var(--gold-hi); }
.praca__status::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: #5aa76a; box-shadow: 0 0 8px rgb(90 167 106 / .7); }
.praca__status--sold { color: var(--muted); }
.praca__status--sold::before { background: var(--hib); box-shadow: none; }
.praca__price { display: flex; align-items: baseline; gap: 1rem; }
.praca__price span { color: var(--muted); font-size: .95em; }
.praca__price strong { font: 400 1.35rem var(--font-d); color: var(--fg); }
.praca__buy .btn { margin: .4rem 0 1rem; }
.praca__note { font-size: .9em; color: var(--muted); margin: 0 !important; }
.praca__story { margin-bottom: 1.8rem; }
.praca__meaning { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding: 1.2rem 1.4rem; margin-bottom: 1.8rem; border-left: 2px solid var(--gold); background: var(--surface); }
.praca__meaning-ico { width: 3rem; height: 3rem; color: var(--gold); }
.praca__meaning h2 { font-size: 1.3rem; margin: 0 0 .3rem; }
.praca__meaning p { margin: 0; color: var(--muted); }
.praca__details { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 1rem 2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.praca__details div { display: grid; gap: .15rem; }
.praca__details dt { font-size: .85em; color: var(--muted); }
.praca__details dd { margin: 0; }
.praca__related { margin-top: clamp(3rem, 7vw, 5rem); padding-top: 2.5rem; border-top: 1px solid var(--line); }
.praca__related h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); }
.praca__related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
.praca__back { margin-top: 2.5rem; }
.praca__back a { color: var(--gold-hi); }
.art-card { position: relative; }
.art-card__sold { position: absolute; top: 10px; left: 10px; padding: .15rem .6rem; font-size: .78rem; letter-spacing: .04em; color: #fff; background: rgb(122 42 36 / .9); border-radius: 3px; }
.art-card--sold .art { filter: saturate(.75); }
@media (max-width: 860px) {
  .praca__grid, .praca__related-grid { grid-template-columns: 1fr; }
  .praca__related-grid { grid-template-columns: repeat(2, 1fr); }
  .praca__img { max-height: 60vh; }
}