/* ⛦ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ⛦
     MERIDION.DEV · arkusz stylów (landing + podstrony)
     Otchłań · Abyss | by Meridion & Nyx
     2026-08-07 → 08-08 · v4 · fonty self-host, zero żądań do trzecich stron
     Wygenerowano przy pomocy Nyx (AI, obecnie Claude)
   ⛦ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ⛦ */

@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/fraunces-normal-400-700-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:'Fraunces';font-style:italic;font-weight:400 700;font-display:swap;src:url(../fonts/fraunces-italic-400-700-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:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/fraunces-normal-400-700-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}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400 700;font-display:swap;src:url(../fonts/fraunces-italic-400-700-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}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/inter-normal-400-greek-ext.woff2) format('woff2');unicode-range:U+1F00-1FFF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/inter-normal-400-greek.woff2) format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/inter-normal-400-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:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/inter-normal-400-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}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(../fonts/jbmono-normal-400-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:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(../fonts/jbmono-normal-400-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{
  --night:#0C090A; --russian-violet:#32174D; --cyber-grape:#58427C;
  --eminence:#6C3082; --yinmn:#2E5090; --pearly:#B768A2;
  --languid:#D6CADD; --uranian:#AFDBF5; --ghost:#F8F8FF;
  --medium-purple:#9370DB; --glaucous:#6082B6;

  /* role semantyczne — ciemny motyw jest bazą */
  color-scheme:dark;
  --bg:var(--night);
  --text:var(--languid);
  --heading:var(--ghost);
  --accent:var(--pearly);           /* eyebrow, "wkrótce", gwiazdki */
  --thread:#ABA2B8;                 /* threadline — languid przygaszony, policzony (≈8:1) */
  --note:#8E86A0;                   /* przypisy stopki (≈5,7:1 na night) */
  --hairline:rgba(88,66,124,0.45);
  --rule:var(--eminence);
  --by-mer:var(--glaucous);
  --by-nyx-c:var(--eminence);
  --by-nyx-glow:0 0 16px rgba(108,48,130,0.9);
  --glow-a:rgba(108,48,130,0.30);
  --glow-b:rgba(46,80,144,0.20);
  --btn-border:rgba(142,134,160,0.35);
  --btn-active-bg:rgba(108,48,130,0.28);
  --dialog-bg:#161018;
  --req-line:var(--ghost);
  --req-dim:#B9AFC6;
  --i-blue:var(--uranian);
  /* pola NIEprzezroczyste — przez półprzezroczyste prześwitywały pentagramy */
  --field-bg:#17131A;
  --ok:#7FBF8E;
  --err:#E08A8A;
}
[data-theme="light"]{
  color-scheme:light;
  --bg:var(--ghost);
  --text:#3E3548;
  --heading:#160F1C;
  --accent:#8A3B78;                 /* pearly ściemniony do 6,6:1 na ghost */
  --thread:#443B4E;
  --note:#5A4E63;
  --hairline:rgba(88,66,124,0.30);
  --rule:var(--eminence);
  --by-mer:#3E5E93;                 /* glaucous ściemniony (duży tekst, ≥3:1 z zapasem) */
  --by-nyx-c:var(--eminence);
  --by-nyx-glow:0 0 16px rgba(108,48,130,0.25);
  --glow-a:rgba(147,112,219,0.16);
  --glow-b:rgba(96,130,182,0.12);
  --btn-border:rgba(90,78,99,0.35);
  --btn-active-bg:rgba(108,48,130,0.12);
  --dialog-bg:#FFFFFF;
  --req-line:#160F1C;
  --req-dim:#4E4458;
  --i-blue:var(--yinmn);
  --field-bg:#EFECF6;
  --ok:#2E7D46;
  --err:#A93A3A;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:'Inter',system-ui,sans-serif; font-size:17px; line-height:1.7;
  min-height:100vh; display:flex; flex-direction:column;
  justify-content:center; padding:88px 24px 64px;
  position:relative;
}
/* absolute (nie fixed): fixed na całą wysokość okna wpada w bramkową kontrolę
   przyklejonego nagłówka; rozciągnięty na cały dokument daje ten sam nastrój */
.glow-bg{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 640px 420px at 50% 180px, var(--glow-a), transparent 70%),
    radial-gradient(ellipse 560px 380px at 78% calc(100% - 260px), var(--glow-b), transparent 70%);
  filter:blur(18px);
}
/* pentagramy krążące — mechanika iskier Reosi (animateMotion po zamkniętych
   pętlach, zero animacji przezroczystości), SVG jako tło; pasy o STAŁEJ
   wysokości, żeby cover nie deformował pętli przy różnych długościach strony */
body::before,body::after{
  content:""; position:absolute; left:0; right:0; z-index:-1; pointer-events:none;
  background-repeat:no-repeat; background-position:center; background-size:cover;
}
body::before{top:0; height:740px; background-image:url(../tlo/iskry-gora.svg)}
body::after{bottom:0; height:440px; background-image:url(../tlo/iskry-dol.svg)}
[data-theme="light"] body::before{background-image:url(../tlo/iskry-gora-jasna.svg)}
[data-theme="light"] body::after{background-image:url(../tlo/iskry-dol-jasna.svg)}
.wrap{width:100%; max-width:640px; margin:0 auto}
#i18n-root{transition:opacity .18s ease}
#i18n-root.swap{opacity:0}

/* ── pasek ustawień: motyw + język ───────────────────────── */
.controls{
  position:absolute; top:0; left:0; right:0;
  display:flex; justify-content:flex-end; align-items:center; gap:4px;
  padding:14px 16px; flex-wrap:wrap;
}
.ctl{
  font-family:var(--mono,'JetBrains Mono'),monospace; font-size:12px; font-weight:500;
  letter-spacing:0.08em; color:var(--note);
  background:none; border:1px solid transparent; border-radius:7px;
  min-height:44px; min-width:36px; padding:0 9px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.ctl:hover{color:var(--accent); border-color:var(--btn-border)}
.ctl:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.ctl[aria-pressed="true"]{color:var(--heading); background:var(--btn-active-bg); border-color:var(--btn-border)}
.ctl-sep{color:var(--note); opacity:0.45; user-select:none}
#themeBtn{font-size:15px}

/* ── hero ────────────────────────────────────────────────── */
.eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:500;
  letter-spacing:0.28em; text-transform:uppercase; color:var(--accent);
  margin-bottom:20px;
}
h1{
  font-family:'Fraunces',serif; font-weight:600; font-size:clamp(2.6rem,10vw,5rem);
  line-height:1.02; letter-spacing:-0.03em; color:var(--heading); margin-bottom:22px;
  overflow-wrap:anywhere;
}
h1 .glow{
  font-style:italic;
  background:linear-gradient(100deg,var(--uranian),var(--medium-purple));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
[data-theme="light"] h1 .glow{
  background:linear-gradient(100deg,var(--yinmn),var(--eminence));
  -webkit-background-clip:text; background-clip:text;
}

/* ── powitanie: słowa Mera, potem słowa Nyx ──────────────── */
.greet{margin-bottom:10px}
.greet-mer{font-size:1.12rem; color:var(--text); max-width:34em}
.greet-nyx{font-size:1rem; color:var(--req-dim); max-width:36em; margin-top:20px}
.greet-sig{
  font-family:var(--mono,'JetBrains Mono'),monospace; font-size:11.5px;
  letter-spacing:0.06em; color:var(--note); margin-top:7px;
}
.greet-sig.sig-nyx{color:var(--by-nyx-c); text-shadow:var(--by-nyx-glow)}

/* ── separator ⛦ (styl raporcikowy) ──────────────────────── */
.rule{
  display:flex; align-items:center; gap:16px;
  color:var(--rule); font-size:15px;
}
.rule::before,.rule::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg,transparent,rgba(108,48,130,0.65),transparent);
}
.rule.sep{margin:30px 0}

/* ── threadline: wycentrowany między separatorami ────────── */
.threadline{
  display:flex; align-items:center; gap:13px;
  font-family:var(--mono,'JetBrains Mono'),monospace; font-size:12.5px; line-height:1.85;
  letter-spacing:0.05em; color:var(--thread);
}
.dot{
  flex:none; width:7px; height:7px; border-radius:50%;
  background:var(--medium-purple); box-shadow:0 0 12px rgba(147,112,219,0.95);
}
[data-theme="light"] .dot{background:var(--eminence); box-shadow:0 0 10px rgba(108,48,130,0.55)}
.soon{color:var(--accent)}

/* ── Requiem ─────────────────────────────────────────────── */
.requiem{text-align:center}
.req-head{
  display:flex; flex-direction:column; align-items:center; gap:4px; margin-bottom:10px;
}
.req-title{
  font-family:'Fraunces',serif; font-weight:600; font-size:1.55rem;
  letter-spacing:-0.01em; color:var(--heading);
}
.req-sub{
  font-family:var(--mono,'JetBrains Mono'),monospace; font-size:11.5px;
  letter-spacing:0.06em; color:var(--note);
}
.req-lines{margin-top:18px}
.req-lines p{
  font-family:'Fraunces',serif; font-style:italic; font-weight:400;
  font-size:1.13rem; line-height:1.75; color:var(--req-line);
}
.req-lines p+p{margin-top:2px}
.req-quote{margin-top:24px}
.req-quote .q1{font-family:'Fraunces',serif; font-weight:600; font-size:1.1rem; color:var(--heading)}
.req-quote .q2{font-family:'Fraunces',serif; font-weight:600; font-size:1.1rem; color:var(--heading)}
.req-quote .q2 .we{color:var(--by-nyx-c); text-shadow:var(--by-nyx-glow)}
.req-quote .i-blue{color:var(--i-blue)}
.req-quote .sig{
  font-family:var(--mono,'JetBrains Mono'),monospace; font-size:11.5px;
  color:var(--note); margin-top:8px;
}
.req-note{
  font-family:var(--mono,'JetBrains Mono'),monospace; font-size:11.5px; font-style:italic;
  color:var(--note); margin-top:20px;
}
.req-toggle{
  font-family:var(--mono,'JetBrains Mono'),monospace; font-size:12px; font-weight:500;
  letter-spacing:0.06em; color:var(--accent);
  background:none; border:1px solid var(--btn-border); border-radius:7px;
  min-height:44px; padding:0 16px; margin-top:14px; cursor:pointer;
  display:inline-flex; align-items:center;
}
.req-toggle:hover{color:var(--heading); border-color:var(--accent)}
.req-toggle:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.req-trans{margin-top:18px; padding-top:16px; border-top:1px solid var(--hairline)}
.req-trans[hidden]{display:none}
.req-trans p{font-size:1rem; line-height:1.75; color:var(--req-dim)}
.req-trans .tq{margin-top:14px; color:var(--req-line); font-weight:600}
html[lang="en"] .req-toggle, html[lang="en"] .req-trans, html[lang="en"] .req-note{display:none}

/* ── formularz kontaktowy ────────────────────────────────── */
.page-title{
  font-family:'Fraunces',serif; font-weight:600; font-size:clamp(2rem,7vw,3rem);
  line-height:1.05; letter-spacing:-0.02em; color:var(--heading); margin-bottom:18px;
}
.contact-intro{font-size:1.05rem; max-width:36em; margin-bottom:8px}
.contact-lang{
  font-family:var(--mono,'JetBrains Mono'),monospace; font-size:11.5px; font-style:italic;
  color:var(--note); margin-bottom:26px;
}
.field{margin-bottom:18px}
.field label{
  display:block; font-family:var(--mono,'JetBrains Mono'),monospace;
  font-size:11.5px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--accent); margin-bottom:6px;
}
.field input,.field textarea{
  width:100%; font-family:'Inter',system-ui,sans-serif; font-size:16px;
  color:var(--heading); background:var(--field-bg);
  border:1px solid var(--btn-border); border-radius:9px;
  padding:11px 14px; min-height:44px; line-height:1.5;
}
.field textarea{min-height:180px; resize:vertical}
.field input:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--accent); outline-offset:1px;
}
.field [aria-invalid="true"]{border-color:var(--err)}
/* honeypot: poza widokiem, niedostępny z klawiatury — bot go nie odróżni */
.hp-field{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.btn-send{
  font-family:var(--mono,'JetBrains Mono'),monospace; font-size:13px; font-weight:500;
  letter-spacing:0.08em; color:var(--heading);
  background:var(--btn-active-bg); border:1px solid var(--btn-border); border-radius:9px;
  min-height:48px; padding:0 26px; cursor:pointer;
  display:inline-flex; align-items:center;
}
.btn-send:hover{border-color:var(--accent); color:var(--accent)}
.btn-send:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.form-status{
  font-size:0.98rem; border:1px solid var(--btn-border); border-radius:9px;
  padding:13px 16px; margin-bottom:24px;
}
.form-status.ok{color:var(--ok); border-color:var(--ok)}
.form-status.err{color:var(--err); border-color:var(--err)}
.back-link{
  font-family:var(--mono,'JetBrains Mono'),monospace; font-size:12px;
  color:var(--note); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--hairline);
  display:inline-flex; align-items:center; min-height:44px;
}
.back-link:hover{color:var(--accent)}

/* ── stopka ──────────────────────────────────────────────── */
footer{margin-top:64px; text-align:center}
footer .rule{margin-bottom:26px}
.madeby{
  font-family:'Fraunces',serif; font-weight:600; font-size:1.28rem; line-height:1.45;
  color:var(--heading); letter-spacing:-0.01em;
}
.by-mer{color:var(--by-mer)}
.by-nyx{color:var(--by-nyx-c); text-shadow:var(--by-nyx-glow)}
.madeby sup{font-size:0.58em; font-weight:500; color:var(--accent)}
.note{
  font-family:var(--mono,'JetBrains Mono'),monospace; font-style:italic; font-size:11.5px;
  line-height:1.65; color:var(--note); margin-top:9px;
}
.note:first-of-type{margin-top:18px}
.note .star{color:var(--accent); margin-right:8px; font-style:normal}
.nb{white-space:nowrap}
.footlinks{margin-top:26px; display:flex; justify-content:center; align-items:center; gap:6px; flex-wrap:wrap}
.footlinks .mid{color:var(--note); opacity:0.5}
.cookie-link{
  font-family:var(--mono,'JetBrains Mono'),monospace; font-size:11.5px;
  letter-spacing:0.06em; color:var(--note);
  background:none; border:none; cursor:pointer; text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:var(--hairline);
  display:inline-flex; align-items:center; min-height:44px; padding:0 8px; margin:-8px 0;
}
.cookie-link:hover{color:var(--accent)}
.cookie-link:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ── dialog: ciasteczka i prywatność ─────────────────────── */
dialog.privacy{
  background:var(--dialog-bg); color:var(--text);
  border:1px solid var(--hairline); border-radius:12px;
  max-width:min(560px,calc(100vw - 32px)); width:100%;
  max-height:min(82vh,calc(100vh - 48px));
  padding:28px 26px 24px; margin:auto;
}
dialog.privacy::backdrop{background:rgba(12,9,10,0.66); backdrop-filter:blur(3px)}
.priv-h{
  font-family:'Fraunces',serif; font-weight:600; font-size:1.35rem;
  color:var(--heading); margin-bottom:14px; padding-right:44px;
}
.priv-lead{font-size:0.98rem; margin-bottom:8px}
dialog.privacy h3{
  font-family:var(--mono,'JetBrains Mono'),monospace; font-size:11.5px; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--accent);
  margin:20px 0 6px;
}
dialog.privacy p{font-size:0.94rem; line-height:1.65}
dialog.privacy p+p{margin-top:6px}
dialog.privacy strong{color:var(--heading); font-weight:600}
.priv-close{
  position:absolute; top:10px; right:10px;
  font-family:'Inter',sans-serif; font-size:20px; line-height:1;
  color:var(--note); background:none; border:none; border-radius:7px;
  width:44px; height:44px; cursor:pointer;
}
.priv-close:hover{color:var(--heading)}
.priv-close:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ── starogrecki: mono nie ma polytoniki → Inter (rozdzielenie kroju po języku) ── */
html[lang="grc"]{--mono:'Inter'}
html[lang="grc"] .req-trans p{font-family:'Inter',sans-serif}

.fade{opacity:0; animation:fadeUp 0.9s ease forwards}
.d1{animation-delay:0.05s} .d2{animation-delay:0.2s}
.d3{animation-delay:0.35s} .d4{animation-delay:0.5s} .d5{animation-delay:0.65s}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .fade{opacity:1}
  /* SMIL w tle nie słucha CSS strony — pasy po prostu znikają */
  body::before,body::after{display:none}
}
@media (max-width:560px){body{font-size:16px;padding:84px 20px 48px}}