:root{
    --paper:#F4EDDA; --paper2:#F0E7CF; --paper3:#EBDFC0; --card:#FBF6E7;
    --ink:#262F1B; --forest:#3B4A2A; --khaki:#5A6540; --sand:#8C8259;
    --rust:#C0491C; --rust-deep:#A63E16; --gold:#B08D2E; --line:#D9CDA8;
    --f-disp:"Fraunces",serif; --f-body:"Inter",sans-serif; --f-mono:"IBM Plex Mono",monospace;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{background:var(--paper);}
  body{background:var(--paper); color:var(--ink); font-family:var(--f-body);
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;}
  ::selection{background:var(--rust); color:var(--paper);}
  a{color:inherit;}
  .mono{font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;}

  .grain{position:fixed; inset:-50%; width:200%; height:200%; z-index:60; pointer-events:none; opacity:.05; mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

  .cur,.cur2{position:fixed; z-index:90; top:0; left:0; pointer-events:none; border-radius:50%; opacity:0;}
  .cur{width:8px; height:8px; background:var(--rust); transform:translate(-50%,-50%);}
  .cur2{width:34px; height:34px; border:1px solid rgba(58,70,62,.5); transform:translate(-50%,-50%); transition:width .25s,height .25s,border-color .25s;}
  .cur2.big{width:58px; height:58px; border-color:var(--rust);}
  @media(pointer:coarse){.cur,.cur2{display:none;}}

  .pre{position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:18px; background:var(--paper);}
  .pre .mono{color:var(--khaki);}
  .pre .num{font-family:var(--f-disp); font-weight:600; font-size:clamp(64px,12vw,120px); line-height:1; color:var(--ink); font-variant-numeric:tabular-nums;}
  .pre .bar{width:min(300px,60vw); height:1px; background:var(--line); position:relative; overflow:hidden;}
  .pre .bar i{position:absolute; inset:0; background:var(--rust); transform:scaleX(0); transform-origin:left;}
  .pre .stamp-mini{margin-top:8px; opacity:0; font-family:var(--f-mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
    color:var(--rust); border:2px solid var(--rust); border-radius:4px; padding:7px 14px; transform:rotate(-9deg);}

  .bar-top{position:absolute; top:0; left:0; right:0; z-index:20; padding:26px clamp(20px,4.5vw,56px); display:flex; justify-content:space-between; align-items:baseline;}
  .bar-top .wordmark{font-family:var(--f-disp); font-weight:600; font-size:17px;}
  .bar-top .coords{color:var(--khaki);}
  @media(max-width:640px){.bar-top .coords{display:none;}}

  /* feather mask — wtapia asset w papier strony */
  .feather{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%),linear-gradient(0deg,transparent 0,#000 8%,#000 92%,transparent 100%);
    -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%),linear-gradient(0deg,transparent 0,#000 8%,#000 92%,transparent 100%); mask-composite:intersect;}

  /* ==== hero ==== */
  .hero{position:relative;}
  .hero-pin{position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; padding:110px 0 90px; width:100%;}
  #topo{position:absolute; inset:0; width:100%; height:100%; z-index:1; opacity:.5;}
  .hero .inner{position:relative; z-index:5; width:100%; max-width:1200px; margin:0 auto; padding:0 clamp(20px,4.5vw,56px);
    display:grid; grid-template-columns:1.4fr .72fr; gap:clamp(30px,5vw,72px); align-items:center;}
  @media(max-width:860px){.hero .inner{grid-template-columns:1fr;}}
  .symptoms{margin-bottom:28px;}
  .sym-head{color:var(--sand); margin-bottom:13px;}
  .sym{display:flex; align-items:center; gap:12px; margin:10px 0;}
  .zgl{position:relative; display:inline-block; font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--forest); padding:1px 2px;}
  .zgl svg{position:absolute; left:-2px; right:-2px; top:50%; height:14px; transform:translateY(-50%); overflow:visible; pointer-events:none;}
  .zgl svg path{stroke:var(--rust); stroke-width:2.4; fill:none; stroke-linecap:round;}
  .tag-objaw{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.16em; color:var(--rust); border:1.2px solid var(--rust); border-radius:3px; padding:2px 6px; transform:rotate(-4deg); display:inline-block;}
  h1.disp{font-family:var(--f-disp); font-weight:600; font-size:clamp(42px,7.2vw,96px); line-height:.99; letter-spacing:-.022em; margin-bottom:30px;}
  h1.disp .ln{display:block; overflow:hidden; padding:.08em .06em .24em; margin:-.08em -.06em -.24em;}
  h1.disp .ln>span{display:inline-block; will-change:transform;}
  h1.disp em{font-style:italic; font-weight:500; color:var(--rust); position:relative; white-space:nowrap;}
  h1.disp em svg{position:absolute; left:-1%; bottom:-.14em; width:102%; height:.3em; overflow:visible;}
  h1.disp em svg path{fill:none; stroke:var(--rust); stroke-width:5; stroke-linecap:round;}
  .lead{font-size:clamp(15.5px,1.55vw,18px); line-height:1.62; color:#414A2E; max-width:46ch; margin-bottom:26px;}
  .doms{display:flex; flex-wrap:wrap; gap:8px 6px; margin-bottom:32px;}
  .doms span{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--forest);
    border:1px solid var(--line); background:rgba(251,246,231,.55); padding:6px 12px; border-radius:999px;}
  .cta-row{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
  .cta{display:inline-flex; align-items:center; gap:12px; text-decoration:none; background:var(--forest); color:var(--paper);
    font-weight:600; font-size:15.5px; padding:16px 28px; border-radius:999px; transition:background .3s, transform .25s, box-shadow .3s;}
  .cta:hover{background:var(--rust); transform:translateY(-2px); box-shadow:0 16px 34px rgba(192,73,28,.26);}
  .cta .arr{transition:transform .3s;}
  .cta:hover .arr{transform:translateX(5px);}
  .cta-note{font-family:var(--f-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--sand);}

  .por-wrap{position:relative; justify-self:end; width:min(340px,74vw); will-change:transform;}
  @media(max-width:860px){.por-wrap{justify-self:start; margin-top:6px;}}
  .por-wrap img{display:block; width:100%; height:auto;}
  .por-note{position:absolute; left:50%; top:44%; transform:translate(-50%,-50%) rotate(-2.6deg);
    font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(244,237,218,.85); text-align:center; line-height:2;}

  /* ==== rekwizyty biurka (hero) ==== */
  .props{position:absolute; inset:0; z-index:4; pointer-events:none;}
  .prop{position:absolute; will-change:transform; filter:drop-shadow(0 10px 18px rgba(38,47,27,.10));}
  .p-tasma{left:43%; top:9%; width:clamp(70px,8vw,116px);}
  .p-stempel{right:3%; top:4%; width:clamp(170px,19vw,270px);}
  .p-kompas{left:62%; bottom:8%; width:clamp(90px,10vw,128px);}
  .p-lupa{right:15%; bottom:-6%; width:clamp(170px,19vw,260px);}
  .p-olowek{left:20%; top:3%; width:clamp(120px,13vw,185px);}
  .p-notes{left:-2%; bottom:5%; width:clamp(100px,11vw,150px);}
  @media(max-width:860px){.p-lupa,.p-olowek,.p-notes,.p-tasma{display:none;} .p-stempel{left:auto; right:2%; top:2%; width:150px; opacity:.85;} .p-kompas{right:3%; top:auto; bottom:2%; width:90px;}}
  .cue{position:absolute; left:50%; bottom:24px; transform:translateX(-50%); z-index:6; display:flex; flex-direction:column; align-items:center; gap:9px; color:var(--khaki);}
  .cue .mono{font-size:9.5px;}
  .cue .stick{width:1px; height:40px; background:rgba(58,70,62,.22); overflow:hidden; position:relative;}
  .cue .stick i{position:absolute; left:0; top:-100%; width:100%; height:100%; background:var(--rust); animation:cue 2s cubic-bezier(.6,0,.4,1) infinite;}
  @keyframes cue{55%{top:100%}100%{top:100%}}

  /* ==== descent hook ==== */
  .descend{position:relative; background:linear-gradient(var(--paper) 0%, var(--paper2) 55%, var(--paper3) 100%);}
  .descend .pinbox{min-height:100svh; display:flex; align-items:center; position:relative; overflow:hidden;}
  .surface-line{position:absolute; left:0; right:0; top:18%; z-index:1; border-top:1px dashed rgba(90,101,64,.5);}
  .surface-line .mono{position:absolute; right:clamp(16px,4vw,54px); top:-20px; color:var(--khaki); font-size:9.5px;}
  .depth{position:absolute; left:clamp(14px,3vw,44px); bottom:34px; z-index:2; color:var(--khaki); font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; display:flex; align-items:center; gap:10px;}
  .depth b{font-weight:500; color:var(--forest); font-variant-numeric:tabular-nums;}
  .hook-txt{max-width:1000px; margin:0 auto; padding:0 clamp(22px,5vw,56px); position:relative; z-index:3;
    font-family:var(--f-disp); font-weight:500; font-size:clamp(26px,4.6vw,54px); line-height:1.24; letter-spacing:-.012em; color:var(--ink);}
  .hook-txt .w{opacity:.13; display:inline-block; will-change:opacity;}
  .hook-txt .accent{font-style:italic; color:var(--rust);}
  .hook-kicker{position:absolute; top:calc(18% + 16px); left:clamp(22px,5vw,56px); color:var(--khaki);}

  /* ==== vignettes ==== */
  .vign{position:relative; background:var(--paper3);}
  .vign .pin2{min-height:100svh; display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(24px,4vw,60px);
    align-items:center; max-width:1280px; margin:0 auto; padding:70px clamp(20px,4.5vw,56px);}
  @media(max-width:899px){.vign .pin2{display:block; min-height:0; padding:72px clamp(20px,4.5vw,56px) 30px;}}
  .vig-copy{position:relative; z-index:2;}
  .vig-copy .ghost{position:absolute; z-index:0; top:-8%; left:-3%; font-family:var(--f-disp); font-weight:700; font-size:clamp(120px,20vw,280px); line-height:1; color:rgba(58,70,62,.07); pointer-events:none; user-select:none;}
  .vig-copy .khead{color:var(--rust); margin-bottom:16px;}
  .vig-copy h2{font-family:var(--f-disp); font-weight:600; font-size:clamp(30px,4vw,52px); line-height:1.02; letter-spacing:-.02em; margin-bottom:18px;}
  .vig-copy .intro{font-size:clamp(15px,1.5vw,17.5px); line-height:1.62; color:#414A2E; max-width:42ch; margin-bottom:30px;}
  .prog{display:flex; align-items:center; gap:14px;}
  .prog .mono{color:var(--khaki); font-variant-numeric:tabular-nums;}
  .prog .dots{display:flex; gap:7px;}
  .prog .dots i{width:26px; height:2px; background:rgba(58,70,62,.2); position:relative; overflow:hidden;}
  .prog .dots i b{position:absolute; inset:0; background:var(--rust); transform:scaleX(0); transform-origin:left;}
  @media(max-width:899px){.prog{display:none;}}

  .deck{position:relative; height:min(640px,78vh); z-index:2;}
  @media(max-width:899px){.deck{height:auto; margin-top:34px; display:flex; flex-direction:column; gap:40px;}}
  .bcard{position:absolute; inset:0; margin:auto; width:100%; max-width:560px; height:fit-content; will-change:transform;}
  @media(max-width:899px){.bcard{position:relative; inset:auto; max-width:none;}}
  .bcard .face{position:relative;}
  .bcard .face>img{display:block; width:100%; height:auto; max-height:56vh; object-fit:contain;}
  .bcard .stampimg{position:absolute; z-index:4; width:34%; top:var(--stamp-top,4%); right:var(--stamp-right,2%); left:var(--stamp-left,auto); mix-blend-mode:multiply; opacity:0; pointer-events:none; transform:rotate(-4deg);}
  .bcard .strike{position:absolute; z-index:3; left:14%; width:72%; height:34px; top:var(--strike-top,40%); overflow:visible; pointer-events:none;}
  .bcard .strike path{stroke:var(--rust); stroke-width:5; fill:none; stroke-linecap:round; opacity:.92; mix-blend-mode:multiply;}
  .bcard .real{margin:2px auto 0; max-width:86%; background:var(--card); border:1px solid var(--line); border-radius:8px;
    padding:16px 20px 15px; opacity:0; will-change:transform; box-shadow:0 14px 34px rgba(38,47,27,.12);}
  .bcard .real .mono{color:var(--rust); font-size:9.5px; display:block; margin-bottom:7px;}
  .bcard .real p{font-size:clamp(15px,1.6vw,18px); line-height:1.45; font-weight:500; color:var(--ink);}
  .bcard .real p u{text-decoration:none; background-image:linear-gradient(var(--rust), var(--rust)); background-repeat:no-repeat; background-size:0% 2px; background-position:0 96%;}

  /* ==== scena OBIECANE/ZASTANE ==== */
  .compare{position:relative; background:var(--paper3);}
  .compare .pin3{min-height:100svh; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:26px; padding:70px clamp(16px,3.5vw,48px); position:relative; overflow:hidden;}
  .compare .khead{color:var(--khaki); text-align:center;}
  .compare h2{font-family:var(--f-disp); font-weight:600; font-size:clamp(26px,3.6vw,46px); letter-spacing:-.018em; text-align:center; max-width:26ch; line-height:1.08;}
  .compare h2 em{font-style:italic; color:var(--rust);}
  .stagebox{position:relative; width:min(1180px,96vw); aspect-ratio:1920/1071; border-radius:10px; overflow:hidden; box-shadow:0 34px 90px rgba(38,47,27,.22);}
  .stagebox img,.stagebox video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
  .stagebox .after{clip-path:inset(0 0 0 100%);}
  .stagebox .divider{position:absolute; top:0; bottom:0; left:0; width:3px; background:var(--rust); z-index:5; transform:translateX(-2px); box-shadow:0 0 0 1px rgba(244,237,218,.5);}
  .stagebox .lab{position:absolute; z-index:6; top:14px; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
    padding:6px 12px; border-radius:4px; background:rgba(38,47,27,.72); color:var(--paper);}
  .stagebox .lab.l{left:14px;} .stagebox .lab.r{right:14px; background:rgba(192,73,28,.85);}
  .compare .capline{color:var(--khaki); display:flex; gap:14px; align-items:center;}
  .compare .capline .rule{width:60px; height:1px; background:rgba(90,101,64,.4);}

  /* ==== closer ==== */
  .closer{background:var(--paper3); padding:clamp(90px,14vw,180px) 0 90px;}
  .closer .inner{max-width:900px; margin:0 auto; padding:0 clamp(22px,5vw,56px);}
  .closer .big{font-family:var(--f-disp); font-weight:500; font-size:clamp(24px,3.8vw,44px); line-height:1.3; letter-spacing:-.01em; color:var(--ink);}
  .closer .big .w{display:inline-block; opacity:.13;}
  .closer .big em{font-style:italic; color:var(--rust);}
  .closer .next{margin-top:70px; display:flex; align-items:center; gap:18px; color:var(--khaki); flex-wrap:wrap;}
  .closer .next .rule{flex:1; min-width:60px; height:1px; background:rgba(90,101,64,.35);}


  /* ==== v4a ==== */
  .p-lupa{aspect-ratio:1/1; filter:none; z-index:6;}
  .lupa-img{position:absolute; inset:0; width:100%; height:100%; z-index:2; mix-blend-mode:multiply;
    -webkit-mask-image:radial-gradient(ellipse 19% 19% at 37.2% 37.2%, transparent 96%, #000 99%),linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(0deg,transparent 0,#000 7%,#000 93%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:radial-gradient(ellipse 19% 19% at 37.2% 37.2%, transparent 96%, #000 99%),linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(0deg,transparent 0,#000 7%,#000 93%,transparent 100%);
    mask-composite:intersect;}
  .lens{position:absolute; left:18.2%; top:18.2%; width:38%; height:38%; border-radius:50%; overflow:hidden; z-index:1;
    background:var(--paper); box-shadow:inset 0 0 22px rgba(38,47,27,.14);}
  .lens-inner{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; transform:scale(1.62); white-space:nowrap;}
  .lens-inner .zgl{font-size:12px;}
  .lens-inner img{width:280%; max-width:none;}
  .p-minipoczta{right:17%; bottom:-2%; width:clamp(120px,13vw,170px); z-index:3;}
  @media(max-width:860px){.p-minipoczta{display:none;}}
  .doms span{border-radius:3px !important; border:1.6px solid rgba(58,70,62,.6) !important; background:transparent !important;
    mix-blend-mode:multiply; font-size:11px !important; letter-spacing:.13em !important; padding:7px 13px !important;}
  .doms span:nth-child(1){transform:rotate(-1.4deg);}
  .doms span:nth-child(2){transform:rotate(.9deg);}
  .doms span:nth-child(3){transform:rotate(-.7deg);}
  .doms span:nth-child(4){transform:rotate(1.3deg);}
  @keyframes ctaArr{0%,55%,100%{transform:translateX(0)}70%{transform:translateX(5px)}82%{transform:translateX(1px)}}
  .cta .arr{animation:ctaArr 3.2s ease-in-out 2s infinite;}
  @keyframes ctaGlow{0%,100%{box-shadow:0 6px 18px rgba(58,70,62,.18)}50%{box-shadow:0 10px 30px rgba(192,73,28,.30)}}
  .cta{animation:ctaGlow 3.2s ease-in-out infinite;}
  .cta:hover{animation-play-state:paused;}
  @keyframes kickPulse{0%,100%{opacity:.55}50%{opacity:1}}
  .hook-kicker{left:50% !important; transform:translateX(-50%); text-align:center;
    font-size:clamp(15px,2vw,21px) !important; letter-spacing:.22em !important; color:var(--forest) !important;
    animation:kickPulse 3.4s ease-in-out infinite; white-space:nowrap;}
  .vign .pin2{position:relative;}
  .vig-copy .khead{position:absolute; top:40px; left:0; right:0; text-align:center;
    font-size:clamp(14px,1.9vw,20px) !important; letter-spacing:.22em !important; color:var(--rust) !important;
    animation:kickPulse 3.4s ease-in-out infinite; white-space:nowrap; z-index:5;}
  .compare .khead{font-size:clamp(14px,1.9vw,20px) !important; letter-spacing:.22em !important;
    animation:kickPulse 3.4s ease-in-out infinite;}
  .sym-head{font-size:13px; letter-spacing:.16em; color:var(--forest);}
  .cue .mono{font-size:11px; letter-spacing:.14em; color:var(--forest);}
  .cta-note{font-size:11px !important; letter-spacing:.1em !important; color:var(--khaki) !important;}
  .bar-top .coords{font-size:11px; color:var(--khaki);}
  .tag-objaw{font-size:10.5px !important;}
  .bcard .stampimg{width:26% !important; z-index:3 !important; filter:contrast(1.06);}
  .bcard .real{position:relative; z-index:6;}

  /* ==== v4a runda 2 ==== */
  .prop{filter:none !important;}
  .lupa-img{-webkit-mask-image:none !important; mask-image:none !important; mix-blend-mode:normal !important;}
  .lens{left:7% !important; top:6.8% !important; width:54.4% !important; height:54.4% !important; box-shadow:inset 0 0 26px rgba(38,47,27,.16);}
  .por-wrap{width:min(350px,72vw) !important;}
  .por-note{font-size:12.5px !important; letter-spacing:.18em !important;}
  .p-kartki{right:21%; top:8%; width:clamp(210px,23vw,320px); z-index:2;}
  .p-stempel{right:23.5% !important; top:11% !important; width:clamp(180px,20vw,280px) !important; z-index:3;}
  .p-olowek{right:5% !important; left:auto !important; top:auto !important; bottom:21% !important; width:clamp(120px,13vw,180px) !important;}
  .p-kompas{right:24% !important; left:auto !important; bottom:13% !important; width:clamp(85px,9vw,120px) !important;}
  .p-notes{right:12% !important; left:auto !important; bottom:2% !important; width:clamp(95px,11vw,140px) !important;}
  .p-lupa{left:36% !important; right:auto !important; bottom:3% !important; width:clamp(180px,20vw,255px) !important;}
  .p-minipoczta{left:39% !important; right:auto !important; bottom:1% !important; width:clamp(130px,14vw,180px) !important;}
  @media(max-width:860px){.p-kartki{display:none;} .p-olowek,.p-notes{display:none !important;}}
  .doms span{background:var(--forest) !important; color:#F2EBD8 !important; border:none !important; mix-blend-mode:normal !important;
    font-size:11.5px !important; letter-spacing:.12em !important; padding:8px 14px !important;}
  .cue .mono{font-size:14px !important; letter-spacing:.18em !important; color:var(--forest) !important; font-weight:500;}
  .cue .stick{height:48px;}
  .bcard{max-width:640px !important;}
  .bcard .face>img{max-height:60vh !important;}
  .bcard .stampimg{width:34% !important; z-index:5 !important;}
  .bcard .strike{top:var(--strike-top,36%) !important; left:7% !important; width:84% !important; transform:rotate(-13deg); z-index:2 !important;}
  .bcard .real{margin:-34px auto 0 !important; max-width:88% !important; transform:rotate(-.5deg); box-shadow:0 16px 40px rgba(38,47,27,.16) !important;}
  .vign .pin2{padding-top:118px !important;}
  .vign .vig-copy{position:static !important;}
  .vig-copy .ghost{bottom:4% !important; right:1% !important; z-index:0 !important;}
  .vig-copy .ghost{top:auto !important; bottom:-8% !important; left:auto !important; right:-22% !important; font-size:clamp(90px,13vw,190px) !important;}
  @media(prefers-reduced-motion:reduce){.cta,.cta .arr,.hook-kicker,.vig-copy .khead,.compare .khead{animation:none !important;}}
  @media(prefers-reduced-motion:reduce){ .cue .stick i{animation:none;} }
  html.no-anim .pre{display:none;}

  /* ==== v4b: chłodna, stonowana paleta (oryzo / maxmilkin) ==== */
  :root{
    --paper:#E8E6DE; --paper2:#DDDBD0; --paper3:#D0CFC2; --card:#F0EFE8;
    --ink:#1F241E; --forest:#2C3830; --khaki:#57625A; --sand:#79816F;
    --rust:#C7480E; --rust-deep:#A23A08; --gold:#8A7833; --line:#C4C3B2;
    --steel:#3E4A50;
  }
  img.prop, .lupa-img, .por-img, .card-img, .lens-inner img{
    filter:saturate(.78) hue-rotate(-10deg) contrast(1.06) brightness(.97);}
  .stampimg{filter:saturate(.85) hue-rotate(-8deg) contrast(1.08) !important;}
  .stagebox .before{filter:saturate(.9) hue-rotate(-6deg) contrast(1.03);}
  .stagebox .after{filter:saturate(.8) hue-rotate(-8deg) contrast(1.05) brightness(.95);}
  .grain{opacity:.065;}
  .doms span:nth-child(2){background:var(--rust) !important; transform:rotate(.9deg);}
  .doms span:nth-child(4){background:var(--steel) !important;}
  .doms span:nth-child(5){background:var(--gold) !important;}
  .cta{background:var(--ink);}
  .cta:hover{background:var(--rust);}
  .stagebox .lab.l{background:rgba(31,36,30,.78);}

  /* ==== v4b runda 2 ==== */
  .p-stos{left:auto; right:11%; bottom:17%; width:clamp(170px,19vw,240px); z-index:6 !important; position:absolute; aspect-ratio:630/481; pointer-events:none;}
  .p-stempel{right:13% !important; top:7% !important; width:clamp(210px,23vw,310px) !important; z-index:6 !important; pointer-events:none; position:absolute;}
  h1.disp{font-size:clamp(30px,4.9vw,66px) !important;}
  h1.disp .ln > span{white-space:nowrap;}
  .doms{flex-wrap:nowrap !important; gap:6px 5px !important;}
  .doms span{background:transparent !important; color:var(--rust) !important; border:1.5px solid var(--rust) !important;
    border-radius:3px !important; mix-blend-mode:multiply !important; white-space:nowrap;
    font-size:10px !important; letter-spacing:.07em !important; padding:6px 9px !important;}
  .doms span:nth-child(1){transform:rotate(-1.4deg) !important;}
  .doms span:nth-child(2){transform:rotate(.9deg) !important; background:transparent !important;}
  .doms span:nth-child(3){transform:rotate(-.7deg) !important;}
  .doms span:nth-child(4){transform:rotate(1.3deg) !important; background:transparent !important;}
  .doms span:nth-child(5){transform:rotate(-1deg) !important; background:transparent !important;}
  .bcard .stampimg{width:clamp(185px,19vw,240px) !important; top:auto !important; bottom:20px !important;
    right:-42px !important; left:auto !important; z-index:7 !important; filter:saturate(1.06) contrast(1.15);}
  .bcard .real p{padding-right:76px;}
  .bcard .face{width:fit-content; margin:0 auto; position:relative;}
  .bcard.big{max-width:760px !important;}
  .bcard.big .face>img{max-height:68vh !important;}
  .lens{background:transparent !important;}
  .lens-world{position:absolute; left:0; top:0; transform-origin:0 0; pointer-events:none;}

  /* v4b runda 3 */
  .p-lupa{z-index:7 !important; pointer-events:none;}
  .card-img{filter:drop-shadow(0 20px 34px rgba(31,36,30,.20));}
  .por-img{filter:drop-shadow(0 16px 30px rgba(31,36,30,.16));}
  @media(max-width:860px){.p-stos{right:2%; bottom:1%; width:130px;}}

  /* v4.3: fizyka sznurka (verlet, jedna lina) + stos z 7 osobnych kartek */
  #ropeBack,#ropeFront{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;}
  #ropeBack{z-index:2;}
  #ropeFront{z-index:6;}
  #stosJolt{position:absolute; inset:0;}
  .p-stos .karta{position:absolute; display:block; opacity:1; will-change:transform,opacity;
    filter:saturate(.55) brightness(1.09) drop-shadow(0 5px 10px rgba(31,36,30,.15));}

  /* ==== FULL v-0.1: sekcje narracji po compare ==== */
  .sekcja{position:relative; padding:clamp(84px,12vh,150px) 6vw; overflow:hidden;}
  .s-inner{max-width:880px; margin:0 auto; position:relative;}
  .s-ghost{position:absolute; top:-30px; right:-8px; font-family:Fraunces,serif; font-weight:700;
    font-size:clamp(110px,16vw,210px); line-height:1; color:rgba(44,56,48,.07); pointer-events:none; user-select:none;}
  .s-kick{font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.24em; text-transform:uppercase;
    color:var(--rust); margin-bottom:18px;}
  .s-h2{font-family:Fraunces,serif; font-weight:600; font-size:clamp(28px,3.8vw,50px); line-height:1.12;
    color:var(--ink); margin:0 0 22px; max-width:20ch;}
  .s-lead{font-size:clamp(17px,1.6vw,21px); line-height:1.55; color:var(--ink); max-width:56ch; margin:0 0 26px; font-weight:500;}
  .prose p{font-size:clamp(15.5px,1.25vw,17.5px); line-height:1.7; color:#454D42; max-width:66ch; margin:0 0 18px;}
  .prose strong{color:var(--ink);}
  .sekcja-tinted{background:linear-gradient(180deg, rgba(44,56,48,.035), rgba(44,56,48,0) 30%);}

  /* diagnozy: karty protokolu */
  .diag-lista{display:flex; flex-direction:column; gap:clamp(22px,3vw,34px); margin-top:36px;}
  .diag-karta{background:#F0EFE8; border:1px solid #C4C3B2; border-radius:8px; padding:clamp(20px,3vw,34px);
    box-shadow:0 14px 34px rgba(31,36,30,.10); position:relative;}
  .diag-karta:nth-child(odd){transform:rotate(-.4deg);}
  .diag-karta:nth-child(even){transform:rotate(.35deg);}
  .diag-karta::before{content:""; position:absolute; top:-12px; left:34px; width:86px; height:24px;
    background:rgba(121,129,111,.28); transform:rotate(-2deg); border-radius:2px;}
  .diag-head{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px;}
  .diag-num{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.14em; color:#8F8A74;}
  .diag-zgl{font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.06em; padding:6px 10px;
    border:1.5px solid var(--rust); color:var(--rust); border-radius:3px; text-decoration:line-through; text-decoration-thickness:1.5px;}
  .diag-real{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.18em; color:var(--forest); text-transform:uppercase;}
  .diag-karta p{margin:0 0 12px;}
  .forgiving{margin-top:38px; background:var(--paper); border:1px dashed #B7B29B; border-radius:8px;
    padding:clamp(20px,2.6vw,30px); transform:rotate(-.3deg); max-width:70ch;}
  .forgiving p{margin:0;}
  .metoda{margin-top:30px;}

  /* --- v-0.4: SPROSTOWANIE (poz. 01) — sekcja-oddech po przykładach --- */
  #sprostowanie .prose p{max-width:66ch;}
  .spr-puenta{margin:34px 0 0; font-family:Fraunces,serif; font-style:italic; font-weight:500;
    font-size:clamp(20px,2.1vw,27px); line-height:1.4; color:var(--ink); max-width:24ch;
    text-wrap:balance;}
  .spr-puenta span{background-image:linear-gradient(rgba(176,141,46,.28), rgba(176,141,46,.28));
    background-repeat:no-repeat; background-size:100% .5em; background-position:0 78%;
    box-decoration-break:clone; -webkit-box-decoration-break:clone; padding:0 .1em;}
  .spr-next{margin-top:56px; display:flex; align-items:center; gap:18px; color:var(--tx-body); flex-wrap:wrap;}
  .spr-next .rule{flex:1; min-width:60px; height:1px; background:rgba(69,77,66,.35);}
  .spr-next .mono{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;}

  /* showroom: kartoteka */
  #showroom .s-inner{max-width:1160px;}
  .sh-filtry{display:flex; gap:9px; flex-wrap:nowrap; overflow-x:auto; padding:4px 2px 12px; margin:26px 0 6px;
    scrollbar-width:none;}
  .sh-filtry::-webkit-scrollbar{display:none;}
  .sh-chip{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.07em; text-transform:uppercase;
    padding:9px 13px; min-height:40px; border-radius:3px; background:transparent; cursor:pointer; white-space:nowrap;
    border:1.5px solid var(--forest); color:var(--forest); mix-blend-mode:multiply;}
  .sh-chip:nth-child(odd){transform:rotate(-.8deg);}
  .sh-chip:nth-child(even){transform:rotate(.6deg);}
  .sh-chip[data-akcent="rust"]{border-color:var(--rust); color:var(--rust);}
  .sh-chip[data-akcent="steel"]{border-color:var(--steel); color:var(--steel);}
  .sh-chip[data-akcent="gold"]{border-color:var(--gold); color:var(--gold);}
  .sh-chip[aria-pressed="true"]{transform:none; color:var(--paper) !important;}
  .sh-chip[aria-pressed="true"][data-akcent="rust"]{background:var(--rust);}
  .sh-chip[aria-pressed="true"][data-akcent="steel"]{background:var(--steel);}
  .sh-chip[aria-pressed="true"][data-akcent="gold"]{background:var(--gold);}
  .sh-chip[aria-pressed="true"]:not([data-akcent]){background:var(--forest);}
  .sh-licznik{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.2em; color:#8F8A74; margin-bottom:22px;}
  .sh-grid{display:grid; grid-template-columns:1fr; gap:clamp(18px,3vw,30px);}
  @media(min-width:640px){.sh-grid{grid-template-columns:1fr 1fr;}}
  @media(min-width:1000px){.sh-grid{grid-template-columns:1fr 1fr 1fr;}}
  .sh-karta{background:#F0EFE8; border:1px solid #C4C3B2; border-radius:8px; padding:16px 16px 18px;
    box-shadow:0 14px 34px rgba(31,36,30,.10); position:relative; display:flex; flex-direction:column; gap:10px;}
  .sh-karta:nth-child(odd){transform:rotate(-.5deg);}
  .sh-karta:nth-child(even){transform:rotate(.4deg);}
  @media(hover:hover){.sh-karta{transition:transform .35s ease, box-shadow .35s ease;}
    .sh-karta:hover{transform:rotate(0) translateY(-4px); box-shadow:0 22px 44px rgba(31,36,30,.14);}}
  .sh-karta::before{content:""; position:absolute; top:-10px; left:26px; width:70px; height:20px;
    background:rgba(121,129,111,.28); transform:rotate(-2deg); border-radius:2px;}
  .sh-top{display:flex; justify-content:space-between; align-items:center; gap:8px;}
  .sh-poz{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.16em; color:#8F8A74; font-variant-numeric:tabular-nums;}
  .sh-kat{font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
    padding:4px 7px; border:1.2px solid; border-radius:3px; transform:rotate(-2deg);}
  .sh-kat.rust{color:var(--rust); border-color:var(--rust);}
  .sh-kat.steel{color:var(--steel); border-color:var(--steel);}
  .sh-kat.gold{color:var(--gold); border-color:var(--gold);}
  .sh-media{margin:0; border:1px solid #C4C3B2; border-radius:5px; overflow:hidden; background:#E9E7DC; position:relative;}
  .sh-atrapa{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
    background:repeating-linear-gradient(-45deg, rgba(44,56,48,.04) 0 14px, rgba(44,56,48,0) 14px 28px);}
  .sh-atrapa .st{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.2em; color:var(--forest);
    border:1.6px solid var(--forest); padding:7px 11px; border-radius:3px; transform:rotate(-3deg); opacity:.85; text-transform:uppercase;}
  .sh-atrapa .md{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.14em; color:#8F8A74; text-transform:uppercase;}
  .sh-tytul{font-family:Fraunces,serif; font-weight:600; font-size:18.5px; line-height:1.25; color:var(--ink); margin:2px 0 0;}
  .sh-podpis{font-size:13.5px; line-height:1.55; color:#454D42; margin:0;}
  .sh-meta{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:auto; padding-top:6px;}
  .sh-metatxt{font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.12em; color:#8F8A74; text-transform:uppercase;}
  .sh-anon{font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.1em; color:var(--steel);
    border:1.2px solid var(--steel); padding:3px 7px; border-radius:3px; transform:rotate(-2deg); text-transform:uppercase;}
  .sh-cap{display:flex; align-items:center; gap:16px; margin-top:40px;}
  .sh-cap .rule{flex:1; height:1px; background:#C4C3B2;}
  .sh-cap span{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.18em; color:#8F8A74; text-transform:uppercase; white-space:nowrap;}

  /* social wstawka + kontakt + stopka */
  .social-note{margin-top:44px; max-width:60ch; background:#F0EFE8; border:1px solid #C4C3B2; border-radius:8px;
    padding:clamp(18px,2.4vw,28px); transform:rotate(.35deg); position:relative;}
  .social-note h3{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.22em; text-transform:uppercase;
    color:var(--steel); margin:0 0 12px;}
  .social-note p{margin:0 0 10px;}
  .kontakt-dane{display:flex; gap:clamp(18px,4vw,48px); flex-wrap:wrap; margin:30px 0 34px;}
  .kd{border:1px solid #C4C3B2; background:#F0EFE8; border-radius:8px; padding:18px 24px; min-width:220px;}
  .kd .lbl{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.2em; color:#8F8A74; text-transform:uppercase; display:block; margin-bottom:6px;}
  .kd .val{font-family:Fraunces,serif; font-size:22px; color:var(--ink); font-weight:600;}
  .stopka{padding:34px 6vw 40px; display:flex; justify-content:space-between; align-items:center; gap:14px;
    border-top:1px solid #C4C3B2; flex-wrap:wrap;}
  .stopka .wm{font-family:Fraunces,serif; font-weight:600; font-size:17px; color:var(--ink);}
  .stopka .mono{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.14em; color:#8F8A74;}
  @media(max-width:860px){ .s-ghost{font-size:96px; top:-16px;} .sekcja{padding:64px 6vw;} }

  /* ==== FULL v-0.2: MOBILE REBUILD (<=860px) — fundament ==== */
  @media(max-width:860px){
    html, body{ overflow-x:hidden; }
    .hero-pin{ padding:84px 0 64px; }
    .inner{ display:block !important; width:min(92vw,560px) !important; }
    .hero-copy{ width:100% !important; max-width:100% !important; }
    .symptoms, .hero .lead{ max-width:100% !important; }
    h1.disp{ font-size:clamp(29px,9.4vw,44px) !important; }
    h1.disp .ln > span{ white-space:normal !important; }
    .doms{ flex-wrap:wrap !important; }
    .p-stempel{ width:clamp(116px,30vw,150px) !important; right:3% !important; top:9% !important; }
    .symptoms{ max-width:calc(100% - 32vw - 14px) !important; }
    .hook-kicker{ white-space:normal !important; max-width:92vw; font-size:11px !important; letter-spacing:.14em !important; }
    .cue{ display:none !important; }
    .por-wrap{ position:relative !important; margin:26px auto 0 !important; }
    .p-lupa{ width:clamp(120px,34vw,168px) !important; left:auto !important; right:8% !important; bottom:24% !important; }
    .p-stos{ right:6% !important; bottom:5% !important; width:clamp(112px,36vw,150px) !important; }
    .sekcja{ padding:56px 6vw; }
    .s-ghost{ display:none; }
    .diag-head{ gap:8px; }
    .kontakt-dane{ flex-direction:column; }
  }

  /* ==== FULL v-0.2: ARCHITEKTURA KOLORÓW ==== */
/* ============================================================
   ARCHITEKTURA KOLORÓW v-0.2 — „protokół schodzi głębiej"
   Zgodność wsteczna: --paper/--paper2/--paper3 aliasowane —
   zatwierdzone sekcje hero→compare nie zmieniają ani piksela.
   MAPA (v-0.4, PODPIĘTA — stan faktyczny = plan):
   hero .atmo-surface | descend: gradient | vign/compare/closer (własne p2) |
   sprostowanie .atmo-desk | .prog-p2-p3 | geneza .atmo-deep |
   dlakogo .atmo-deep | .prog-p3-dk | diagnozy .atmo-dark |
   showroom .atmo-dark (+ .dk-grain + .dk-lamp) | .prog-dk-p1 |
   bio .atmo-return | zasady .atmo-surface | rozmowa .atmo-desk |
   .prog-p2-ink | kontakt+stopka .atmo-ink (+ .ink-lamp „lampka na biurku")
   ============================================================ */
:root{
  /* --- oś papieru (zejście) --- */
  --p0:#E8E6DE;   /* powierzchnia: preloader, hero, zasady        */
  --p1:#DDDBD0;   /* półpiętro: bio (powrót z ciemni)             */
  --p2:#D0CFC2;   /* biurko: vignettes, compare, closer, rozmowa  */
  --p3:#C2C0B0;   /* archiwum: geneza, dla-kogo, diagnozy (NOWY)  */

  /* --- dokument: stała jasność na każdym papierze --- */
  --card:#F0EFE8;
  --card-edge:#B9B7A6;              /* zamiast bladego #C4C3B2 */
  --card-tape:rgba(87,98,90,.32);   /* washi-tape, multiply    */

  /* --- atramenty / tekst na jasnym --- */
  --ink:#1F241E; --forest:#2C3830;
  --tx-body:#454D42;  /* prose: 4.8:1 nawet na p3                 */
  --tx-mute:#57625A;  /* meta TYLKO p0/p1 (5.1:1 na p0);
                         na p2/p3 meta = var(--tx-body)           */
  /* KASACJA jako kolory tekstu: #8F8A74 (2.8:1) i #79816F        */

  /* --- akcenty: role, nie dekoracja --- */
  --rust:#C7480E;       /* werdykt/działanie: kreski, pieczątki, hover */
  --rust-deep:#A23A08;  /* rust dla małego tekstu na p0/p1 (5.4:1)     */
  --rust-lift:#F5803C;  /* rust w ciemni (5.4:1 na --dk)               */
  --steel:#3E4A50;      /* aparat protokołu: metadane, anonimizacja    */
  --steel-lift:#9FB4BC; /* steel w ciemni (6.6:1)                      */
  --gold:#8A7833;       /* dorobek/podpis — najrzadszy                 */
  --gold-lift:#C9B45C;  /* gold w ciemni (6.9:1)                       */

  /* --- ciemnia (ta sama rodzina hue co forest/ink) --- */
  --dk:#232B26;         /* ciemnia dowodów (showroom)   */
  --dk-ink:#1B211C;     /* finał: kontakt + stopka      */
  --dk-card:#2C352E;    /* stół podświetleniowy / karty */
  --dk-line:rgba(232,230,222,.14);
  --dk-tx:#E8E6DE;      /* 11.3:1 na --dk, 13:1 na --dk-ink */
  --dk-tx2:#A9B2A7;     /* 6.5:1 na --dk                    */
  --dk-ghost:rgba(232,230,222,.055);

  /* --- cienie: trzy poziomy zamiast jednego mydła --- */
  --sh-rest:0 1px 0 rgba(31,36,30,.05), 0 10px 24px rgba(31,36,30,.10);
  --sh-lift:0 2px 0 rgba(31,36,30,.05), 0 18px 44px rgba(31,36,30,.17);
  --sh-float:0 34px 90px rgba(31,36,30,.22);  /* max 1 na sekcję */
  --sh-dark:0 24px 60px rgba(0,0,0,.45), inset 0 0 0 1px rgba(232,230,222,.05);

  /* --- aliasy wsteczne v-0.1 --- */
  --paper:var(--p0); --paper2:var(--p1); --paper3:var(--p2);
  --line:#C4C3B2; --khaki:var(--tx-mute); --sand:#79816F;
}

/* ===================== ATMOSFERY ===================== */
.atmo{position:relative; background:var(--bg); color:var(--tx,var(--ink));}

.atmo-surface{--bg:var(--p0); --tx:var(--ink); --tx2:var(--tx-body);
  --mut:var(--tx-mute); --kick:var(--rust-deep); --ghost:rgba(31,36,30,.08);
  --card-bg:var(--card); --card-line:var(--card-edge); --sh-card:var(--sh-rest);}

.atmo-return{--bg:var(--p1); --tx:var(--ink); --tx2:var(--tx-body);
  --mut:var(--tx-mute); --kick:var(--rust-deep); --ghost:rgba(31,36,30,.085);
  --card-bg:var(--card); --card-line:var(--card-edge); --sh-card:var(--sh-rest);}

.atmo-desk{--bg:var(--p2); --tx:var(--ink); --tx2:var(--tx-body);
  --mut:var(--tx-body); --kick:var(--rust-deep); --ghost:rgba(31,36,30,.09);
  --card-bg:var(--card); --card-line:var(--card-edge); --sh-card:var(--sh-lift);}

.atmo-deep{--bg:var(--p3); --tx:var(--ink); --tx2:var(--tx-body);
  --mut:var(--tx-body); --kick:var(--ink);
  --ghost:rgba(240,239,232,.45); /* watermark JAŚNIEJSZY od tła = tłoczenie */
  --card-bg:var(--card); --card-line:var(--card-edge); --sh-card:var(--sh-lift);}
.atmo-deep .s-kick{color:var(--ink);}
.atmo-deep .s-kick::before{content:""; display:inline-block; width:16px; height:3px;
  background:var(--rust); margin-right:9px; vertical-align:middle;}
  /* rust-deep na p3 tylko 3.7:1 — dla 11px kicker w ink + rust-kreska */

.atmo-dark{--bg:var(--dk); --tx:var(--dk-tx); --tx2:var(--dk-tx2);
  --mut:var(--dk-tx2); --kick:var(--rust-lift); --ghost:var(--dk-ghost);
  --card-bg:var(--dk-card); --card-line:var(--dk-line); --sh-card:var(--sh-dark);
  color:var(--dk-tx);}
.atmo-ink{--bg:var(--dk-ink); --tx:var(--dk-tx); --tx2:var(--dk-tx2);
  --mut:var(--dk-tx2); --kick:var(--rust-lift); --ghost:var(--dk-ghost);
  --card-bg:var(--dk-card); --card-line:var(--dk-line); --sh-card:var(--sh-dark);
  color:var(--dk-tx);}
.atmo-dark ::selection,.atmo-ink ::selection{background:var(--rust-lift); color:var(--dk);}

/* --- elementy czytają tokeny atmosfery (mapowanie na klasy v-0.1) --- */
.atmo .s-h2,.atmo .s-lead{color:var(--tx);}
.atmo .prose p{color:var(--tx2);}
.atmo .prose strong{color:var(--tx);}
.atmo .s-kick{color:var(--kick);}
.atmo .s-ghost{color:var(--ghost);}
.atmo .diag-karta,.atmo .sh-karta,.atmo .kd,.atmo .social-note,.atmo .forgiving{
  background:var(--card-bg); border-color:var(--card-line); box-shadow:var(--sh-card);}
.atmo .diag-karta::before,.atmo .sh-karta::before{background:var(--card-tape);
  mix-blend-mode:multiply;}
.atmo .diag-num,.atmo .sh-poz,.atmo .sh-licznik,.atmo .sh-metatxt,
.atmo .sh-cap span,.atmo .kd .lbl,.atmo .sh-atrapa .md{color:var(--mut);}

/* --- ciemnia: karty i atrapy = podświetlone slajdy, nie dziury --- */
.atmo-dark .sh-media{background:#1E2620; border-color:var(--dk-line);
  box-shadow:inset 0 0 34px rgba(0,0,0,.5);}
.atmo-dark .sh-atrapa{background:repeating-linear-gradient(-45deg,
  rgba(232,230,222,.05) 0 14px, rgba(232,230,222,0) 14px 28px);}
.atmo-dark .sh-atrapa .st{color:var(--gold-lift); border-color:var(--gold-lift); opacity:1;}
.atmo-dark .sh-tytul{color:var(--dk-tx);}
.atmo-dark .sh-podpis{color:var(--dk-tx2);}
.atmo-dark .sh-kat.rust{color:var(--rust-lift); border-color:var(--rust-lift);}
.atmo-dark .sh-kat.steel{color:var(--steel-lift); border-color:var(--steel-lift);}
.atmo-dark .sh-kat.gold{color:var(--gold-lift); border-color:var(--gold-lift);}
.atmo-dark .sh-anon{color:var(--steel-lift); border-color:var(--steel-lift);}
.atmo-dark .sh-chip{border-color:var(--dk-tx2); color:var(--dk-tx2);}
.atmo-dark .sh-chip[data-akcent="rust"]{border-color:var(--rust-lift); color:var(--rust-lift);}
.atmo-dark .sh-chip[data-akcent="steel"]{border-color:var(--steel-lift); color:var(--steel-lift);}
.atmo-dark .sh-chip[data-akcent="gold"]{border-color:var(--gold-lift); color:var(--gold-lift);}
.atmo-dark .sh-chip{mix-blend-mode:normal;}
.atmo-dark .sh-chip[aria-pressed="true"]{color:var(--dk) !important;}
.atmo-dark .sh-chip[aria-pressed="true"][data-akcent="rust"]{background:var(--rust-lift);}
.atmo-dark .sh-chip[aria-pressed="true"][data-akcent="steel"]{background:var(--steel-lift);}
.atmo-dark .sh-chip[aria-pressed="true"][data-akcent="gold"]{background:var(--gold-lift);}
.atmo-dark .sh-chip[aria-pressed="true"]:not([data-akcent]){background:var(--dk-tx2);}

/* --- grain lokalny ciemni (globalny multiply gaśnie na ciemnym) --- */
.dk-grain{position:absolute; inset:0; pointer-events:none; z-index:1;
  opacity:.05; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* --- czerwona lampka ciemni (JS ustawia --mx/--my z kursora) --- */
.dk-lamp{position:absolute; inset:0; pointer-events:none; z-index:1;
  mix-blend-mode:screen;
  background:radial-gradient(420px 420px at var(--mx,50%) var(--my,28%),
    rgba(199,72,14,.13), transparent 70%);}
@media(pointer:coarse){.dk-lamp{background:radial-gradient(60% 40% at 50% 0%,
  rgba(199,72,14,.08), transparent 70%);}}

/* --- lampka na biurku w finale (v-0.4: finał ≠ repryza ciemni akt —
       cieplejszy, wyraźny stożek światła nad kartą kontaktu + delikatny
       ambient rust; ciemnia akt zostaje zimna/dokumentalna) --- */
.ink-lamp{position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
  background:
    radial-gradient(640px 460px at 38% 58%, rgba(201,180,92,.22), transparent 72%),
    radial-gradient(1100px 700px at 62% 30%, rgba(245,128,60,.05), transparent 75%);}

/* ===== PASY PRZEJŚCIOWE (zero JS, zero pinów; fallback reduced-motion)
   mid-stopy w rodzinie forest — środek gradientu nie szarzeje ===== */
.prog{position:relative; pointer-events:none; z-index:0;}
.prog-p2-p3{height:26vh; background:linear-gradient(180deg,var(--p2),var(--p3));}
.prog-p3-dk{height:34vh; background:linear-gradient(180deg,
  var(--p3) 0%, #6B7263 34%, #39423A 62%, var(--dk) 100%);}
.prog-dk-p1{height:26vh; background:linear-gradient(180deg,
  var(--dk) 0%, #4A5449 30%, #9AA091 68%, var(--p1) 100%);}
.prog-p2-ink{height:22vh; background:linear-gradient(180deg,
  var(--p2) 0%, #6A7263 40%, var(--dk-ink) 100%);}
.prog-label{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; color:#C9CDBF; white-space:nowrap;}

/* --- CTA finału (na .atmo-ink) --- */
.cta-ink{display:inline-flex; align-items:center; gap:12px; text-decoration:none;
  background:var(--rust-deep); color:#FFF6EE;   /* 6.3:1 */
  font-weight:600; font-size:15.5px; padding:16px 28px; border-radius:999px;
  box-shadow:0 18px 44px rgba(0,0,0,.4);
  transition:background .3s, transform .25s;}
.cta-ink:hover{background:var(--rust); transform:translateY(-2px);}  /* 4.5:1 */

/* --- stopka w finale (v-0.4 P0-fix: footer MA obie klasy na sobie — selektor bez zagnieżdżenia) --- */
.stopka.atmo-ink{border-top:1px solid var(--dk-line);}
.stopka.atmo-ink .wm{color:var(--dk-tx);}
.stopka.atmo-ink .mono{color:var(--dk-tx2);}

/* --- KASACJA mydła v-0.1 --- */
.sekcja-tinted{background:none;}  /* tinty rgba(.035) zastąpione osią papieru */



  /* ==== FULL v-0.2: SHOWROOM "LINKA DOWODOWA" ==== */
  .sh2{ padding-bottom:0; overflow:hidden; }
  .sh2-lampa{ position:absolute; inset:0; pointer-events:none; z-index:1;
    background:radial-gradient(56% 44% at 50% 42%, rgba(232,230,222,.10), transparent 70%); }
  /* ==== v-0.4: WARSZTAT (iframe biurka) zamiast galerii linki ==== */
  .shb{ position:relative; z-index:2; max-width:1160px; margin:30px auto 0; padding:0 clamp(16px,3vw,32px) 54px; }
  .shb-ramka{ position:relative; aspect-ratio:16/9; border-radius:10px; overflow:hidden;
    background:#141a16; box-shadow:var(--sh-dark); border:1px solid var(--dk-line); }
  .shb-ramka iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
    pointer-events:none; }               /* uspiony: scroll strony nie wpada w warsztat */
  .shb-ramka.aktywny iframe{ pointer-events:auto; }
  .shb-cloak{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; gap:12px;
    align-items:center; justify-content:center; cursor:pointer; border:0; width:100%;
    background:linear-gradient(180deg, rgba(20,25,20,.18), rgba(20,25,20,.55) 78%);
    color:var(--dk-tx); text-align:center; padding:24px; }
  .shb-cloak[hidden]{ display:none; }
  .shb-cl-glowny{ font-size:12.5px; letter-spacing:.24em; text-transform:uppercase; color:#F2EBD8;
    border:1.6px solid rgba(242,235,216,.85); border-radius:4px; padding:13px 22px;
    background:rgba(20,25,20,.55); transition:background .25s, transform .25s; }
  @media(hover:hover){ .shb-cloak:hover .shb-cl-glowny{ background:var(--rust-deep); transform:translateY(-2px); } }
  .shb-cl-sub{ font-size:13px; line-height:1.5; color:var(--dk-tx2); max-width:52ch;
    text-shadow:0 1px 8px rgba(0,0,0,.5); }
  .shb-cloak:focus-visible{ outline:2px solid var(--rust-lift); outline-offset:-4px; }
  .shb-pasek{ display:flex; align-items:center; justify-content:space-between; gap:16px;
    flex-wrap:wrap; margin-top:14px; }
  .shb-status{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--dk-tx2); }
  .shb-akcje{ display:flex; gap:10px; }
  .shb-btn{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; cursor:pointer;
    color:var(--dk-tx); background:none; border:1.4px solid var(--dk-line); border-radius:4px;
    padding:8px 14px; transition:border-color .25s, color .25s; }
  @media(hover:hover){ .shb-btn:hover{ border-color:var(--rust-lift); color:var(--rust-lift); } }
  .shb-btn:focus-visible{ outline:2px solid var(--rust-lift); outline-offset:2px; }
  .shb-ramka:fullscreen{ aspect-ratio:auto; border-radius:0; }
  @media(max-width:860px){
    .shb{ padding:0 4vw 40px; }
    .shb-ramka{ aspect-ratio:4/3; }
    .shb-cl-sub{ font-size:11.5px; }
  }

  /* ==== FULL v-0.2: SCENY ==== */
  :root{ --manila:#C9B98C; --manila-c:#BFAE7E; --manila-edge:#A6935F; }

  /* --- łuk tonalny v-0.4: zejście PODPIĘTE (sprostowanie p2 → geneza/dlakogo p3 → ciemnia).
     Poprzednie korekty v-0.2 nadpisywały tła po ID i trzymały genezę na p1 (jaśniej niż
     closer!) — to było sedno „rozjazdu" połówek. Pasy i sekcje idą teraz wg mapy atmosfer. --- */
  .prog-p2-p3{background:linear-gradient(180deg,var(--p2),var(--p3));}
  #geneza.atmo{background:linear-gradient(0deg, rgba(44,56,48,.045), rgba(44,56,48,.045)), var(--p3);}
  .prog-p3-dk{height:40vh; background:linear-gradient(180deg,
    var(--p3) 0%, #8A9082 30%, #4A5449 64%, var(--dk) 100%);}
  .prog-p2-ink{background:linear-gradient(180deg, var(--p2) 0%, #6A7263 40%, var(--dk-ink) 100%);}
  #rozmowa .s-kick{color:var(--steel);}
  .prog-depth{position:absolute; left:clamp(14px,3vw,44px); bottom:30px; font-family:'IBM Plex Mono',monospace;
    font-size:10.5px; letter-spacing:.14em; color:#C9CDBF; font-variant-numeric:tabular-nums; font-weight:500;}

  /* --- LINIA PROTOKOŁU: jedna nić akt w lewym marginesie --- */
  .poz{position:absolute; left:clamp(8px,2.2vw,40px); top:0; bottom:0; z-index:3; pointer-events:none; color:var(--mut,#57625A);}
  .poz-nic{position:absolute; left:0; top:0; bottom:0; width:0; border-left:1px dashed currentColor; opacity:.45; transform-origin:top; display:block;}
  .poz-tab{position:absolute; left:-5px; top:clamp(84px,12vh,150px); writing-mode:vertical-rl; font-size:9.5px;
    letter-spacing:.2em; opacity:.75; background:var(--bg); padding:8px 0;}
  .poz-ink{color:var(--dk-tx2);}
  .poz-ink .poz-tab{background:transparent;}
  @media(max-width:899px){ .poz{display:none;} }

  /* --- STAŁY GRZBIET PROTOKOŁU: zakładki akt zamiast obcej belki UI --- */
  .spis{position:fixed; right:clamp(12px,2.4vw,30px); bottom:max(clamp(12px,2.4vw,26px),env(safe-area-inset-bottom)); z-index:90;
    display:flex; flex-direction:column; align-items:flex-end; gap:9px;}
  .spis-sygnatura{display:none;}
  .spis-btn{display:flex; align-items:center; gap:8px; font-size:10px; letter-spacing:.18em;
    text-transform:uppercase; cursor:pointer; color:var(--ink); background:var(--card);
    min-height:44px; border:1.4px solid var(--card-edge); border-radius:4px; padding:9px 10px;
    box-shadow:var(--sh-rest); transition:border-color .25s, color .25s;}
  .spis-btn b{font:inherit; color:var(--rust-deep); letter-spacing:.12em;}
  @media(hover:hover){ .spis-btn:hover{border-color:var(--rust); color:var(--rust);} }
  .spis-btn:focus-visible{outline:2px solid var(--rust); outline-offset:2px;}
  .spis-btn[aria-expanded="true"]{color:var(--rust); border-color:var(--rust);}
  .spis-lista{list-style:none; width:min(270px,calc(100vw - 24px)); margin:0; padding:10px; background:var(--card);
    border:1px solid var(--card-edge); border-radius:6px; box-shadow:var(--sh-lift);
    display:flex; flex-direction:column; gap:2px; max-height:min(70vh,520px); overflow:auto;}
  .spis-lista[hidden]{display:none;}
  .spis-lista a{display:grid; grid-template-columns:28px minmax(0,1fr); align-items:center;
    min-height:44px; padding:7px 8px; font-family:'IBM Plex Mono',monospace; font-size:9.5px;
    letter-spacing:.13em; text-transform:uppercase; color:#454D42; text-decoration:none;
    border-radius:3px; white-space:nowrap; transition:background .2s, color .2s, border-color .2s;}
  .spis-nr{font-weight:600; color:var(--steel); font-variant-numeric:tabular-nums;}
  .spis-etykieta{overflow:hidden; text-overflow:ellipsis;}
  .spis-lista a.is-active{background:rgba(199,72,14,.09); color:var(--rust-deep);}
  .spis-lista a.is-active .spis-nr{color:var(--rust-deep);}
  @media(hover:hover){ .spis-lista a:hover{background:rgba(199,72,14,.09); color:var(--rust-deep);} }
  .spis-lista a:focus-visible{outline:2px solid var(--rust); outline-offset:-2px;}
  .spis-lista .spis-szczyt{border-bottom:1px dashed var(--card-edge); margin-bottom:5px; padding-bottom:5px;}

  @media(min-width:900px){
    .spis{top:50%; bottom:auto; right:clamp(10px,1.55vw,24px); transform:translateY(-50%);
      gap:7px; pointer-events:none;}
    .spis-sygnatura{display:block; align-self:flex-end; padding:4px 5px 4px 7px;
      font-size:7.5px; line-height:1; letter-spacing:.22em; color:var(--tx-mute);
      background:rgba(240,239,232,.92); border:1px solid var(--card-edge); border-radius:3px;
      transform:rotate(-.5deg); box-shadow:0 2px 8px rgba(31,36,30,.08);}
    .spis-btn{display:none;}
    .spis-lista,
    .spis-lista[hidden]{position:relative; display:flex; align-items:flex-end; gap:5px;
      width:auto; padding:8px 0; max-height:none; overflow:visible; background:transparent;
      border:0; border-radius:0; box-shadow:none; pointer-events:auto;}
    .spis-lista::before{content:""; position:absolute; right:16px; top:0; bottom:0;
      border-right:1px dashed rgba(87,98,90,.42); z-index:-1;}
    .spis-lista li{display:flex; justify-content:flex-end;}
    .spis-lista .spis-szczyt{border:0; margin:0 0 4px; padding:0 0 5px;}
    .spis-lista a{grid-template-columns:32px 0fr; width:34px; min-height:32px; padding:0;
      min-height:34px; justify-items:center; overflow:hidden; background:rgba(240,239,232,.94);
      border:1px solid var(--card-edge); border-radius:4px 2px 2px 4px;
      box-shadow:0 3px 12px rgba(31,36,30,.10); transform:rotate(.2deg);
      transition:width .22s ease, grid-template-columns .22s ease, background .2s, color .2s, transform .2s;}
    .spis-lista li:nth-child(even) a{transform:rotate(-.35deg);}
    .spis-lista a .spis-nr{width:32px; text-align:center;}
    .spis-lista a .spis-etykieta{width:0; justify-self:start; opacity:0;
      transition:width .22s ease, opacity .14s ease;}
    .spis-lista a:hover,
    .spis-lista a:focus-visible,
    .spis-lista a.is-active{width:132px; grid-template-columns:32px minmax(0,1fr);
      justify-items:stretch; background:var(--card); transform:translateX(-2px) rotate(0deg);}
    .spis-lista a:hover .spis-etykieta,
    .spis-lista a:focus-visible .spis-etykieta,
    .spis-lista a.is-active .spis-etykieta{width:auto; opacity:1; padding-right:10px;}
    .spis-lista a.is-active{border-color:var(--rust); box-shadow:inset 3px 0 0 var(--rust), 0 4px 14px rgba(31,36,30,.13);}
  }

  /* --- GENEZA: zeznanie świadka --- */
  .gen-cialo{position:relative;}
  .gen-fraza{border-bottom:2px dotted var(--rust-deep); padding-bottom:1px; cursor:default;}
  .gen-marker{background-image:linear-gradient(rgba(176,141,46,.30), rgba(176,141,46,.30));
    background-repeat:no-repeat; background-size:100% 82%; background-position:0 62%;
    box-decoration-break:clone; -webkit-box-decoration-break:clone;}
  .gen-zwrot{font-size:clamp(17px,1.6vw,21px) !important; line-height:1.55 !important;
    color:var(--tx) !important; font-weight:500; max-width:56ch !important;}
  .gen-rozplatac{position:relative; white-space:nowrap;}
  .gen-splot{position:absolute; left:-4%; bottom:-.85em; width:108%; height:.95em; overflow:visible; pointer-events:none;}
  .gen-splot path{fill:none; stroke:var(--rust); stroke-width:2; stroke-linecap:round; opacity:.9;}
  .gen-dowody{display:none; position:absolute; right:calc(-1 * clamp(0px, 16vw - 130px, 190px)); top:0; width:132px;}
  #geneza.gen-on .gen-dowody{display:block;}
  .gen-dow-head{display:block; font-size:9px; letter-spacing:.18em; color:var(--mut); margin-bottom:10px; text-transform:uppercase;}
  .gen-dow-lista{display:flex; flex-direction:column; gap:14px;}
  .gen-mini{position:relative; margin:0; width:100%; will-change:transform;}
  .gen-mini::before{content:""; position:absolute; top:-8px; left:22%; width:46%; height:15px;
    background:var(--card-tape); mix-blend-mode:multiply; transform:rotate(-2.5deg); border-radius:2px; z-index:2;}
  .gen-mini img{display:block; width:100%; height:auto; filter:saturate(.7) contrast(1.04);
    box-shadow:0 8px 18px rgba(31,36,30,.16); border-radius:3px;}
  .gen-mini-tag{display:block; font-size:8.5px; letter-spacing:.16em; color:var(--mut); margin-top:5px; text-transform:uppercase;}

  /* --- DLA KOGO: karta kwalifikacji --- */
  .dk2-grid{display:grid; grid-template-columns:1.25fr .85fr; gap:clamp(22px,4vw,52px); align-items:start;}
  .kwal{position:relative; background:var(--card-bg); border:1px solid var(--card-line); border-radius:8px;
    padding:clamp(18px,2.4vw,28px); box-shadow:var(--sh-card); transform:rotate(.6deg); max-width:380px;}
  .kwal-tape{position:absolute; top:-12px; left:30px; width:84px; height:22px; background:var(--card-tape);
    mix-blend-mode:multiply; transform:rotate(-2deg); border-radius:2px;}
  .kwal-head{color:var(--steel); letter-spacing:.22em; margin-bottom:16px; border-bottom:1px solid var(--card-line); padding-bottom:10px;}
  .kwal-list{list-style:none; display:flex; flex-direction:column; gap:13px;}
  .kwal-poz{display:flex; align-items:center; gap:12px;}
  .kwal-poz .mono{color:var(--tx-body); font-size:10.5px; letter-spacing:.08em;}
  .kwal-znak{width:20px; height:20px; flex:0 0 20px;}
  .kwal-znak path{fill:none; stroke:var(--rust); stroke-width:2.6; stroke-linecap:round;}
  .kwal-x path{stroke:var(--steel);}
  .kwal-sk{position:relative; display:inline-block; padding:1px 2px;}
  .kwal-strike{position:absolute; left:-2px; right:-2px; top:50%; height:12px; transform:translateY(-50%); overflow:visible; pointer-events:none;}
  .kwal-strike path{stroke:var(--rust); stroke-width:2.2; fill:none; stroke-linecap:round;}
  .kwal-korpo .mono{color:var(--mut);}
  .kwal-stopka{display:flex; align-items:center; gap:14px; margin-top:20px; border-top:1px dashed var(--card-line); padding-top:14px; color:var(--forest);}
  .mini-kompas{width:44px; height:44px; flex:0 0 44px;}
  .kwal-podpis{font-size:9px; letter-spacing:.14em; color:var(--mut); line-height:1.8;}

  /* --- DIAGNOZY: trzy akta pod lampą --- */
  .dg-jasnosc{position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0;
    background:radial-gradient(64% 54% at 50% 42%, rgba(232,230,222,.15), transparent 72%);}
  .dg-protokol{position:relative; background:var(--card); border:1px solid var(--card-edge); border-radius:4px;
    padding:14px 18px; margin:26px 0 8px; max-width:380px; box-shadow:var(--sh-dark);
    display:flex; flex-direction:column; gap:7px; transform:rotate(-.5deg);}
  .dg-protokol::before{content:""; position:absolute; top:-9px; left:26px; width:64px; height:17px;
    background:var(--card-tape); mix-blend-mode:multiply; transform:rotate(-2deg); border-radius:2px;}
  .dg-prot-head{color:#8F8A74; font-size:9px; letter-spacing:.2em;}
  .dg-prot-poz{display:flex; align-items:center; gap:10px;}
  .dg-prot-poz s{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.08em; color:var(--forest);
    text-decoration-color:var(--rust); text-decoration-thickness:1.8px;}
  .dg-prot-poz i{font-style:normal; font-size:8.5px; letter-spacing:.14em; color:var(--rust); border:1px solid var(--rust);
    border-radius:3px; padding:1px 5px; transform:rotate(-3deg);}
  .dg-prot-cta{color:var(--rust); font-size:9px; letter-spacing:.2em; margin-top:4px;}
  .dg-prog{display:flex; align-items:center; gap:14px; color:var(--dk-tx2); margin:18px 0 6px; font-variant-numeric:tabular-nums;}
  .dg-kreski{display:flex; gap:7px;}
  .dg-kreski i{width:26px; height:3px; background:rgba(232,230,222,.32); position:relative; overflow:hidden; display:block;}
  .dg-kreski i b{position:absolute; inset:0; background:var(--rust-lift); transform:scaleX(0); transform-origin:left; display:block;}
  .dg-teczka{position:relative; margin:0 0 30px;}
  .dg-okladka{position:relative; z-index:3; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    background:linear-gradient(180deg, var(--manila), var(--manila-c)); border:1px solid var(--manila-edge);
    border-radius:8px 8px 0 0; padding:13px 20px; box-shadow:var(--sh-dark); will-change:transform;}
  .dg-okladka::before{content:""; position:absolute; top:-11px; left:18px; width:120px; height:12px;
    background:var(--manila); border:1px solid var(--manila-edge); border-bottom:none; border-radius:5px 5px 0 0;}
  .dg-zakladka{color:#4A4126; font-size:10px; letter-spacing:.2em;}
  .dg-okl-zgl{position:relative; display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:11.5px;
    letter-spacing:.08em; color:var(--ink); padding:1px 2px;}
  .dg-okl-zgl svg{position:absolute; left:-2px; right:-2px; top:50%; height:13px; transform:translateY(-50%); overflow:visible; pointer-events:none;}
  .dg-okl-zgl svg path{stroke:var(--rust); stroke-width:2.4; fill:none; stroke-linecap:round;}
  .dg-okl-tag{font-size:8.5px; letter-spacing:.16em; color:var(--rust); border:1.2px solid var(--rust);
    border-radius:3px; padding:2px 6px; transform:rotate(-4deg);}
  #diagnozy .diag-karta{transform:none; border-radius:0 0 8px 8px; margin-top:-1px;
    padding-left:clamp(46px,5.5vw,62px); padding-bottom:70px; position:relative;}
  #diagnozy .diag-karta::before{display:none;}
  #diagnozy .diag-zgl{text-decoration:none; position:relative; display:inline-block; padding:4px 8px;}
  .dg-strike{position:absolute; left:2px; right:2px; top:50%; height:13px; transform:translateY(-50%); overflow:visible; pointer-events:none; width:calc(100% - 4px);}
  .dg-strike path{stroke:var(--rust); stroke-width:2.4; fill:none; stroke-linecap:round;}
  .dg-nic{position:absolute; left:14px; top:66px; bottom:88px; width:22px; height:auto; pointer-events:none;}
  .dg-nic path{fill:none; stroke-linecap:round;}
  .dg-nic-rdzen{stroke:#8A7040; stroke-width:3.4;}
  .dg-nic-splot{stroke:#D9C79B; stroke-width:1.2; stroke-dasharray:3 4;}
  #diagnozy .diag-karta .prose u{text-decoration:none;
    background-image:linear-gradient(var(--rust), var(--rust)); background-repeat:no-repeat;
    background-size:100% 2px; background-position:0 96%;}
  #diagnozy .diag-real{display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:10.5px;
    letter-spacing:.14em; text-transform:uppercase; color:var(--rust); border:1.6px solid var(--rust);
    border-radius:3px; padding:7px 11px; transform:rotate(-1.2deg); margin-top:4px; background:rgba(199,72,14,.05);}
  .dg-stemp{position:absolute; right:20px; bottom:16px; display:flex; flex-direction:column; align-items:center; gap:1px;
    font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.22em; text-transform:uppercase;
    color:var(--rust); border:2px solid var(--rust); border-radius:4px; padding:7px 12px;
    transform:rotate(-6deg); mix-blend-mode:multiply; will-change:transform;}
  .dg-final{position:relative; z-index:4;}
  /* v-0.4: stemple na CIEMNYCH kartach akt — rust-lift + normal blend (multiply gasił je do zera) */
  .atmo-dark .dg-stemp{color:var(--rust-lift); border-color:var(--rust-lift); mix-blend-mode:normal; opacity:.92;}
  #diagnozy .forgiving{border-color:rgba(232,230,222,.4); background:rgba(240,239,232,.06);}
  #diagnozy .forgiving p{color:var(--dk-tx);}
  #diagnozy .metoda p{font-family:Fraunces,serif; font-weight:500; font-size:clamp(17px,1.9vw,25px);
    line-height:1.45; color:var(--dk-tx); max-width:none;}
  #diagnozy .metoda strong{color:var(--gold-lift); font-weight:600;}
  .dg-trzy{margin-top:34px; position:relative; max-width:640px;}
  .dg-trzy-linia{position:absolute; left:0; right:0; top:8px; width:100%; height:34px; pointer-events:none;}
  .dg-trzy-linia path{fill:none; stroke:#8A7040; stroke-width:2;}
  .dg-trzy-teczki{display:flex; gap:clamp(14px,4vw,40px); justify-content:space-between; position:relative;}
  .dg-mini{display:flex; flex-direction:column; align-items:center; gap:8px; flex:1;}
  .dg-mini i{display:block; width:52px; height:34px; background:linear-gradient(180deg,var(--manila),var(--manila-c));
    border:1px solid var(--manila-edge); border-radius:3px; position:relative; box-shadow:0 6px 14px rgba(0,0,0,.35);}
  .dg-mini i::before{content:""; position:absolute; top:-6px; left:6px; width:20px; height:6px;
    background:var(--manila); border:1px solid var(--manila-edge); border-bottom:none; border-radius:3px 3px 0 0;}
  .dg-mini b{font-weight:400; font-size:8.5px; letter-spacing:.12em; color:var(--dk-tx2); text-align:center;}

  /* diagnozy: tryb pinowanej sceny (JS dodaje .dg-on tylko na desktopie z animacjami) */
  #diagnozy.dg-on{padding:0 4vw;}
  #diagnozy.dg-on .dg-pin{height:100svh; display:flex; align-items:center; overflow:hidden;}
  #diagnozy.dg-on .s-inner{width:100%; max-width:1060px; height:94svh; display:flex; flex-direction:column; padding-top:4svh; position:relative;}
  #diagnozy.dg-on .s-ghost{display:none;}
  #diagnozy.dg-on .s-kick{margin-bottom:10px;}
  #diagnozy.dg-on .s-h2{font-size:clamp(19px,2.1vw,28px); max-width:30ch; margin-bottom:8px;}
  #diagnozy.dg-on .dg-protokol{position:absolute; right:0; top:0; margin:0; width:min(330px,32%); z-index:1;}
  #diagnozy.dg-on .diag-lista{position:relative; flex:1; min-height:0; margin-top:6px;}
  #diagnozy.dg-on .dg-teczka{position:absolute; inset:0; margin:auto; width:min(660px,94%); height:fit-content; max-height:100%;}
  #diagnozy.dg-on .dg-okladka{position:absolute; inset:0; border-radius:8px; flex-direction:column; justify-content:center; gap:18px;}
  #diagnozy.dg-on .dg-okladka::before{top:-11px; left:26px;}
  #diagnozy.dg-on .dg-zakladka{font-size:13px;}
  #diagnozy.dg-on .dg-okl-zgl{font-size:15px;}
  #diagnozy.dg-on .diag-karta{border-radius:8px; margin-top:0;}
  #diagnozy.dg-on .diag-karta .prose p{font-size:14px; line-height:1.55; max-width:none; margin-bottom:12px;}
  #diagnozy.dg-on .dg-nic{top:58px; bottom:82px;}
  #diagnozy.dg-on .dg-final{position:absolute; inset:0; margin:auto; width:min(720px,94%); height:fit-content;
    display:flex; flex-direction:column; gap:18px; z-index:6; pointer-events:none; opacity:0;}
  #diagnozy.dg-on .forgiving{margin-top:0;}
  #diagnozy.dg-on .metoda{margin-top:0;}
  #diagnozy.dg-on .dg-trzy{margin-top:8px;}
  #diagnozy.dg-on .dg-prog{position:absolute; left:0; bottom:1.5svh; margin:0;}

  /* diagnozy: ciasne viewporty — finał musi zmieścić się w pinie */
  @media (max-height:900px){
    #diagnozy.dg-on .metoda p{font-size:16.5px; line-height:1.4;}
    #diagnozy.dg-on .forgiving{padding:14px 18px;}
    #diagnozy.dg-on .forgiving p{font-size:13.5px; line-height:1.55;}
    #diagnozy.dg-on .dg-final{gap:10px;}
    #diagnozy.dg-on .dg-trzy{margin-top:2px;}
    #diagnozy.dg-on .dg-mini i{width:42px; height:27px;}
    #diagnozy.dg-on .diag-karta .prose p{font-size:13px; line-height:1.5;}
    #diagnozy.dg-on .diag-karta{padding-bottom:60px;}
  }

  /* --- BIO: przebieg trasy --- */
  .bio-trasa{position:relative;}
  #bio.bio-on .bio-trasa{padding-left:clamp(64px,9vw,120px);}
  #bio.bio-on .bio-rail{display:block;}
  .bio-rail{display:none; position:absolute; left:0; top:0; bottom:0; width:clamp(48px,7vw,96px); pointer-events:none; color:var(--gold);}
  .bio-kompas{position:absolute; left:50%; top:-16px; transform:translateX(-50%); width:40px; color:var(--gold);}
  .bio-kompas .mini-kompas{width:40px; height:40px;}
  .bio-svg{position:absolute; left:0; top:34px; bottom:44px; width:100%; height:calc(100% - 78px);}
  .bio-path{fill:none; stroke:var(--gold); stroke-width:2px; stroke-dasharray:7 6; opacity:.85;}
  .bio-petla{position:absolute; left:50%; bottom:2px; transform:translateX(-50%); width:34px; height:34px;}
  .bio-petla path{fill:none; stroke:var(--gold); stroke-width:2.2; stroke-linecap:round;}
  .bio-dot{position:absolute; left:50%; width:11px; height:11px; margin-left:-5.5px; border-radius:50%;
    background:var(--gold); box-shadow:0 0 0 4px rgba(138,120,51,.18); pointer-events:auto;}
  @media(hover:hover){ .bio-dot:hover{animation:bioPuls .9s ease-in-out infinite;} }
  @keyframes bioPuls{ 0%,100%{box-shadow:0 0 0 4px rgba(138,120,51,.18);} 50%{box-shadow:0 0 0 9px rgba(138,120,51,.08);} }
  .bio-tab{position:absolute; left:calc(50% + 14px); margin-top:-4px; font-size:8.5px; letter-spacing:.16em;
    color:var(--gold); white-space:nowrap; background:var(--bg); padding:2px 4px; border:1px solid rgba(138,120,51,.4);
    border-radius:3px; transform:rotate(-1.6deg);}
  /* v-0.4: bio-final wraca do prozy (ściana 30px serifa grzebała puentę);
     wyróżnikiem jest TYLKO zdanie .bio-lacz — delikatnie większy Fraunces + podkreślenie */
  #bio .bio-final{font-size:17.5px; line-height:1.7; color:var(--tx2); max-width:66ch;}
  .bio-lacz{position:relative; font-family:Fraunces,serif; font-style:italic; font-weight:500;
    font-size:clamp(19px,1.9vw,24px); line-height:1.4; color:var(--rust); white-space:normal;}
  .bio-under{position:absolute; left:-1%; bottom:-.12em; width:102%; height:.28em; overflow:visible; pointer-events:none;}
  .bio-under path{fill:none; stroke:var(--rust); stroke-width:4; stroke-linecap:round;}

  /* --- ZASADY: wyłączenia z protokołu --- */
  .zas-klauzula{position:relative; margin:0 0 26px;}
  .zas-nr{display:inline-block; font-size:9.5px; letter-spacing:.22em; color:var(--rust-deep);
    border-bottom:1px solid rgba(162,58,8,.35); padding-bottom:3px; margin-bottom:9px; text-transform:uppercase;}
  .zas-cyt{position:relative; display:inline; padding:0 1px;}
  .zas-cyt svg{position:absolute; left:-2px; right:-2px; top:50%; height:13px; transform:translateY(-50%);
    overflow:visible; pointer-events:none; width:calc(100% + 4px);}
  .zas-cyt svg path{stroke:var(--rust); stroke-width:2.2; fill:none; stroke-linecap:round; opacity:.9;}
  .zas-katalog{position:absolute; right:calc(-1 * clamp(0px, 18vw - 150px, 220px)); top:6px; width:150px;
    background:var(--card-bg); border:1px solid var(--card-line); border-radius:6px; padding:12px 13px 40px;
    box-shadow:var(--sh-card); transform:rotate(1.2deg); will-change:transform;}
  .zk-tyt{display:block; font-size:8.5px; letter-spacing:.14em; color:var(--tx-body); margin-bottom:9px; text-transform:uppercase;}
  .zk-linia{display:block; height:5px; background:rgba(31,36,30,.14); border-radius:2px; margin:6px 0;}
  .zk-linia.kr{width:62%;}
  .zk-stemp{position:absolute; right:8px; bottom:8px; font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
    color:var(--rust); border:2px solid var(--rust); border-radius:3px; padding:4px 8px; transform:rotate(-8deg); will-change:transform;}
  .soc-ikony{display:flex; gap:14px; margin:4px 0 16px;}
  .soc-kw{display:block; width:48px; height:48px; border:1.5px dashed var(--steel); border-radius:8px; opacity:.9; will-change:transform;}
  .soc-kw svg{display:block; width:100%; height:100%;}
  .soc-x{fill:none; stroke:var(--rust); stroke-width:2.6; stroke-linecap:round;}

  /* --- ROZMOWA: procedura po sznurku --- */
  .rz-tor{position:relative; padding-left:clamp(52px,7vw,86px);}
  .rz-lina{position:absolute; left:clamp(6px,1.4vw,18px); top:6px; bottom:6px; width:30px; height:calc(100% - 12px); pointer-events:none;}
  .rz-lina-rdzen{fill:none; stroke:#8A7040; stroke-width:3.4px; stroke-linecap:round;}
  .rz-lina-splot{fill:none; stroke:#D9C79B; stroke-width:1.2px; stroke-dasharray:3 4;}
  .rz-stacja{position:relative; margin:0 0 34px;}
  .rz-krok{display:inline-block; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--steel);
    border:1.6px solid var(--steel); border-radius:3px; padding:6px 10px; transform:rotate(-2deg);
    margin-bottom:12px; background:var(--card-bg); will-change:transform;}
  /* v-0.4: karty kroków dostają papierowość jak reszta rekwizytów (rotacja; taśma via ::before) */
  .rz-stacja:nth-child(2) .rz-karta{transform:rotate(-.35deg);}
  .rz-stacja:nth-child(3) .rz-karta{transform:rotate(.3deg);}
  .rz-stacja:nth-child(4) .rz-karta{transform:rotate(-.25deg);}
  .rz-karta::before{content:""; position:absolute; left:34px; top:-9px; width:74px; height:20px;
    background:var(--card-tape); transform:rotate(-2deg); mix-blend-mode:multiply; border-radius:2px;}
  .rz-karta{position:relative; background:var(--card-bg); border:1px solid var(--card-line); border-radius:8px 8px 8px 8px;
    padding:clamp(18px,2.4vw,28px); box-shadow:var(--sh-card); max-width:62ch; will-change:transform;}
  .rz-karta::after{content:""; position:absolute; right:0; bottom:0; width:0; height:0;
    border-style:solid; border-width:0 0 22px 22px; border-color:transparent transparent var(--bg) transparent;
    filter:drop-shadow(-2px -2px 2px rgba(31,36,30,.10)); border-bottom-right-radius:4px;}
  .rz-karta .prose p{margin:0;}
  .rz-widelki{position:relative; max-width:400px; margin:0 0 26px; padding-top:2px;}
  .rz-y{display:block; width:min(220px,70%); height:74px; margin-left:-14px;}
  .rz-y path{fill:none; stroke-width:3; stroke-linecap:round;}
  .rz-y-gold{stroke:var(--gold);}
  .rz-y-steel{stroke:var(--steel);}
  .rz-tail{position:absolute; font-size:9.5px; letter-spacing:.14em; white-space:nowrap;}
  .rz-tail-gold{left:-14px; bottom:-8px; color:var(--gold);}
  .rz-tail-steel{left:150px; bottom:-8px; color:var(--steel);}
  .rz-margines{position:relative; max-width:56ch; background:var(--paper); border:1px dashed #B7B29B; border-radius:8px;
    padding:clamp(16px,2.2vw,24px); transform:rotate(-1.6deg); margin-top:10px; will-change:transform;}
  .rz-margines .prose p{margin:0; font-size:14.5px;}

  /* --- KONTAKT: nowe zgłoszenie --- */
  .kt-biurko{position:relative; margin-top:26px;}
  .kt-tlo{position:absolute; right:-4%; top:-30px; width:min(300px,40%); z-index:0; opacity:.5;
    transform:rotate(-5deg); pointer-events:none; filter:saturate(.6) brightness(.8);}
  .kt-karta{position:relative; z-index:2; background:var(--card); border:1px solid var(--card-edge); border-radius:10px;
    padding:clamp(22px,3.4vw,40px); padding-bottom:88px; max-width:640px; box-shadow:var(--sh-dark); will-change:transform;
    /* v-0.4 P0-fix: jasna karta w ciemnej sekcji resetuje tokeny atmosfery —
       .atmo .prose p / .atmo .kd .lbl czytają --tx2/--mut z NAJBLIŻSZEGO przodka */
    --tx:var(--ink); --tx2:#454D42; --mut:#57625A;}
  .kt-karta .kwal-tape{left:36px;}
  .kt-stare{display:flex; flex-direction:column; gap:8px; border-bottom:1px dashed var(--card-edge);
    padding-bottom:16px; margin-bottom:20px;}
  .kt-head{color:#8F8A74; font-size:9px; letter-spacing:.2em;}
  .kt-zgl{display:flex; align-items:center; gap:10px; will-change:transform;}
  .kt-zgl s{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.08em; color:var(--forest);
    text-decoration-color:var(--rust); text-decoration-thickness:1.8px;}
  .kt-zgl i{font-style:normal; font-family:'IBM Plex Mono',monospace; font-size:8px; letter-spacing:.14em;
    color:#8F8A74; border:1px solid #B9B7A6; border-radius:3px; padding:1px 5px; text-transform:uppercase; transform:rotate(-2deg);}
  .kt-nowa{position:relative; display:flex; align-items:center; gap:12px; margin-top:6px; min-height:26px;}
  .kt-linia{width:min(320px,58%); height:8px; overflow:visible;}
  .kt-linia path{fill:none; stroke:var(--forest); stroke-width:1.6; stroke-dasharray:4 5; stroke-linecap:round; opacity:.75;}
  .kt-tag{font-size:8.5px; letter-spacing:.14em; color:#8F8A74; border:1.2px dashed #A9A695; border-radius:3px;
    padding:2px 6px; transform:rotate(-3deg); text-transform:uppercase;}
  .kt-olowek{width:74px; height:16px; color:var(--forest); opacity:.8;}
  .kt-copy p{color:#454D42;}
  .kt-karta .kontakt-dane{margin:22px 0 10px;}
  .kt-karta .kd{background:#FBF9F1; border-color:var(--card-edge); text-decoration:none; display:block;
    box-shadow:0 6px 16px rgba(31,36,30,.10); will-change:transform;}
  .kt-karta .kd::before{content:""; display:block; width:30px; height:9px; border:2px solid #8F8A74; border-bottom:none;
    border-radius:6px 6px 0 0; margin:-24px 0 8px 6px; opacity:.7;}
  .kt-karta .kd .val{background-image:linear-gradient(var(--rust), var(--rust)); background-repeat:no-repeat;
    background-size:0% 2px; background-position:0 98%; transition:background-size .35s;}
  @media(hover:hover){ .kt-karta .kd:hover .val{background-size:100% 2px;} }
  .kt-stempel{position:absolute; right:22px; bottom:18px; font-family:'IBM Plex Mono',monospace; font-size:15px;
    letter-spacing:.18em; text-transform:uppercase; color:var(--rust); border:2.6px solid var(--rust);
    border-radius:4px; padding:9px 16px; transform:rotate(-9deg); mix-blend-mode:multiply; will-change:transform;}

  /* --- STOPKA: odcinek dla zgłaszającego --- */
  footer.stopka.atmo-ink{position:relative; border-top:none; padding-top:40px; will-change:transform;}
  footer.stopka.atmo-ink::before{content:""; position:absolute; top:14px; left:6vw; right:6vw; height:2px;
    background:repeating-linear-gradient(90deg, rgba(232,230,222,.4) 0 7px, transparent 7px 16px);}
  .st-supel{width:76px; height:30px; color:var(--dk-tx2); opacity:.8;}
  .st-supel path{fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round;}
  .st-supel circle{fill:currentColor;}

  /* --- SCENY: mobile (<=860px) --- */
  @media(max-width:860px){
    .gen-dowody{position:static; width:auto; margin:6px 0 22px;}
    .gen-dow-lista{flex-direction:row; gap:10px; overflow-x:auto; padding-bottom:6px;}
    .gen-mini{flex:0 0 64px; width:64px;}
    .gen-mini::before{height:10px; top:-5px;}
    .gen-mini-tag{display:none;}
    .dk2-grid{display:block;}
    .kwal{margin-top:26px; max-width:420px;}
    .dg-protokol{max-width:none;}
    #diagnozy .diag-karta{padding-left:clamp(40px,10vw,52px); padding-bottom:76px;}
    .dg-nic{left:11px;}
    .dg-okladka{border-radius:8px 8px 0 0;}
    .bio-trasa{padding-left:34px;}
    .bio-rail{width:22px;}
    .bio-kompas{width:30px;}
    .bio-kompas .mini-kompas{width:30px; height:30px;}
    .bio-tab{display:none;}
    .bio-dot{width:9px; height:9px; margin-left:-4.5px;}
    .bio-petla{width:26px; height:26px;}
    .zas-katalog{display:none;}
    .rz-tor{padding-left:36px;}
    .rz-lina{left:2px; width:22px;}
    .rz-tail-steel{left:120px;}
    .kt-tlo{display:none;}
    .kt-karta{padding-bottom:76px;}
    .kt-stempel{font-size:12.5px; right:14px; bottom:14px;}
    .kt-linia{width:52%;}
  }

  /* --- SCENY: fallback bez animacji (stany końcowe) --- */
  html.no-anim .dg-jasnosc{opacity:0;}
  html.no-anim .gen-dowody{display:none;}  /* miniatury buduje JS */
  html.no-anim .bio-trasa{padding-left:0;}
  html.no-anim .bio-rail{display:none;}


/* hero: dopisek o zleceniach punktowych */
.hero-punkt{margin:14px 0 0; font-size:clamp(13.5px,1.2vw,15px); line-height:1.5; color:var(--tx-body); max-width:46ch;}
.hero-punkt a{color:var(--rust); text-decoration:none; border-bottom:1px solid rgba(199,72,14,.4);}
.hero-punkt a:hover{border-bottom-color:var(--rust);}

/* hero: cta-note (e-mail/telefon) jako klikalne linki — kolor dziedziczony z rodzica, subtelne podkreslenie kropkowane */
.cta-note a{color:inherit; text-decoration:none; border-bottom:1px dotted currentColor;}
@media(hover:hover){ .cta-note a:hover{border-bottom-style:solid;} }

/* ============================================================================
   KRAWĘDZIE OSI PRZEJŚĆ — fragment wdrożeniowy dla pawelszydlowski.pl
   Dodatek do motywu „szydlowski". NIE nadpisuje motywu — same nowe klasy `.kr-*`.
   Źródło implementacji: strona/nowa/czesci/krawedzie-warianty.html (KRAW-01/03/06, GRAD-03),
   zaadaptowane do realnych par kolorów granic (zmienne --od / --do jak radzi mapa łuku).

   Kolory hosta (z motywu, dostępne globalnie): --p0..--p3, --dk, --dk-ink,
   --rust, --steel, --gold, --dk-tx2. Krawędzie czytają je przez --od/--do na elemencie.

   MAPA GRANIC (wg decyzji Pawła):
     descend → vign ................. KRAW-06 zszywki   (.kr-zszywki, p2→p2)
     01 sprostowanie → 02 geneza .... KRAW-06 zszywki   (.kr-zszywki, p2→p3) [wypada .prog-p2-p3]
     02 geneza → 03 dlakogo ......... gradient prosty   (.kr-grad-plain, p3→p3)
     03 dlakogo → 04 diagnozy ....... KRAW-03 zakładki  (.kr-tabs, twarde cięcie p3|dk) [wypada .prog-p3-dk]
     06 bio → 07 zasady ............. GRAD-03 warstwice (.kr-warstwice, p1, odwrócone+subtelne)
     08b zlecenia → 09 kontakt ...... KRAW-01 wydarte akta (.kr-tear, p2→dk-ink) [wypada .prog-p2-ink]
   Granice niewymienione (04→05, 05→06, 07→08, 08→08b, 09→stopka) ZOSTAJĄ BEZ ZMIAN.
   ============================================================================ */


/* ===========================================================================
   KRAW-06 · ZSZYWKI I SPINACZ  —  wspólny komponent na DWÓCH granicach
   Sparametryzowany --od / --do; zero dublowania kodu.
   • descend → vign            : --od:var(--p2); --do:var(--p2)  (papier/papier, ten sam ton)
   • 01 sprostowanie → 02 geneza: --od:var(--p2); --do:var(--p3)  (mały skok, wchodzi zamiast .prog-p2-p3)
   Cichy, dokumentowy szew: linia zagięcia z miękkim cieniem + metalowe zszywki + spinacz.
   =========================================================================== */
.kr-zszywki{
  position:relative; z-index:2; height:30px;
  background:linear-gradient(180deg,
    var(--od,var(--p2)) 0 47%,
    rgba(35,43,38,.10) 50%,
    var(--do,var(--p3)) 53% 100%);
}
.kr-zszywki .kr-zszywka{
  position:absolute; top:50%; transform:translateY(-50%);
  width:28px; height:12px;
  background:linear-gradient(180deg,#d3d6cc,#8f948a);
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2026%2011%27%3E%3Cpath%20d%3D%27M2%2010V3h3v7M21%2010V3h3v7M5%203h16%27%20stroke%3D%27%23000%27%20stroke-width%3D%273%27%20fill%3D%27none%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2026%2011%27%3E%3Cpath%20d%3D%27M2%2010V3h3v7M21%2010V3h3v7M5%203h16%27%20stroke%3D%27%23000%27%20stroke-width%3D%273%27%20fill%3D%27none%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.3));
}
.kr-zszywki .kr-spinacz{
  position:absolute; top:-7px; z-index:2; width:19px; height:48px;
  background:linear-gradient(115deg,#c4c8bf 0%,#8b8f86 45%,#d6d9cf 100%);
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2034%2084%27%3E%3Cpath%20d%3D%27M11%2078%20V20%20a10%2010%200%200%201%2020%200%20V64%20a15%2015%200%200%201%20-30%200%20V16%20a13%2013%200%200%201%2026%200%20V70%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2034%2084%27%3E%3Cpath%20d%3D%27M11%2078%20V20%20a10%2010%200%200%201%2020%200%20V64%20a15%2015%200%200%201%20-30%200%20V16%20a13%2013%200%200%201%2026%200%20V70%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.28));
}


/* ===========================================================================
   GRADIENT PROSTY  —  granica 02 geneza → 03 dlakogo  (p3 → p3)
   „Zwykły stopniowy, bez fajerwerków": gładki, wielostopniowy w oklab (brak bandingu),
   ZERO ziarna / topo / ozdób. Oba tła to p3 — pas to delikatny oddech (leciutkie
   pogłębienie w środku i powrót), więc szew nie jest martwy ani krzykliwy.
   =========================================================================== */
.kr-grad-plain{
  position:relative; z-index:0; height:18vh;
  background:linear-gradient(180deg in oklab,
    var(--od,var(--p3)) 0%,
    color-mix(in oklab, var(--od,var(--p3)), var(--forest) 6%) 34%,
    color-mix(in oklab, var(--od,var(--p3)), var(--forest) 9%) 52%,
    color-mix(in oklab, var(--do,var(--p3)), var(--forest) 6%) 70%,
    var(--do,var(--p3)) 100%);
}
/* Fallback bez color-mix: czysty p3→p3 (płaski, ale poprawny). */
@supports not (background:color-mix(in oklab,red,blue)){
  .kr-grad-plain{background:linear-gradient(180deg,var(--od,var(--p3)),var(--do,var(--p3)));}
}

/* Pierwsza połowa oryginalnego szwu bio → zasady: p1 → p2.
   W skróconej narracji zostaje sam szew, bez budzenia usuniętej sekcji #zasady-r2. */
.kr-zasady-wejscie{
  position:relative; z-index:1; height:96px; pointer-events:none;
  background:linear-gradient(180deg,var(--p1) 0%,var(--p2) 100%);
}
.kr-zasady-wejscie::before{
  content:""; position:absolute; inset:0; opacity:.5;
  background:repeating-linear-gradient(180deg,transparent 0 13px,rgba(31,36,30,.05) 13px 14px);
  -webkit-mask:linear-gradient(180deg,#000,transparent);
          mask:linear-gradient(180deg,#000,transparent);
}


/* ===========================================================================
   KRAW-03 · ZAKŁADKI REGISTRATORA  —  granica 03 dlakogo → 04 diagnozy
   Twarde cięcie kolorów (p3 górą | dk dołem, ostry styk 50/50, BEZ gradientu).
   Zakładki to PRAWDZIWE LINKI do sekcji dalej na stronie (mechanizm skoku jak w spisie).
   „Lekko wystylizowane": hover/focus unosi języczek.
   =========================================================================== */
.kr-tabs{
  position:relative; z-index:2; height:52px; overflow:hidden;
  background:linear-gradient(180deg,
    var(--od,var(--p3)) 0 50%,
    var(--do,var(--dk)) 50% 100%);   /* twarde cięcie — dwa pełne kolory, brak blendu */
}
.kr-tabs .kr-zakladka{
  position:absolute; bottom:0; height:38px; padding:0 15px;
  display:flex; align-items:center;
  font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none; white-space:nowrap;
  color:var(--dk-tx2); background:var(--do,var(--dk));
  border:1px solid var(--steel); border-bottom:none; border-radius:9px 9px 0 0;
  box-shadow:inset 0 3px 0 var(--rust);
  transition:transform .18s ease, color .18s ease;
}
.kr-tabs .kr-zakladka:hover,
.kr-tabs .kr-zakladka:focus-visible{ transform:translateY(-4px); color:var(--p0); outline:none; }
.kr-tabs .kr-zakladka:focus-visible{ box-shadow:inset 0 3px 0 var(--rust), 0 0 0 2px var(--rust-lift,#F5803C); }
.kr-tabs .kr-zakladka.z2{box-shadow:inset 0 3px 0 var(--steel)}
.kr-tabs .kr-zakladka.z3{box-shadow:inset 0 3px 0 var(--gold)}
.kr-tabs .kr-zakladka.z4{box-shadow:inset 0 3px 0 var(--rust)}


/* ===========================================================================
   GRAD-03 · WARSTWICE GŁĘBOKOŚCI  —  granica 06 bio → 07 zasady  (p1 → p1)
   ODWRÓCONE względem warsztatu (linie gęściej u góry, przy bio) i SUBTELNIEJSZE:
   opacity warstwic schodzi w dół aż do poziomu faktury tła sekcji 07 (stroke-opacity≈.045),
   więc pas bezszwowo przechodzi w topograficzną fakturę #zasady. Tło płaskie p1.
   =========================================================================== */
.kr-warstwice{
  position:relative; z-index:1; height:clamp(120px,20vh,240px);
  background:var(--od,var(--p1));
}
.kr-warstwice::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg%20xmlns='http%3A//www.w3.org/2000/svg'%20preserveAspectRatio='none'%20viewBox='0%200%201200%20340'%3E%3Cg%20fill='none'%20stroke='%232C3830'%20stroke-width='1.4'%3E%3Cpath%20d='M0%2016%20C%20180%202%2C%20360%2032%2C%20560%2012%20S%20940%2028%2C%201200%208'/%3E%3Cpath%20d='M0%2040%20C%20180%2026%2C%20360%2056%2C%20560%2036%20S%20940%2052%2C%201200%2032'/%3E%3Cpath%20d='M0%2068%20C%20180%2054%2C%20360%2084%2C%20560%2064%20S%20940%2080%2C%201200%2060'/%3E%3Cpath%20d='M0%20100%20C%20180%2086%2C%20360%20116%2C%20560%2096%20S%20940%20112%2C%201200%2092'/%3E%3Cpath%20d='M0%20138%20C%20180%20124%2C%20360%20154%2C%20560%20134%20S%20940%20150%2C%201200%20130'/%3E%3Cpath%20d='M0%20182%20C%20180%20168%2C%20360%20198%2C%20560%20178%20S%20940%20194%2C%201200%20174'/%3E%3Cpath%20d='M0%20232%20C%20180%20218%2C%20360%20248%2C%20560%20228%20S%20940%20244%2C%201200%20224'/%3E%3Cpath%20d='M0%20300%20C%20180%20286%2C%20360%20316%2C%20560%20296%20S%20940%20312%2C%201200%20292'/%3E%3C/g%3E%3C/svg%3E") top/100% 100% no-repeat;
  opacity:.18;
  /* odwrócone: pełne u góry (bio) → zanik ku dołowi (do poziomu faktury sekcji 07) */
  -webkit-mask:linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.34) 58%, rgba(0,0,0,0) 100%);
          mask:linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.34) 58%, rgba(0,0,0,0) 100%);
}


/* ===========================================================================
   KRAW-01 · WYDARTE AKTA  —  granica 08b zlecenia → 09 kontakt  (p2 → dk-ink)
   Kierunek W DÓŁ: jasna kartka (p2) wydarta, odsłania ciemne archiwum kontaktu (dk-ink).
   Najmocniejszy gest — uzasadniony dużym skokiem wartości do finałowej ciemni.
   =========================================================================== */
.kr-tear{
  position:relative; z-index:2; height:clamp(80px,13vh,150px);
  background:var(--do,var(--dk-ink));
}
.kr-tear::before{
  content:""; position:absolute; inset:0; background:var(--od,var(--p2));
  filter:drop-shadow(0 6px 5px rgba(15,20,16,.4));
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20preserveAspectRatio%3D%27none%27%20viewBox%3D%270%200%201200%20120%27%3E%3Cpath%20d%3D%27M%200%200%20L%201200%200%20L%201200%2073.9%20L%201183.6%2051.7%20L%201163.7%2061.9%20L%201149.1%2055.3%20L%201128.3%2098.2%20L%201104.3%2090.3%20L%201084.0%2049.1%20L%201065.3%2099.1%20L%201038.3%2065.8%20L%201014.0%2071.9%20L%20999.0%2061.9%20L%20974.2%2073.7%20L%20950.8%2074.5%20L%20924.1%2082.4%20L%20900.9%2076.8%20L%20875.2%2069.2%20L%20859.3%2073.4%20L%20842.9%2050.7%20L%20816.7%2078.3%20L%20797.6%2082.2%20L%20774.4%2074.6%20L%20745.2%2075.2%20L%20730.3%2082.4%20L%20700.4%2086.3%20L%20680.2%2052.3%20L%20663.5%2049.9%20L%20647.5%2067.9%20L%20619.5%2062.6%20L%20596.7%2088.3%20L%20568.9%2068.9%20L%20549.2%2088.3%20L%20532.7%2065.6%20L%20515.0%2075.5%20L%20496.8%2060.1%20L%20476.9%2078.1%20L%20451.8%2076.5%20L%20427.0%2061.7%20L%20400.5%2088.0%20L%20380.3%20102.3%20L%20365.3%2062.2%20L%20348.7%2056.0%20L%20332.3%2063.2%20L%20317.8%2088.0%20L%20301.5%2068.1%20L%20281.6%2063.9%20L%20251.8%2074.9%20L%20236.4%2063.3%20L%20218.1%2096.2%20L%20188.9%20101.4%20L%20174.5%2076.9%20L%20146.7%2082.3%20L%20126.8%2065.3%20L%20104.3%2084.9%20L%2086.7%2086.0%20L%2059.1%2085.8%20L%2033.2%2067.3%20L%2013.6%2053.8%20L%200%2082.2%20L%200%2075.4%20Z%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20preserveAspectRatio%3D%27none%27%20viewBox%3D%270%200%201200%20120%27%3E%3Cpath%20d%3D%27M%200%200%20L%201200%200%20L%201200%2073.9%20L%201183.6%2051.7%20L%201163.7%2061.9%20L%201149.1%2055.3%20L%201128.3%2098.2%20L%201104.3%2090.3%20L%201084.0%2049.1%20L%201065.3%2099.1%20L%201038.3%2065.8%20L%201014.0%2071.9%20L%20999.0%2061.9%20L%20974.2%2073.7%20L%20950.8%2074.5%20L%20924.1%2082.4%20L%20900.9%2076.8%20L%20875.2%2069.2%20L%20859.3%2073.4%20L%20842.9%2050.7%20L%20816.7%2078.3%20L%20797.6%2082.2%20L%20774.4%2074.6%20L%20745.2%2075.2%20L%20730.3%2082.4%20L%20700.4%2086.3%20L%20680.2%2052.3%20L%20663.5%2049.9%20L%20647.5%2067.9%20L%20619.5%2062.6%20L%20596.7%2088.3%20L%20568.9%2068.9%20L%20549.2%2088.3%20L%20532.7%2065.6%20L%20515.0%2075.5%20L%20496.8%2060.1%20L%20476.9%2078.1%20L%20451.8%2076.5%20L%20427.0%2061.7%20L%20400.5%2088.0%20L%20380.3%20102.3%20L%20365.3%2062.2%20L%20348.7%2056.0%20L%20332.3%2063.2%20L%20317.8%2088.0%20L%20301.5%2068.1%20L%20281.6%2063.9%20L%20251.8%2074.9%20L%20236.4%2063.3%20L%20218.1%2096.2%20L%20188.9%20101.4%20L%20174.5%2076.9%20L%20146.7%2082.3%20L%20126.8%2065.3%20L%20104.3%2084.9%20L%2086.7%2086.0%20L%2059.1%2085.8%20L%2033.2%2067.3%20L%2013.6%2053.8%20L%200%2082.2%20L%200%2075.4%20Z%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat;
}
.kr-tear .kr-strzep{
  position:absolute; pointer-events:none; z-index:3; background:var(--od,var(--p2));
  filter:drop-shadow(0 3px 3px rgba(15,20,16,.5));
}
.kr-tear .kr-strzep.s1{
  width:64px; height:28px; left:24%; bottom:-14px; transform:rotate(-7deg);
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20preserveAspectRatio%3D%27xMidYMid%20meet%27%20viewBox%3D%270%200%2090%2042%27%3E%3Cpath%20d%3D%27M%200.0%203.7%20L%206.4%205.8%20L%2012.9%204.6%20L%2019.3%206.2%20L%2025.7%206.4%20L%2032.1%202.5%20L%2038.6%202.1%20L%2045.0%207.9%20L%2051.4%203.8%20L%2057.9%203.6%20L%2064.3%209.0%20L%2070.7%205.3%20L%2077.1%207.9%20L%2083.6%205.3%20L%2090.0%206.5%20L%2090.0%2038.8%20L%2083.6%2034.9%20L%2077.1%2033.1%20L%2070.7%2035.8%20L%2064.3%2034.1%20L%2057.9%2034.6%20L%2051.4%2039.5%20L%2045.0%2033.9%20L%2038.6%2035.3%20L%2032.1%2037.6%20L%2025.7%2039.8%20L%2019.3%2033.1%20L%2012.9%2036.2%20L%206.4%2034.2%20L%200.0%2033.0%20Z%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20preserveAspectRatio%3D%27xMidYMid%20meet%27%20viewBox%3D%270%200%2090%2042%27%3E%3Cpath%20d%3D%27M%200.0%203.7%20L%206.4%205.8%20L%2012.9%204.6%20L%2019.3%206.2%20L%2025.7%206.4%20L%2032.1%202.5%20L%2038.6%202.1%20L%2045.0%207.9%20L%2051.4%203.8%20L%2057.9%203.6%20L%2064.3%209.0%20L%2070.7%205.3%20L%2077.1%207.9%20L%2083.6%205.3%20L%2090.0%206.5%20L%2090.0%2038.8%20L%2083.6%2034.9%20L%2077.1%2033.1%20L%2070.7%2035.8%20L%2064.3%2034.1%20L%2057.9%2034.6%20L%2051.4%2039.5%20L%2045.0%2033.9%20L%2038.6%2035.3%20L%2032.1%2037.6%20L%2025.7%2039.8%20L%2019.3%2033.1%20L%2012.9%2036.2%20L%206.4%2034.2%20L%200.0%2033.0%20Z%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}
.kr-tear .kr-strzep.s2{
  width:48px; height:22px; left:70%; bottom:2px; transform:rotate(9deg);
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20preserveAspectRatio%3D%27xMidYMid%20meet%27%20viewBox%3D%270%200%2090%2042%27%3E%3Cpath%20d%3D%27M%200.0%205.2%20L%206.4%204.6%20L%2012.9%203.0%20L%2019.3%208.1%20L%2025.7%202.0%20L%2032.1%205.5%20L%2038.6%208.3%20L%2045.0%202.6%20L%2051.4%205.9%20L%2057.9%206.3%20L%2064.3%202.3%20L%2070.7%204.7%20L%2077.1%206.9%20L%2083.6%205.2%20L%2090.0%207.1%20L%2090.0%2038.7%20L%2083.6%2038.1%20L%2077.1%2039.1%20L%2070.7%2035.9%20L%2064.3%2032.6%20L%2057.9%2035.3%20L%2051.4%2033.8%20L%2045.0%2036.9%20L%2038.6%2034.0%20L%2032.1%2039.2%20L%2025.7%2037.7%20L%2019.3%2034.6%20L%2012.9%2034.2%20L%206.4%2036.6%20L%200.0%2039.3%20Z%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20preserveAspectRatio%3D%27xMidYMid%20meet%27%20viewBox%3D%270%200%2090%2042%27%3E%3Cpath%20d%3D%27M%200.0%205.2%20L%206.4%204.6%20L%2012.9%203.0%20L%2019.3%208.1%20L%2025.7%202.0%20L%2032.1%205.5%20L%2038.6%208.3%20L%2045.0%202.6%20L%2051.4%205.9%20L%2057.9%206.3%20L%2064.3%202.3%20L%2070.7%204.7%20L%2077.1%206.9%20L%2083.6%205.2%20L%2090.0%207.1%20L%2090.0%2038.7%20L%2083.6%2038.1%20L%2077.1%2039.1%20L%2070.7%2035.9%20L%2064.3%2032.6%20L%2057.9%2035.3%20L%2051.4%2033.8%20L%2045.0%2036.9%20L%2038.6%2034.0%20L%2032.1%2039.2%20L%2025.7%2037.7%20L%2019.3%2034.6%20L%2012.9%2034.2%20L%206.4%2036.6%20L%200.0%2039.3%20Z%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}


/* ===========================================================================
   MOBILE ≤899px  —  każda krawędź ma zdefiniowane zachowanie
   Pasy przejściowe motywu NIE znikają na mobile; krawędzie też zostają, tylko drobiazg chowany.
   =========================================================================== */
@media (max-width:899px){
  .kr-zszywki .kr-zszywka.kr-hide{ display:none; }   /* 3 zszywki → 1; spinacz zostaje */
  .kr-grad-plain{ height:12vh; }
  .kr-tabs{ height:46px; }
  .kr-tabs .kr-zakladka.kr-hide{ display:none; }     /* 4 języczki → 2 */
  .kr-tabs .kr-zakladka .kr-full{ display:none; }     /* skróć etykietę do numeru pozycji */
  .kr-tabs .kr-zakladka{ font-size:9.5px; padding:0 11px; height:34px; }
  .kr-warstwice{ height:clamp(84px,15vh,150px); }
  .kr-tear{ height:64px; }
}
@media (max-width:560px){
  .kr-tear .kr-strzep{ display:none; }                /* strzępki chowane, żeby drobiazg nie gubił rytmu */
}
@media (prefers-reduced-motion:reduce){
  .kr-tabs .kr-zakladka{ transition:none; }
}

/* ============================================================================
   FRAGMENT HERO: portret przypięty taśmą washi (druk duotonowy)
   Dopisać na KOŃCU assets/css/main.css (kolejność źródła > wcześniejsze reguły
   .por-wrap / .por-note; te wcześniejsze bez !important, więc te wygrywają).
   Nie dotyka fizyki sznurka/kartek ani rekwizytów .prop.
   ============================================================================ */

/* rama „odbitki”: papierowy passe-partout + cień druku (drop-shadow zostaje z main.css:287) */
#polaroid.por-wrap{
  --por-rot: -2deg;                 /* lekki obrót całości (klimat .rz-karta) */
  padding: 12px 12px 34px;          /* margines papieru; dół szerszy na podpis */
  background: var(--p0, #E8E6DE);
  border: 1px solid rgba(31,36,30,.12);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset,
              0 18px 34px rgba(31,36,30,.16),
              0 2px 6px rgba(31,36,30,.10);
  transform: rotate(var(--por-rot));
  transform-origin: 50% 18%;
}
#polaroid .por-img{
  width: 100%; height: auto; display: block;
  border: 1px solid rgba(31,36,30,.14);
  /* delikatna spójność z filtrem druku strony (main.css:248 daje .por-img saturate/hue) */
}

/* podpis: mono „etykieta odbitki” w dolnym pasku passe-partout (nie overlay na twarzy) */
#polaroid .por-note{
  position: absolute;
  left: 12px; right: 12px; bottom: 8px; top: auto;
  transform: rotate(0);
  text-align: center; line-height: 1.25;
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sand, #79816F);
}

/* taśma washi: dwa paski na górnych rogach, zachodzą poza krawędź papieru */
#polaroid .por-tape{
  position: absolute; z-index: 5; top: -13px;
  width: 82px; height: 26px; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 3px, rgba(255,255,255,0) 3px 6px),
    linear-gradient(180deg, rgba(62,74,80,.42), rgba(62,74,80,.30));  /* stal, półprzejrzysta */
  box-shadow: 0 4px 8px rgba(31,36,30,.14);
  mix-blend-mode: multiply;
}
#polaroid .por-tape::after{ /* poszarpane krawędzie taśmy */
  content:""; position:absolute; inset:0;
  border-left: 2px dotted rgba(31,36,30,.10);
  border-right: 2px dotted rgba(31,36,30,.10);
}
#polaroid .por-tape--l{ left: -16px; transform: rotate(-24deg); }
#polaroid .por-tape--r{ right: -16px; transform: rotate(23deg);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 3px, rgba(255,255,255,0) 3px 6px),
    linear-gradient(180deg, rgba(199,72,14,.34), rgba(199,72,14,.24)); /* rdza — jedna taśma cieplejsza */
}

/* redukcja ruchu: bez obrotu-hover; dryf w spoczynku i tak wyłączony w main.js (reduce) */
@media (prefers-reduced-motion: reduce){
  #polaroid.por-wrap{ transform: rotate(var(--por-rot)); }
}

/* ——— responsywność ——— */
/* ≤860px: portret pod kolumną copy (main.css:75,426 już przełącza justify/margin) */
@media (max-width: 860px){
  #polaroid.por-wrap{ --por-rot: -1.4deg; padding: 10px 10px 30px; }
  #polaroid .por-tape{ width: 68px; height: 22px; }
}
/* ≤560px: mniejsze taśmy, mniej obrotu — czytelność na wąskich */
@media (max-width: 560px){
  #polaroid.por-wrap{ --por-rot: -1deg; }
  #polaroid .por-tape--l{ left: -12px; } #polaroid .por-tape--r{ right: -12px; }
  #polaroid .por-note{ font-size: 9.5px; letter-spacing: .14em; }
}

/* FIX 2026-07-15: .p-stempel (kartka „PROTOKÓŁ nr 01/2026”, main.css:94/227/273 —
   pozycjonowana % w stosunku do #heroPin, niezależnie od kolumny gridu portretu)
   w steady state hero (>860px) zachodziła na górę #polaroid — pas ~330×77px zasłaniał
   czoło i oczy na portrecie (identycznie w obu motywach, bo hero jest współdzielony).
   Naprawa: podnieść kartkę i przesunąć w prawo, tak by jej dolna krawędź kończyła się
   NAD zakładką washi/górą portretu na całym zakresie szerokości >860px (sprawdzone
   headless 900–1920px, beaty 9.3/12.4/14.6 w heroTl). Ostatnia reguła .p-stempel w
   kaskadzie (main.css:273) też ma !important — trzeba przebić tą samą wagą. */
@media (min-width: 861px){
  .p-stempel{ top: 1% !important; right: 11% !important; width: clamp(190px,20vw,270px) !important; }
}

/* ============================================================
   FRAGMENT: sociale.css — ikonki sociali z flipem (poz. 07 · zasady)
   Czyta WYŁĄCZNIE tokeny już zdefiniowane w motywie (main.css :root
   i klasy .atmo-*). Nie definiuje nowych --zmiennych globalnych,
   nie nadpisuje niczego spoza .soc-grid / .soc-karta / .soc-tekst.
   Zależności z main.css, których fragment używa (tylko do odczytu):
   --card-bg, --card-line, --card-tape, --sh-card, --dk, --dk-tx,
   --dk-line, --steel, --rust, --f-mono / .mono, Fraunces.
   ============================================================ */

.soc-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(10px,1.6vw,16px);
  margin:4px 0 18px;
}

/* --- karta: kontener 3D --- */
.soc-karta{
  position:relative;
  display:block;
  width:100%;
  height:clamp(128px,15vw,152px);
  padding:0;
  border:0;
  background:none;
  font:inherit;
  color:inherit;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  touch-action:manipulation;
  perspective:1200px;
  will-change:transform;
}
.soc-karta:focus-visible{ outline:none; }
.soc-karta:focus-visible .soc-face{
  outline:2px solid var(--rust);
  outline-offset:2px;
}

/* rozstrzelenie kart jak w .rz-stacja / .an-poz — papier, nie sztancowany rząd */
.soc-karta:nth-child(1){ transform:rotate(-1.1deg); }
.soc-karta:nth-child(2){ transform:rotate(.9deg); }
.soc-karta:nth-child(3){ transform:rotate(-.6deg); }
.soc-karta:nth-child(4){ transform:rotate(1deg); }
@media(hover:hover){
  .soc-karta:hover{ transform:translateY(-2px) rotate(0deg); transition:transform .3s ease; }
}

.soc-inner{
  display:block;
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transition:transform .62s cubic-bezier(.2,.7,.2,1);
}
.soc-karta[aria-pressed="true"] .soc-inner{
  transform:rotateY(180deg);
}

/* --- obie ściany: rozmiar karty, jedna widoczna naraz --- */
.soc-face{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  overflow:hidden;
}

/* przód — kartka z protokołu, ikona jako pieczątka atramentem */
.soc-front{
  flex-direction:column;
  gap:9px;
  background:var(--card-bg);
  border:1px solid var(--card-line);
  box-shadow:var(--sh-card);
  padding:10px 8px 12px;
}
.soc-front::before{
  content:"";
  position:absolute;
  left:50%;
  top:-8px;
  width:46px;
  height:16px;
  margin-left:-23px;
  background:var(--card-tape);
  mix-blend-mode:multiply;
  border-radius:2px;
  transform:rotate(-2deg);
}
.soc-karta:nth-child(2) .soc-front::before{ transform:rotate(2.4deg); }
.soc-karta:nth-child(3) .soc-front::before{ transform:rotate(-1.6deg); }
.soc-karta:nth-child(4) .soc-front::before{ transform:rotate(1.8deg); }

.soc-ico{
  width:clamp(30px,4.6vw,38px);
  height:clamp(30px,4.6vw,38px);
  color:var(--ink);
  transform:rotate(-3deg);
  flex-shrink:0;
}
.soc-lbl{
  color:var(--steel);
  font-size:9.5px;
  letter-spacing:.16em;
}

/* rewers — ciemnia protokołu: kontrast 11.3:1 (--dk-tx na --dk), verbatim tokeny motywu */
.soc-back{
  background:var(--dk);
  border:1px solid var(--dk-line);
  color:var(--dk-tx);
  padding:14px 12px;
  transform:rotateY(180deg);
}
.soc-back-txt{
  font-family:'Fraunces',serif;
  font-style:italic;
  font-weight:500;
  font-size:clamp(11.5px,1.55vw,13px);
  line-height:1.42;
  text-align:center;
  max-width:22ch;
}

/* prefers-reduced-motion: podmiana natychmiastowa, bez obrotu 3D */
@media(prefers-reduced-motion:reduce){
  .soc-inner{ transition:none; }
  .soc-karta:hover{ transition:none; }
}

/* mobile: 4 -> 2x2 */
@media(max-width:640px){
  .soc-grid{ grid-template-columns:repeat(2, 1fr); gap:12px; }
  .soc-karta{ height:150px; }
}

/* ===== CSS fragmentu: bio ===== */
/* ============================================================================
   REDESIGN2 · #bio — poz. 05 · zaplecze  ·  „Podświetlarka — klisza jednego życia"
   Wszystkie selektory scoped pod #bio-r2 (fragment nie gryzie się z resztą).
   Tokeny z globalnego motywu (fallbacki dla podglądu w izolacji).
   ============================================================================ */

#bio-r2{
  /* ---- lokalne zmienne sceny ---- */
  --bg-p1:      var(--p1, #DDDBD0);
  --tx-body-l:  var(--tx-body, #454D42);
  --ink-l:      var(--ink, #1F241E);
  --rust-l:     var(--rust, #C7480E);
  --gold-l:     var(--gold, #8A7833);
  --gold-ink:   #5f5620;                 /* atrament gold AA na jasnym */
  --steel-l:    var(--steel, #3E4A50);

  /* podświetlarka */
  --stol-core:  #ECE8DC;                 /* rdzeń ciepła (near-p0) */
  --stol-glow:  rgba(138,120,51,.34);    /* gold low-alpha */
  --film-base:  #20261F;                 /* baza taśmy (charcoal) */
  --okno-dim:   #2A322B;                 /* klatka zgaszona */
  --hole:       #ECE8DC;                 /* perforacja przepuszcza ciepło */

  --sweep: 0;                            /* 0→1, sterowane scrubem z JS */

  --f-disp: 'Fraunces', Georgia, serif;
  --f-text: 'Inter', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, monospace;

  position:relative;
  isolation:isolate;
}

/* padding-top oddaje szwowi; dół i boki jak w motywie.
   overflow:clip (NIE hidden): przycina full-bleed i wysoką szynę kliszy, ale —
   inaczej niż hidden — NIE tworzy kontenera przewijania, więc position:sticky
   taśmy działa względem viewportu i taśma dojeżdża do dolnej krawędzi sekcji. */
#bio-r2.sekcja{ padding-top:0; overflow:clip; }

/* =========================================================================
   WEJŚCIE · szew dk→p1 (full-bleed wewnątrz sekcji)
   ========================================================================= */
#bio-r2 .bio2-prog{
  position:relative;
  width:100vw;
  left:50%; transform:translateX(-50vw);
  height:26vh; min-height:150px;
  background:linear-gradient(180deg, var(--dk,#232B26) 0%, #4A5449 30%, #9AA091 68%, var(--bg-p1) 100%);
  pointer-events:none;
  margin-bottom:clamp(24px,5vh,60px);
}
#bio-r2 .prog-label{
  position:absolute; left:50%; top:46%; transform:translate(-50%,-50%);
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; color:#C9CDBF; white-space:nowrap;
}
#bio-r2 .bio2-prog-glab{
  position:absolute; left:50%; top:calc(46% + 22px); transform:translateX(-50%);
  font-family:var(--f-mono); font-size:9px; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(201,205,191,.62); white-space:nowrap;
}

/* =========================================================================
   NAGŁÓWEK (bazuje na motywie; scoped dublet dla wiernego podglądu)
   ========================================================================= */
#bio-r2 .s-inner{ max-width:1160px; margin:0 auto; position:relative; padding:0 0 clamp(30px,6vh,70px); }
#bio-r2 .s-ghost{
  position:absolute; top:-18px; right:-6px; font-family:var(--f-disp); font-weight:700;
  font-size:clamp(120px,17vw,220px); line-height:1; color:var(--ghost,rgba(31,36,30,.085));
  pointer-events:none; user-select:none; z-index:0;
}
#bio-r2 .bio2-head{ position:relative; z-index:2; max-width:760px; }
#bio-r2 .s-kick{
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--rust-ink,#8F3208); margin:0 0 14px; font-weight:500;   /* AA: 5.75:1 na p1 (było 3.47) */
}
#bio-r2 .s-h2{
  font-family:var(--f-disp); font-weight:600; font-size:clamp(28px,3.8vw,50px); line-height:1.12;
  color:var(--ink-l); margin:0 0 16px; max-width:20ch; letter-spacing:-.01em;
}
#bio-r2 .s-lead{
  font-family:var(--f-text); font-size:clamp(17px,1.6vw,21px); line-height:1.55;
  color:var(--ink-l); max-width:56ch; margin:0 0 clamp(30px,5vh,54px); font-weight:500;
}

/* =========================================================================
   GRID: 58fr proza / 42fr klisza
   ========================================================================= */
#bio-r2 .bio2-grid{
  display:grid;
  grid-template-columns:minmax(0,58fr) minmax(0,42fr);
  gap:clamp(30px,5vw,72px);
  align-items:start;
  position:relative; z-index:2;
}

/* ---- PROZA ---- */
#bio-r2 .bio2-prose{ display:flex; flex-direction:column; gap:clamp(22px,3.4vh,38px); min-width:0; }
#bio-r2 .bio2-p{
  font-family:var(--f-text); font-size:clamp(15.5px,1.15vw,17px); line-height:1.72;
  color:var(--tx-body-l); margin:0; max-width:60ch; position:relative; overflow-wrap:break-word;
  padding:14px 18px 14px 20px; border-radius:4px;
  border-left:2px solid transparent;
  transition:color .5s ease, background-color .5s ease, border-color .5s ease;
}
/* akapit czytany: +kontrast, +ciepło (sprzężenie tekst↔klatka) */
#bio-r2 .bio2-p.is-lit{
  color:var(--ink-l);
  background:linear-gradient(90deg, rgba(138,120,51,.09), rgba(138,120,51,.02) 70%, transparent);
  border-left-color:var(--gold-l);
}
/* etykiety-zakładki data-tab (wstrzykiwane JS) */
#bio-r2 .bio2-tabs{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px; }
#bio-r2 .bio2-tab{
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--steel-l); background:rgba(62,74,80,.09);
  border:1px solid rgba(62,74,80,.22); border-radius:2px;
  padding:3px 8px; white-space:nowrap; line-height:1.2;
}

/* finałowe podkreślenie rdzą (jedyny rust w sekcji = werdykt)
   Tło zamiast pojedynczej ścieżki SVG naciągniętej na całą frazę — to jedyna
   technika odporna na zawijanie: box-decoration-break:clone maluje falkę
   osobno pod KAŻDYM fragmentem linii, więc łamanie tekstu na 2 linie (mobile)
   nie rozjeżdża podkreślenia (jak .spr-puenta span niżej w pliku). */
#bio-r2 .bio2-lacz{
  position:relative; font-style:italic; color:var(--ink-l); white-space:normal;
  padding-bottom:.24em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'%3E%3Cpath d='M0 7 C4 3 7 3 11 7 C15 11 18 11 22 7' fill='none' stroke='%23C7480E' stroke-width='2.4' stroke-linecap='round' stroke-opacity='.82'/%3E%3C/svg%3E");
  background-repeat:repeat-x; background-position:0 100%; background-size:22px 12px;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}

/* =========================================================================
   PODŚWIETLARKA + KLISZA
   ========================================================================= */
#bio-r2 .bio2-klisza-wrap{ position:relative; }
#bio-r2 .bio2-sticky{
  position:sticky; top:18vh;
  display:flex; flex-direction:column; align-items:center;
}

/* pula światła podświetlarki — miękka, bezkrawędziowa (NIE karta):
   pionowo wydłużona łuna, która OBEJMUJE taśmę i gaśnie w tło p1 na długo
   przed jakąkolwiek krawędzią — światło na stole, nie panel doklejony. */
#bio-r2 .bio2-stol{
  position:absolute; left:50%; top:47%; transform:translate(-50%,-50%);
  width:clamp(330px,184%,500px); height:122%; z-index:0; pointer-events:none;
  background:
    radial-gradient(48% 44% at 50% 49%,
      rgba(247,242,228,.92) 0%,
      rgba(238,231,209,.72) 18%,
      rgba(150,130,60,.34) 42%,
      rgba(138,120,51,.10) 62%,
      rgba(138,120,51,0) 80%);
  filter:blur(12px);
  opacity:1;                          /* stan spoczynkowy (no-JS = zapalony stół);
                                         ścieżka animowana ustawia 0 i robi flicker */
  will-change:opacity;
}
/* miękki cień kontaktowy — „sadza" taśmę na blacie (osobno od łuny) */
#bio-r2 .bio2-stol::after{
  content:""; position:absolute; left:50%; top:53%;
  width:64%; height:78%; transform:translate(-50%,-50%) rotate(-2.4deg);
  border-radius:50% / 8%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(28,22,8,.22) 0%, rgba(28,22,8,.10) 48%, rgba(28,22,8,0) 74%);
  filter:blur(9px);
}

#bio-r2 .bio2-film-wrap{
  position:relative; z-index:1;
  width:clamp(176px,78%,224px); max-width:100%;
  margin:6px auto 0;
  transform:rotate(-2.4deg);          /* niedbale położona taśma, nie pasek w layoucie */
  transform-origin:52% 50%;
}
/* maska: góra i dół taśmy gasną w łunę — widzimy WYCINEK dłuższej rolki */
#bio-r2 .bio2-film{
  display:block; width:100%; max-width:100%; height:auto;
  filter:drop-shadow(0 3px 5px rgba(30,24,8,.30)) drop-shadow(0 18px 30px rgba(30,24,8,.28));
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
#bio-r2 .bio2-film-h{ display:none; width:100%; max-width:100%; height:auto; }  /* pozioma taśma — tylko mobile */

#bio-r2 .bio2-base{ fill:var(--film-base); }
#bio-r2 .bio2-hole{ fill:var(--hole); opacity:.92; }

/* klatka zgaszona → warm gdy zapalona (swept / reading / strip-full) */
#bio-r2 .bio2-okno{ fill:var(--okno-dim); transition:fill .55s ease; }
#bio-r2 .bio2-okno-sheen{ pointer-events:none; }
#bio-r2 .bio2-klatka.swept .bio2-okno{ fill:url(#bio2Warm); }
#bio-r2 .bio2-klatka.reading .bio2-okno{ fill:url(#bio2Warm); }

/* KADR = pełne zdjęcie kliszy (klisza-kadr-1..4.webp), przycięte do okna.
   Zgaszona klatka = welon ciemni na fotografii; zapalona (swept/reading) =
   welon gaśnie, kadr rozświetla się jak na podświetlarce. */
#bio-r2 .bio2-foto{ }
#bio-r2 .bio2-veil{
  fill:#12160f; opacity:.66;                /* dim: kadr jeszcze niezapalony */
  transition:opacity .6s ease;
}
#bio-r2 .bio2-klatka.swept .bio2-veil,
#bio-r2 .bio2-klatka.reading .bio2-veil{ opacity:0; }   /* zapalony kadr = pełny obraz */
/* scrim pod podpis (dół kadru) — stały, dla czytelności etykiety na foto */
#bio-r2 .bio2-scrim{ fill:url(#bio2Cap); opacity:.9; pointer-events:none; }

/* etykieta mono w stopce klatki (rok/okres) + numer klatki w rogu — JASNE na foto */
#bio-r2 .bem-lab{
  font-family:var(--f-mono); font-size:8.6px; letter-spacing:.2em;
  fill:#EFE8D6; opacity:.72; transition:opacity .55s ease;
}
#bio-r2 .bem-num{
  font-family:var(--f-mono); font-size:9px; letter-spacing:.08em;
  fill:#EFE8D6; opacity:.7; transition:opacity .55s ease;
}
#bio-r2 .bio2-klatka.swept .bem-lab,
#bio-r2 .bio2-klatka.reading .bem-lab{ opacity:.96; }
#bio-r2 .bio2-klatka.swept .bem-num,
#bio-r2 .bio2-klatka.reading .bem-num{ opacity:.92; }

/* klatki „poza kadrem" (rolka biegnie dalej) — zawsze przygaszone */
#bio-r2 .bio2-klatka-ghost .bio2-okno{ fill:var(--okno-dim); }

/* czytana klatka: dodatkowy focus */
#bio-r2 .bio2-klatka{ transition:transform .5s ease; }
#bio-r2 .bio2-klatka.reading{ transform:translateX(0) scale(1.012); transform-box:fill-box; transform-origin:center; }

/* wędrujący backlight (pas światła zjeżdżający z --sweep) */
#bio-r2 .bio2-sweep{
  position:absolute; left:-10%; width:120%; height:150px;
  top:calc(var(--sweep) * 100%); transform:translateY(-50%);
  background:radial-gradient(60% 100% at 50% 50%,
    rgba(240,233,214,.85) 0%, rgba(217,180,99,.5) 38%, rgba(169,133,47,0) 72%);
  mix-blend-mode:screen; filter:blur(7px);
  pointer-events:none; z-index:2;
  opacity:calc(.35 + var(--sweep) * .0);   /* obecność sterowana JS via .sweeping */
}
#bio-r2 .bio2-film-wrap:not(.sweeping) .bio2-sweep{ opacity:0; }
#bio-r2 .bio2-film-wrap.sweeping .bio2-sweep{ opacity:.9; }
#bio-r2 .bio2-film-wrap.swept-done .bio2-sweep{ opacity:0; transition:opacity .5s ease; }

/* ziarno emulsji — feTurbulence (aria-hidden), leciutki oddech */
#bio-r2 .bio2-ziarno{
  position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:7px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply; opacity:.05;
  animation:bio2-breath 6.5s ease-in-out infinite;
}
@keyframes bio2-breath{ 0%,100%{opacity:.045; transform:scale(1);} 50%{opacity:.065; transform:scale(1.015);} }

/* stempel-urządzenie pod taśmą */
#bio-r2 .bio2-stempel{
  position:relative; z-index:1; margin-top:16px;
  font-family:var(--f-mono); font-size:9px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold-ink); opacity:.72;
}

/* =========================================================================
   DESKTOP ≥900px — SZYNA KLISZY: taśma (sticky) ma DOJEŻDŻAĆ do dolnej krawędzi
   sekcji. Problem: sticky w kolumnie gridu = wysokość wiersza (proza) była za
   niska względem wysokiego negatywu (~1000px), więc taśma odpinała się i gasła
   na długo przed końcem. Rozwiązanie: kolumna kliszy = ABSOLUTNA szyna o dużej
   wysokości (obcięta przez #bio-r2 overflow:hidden), dzięki czemu sticky ma
   pełen zakres i taśma trzyma się do samej krawędzi sekcji. Wyjęcie z flow
   NIE rozpycha wiersza gridu (proza zostaje w kolumnie 58fr).

   FIX regresji: 260vh była stałą, zgadywaną wysokością szyny — dla realnej
   długości prozy przy tym viewporcie/foncie wypadała KRÓTSZA niż sekcja,
   więc szyna (a z nią zasięg sticky) kończyła się, ZANIM overflow:clip sekcji
   dojeżdżał do jej właściwej krawędzi — sticky odpinało się w środku sekcji,
   klisza jeszcze zapalona zostawała obcięta twardą, poziomą krechą zamiast
   płynnie zjechać z ekranu. Naprawa: JS (initBioR2 → sizeRail) mierzy REALNĄ
   wysokość .bio2-grid (klisza-wrap jest position:absolute, więc się do niej
   nie wlicza — to czysta wysokość kolumny prozy) i wstrzykuje ją jako --rail-h
   na #bio-r2; 260vh zostaje TYLKO jako fallback zanim JS zdąży zmierzyć/bez JS. */
@media (min-width:900px){
  #bio-r2 .bio2-klisza-wrap{
    position:absolute; top:0; right:0; width:42%; height:var(--rail-h, 260vh);
    z-index:2; pointer-events:none;
  }
  #bio-r2 .bio2-sticky{ top:16vh; }
}

/* =========================================================================
   MOBILE ≤899px — taśma pozioma NAD prozą, „wszystko zapalone", tab hidden
   ========================================================================= */
@media (max-width:899px){
  #bio-r2 .s-ghost{ display:none; }
  #bio-r2 .bio2-grid{ grid-template-columns:minmax(0,1fr); gap:clamp(24px,5vh,38px); }

  /* klisza NAD prozą */
  #bio-r2 .bio2-klisza-wrap{ order:-1; }
  #bio-r2 .bio2-sticky{ position:static; top:auto; padding:8px 0 4px; }
  /* łuna pozioma — szeroka i niska, obejmuje leżącą taśmę */
  #bio-r2 .bio2-stol{
    width:118%; height:clamp(150px,58vw,230px);
    background:radial-gradient(48% 46% at 50% 50%,
      var(--stol-core) 0%, rgba(236,231,214,.6) 22%, var(--stol-glow) 48%,
      rgba(138,120,51,.05) 68%, rgba(138,120,51,0) 82%);
  }
  #bio-r2 .bio2-stol::after{
    width:82%; height:52%; transform:translate(-50%,-50%) rotate(-1.4deg);
    border-radius:8% / 50%;
  }

  /* pozioma taśma zamiast pionowej — dedykowany SVG, lekki skos */
  #bio-r2 .bio2-film{ display:none; }
  #bio-r2 .bio2-film-h{
    display:block;
    filter:drop-shadow(0 3px 5px rgba(30,24,8,.28)) drop-shadow(0 14px 24px rgba(30,24,8,.26));
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
            mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  }
  #bio-r2 .bio2-film-wrap{ width:min(560px,100%); margin:0 auto; transform:rotate(-1.4deg); transform-origin:50% 50%; }

  /* sweep OFF, wszystko zapalone statycznie */
  #bio-r2 .bio2-sweep{ display:none; }
  #bio-r2 .bio2-ziarno{ border-radius:9px; }
  #bio-r2 .bio2-stempel{ margin-top:12px; text-align:center; }

  #bio-r2 .bio2-tabs{ display:none; }        /* jak .bio-tab dziś */
  #bio-r2 .bio2-p{ padding:2px 0; border-left:0; max-width:none; }
  #bio-r2 .bio2-p.is-lit{ background:none; border-left:0; color:var(--ink-l); }
}

/* =========================================================================
   REDUCED MOTION — stany KOŃCOWE, zero ruchu
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  #bio-r2 .bio2-stol{ opacity:1; }
  #bio-r2 .bio2-sweep{ display:none; }
  #bio-r2 .bio2-ziarno{ animation:none; opacity:.05; }
  #bio-r2 .bio2-klatka .bio2-okno{ fill:url(#bio2Warm); transition:none; }  /* ghosty zostają dim */
  #bio-r2 .bem-use{ fill:#221c0c; opacity:.9; transition:none; }
  #bio-r2 .bem-lab{ fill:#2c2510; opacity:.82; transition:none; }
  #bio-r2 .bem-num{ fill:#2c2510; opacity:.64; transition:none; }
  #bio-r2 .bio2-p{ color:var(--ink-l); transition:none; }
  #bio-r2 .bio2-klatka{ transition:none; }
}


/* ===== CSS fragmentu: zasady ===== */
/* =================================================================
   #zasady-r2 · „Pieczęć służbowa / prasa zwrotów"  (redesign2)
   Fragment scoped — KAŻDY selektor zaczyna się od #zasady-r2, żeby
   nie gryzło się z resztą motywu. Tokeny bierze z main.css:
   --p2/--p3, --card / --card-bg / --card-line, --sh-rest, --rust,
   --rust-deep, --steel, --gold, --dk, --dk-ink, --f-mono / --f-disp,
   --tx-body, --tx-mute, oraz zmienne atmo (--bg/--tx/--kick/--ghost).
   Sekcja stoi na .atmo-desk => --bg:var(--p2) (o oczko głębiej niż bio).

   ROLE KOLORU (DNA): rust = werdykt (odciski/skreślenia), steel =
   metadane/aparat, gold = NIEUŻYTE (to nie dorobek).
   ================================================================= */

#zasady-r2{ position:relative; overflow:hidden; isolation:isolate; }

/* cień odrzuconego stosu osiada u dołu (pociemnienie var(--p2)) */
#zasady-r2::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:34%;
  background:linear-gradient(180deg, rgba(27,33,28,0) 0%, rgba(27,33,28,.10) 100%);
  pointer-events:none; z-index:0;
}

#zasady-r2 .zas2-defs{ position:absolute; width:0; height:0; overflow:hidden; }

/* kicker rdzawy w małym stopniu — atrament AA (5.09:1 na p2; nadpisuje .atmo .s-kick=rust-deep 4.26) */
#zasady-r2 .s-kick{ color:var(--rust-ink,#8F3208); }

/* ---------- reaktywne światło + ziarno ---------- */
#zasady-r2 .zas2-glow{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(320px 320px at var(--mx,64%) var(--my,30%),
             rgba(199,72,14,.10), rgba(199,72,14,0) 70%);
  opacity:.9; transition:opacity .5s ease;
}
#zasady-r2 .zas2-grain{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- edge WEJŚCIE (warstwice p1→p2) ---------- */
#zasady-r2 .zas2-wejscie{
  position:absolute; top:0; left:0; right:0; height:96px; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, var(--p1) 0%, var(--p2) 100%);
}
#zasady-r2 .zas2-wejscie::before{
  content:""; position:absolute; inset:0; opacity:.5;
  background:
    repeating-linear-gradient(180deg, transparent 0 13px, rgba(31,36,30,.05) 13px 14px);
  -webkit-mask:linear-gradient(180deg,#000,transparent); mask:linear-gradient(180deg,#000,transparent);
}

/* ---------- edge WYJŚCIE (szew p2→p3 + rdzawa smuga) ---------- */
#zasady-r2 .zas2-wyjscie{
  position:relative; z-index:2; height:116px; margin-top:clamp(40px,6vw,72px);
  width:100vw; left:50%; transform:translateX(-50vw);
  /* start TRANSPARENTNY: szew kontynuuje przyciemnione dno zasad (bez „resetu" do jasnego p2,
     który dawał widoczny jaśniejszy pasek), miękko dochodzi do p3 = tło #rozmowa. */
  background:linear-gradient(180deg, transparent 0%, var(--p3) 86%, var(--p3) 100%);
}
#zasady-r2 .zas2-szew-smuga{
  position:absolute; left:8%; right:8%; top:50%; height:3px; transform:translateY(-50%) rotate(-.35deg);
  background:linear-gradient(90deg, transparent, rgba(199,72,14,.42) 22%, rgba(199,72,14,.22) 60%, transparent);
  filter:blur(.4px); border-radius:3px;
}

/* ===================== STREFA PINU ===================== */
#zasady-r2 .zas2-pin{ position:relative; z-index:2; }
#zasady-r2 .s-inner{ position:relative; }

/* ---------- ŁOŻE PRASY ---------- */
#zasady-r2 .zas2-loze{
  position:relative;
  margin-top:clamp(26px,4vw,46px);
  padding-right:clamp(150px,20vw,240px);   /* miejsce na szynę + prasę po prawej */
}

/* szyna pionowa */
#zasady-r2 .zas2-szyna{
  position:absolute; top:-6%; bottom:-2%; right:clamp(72px,10vw,120px); width:2px;
  background:repeating-linear-gradient(180deg, var(--steel) 0 7px, transparent 7px 14px);
  opacity:.34; z-index:1; pointer-events:none;
}

/* ---------- klauzula = kartka na łożu ---------- */
#zasady-r2 .zas2-klauzula{
  position:relative; z-index:2;
  background:var(--card-bg); border:1px solid var(--card-line);
  border-radius:11px; box-shadow:var(--sh-rest);
  padding:clamp(16px,2.2vw,24px) clamp(18px,2.4vw,28px) clamp(18px,2.4vw,26px);
  margin:0 0 clamp(15px,2vw,22px);
  transform-origin:center;
}
#zasady-r2 .zas2-klauzula[data-ton="tak"]{ box-shadow:var(--sh-rest), inset 3px 0 0 rgba(199,72,14,.5); }

#zasady-r2 .zas2-nr{
  display:inline-block; margin-bottom:9px;
  font-size:9.5px; letter-spacing:.22em; color:var(--steel);
  border:1px solid var(--card-line); border-radius:3px; padding:2px 8px;
  transform:rotate(-1.4deg); background:rgba(255,255,255,.18);
}
#zasady-r2 .zas2-tresc p{
  margin:0; color:var(--tx-body);
  font-size:clamp(14.5px,1.55vw,17px); line-height:1.6; max-width:62ch;
}

/* skreślenia + cytaty (werdykt rust) — kreska jako background na SPAMIE (nie
   position:absolute dziecko): per-linia, bo browser tnie background inline
   boxa per-fragment (bez union-bbox, który uciekał poza kartę przy zawijaniu).
   Animacja draw = background-size 0%→100% (jak .zas2-u niżej). */
#zasady-r2 .zas2-cyt,
#zasady-r2 .zas2-strike{
  position:relative; display:inline; padding:0 1px; white-space:normal;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M1 6 C 24 4, 48 8.5, 70 5 S 94 4.5, 99 6' fill='none' stroke='%23C7480E' stroke-width='2.6' stroke-linecap='round' opacity='.92'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:0 50%; background-size:0% 13px;
}
#zasady-r2 .zas2-cyt{ font-style:italic; }

/* podkreślenie „przyjęte" (kontrapunkt klauzuli 02) */
#zasady-r2 .zas2-u{
  text-decoration:none;
  background-image:linear-gradient(var(--rust), var(--rust));
  background-repeat:no-repeat; background-size:0% 2px; background-position:0 96%;
  padding-bottom:1px;
}
#zasady-r2 .zas2-tak{
  position:absolute; top:12px; right:14px; z-index:4;
  display:inline-flex; align-items:center; gap:5px;
  font-size:9px; letter-spacing:.14em; color:var(--rust-deep);
  border:1.4px solid var(--rust); border-radius:4px; padding:3px 8px;
  background:rgba(240,239,232,.7); transform:rotate(-4deg);
}
#zasady-r2 .zas2-tak svg{ width:13px; height:13px; }
#zasady-r2 .zas2-tak svg path{ fill:none; stroke:var(--rust); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

/* odcisk „ODRZUCONE" w ROGU klauzuli (kontrast: nie na korpusie) */
#zasady-r2 .zas2-stemp{
  position:absolute; top:-16px; right:-10px; z-index:5;
  width:clamp(118px,15vw,158px); height:auto; color:var(--rust);
  mix-blend-mode:multiply; pointer-events:none;
}
#zasady-r2 .zas2-stemp use{ }

/* ---------- mini-karta „Katalog gotowych rozwiązań" ---------- */
#zasady-r2 .zas2-katalog{
  position:absolute; z-index:3;
  top:clamp(6px,1vw,14px); right:clamp(-6px,1vw,10px);
  width:clamp(148px,17vw,182px); padding:14px 14px 34px;
  background:var(--card-bg); border:1px solid var(--card-line);
  border-radius:8px; box-shadow:var(--sh-rest);
  transform:rotate(1.6deg); transform-origin:top right;
}
#zasady-r2 .zas2-kat-tyt{
  display:block; font-size:8.6px; letter-spacing:.14em; color:var(--steel);
  line-height:1.5; margin-bottom:11px;
}
#zasady-r2 .zas2-kat-linia{
  display:block; height:5px; border-radius:2px; margin:0 0 8px;
  background:repeating-linear-gradient(90deg, rgba(62,74,80,.26) 0 12px, transparent 12px 16px);
}
#zasady-r2 .zas2-kat-linia--kr{ width:62%; }
#zasady-r2 .zas2-kat-stemp{
  position:absolute; right:-8px; bottom:2px; width:120px; height:auto;
  color:var(--rust); mix-blend-mode:multiply; transform:rotate(-6deg); pointer-events:none;
}

/* ---------- licznik ---------- */
#zasady-r2 .zas2-licznik{
  position:relative; z-index:3; margin-top:clamp(8px,1.4vw,14px);
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
#zasady-r2 .zas2-licznik-num{
  font-size:13px; letter-spacing:.2em; color:var(--steel);
  font-variant-numeric:tabular-nums;
}
#zasady-r2 .zas2-licznik-stemp{
  font-size:10px; letter-spacing:.16em; color:var(--rust-deep);
  border:1.6px solid var(--rust); border-radius:4px; padding:4px 10px;
  transform:rotate(-3deg); mix-blend-mode:multiply;
}

/* ---------- REKWIZYT: prasa ---------- */
#zasady-r2 .zas2-piecz{
  position:absolute; z-index:6; top:0; right:clamp(30px,5vw,58px);
  width:clamp(122px,15vw,188px); will-change:transform;
}
#zasady-r2 .zas2-piecz-spr{
  position:relative; display:block; transform-origin:50% 16%; will-change:transform;
  filter:drop-shadow(0 22px 26px rgba(27,33,28,.28));
}
#zasady-r2 .zas2-piecz-img{ display:block; width:100%; height:auto; }
#zasady-r2 .zas2-piecz-svg{ display:none; width:100%; height:auto; }
#zasady-r2 .zas2-piecz-svg .zp-obud{ fill:#C9C4B4; stroke:#8f8a76; stroke-width:2; }
#zasady-r2 .zas2-piecz-svg .zp-spr{ fill:none; stroke:#8A7f6a; stroke-width:4; stroke-linecap:round; }
#zasady-r2 .zas2-piecz-svg .zp-guma{ fill:#2B2B28; stroke:#1c1c1a; stroke-width:1.5; }
/* poduszka tuszu pod gumą */
#zasady-r2 .zas2-piecz-glow{
  position:absolute; left:50%; bottom:-6px; width:78%; height:26px; transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(199,72,14,.5), rgba(199,72,14,0));
  filter:blur(3px); opacity:.72; pointer-events:none;
}

/* ===================== ODDECH: sociale ===================== */
#zasady-r2 .zas2-sociale{ margin-top:clamp(48px,7vw,92px); }
#zasady-r2 .zas2-soc-head{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:6px; }
#zasady-r2 .zas2-soc-head h3{
  margin:0; font-family:var(--f-disp); font-weight:600;
  font-size:clamp(19px,2.4vw,26px); letter-spacing:-.01em; color:var(--tx,var(--ink));
}
#zasady-r2 .zas2-soc-kick{
  font-size:10px; letter-spacing:.24em; color:var(--rust-deep);
}
#zasady-r2 .zas2-soc-kick::before{
  content:""; display:inline-block; width:15px; height:2.5px; margin-right:9px;
  vertical-align:middle; background:var(--rust);
}

/* restyle awersu: mono „znaczek platformy" + tag offline w rogu */
#zasady-r2 .soc-front{ position:relative; }
#zasady-r2 .soc-ico{ color:var(--steel); }
#zasady-r2 .soc-lbl{ color:var(--steel); letter-spacing:.2em; }
#zasady-r2 .zas2-soc-off{
  position:absolute; top:8px; right:8px;
  font-size:8px; letter-spacing:.16em; color:var(--steel);
  border:1px solid var(--card-line); border-radius:3px; padding:2px 6px;
  transform:rotate(3deg); opacity:.8;
}
/* rewers: blady watermark „ODRZUCONE" (na multiply w ciemni -> screen-owo jaśniejszy) */
#zasady-r2 .soc-back{ position:relative; }
#zasady-r2 .zas2-soc-wm{
  position:absolute; left:50%; top:50%; width:150px; height:auto;
  transform:translate(-50%,-50%) rotate(-8deg);
  color:var(--rust-lift,#F5803C); opacity:.14; pointer-events:none;
  mix-blend-mode:screen;
}
#zasady-r2 .soc-back-txt{ position:relative; z-index:1; }

/* NOTA pod kartami: dawniej „dziwny pasek" bez kontekstu — teraz jawnie oznaczony przypis „dlaczego"
   (hairline oddziela kafle od komentarza, mono-kicker mówi wprost, że to uzasadnienie) */
#zasady-r2 .zas2-soc-nota{
  margin-top:clamp(16px,2.4vw,26px); padding-top:15px;
  border-top:1px solid var(--card-line);
}
#zasady-r2 .zas2-soc-nota-lbl{
  display:inline-flex; align-items:center;
  font-size:9.5px; letter-spacing:.22em; color:var(--rust-deep); margin-bottom:9px;
}
#zasady-r2 .zas2-soc-nota-lbl::before{
  content:""; display:inline-block; width:14px; height:2.5px; margin-right:8px; background:var(--rust);
}

/* ===================== MOBILE ≤860px ===================== */
@media(max-width:860px){
  #zasady-r2 .zas2-loze{ padding-right:0; }
  #zasady-r2 .zas2-szyna{ right:auto; left:clamp(14px,5vw,26px); top:0; bottom:0; opacity:.24; }

  /* prasa: uproszczony wariant SVG, mniejsza, na lewej szynie */
  #zasady-r2 .zas2-piecz{ width:74px; right:auto; left:calc(clamp(14px,5vw,26px) - 36px); }
  #zasady-r2 .zas2-piecz-img{ display:none; }
  #zasady-r2 .zas2-piecz-svg{ display:block; }
  #zasady-r2 .zas2-piecz-spr{ filter:drop-shadow(0 10px 14px rgba(27,33,28,.26)); }

  #zasady-r2 .zas2-klauzula{ margin-left:clamp(30px,10vw,52px); }

  /* mini-karta „Katalog" WIDOCZNA (fix — dawniej hidden <861px) */
  #zasady-r2 .zas2-katalog{
    position:static; width:auto; max-width:none; margin:6px 0 18px clamp(30px,10vw,52px);
    transform:rotate(-.6deg); padding-bottom:30px;
  }
  #zasady-r2 .zas2-kat-stemp{ right:10px; width:108px; }

  #zasady-r2 .zas2-stemp{ width:112px; top:-14px; right:-4px; }
  #zasady-r2 .zas2-grain{ opacity:.03; }         /* ziarno lżejsze */
  #zasady-r2 .zas2-licznik{ margin-left:clamp(30px,10vw,52px); }

  /* sociale grid 2-kol — spójnie z globalnym .soc-grid @640; wymuszamy do 860 */
  #zasady-r2 .soc-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ===================== REDUCED MOTION ===================== */
@media(prefers-reduced-motion:reduce){
  #zasady-r2 .zas2-glow{ opacity:.5; }
  /* prasa w stanie już-przybitym: parkuje przy liczniku, wariant wektorowy */
  #zasady-r2 .zas2-piecz{ position:static; float:right; width:120px; margin:0 0 8px 18px; transform:rotate(-4deg) scale(.9); }
  #zasady-r2 .zas2-piecz-img{ display:none; }
  #zasady-r2 .zas2-piecz-svg{ display:block; }
  #zasady-r2 .zas2-loze{ padding-right:0; }
  #zasady-r2 .zas2-szyna{ display:none; }

  /* wszystkie werdykty w stanie KOŃCOWYM (JS też to ustawia; CSS = bez-JS bezpiecznik) */
  #zasady-r2 .zas2-stemp,
  #zasady-r2 .zas2-kat-stemp,
  #zasady-r2 .zas2-tak,
  #zasady-r2 .zas2-licznik-stemp{ opacity:1 !important; }
  #zasady-r2 .zas2-u{ background-size:100% 2px !important; }
  #zasady-r2 .zas2-cyt,
  #zasady-r2 .zas2-strike{ background-size:100% 13px !important; }
  #zasady-r2 .zas2-katalog{ transform:rotate(-3deg); }
}


/* ===== CSS fragmentu: rozmowa ===== */
/* ============================================================================
   REDESIGN2 · SEKCJA 06 · #rozmowa (procedura) — STYLE (scoped)
   Koncept: „Paragrafy + widełki rozstrzygnięcia" (Kierunek A).
   WSZYSTKIE selektory zaczynają się od #rozmowa-r2 — fragment nie gryzie się
   z resztą strony. Wartości tokenów zdublowane defensywnie (fallback), żeby
   fragment dało się podejrzeć solo; w integracji pokrywają się 1:1 z :root.
   ============================================================================ */

/* --- tokeny lokalne (fallback == wartości :root motywu) ------------------- */
#rozmowa-r2{
  --p2:#D0CFC2; --p3:#C2C0B0;
  --card:#F0EFE8; --card-edge:#B9B7A6; --card-tape:rgba(87,98,90,.32);
  --ink:#1F241E; --forest:#2C3830; --tx-body:#454D42;
  --rust:#C7480E; --rust-deep:#A23A08;
  --steel:#3E4A50; --steel-soft:#6A757B;
  --gold:#8A7833; --gold-aa:#5F5620;           /* atrament gold AA na jasnym  */
  --dk-ink:#1B211C;
  --f-disp:"Fraunces",Georgia,serif;
  --f-body:"Inter",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;
  --rz2-gutter:clamp(48px,7vw,86px);
  --sh-card:0 2px 0 rgba(31,36,30,.05), 0 18px 40px rgba(31,36,30,.15);
}

/* --- powłoka atmosfery (gdy global .atmo-deep nieobecny w podglądzie) ------ */
#rozmowa-r2.atmo-deep{
  --bg:var(--p3); --tx:var(--ink); --tx2:var(--tx-body);
  --mut:var(--tx-body); --kick:var(--ink);
  --ghost:rgba(240,239,232,.45);
  --card-bg:var(--card); --card-line:var(--card-edge);
}
#rozmowa-r2{
  position:relative; z-index:0;
  background:var(--bg,var(--p3)); color:var(--tx,var(--ink));
  font-family:var(--f-body);
  -webkit-font-smoothing:antialiased;
}
#rozmowa-r2 .mono{font-family:var(--f-mono); font-weight:500;}

/* --- plansza: nośnik paddingu + kontekst dla warstw reaktywnych ----------- */
#rozmowa-r2 .rz2-plansza{
  position:relative; overflow:hidden;
  padding:clamp(84px,12vh,150px) clamp(20px,6vw,90px) clamp(96px,14vh,168px);
}
#rozmowa-r2 .rz2-plansza > *{position:relative; z-index:1;}

/* ============================ WARSTWY REAKTYWNE ============================ */
/* lampka steel/warm sterowana kursorem (rAF ustawia --mx/--my) */
#rozmowa-r2 .rz2-lampa{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(440px 440px at var(--mx,52%) var(--my,28%),
    rgba(62,74,80,.10), rgba(138,120,51,.045) 44%, transparent 74%);
  mix-blend-mode:multiply; opacity:.72;
  transition:opacity .6s ease;
}
/* ziarno — powierzchnia p3 nie stoi */
#rozmowa-r2 .rz2-grain{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  background-size:180px 180px;
}
/* pierwszy ZMIERZCH — dolna winieta p3 → pre-ink (foreshadowing atramentu) */
#rozmowa-r2 .rz2-zmierzch{
  position:absolute; left:0; right:0; bottom:0; z-index:0; height:52%;
  pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 128%, rgba(27,33,28,.30), transparent 62%),
    linear-gradient(180deg, transparent 0%, rgba(27,33,28,.06) 46%, rgba(27,33,28,.20) 100%);
}

/* ============================ GRZBIET / GHOST / GŁOWA ====================== */
#rozmowa-r2 .poz{
  position:absolute; left:clamp(8px,2.2vw,40px); top:0; bottom:0; z-index:3;
  pointer-events:none; color:var(--mut,#57625A);
}
#rozmowa-r2 .poz-nic{
  position:absolute; left:0; top:0; bottom:0; width:0;
  border-left:1px dashed currentColor; opacity:.45;
  transform:scaleY(1); transform-origin:top; display:block;
}
#rozmowa-r2 .poz-tab{
  position:absolute; left:-5px; top:clamp(84px,12vh,150px);
  writing-mode:vertical-rl; font-family:var(--f-mono); font-size:9.5px;
  letter-spacing:.14em; text-transform:lowercase; white-space:nowrap;
  padding:8px 3px; color:var(--tx-body);
}
#rozmowa-r2 .s-ghost{
  position:absolute; top:-26px; right:-6px; z-index:0; pointer-events:none;
  font-family:var(--f-disp); font-weight:700; line-height:1;
  font-size:clamp(150px,22vw,300px); color:var(--ghost,rgba(240,239,232,.45));
}
#rozmowa-r2 .rz2-glowa{max-width:60ch; margin:0 0 clamp(40px,6vh,72px);}
#rozmowa-r2 .s-kick{
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink); margin:0 0 16px;
}
#rozmowa-r2 .s-kick::before{
  content:""; display:inline-block; width:16px; height:3px;
  background:var(--rust); margin-right:9px; vertical-align:middle;
}
#rozmowa-r2 .s-h2{
  font-family:var(--f-disp); font-weight:600;
  font-size:clamp(28px,3.9vw,50px); line-height:1.12; letter-spacing:-.01em;
  color:var(--ink); margin:0; max-width:20ch;
}

/* ================================ UKŁAD =================================== */
#rozmowa-r2 .rz2-uklad{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(224px,26%,330px);
  gap:clamp(30px,5vw,72px);
  align-items:start;
}

/* ============================ TOR PARAGRAFÓW ============================== */
#rozmowa-r2 .rz2-tor{position:relative;}
#rozmowa-r2 .rz2-stacja{
  display:grid;
  grid-template-columns:var(--rz2-gutter) minmax(0,1fr);
  column-gap:clamp(12px,1.8vw,24px);
  margin:0 0 clamp(30px,5vh,52px);
}
#rozmowa-r2 .rz2-stacja:last-of-type{margin-bottom:clamp(18px,3vh,30px);}

/* oś: kolumna z węzłem + segmentem linii (adaptuje się do wysokości karty) */
#rozmowa-r2 .rz2-oskol{
  position:relative; display:flex; flex-direction:column; align-items:center;
  padding-top:4px;
}
#rozmowa-r2 .rz2-nn{
  font-family:var(--f-mono); font-size:9px; letter-spacing:.1em;
  color:var(--steel); margin-bottom:9px; transform:rotate(-1.5deg);
  white-space:nowrap;
}
#rozmowa-r2 .rz2-wezel{
  position:relative; z-index:2; width:13px; height:13px;
  border:1.6px solid var(--steel); background:var(--card-bg,var(--card));
  transform:rotate(45deg); border-radius:2px;
}
#rozmowa-r2 .rz2-wezel::after{
  content:""; position:absolute; inset:3.5px;
  background:var(--steel); border-radius:1px; opacity:.55;
}
/* segment osi — złożone segmenty tworzą ciągłą, celowo NIE-Bézier szynę */
#rozmowa-r2 .rz2-linia{
  position:absolute; left:50%; top:34px; bottom:calc(-1 * clamp(30px,5vh,52px) - 4px);
  width:1.5px; background:var(--steel); opacity:.62;
  transform:translateX(-50%) scaleY(1); transform-origin:top center;
}
/* ostatni segment schodzi ku widełkom */
#rozmowa-r2 .rz2-stacja:last-of-type .rz2-linia,
#rozmowa-r2 .rz2-linia-ost{bottom:calc(-1 * clamp(18px,3vh,30px) - 6px);}

/* treść stacji */
#rozmowa-r2 .rz2-krok{
  display:inline-block; font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--steel);
  border:1.6px solid var(--steel); border-radius:3px; padding:6px 10px;
  transform:rotate(-2deg); margin-bottom:13px;
  background:var(--card-bg,var(--card)); will-change:transform;
}
#rozmowa-r2 .rz2-karta{
  position:relative; background:var(--card-bg,var(--card));
  border:1px solid var(--card-line,var(--card-edge)); border-radius:8px;
  padding:clamp(18px,2.4vw,28px); box-shadow:var(--sh-card); max-width:62ch;
  will-change:transform;
}
/* taśma washi */
#rozmowa-r2 .rz2-karta::before{
  content:""; position:absolute; left:30px; top:-9px; width:74px; height:20px;
  background:var(--card-tape); transform:rotate(-2deg);
  mix-blend-mode:multiply; border-radius:2px;
}
/* psie ucho */
#rozmowa-r2 .rz2-karta::after{
  content:""; position:absolute; right:0; bottom:0; width:0; height:0;
  border-style:solid; border-width:0 0 22px 22px;
  border-color:transparent transparent var(--bg,var(--p3)) transparent;
  filter:drop-shadow(-2px -2px 2px rgba(31,36,30,.10));
  border-bottom-right-radius:4px;
}
/* rest-rotation per stacja (ręczna niedoskonałość) */
#rozmowa-r2 .rz2-stacja[data-krok="1"] .rz2-karta{transform:rotate(-.35deg);}
#rozmowa-r2 .rz2-stacja[data-krok="2"] .rz2-karta{transform:rotate(.3deg);}
#rozmowa-r2 .rz2-stacja[data-krok="3"] .rz2-karta{transform:rotate(-.22deg);}

#rozmowa-r2 .prose p{
  margin:0; color:var(--tx2,var(--tx-body));
  font-size:clamp(15px,1.55vw,17.5px); line-height:1.62; font-weight:400;
}
/* rdzawe PODKREŚLENIE frazy-werdyktu (stan finalny = 100%; JS zjeżdża z 0%) */
#rozmowa-r2 .rz2-u{
  text-decoration:none; color:var(--ink); font-weight:500;
  background-image:linear-gradient(var(--rust),var(--rust));
  background-repeat:no-repeat; background-size:100% 2px; background-position:0 96%;
}

/* ============================== MARGINES ================================= */
#rozmowa-r2 .rz2-margines{
  position:relative; background:color-mix(in oklab, var(--p3), #fff 22%);
  border:1px dashed #B7B29B; border-radius:8px;
  padding:clamp(16px,2.2vw,24px); transform:rotate(-1.5deg);
  margin-top:clamp(30px,4vh,44px); will-change:transform;
  box-shadow:0 12px 30px rgba(31,36,30,.10);
}
@supports not (background:color-mix(in oklab,red,blue)){
  #rozmowa-r2 .rz2-margines{background:#D4D2C6;}
}
/* urwany narożnik (dopięty washi w JS/CSS) */
#rozmowa-r2 .rz2-margines::after{
  content:""; position:absolute; left:22px; top:-8px; width:60px; height:17px;
  background:var(--card-tape); transform:rotate(2.5deg);
  mix-blend-mode:multiply; border-radius:2px;
}
#rozmowa-r2 .rz2-margines-metka{
  display:inline-block; font-size:8.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--steel-soft);
  margin-bottom:11px; transform:rotate(-1deg);
}
#rozmowa-r2 .rz2-margines .prose p{
  font-size:14px; line-height:1.55; color:var(--tx-body);
}

/* ============================ ROZSTRZYGNIĘCIE =========================== */
/* Najważniejszy beat sekcji: po kroku 03 klient wybiera. DWIE RÓWNORZĘDNE
   pieczęcie decyzji, przybijane kolejno beatem (jak stemple na akcie) —
   złoto TYLKO na pozytywnej, stal na domknięciu, równa waga obu. Stan CSS =
   FINALNY (pieczęcie przybite); JS animuje wyłącznie transform (scale/rotation),
   więc reduced-motion / brak JS = obie pieczęcie widoczne i czytelne.
   Tekst to zwykły HTML (auto-rozmiar) — nigdy zapiekany w sztywny viewBox. */
#rozmowa-r2 .rz2-rozstrzyg{
  position:relative; margin-top:clamp(46px,7vh,88px);
  padding-top:clamp(26px,4vh,44px);
  border-top:1px solid rgba(31,36,30,.14);
}
/* cienka rust-kreska „rozstrzygnięcia" na styku z torem */
#rozmowa-r2 .rz2-rozstrzyg::before{
  content:""; position:absolute; left:0; top:-1px; width:54px; height:3px;
  background:var(--rust);
}
#rozmowa-r2 .rz2-rozstrzyg-metka{
  display:inline-block; font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--steel);
  border:1.4px solid var(--steel); border-radius:3px; padding:5px 9px;
  transform:rotate(-1.4deg); background:var(--card-bg,var(--card));
  margin-bottom:clamp(20px,3.4vh,34px);
}
/* para pieczęci + centralny łącznik „albo" (równorzędność) */
#rozmowa-r2 .rz2-piecz-para{
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:stretch; gap:clamp(14px,2.6vw,34px);
  max-width:940px;
}
#rozmowa-r2 .rz2-albo{
  align-self:center; justify-self:center;
  font-family:var(--f-mono); font-size:12px; letter-spacing:.14em;
  color:var(--steel-soft); text-transform:lowercase; user-select:none;
}
/* jedna pieczęć = odcisk stempla na akcie */
#rozmowa-r2 .rz2-piecz{
  position:relative; display:flex; align-items:center;
  gap:clamp(12px,1.6vw,18px);
  padding:clamp(16px,2.1vw,24px) clamp(18px,2.6vw,30px);
  border-radius:10px; background:var(--card-bg,var(--card));
  box-shadow:var(--sh-card); will-change:transform;
}
/* podwójny obrys stempla: zewnętrzny pełny + wewnętrzny hairline-dashed */
#rozmowa-r2 .rz2-piecz::before{
  content:""; position:absolute; inset:0; border-radius:10px;
  border:2px solid var(--pz); pointer-events:none;
}
#rozmowa-r2 .rz2-piecz::after{
  content:""; position:absolute; inset:5px; border-radius:7px;
  border:1px dashed var(--pz); opacity:.5; pointer-events:none;
}
/* ręczna niedoskonałość — lekki, przeciwny przechył (jak dobity stempel) */
#rozmowa-r2 .rz2-piecz-tak{--pz:var(--gold); transform:rotate(-1.4deg);}
#rozmowa-r2 .rz2-piecz-koniec{--pz:var(--steel); transform:rotate(1deg);}
/* ikona-sygnet (ZERO liter): ✓ na pozytywnej, kreska-domknięcie na stalowej */
#rozmowa-r2 .rz2-piecz-ikona{
  flex:none; width:clamp(34px,3.4vw,44px); height:clamp(34px,3.4vw,44px);
}
#rozmowa-r2 .rz2-piecz-ikona svg{width:100%; height:100%; overflow:visible; display:block;}
#rozmowa-r2 .rz2-pz-ring{fill:none; stroke:var(--pz); stroke-width:2;}
#rozmowa-r2 .rz2-pz-ring2{fill:none; stroke:var(--pz); stroke-width:1; stroke-dasharray:2 3; opacity:.6;}
#rozmowa-r2 .rz2-pz-mark{fill:none; stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round;}
#rozmowa-r2 .rz2-piecz-tak .rz2-pz-mark{stroke:var(--gold-aa);}
#rozmowa-r2 .rz2-piecz-koniec .rz2-pz-mark{stroke:var(--steel);}
#rozmowa-r2 .rz2-piecz-txt{
  font-size:clamp(12.5px,1.4vw,15px); letter-spacing:.08em;
  line-height:1.28; font-weight:500;
  text-transform:uppercase;               /* jawnie: odcisk stempla (SR czyta oryginał z DOM) */
}
#rozmowa-r2 .rz2-piecz-tak .rz2-piecz-txt{color:var(--gold-aa);}   /* atrament gold AA na p3 */
#rozmowa-r2 .rz2-piecz-koniec .rz2-piecz-txt{color:var(--steel);}

/* ========================= SZWY (wejście / wyjście) ====================== */
/* Szew #3 · wejście p2 → p3 (odpowiednik global .kr-grad-plain) */
#rozmowa-r2 .kr-wejscie{
  position:relative; z-index:0; height:16vh; min-height:96px;
  background:linear-gradient(180deg in oklab,
    var(--p2) 0%,
    color-mix(in oklab, var(--p2), var(--forest) 6%) 40%,
    color-mix(in oklab, var(--p3), var(--forest) 5%) 68%,
    var(--p3) 100%);
}
@supports not (background:color-mix(in oklab,red,blue)){
  #rozmowa-r2 .kr-wejscie{background:linear-gradient(180deg,var(--p2),var(--p3));}
}
#rozmowa-r2 .kr-szew-smuga{
  position:absolute; left:8%; right:8%; top:50%; height:3px;
  transform:translateY(-50%) rotate(-.35deg);
  background:linear-gradient(90deg,transparent,rgba(199,72,14,.42) 22%,rgba(199,72,14,.22) 60%,transparent);
  filter:blur(.4px); border-radius:3px;
}
/* Szew #4 · NOWY .kr-perfo · perforacja p3 → p2 (kierunek 08b: szew i kwity) */
#rozmowa-r2 .kr-perfo{
  position:relative; z-index:2; height:clamp(66px,10vh,120px);
  background:linear-gradient(180deg, var(--p3) 0 50%, var(--p2) 50% 100%);
}
/* rząd perforacji na styku 50% */
#rozmowa-r2 .kr-perfo-linia{
  position:absolute; left:0; right:0; top:50%; height:16px;
  transform:translateY(-50%); pointer-events:none;
  background:
    radial-gradient(circle 3.4px at 13px 50%,
      rgba(31,36,30,.34) 0 3.2px, transparent 3.6px);
  background-size:26px 16px; background-repeat:repeat-x;
  filter:drop-shadow(0 1px 0 rgba(240,239,232,.55));
}
#rozmowa-r2 .kr-perfo::after{
  content:""; position:absolute; left:0; right:0; top:calc(50% - 5px); height:1px;
  background:rgba(31,36,30,.10);
}

/* =============================== MOBILE ================================== */
@media (max-width:899px){
  #rozmowa-r2 .poz{display:none;}
  #rozmowa-r2 .s-ghost{display:none;}
  #rozmowa-r2 .rz2-uklad{grid-template-columns:1fr; gap:clamp(24px,5vw,40px);}
  #rozmowa-r2{--rz2-gutter:38px;}       /* oś cieńsza */
  #rozmowa-r2 .rz2-nn{font-size:8px; margin-bottom:7px;}
  #rozmowa-r2 .rz2-wezel{width:11px; height:11px;}
  #rozmowa-r2 .rz2-karta{max-width:none;}
  #rozmowa-r2 .rz2-margines{margin-top:8px;}

  /* ROZSTRZYGNIĘCIE → dwie pieczęcie jedna pod drugą, „albo" w środku (obie równe) */
  #rozmowa-r2 .rz2-piecz-para{grid-template-columns:1fr; gap:14px; max-width:none;}
  #rozmowa-r2 .rz2-albo{margin:1px 0;}
  #rozmowa-r2 .rz2-piecz{justify-content:flex-start;}
  #rozmowa-r2 .rz2-piecz-txt{white-space:normal;}
}
@media (max-width:520px){
  #rozmowa-r2 .rz2-stacja{grid-template-columns:26px minmax(0,1fr); column-gap:12px;}
}

/* =========================== REDUCED MOTION ============================== */
/* stan CSS = FINALNY (widoczny). JS animuje TYLKO gdy ruch dozwolony, więc
   przy reduced-motion / braku JS sekcja stoi w pełni odsłonięta i czytelna.
   Ten blok dodatkowo gasi wszelkie transitions. */
@media (prefers-reduced-motion:reduce){
  #rozmowa-r2 *{animation:none !important; transition:none !important;}
  #rozmowa-r2 .rz2-lampa{opacity:.55;}
}


/* ===== CSS fragmentu: zlecenia ===== */
/* ============================================================================
   REDESIGN 2 · #zlecenia — poz. 08b · aneks   (SCOPED pod #zlecenia-r2)
   Koncept: perforowany bloczek kwitów + światło dyżurne.
   Wszystkie selektory zaczynają się od #zlecenia-r2, żeby fragment nie gryzł
   się z innymi. Tokeny z motywu (--p0..--p3, --dk-ink, --rust, --steel, --gold,
   --f-*, --sh-*) są READ z :root motywu; poniżej fallbacki na wypadek podglądu
   fragmentu w izolacji (identyczne wartości co motyw v0.5).
   ============================================================================ */

#zlecenia-r2{
  /* --- fallbacki tokenów (nadpisywane przez :root motywu, te same wartości) --- */
  --p0:#E8E6DE; --p1:#DDDBD0; --p2:#D0CFC2; --p3:#C2C0B0;
  --dk:#232B26; --dk-ink:#1B211C;
  --rust:#C7480E; --rust-deep:#A23A08; --steel:#3E4A50;
  --gold:#8A7833; --gold-ink:#5f5620;
  --tx-body:#454D42; --tx-mute:#57625A; --ink:#1F241E;
  --f-disp:"Fraunces",serif; --f-body:"Inter",sans-serif; --f-mono:"IBM Plex Mono",monospace;
  --card-edge:#B9B7A6;
  --sh-rest:0 1px 0 rgba(31,36,30,.05), 0 10px 24px rgba(31,36,30,.10);
  --sh-lift:0 2px 0 rgba(31,36,30,.05), 0 18px 44px rgba(31,36,30,.17);
  --sh-float:0 34px 90px rgba(31,36,30,.22);

  /* --- lokalne --- */
  --kwit-bg:#EFEEE7;          /* kwit o ton jaśniejszy niż blat p2 = głębia */
  --kwit-bg2:#E8E6DE;         /* drugi ton dla rytmu */
  --perf-col:#B0AE9E;         /* kropki perforacji */
  --mx:50%; --my:32%;         /* reaktywna lampa (JS) */

  /* subtelny up-tick względem rozmowy p3: świeży arkusz aneksu p2, dryf ku ink u dołu.
     Próg ciemnienia zepchnięty do 84% i dno rozjaśnione do #BEBDAE, żeby tekst body
     (tx-body) trzymał AA >=4.5 na całej wysokości (dawniej #B9B8A9 → 4.38 na styku). */
  background:
    linear-gradient(180deg, var(--p2) 0%, var(--p2) 84%, #BEBDAE 100%);
  position:relative;
  isolation:isolate;
}

/* ===================== [WEJŚCIE] KRAWĘDŹ PERFORACJI ===================== */
#zlecenia-r2 .anx-kr-perfo{
  position:absolute; left:0; right:0; top:0; height:clamp(46px,7vh,74px);
  display:flex; align-items:center; justify-content:center; gap:16px;
  background:linear-gradient(180deg, var(--p3) 0%, var(--p2) 100%);
  z-index:1; pointer-events:none;
}
#zlecenia-r2 .anx-kr-perfo-line{
  position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  width:100%; height:12px;
}
#zlecenia-r2 .anx-kr-perfo-line line{
  stroke:var(--perf-col); stroke-width:4; stroke-linecap:round;
  stroke-dasharray:0.5 20;
}
#zlecenia-r2 .anx-kr-perfo-lab{
  position:relative; z-index:2; background:var(--p2);
  padding:3px 12px; font-size:9px; letter-spacing:.22em; color:var(--tx-mute);
  border:1px solid var(--card-edge); border-radius:2px;
  transform:rotate(-.6deg);
}

/* ===================== SEKCJA / GŁÓWKA ===================== */
#zlecenia-r2.sekcja{ position:relative; padding:clamp(104px,15vh,168px) 6vw clamp(0px,0vh,0px); overflow:hidden; }
#zlecenia-r2 .s-inner{ max-width:900px; margin:0 auto; position:relative; z-index:2; }

/* reaktywna ciepła pula światła — CIEPŁA para z czerwoną lampką kontaktu */
#zlecenia-r2 .anx-lampa{
  position:absolute; inset:-14vh -12vw; z-index:0; pointer-events:none;
  background:radial-gradient(340px 300px at var(--mx) var(--my),
      rgba(138,120,51,.20) 0%, rgba(138,120,51,.10) 34%, rgba(138,120,51,0) 68%);
  mix-blend-mode:multiply; transition:background .12s linear;
}
/* faktura papieru */
#zlecenia-r2 .s-inner::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  filter:url(#anxNoise); opacity:.04; mix-blend-mode:multiply;
}

#zlecenia-r2 .s-ghost{
  position:absolute; top:-52px; right:-6px; z-index:0;
  font-family:var(--f-disp); font-weight:700; font-size:clamp(110px,17vw,220px);
  line-height:1; color:rgba(31,36,30,.075); pointer-events:none; user-select:none;
  letter-spacing:-.02em;
}

#zlecenia-r2 .anx-head{
  position:relative; z-index:2;
  display:flex; align-items:flex-start; justify-content:space-between; gap:22px;
}
#zlecenia-r2 .anx-head-l{ flex:1 1 auto; min-width:0; }

#zlecenia-r2 .s-kick{
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--rust-ink,#8F3208); margin-bottom:16px; display:block;   /* AA 5.09:1 na p2 (rust-deep dawał 4.26) */
}
#zlecenia-r2 .s-kick::before{
  content:""; display:inline-block; width:16px; height:3px;
  background:var(--rust); margin-right:9px; vertical-align:middle;
}
#zlecenia-r2 .s-h2{
  font-family:var(--f-disp); font-weight:600; font-size:clamp(28px,3.8vw,50px);
  line-height:1.12; letter-spacing:-.018em; color:var(--ink); max-width:20ch; margin:0;
}
#zlecenia-r2 .s-h2 .anx-gold{
  font-style:italic; font-weight:500; color:var(--gold-ink);
  position:relative; white-space:nowrap;
}
#zlecenia-r2 .s-h2 .anx-gold::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:linear-gradient(90deg, rgba(95,86,32,.0), rgba(95,86,32,.5), rgba(95,86,32,.0));
}

/* chip „światło dyżurne" — reaguje wraz z lampą (opacity sterowane JS via --anx-glow) */
#zlecenia-r2 .anx-chip-dyzur{
  flex:0 0 auto; align-self:flex-start; margin-top:4px;
  display:inline-flex; align-items:center; gap:8px;
  font-size:9.5px; letter-spacing:.18em; color:var(--gold-ink);
  border:1px solid rgba(138,120,51,.5); border-radius:3px;
  padding:6px 11px; background:rgba(138,120,51,.06);
  transform:rotate(.5deg); white-space:nowrap;
}
#zlecenia-r2 .anx-chip-dot{
  width:7px; height:7px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 0 0 rgba(138,120,51,.45);
  animation:anxDyzur 3.4s ease-in-out infinite;
}
@keyframes anxDyzur{
  0%,100%{ box-shadow:0 0 0 0 rgba(138,120,51,.5); opacity:.7; }
  50%{ box-shadow:0 0 0 5px rgba(138,120,51,0); opacity:1; }
}

#zlecenia-r2 .prose p{
  font-family:var(--f-body); font-size:clamp(15.5px,1.25vw,17.5px); line-height:1.7;
  color:var(--tx-body); max-width:64ch; margin:22px 0 18px;
}

/* ===================== BLOCZEK KWITÓW ===================== */
#zlecenia-r2 .anx-bloczek{ position:relative; z-index:2; margin:40px 0 12px; }
#zlecenia-r2 .anx-bloczek-top{
  display:flex; justify-content:flex-end; margin-bottom:14px; padding-right:8px;
}
#zlecenia-r2 .anx-stempel{
  display:inline-block; font-size:10px; letter-spacing:.2em; color:var(--rust);
  border:1.6px solid var(--rust); border-radius:4px; padding:5px 12px;
  transform:rotate(-4.5deg); mix-blend-mode:multiply;
  box-shadow:inset 0 0 0 1px rgba(199,72,14,.12);
}

#zlecenia-r2 .anx-kwity{ margin:0; display:flex; flex-direction:column; gap:26px; }

/* pojedynczy KWIT — perforowany paragon z rest-rotation */
#zlecenia-r2 .anx-kwit{
  position:relative; margin:0; padding:0;
  background:var(--kwit-bg);
  box-shadow:var(--sh-rest);
  transform-origin:50% 50%;
  will-change:transform;
  /* perforowane krawędzie: półkola wycięte u góry i u dołu (mask) */
  --n:8px;
  -webkit-mask:
    radial-gradient(circle var(--n) at 50% 0%,   #0000 var(--n), #000 calc(var(--n) + .6px)) top    left / 26px 51% repeat-x,
    radial-gradient(circle var(--n) at 50% 100%, #0000 var(--n), #000 calc(var(--n) + .6px)) bottom left / 26px 51% repeat-x;
          mask:
    radial-gradient(circle var(--n) at 50% 0%,   #0000 var(--n), #000 calc(var(--n) + .6px)) top    left / 26px 51% repeat-x,
    radial-gradient(circle var(--n) at 50% 100%, #0000 var(--n), #000 calc(var(--n) + .6px)) bottom left / 26px 51% repeat-x;
}
#zlecenia-r2 .anx-kwit[data-kwit="1"]{ transform:rotate(-.5deg); }
#zlecenia-r2 .anx-kwit[data-kwit="2"]{ transform:rotate(.4deg); background:var(--kwit-bg2); }
#zlecenia-r2 .anx-kwit[data-kwit="3"]{ transform:rotate(-.3deg); }
/* kwit ma klasę .an-poz → globalna reguła .an-poz:nth-of-type(n) .rz-karta{rotate}
   przechylała TREŚĆ paragonu (podwójny tilt). Kwit sam się przechyla przez data-kwit,
   więc wewnętrzna karta ma stać prosto. */
#zlecenia-r2 .an-poz .rz-karta{ transform:none; }

/* reaktywny lift: kwit najbliższy ciepłej puli (JS .lit) + hover/focus */
#zlecenia-r2 .anx-kwit.lit,
#zlecenia-r2 .anx-kwit:hover,
#zlecenia-r2 .anx-kwit:focus-within{
  box-shadow:var(--sh-float);
  z-index:4;
}
#zlecenia-r2 .anx-kwit.lit{ transform:scale(1.02); }
#zlecenia-r2 .anx-kwit[data-kwit="1"].lit{ transform:rotate(-.5deg) scale(1.02); }
#zlecenia-r2 .anx-kwit[data-kwit="2"].lit{ transform:rotate(.4deg) scale(1.02); }
#zlecenia-r2 .anx-kwit[data-kwit="3"].lit{ transform:rotate(-.3deg) scale(1.02); }
#zlecenia-r2 .anx-kwit{ transition:box-shadow .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1); }

/* pasek perforacji (numerator + rysowana linia kropek) */
#zlecenia-r2 .anx-perf{
  position:relative; height:26px; display:flex; align-items:center;
  padding:0 clamp(18px,3vw,30px);
}
#zlecenia-r2 .anx-perf-top{ padding-top:6px; }
#zlecenia-r2 .anx-perf-bot{ padding-bottom:6px; justify-content:flex-end; }
#zlecenia-r2 .anx-perf-line{
  position:absolute; left:clamp(18px,3vw,30px); right:clamp(18px,3vw,30px);
  top:50%; transform:translateY(-50%); width:auto; height:8px;
}
#zlecenia-r2 .anx-perf-line line{
  stroke:var(--perf-col); stroke-width:3.4; stroke-linecap:round;
  stroke-dasharray:0.5 15;
}
#zlecenia-r2 .anx-num{
  position:relative; z-index:2; background:var(--kwit-bg);
  padding:0 10px 0 0; font-size:9px; letter-spacing:.2em; color:var(--tx-mute);
}
#zlecenia-r2 .anx-kwit[data-kwit="2"] .anx-num{ background:var(--kwit-bg2); }
#zlecenia-r2 .anx-egz{
  position:relative; z-index:2; background:var(--kwit-bg);
  padding:0 0 0 10px; font-size:8.5px; letter-spacing:.18em; color:#8F8A74;
}
#zlecenia-r2 .anx-kwit[data-kwit="2"] .anx-egz{ background:var(--kwit-bg2); }

#zlecenia-r2 .anx-kwit-body{
  padding:4px clamp(20px,3.4vw,34px) 8px;
}
#zlecenia-r2 .anx-kwit-head{
  display:flex; align-items:center; gap:12px; margin:2px 0 12px;
}

/* checkbox atramentem stali */
#zlecenia-r2 .anx-check{ flex:0 0 auto; width:22px; height:22px; display:block; }
#zlecenia-r2 .anx-check svg{ width:100%; height:100%; overflow:visible; }
#zlecenia-r2 .anx-check-box{
  fill:none; stroke:var(--steel); stroke-width:1.8; stroke-linejoin:round;
  opacity:.85;
}
#zlecenia-r2 .anx-check-tick{
  fill:none; stroke:var(--steel); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
}
/* etykieta usługi — plain atrament stali (reset boxowanego .rz-krok z motywu:
   checkbox jest „kratką", etykieta nie dubluje ramki) */
#zlecenia-r2 .anx-usluga{
  display:inline-block; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--steel); font-weight:500;
  border:none; background:none; padding:0; margin:0; border-radius:0;
  transform:rotate(-.8deg); will-change:auto;
}

/* karta treści usługi — w kwicie płaska (kwit jest papierem) */
#zlecenia-r2 .rz-karta{
  position:relative; background:transparent; border:none; box-shadow:none;
  padding:0; margin:0;
}
#zlecenia-r2 .rz-karta::before,
#zlecenia-r2 .rz-karta::after{ display:none; }
#zlecenia-r2 .rz-karta .prose p{ margin:0; max-width:60ch; font-size:clamp(14.5px,1.15vw,16px); }

/* ===================== ODDECH / MARGINES / CTA ===================== */
#zlecenia-r2 .anx-oddech{ max-width:62ch; margin-top:34px; }
#zlecenia-r2 .anx-oddech .w{ opacity:.16; transition:opacity .18s linear; }

#zlecenia-r2 .anx-margines{
  position:relative; z-index:2; max-width:54ch; margin:26px 0 0;
  background:var(--p1); border:1px dashed #B7B29B; border-radius:8px;
  padding:18px 22px; transform:rotate(-1.1deg);
  box-shadow:var(--sh-rest);
}
#zlecenia-r2 .anx-margines::before{
  content:""; position:absolute; left:26px; top:-9px; width:70px; height:18px;
  background:rgba(87,98,90,.26); mix-blend-mode:multiply; transform:rotate(-2deg);
}
#zlecenia-r2 .anx-margines .prose p{ margin:0; font-size:14.5px; max-width:none; }

#zlecenia-r2 .anx-cta-wrap{
  display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin-top:30px;
}
#zlecenia-r2 .anx-cta{ margin:0; max-width:52ch; color:var(--ink); font-weight:500; }
#zlecenia-r2 .anx-stempel-gold{
  display:inline-block; font-size:10px; letter-spacing:.2em; color:var(--gold-ink);
  border:1.6px solid rgba(138,120,51,.6); border-radius:4px; padding:5px 12px;
  transform:rotate(3.5deg); mix-blend-mode:multiply; white-space:nowrap;
}

/* ===================== PUENTA + ODERWANIE ===================== */
#zlecenia-r2 .anx-puenta{
  margin:36px 0 0; font-family:var(--f-disp); font-style:italic; font-weight:500;
  font-size:clamp(21px,2.6vw,32px); line-height:1.28; color:var(--ink); max-width:30ch;
}
#zlecenia-r2 .anx-puenta span{
  background-image:linear-gradient(rgba(138,120,51,.26), rgba(138,120,51,.26));
  background-repeat:no-repeat; background-size:100% .5em; background-position:0 88%;
  padding:0 2px;
}
#zlecenia-r2 .anx-puenta .w{ opacity:.16; transition:opacity .18s linear; }
#zlecenia-r2 .anx-puenta .w.anx-hot{ color:var(--rust); font-style:italic; }

/* oderwany kwit — czyste oderwanie wzdłuż perforacji */
#zlecenia-r2 .anx-kwit-tear.anx-oderwany{
  z-index:5;
  box-shadow:var(--sh-float);
}

#zlecenia-r2 .anx-next{
  margin-top:54px; display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  color:var(--tx-body); position:relative; z-index:2;
}
#zlecenia-r2 .anx-next .rule{ flex:1; min-width:60px; height:1px; background:rgba(69,77,66,.35); }
#zlecenia-r2 .anx-next .mono{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:#424A43; }  /* AA >=4.8:1 nawet na dnie gradientu (tx-mute dawał 4.06 na p2) */

/* ===================== [WYJŚCIE] KR-TEAR ===================== */
/* korzysta z definicji .kr-tear w motywie; tu tylko kontekst kolorów fragmentu */
#zlecenia-r2 .anx-kr-tear{
  position:relative; z-index:2; margin-top:clamp(60px,9vh,110px);
  --od:var(--p2); --do:var(--dk-ink);
}

/* ===================== MARGINES AKT (poz) ===================== */
#zlecenia-r2 .poz{
  position:absolute; left:0; top:0; bottom:0; width:clamp(30px,5vw,64px);
  z-index:3; pointer-events:none;
}
#zlecenia-r2 .poz-nic{
  position:absolute; left:22px; top:12%; bottom:10%; width:0;
  border-left:1px dashed rgba(87,98,90,.5); transform-origin:top;
}
#zlecenia-r2 .poz-tab{
  position:absolute; left:14px; top:16%;
  writing-mode:vertical-rl; text-orientation:mixed;
  font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--tx-mute);
  background:var(--p1); border:1px solid var(--card-edge); border-radius:2px 0 0 2px;
  padding:8px 4px;
}
#zlecenia-r2 .mono{ font-family:var(--f-mono); }

/* ============================================================================
   MOBILE ≤899px — kwity stack (już stack), perforacja jako pozioma reguła,
   oderwanie statyczne, lampa wygaszona.
   ============================================================================ */
@media (max-width:899px){
  #zlecenia-r2.sekcja{ padding:88px 6vw 0; }
  #zlecenia-r2 .s-ghost{ font-size:90px; top:-30px; }
  #zlecenia-r2 .anx-head{ flex-direction:column; gap:14px; }
  #zlecenia-r2 .anx-chip-dyzur{ align-self:flex-start; margin-top:0; }
  #zlecenia-r2 .anx-lampa{ display:none; }         /* lampa wygaszona na mobile */
  #zlecenia-r2 .anx-kwit{ --n:6px; }
  #zlecenia-r2 .anx-perf{ padding:0 16px; }
  #zlecenia-r2 .anx-perf-line{ left:16px; right:16px; }
  #zlecenia-r2 .anx-kwit-body{ padding:2px 18px 6px; }
  #zlecenia-r2 .poz{ display:none; }
  #zlecenia-r2 .anx-cta-wrap{ gap:12px; }
}
@media (max-width:560px){
  #zlecenia-r2 .anx-kr-perfo-lab{ font-size:8px; letter-spacing:.16em; }
  #zlecenia-r2 .s-ghost{ display:none; }
}

/* ============================================================================
   REDUCED MOTION — stany KOŃCOWE, jedna kopia treści, zero duplikatów.
   Wszystko widoczne od razu; oderwany kwit pokazany statycznie odsunięty.
   ============================================================================ */
@media (prefers-reduced-motion:reduce){
  #zlecenia-r2 .anx-chip-dot{ animation:none; }
  #zlecenia-r2 .anx-lampa{ background:radial-gradient(360px 320px at 50% 30%, rgba(138,120,51,.14), rgba(138,120,51,0) 68%); }
  #zlecenia-r2 [data-anx-rev]{ opacity:1 !important; transform:none !important; }
  #zlecenia-r2 .anx-oddech .w,
  #zlecenia-r2 .anx-puenta .w{ opacity:1 !important; }
  #zlecenia-r2 .anx-perf-line line,
  #zlecenia-r2 .anx-kr-perfo-line line{ stroke-dashoffset:0 !important; }
  #zlecenia-r2 .anx-check-tick{ stroke-dashoffset:0 !important; }
  #zlecenia-r2 .anx-kwit[data-kwit="3"].anx-kwit-tear{ transform:rotate(-2.6deg) translate(28px,-16px); box-shadow:var(--sh-float); z-index:5; }
}

/* Stan „uzbrojony" — tylko gdy JS/GSAP przejmuje animację (klasa dodawana z JS).
   Bez tej klasy (no-JS / reduced) wszystko jest widoczne od razu. */
#zlecenia-r2.anx-armed [data-anx-rev]{ opacity:0; }
#zlecenia-r2.anx-armed .anx-oddech .w,
#zlecenia-r2.anx-armed .anx-puenta .w{ opacity:.16; }


/* ===== CSS fragmentu: kontakt ===== */
/* =========================================================================
   REDESIGN2 · #kontakt — poz. 07 · kontakt
   KONCEPT (FUZJA): „Dziennik podawczy" (oprawiona księga, page-turn)
                  + „mechaniczny datownik" (rolujące bębenki cyfr)
                  + zachowany callback trzech zgłoszeń (kt-stare → „zamknięte").
   Style SCOPED pod #kontakt-r2 — wszystkie selektory zaczynają się od id sekcji,
   żeby fragment nie gryzł się z resztą składanej strony.
   STAN DOMYŚLNY CSS = STAN KOŃCOWY (wszystko widoczne). initKontaktR2()
   gsap.set()-uje elementy do stanu startowego i odgrywa je scrollem.
   Brak JS / reduced-motion / mobile => zostaje stan końcowy (graceful).
   ========================================================================= */

#kontakt-r2{
  /* --- oś papieru / atramenty / role (protokół, 1:1 z tokenami strony) --- */
  --p0:#E8E6DE; --p1:#DDDBD0; --p2:#D0CFC2; --p3:#C2C0B0;
  --card:#F0EFE8; --card-edge:#B9B7A6;
  --ink:#1F241E; --forest:#2C3830; --tx-body:#454D42; --tx-mute:#57625A;
  --rust:#C7480E; --rust-deep:#A23A08; --rust-lift:#F5803C;
  --steel:#3E4A50; --steel-lift:#9FB4BC;
  --gold:#8A7833; --gold-lift:#C9B45C; --gold-ink:#5f5620;
  --dk:#232B26; --dk-ink:#1B211C; --dk-card:#2C352E;
  --dk-line:rgba(232,230,222,.14);
  --dk-tx:#E8E6DE; --dk-tx2:#A9B2A7; --dk-ghost:rgba(232,230,222,.06);
  --f-disp:"Fraunces",serif; --f-body:"Inter",sans-serif; --f-mono:"IBM Plex Mono",monospace;
  --sh-dark:0 24px 60px rgba(0,0,0,.45), inset 0 0 0 1px rgba(232,230,222,.05);
  --sh-sheet:0 2px 0 rgba(0,0,0,.18), 0 26px 64px rgba(0,0,0,.5);

  position:relative;
  background:var(--dk-ink);
  color:var(--dk-tx);
  font-family:var(--f-body);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  isolation:isolate;
}
#kontakt-r2 *{box-sizing:border-box;}
#kontakt-r2 ::selection{background:var(--rust-lift); color:var(--dk-ink);}
#kontakt-r2 .mono{font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.14em;}

/* ============ ŚWIATŁO + ZIARNO (ciemnia oddycha) ============ */
#kontakt-r2 .ink-lamp{
  position:absolute; inset:0; z-index:2; pointer-events:none; mix-blend-mode:screen;
  background:
    radial-gradient(720px 560px at var(--mx,63%) var(--my,44%), rgba(201,180,92,.22), transparent 68%),
    radial-gradient(1200px 780px at 66% 24%, rgba(245,128,60,.05), transparent 76%);
}
#kontakt-r2 .dz-grain{
  position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.06; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ MARGINES AKT (nić + zakładka pozycji) ============ */
#kontakt-r2 .poz{position:absolute; left:clamp(8px,2.2vw,40px); top:0; bottom:0; z-index:4; pointer-events:none; color:var(--dk-tx2);}
#kontakt-r2 .poz-nic{position:absolute; left:0; top:0; bottom:0; width:0; border-left:1px dashed currentColor; opacity:.4; transform-origin:top; display:block;}
#kontakt-r2 .poz-tab{position:absolute; left:-5px; top:clamp(90px,13vh,170px); writing-mode:vertical-rl;
  font-size:9.5px; letter-spacing:.2em; opacity:.78; padding:8px 0;}
@media(max-width:899px){ #kontakt-r2 .poz{display:none;} }

/* ============ SZEW #5 · WEJŚCIE (wydarte akta: p2 → dk-ink) ============ */
#kontakt-r2 .kr-tear{position:relative; height:clamp(54px,7vh,92px); background:var(--p2); z-index:6; line-height:0;}
#kontakt-r2 .kr-tear svg{position:absolute; left:0; bottom:-1px; width:100%; height:100%; display:block;}
#kontakt-r2 .kr-tear .fill{fill:var(--dk-ink);}
#kontakt-r2 .kr-tear .edge{fill:none; stroke:var(--rust); stroke-width:1.4; opacity:.5; stroke-dasharray:3 5;}

/* ============ PIN / SCENA ============ */
#kontakt-r2 .dz-pin{
  position:relative; min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(70px,10vh,120px) clamp(18px,4.5vw,56px);
}
#kontakt-r2 .dz-stage{position:relative; width:100%; max-width:1160px; margin:0 auto; z-index:5;}

#kontakt-r2 .s-ghost{position:absolute; top:clamp(-58px,-6vw,-30px); right:-6px; z-index:0;
  font-family:var(--f-disp); font-weight:700; font-size:clamp(120px,17vw,230px); line-height:1;
  color:var(--dk-ghost); pointer-events:none; user-select:none;}
#kontakt-r2 .dz-head{position:relative; z-index:6; text-align:center; margin-bottom:clamp(20px,3.4vw,40px);}
#kontakt-r2 .s-kick{font-family:var(--f-mono); font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--rust-lift); margin:0 0 14px; display:inline-flex; align-items:center; gap:10px;}
#kontakt-r2 .s-kick::before{content:""; width:18px; height:2px; background:var(--rust-lift); display:inline-block;}
#kontakt-r2 .s-h2{font-family:var(--f-disp); font-weight:600; font-size:clamp(30px,4.4vw,58px); line-height:1.06;
  letter-spacing:-.02em; color:var(--dk-tx); margin:0;}

/* ============ REKWIZYT: NOTES → KARTKI-OBIEKTY (przewracane OSOBNO) ============
   Blok kartek na PRAWEJ połowie otwartego notesu (tło notes-rozkladowka).
   Każda kartka = obiekt 3D: awers (asset z wypalonym tekstem) + rewers na
   wspólnym zawiasie przy GRZBIECIE PO LEWEJ (transform-origin lewa krawędź,
   rotateY 0→-180). Zero DOM-tekstu na stronach. Stan sterowany scrollem
   (pin+scrub = jedno źródło prawdy); nawigacja ręczna (dog-ear + przyciski)
   TYLKO przewija Lenisem do progu beatu.

   BASE CSS = stan uniwersalny (bez JS / mobile / reduced): kartki jedna pod
   drugą, awersy w całości, linki aktywne. JS dodaje klasę .dz-3d i włącza scenę. */

/* ---- BASE: kartki jedna pod drugą (uniwersalny, dostępny fallback) ---- */
/* FIX (2026-07): 94vw liczyło się od PEŁNEGO viewportu, nie od rodzica (.dz-stage
   wewnątrz .dz-pin, który ma własny padding poziomy) — na mobile 390px prawa
   krawędź .dz-ksiega wystawała ~19px poza rodzica i obcinała margines papieru
   w asecie. 100% = realna dostępna szerokość rodzica, bez przeliczania z osobna. */
#kontakt-r2 .dz-ksiega{ position:relative; width:min(470px,100%); margin:0 auto; }
#kontakt-r2 .dz-scena{ position:relative; }
#kontakt-r2 .dz-scena::before{ display:none; }
#kontakt-r2 .dz-desk-cien{ display:none; }
#kontakt-r2 .dz-oprawa{ display:none; }                     /* deska CSS tylko w 3D */
#kontakt-r2 .polowka, #kontakt-r2 .gutter,
#kontakt-r2 .dz-cover, #kontakt-r2 .dz-blok-cien{ display:none; }  /* elementy sceny 3D */
#kontakt-r2 .dz-leaves{ display:flex; flex-direction:column; gap:clamp(14px,2.4vw,18px); }
#kontakt-r2 .dz-leaf{ position:relative; width:100%; aspect-ratio:900/1200; }
#kontakt-r2 .leaf-face{ position:absolute; inset:0; overflow:hidden; border-radius:6px; }
#kontakt-r2 .leaf-face img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center; display:block; }
#kontakt-r2 .leaf-front{ box-shadow:var(--sh-sheet); z-index:1; }
#kontakt-r2 .leaf-back, #kontakt-r2 .leaf-cien{ display:none; }
#kontakt-r2 .dz-page-meta{
  position:absolute; left:10.6%; bottom:3.2%; z-index:3; pointer-events:none;
  padding:2px 5px; background:#E7E7DE; color:#3E4A50;
  font-size:clamp(5px,.46vw,7px); line-height:1; letter-spacing:.28em;
}

/* niewidzialne linki na wypalonym mailu/telefonie (bboxy pipeline + hit-padding) */
#kontakt-r2 .leaf-link{ position:absolute; z-index:3; display:block; border-radius:3px; }
/* r7: bboxy tekstu maila/tel na strona-kontakt.webp + hit-padding (mail 16.67/53.75→84.28/57.46; tel 16.67/67.29→44.72/70.12) */
#kontakt-r2 .leaf-mail{ left:15.2%; top:52.15%; width:70.6%; height:6.9%; }
#kontakt-r2 .leaf-tel{  left:15.2%; top:65.55%; width:31%;   height:6.3%; }
#kontakt-r2 .leaf-link:focus-visible{ outline:2px solid var(--rust-lift); outline-offset:2px; }

/* nawigacja / pióro ukryte w base; pokazuje je .dz-3d */
#kontakt-r2 .dz-naw{ display:none; }
#kontakt-r2 .dz-pioro{ display:none; }

/* treść dla czytników (assety to grafiki z wypalonym tekstem) */
#kontakt-r2 .dz-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* =========================================================================
   TRYB 3D (.dz-3d dodawane przez JS: desktop + GSAP + brak reduced-motion)
   Blok kartek na prawej połowie sceny; każda kartka przewraca się osobno.
   ========================================================================= */
/* FIX (2026-07): .dz-pin ma min-height:100svh, ale to tylko DOLNA granica —
   realna wysokość kolumny (nagłówek + notes w aspect-ratio 1800/1200 + pasek
   .dz-naw + marginesy + padding pinu) potrafiła przekroczyć 100svh na typowych
   desktopach (np. 1536×864, 1280×800, 1440×900) i nadmiar renderował się POD
   dolną krawędzią — w pinie nie da się tego odsłonić scrollem (scrub konsumuje
   scroll zamiast przewijać stronę). Notes musi być HEIGHT-driven: szerokość =
   min(dotychczasowy limit 940px/94vw, wysokość-z-budżetu-pinu × 1.5 [odwrócony
   aspect-ratio 1800/1200 → w = h×1.5]). --dz-reserved = suma wszystkiego w pinie
   OPRÓCZ samego notesu, zmierzona getBoundingClientRect w headless (nie zgadywana):
     2×  clamp(70px,10vh,120px)   pin padding-top + padding-bottom (token .dz-pin)
     98px                         wysokość .dz-head (s-kick+margines+s-h2), zmierzone
                                   97.46875px przy szerokościach ≥1318px (plateau
                                   clamp s-h2); przy węższych dz-3d (900–1318px)
                                   nagłówek jest NIŻSZY, więc stała lekko nadmiarowa
                                   = bezpieczna (mniejszy notes, nigdy overflow)
     clamp(20px,3.4vw,40px)      margin-bottom .dz-head (token istniejący)
     clamp(20px,3vh,40px)        margin-top .dz-naw (token istniejący)
     33px                         wysokość .dz-naw (zmierzone 32px + zapas)
     24px                         bezpieczny zapas
   Zweryfikowane przeliczeniem na 1536×864 / 1280×800 / 1440×900 / 1920×1080 —
   pasek .dz-naw w całości w viewport na każdym z nich (patrz notatka w repo).
   max(320px, …) to twarda podłoga na wypadek ekstremalnie niskich okien — notes
   nie znika, nawet gdyby budżet wypadł ujemny. */
#kontakt-r2.dz-3d{
  --dz-reserved: calc(2 * clamp(70px,10vh,120px) + 98px + clamp(20px,3.4vw,40px) + clamp(20px,3vh,40px) + 33px + 24px);
}
/* KSIĘGA = box rozkładówki (632/420, jak zaakceptowany podgląd). Szerokość HEIGHT-DRIVEN:
   min(dotychczasowy limit, wysokość-z-budżetu-pinu × 632/420) — cały pin mieści się w oknie. */
#kontakt-r2.dz-3d .dz-ksiega{
  width:min(940px, 94vw, max(320px, calc((100svh - var(--dz-reserved)) * 1.5048)));
  aspect-ratio:632/420;
  perspective:1900px; perspective-origin:50% 26%; }
#kontakt-r2.dz-3d .dz-scena{ position:absolute; inset:0; transform-style:preserve-3d; transform:rotateX(6deg); }
#kontakt-r2.dz-3d .dz-scena::before{ content:""; display:block; position:absolute;
  left:-12%; right:-12%; top:2%; bottom:-22%; z-index:0;
  background:radial-gradient(56% 46% at 50% 48%, rgba(201,180,92,.16), transparent 72%);
  transform:translateZ(-40px); pointer-events:none; }

/* cień kontaktowy: miękka elipsa pod notesem (biurko dk-ink), nie płyta */
#kontakt-r2.dz-3d .dz-desk-cien{ display:block; position:absolute; z-index:0; pointer-events:none;
  left:6%; right:6%; bottom:-6%; height:20%;
  background:radial-gradient(50% 60% at 50% 50%, rgba(0,0,0,.55), rgba(0,0,0,.28) 46%, transparent 72%);
  filter:blur(10px); transform:translateZ(-60px) rotateX(-6deg); transform-origin:50% 100%; }

/* OTWARTA OPRAWA = DESKA CSS (teal gradient, cienka ramka ~1.6%, radius, inset-shadow).
   ZERO fotografii (wypieczone białe krawędzie robiły pasy). Odsłaniana przy otwarciu. */
#kontakt-r2.dz-3d .dz-oprawa{ display:block; position:absolute; inset:0; z-index:1;
  pointer-events:none;
  background:linear-gradient(145deg,#263C36 0%, #1E2F2A 55%, #182521 100%);
  border-radius:clamp(7px,1.05vw,12px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), inset 0 2px 6px rgba(0,0,0,.4);
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.34)) drop-shadow(0 20px 40px rgba(0,0,0,.44)); }

/* LEWA STRONA po otwarciu = wyklejka jako czysta strona (scale 1.14, zielony turn-in poza kadrem) */
#kontakt-r2.dz-3d .polowka{ display:block; position:absolute; top:2.381%; height:95.238%; width:48.418%;
  overflow:hidden; }
#kontakt-r2.dz-3d .polowka.lewa{ left:1.582%; z-index:2; border-radius:6px 2px 2px 6px; }
#kontakt-r2.dz-3d .polowka img{ position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:fill; }
#kontakt-r2.dz-3d .polowka.lewa img.wyklejka{ transform:scale(1.14); transform-origin:60% 50%; }

/* dolina grzbietu = gradient NA kartkach (nie zielona) */
#kontakt-r2.dz-3d .gutter{ display:block; position:absolute; top:2.381%; left:47.15%; width:6.33%; height:95.238%;
  z-index:6; pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(20,26,22,.32) 46%, rgba(20,26,22,.36) 54%, rgba(0,0,0,0) 100%); }

/* PRAWA POŁOWA: stos kartek-obiektów; grzbiet = lewa krawędź wrappera (środek sceny).
   Zamknięty: wrapper wyśrodkowany (xPercent -50); otwarty: zjeżdża na prawą połowę (0). */
#kontakt-r2.dz-3d .dz-leaves{ position:absolute; top:2.381%; height:95.238%; left:50%; width:48.418%;
  z-index:4; display:block; transform-style:preserve-3d; transform-origin:0% 50%; }
#kontakt-r2.dz-3d .dz-leaf{ position:absolute; inset:0; aspect-ratio:auto;
  transform-style:preserve-3d; transform-origin:0% 50%; will-change:transform;
  --lf-shadow:1; }   /* 1=pełny cień, 0=wygaszony; JS gasi go tylko w wąskim oknie wokół edge-on (90°) */
/* ŚCIANKI: translateZ OBOWIĄZKOWO (bez niego Safari spłaszcza ścianki → lustrzany awers). */
#kontakt-r2.dz-3d .leaf-face{ position:absolute; inset:0; overflow:hidden;
  backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:2px 6px 6px 2px; }
#kontakt-r2.dz-3d .leaf-face img{ object-fit:fill; }
/* box-shadow alpha przez calc(var(--lf-shadow)): przy rotationY≈-90° (kartka widziana
   krawędziowo, spłaszczona w X) blur/spread NIE skalują się z tą kompresją i „wystrzeliwują"
   poza bbox jako pionowy spike — dokładnie ten sam mechanizm co przy okładce (.dz-cover),
   tam już wygaszanej przed edge-on. Tu gasimy tylko alpha cienia w wąskim oknie, żeby
   kartka nadal była widoczna przez pełne -180°. */
#kontakt-r2.dz-3d .leaf-front{ transform:rotateY(0deg) translateZ(.5px);
  box-shadow:0 2px 0 rgba(0,0,0,calc(.14 * var(--lf-shadow))), 0 20px 42px rgba(0,0,0,calc(.42 * var(--lf-shadow))); z-index:1; }
#kontakt-r2.dz-3d .leaf-back{ display:block; transform:rotateY(180deg) translateZ(.5px);
  border-radius:6px 2px 2px 6px; box-shadow:0 2px 0 rgba(0,0,0,calc(.12 * var(--lf-shadow))), 0 18px 40px rgba(0,0,0,calc(.4 * var(--lf-shadow))); }
/* ARMOR anty-lustro (podwójna ochrona niezależna od backface): po przekroczeniu 90°
   JS dodaje .past90 → front twardo znika. */
#kontakt-r2.dz-3d .dz-leaf.past90 .leaf-front{ visibility:hidden; }
/* wędrujący cień na awersie podczas przewracania (JS animuje opacity) */
#kontakt-r2.dz-3d .leaf-cien{ display:block; position:absolute; inset:0; z-index:2; pointer-events:none;
  opacity:0; border-radius:inherit;
  background:linear-gradient(100deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.10) 40%, rgba(0,0,0,.42) 100%); }

/* OKŁADKA (osobny obiekt): unosi się na LEWYM zawiasie (grzbiet), przy edge-on ~88° gaśnie
   i znika ze sceny. Jednostronna (widzimy tylko awers okladka-cut); overhang jak deska. */
#kontakt-r2.dz-3d .dz-cover{ display:block; position:absolute; top:0; bottom:0; left:0; width:100%;
  z-index:90; transform-style:preserve-3d; transform-origin:0% 50%; will-change:transform, opacity; }
#kontakt-r2.dz-3d .dz-cover .leaf-face{ overflow:visible; border-radius:0; }
#kontakt-r2.dz-3d .dz-cover .leaf-front{ position:absolute; left:-2.6%; top:-3.4%; width:107%; height:106.8%;
  box-shadow:none; transform:none;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.4)) drop-shadow(0 20px 34px rgba(0,0,0,.5)); }
#kontakt-r2.dz-3d .dz-cover .leaf-front img{ border-radius:0; object-fit:fill; }
#kontakt-r2.dz-3d .dz-cover-poz{
  position:absolute; left:50%; top:49.35%; z-index:3; transform:translate(-50%,-50%);
  padding:2px 7px; background:#F0EFE8; color:var(--rust-deep); pointer-events:none;
  font-size:clamp(5px,.46vw,7px); line-height:1; letter-spacing:.28em; white-space:nowrap;
}

/* cień unoszonej okładki na bloku kartek (widoczny gdy zamknięty / otwierający się) */
#kontakt-r2.dz-3d .dz-blok-cien{ display:block; position:absolute; inset:0; z-index:80; pointer-events:none;
  opacity:0; border-radius:2px 6px 6px 2px; transform:translateZ(1px);
  background:linear-gradient(90deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.22) 34%, rgba(0,0,0,0) 72%); }

/* linki aktywne tylko gdy KONTAKT jest bieżącą stroną */
#kontakt-r2.dz-3d .leaf-link{ pointer-events:none; }
#kontakt-r2.dz-3d[data-page="2"] .leaf-link{ pointer-events:auto; }

#kontakt-r2.dz-3d .dz-naw{ display:flex; }
#kontakt-r2.dz-3d .dz-pioro{ display:block; }

/* ---- wygląd nawigacji (display sterowany wyżej) ---- */
#kontakt-r2 .dz-naw{ position:relative; z-index:6; align-items:center; justify-content:center;
  gap:clamp(14px,2vw,26px); margin-top:clamp(20px,3vh,40px); }
#kontakt-r2 .dz-naw-btn{ font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dk-tx2); background:transparent; border:1px solid var(--dk-line); border-radius:4px;
  padding:8px 16px; cursor:pointer; transition:color .2s, border-color .2s, opacity .2s; }
#kontakt-r2 .dz-naw-btn:hover{ color:var(--rust-lift); border-color:var(--rust-lift); }
#kontakt-r2 .dz-naw-btn:focus-visible{ outline:2px solid var(--rust-lift); outline-offset:3px; }
#kontakt-r2 .dz-naw-btn[aria-disabled="true"]{ opacity:.26; pointer-events:none; }
#kontakt-r2 .dz-naw-licz{ font-family:var(--f-mono); font-size:10px; letter-spacing:.2em; color:var(--dk-tx2);
  opacity:.72; min-width:6ch; text-align:center; }

/* ---- PIÓRO na biurku, tuż pod dolną krawędzią notesu ---- */
#kontakt-r2 .dz-pioro{ position:absolute; z-index:7; right:-14%; bottom:-8%;
  width:clamp(78px,10.5vw,120px); height:auto; transform:rotate(-8deg); transform-origin:80% 20%;
  filter:saturate(.85) brightness(.98) drop-shadow(0 14px 16px rgba(0,0,0,.6)); pointer-events:none; }

/* =========================================================================
   MOBILE ≤899px — kartki jedna pod drugą (base już to robi; domykamy detale)
   ========================================================================= */
@media(max-width:899px){
  #kontakt-r2 .dz-pin{ min-height:auto; padding:clamp(48px,9vh,80px) 5vw; }
  #kontakt-r2 .s-ghost{ display:none; }
  #kontakt-r2 .dz-naw, #kontakt-r2 .dz-pioro{ display:none !important; }
}

/* =========================================================================
   REDUCED-MOTION — stan końcowy: wszystkie trzy strony jedna pod drugą
   (kompletność informacji, zwłaszcza kontakt). Zero ruchu. Base CSS już to
   daje; tu tylko gasimy animacje i twardo blokujemy tryb 3D, gdyby klasa
   została dodana przy zmianie preferencji w trakcie sesji.
   ========================================================================= */
@media(prefers-reduced-motion:reduce){
  #kontakt-r2 .poz-nic{ transform:scaleY(1) !important; }
  #kontakt-r2 .dz-naw, #kontakt-r2 .dz-pioro{ display:none !important; }
  #kontakt-r2 *{ animation:none !important; transition:none !important; }
}


/* ===== CSS fragmentu: stopka ===== */
/* =====================================================================
   REDESIGN2 · footer #stopka → #stopka-r2
   KONCEPT: FUZJA „Sygnatura" (nić→węzeł + matowa pieczęć-tłoczenie + złoty podpis)
   Wszystkie selektory scoped pod #stopka-r2. Tokeny czytane z globalnego
   :root motywu, z literalnym fallbackiem (fragment działa też samodzielnie).
   ===================================================================== */

#stopka-r2{
  /* --- tokeny (fallbacki = wartości z DNA protokołu/papieru) --- */
  --st-ink:      var(--dk-ink, #1B211C);   /* baza finału */
  --st-dno:      #151A16;                   /* DNO łuku głębokości (winieta) */
  --st-tx:       var(--dk-tx, #E8E6DE);
  --st-tx2:      var(--dk-tx2, #A9B2A7);
  --st-line:     var(--dk-line, rgba(232,230,222,.14));
  --st-rust:     var(--rust-lift, #F5803C); /* nić / węzeł / flourish-akcent — działanie domykające */
  --st-gold:     var(--gold-lift, #C9B45C); /* ślad podpisu — najrzadszy */
  --st-steel:    var(--steel-lift, #9FB4BC);/* współrzędne — metadane, AA na ciemni */
  --f-disp:      var(--f-disp, "Fraunces", Georgia, serif);
  --f-mono:      var(--f-mono, "IBM Plex Mono", ui-monospace, monospace);

  position:relative;
  overflow:hidden;
  isolation:isolate;
  /* krótki wydech — sama ciemnia z winietą (treść przeniesiona na prawą stronę rozkładówki) */
  min-height:clamp(180px,28vh,320px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(28px,5vh,60px) clamp(20px,5vw,64px) clamp(48px,8vh,88px);
  /* SZEW #6 = BRAK szwu: jedno wspólne dk-ink z #kontakt, bez ciemniejszego żłobka
     na styku (dawny gradient st-dno→st-ink robił widoczne przejście). Głębia tylko
     u DNA strony przez .st2-winieta, nie na granicy dziennik→podpis. */
  background:var(--st-ink);
  color:var(--st-tx);
}

/* ---- światło / atmosfera ------------------------------------------------ */
#stopka-r2 .st2-lamp{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  mix-blend-mode:screen;
  opacity:1;
  background:
    radial-gradient(560px 420px at var(--mx,50%) var(--my,42%),
      rgba(201,180,92,.20), transparent 70%),
    radial-gradient(1000px 640px at 50% 30%,
      rgba(245,128,60,.045), transparent 74%);
  transition:opacity .6s ease;
}
#stopka-r2 .st2-grain{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:.05; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#stopka-r2 .st2-winieta{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  /* domknięcie najciemniejszej: pogłębienie ku dolnej krawędzi do dna łuku */
  background:
    radial-gradient(150% 120% at 50% 0%, transparent 42%, rgba(0,0,0,.30) 100%),
    linear-gradient(180deg, transparent 46%, var(--st-dno) 122%);
  opacity:.62;                 /* JS pogłębia do 1 w beacie 5 */
  transition:opacity .6s ease;
}

/* ---- treść zamknięcia (nić/węzeł, pieczęć, podpis, koordynaty, pióro) -----
   Przeniesiona na PRAWĄ stronę rozkładówki w #kontakt (.dz-piecz, .dz-podpis,
   .dz-coords, .dz-stempel, .dz-pioro) — patrz sekcja #kontakt-r2 wyżej.
   Tu w stopce zostaje tylko dno strony: lampa + winieta (wyżej). Martwe
   reguły dla usuniętych elementów (.st2-nic, .st2-piecz, .st2-stempel,
   .st2-parafka, .st2-supel-grupa, .st2-coords, .st-supel i pokrewne)
   sprzątnięte w rundzie 4-fix — żaden z tych selektorów nie ma już
   odpowiednika w HTML. */

@media(max-width:899px){
  #stopka-r2{ min-height:clamp(140px,22vh,240px); padding:clamp(24px,5vh,48px) 22px clamp(40px,7vh,72px); }
}

/* ======================= REDUCED-MOTION (stan końcowy) ==================
   Lampa w spoczynkowej jasności, winieta w pełni pogłębiona. Bez JS/scrub. */
@media(prefers-reduced-motion:reduce){
  #stopka-r2 .st2-lamp{ opacity:.7 !important; }
  #stopka-r2 .st2-winieta{ opacity:1 !important; }
}



/* --- an-* (baza pozycji aneksu; reużywana przez #zlecenia-r2 redesignu) --- */
.an-pozycje{margin:34px 0 6px;}
.an-poz{position:relative; margin:0 0 34px;}
.an-poz:nth-of-type(1) .rz-karta{transform:rotate(-.35deg);}
.an-poz:nth-of-type(2) .rz-karta{transform:rotate(.3deg);}
.an-poz:nth-of-type(3) .rz-karta{transform:rotate(-.25deg);}