/*
Theme Name: Elizabeth
Theme URI: https://luksusspokoju.com
Author: Vale & Daughter
Description: Motyw jednostronicowy powieści „Elizabeth". Wierne przeniesienie finalnego projektu HTML. Wszystkie treści, zdjęcia i odnośniki edytowalne w Wygląd → Dostosuj. Bez wtyczek, bez zasobów zewnętrznych.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: elizabeth
Tags: one-column, custom-colors, editor-style, full-width-template
*/

/* ==========================================================================
   UWAGA · Projekt wizualny jest zamknięty. Treść zmienia się w panelu:
   Wygląd → Dostosuj → Elizabeth. Fonty EB Garamond (OFL) w assets/fonts/.

   v1.1.0 · READABILITY UPDATE
   Zmieniona wyłącznie warstwa czytelności: skala pisma, interlinia, miara
   wiersza, marginesy, wielkości elementów drobnych i pola dotyku.
   Bez zmian: architektura, kolejność sekcji, kolory, zdjęcia, fonty, animacje.

   POWÓD · EB Garamond ma wysokość x równą 0,40 em (zmierzone w pliku fontu).
   Typowy krój tekstowy ma 0,50–0,52 em. Ten sam rozmiar w pikselach czyta się
   tu o ~22% mniej niż w kroju referencyjnym — stąd wrażenie drobnego druku.
   Cała skala poniżej jest liczona wysokością x, nie rozmiarem nominalnym.
   ========================================================================== */

@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/ebgaramond-400.woff2) format('woff2')}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/ebgaramond-400i.woff2) format('woff2')}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/ebgaramond-500.woff2) format('woff2')}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/ebgaramond-600.woff2) format('woff2')}

/* --- 1 · ZMIENNE ---------------------------------------------------------- */
:root{
  --kreda:#DEDBD2; --cicha:#9DA39C; --mosiadz:#C0A468;
  --serif:"EB Garamond",Georgia,serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Liberation Mono","Courier New",monospace;

  /* proza · 24,0 px na telefonie → 28,5 px od 1350 px wzwyż (było 20,8 → 25,3) */
  --t:clamp(1.5rem,.45vw + 1.4rem,1.78rem);

  /* skala kapitalikowa · jeden ciąg zamiast pięciu przypadkowych wartości.
     Dolny próg 12,2 px zamiast dotychczasowych 9,3–10,2 px. */
  --m-s:clamp(.7rem,.18vw + .66rem,.78rem);   /* numery slotów, cyfry listy   */
  --m-m:clamp(.76rem,.3vw + .68rem,.87rem);   /* nadtytuły, metki, stopka     */
  --m-l:clamp(.83rem,.35vw + .75rem,.95rem);  /* przyciski i odnośniki akcji  */

  --marg:clamp(1.1rem,5vw,7rem);
  /* miara wiersza · dobrana tak, by przy nowym stopniu pisma dać
     50 / 55 / 60 znaków w wierszu (było 44,7 / 49,7 / 54,6) */
  --w-a:34rem; --w-b:37.5rem; --w-c:41rem;
  --w-szept:30rem;
}

/* --- 2 · RESET ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:#070A0B;scroll-behavior:smooth}
body{margin:0;background:#070A0B;color:var(--kreda);font-family:var(--serif);
  font-size:var(--t);line-height:1.78;letter-spacing:.003em;
  font-feature-settings:"onum" 1,"kern" 1,"liga" 1;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;width:100%;height:100%;object-fit:cover}
figure{margin:0}

/* --- 3 · ZDJĘCIA · pasy pełnoekranowe ------------------------------------- */
.pas{position:relative;width:100vw;margin-left:50%;transform:translateX(-50%);
  height:var(--h,100svh);overflow:hidden}
.pas::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,10,11,.32) 0%,rgba(7,10,11,0) 26%,rgba(7,10,11,0) 62%,rgba(7,10,11,.78) 100%)}

/* --- 4 · ZDJĘCIA · rekwizyty (3:2, węższe pole) --------------------------- */
.rek{position:relative;width:min(78vw,60rem);margin:clamp(3rem,9vh,7rem) auto;
  aspect-ratio:3/2;overflow:hidden;box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.rek::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,10,11,.12),rgba(7,10,11,.55))}

/* --- 5 · ZDJĘCIA · podpisy i numery slotów -------------------------------- */
.cap{position:absolute;left:0;right:0;bottom:clamp(1.1rem,3.4vh,2.4rem);z-index:2;
  padding-inline:clamp(1.1rem,var(--marg),7rem);display:flex;justify-content:space-between;
  align-items:baseline;gap:1rem}
.cap__s{font-style:italic;font-size:clamp(1.18rem,1.6vw,1.6rem);line-height:1.42;
  color:rgba(240,237,229,.95);text-shadow:0 1px 26px rgba(0,0,0,.92),0 0 3px rgba(0,0,0,.55)}
.cap__n{font-family:var(--mono);font-size:var(--m-s);letter-spacing:.22em;
  color:rgba(222,219,210,.34);margin-left:auto;text-shadow:0 1px 12px rgba(0,0,0,.8)}

/* --- 6 · POKÓJ · zdjęcie przypięte, tekst przechodzi po nim --------------- */
.pokoj{position:relative}
.pokoj__f{position:sticky;top:0;height:100svh;overflow:hidden}
.pokoj__f::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,10,11,.34) 0%,rgba(7,10,11,.72) 40%,rgba(7,10,11,.93) 100%)}
.pokoj__t{position:relative;margin-top:-100svh;padding-top:100svh}

/* --- 7 · TEKST · bloki prozy, lista, adresat ------------------------------ */
.tk{margin-inline:auto;padding-block:clamp(6.5rem,22vh,15rem);padding-inline:var(--marg)}
.tk + .tk{padding-top:clamp(1.6rem,4.5vh,3.2rem)}
.w-a{max-width:calc(var(--w-a) + 2*var(--marg))}
.w-b{max-width:calc(var(--w-b) + 2*var(--marg))}
.w-c{max-width:calc(var(--w-c) + 2*var(--marg))}
@media(min-width:1000px){
  .p-l{margin-left:max(var(--marg),13vw);margin-right:auto}
  .p-p{margin-right:max(var(--marg),13vw);margin-left:auto}
}
.pr{margin:0;line-height:1.8;text-wrap:pretty}
/* wcięcie zostaje — to charakter składu książkowego. Dochodzi minimalny
   odstęp, żeby kolumna nie czytała się jako jedna ściana tekstu. */
.pr + .pr{text-indent:1.35em;margin-top:.5em}
.pr1::first-letter{float:left;font-size:3em;line-height:.86;font-weight:500;
  margin:.06em .12em 0 0;color:var(--mosiadz)}
.adresat{font-family:var(--mono);text-align:center;text-transform:uppercase;letter-spacing:.26em;
  font-size:var(--m-m);line-height:1.7;margin:clamp(2.8rem,7vh,4.6rem) 0;color:var(--kreda)}
.lista{list-style:none;margin:clamp(2rem,4.5vh,2.9rem) 0;padding:0;counter-reset:l}
.lp{counter-increment:l;position:relative;padding-left:3.1rem;margin:.78em 0;
  font-size:1em;line-height:1.72;color:rgba(226,223,214,.97)}
.lp::before{content:counter(l);position:absolute;left:0;width:1.9rem;text-align:right;top:.5em;
  font-family:var(--mono);font-size:var(--m-s);letter-spacing:.05em;color:var(--mosiadz);opacity:.9}

/* --- 7b · LEADY I NOTY · dawniej style w kodzie PHP ------------------------
   Wartości były wpisane w atrybutach style= w front-page.php, więc nie dało
   się ich skalować razem z resztą. Teraz są klasami i idą jednym rytmem. */
.tk--srodek{text-align:center}
.tk--wstep{padding-block:clamp(4.5rem,13vh,9.5rem)}
.lead{font-size:clamp(1.5rem,2.3vw,2.05rem);line-height:1.38;margin:1rem 0 0;text-wrap:balance}
.lead--zlec{max-width:34ch;margin:1.1rem 0 3.2rem}
.lead--zakup{max-width:32ch;margin:1.1rem 0 2.4rem;font-size:clamp(1.44rem,2.1vw,1.9rem)}
.nota{color:var(--cicha);font-size:.96em;line-height:1.72;margin:2.1rem 0 0;max-width:44ch}
.zamkniecie{font-style:italic;margin:0 0 1.9rem;line-height:1.62}
.newsl{margin:0 auto;max-width:32ch}
/* nadtytuły są teraz nagłówkami h2 — pełny reset, wygląd bez zmian */
.nad{display:block;margin:0;font-weight:400;font-size:var(--m-m)}

/* --- 8 · PRÓG · pierwszy ekran -------------------------------------------- */
.prog{position:relative;height:100svh;overflow:hidden}
.prog__f{position:absolute;inset:0}
.prog__f::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,10,11,.46) 0%,rgba(7,10,11,.16) 30%,rgba(7,10,11,.5) 70%,rgba(7,10,11,.88) 100%)}
.prog__w{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
  justify-content:space-between;padding:clamp(1.5rem,4vh,2.8rem) var(--marg) clamp(1.8rem,5.5vh,3.4rem)}
.szyld{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.marka{font-size:1.02rem;letter-spacing:.17em;text-transform:uppercase;color:rgba(240,237,229,.95);
  text-shadow:0 1px 20px rgba(0,0,0,.75)}
/* kompozycja toastu bez zmian — ten kadr jest zamknięty */
.toast{margin:0;max-width:17ch;font-weight:500;line-height:1.04;letter-spacing:-.021em;
  font-size:clamp(2.3rem,5.9vw,5.1rem);text-shadow:0 2px 50px rgba(0,0,0,.7)}
.toast em{display:block;font-style:italic;font-weight:400;margin-top:.3em;
  margin-left:clamp(0rem,13vw,10rem);max-width:14ch}
.prog__d{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1.2rem}
.tyt{display:flex;align-items:baseline;gap:.85rem}
.tyt b{font-weight:400;font-size:clamp(1.5rem,2.3vw,2.15rem);letter-spacing:.02em}
.mono{font-family:var(--mono);font-size:var(--m-m);letter-spacing:.18em;text-transform:uppercase;color:var(--cicha)}
.prog__w .mono{color:rgba(200,205,199,.98);text-shadow:0 1px 18px rgba(0,0,0,.8)}
.akcje{display:flex;gap:1.8rem;flex-wrap:wrap;align-items:center}
.akcja{font-family:var(--mono);font-size:var(--m-l);letter-spacing:.17em;text-transform:uppercase;
  color:var(--kreda);text-decoration:none;border-bottom:1px solid var(--mosiadz);
  padding:.5rem 0 .45rem;display:inline-block;
  text-shadow:0 1px 18px rgba(0,0,0,.7);transition:color .35s,border-color .35s}
.akcja:hover,.akcja:focus-visible{color:var(--mosiadz)}

/* --- 9 · SEKCJE · premisa, zwrot, zlecenia, newsletter, zakup, stopka ----- */
.szept{max-width:var(--w-szept);margin-inline:auto;text-align:center;
  font-size:1.06em;line-height:1.7;text-wrap:pretty}
.samo{max-width:34rem;margin-inline:auto;text-align:center;font-style:italic;
  line-height:1.26;letter-spacing:-.008em;font-size:clamp(1.85rem,3.4vw,3.1rem);text-wrap:balance}
.kreska{width:2.2rem;height:1px;background:var(--mosiadz);margin:0 auto clamp(2rem,5vh,3.2rem)}
.zlec{max-width:58rem;margin-inline:auto}
.wpis{padding-block:clamp(1.7rem,3.6vh,2.7rem);border-bottom:1px solid rgba(222,219,210,.15);
  display:grid;gap:.6rem 2.4rem}
@media(min-width:820px){.wpis{grid-template-columns:10rem 1fr}}
.wk{font-family:var(--mono);font-size:var(--m-m);letter-spacing:.16em;text-transform:uppercase;
  color:var(--mosiadz);padding-top:.42em;line-height:1.6}
.wc{margin:0;line-height:1.6}
.wu{margin:.6rem 0 0;color:var(--cicha);max-width:52ch;font-size:1em;line-height:1.72}

/* pole newslettera · jest wyłączone do czasu podpięcia dostawcy, ale nie może
   przez to wyglądać na zepsute — przeglądarka domyślnie wygasza disabled */
.pole{display:flex;align-items:center;max-width:26rem;margin:2.6rem auto 0;
  border-bottom:1px solid rgba(222,219,210,.28)}
.pole input{flex:1;background:transparent;border:0;color:var(--kreda);font-family:var(--serif);
  font-size:1.05em;line-height:1.5;padding:.9rem .2rem;min-height:2.9rem}
.pole input::placeholder{color:var(--cicha);font-style:italic;opacity:1}
.pole input:disabled{opacity:1;-webkit-text-fill-color:var(--kreda);cursor:default}
.pole input:disabled::placeholder{-webkit-text-fill-color:var(--cicha);opacity:1}
.pole button{background:transparent;border:0;color:var(--mosiadz);cursor:pointer;
  font-family:var(--mono);font-size:var(--m-l);letter-spacing:.17em;text-transform:uppercase;
  padding:.7rem .1rem;min-height:2.9rem;transition:opacity .35s}
.pole button:disabled{cursor:default;opacity:.72}
.pole button:not(:disabled):hover{opacity:.78}

.kanal{display:flex;justify-content:space-between;align-items:baseline;gap:1.4rem;flex-wrap:wrap;
  padding-block:1.55rem;border-bottom:1px solid rgba(222,219,210,.15)}
.kanal b{font-weight:400;font-size:1.14em}
/* Kanały zakupu stają się odnośnikami dopiero po wpisaniu adresu w panelu.
   Bez tej reguły dostają domyślny niebieski kolor przeglądarki — dokładnie
   w dniu premiery, przy podpięciu Amazona i Naffy. */
.kanal a{color:var(--mosiadz);text-decoration:none;border-bottom:1px solid transparent;
  padding-bottom:.15rem;transition:color .35s,border-color .35s}
.kanal a:hover,.kanal a:focus-visible{color:var(--kreda);border-bottom-color:var(--mosiadz)}

.okladka{width:min(21rem,64vw);aspect-ratio:2/3;margin:clamp(3rem,10vh,7rem) auto clamp(1rem,4vh,3rem);
  box-shadow:0 50px 100px -40px rgba(0,0,0,.95),0 0 0 1px rgba(222,219,210,.08)}
.stopka{padding:clamp(3.5rem,9vh,6.5rem) var(--marg) clamp(2.4rem,6vh,3.8rem);
  border-top:1px solid rgba(222,219,210,.12);display:flex;flex-wrap:wrap;gap:1rem 2.4rem;
  justify-content:space-between;align-items:baseline}
.stopka a{color:var(--cicha);text-decoration:none}
.stopka a:not([href]){cursor:default}
.stopka a[href]{border-bottom:1px solid transparent;padding-bottom:.2rem;
  transition:color .35s,border-color .35s}
.stopka a[href]:hover,.stopka a[href]:focus-visible{color:var(--mosiadz);border-bottom-color:rgba(192,164,104,.45)}

/* --- 10 · RUCH · jedno wejście na element --------------------------------- */
.we{opacity:0;transform:translateY(15px);
  transition:opacity 1.4s cubic-bezier(.2,.6,.2,1),transform 1.4s cubic-bezier(.2,.6,.2,1)}
.we.jest{opacity:1;transform:none}
.z1{transition-delay:.28s}.z2{transition-delay:.56s}.z3{transition-delay:.84s}

/* --- 11 · MOBILE ---------------------------------------------------------- */
@media(max-width:860px){
  .tk{padding-block:clamp(5.5rem,16vh,9rem)}
  /* kompozycja toastu bez zmian */
  .toast{font-size:clamp(2.15rem,8.6vw,3.2rem);max-width:15ch}
  .toast em{margin-left:1.6rem;max-width:12ch}
  /* przy 35–40 znakach w wierszu polskie złożenia zostawiają dziury —
     dzielenie wyrazów wyrównuje prawą krawędź bez zmiany stopnia pisma */
  .pr,.szept,.wu,.wc,.lp{hyphens:auto;-webkit-hyphens:auto}
  .akcje{gap:.9rem 1.7rem;width:100%}
  .akcja{padding:.85rem 0 .8rem;flex:0 0 auto;min-height:2.75rem;display:flex;align-items:center}
  .prog__d{gap:1.4rem}
  .cap{bottom:1.5rem}
  .cap__s{max-width:70%}
  .rek{width:88vw}
  .zlec .wpis{padding-block:1.75rem}
  .pole{max-width:none}
  .pole input{font-size:1.05em;padding:1.05rem .2rem;min-height:3rem}
  .pole button{padding:.9rem .1rem;min-height:3rem}
  .stopka{gap:1.5rem;flex-direction:column;align-items:flex-start}
  .lead--zlec,.lead--zakup,.nota,.newsl{max-width:none}
}
/* na wąskich telefonach margines oddaje szerokość wierszowi, nie ramce */
@media(max-width:480px){
  :root{--marg:1rem}
  .cap{padding-inline:1.15rem}
}

/* --- 12 · POWRÓT NA POCZĄTEK · logo + strzałka --------------------------- */
a.marka{color:rgba(240,237,229,.95);text-decoration:none;transition:color .35s}
a.marka:hover,a.marka:focus-visible{color:var(--mosiadz)}
.gora{position:fixed;z-index:40;right:clamp(1.1rem,3.4vw,3rem);bottom:clamp(1.1rem,3.4vh,3rem);
  width:3.1rem;height:3.1rem;display:grid;place-items:center;border-radius:50%;
  color:var(--kreda);text-decoration:none;background:rgba(7,10,11,.5);
  border:1px solid rgba(222,219,210,.2);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .7s ease,transform .7s ease,visibility .7s,color .35s,border-color .35s}
.gora.jest{opacity:.66;visibility:visible;transform:none}
.gora:hover,.gora:focus-visible{opacity:1;color:var(--mosiadz);border-color:rgba(192,164,104,.5)}
.gora svg{width:.95rem;height:.95rem;display:block}
@media(max-width:860px){.gora{width:2.9rem;height:2.9rem}}

/* na ekranach dotykowych stan hover potrafi „przykleić się" po tapnięciu */
@media(hover:none){
  .akcja:hover,.kanal a:hover,.stopka a[href]:hover,a.marka:hover{color:inherit}
  .akcja:hover{color:var(--kreda)}
  .kanal a:hover{color:var(--mosiadz);border-bottom-color:transparent}
  .gora:hover{opacity:.66;color:var(--kreda)}
}
:focus-visible{outline:2px solid var(--mosiadz);outline-offset:3px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.we{opacity:1;transform:none;transition:none}.gora{transition:opacity .01s}}

/* --- 13 · SZEROKOŚCI BLOKÓW · dawniej max-width w atrybutach style= --------
   Skalują się teraz razem z resztą składu zamiast stać w miejscu. */
.tk--zlec{max-width:calc(58rem + 2*var(--marg))}
.tk--kanaly{max-width:calc(48rem + 2*var(--marg))}
.tk--pelny{max-width:none}