*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

    :root {
      --paper:   #f2e8d5;
      --paperd:  #e4d5b8;
      --ink:     #1c1208;
      --brown:   #5c3317;
      --rust:    #9b3a1a;
      --mustard: #c8851a;
      --sage:    #5a6b3a;
      --muted:   #8a7055;
      --sepia:   #7a5c3a;
      --cream2:  #faf4e8;
    }

    html, body { width:100%; height:100%; overflow:hidden; }

    body {
      font-family: 'Lora', serif;
      background: var(--ink);
      color: var(--ink);
    }

    /* paper texture */
    body::after {
      content:'';
      position:fixed; inset:0;
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
      pointer-events:none;
      z-index:9998;
    }

    /* ═══ EKRAN 1: INTRO ═══ */
    #screen-intro {
      position:fixed; inset:0;
      display:flex; flex-direction:column;
      align-items:center; justify-content:center;
      background: var(--ink);
      z-index:200;
      transition: opacity 1s ease, transform 1s ease;
      overflow:hidden;
    }
    #screen-intro.hidden { opacity:0; transform:scale(1.03); pointer-events:none; }

    .intro-glow {
      position:absolute; inset:0;
      background:
        radial-gradient(ellipse 70% 55% at 50% 105%, #9b3a1a28 0%, transparent 65%),
        radial-gradient(ellipse 50% 35% at 15% -5%,  #c8851a15 0%, transparent 55%),
        radial-gradient(ellipse 40% 30% at 85% -5%,  #5c331712 0%, transparent 55%);
    }

    .intro-ruled {
      position:absolute; inset:0;
      background-image: repeating-linear-gradient(
        180deg, transparent 0px, transparent 31px,
        rgba(200,133,26,0.06) 32px
      );
    }

    .intro-border {
      position:absolute; inset:1.5rem;
      border: 1px solid rgba(200,133,26,0.18);
      pointer-events:none;
    }
    .intro-border::before {
      content:'';
      position:absolute; inset:6px;
      border: 1px solid rgba(200,133,26,0.08);
    }

    .intro-stamp {
      position:absolute;
      top:2.5rem; right:3rem;
      width:90px; height:90px;
      border-radius:50%;
      border:2px solid rgba(155,58,26,0.3);
      display:flex; flex-direction:column;
      align-items:center; justify-content:center;
      gap:2px;
      opacity:0.55;
    }
    .intro-stamp-year {
      font-family:'Caveat', cursive;
      font-size:1.6rem;
      color:var(--rust);
      line-height:1;
    }
    .intro-stamp-city {
      font-size:0.45rem;
      letter-spacing:0.25em;
      text-transform:uppercase;
      color:var(--rust);
    }

    .intro-content {
      position:relative;
      text-align:center;
      animation: wejście 1.6s cubic-bezier(.22,1,.36,1) both;
    }

    .intro-kicker {
      font-family:'Caveat', cursive;
      font-size:clamp(1rem, 2vw, 1.3rem);
      color:var(--mustard);
      letter-spacing:0.1em;
      margin-bottom:1.2rem;
      opacity:0.85;
    }

    .intro-name {
      font-family:'Libre Baskerville', serif;
      font-size:clamp(4rem, 11vw, 9.5rem);
      font-weight:700;
      line-height:0.88;
      color:var(--paper);
      letter-spacing:-0.03em;
    }
    .intro-name-second {
      font-family:'Libre Baskerville', serif;
      font-size:clamp(3rem, 8vw, 7rem);
      font-weight:400;
      font-style:italic;
      color:var(--mustard);
      letter-spacing:-0.02em;
      display:block;
      margin-top:0.1em;
    }

    .intro-rule {
      display:flex; align-items:center; gap:1rem;
      margin:2rem auto;
      width:fit-content;
    }
    .intro-rule-line { width:60px; height:1px; background:var(--sepia); opacity:0.4; }
    .intro-rule-diamond {
      width:6px; height:6px;
      background:var(--mustard);
      transform:rotate(45deg);
      opacity:0.7;
    }

    .intro-sub {
      font-family:'Lora', serif;
      font-style:italic;
      font-size:clamp(0.9rem, 1.8vw, 1.15rem);
      color:var(--muted);
      letter-spacing:0.06em;
      margin-bottom:3rem;
      line-height:1.7;
    }

    .btn-dalej {
      position:relative;
      display:inline-block;
      padding:0.9rem 3.5rem;
      font-family:'Lora', serif;
      font-size:0.9rem;
      font-style:italic;
      letter-spacing:0.2em;
      color:var(--paper);
      background:transparent;
      border:1px solid rgba(200,133,26,0.5);
      cursor:pointer;
      overflow:hidden;
      transition:color 0.45s, border-color 0.45s;
    }
    .btn-dalej::before {
      content:'';
      position:absolute; inset:0;
      background:var(--mustard);
      transform:translateX(-101%);
      transition:transform 0.45s cubic-bezier(.22,1,.36,1);
      z-index:0;
    }
    .btn-dalej span { position:relative; z-index:1; }
    .btn-dalej:hover::before { transform:translateX(0); }
    .btn-dalej:hover { color:var(--ink); border-color:var(--mustard); }

    /* ═══ EKRAN 2: WIDEO ═══ */
    #screen-video {
      position:fixed; inset:0;
      display:flex; flex-direction:column;
      align-items:center; justify-content:center;
      background:#0a0705;
      z-index:190;
      opacity:0; pointer-events:none;
      transition:opacity 0.85s ease;
    }
    #screen-video.active  { opacity:1; pointer-events:all; }
    #screen-video.ukryty  { opacity:0; pointer-events:none; }

    .video-wrap { position:relative; width:min(92vw,1000px); }

    .video-naglowek {
      font-family:'Caveat', cursive;
      font-size:1.1rem;
      color:var(--mustard);
      opacity:0.7;
      margin-bottom:0.6rem;
      letter-spacing:0.05em;
    }

    /* Styl dla obszaru wideo 1080x1080 */
#screen-video .video-area {
    width: 1080px;
    height: 1080px;
    max-width: 40vw;  /* Zabezpieczenie, aby wideo nie było większe niż ekran na szerokość */
    max-height: 40vw; /* Zabezpieczenie dla zachowania proporcji na telefonach */
    margin: 0 auto;   /* Wyśrodkowanie */
    position: relative;
    background-color: #000;
    overflow: hidden;
}

#myVideo {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Wypełnia obszar 1:1, przycinając krawędzie jeśli wideo jest panoramiczne */
    display: none;    /* Ukryte domyślnie, dopóki nie zostanie aktywowane przez JS */
}

#myVideo.loaded {
    display: block;
}

/* Dostosowanie strefy "Click!!!" do nowego rozmiaru */
#uploadZone {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

    #myVideo {
      position:absolute; inset:0;
      width:100%; height:100%;
      object-fit:cover;
      display:none;
    }
    #myVideo.loaded { display:block; }

    .upload-zone {
      position:absolute; inset:0;
      display:flex; flex-direction:column;
      align-items:center; justify-content:center;
      gap:0.8rem;
      cursor:pointer;
      transition:background 0.3s;
    }
    .upload-zone:hover { background:rgba(200,133,26,0.04); }
    .upload-zone input[type=file] {
      position:absolute; inset:0;
      opacity:0; cursor:pointer;
      width:100%; height:100%;
    }

    .upload-ikona {
      width:56px; height:56px;
      border:1px solid rgba(200,133,26,0.35);
      border-radius:50%;
      display:flex; align-items:center; justify-content:center;
    }
    .upload-ikona svg { fill:var(--mustard); opacity:0.6; }

    .upload-tekst {
      font-family:'Caveat', cursive;
      font-size:1.1rem;
      color:var(--muted);
      letter-spacing:0.05em;
    }

    .btn-pomin {
      margin-top:1.2rem;
      background:transparent; border:none;
      font-family:'Lora', serif;
      font-style:italic;
      font-size:0.85rem;
      letter-spacing:0.18em;
      color:rgba(138,112,85,0.55);
      cursor:pointer;
      transition:color 0.3s;
    }
    .btn-pomin:hover { color:var(--mustard); }

    /* ═══ EKRAN 3: BIO ═══ */
    #screen-bio {
      position:fixed; inset:0;
      overflow-y:auto;
      background:var(--paper);
      color:var(--ink);
      opacity:0; pointer-events:none;
      transition:opacity 0.9s ease;
    }
    #screen-bio.active { opacity:1; pointer-events:all; }

    /* ── HERO ── */
    .hero {
      min-height:100vh;
      display:grid;
      grid-template-columns:55% 45%;
      position:relative;
      overflow:hidden;
    }

    .hero-l {
      background:var(--cream2);
      padding:5rem 4rem 4rem 6rem;
      display:flex; flex-direction:column;
      justify-content:center;
      position:relative;
      overflow:hidden;
    }

    .hero-l::before {
      content:'';
      position:absolute; inset:0;
      background-image: repeating-linear-gradient(
        180deg, transparent 0px, transparent 35px,
        rgba(92,51,23,0.07) 36px
      );
      pointer-events:none;
    }

    .hero-ghost {
      position:absolute;
      bottom:-1rem; right:-1rem;
      font-family:'Libre Baskerville', serif;
      font-size:14rem;
      font-weight:700;
      color:var(--brown);
      opacity:0.05;
      line-height:1;
      pointer-events:none;
      letter-spacing:-0.05em;
    }

    .hero-tag {
      font-family:'Caveat', cursive;
      font-size:1.1rem;
      color:var(--rust);
      letter-spacing:0.08em;
      margin-bottom:1.5rem;
      display:flex; align-items:center; gap:0.6rem;
    }
    .hero-tag::before {
      content:'';
      width:30px; height:1px;
      background:var(--rust); opacity:0.5;
    }

    .hero-name {
      font-family:'Libre Baskerville', serif;
      font-size:clamp(2.8rem, 5.5vw, 5rem);
      font-weight:700;
      line-height:0.92;
      color:var(--ink);
      letter-spacing:-0.02em;
      margin-bottom:0.3em;
    }
    .hero-name em {
      display:block;
      font-style:italic;
      font-weight:400;
      color:var(--rust);
    }

    .hero-divider {
      display:flex; align-items:center; gap:0.8rem;
      margin:1.8rem 0;
    }
    .hero-divider-line { flex:1; height:1px; background:var(--sepia); opacity:0.25; max-width:120px; }
    .hero-divider-ornament {
      font-family:'Caveat', cursive;
      font-size:1.2rem;
      color:var(--mustard);
      opacity:0.6;
    }

    .hero-roles {
      list-style:none;
      display:flex; flex-direction:column; gap:0.45rem;
      margin-bottom:2rem;
    }
    .hero-roles li {
      font-family:'Lora', serif;
      font-size:0.9rem;
      letter-spacing:0.12em;
      text-transform:uppercase;
      color:var(--sepia);
      display:flex; align-items:center; gap:0.8rem;
    }
    .hero-roles li::before {
      content:'';
      width:16px; height:1px;
      background:var(--mustard); flex-shrink:0;
    }

    .hero-born {
      font-family:'Caveat', cursive;
      font-size:1rem;
      color:var(--muted);
      letter-spacing:0.05em;
    }

    .hero-r {
      background:var(--brown);
      position:relative;
      overflow:hidden;
      display:flex; flex-direction:column;
      align-items:center; justify-content:center;
      padding:3rem;
    }

    .hero-r-texture {
      position:absolute; inset:0;
      background-image: repeating-linear-gradient(
        -45deg,
        rgba(255,255,255,0.01) 0px, rgba(255,255,255,0.01) 1px,
        transparent 1px, transparent 8px
      );
    }

    .hero-r-glow {
      position:absolute; inset:0;
      background:
        radial-gradient(ellipse 70% 50% at 50% 30%, rgba(200,133,26,0.18) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 50% 90%, rgba(26,18,8,0.4) 0%, transparent 60%);
    }

    .portrait-wrap {
      position:relative; z-index:1;
      text-align:center;
    }

    .portrait-frame {
      width:200px; height:250px;
      margin:0 auto 2rem;
      border:1px solid rgba(200,133,26,0.4);
      position:relative;
      display:flex; align-items:center; justify-content:center;
      overflow:hidden;
    }
    .portrait-frame::before {
      content:'';
      position:absolute; inset:8px;
      border:1px solid rgba(200,133,26,0.15);
      pointer-events:none; z-index:2;
    }

    .portrait-monogram {
      font-family:'Libre Baskerville', serif;
      font-size:4.5rem;
      font-weight:700;
      font-style:italic;
      color:rgba(242,232,213,0.2);
      letter-spacing:-0.03em;
    }

    .portrait-caption {
      font-family:'Caveat', cursive;
      font-size:1.3rem;
      color:rgba(242,232,213,0.65);
      line-height:1.7;
      max-width:230px;
      margin:0 auto;
    }

    /* ── CYTAT ── */
    .cytat-band {
      background:var(--rust);
      padding:4rem 5rem;
      position:relative;
      overflow:hidden;
    }
    .cytat-band::before {
      content:'\201C';
      position:absolute;
      top:-1rem; left:3rem;
      font-family:'Libre Baskerville', serif;
      font-size:18rem;
      line-height:1;
      color:rgba(255,255,255,0.05);
      pointer-events:none;
    }
    .cytat-inner {
      max-width:900px;
      margin:0 auto;
      text-align:center;
      position:relative;
    }
    .cytat-tekst {
      font-family:'Libre Baskerville', serif;
      font-style:italic;
      font-size:clamp(1.4rem, 2.8vw, 2.2rem);
      color:var(--paper);
      line-height:1.6;
      margin-bottom:1.5rem;
    }
    .cytat-autor {
      font-family:'Caveat', cursive;
      font-size:1.1rem;
      color:rgba(242,232,213,0.6);
      letter-spacing:0.1em;
    }

    /* ── SEKCJA ── */
    .sekcja {
      padding:5rem 6rem;
      max-width:1200px;
      margin:0 auto;
    }
    .sekcja-nagl {
      display:flex; align-items:center; gap:1.2rem;
      margin-bottom:2.5rem;
    }
    .sekcja-numer {
      font-family:'Libre Baskerville', serif;
      font-size:3rem;
      font-weight:700;
      color:var(--paperd);
      line-height:1;
    }
    .sekcja-kreska { flex:1; height:1px; background:var(--paperd); max-width:80px; }
    .sekcja-etykieta {
      font-family:'Caveat', cursive;
      font-size:1rem;
      color:var(--mustard);
      letter-spacing:0.12em;
    }
    .sekcja-tytul {
      font-family:'Libre Baskerville', serif;
      font-size:clamp(1.8rem, 3.5vw, 2.8rem);
      font-weight:400;
      line-height:1.2;
      color:var(--ink);
      margin-bottom:2rem;
    }
    .sekcja-tytul em { font-style:italic; color:var(--rust); }

    .sekcja-tekst {
      font-family:'Lora', serif;
      font-size:1.1rem;
      line-height:1.9;
      color:#3a2810;
      columns:2;
      column-gap:3.5rem;
    }
    .sekcja-tekst p { margin-bottom:1.2em; break-inside:avoid; }
    .sekcja-tekst p:first-child::first-letter {
      font-family:'Libre Baskerville', serif;
      font-size:3.8em;
      font-weight:700;
      float:left;
      line-height:0.75;
      margin:0.08em 0.1em 0 0;
      color:var(--rust);
    }

    /* ── LICZBY ── */
    .strip-liczby {
      display:grid;
      grid-template-columns:repeat(4,1fr);
      background:var(--ink);
    }
    .liczba-item {
      padding:3.5rem 2rem;
      text-align:center;
      border-right:1px solid rgba(242,232,213,0.06);
    }
    .liczba-item:last-child { border-right:none; }
    .liczba-val {
      font-family:'Libre Baskerville', serif;
      font-size:3.2rem;
      font-weight:700;
      color:var(--mustard);
      line-height:1;
      margin-bottom:0.4rem;
    }
    .liczba-label {
      font-family:'Caveat', cursive;
      font-size:1rem;
      color:rgba(242,232,213,0.45);
    }

    /* ── LINIA CZASU ── */
    .linia-wrap {
      background:var(--paperd);
      padding:5rem 3rem;
    }
    .linia-tytul {
      font-family:'Libre Baskerville', serif;
      font-size:clamp(1.6rem, 3vw, 2.5rem);
      font-weight:400;
      text-align:center;
      color:var(--ink);
      margin-bottom:4rem;
    }
    .linia-tytul em { font-style:italic; color:var(--rust); }

    .linia-inner {
      max-width:820px;
      margin:0 auto;
      position:relative;
    }
    .linia-inner::before {
      content:'';
      position:absolute;
      left:50%; top:0; bottom:0;
      width:1px;
      background:linear-gradient(180deg, transparent, var(--sepia) 8%, var(--sepia) 92%, transparent);
      transform:translateX(-50%);
      opacity:0.3;
    }

    .linia-pozycje { display:flex; flex-direction:column; gap:2.5rem; }

    .linia-poz {
      display:grid;
      grid-template-columns:1fr 32px 1fr;
      gap:1.5rem;
      align-items:start;
    }

    .linia-dot-col { display:flex; justify-content:center; padding-top:0.5rem; }
    .linia-dot {
      width:10px; height:10px;
      border-radius:50%;
      background:var(--mustard);
      flex-shrink:0;
      box-shadow:0 0 0 3px var(--paperd), 0 0 0 4px rgba(200,133,26,0.4);
    }

    .linia-karta {
      background:var(--cream2);
      padding:1.4rem 1.6rem;
      border-left:3px solid var(--mustard);
      box-shadow:2px 3px 12px rgba(92,51,23,0.07);
    }
    .linia-rok {
      font-family:'Libre Baskerville', serif;
      font-size:1.6rem;
      font-weight:700;
      color:var(--rust);
      line-height:1;
      margin-bottom:0.4rem;
    }
    .linia-opis {
      font-family:'Lora', serif;
      font-style:italic;
      font-size:0.95rem;
      color:var(--sepia);
      line-height:1.65;
    }

    /* ── KSIĄŻKI ── */
    .ksiazki-wrap {
      padding:5rem 6rem;
      background:var(--cream2);
    }
    .ksiazki-inner { max-width:1100px; margin:0 auto; }
    .ksiazki-grid {
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
      gap:1.5rem;
      margin-top:3rem;
    }
    .ksiazka-karta {
      background:var(--paper);
      border:1px solid rgba(92,51,23,0.12);
      padding:1.8rem 1.5rem;
      position:relative;
      transition:transform 0.3s, box-shadow 0.3s;
      overflow:hidden;
    }
    .ksiazka-karta:hover {
      transform:translateY(-5px) rotate(-0.4deg);
      box-shadow:4px 8px 24px rgba(92,51,23,0.14);
    }
    .ksiazka-karta::before {
      content:'';
      position:absolute; top:0; left:0; bottom:0;
      width:4px; background:var(--rust);
    }
    .ksiazka-karta::after {
      content:'';
      position:absolute;
      top:4px; right:-4px; bottom:-4px; left:4px;
      background:rgba(92,51,23,0.08);
      z-index:-1;
    }
    .ksiazka-rok {
      font-family:'Caveat', cursive;
      font-size:0.9rem;
      color:var(--mustard);
      letter-spacing:0.1em;
      margin-bottom:0.5rem;
    }
    .ksiazka-tytul {
      font-family:'Libre Baskerville', serif;
      font-style:italic;
      font-size:1rem;
      color:var(--ink);
      line-height:1.45;
    }
    .ksiazka-podtytul {
      font-family:'Lora', serif;
      font-style:normal;
      font-size:0.78rem;
      color:var(--muted);
      margin-top:0.4rem;
    }

    /* ── PODRÓŻE ── */
    .podroze-wrap {
      background:var(--sage);
      padding:5rem 6rem;
      position:relative;
      overflow:hidden;
    }
    .podroze-wrap::before {
      content:'';
      position:absolute; inset:0;
      background-image: repeating-linear-gradient(
        45deg,
        rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px,
        transparent 1px, transparent 12px
      );
    }
    .podroze-inner { max-width:1100px; margin:0 auto; position:relative; }
    .podroze-tytul {
      font-family:'Libre Baskerville', serif;
      font-size:clamp(1.6rem, 3vw, 2.4rem);
      font-weight:400;
      color:var(--paper);
      margin-bottom:0.5rem;
    }
    .podroze-tytul em { font-style:italic; color:var(--mustard); }
    .podroze-sub {
      font-family:'Caveat', cursive;
      font-size:1.1rem;
      color:rgba(242,232,213,0.55);
      margin-bottom:3rem;
    }
    .miejsca-grid { display:flex; flex-wrap:wrap; gap:0.8rem; }
    .miejsce-tag {
      font-family:'Caveat', cursive;
      font-size:1.05rem;
      color:var(--paper);
      border:1px solid rgba(242,232,213,0.3);
      padding:0.4rem 1rem;
      letter-spacing:0.05em;
      transition:background 0.3s;
      cursor:default;
    }
    .miejsce-tag:hover { background:rgba(242,232,213,0.12); }

    /* ── STOPKA ── */
    .stopka {
      background:var(--ink);
      padding:3.5rem 6rem;
      display:flex;
      justify-content:space-between;
      align-items:center;
      border-top:1px solid rgba(200,133,26,0.12);
    }
    .stopka-logo {
      font-family:'Libre Baskerville', serif;
      font-size:1.3rem;
      font-style:italic;
      color:var(--paper);
    }
    .stopka-haslo {
      font-family:'Caveat', cursive;
      font-size:1.2rem;
      color:var(--mustard);
      opacity:0.75;
      letter-spacing:0.06em;
    }
    .stopka-info {
      font-family:'Lora', serif;
      font-size:0.75rem;
      color:var(--muted);
      letter-spacing:0.18em;
      text-transform:uppercase;
    }

    @keyframes wejście {
      from { opacity:0; transform:translateY(28px); }
      to   { opacity:1; transform:translateY(0); }
    }

    @media (max-width:768px) {
      .hero { grid-template-columns:1fr; }
      .hero-r { min-height:280px; }
      .hero-l { padding:5rem 1.8rem 3rem; }
      .sekcja { padding:3rem 1.5rem; }
      .sekcja-tekst { columns:1; }
      .strip-liczby { grid-template-columns:1fr 1fr; }
      .linia-wrap { padding:3rem 1rem; }
      .linia-inner::before { left:16px; }
      .linia-poz { grid-template-columns:32px 1fr !important; }
      .linia-poz .linia-empty { display:none; }
      .linia-poz .linia-karta { grid-column:2; }
      .ksiazki-wrap { padding:3rem 1.5rem; }
      .podroze-wrap { padding:3rem 1.5rem; }
      .stopka { flex-direction:column; gap:1rem; text-align:center; padding:2.5rem 1.5rem; }
      .cytat-band { padding:3rem 2rem; }
      .intro-stamp { display:none; }
    }