/* =========================================================================
   WARSTWA MAGII (11.2026): "nocna wędrówka z latarnią".
   Ładowana w base.html.twig po stylach strony, więc działa na wszystkich
   podstronach bez zmian w ich szablonach. Ozdobniki wektorowe w /magic/*.svg;
   grafiki wgrane w /admin/grafiki podmieniają je przez zmienne --ini-*, --art,
   --rule, --atlas (templates/_magic/_vars.html.twig).
   ========================================================================= */
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('/fonts/ebgaramond-normal-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('/fonts/ebgaramond-normal-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --read:'EB Garamond','Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  --gold-1:#f3d995;--gold-2:#b5863a;
  --art:url('/images/glowna/manifest-1280.webp');
  --ini-1:url('/magic/ini-1.svg');--ini-2:url('/magic/ini-2.svg');--ini-3:url('/magic/ini-3.svg');--ini-4:url('/magic/ini-4.svg');
  --rule:url('/magic/rule.svg');--atlas:none;
}

/* ---------- Niebo za całą stroną ---------- */
html{background:#0c122b}
body{background:transparent}
.sky{position:fixed;inset:-14% 0;z-index:-1;pointer-events:none;overflow:hidden}
.sky i{position:absolute;inset:0;background-repeat:repeat}
.sky i:nth-child(1){background-image:url('/magic/stars-a.svg');opacity:.7}
.sky i:nth-child(2){background-image:url('/magic/stars-b.svg')}
.sky::before{content:'';position:absolute;inset:0;background:var(--atlas) center/1024px repeat;opacity:.5}
.sky::after{content:'';position:absolute;inset:0;background:
  radial-gradient(50% 36% at 84% 22%,rgba(169,156,224,.09),transparent 70%),
  radial-gradient(44% 34% at 10% 62%,rgba(212,172,96,.05),transparent 70%)}

/* ---------- Nagłówek strony jako portal ---------- */
main .page-head{position:relative;isolation:isolate;overflow:hidden;padding:66px 24px 84px;border-bottom:0;
  background:var(--rule) center bottom 24px/min(340px,74%) auto no-repeat}
main .page-head.compact{padding-top:52px;padding-bottom:78px}
main .page-head::before{content:'';position:absolute;inset:0;z-index:-2;background:var(--art) center 36%/cover no-repeat;opacity:.46;
  -webkit-mask:radial-gradient(92% 130% at 50% 8%,#000 26%,transparent 76%);mask:radial-gradient(92% 130% at 50% 8%,#000 26%,transparent 76%)}
main .page-head::after{content:'';position:absolute;left:50%;top:44%;width:clamp(460px,58vw,820px);aspect-ratio:1;margin-left:calc(clamp(460px,58vw,820px) / -2);margin-top:calc(clamp(460px,58vw,820px) / -2);
  z-index:-1;background:url('/magic/ring.svg') center/contain no-repeat;opacity:.17}
main .page-head h1{font-size:clamp(38px,5.6vw,70px);line-height:1.02;letter-spacing:-.022em;max-width:20ch;text-shadow:0 2px 34px rgba(6,9,26,.85)}
main .page-head .lede{color:#e1dcc9;max-width:56ch;text-shadow:0 1px 18px rgba(6,9,26,.9)}
main .page-head .lede b{font-weight:600}
main .page-head .sign-medal{filter:drop-shadow(0 0 26px rgba(232,194,110,.42))}
main .page-head .eyebrow{color:#cfc9b6}

/* ---------- Głos latarni ---------- */
.whisper{position:relative;z-index:2;display:flex;align-items:center;gap:16px;max-width:680px;margin:-30px auto 0;padding:14px 26px 14px 20px;
  background:color-mix(in srgb,#0c122b 88%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid transparent;border-image:url('/magic/plate-s.svg') 30 / 14px stretch;
  box-shadow:0 20px 40px -24px rgba(0,0,0,.85)}
.whisper p{margin:0;color:var(--ink)}
.lantern{flex:none;width:30px;height:auto;overflow:visible;filter:drop-shadow(0 0 9px rgba(255,186,84,.6))}
img.lantern{width:44px}
.lantern .fl{transform-origin:20px 40px;transform-box:view-box}
@media(max-width:720px){.whisper{margin:-30px 16px 0;padding:12px 16px 12px 14px;gap:12px}.lantern{width:26px}}

/* ---------- Czytanie: książkowa czcionka zamiast systemowej ----------
   Na wszystkich akapitach, bez ruszania 230 szablonów. Garamond ma niską wysokość
   małych liter, więc font-size-adjust wyrównuje go optycznie: tekst 16px wygląda jak
   ok. 19-20px, a drobne przypisy zostają proporcjonalnie drobne. */
main :where(p,dd,blockquote,.prose li,.ln-block li,.wrap li,.rd-text,.md-text):not(.adm-wrap *,.nx *,.ct-list *,.st-more *,.fresh-list *,.signs *,.born *,.wl-list *,.live *,.btn,.alert,.alert *){
  font-family:var(--read);font-size-adjust:.49;letter-spacing:.002em}
main :where(p,.rd-text,.md-text):not(.adm-wrap *,.foot,.note,.hint,.sub,.alert){color:#ece6d6}
main .prose{max-width:62ch}
main .prose p,main .ln-block>p{line-height:1.62}
.ini,.ini *{font-size-adjust:none}
main .page-head .lede{font-size:16.5px;line-height:1.5}
.whisper p{font-size:15.5px;line-height:1.42}
/* Strona główna ma własne rozmiary: wyrównane tak, żeby po adjust zostały jak były. */
main .st-lead{font-size:14.5px}
main .mf-p,main .fin p,main .wl-side p{font-size:14.5px}
main .home-hero .lede{font-size:14.5px}
main .home-hero .hero-note{font-size:11.5px}
main .hero-form>p{font-size:12.5px}
main .lp-out p{font-size:13px}

/* Inicjał inkrustowany: ramka-płytka + żywa litera (polskie znaki bez kłopotu). */
.ini{float:left;display:flex;align-items:center;justify-content:center;width:5.1em;height:5.1em;margin:.3em .7em .1em 0;
  background:var(--ini-1) center/contain no-repeat;
  font-family:var(--serif);font-weight:600;font-size:1em;line-height:1;color:var(--gold-1);
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.55))}
.ini b{font-weight:600;font-size:3.5em;line-height:1;letter-spacing:0;margin-top:-.08em;text-shadow:0 0 16px rgba(243,217,149,.5)}
.ini--2{background-image:var(--ini-2)}.ini--3{background-image:var(--ini-3)}.ini--4{background-image:var(--ini-4)}
@media(max-width:520px){.ini{width:4.3em;height:4.3em;margin-right:.55em}.ini b{font-size:3em}}

/* Przypis "Skąd to się wzięło" i podobne: notka na marginesie atlasu. */
main .bz-note{border:1px solid transparent;border-image:url('/magic/plate-s.svg') 30 / 14px stretch;border-radius:0;padding:16px 22px;
  background:color-mix(in srgb,#1b2350 52%,transparent);font-family:var(--read);font-size-adjust:.49;font-size:14.5px;line-height:1.55;color:#d9d3c2}
main .bz-note b{color:var(--gold-1);font-weight:600}

/* Nagłówki sekcji: gwiazdka i złota linia. */
main :is(.ln-block>h2,.prose>h2,.wrap.narrow>h2,.synthesis>h2){position:relative;font-size:clamp(27px,3.1vw,33px);line-height:1.14;padding:0 0 11px 0;margin-bottom:15px;
  background:linear-gradient(90deg,var(--gold-2),transparent) left bottom/min(280px,70%) 1px no-repeat}
main h2:not(.xl,.nx-h,.st-h):not(.home-hero *,.fresh *,.panel *,.unlock-cta *,.ct-sec *,.atlas *,.adm-wrap *)::before{content:'';display:inline-block;width:.6em;height:.6em;margin-right:.42em;vertical-align:.03em;background:url('/magic/star.svg') center/contain no-repeat}
main .prose h3{font-size:22px}

/* Przerywnik między sekcjami. */
main .ln-block+.ln-block{margin-top:38px;padding-top:54px;background:var(--rule) center top/min(300px,70%) auto no-repeat}
main .prose hr{border:0;height:36px;margin:30px 0;background:var(--rule) center/min(320px,80%) auto no-repeat}

/* Listy z gwiazdką zamiast kropki. */
main .prose ul{list-style:none;padding-left:26px}
main .prose ul>li{position:relative}
main .prose ul>li::before{content:'';position:absolute;left:-24px;top:.5em;width:.62em;height:.62em;background:url('/magic/star.svg') center/contain no-repeat}

/* ---------- Tablice z ozdobnymi narożnikami ---------- */
main :is(.panel,.unlock-cta,.rd-item):not(.adm-wrap *){border:1px solid transparent;border-image:url('/magic/plate.svg') 50 / 26px stretch;border-radius:0;
  background:linear-gradient(180deg,color-mix(in srgb,#1b2350 62%,transparent),color-mix(in srgb,#10163a 78%,transparent));
  box-shadow:0 26px 50px -34px rgba(0,0,0,.9)}
main :is(.hub-card,.feat,.wd-card,.nx-card,.by-item,.acc-card):not(.adm-wrap *){border:1px solid transparent;border-image:url('/magic/plate-s.svg') 30 / 14px stretch;border-radius:0;
  background:linear-gradient(180deg,color-mix(in srgb,#1b2350 58%,transparent),color-mix(in srgb,#10163a 74%,transparent))}
main :is(.hub-card,.feat,.wd-card,.nx-card):hover{background:linear-gradient(180deg,color-mix(in srgb,#b5863a 16%,#1b2350),color-mix(in srgb,#10163a 80%,transparent))}

/* ---------- Formularz jak rytuał ---------- */
main form.chart-form:not(.panel *,.hero-form *,.adm-wrap *){padding:30px 28px;border:1px solid transparent;border-image:url('/magic/plate.svg') 50 / 26px stretch;
  background:linear-gradient(180deg,color-mix(in srgb,#1b2350 60%,transparent),color-mix(in srgb,#10163a 76%,transparent));box-shadow:0 26px 50px -34px rgba(0,0,0,.9)}
:where(main input[type=date],main input[type=time],main input[type=text],main input[type=number],main input[type=email],main input[type=search],main input[type=password],main select,main textarea){
  font:inherit;font-size:15px;color:var(--ink);background:#141b3c;border:1px solid color-mix(in srgb,#928dae 58%,#2a3157);border-radius:10px;padding:10px 12px;min-height:44px;color-scheme:dark}
main .field span,main .field>label{font-family:var(--read);font-size-adjust:.49;font-size:13px;color:#d9d3c2}
main .field input:focus,main .field select:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--gold-1) 18%,transparent),0 0 26px color-mix(in srgb,var(--gold-1) 22%,transparent)}

/* Przyciski: złoty błysk przy najechaniu. */
.btn{position:relative;overflow:hidden}
.btn:not(.ghost){background:linear-gradient(180deg,#ecca80,#d6ae5d)}
.btn:not(.ghost)::after{content:'';position:absolute;top:0;bottom:0;left:-70%;width:45%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-18deg);transition:left .7s cubic-bezier(.16,1,.3,1)}
.btn:not(.ghost):hover::after{left:125%}

/* ---------- Dalsze ścieżki ---------- */
.nx{border-top:0;padding-top:58px;background:var(--rule) center top/min(320px,76%) auto no-repeat}
.nx-h::before{content:'';display:inline-block;width:.6em;height:.6em;margin-right:.42em;vertical-align:.03em;background:url('/magic/star.svg') center/contain no-repeat}
.nx-h{font-size:clamp(27px,3.1vw,33px)}
.nx-list b{font-size:20px}
.nx-list span{font-family:var(--read);font-size-adjust:.49;font-size:13px;color:#c9c3d4}
.next-wrap{padding-top:0}

/* ---------- Złota nić z latarnią (długie strony) ---------- */
.thread{position:fixed;z-index:40;left:max(14px,calc(50vw - 560px - 64px));top:50%;transform:translateY(-50%);height:min(62vh,520px);width:30px;display:none}
.thread::before{content:'';position:absolute;left:14px;top:0;bottom:0;width:1px;background:color-mix(in srgb,var(--gold-1) 26%,transparent)}
.thread-fill{position:absolute;left:14px;top:0;width:1px;height:calc(var(--p,0) * 100%);background:linear-gradient(180deg,transparent,var(--gold-1));box-shadow:0 0 8px rgba(243,217,149,.55)}
.thread-lamp{position:absolute;left:3px;top:calc(var(--p,0) * 100%);width:24px;margin-top:-18px;pointer-events:none}
.thread-lamp .lantern{width:22px}
.thread ol{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.thread li{position:absolute;left:0;width:30px;height:24px;margin-top:-12px}
.thread a{display:block;width:30px;height:24px;position:relative}
.thread a::before{content:'';position:absolute;left:11px;top:8px;width:7px;height:7px;transform:rotate(45deg);background:#0c122b;border:1px solid color-mix(in srgb,var(--gold-1) 55%,transparent);transition:background .2s,box-shadow .2s}
.thread a.past::before,.thread a:hover::before{background:var(--gold-1);box-shadow:0 0 10px rgba(243,217,149,.7)}
.thread span{position:absolute;left:34px;top:50%;transform:translateY(-50%);white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis;padding:4px 12px;
  background:#10163a;border:1px solid color-mix(in srgb,var(--gold-1) 34%,transparent);font-family:var(--read);font-size:16px;color:var(--ink);opacity:0;pointer-events:none;transition:opacity .15s}
.thread a:hover span,.thread a:focus-visible span{opacity:1}
@media(min-width:1240px){.thread{display:block}}
.thread-m{position:fixed;left:0;right:0;top:65px;height:2px;z-index:90;pointer-events:none;background:linear-gradient(90deg,var(--gold-2),var(--gold-1));transform-origin:0 50%;transform:scaleX(var(--p,0));box-shadow:0 0 8px rgba(243,217,149,.5)}
@media(min-width:1240px){.thread-m{display:none}}

/* ---------- Rytuał przy liczeniu ---------- */
.ritual{position:fixed;inset:0;z-index:3000;display:grid;place-items:center;align-content:center;gap:22px;text-align:center;opacity:0;visibility:hidden;
  background:radial-gradient(60% 60% at 50% 45%,rgba(28,36,82,.96),rgba(6,9,26,.98));transition:opacity .28s .1s,visibility 0s .38s}
.ritual.on{opacity:1;visibility:visible;transition:opacity .28s .1s}
.ritual-ring{position:relative;width:min(70vw,340px);aspect-ratio:1;display:grid;place-items:center}
.ritual-ring::before{content:'';position:absolute;inset:0;background:url('/magic/ring.svg') center/contain no-repeat;opacity:.85}
.ritual .lantern{width:56px}
.ritual p{margin:0;padding:0 24px;font-family:var(--serif);font-weight:600;font-size:clamp(24px,3.4vw,34px);color:var(--ink)}

/* ---------- Pył za kursorem ---------- */
.dust{position:fixed;inset:0;z-index:2500;pointer-events:none}

/* ---------- Stopka ---------- */
.site-footer{border-top:0;background:var(--rule) center 10px/min(340px,74%) auto no-repeat,color-mix(in srgb,#141b3c 55%,#0c122b)}
.sf-in{padding-top:58px}
.newsletter{background:color-mix(in srgb,#000 22%,#0c122b)}

/* ---------- Ruch (tylko gdy nikt nie prosił o jego ograniczenie) ---------- */
@media (prefers-reduced-motion: no-preference){
  .sky i:nth-child(2){animation:twinkle 9s ease-in-out infinite alternate}
  @keyframes twinkle{from{opacity:.35}to{opacity:1}}
  main .page-head::after{animation:ringTurn 240s linear infinite}
  @keyframes ringTurn{to{transform:rotate(360deg)}}
  .lantern .fl{animation:flame 2.4s ease-in-out infinite}
  @keyframes flame{0%,100%{transform:scale(1);opacity:1}35%{transform:scale(1.06,1.14);opacity:.88}70%{transform:scale(.95,1.04);opacity:.96}}
  .ritual-ring::before{animation:ringTurn 9s linear infinite}
  .sh-logo .lg{animation:logoGlint 7s ease-in-out infinite}
  @keyframes logoGlint{0%,88%,100%{filter:none;transform:none}94%{filter:drop-shadow(0 0 7px rgba(243,217,149,.9));transform:rotate(45deg) scale(1.12)}}

  @supports (animation-timeline: scroll()){
    /* Gwiazdy przesuwają się wolniej niż strona - głębia nocnego nieba. */
    .sky i:nth-child(1){animation:skyA linear both;animation-timeline:scroll(root)}
    .sky i:nth-child(2){animation:twinkle 9s ease-in-out infinite alternate,skyB linear both;animation-timeline:auto,scroll(root)}
    @keyframes skyA{to{translate:0 -5%}}
    @keyframes skyB{to{translate:0 -10%}}
  }

  /* Miękkie przejście między stronami: złota mgła zamiast skoku. */
  @view-transition{navigation:auto}
  .site-header{view-transition-name:site-header}
  ::view-transition-old(root){animation:vtOut .22s ease-in both}
  ::view-transition-new(root){animation:vtIn .46s cubic-bezier(.16,1,.3,1) both}
  @keyframes vtOut{to{opacity:0;filter:blur(6px) brightness(.72)}}
  @keyframes vtIn{from{opacity:0;filter:blur(9px) brightness(1.3)}}
}