/* ==========================================================================
   backcontact.pl — style.css (Foundation)
   Obsidian Editorial — „Czarne szkło, ciepły papier”.

   THE COMPOSITION IS FIXED BY DESIGN. The near-black bands are the front glass
   of a back-contact module and the warm paper bands are the printed catalogue
   it is read in; they are materials, not a theme. There is NO light/dark theme
   switch and none is planned. `color-scheme: dark light` is declared only so
   scrollbars and native form controls do not clash with the band they sit on.
   Never use #000 or #FFF anywhere in this file.
   ========================================================================== */

/* ---------- 0. Fonts (self-hosted, latin + latin-ext only) ---------- */
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 400;font-display:swap;src:url(../fonts/fraunces-italic-300-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 400;font-display:swap;src:url(../fonts/fraunces-italic-300-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 400;font-display:swap;src:url(../fonts/fraunces-normal-300-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 400;font-display:swap;src:url(../fonts/fraunces-normal-300-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-normal-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-normal-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-mono-normal-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-mono-normal-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 600;font-stretch:100%;font-display:swap;src:url(../fonts/instrument-sans-normal-400-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 600;font-stretch:100%;font-display:swap;src:url(../fonts/instrument-sans-normal-400-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* size-adjusted fallbacks — no line-break shift in the hero H1 on swap */
@font-face{font-family:"Fraunces Fallback";src:local("Georgia");size-adjust:104%;ascent-override:92%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:"Instrument Sans Fallback";src:local("Arial");size-adjust:97%;ascent-override:96%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:"Plex Mono Fallback";src:local("Consolas"),local("Courier New");size-adjust:100%}

/* ---------- 1. Tokens ---------- */
:root{
  color-scheme:dark light;
  /* grounds */
  --obsidian:#0B0B0C;--paper:#F4F1EB;--paper-2:#EBE7DF;--paper-3:#FBFAF7;
  /* dark surfaces */
  --glass:#131316;--glass-2:#1B1B20;--glass-hi:#26262C;
  /* text */
  --ink:#141414;--ink-2:#5A574F;--ink-3:#6B675F;
  --ink-on-dark:#F4F1EB;--ink-on-dark-2:#A7A39A;--ink-on-dark-3:#7C7970;
  /* hairlines */
  --hairline:#D6D0C4;--hairline-strong:#B9B1A3;--hairline-dark:#2A2A2F;--hairline-dark-2:#3A3A41;
  /* the one accent */
  --champagne:#BFAE85;--champagne-deep:#6E5E36;--champagne-line:#B39E68;--champagne-glow:#E3D3A8;
  /* accent for UI parts and meaningful graphics on paper (≥ 3:1 on paper/paper-2/paper-3): range thumbs, tab indicator, BC chart line, ROI boxes */
  --champagne-ui:#8A7845;
  /* semantic & illustration */
  --negative:#8A5A4A;--wafer:#1B2238;--silicon:#23232A;--silicon-emitter:#2E2E36;--silver:#C9CCD1;--frame:#1E1E23;
  /* focus */
  --focus-dark:#BFAE85;--focus-light:#6E5E36;
  /* shadows & glows (baked, never animated) */
  --shadow-contact:0 2px 4px rgba(0,0,0,.55);--shadow-header:0 1px 0 var(--hairline-dark);--glow-line:0 0 24px rgba(191,174,133,.10);
  /* radii */
  --r-0:0;--r-1:2px;--r-2:4px;
  /* spacing */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;--s-10:128px;--s-11:160px;--s-12:200px;
  --section-y:clamp(96px,6vw + 48px,200px);--chapter-gap:clamp(64px,4vw + 32px,120px);--ledger-y:clamp(28px,2vw + 16px,40px);--page-x:clamp(24px,4.5vw,88px);--col-gap:clamp(16px,2vw,32px);
  /* containers */
  --container:1360px;--container-table:1200px;--container-read:760px;--container-panel:960px;--measure-body:65ch;--measure-lead:52ch;--nav-h:64px;
  /* motion */
  --dur-fast:180ms;--dur-base:420ms;--dur-slow:700ms;--dur-draw:1200ms;
  --ease-out:cubic-bezier(.16,1,.3,1);--ease-draw:cubic-bezier(.4,0,.2,1);--ease-state:cubic-bezier(.65,0,.35,1);--ease-nav:cubic-bezier(.2,.7,.2,1);
  /* type */
  --font-display:"Fraunces","Fraunces Fallback",Georgia,serif;
  --font-text:"Instrument Sans","Instrument Sans Fallback",Arial,system-ui,sans-serif;
  --font-mono:"IBM Plex Mono","Plex Mono Fallback",ui-monospace,Consolas,monospace;
  --fs-display:clamp(2.75rem,1.2rem + 6.2vw,7.5rem);--fs-h2:clamp(2rem,1rem + 3.4vw,4.5rem);--fs-h3:clamp(1.375rem,1.1rem + 1vw,2rem);
  --fs-lead:clamp(1.125rem,1.05rem + .5vw,1.375rem);--fs-body:clamp(1rem,.97rem + .25vw,1.125rem);--fs-small:.875rem;--fs-nav:.875rem;--fs-eyebrow:.75rem;--fs-mono:.8125rem;--fs-chapter-no:clamp(1.125rem,1rem + .5vw,1.375rem);
  --fs-stat:clamp(3.5rem,2rem + 7vw,9rem);
  /* default (dark) remaps — the header and hero sit on obsidian */
  --fg:var(--ink-on-dark);--fg-2:var(--ink-on-dark-2);--fg-3:var(--ink-on-dark-3);--rule:var(--hairline-dark);--rule-2:var(--hairline-dark-2);--accent:var(--champagne);--accent-text:var(--champagne);--ground:var(--obsidian);--focus:var(--focus-dark);--focus-halo:var(--obsidian);
}
@media (max-width:899px){:root{--nav-h:56px}}

/* ---------- 2. Reset & base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--nav-h);scroll-behavior:auto}
html.motion{scroll-behavior:smooth}
body{margin:0;background:var(--obsidian);color:var(--ink-on-dark);font-family:var(--font-text);font-size:var(--fs-body);line-height:1.6;font-weight:400;text-rendering:optimizeLegibility;hyphens:manual;overflow-x:clip}
h1,h2,h3{font-family:var(--font-display);font-variation-settings:"SOFT" 0,"WONK" 0;font-optical-sizing:auto;font-weight:400;margin:0;text-wrap:balance;hyphens:manual}
h3{font-size:var(--fs-h3);line-height:1.15;letter-spacing:-.01em}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0}
a{color:inherit}
em{font-style:italic;font-weight:inherit}
strong{font-weight:600}
button{font:inherit;color:inherit}
svg{overflow:visible}
sub{font-size:.7em;line-height:0}
::selection{background:var(--ink);color:var(--paper)}
.band-dark ::selection{background:var(--paper);color:var(--obsidian)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;box-shadow:0 0 0 5px var(--focus-halo);border-radius:var(--r-1)}
.skip-link{position:absolute;left:var(--page-x);top:-100px;z-index:60;padding:10px 16px;background:var(--paper);color:var(--ink);font:500 var(--fs-nav)/1 var(--font-text);text-decoration:none;border-radius:var(--r-1)}
.skip-link:focus{top:calc(var(--nav-h) + 12px)}

/* ---------- 3. Utilities ---------- */
.container{max-width:var(--container);margin:0 auto;padding-left:var(--page-x);padding-right:var(--page-x)}
.container-read{max-width:calc(var(--container-read) + 2 * var(--page-x))}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mono{font-family:var(--font-mono);font-size:var(--fs-mono);font-weight:400;line-height:1.5;letter-spacing:.02em;font-variant-numeric:tabular-nums lining-nums}
.eyebrow{font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:500;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text)}
.display{font-size:var(--fs-display);font-weight:300;line-height:.95;letter-spacing:-.025em}
.display .line{display:block}
.lead{font-size:var(--fs-lead);line-height:1.5;max-width:var(--measure-lead);color:var(--fg-2)}
.art svg{display:block;width:100%;height:auto}
svg .mono{font-family:var(--font-mono);font-size:13px;fill:currentColor;font-variant-numeric:tabular-nums lining-nums;letter-spacing:.02em}
.num,.stat-value,.tl-year,.compare,.ds,.rail,.readout,.records,.spec{font-variant-numeric:tabular-nums lining-nums}
sup.fn{font-family:var(--font-mono);font-size:max(.6em,12px);line-height:0;letter-spacing:0;vertical-align:baseline;position:relative;top:-.6em;margin-left:.12em;white-space:nowrap}
sup.fn a{color:var(--accent-text);text-decoration:none}
sup.fn a+a::before{content:",";color:var(--fg-3)}
sup.fn a:hover{text-decoration:underline;text-underline-offset:2px}
.link-arrow{color:var(--fg);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:var(--fg-3);transition:text-decoration-color var(--dur-fast)}
.link-arrow:hover{text-decoration-color:var(--accent)}
.link-btn{background:none;border:0;padding:4px 0;cursor:pointer;color:var(--fg);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:var(--fg-3);font-size:var(--fs-small)}
.link-btn:hover{text-decoration-color:var(--accent)}
.btn-ghost{display:inline-flex;align-items:center;height:40px;padding:0 20px;border:1px solid var(--champagne);border-radius:var(--r-1);background:none;color:var(--ink-on-dark);font:500 14px/1 var(--font-text);text-decoration:none;white-space:nowrap;cursor:pointer;transition:border-color var(--dur-fast)}
.btn-ghost:hover{border-color:var(--champagne-glow)}
.band-paper .btn-ghost,.band-paper-2 .btn-ghost{border-color:var(--champagne-line);color:var(--ink)}
.band-paper .btn-ghost:hover,.band-paper-2 .btn-ghost:hover{border-color:var(--ink)}
.sheet-caption{color:var(--fg-3);margin:0}
.readout-line{color:var(--ink-3);margin-top:var(--s-3)}
.entry-body p,.note p,.pane-text p,.praktyka-text p,.case-text p,.how-to-read p,.plate-text p,.f-disclaimer p,.faq-inner p,.tl-node p{max-width:var(--measure-body)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:24px;background:none;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:1px;background:var(--rule-2)}
input[type=range]::-moz-range-track{height:1px;background:var(--rule-2)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;margin-top:-6.5px;border:0;border-radius:var(--r-1);background:var(--accent);cursor:pointer}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:var(--r-1);background:var(--accent);cursor:pointer}

/* ---------- 4. Bands & remaps ---------- */
.band{position:relative;padding-top:var(--section-y);padding-bottom:var(--section-y)}
.band-dark{--fg:var(--ink-on-dark);--fg-2:var(--ink-on-dark-2);--fg-3:var(--ink-on-dark-3);--rule:var(--hairline-dark);--rule-2:var(--hairline-dark-2);--accent:var(--champagne);--accent-text:var(--champagne);--ground:var(--obsidian);--focus:var(--focus-dark);--focus-halo:var(--obsidian);background:var(--obsidian);color:var(--ink-on-dark);min-height:60svh;-webkit-font-smoothing:antialiased}
.band-paper,.band-paper-2{--fg:var(--ink);--fg-2:var(--ink-2);--fg-3:var(--ink-3);--rule:var(--hairline);--rule-2:var(--hairline-strong);--accent:var(--champagne-line);--accent-text:var(--champagne-deep);--ground:var(--paper);--focus:var(--focus-light);--focus-halo:var(--paper);background:var(--paper);color:var(--ink);-webkit-font-smoothing:auto}
.band-paper-2{--ground:var(--paper-2);--focus-halo:var(--paper-2);background:var(--paper-2)}
.band-paper+.band-paper{padding-top:0}
.plate{background:var(--paper-3);border:1px solid var(--hairline);border-radius:var(--r-2)}

/* chapter header */
.chapter-head{margin-bottom:var(--chapter-gap)}
.chapter-head .rule{height:1px;background:var(--rule);transform-origin:left}
.chapter-grid{padding-top:var(--s-6);row-gap:var(--s-4)}
.chapter-meta{display:contents}
.chapter-meta .eyebrow{grid-column:2 / span 6;grid-row:1;align-self:end}
.chapter-no{grid-column:1;grid-row:2;font-size:var(--fs-chapter-no);line-height:1;color:var(--accent-text);padding-top:calc(var(--fs-h2) * .58)}
.chapter-title{grid-column:2 / span 6;grid-row:2;font-size:var(--fs-h2);line-height:1.02;letter-spacing:-.02em;font-weight:400;color:var(--fg)}
.chapter-lead{grid-column:8 / span 5;grid-row:2;font-size:var(--fs-lead);line-height:1.5;max-width:42ch;color:var(--fg-2);align-self:end}
.chapter-head--plain .rule{display:none}
.chapter-head--plain .chapter-grid{padding-top:0}
@media (min-width:1024px){.chapter-title{font-weight:340}}
@media (max-width:899px){
  .chapter-grid{display:block}
  .chapter-no{display:block;padding-top:0;margin-bottom:var(--s-3)}
  .chapter-meta .eyebrow{display:block;margin-bottom:var(--s-4)}
  .chapter-title{margin-bottom:var(--s-5)}
  .chapter-lead{max-width:var(--measure-lead)}
}

/* ---------- 5. Header / nav ---------- */
.site-header{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:50;color:var(--ink-on-dark);transition:background-color 240ms var(--ease-out),box-shadow 240ms var(--ease-out);-webkit-font-smoothing:antialiased}
.site-header.is-scrolled,html:not(.js) .site-header{background:var(--obsidian);box-shadow:var(--shadow-header)}
@supports (backdrop-filter:blur(12px)) or (-webkit-backdrop-filter:blur(12px)){.site-header.is-scrolled{background:rgba(11,11,12,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}}
.header-grid{display:grid;grid-template-columns:auto 1fr auto;align-items:center;height:100%;column-gap:var(--s-6)}
.brand{display:flex;align-items:baseline;gap:16px;min-width:0}
.wordmark{display:inline-flex;align-items:baseline;gap:4px;font-family:var(--font-display);font-variation-settings:"SOFT" 0,"WONK" 0;font-weight:400;font-size:22px;line-height:1;letter-spacing:-.02em;color:var(--ink-on-dark);text-decoration:none;margin:0}
.wordmark .pad{display:inline-block;width:6px;height:6px;background:var(--champagne);flex:none;position:relative;top:-1px}
.wordmark:hover .pad{background:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Cpath d='M0 .5h6M1.5 .5v5M4.5 .5v5M0 5.5h6' stroke='%23BFAE85' stroke-width='1'/%3E%3C/svg%3E")}
.readout{color:var(--ink-on-dark-2);white-space:nowrap;display:none}
.site-nav{position:relative;justify-self:center;display:none}
.nav-list{display:flex;gap:28px;list-style:none}
.nav-list a{display:block;padding:8px 0;font-size:var(--fs-nav);font-weight:500;line-height:1;letter-spacing:.02em;color:var(--ink-on-dark-2);text-decoration:none;transition:color var(--dur-fast)}
.nav-list a:hover,.nav-list a.is-active{color:var(--ink-on-dark)}
.nav-ind{position:absolute;left:0;bottom:2px;height:1px;width:0;background:var(--champagne);opacity:0;transition:transform 200ms var(--ease-nav),width 200ms var(--ease-nav),opacity 200ms}
.nav-ind.is-on{opacity:1}
.header-actions{display:flex;align-items:center;gap:var(--s-4);justify-self:end}
.header-cta .cta-short{display:none}
.burger{display:none;width:40px;height:40px;padding:0;background:none;border:0;cursor:pointer;position:relative}
.burger span{position:absolute;left:10px;width:20px;height:1px;background:var(--ink-on-dark);transition:transform 240ms var(--ease-nav)}
.burger span:first-child{top:16px}
.burger span:last-child{top:23px}
html.nav-open .burger span:first-child{transform:translateY(3.5px) rotate(45deg)}
html.nav-open .burger span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.progress{position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--champagne);transform:scaleX(0);transform-origin:left;pointer-events:none}
@media (min-width:900px){.site-nav{display:block}}
@media (min-width:1200px){.readout{display:inline}}
@media (max-width:899px){
  .header-cta .cta-long{display:none}
  .header-cta .cta-short{display:inline}
  .header-cta{height:36px;padding:0 14px}
  .burger{display:block}
}
/* mobile overlay */
.nav-overlay{position:fixed;inset:0;z-index:40;background:var(--glass);color:var(--ink-on-dark);display:none;overflow:auto;padding-top:calc(var(--nav-h) + var(--s-7));padding-bottom:var(--s-7);-webkit-font-smoothing:antialiased}
html.nav-open .nav-overlay{display:block}
html.nav-open body{overflow:hidden}
.overlay-list{list-style:none}
.overlay-list a{display:flex;align-items:baseline;gap:var(--s-4);padding:var(--s-3) 0;font-family:var(--font-display);font-variation-settings:"SOFT" 0,"WONK" 0;font-size:var(--fs-h2);font-weight:400;line-height:1.1;letter-spacing:-.02em;color:var(--ink-on-dark);text-decoration:none}
.overlay-list a .mono{color:var(--champagne);min-width:2.4em}
.overlay-foot{margin-top:var(--s-7);color:var(--ink-on-dark-2)}
html.js.motion .overlay-list li{opacity:0;transform:translateY(12px)}
html.js.motion.nav-open .overlay-list li{opacity:1;transform:none;transition:opacity 380ms var(--ease-out),transform 380ms var(--ease-out)}
html.js.motion.nav-open .overlay-list li:nth-child(2){transition-delay:40ms}
html.js.motion.nav-open .overlay-list li:nth-child(3){transition-delay:80ms}
html.js.motion.nav-open .overlay-list li:nth-child(4){transition-delay:120ms}
html.js.motion.nav-open .overlay-list li:nth-child(5){transition-delay:160ms}
html.js.motion.nav-open .overlay-list li:nth-child(6){transition-delay:200ms}
html.js.motion.nav-open .overlay-list li:nth-child(7){transition-delay:240ms}
html.js.motion.nav-open .overlay-list li:nth-child(8){transition-delay:280ms}
html.js.motion.nav-open .overlay-list li:nth-child(9){transition-delay:320ms}

/* ---------- 6. Hero ---------- */
.hero{min-height:max(640px,100svh);padding:var(--nav-h) 0 0;display:flex;flex-direction:column;overflow-x:clip}
.hero-grid{flex:1;position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:center;padding-top:var(--s-5);padding-bottom:var(--s-6)}
.hero-copy{grid-column:1 / span 7;grid-row:1;position:relative;z-index:1;min-width:0}
.hero-eyebrow{margin-bottom:var(--s-5)}
.hero h1{margin-bottom:var(--s-5);color:var(--ink-on-dark)}
.hero h1 .line{display:block}
.hero h1 em{font-weight:300}
.hero-lead{margin-bottom:var(--s-5);font-size:clamp(1.0625rem,1rem + .35vw,1.25rem)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-6)}
/* the module: height-bound (never taller than the fold minus nav and rail), pushed past the right page edge so it bleeds ~10 % (section clips) */
.hero-figure{grid-column:7 / -1;grid-row:1;width:min(128%,calc((100svh - var(--nav-h) - 190px) * .9));justify-self:end;margin-right:calc(-1 * var(--page-x) - 16%);position:relative;z-index:0;min-width:0}
.hero-art{width:100%;aspect-ratio:900 / 1000;will-change:transform}
.scroll-cue{position:absolute;right:0;bottom:var(--s-5);display:flex;flex-direction:column;align-items:center;gap:var(--s-3);color:var(--ink-on-dark-3);margin:0;letter-spacing:.12em;text-transform:uppercase;font-size:var(--fs-eyebrow)}
.scroll-cue span{writing-mode:vertical-rl}
.scroll-cue::after{content:"";width:1px;height:40px;background:var(--hairline-dark-2)}
.rail{max-width:var(--container);margin:0 auto;padding:0 var(--page-x);width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--hairline-dark)}
.rail-cell{position:relative;padding:var(--s-4) var(--s-5) var(--s-5) var(--s-5)}
.rail-cell:first-child{padding-left:0}
.rail-cell+.rail-cell{border-left:1px solid var(--hairline-dark)}
.rail-cell::before{content:"";position:absolute;left:0;top:0;width:12px;height:1px;background:var(--champagne)}
.rail-cell:first-child::before{left:0}
.rail dt{font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-on-dark-3);margin:var(--s-3) 0 var(--s-2)}
.rail dd{margin:0}
.rail dd strong{display:inline-block;font:400 clamp(1.125rem,1rem + .5vw,1.375rem)/1 var(--font-mono);letter-spacing:.02em;color:var(--ink-on-dark);font-variant-numeric:tabular-nums lining-nums}
.rail .rail-note{display:block;margin-top:var(--s-2);color:var(--ink-on-dark-3);max-width:46ch;font-size:var(--fs-eyebrow);letter-spacing:.02em;line-height:1.45}
@media (max-width:899px){
  .hero-grid{display:flex;flex-direction:column;align-items:flex-start;padding-top:var(--s-7);padding-bottom:var(--s-7);gap:var(--s-7)}
  .hero-copy{width:100%}
  .hero-eyebrow{margin-bottom:var(--s-5)}
  .hero h1{margin-bottom:var(--s-5)}
  .hero-lead{margin-bottom:var(--s-6)}
  .hero-figure{width:min(88vw,calc(42vh * .9));max-width:100%;align-self:center;margin-right:0}
  .scroll-cue{display:none}
  /* compact rail: label + value only (the descriptions return in #liczby) */
  .rail .rail-note{display:none}
  .rail-cell{padding:var(--s-3) var(--s-4) var(--s-4)}
  .rail-cell:first-child{padding-left:0}
  .rail dt{margin-top:var(--s-2)}
  .rail{grid-template-columns:1fr 1fr}
  .rail-cell:nth-child(3){grid-column:1 / -1;border-left:0;border-top:1px solid var(--hairline-dark);padding-left:0}
}
@media (max-width:479px){
  .rail{grid-template-columns:1fr}
  .rail-cell{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);padding:var(--s-3) 0;border-left:0}
  .rail-cell+.rail-cell{border-top:1px solid var(--hairline-dark)}
  .rail-cell::before{display:none}
  .rail dt{margin:0}
  .rail dd strong{font-size:1.125rem}
}
/* hero load choreography (JS-gated; without JS everything is visible) */
html.js.motion .hero h1 .line{clip-path:inset(-.15em -.1em 100% -.05em)}
html.js.motion.hero-ready .hero h1 .line{clip-path:inset(-.15em -.1em -.25em -.05em);transition:clip-path 700ms var(--ease-out)}
html.js.motion.hero-ready .hero h1 .line:nth-child(2){transition-delay:120ms}
html.js.motion.hero-ready .hero h1 .line:nth-child(3){transition-delay:240ms}
html.js.motion .hero-eyebrow,html.js.motion .hero-lead,html.js.motion .hero-actions,html.js.motion .rail,html.js.motion .scroll-cue{opacity:0}
html.js.motion.hero-ready .hero-eyebrow{opacity:1;transition:opacity 400ms var(--ease-out) 200ms}
html.js.motion.hero-ready .hero-lead,html.js.motion.hero-ready .hero-actions{opacity:1;transition:opacity 400ms var(--ease-out) 500ms}
html.js.motion.hero-ready .rail,html.js.motion.hero-ready .scroll-cue{opacity:1;transition:opacity 500ms var(--ease-out) 800ms}
html.js.motion .hero-figure{opacity:0;transform:translateY(16px)}
html.js.motion.hero-ready .hero-figure{opacity:1;transform:none;transition:opacity 900ms var(--ease-out) 200ms,transform 900ms var(--ease-out) 200ms}

/* ---------- 7. Technologia (01) ---------- */
.comparator{padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-4)}
.cmp-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--s-3) var(--s-5)}
.cmp-title{font-weight:500;letter-spacing:.14em;font-size:var(--fs-eyebrow);color:var(--ink-3)}
.cmp-tabs{display:inline-flex;border:1px solid var(--hairline-strong);border-radius:var(--r-1);overflow:hidden}
.cmp-tabs [role=radio]{background:none;border:0;padding:8px 14px;font:500 13px/1 var(--font-text);color:var(--ink-2);cursor:pointer;transition:background-color var(--dur-fast),color var(--dur-fast)}
.cmp-tabs [role=radio]+[role=radio]{border-left:1px solid var(--hairline-strong)}
.cmp-tabs [role=radio][aria-checked=true]{background:var(--ink);color:var(--paper)}
.cmp-tabs [role=radio]:focus-visible{outline-offset:-3px;box-shadow:none}
.comparator-stage{position:relative;aspect-ratio:1200 / 620;overflow:hidden;background:var(--paper-3)}
.comparator-stage svg{display:block;width:100%;height:100%}
.cmp-grip{display:block;box-sizing:border-box;position:absolute;top:50%;left:calc(var(--mix,.5) * 100%);width:24px;height:24px;margin:-12px 0 0 -12px;padding:0;border:1px solid var(--champagne-line);border-radius:50%;background:var(--paper-3);cursor:ew-resize;touch-action:none;transition:transform var(--dur-fast)}
.cmp-grip:hover{transform:scale(1.1)}
.cmp-grip:focus-visible{border-radius:50%}
.cmp-grip::before{content:"";position:absolute;left:50%;top:-100vh;bottom:-100vh;width:1px;margin-left:-.5px;background:var(--champagne-line);pointer-events:none}
.cmp-ends{display:flex;justify-content:space-between;gap:var(--s-4);color:var(--ink-3)}
.cmp-range{display:none;flex-direction:column;gap:var(--s-2);color:var(--ink-3)}
.cmp-range input{--rule-2:var(--hairline-strong);--accent:var(--champagne-ui)}
.comparator .sheet-caption{color:var(--ink-3)}
@media (max-width:719px){
  .comparator{padding:var(--s-4)}
  .comparator-stage{aspect-ratio:4 / 3}
  .cmp-grip{display:none}
  .cmp-range{display:flex}
  .cmp-ends{display:none}
}
.legend{list-style:none;margin-top:var(--s-7);display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2) var(--s-7);color:var(--ink-2);max-width:var(--container-table)}
.legend li{display:grid;grid-template-columns:24px 1fr;gap:var(--s-2)}
.legend-no{color:var(--champagne-deep)}
@media (max-width:719px){.legend{grid-template-columns:1fr}}
.notes{margin-top:var(--s-9);row-gap:var(--s-7)}
.note{grid-column:1 / -1}
.note-no{display:block;font-size:var(--fs-chapter-no);color:var(--champagne-deep);margin-bottom:var(--s-3);line-height:1}
.note h3{margin-bottom:var(--s-3)}
.note p{color:var(--ink-2)}
@media (min-width:900px){
  .note:nth-child(1){grid-column:2 / span 3}
  .note:nth-child(2){grid-column:5 / span 3}
  .note:nth-child(3){grid-column:8 / span 4}
}

/* ---------- 8. Zalety (02) — ledger ---------- */
.ledger{list-style:none;position:relative;display:grid;grid-template-columns:1fr;column-gap:var(--s-7)}
.entry{position:relative;display:grid;grid-template-columns:48px 1fr 56px;column-gap:var(--s-4);align-items:start;border-top:1px solid var(--hairline);padding:var(--ledger-y) 0}
.entry::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--hairline-strong);transform:scaleY(0);transform-origin:top;transition:transform var(--dur-fast)}
.entry:hover::before{transform:scaleY(1)}
.entry .idx{color:var(--champagne-deep);font-size:var(--fs-chapter-no);line-height:1.15;padding-top:.15em;transition:color var(--dur-fast)}
.entry:hover .idx{color:var(--ink)}
.entry h3{margin-bottom:var(--s-3);color:var(--ink)}
.entry-body p{color:var(--ink-2)}
.glyph{width:56px;height:56px;color:var(--ink);justify-self:end}
@media (min-width:900px){
  .ledger{grid-template-columns:1fr 1fr;grid-auto-flow:column;grid-template-rows:repeat(4,auto)}
  .ledger::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--hairline)}
  .ledger .entry:nth-child(4),.ledger .entry:nth-child(8){border-bottom:1px solid var(--hairline)}
}
@media (max-width:899px){
  .entry{grid-template-columns:40px 1fr 48px}
  .glyph{width:48px;height:48px}
  .ledger .entry:last-child{border-bottom:1px solid var(--hairline)}
}

/* ---------- 9. Liczby (interlude) ---------- */
.liczby{min-height:50svh;overflow:hidden}
.liczby .container{position:relative}
.comb-bg{position:absolute;left:0;right:0;top:-40%;bottom:-40%;opacity:.04;pointer-events:none;color:var(--champagne);--comb-a:var(--champagne);--comb-b:var(--paper)}
.comb-bg svg{width:100%;height:100%;display:block}
/* 2 × 2 from 480 px up: the numerals get the brief's 56→144 px scale; the container-query guard keeps any viewport from colliding */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.stat{padding:var(--s-2) var(--s-5) var(--s-5);text-align:center;min-width:0;container-type:inline-size}
.stat:nth-child(2n){border-left:1px solid var(--hairline-dark)}
.stat:nth-child(n+3){border-top:1px solid var(--hairline-dark)}
.stat-label{color:var(--ink-on-dark-2);margin-bottom:var(--s-5)}
.stat-value{font-family:var(--font-display);font-variation-settings:"SOFT" 0,"WONK" 0;font-weight:300;font-size:min(var(--fs-stat),27cqi);line-height:.9;letter-spacing:-.03em;color:var(--ink-on-dark);white-space:nowrap}
.unit{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:.35em;letter-spacing:0;color:var(--champagne);vertical-align:baseline;position:relative;top:-.04em;margin-left:.14em}
html.js .stat .unit{opacity:0;transition:opacity 300ms var(--ease-out)}
html.js .stat.done .unit{opacity:1}
.gauge{position:relative;height:1px;background:var(--hairline-dark-2);margin:var(--s-6) 0 var(--s-6)}
.gauge-fill{position:absolute;left:0;top:0;height:1px;width:100%;background:var(--champagne);transform:scaleX(var(--v,0));transform-origin:left;transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
html.js .stat:not(.counted) .gauge-fill{transform:scaleX(0)}
.gauge-ref{position:absolute;left:calc(var(--ref,0) * 100%);top:-4px;width:1px;height:9px;background:var(--ink-on-dark-3)}
.gauge-tick{position:absolute;left:calc(var(--ref,0) * 100%);top:9px;transform:translateX(-100%);white-space:nowrap;font-size:var(--fs-eyebrow);color:var(--ink-on-dark-3);letter-spacing:.06em}
.stat-foot{color:var(--ink-on-dark-2);max-width:32ch;margin:0 auto}
.also{list-style:none;margin-top:var(--s-9);color:var(--ink-on-dark-2)}
.also li{padding:var(--s-3) 0;border-top:1px solid var(--hairline-dark);max-width:90ch}
.also strong{color:var(--ink-on-dark);font-weight:500}
.fine{margin-top:var(--s-7);text-align:right;color:var(--ink-on-dark-3)}
@media (max-width:1199px){.stat{padding:var(--s-2) var(--s-4) var(--s-5)}}
@media (max-width:899px){
  .stat{padding:var(--s-5) var(--s-4)}
  .fine{text-align:left}
}
/* one column below 600 px: two columns would push the numerals under the 56 px floor */
@media (max-width:599px){
  .stats{grid-template-columns:1fr}
  .stat{padding:var(--s-5) 0}
  .stat:nth-child(2n){border-left:0}
  .stat+.stat{border-top:1px solid var(--hairline-dark)}
}

/* ---------- 10. Porównanie (03) — table ---------- */
.compare-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-8) var(--col-gap)}
.compare-main{min-width:0;max-width:var(--container-table)}
.legend-rail{color:var(--ink-3);margin-bottom:var(--s-4)}
.lg-bc{color:var(--champagne-line);letter-spacing:-.1em;margin-right:.3em}
.lg-neg{color:var(--negative)}
.scroll-hint{display:none;color:var(--ink-3);margin-bottom:var(--s-2);transition:opacity 400ms}
.scroll-hint.is-hidden{opacity:0}
.table-wrap{position:relative}
.compare{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;line-height:1.45;color:var(--ink);text-align:left}
.compare th,.compare td{padding:var(--s-4) var(--s-4) var(--s-4) 0;vertical-align:top;border-top:1px solid var(--hairline);overflow-wrap:anywhere}
.compare thead th{font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);vertical-align:bottom;border-top:0;padding-top:0;position:relative}
.compare thead th span{display:block;padding-top:var(--s-2)}
.compare thead th.col-bc::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--champagne-line);transform:scaleX(0);transform-origin:left;transition:transform 700ms var(--ease-draw)}
html:not(.js) .compare thead th.col-bc::before,.compare thead tr.in th.col-bc::before{transform:scaleX(1)}
.compare .th{width:64px;height:40px;display:block;color:var(--ink)}
.compare tbody th{font-weight:500;color:var(--ink);position:relative;width:22%}
.compare tbody th::before{content:"";position:absolute;left:-12px;top:0;bottom:0;width:1px;background:var(--champagne-line);opacity:0;transition:opacity var(--dur-fast)}
.compare tbody tr:hover th::before{opacity:1}
.compare tbody tr:hover th,.compare tbody tr:hover td{background:var(--paper-2)}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:1px solid var(--hairline)}
.compare .col-bc{background:var(--paper-2);padding-left:var(--s-3)}
.compare td.best{font-weight:600;color:var(--ink)}
.compare td.worst{color:var(--negative)}
.compare td .sec{display:block;color:var(--ink-2);font-size:var(--fs-small);font-weight:400;margin-top:2px}
.bar{display:block;position:relative;width:40px;height:6px;background:var(--hairline);margin-top:var(--s-2)}
.bar::after{content:"";position:absolute;inset:0;background:var(--hairline-strong);transform:scaleX(var(--v,0));transform-origin:left;transition:transform 600ms var(--ease-draw) 200ms}
.col-bc .bar::after{background:var(--champagne-line)}
html.js .compare tr.reveal:not(.in) .bar::after{transform:scaleX(0)}
.how-to-read{margin-top:var(--s-7);max-width:60ch}
.how-to-read h3{margin-bottom:var(--s-3)}
.how-to-read p{color:var(--ink-2)}
.how-to-read .source-line{margin-top:var(--s-4);color:var(--ink-3)}
.compare-side{max-width:480px}
.compare-side .eyebrow{margin-bottom:var(--s-4)}
.chart-slot{width:100%;aspect-ratio:480 / 300;position:relative}
.chart-slot svg{display:block;width:100%;height:100%}
.compare-side .sheet-caption{margin-top:var(--s-3);color:var(--ink-3)}
@media (min-width:1200px){
  .compare-layout{grid-template-columns:minmax(0,8fr) minmax(0,4fr);align-items:start}
  .compare-side{position:sticky;top:calc(var(--nav-h) + var(--s-6));max-width:none}
}
@media (max-width:799px){
  .scroll-hint{display:block}
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(90deg,var(--obsidian) calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,var(--obsidian) calc(100% - 40px),transparent);padding-right:40px}
  .compare{font-size:14px;min-width:760px}
  .compare th,.compare td{min-width:128px;padding-right:var(--s-3)}
  .compare tbody th,.compare .col-param{position:sticky;left:0;z-index:2;background:var(--paper);width:160px;min-width:160px;border-right:1px solid var(--hairline-strong)}
  .compare tbody th::before{display:none}
  .compare tbody th::after{content:"";position:absolute;top:0;bottom:0;right:-13px;width:12px;background:linear-gradient(90deg,rgba(20,20,20,.07),rgba(20,20,20,0));opacity:0;transition:opacity var(--dur-fast);pointer-events:none}
  .table-wrap.is-scrolled .compare tbody th::after{opacity:1}
  .compare tbody tr:hover th{background:var(--paper)}
  .compare .col-bc{padding-left:var(--s-3)}
  .compare .th{width:48px;height:30px}
}

/* ---------- 11. Estetyka (04) — sticky scene ---------- */
.estetyka .chapter-head{margin-bottom:var(--s-8)}
.stage-wrap{display:none}
.stage{position:sticky;top:var(--nav-h);height:calc(100svh - var(--nav-h));overflow:hidden}
.zoom{position:absolute;inset:0;will-change:transform;transform-origin:30% 55%}
.zoom svg{display:block;width:100%;height:100%}
.plates{position:absolute;left:var(--page-x);top:0;bottom:0;width:min(40ch,34%);display:grid;align-items:center;pointer-events:none}
.plates .plate-text{grid-area:1 / 1;opacity:0;visibility:hidden}
.plates .plate-text[data-plate="1"],.plates .plate-text.is-on{opacity:1;visibility:visible}
.plates .plate-text sup.fn a{pointer-events:auto}
.plate-text h3{color:var(--ink-on-dark);margin-bottom:var(--s-4)}
.plate-text p{color:var(--ink-on-dark-2);font-size:1rem;max-width:44ch}
.stage .sheet-caption{position:absolute;right:var(--page-x);bottom:var(--s-5);color:var(--ink-on-dark-3);text-align:right;max-width:44ch}
.stage-static{display:grid;gap:var(--s-8)}
.static-block{display:grid;gap:var(--s-6);align-items:center}
.static-block .art svg{width:100%;height:auto}
@media (min-width:720px){.static-block{grid-template-columns:7fr 5fr}}
@media (min-width:900px){
  html.js.motion .stage-wrap{display:block;height:300vh}
  html.js.motion .stage-static{display:none}
}

/* ---------- 12. Warunki (05) — tabs ---------- */
.tabs{position:relative;display:flex;gap:var(--s-6);border-bottom:1px solid var(--hairline);margin-bottom:var(--s-7);overflow-x:auto;scrollbar-width:none;padding-bottom:0}
.tabs::-webkit-scrollbar{display:none}
.tabs [role=tab]{flex:none;background:none;border:0;padding:14px 0;font:500 14px/1 var(--font-text);color:var(--ink-2);cursor:pointer;white-space:nowrap;scroll-snap-align:start;transition:color var(--dur-fast)}
.tabs [role=tab]:hover,.tabs [role=tab][aria-selected=true]{color:var(--ink)}
.tab-ind{position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--champagne-ui);transition:transform 200ms var(--ease-nav),width 200ms var(--ease-nav)}
.panes{position:relative}
.pane{display:grid;gap:var(--s-6) var(--col-gap)}
html.js .pane:not(.is-active){display:none}
html:not(.js) .pane+.pane{margin-top:var(--s-9)}
.pane-text{max-width:44ch}
.pane-head{color:var(--ink-3);margin-bottom:var(--s-4)}
.pane-text h3{margin-bottom:var(--s-4)}
.pane-text p{color:var(--ink-2)}
.pane-text .readout-line{margin-top:var(--s-5);color:var(--ink-3)}
.instrument{min-width:0;min-height:280px;position:relative;color:var(--ink)}
.instrument svg{display:block;width:100%;height:auto}
@media (min-width:900px){.pane{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}}
@media (max-width:899px){
  .tabs{border-bottom:0;gap:var(--s-2);scroll-snap-type:x mandatory;margin-left:calc(-1 * var(--page-x));margin-right:calc(-1 * var(--page-x));padding:0 var(--page-x) var(--s-2)}
  .tabs [role=tab]{border:1px solid var(--hairline-strong);border-radius:var(--r-1);padding:10px 14px}
  .tabs [role=tab][aria-selected=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .tab-ind{display:none}
}

/* ---------- 13. Praktyka (06) — timeline + specimen ---------- */
.praktyka-grid{row-gap:var(--s-9)}
.timeline{grid-column:1 / span 4;list-style:none;position:relative;padding-left:56px}
.timeline::before,.timeline::after{content:"";position:absolute;left:24px;top:.5em;bottom:0;width:1px;background:var(--hairline-strong)}
.timeline::after{background:var(--champagne-ui);transform:scaleY(var(--tl,0));transform-origin:top}
html:not(.js) .timeline::after{transform:none}
.timeline.is-drawn::after{transform:scaleY(1);transition:transform 1.2s var(--ease-draw)}
.tl-node{position:relative;padding-bottom:var(--s-7)}
.tl-node:last-child{padding-bottom:0}
.tl-dot{position:absolute;left:-35.5px;top:.55em;width:8px;height:8px;border-radius:4px;background:var(--hairline-strong);transition:background-color 300ms}
.tl-node.is-past .tl-dot{background:var(--champagne-ui)}
.tl-year{display:block;font-size:var(--fs-chapter-no);line-height:1;color:var(--champagne-deep);margin-bottom:var(--s-3)}
.tl-node h3{font-size:clamp(1.25rem,1.05rem + .8vw,1.625rem);margin-bottom:var(--s-2)}
.tl-node p{color:var(--ink-2);font-size:var(--fs-small);line-height:1.55}
.praktyka-side{grid-column:6 / -1;display:flex;flex-direction:column;gap:var(--s-8);min-width:0}
.specimen{padding:40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,40%);gap:var(--s-5) var(--s-6);align-items:start}
.sp-title{grid-column:1 / -1;color:var(--ink-3);font-weight:500;letter-spacing:.12em;font-size:var(--fs-eyebrow)}
.specimen-art{grid-column:2;grid-row:2;min-width:0;aspect-ratio:2382 / 1300}
.spec{grid-column:1;grid-row:2;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 var(--s-5);color:var(--ink)}
.spec div{display:grid;grid-template-columns:auto 1fr;gap:var(--s-3);padding:var(--s-2) 0;border-top:1px solid var(--hairline)}
.spec dt{color:var(--ink-3);white-space:nowrap}
.spec dd{margin:0;text-align:right}
.sp-ref{grid-column:1 / -1;color:var(--ink-2);border-top:1px solid var(--hairline);padding-top:var(--s-3)}
.praktyka-text{display:flex;flex-direction:column;gap:var(--s-7)}
.praktyka-text h3{margin-bottom:var(--s-3)}
.praktyka-text p{color:var(--ink-2)}
.records{margin:0}
.records div{display:flex;justify-content:space-between;gap:var(--s-5);padding:var(--s-3) 0;border-top:1px solid var(--hairline);color:var(--ink)}
.records div:last-child{border-bottom:1px solid var(--hairline)}
.records dt{color:var(--ink-3)}
.records dd{margin:0;text-align:right}
@media (max-width:1023px){
  .timeline{grid-column:1 / span 5}
  .praktyka-side{grid-column:6 / -1}
  .specimen{grid-template-columns:1fr;padding:var(--s-6)}
  .specimen-art{grid-column:1;grid-row:2;max-width:260px}
  .spec{grid-row:3;grid-template-columns:1fr}
}
@media (max-width:899px){
  .praktyka-grid{display:block}
  .timeline{padding-left:48px;margin-bottom:var(--s-9)}
  .timeline::before,.timeline::after{left:16px}
  .praktyka-side{display:flex}
  .specimen{padding:var(--s-5)}
  .spec div{grid-template-columns:1fr auto}
}

/* ---------- 14. Dla kogo (07) ---------- */
.cases{display:flex;flex-direction:column;gap:var(--s-10)}
.case{align-items:center}
.scene{grid-column:1 / span 5;margin:0;min-width:0}
.scene svg{display:block;width:100%;height:auto}
.scene figcaption{margin-top:var(--s-3);color:var(--ink-3);max-width:44ch}
.case-text{grid-column:7 / -1}
.case--mirror .scene{grid-column:8 / -1;grid-row:1}
.case--mirror .case-text{grid-column:1 / span 6;grid-row:1}
.case-text h3{margin-bottom:var(--s-4)}
.case-text p{color:var(--ink-2);max-width:60ch}
.ribbon{display:flex;flex-wrap:wrap;margin-top:var(--s-5);color:var(--ink-3);max-width:none}
.ribbon span+span::before{content:"·";margin:0 var(--s-3);color:var(--hairline-strong)}
.case-text .link-arrow{display:inline-block;margin-top:var(--s-5);font-size:var(--fs-small)}
@media (max-width:899px){
  .case{display:block}
  .scene{margin-bottom:var(--s-6)}
}

/* ---------- 15. Wybór (08) — panel ---------- */
.panel{background:var(--paper-2);max-width:calc(var(--container-panel) + 120px);margin:0 auto;padding:var(--s-8)}
.panel-grid{display:grid;grid-template-columns:1fr;gap:var(--s-8)}
.chk-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);margin-bottom:var(--s-4);flex-wrap:wrap}
.chk-status{color:var(--ink-3);margin:0}
.chk-status #chk-count{color:var(--champagne-deep)}
.checklist{list-style:none}
.chk{display:grid;grid-template-columns:18px 36px minmax(0,1fr);column-gap:var(--s-3);align-items:start;padding:var(--s-5) 0;border-top:1px solid var(--hairline);cursor:pointer;position:relative}
.checklist li:last-child .chk{border-bottom:1px solid var(--hairline)}
.chk input{position:absolute;width:18px;height:18px;margin:0;opacity:0;top:calc(var(--s-5) + 3px);left:0;cursor:pointer}
.chk .box{width:18px;height:18px;border:1px solid var(--ink);border-radius:var(--r-1);background:none;margin-top:3px;position:relative;transition:background-color 160ms,border-color 160ms}
.chk .box::after{content:"";position:absolute;left:5.5px;top:1.5px;width:5px;height:10px;border:solid var(--paper);border-width:0 1.5px 1.5px 0;transform:rotate(45deg) scale(.6);opacity:0;transition:transform 160ms var(--ease-out),opacity 160ms}
.chk input:checked~.box{background:var(--champagne-deep);border-color:var(--champagne-deep)}
.chk input:checked~.box::after{opacity:1;transform:rotate(45deg) scale(1)}
.chk input:focus-visible~.box{outline:2px solid var(--focus);outline-offset:3px;box-shadow:0 0 0 5px var(--focus-halo)}
.chk-no{color:var(--champagne-deep);padding-top:3px}
.chk-body{display:block;min-width:0}
.chk .term{display:block;font-weight:600;color:var(--ink);text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:transparent;transition:text-decoration-color 200ms,color 200ms}
.chk input:checked~.chk-body .term{text-decoration-color:var(--ink-2);color:var(--ink-2)}
.chk .expl{display:block;margin-top:var(--s-2);color:var(--ink-2);font-size:var(--fs-small);line-height:1.55}
.chk .where{display:block;margin-top:var(--s-2);color:var(--ink-3);font-size:var(--fs-eyebrow);letter-spacing:.06em}
.chk-actions{display:flex;align-items:center;gap:var(--s-6);margin-top:var(--s-6);flex-wrap:wrap}
.print-hint{margin-top:var(--s-3);color:var(--ink-3)}
.ds-col{min-width:0}
.ds-plate{position:relative;padding:var(--s-5)}
.ds-title{font-weight:500;letter-spacing:.14em;font-size:var(--fs-eyebrow);color:var(--ink-3);margin-bottom:var(--s-4)}
.ds{width:100%;border-collapse:separate;border-spacing:0;font-family:var(--font-mono);font-size:var(--fs-mono);line-height:1.5;letter-spacing:.02em;text-align:left;color:var(--ink)}
.ds th,.ds td{padding:10px 12px 10px 0;border-top:1px solid var(--hairline);vertical-align:top;font-weight:400}
.ds thead th{font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);border-top:0;padding-top:0}
.ds tbody th{color:var(--ink-2)}
.ds tbody td:nth-child(2){color:var(--ink);white-space:nowrap}
.ds tbody td:last-child{color:var(--ink-3);padding-right:0}
.ds th:nth-child(3),.ds td:nth-child(3){display:none}
@media (min-width:1600px){.ds th:nth-child(3),.ds td:nth-child(3){display:table-cell}}
.ds tbody tr:last-child th,.ds tbody tr:last-child td{border-bottom:1px solid var(--hairline)}
.ds tbody tr.is-on th,.ds tbody tr.is-on td{color:var(--ink)}
.ds-no{display:none}
.roi{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;color:var(--champagne-line)}
.ds-plate .sheet-caption{margin-top:var(--s-4);color:var(--ink-3)}
/* the counter: above the list below 1024, in the grid's first row at 1024–1199, a sticky vertical side-note in a 3rd column from 1200 */
@media (max-width:1023px){.chk-status{order:-1}.checklist-col{margin-top:calc(var(--s-4) - var(--s-8))}}
@media (min-width:1024px){.panel-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start;row-gap:var(--s-4)}.chk-status{grid-column:1;grid-row:1}.checklist-col{grid-column:1;grid-row:2}.ds-col{grid-column:2;grid-row:1 / span 2}}
@media (min-width:1200px){.panel{max-width:min(calc(var(--container-panel) + 204px),calc(100vw - 2 * var(--page-x)))}.panel-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr) 20px;row-gap:var(--s-8)}.chk-status{grid-column:3;grid-row:1;align-self:start;position:sticky;top:calc(var(--nav-h) + 24px);writing-mode:vertical-rl;white-space:nowrap}.checklist-col{grid-column:1;grid-row:1}.ds-col{grid-column:2;grid-row:1}}
@media (max-width:759px){
  .panel{padding:var(--s-5);margin:0 var(--page-x)}
  .ds-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(90deg,var(--obsidian) calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,var(--obsidian) calc(100% - 40px),transparent);padding-right:40px}
  .ds tbody th{min-width:150px}
  .roi{display:none}
  .ds-no{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:var(--s-2);border:1px solid var(--champagne-deep);border-radius:50%;color:var(--champagne-deep);font-size:12px;letter-spacing:0;vertical-align:middle}
}

/* ---------- 16. FAQ (interlude) ---------- */
.faq .chapter-head{margin-bottom:var(--s-8)}
.faq .chapter-head--plain .eyebrow{display:block;margin-bottom:var(--s-4)}
.faq-item{border-top:1px solid var(--hairline)}
.faq-item:last-child{border-bottom:1px solid var(--hairline)}
.faq-item summary{display:grid;grid-template-columns:48px minmax(0,1fr) 24px;column-gap:var(--s-4);align-items:start;padding:var(--ledger-y) 0;cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{content:""}
.q-no{color:var(--champagne-deep);padding-top:.35em}
.q{font-family:var(--font-display);font-variation-settings:"SOFT" 0,"WONK" 0;font-weight:400;font-size:24px;line-height:1.2;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.plus{position:relative;width:24px;height:24px;margin-top:2px;transition:transform 200ms var(--ease-state)}
.plus::before,.plus::after{content:"";position:absolute;background:var(--ink)}
.plus::before{left:0;right:0;top:11.5px;height:1px}
.plus::after{top:0;bottom:0;left:11.5px;width:1px}
.faq-item[open] .plus{transform:rotate(45deg)}
.faq-body{display:grid;grid-template-rows:1fr}
html.js .faq-body{grid-template-rows:0fr;transition:grid-template-rows 320ms var(--ease-nav)}
html.js .faq-item.is-open .faq-body{grid-template-rows:1fr}
.faq-inner{overflow:hidden;min-height:0}
.faq-inner p{position:relative;margin:0 0 var(--s-5) 48px;padding-left:var(--s-5);color:var(--ink-2);max-width:60ch}
.faq-inner p::before{content:"";position:absolute;left:0;top:.45em;width:1px;height:24px;background:var(--champagne-line)}
@media (max-width:899px){
  .q{font-size:20px}
  .faq-item summary{grid-template-columns:40px minmax(0,1fr) 24px}
  .faq-inner p{margin-left:0}
}

/* ---------- 17. CTA ---------- */
.cta{min-height:80svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;overflow:hidden;padding-bottom:calc(var(--section-y) + var(--s-12))}
.horizon{position:absolute;left:0;right:0;top:62%;height:1px;background:var(--champagne);box-shadow:var(--glow-line);opacity:.6;pointer-events:none}
.cta-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--s-6);max-width:var(--container)}
.statement{font-size:clamp(2.75rem,1rem + 5.2vw,6.25rem);max-width:24ch;color:var(--ink-on-dark)}
.statement .line{display:block}
.cta-lead{max-width:48ch;text-align:center}
.cta-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--s-6)}
.cta-figure{position:absolute;right:var(--page-x);bottom:var(--s-7);width:180px;margin:0;display:flex;flex-direction:column;align-items:center;gap:var(--s-3)}
.cta-art{width:100%}
.cta-figure figcaption{color:var(--ink-on-dark-3)}
html.js.motion .statement .line{clip-path:inset(-.15em -.1em 100% -.05em)}
html.js.motion .statement.in .line{clip-path:inset(-.15em -.1em -.25em -.05em);transition:clip-path 700ms var(--ease-out)}
html.js.motion .statement.in .line:nth-child(2){transition-delay:120ms}
@media (max-width:899px){
  .cta{padding-bottom:var(--section-y)}
  .cta-figure{position:static;width:120px;margin-top:var(--s-8)}
  .statement{font-size:clamp(2.75rem,1.6rem + 5vw,4rem)}
}

/* ---------- 18. Footer ---------- */
.site-footer{min-height:0;border-top:1px solid var(--hairline-dark);padding:var(--s-9) 0 var(--s-7)}
.footer-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s-8) var(--col-gap)}
.f-about{grid-column:1 / span 4}
.f-col{grid-column:span 3;min-width:0}
.f-disclaimer{grid-column:8 / span 5}
.f-sources{grid-column:1 / -1}
.f-wordmark{margin-bottom:var(--s-4);position:relative;padding-bottom:var(--s-3)}
.f-wordmark::after{content:"";position:absolute;left:0;bottom:0;width:40px;height:1px;background:var(--champagne)}
.f-tag{font-size:var(--fs-small);color:var(--ink-on-dark-2);max-width:32ch}
.f-meta{margin-top:var(--s-3);color:var(--ink-on-dark-3)}
.f-head{font-weight:500;letter-spacing:.14em;font-size:var(--fs-eyebrow);color:var(--ink-on-dark-3);padding-bottom:var(--s-3);border-bottom:1px solid var(--hairline-dark);margin-bottom:var(--s-4)}
.f-chapters{list-style:none;color:var(--ink-on-dark-2)}
.f-chapters a{display:flex;gap:var(--s-3);padding:5px 0;text-decoration:none;color:var(--ink-on-dark-2);transition:color var(--dur-fast)}
.f-chapters a span{color:var(--ink-on-dark-3);min-width:2em}
.f-chapters a:hover{color:var(--ink-on-dark)}
.f-disclaimer p{font-size:var(--fs-small);color:var(--ink-on-dark-2);line-height:1.6;max-width:none}
.sources{list-style:none;counter-reset:src;columns:3;column-gap:var(--col-gap);color:var(--ink-on-dark-2)}
.sources li{counter-increment:src;position:relative;padding:5px 0 5px 2.6em;break-inside:avoid;scroll-margin-top:calc(var(--nav-h) + 16px)}
.sources li::before{content:counter(src);position:absolute;left:0;top:5px;color:var(--ink-on-dark-3)}
.sources li:target{color:var(--ink-on-dark)}
.sources li:target::before{color:var(--champagne)}
.sources a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--hairline-dark-2);transition:text-decoration-color var(--dur-fast);overflow-wrap:anywhere}
.sources a:hover{text-decoration-color:var(--champagne);color:var(--ink-on-dark)}
.footer-rail{display:flex;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;margin-top:var(--s-9);padding-top:var(--s-5);border-top:1px solid var(--hairline-dark);color:var(--ink-on-dark-3)}
.footer-rail a{text-decoration:none;color:var(--ink-on-dark-3);transition:color var(--dur-fast)}
.footer-rail a:hover{color:var(--ink-on-dark)}
@media (max-width:899px){
  .f-about{grid-column:1 / -1}
  .f-col{grid-column:span 6}
  .f-disclaimer{grid-column:1 / -1}
  .sources{columns:2}
}
@media (max-width:479px){
  .f-col{grid-column:1 / -1}
  .sources{columns:1}
}

/* ---------- 19. Reveal system (gated by html.js) ---------- */
html.js .reveal{opacity:0;transform:translateY(16px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
html.js .reveal.in{opacity:1;transform:none}
html.js .chapter-head .rule.reveal{opacity:1;transform:scaleX(0);transition:transform 900ms var(--ease-draw)}
html.js .chapter-head .rule.reveal.in{transform:scaleX(1)}
html.js .compare tr.reveal{transform:translateY(8px);transition-duration:var(--dur-base)}
html.js .compare tr.reveal.in{transform:none}
html.js .entry.reveal{transform:translateY(20px);transition-duration:520ms}
html.js .entry.reveal.in{transform:none}
html.js .plate.reveal,html.js .panes.reveal,html.js .tabs.reveal{transform:none;transition-duration:480ms}
html.js .stage-wrap,html.js .stage-static{opacity:1}
/* reduced motion: opacity-only, short; no clip-paths, no parallax */
html.js:not(.motion) .reveal{transform:none;transition:opacity 200ms linear}
html.js:not(.motion) .chapter-head .rule.reveal{transform:none;transition:none}
html.js:not(.motion) .gauge-fill,html.js:not(.motion) .bar::after,html.js:not(.motion) .timeline::after,html.js:not(.motion) .faq-body,html.js:not(.motion) .plus,html.js:not(.motion) .stat .unit{transition:none}
html.js:not(.motion) .stat .unit{opacity:1}
html.js:not(.motion) .stat .gauge-fill{transform:scaleX(var(--v,0))}
html.js:not(.motion) .compare .bar::after{transform:scaleX(var(--v,0))}
html.paused *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}

/* ==========================================================================
   art-dark.css — owner: Dark-art
   Styles for the dark-band SVG art: defs-dark (#comb, #mod), hero-module (hm-),
   black-roof (rf-, rf1- rf2- rf3-), specimen-module (sp-), rear-module (rm-).
   Every selector is scoped under a root id / owner hook so nothing leaks into
   the document. Relies on Foundation: tokens, svg .mono, --hero-progress on #hero,
   html.js / html.motion / html.hero-ready, #estetyka-zoom (.zoom), #cta-art, .comb-bg.
   ========================================================================== */

/* ---------- comb colours (symbol #comb reads --comb-a / --comb-b, falls back to currentColor) ---------- */
:root{--comb-a:var(--champagne);--comb-b:rgba(244,241,235,.6)}
.band-paper,.band-paper-2{--comb-a:var(--champagne-line);--comb-b:var(--ink)}

/* ---------- hero module (hm-) ---------- */
/* specular sweep: scroll-driven by --hero-progress (0…1, set on #hero by app.js); static 32 % without JS / reduced motion */
#hm-root .hm-sweep{transform-box:fill-box;transform:translateX(calc(-20% + var(--hero-progress,.32) * 80%))}
#hm-root .hm-dims path{vector-effect:non-scaling-stroke}
#hm-root .hm-lab{font-size:26px;paint-order:stroke;stroke:var(--obsidian);stroke-width:4px;stroke-linejoin:round}
@media (max-width:1199px){#hm-root .hm-lab{font-size:30px}}
@media (max-width:899px){#hm-root .hm-lab{font-size:32px}#hm-root .hm-d30,#hm-root .hm-leader,#hm-root .hm-dot{display:none}}
@media (max-width:719px){#hm-root .hm-lab{font-size:36px}}
@media (max-width:479px){#hm-root .hm-lab{font-size:44px}}
/* load choreography: dimension lines draw 700 ms at +600 ms, labels/ticks arrive after their line */
html.js.motion #hm-root .hm-dl{stroke-dasharray:1;stroke-dashoffset:1}
html.js.motion.hero-ready #hm-root .hm-dl{stroke-dashoffset:0;transition:stroke-dashoffset 700ms var(--ease-draw) 600ms}
html.js.motion #hm-root .hm-lab,html.js.motion #hm-root .hm-tk,html.js.motion #hm-root .hm-dot{opacity:0}
html.js.motion.hero-ready #hm-root .hm-lab,html.js.motion.hero-ready #hm-root .hm-tk,html.js.motion.hero-ready #hm-root .hm-dot{opacity:1;transition:opacity 300ms var(--ease-out) 1240ms}

/* ---------- estetyka scene (rf-) ---------- */
/* scene.js sets --zoom-x/--zoom-y (from the target module geometry) and transform: scale() on #estetyka-zoom;
   the sweep group gets an inline translateX in the last third. Defaults below = the resting state. */
#estetyka-zoom{transform-origin:var(--zoom-x,30%) var(--zoom-y,55%);transform:scale(1)}
#estetyka-stage .plate-text{transition:none}
#rf-root .mono{font-size:17px}
@media (min-width:1600px){#rf-root .mono{font-size:15px}}
@media (max-width:1199px){#rf-root .mono{font-size:20px}}
/* static variants (< 900 px or reduced motion): 7fr column ≥ 720, full width below */
#rf1-root .mono,#rf3-root .mono{font-size:36px}
#rf2-root .mono{font-size:16px}
@media (max-width:1199px){#rf1-root .mono,#rf3-root .mono{font-size:48px}#rf2-root .mono{font-size:22px}}
@media (max-width:899px){#rf1-root .mono,#rf3-root .mono{font-size:60px}#rf2-root .mono{font-size:27px}}
@media (max-width:719px){#rf1-root .rf1-inset,#rf3-root .rf3-inset,#rf2-root .rf2-inset,#rf1-root .rf1-dims,#rf3-root .rf3-dims,#rf2-root .rf2-dims{display:none}}

/* ---------- specimen sheet (sp-) ---------- */
#sp-root .mono{font-size:72px}

/* ---------- cta rear module (rm-) ---------- */
/* comb draw-in: dasharray/dashoffset are inherited, so setting them on the <use> drives every pathLength="1" part of #comb */
html.js.motion #cta-art{opacity:0;transition:opacity 700ms var(--ease-out)}
html.js.motion #cta-art.is-in{opacity:1}
html.js.motion #cta-art .rm-comb{stroke-dasharray:1;stroke-dashoffset:1}
html.js.motion #cta-art.is-in .rm-comb{stroke-dashoffset:0;transition:stroke-dashoffset 1.4s var(--ease-draw) 260ms}

/* ---------- reduced motion / paused ---------- */
@media (prefers-reduced-motion:reduce){
  #hm-root .hm-sweep{transform:translateX(5.6%)}
  #hm-root .hm-dl{stroke-dasharray:none;transition:none}
  #estetyka-zoom{transform:none}
  #cta-art,#cta-art .rm-comb{opacity:1;stroke-dasharray:none;transition:none}
}

/* ==========================================================================
   backcontact.pl — art-paper.css (Paper-art)
   Ledger glyphs (defs-paper.svg), the cell comparator (cell-comparator.svg + comparator.js)
   and the three dla-kogo drafting scenes (scene-dom / scene-firma / scene-bipv).
   Every rule is scoped to its own wrapper or SVG root id; colours only via tokens.
   ========================================================================== */

/* ---------- 1. Ledger glyphs: the one accent element (.k) draws in per instance ----------
   The symbol's .k carries inline `animation-name:var(--k-anim,none)` / `animation-play-state:var(--k-play,paused)`
   (inline var() is re-resolved inside <use> clones; stylesheet rules are not), so the entry only sets the vars. */
@keyframes pp-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.glyph{--k-anim:none;--k-play:paused;color:var(--ink)}
html.js.motion .entry .glyph{--k-anim:pp-draw}
html.js.motion .entry.in .glyph,html.js.motion .entry.is-in .glyph{--k-play:running}

/* ---------- 2. Comparator ---------- */
#cmp{display:block;width:100%;height:100%;color:var(--ink)}
#cmp text{user-select:none;-webkit-user-select:none}
#cmp .cmp-outline{fill:none;stroke:var(--hairline-strong);stroke-width:1;vector-effect:non-scaling-stroke;shape-rendering:crispEdges}
#cmp .cmp-sqedge{fill:none;stroke:var(--hairline-strong);stroke-width:1;vector-effect:non-scaling-stroke}
#cmp .cmp-ray{fill:none;stroke:var(--champagne-line);stroke-width:1;stroke-dasharray:4 6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
#cmp .cmp-lead{fill:none;stroke:var(--hairline-strong);stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke}
#cmp .cmp-dot{fill:var(--paper-3);stroke:var(--ink-3);stroke-width:1;vector-effect:non-scaling-stroke}
#cmp .cmp-no{fill:var(--champagne-deep)}
#cmp .cmp-txt{fill:var(--ink-2)}
#cmp .cmp-note .cmp-txt{fill:var(--ink-3)}
#cmp .cmp-divider{stroke:var(--champagne-line);stroke-width:1;vector-effect:non-scaling-stroke;shape-rendering:crispEdges}
#cmp .cmp-current{fill:none;stroke:var(--champagne-line);stroke-width:1.25;stroke-dasharray:4 6;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:0;transition:opacity 260ms var(--ease-state);animation:cmp-flow 1.6s linear infinite;animation-play-state:paused}
@keyframes cmp-flow{from{stroke-dashoffset:0}to{stroke-dashoffset:-40}}
/* modes: is-section (default) · is-front · is-current — the inactive band dims, its labels stay readable */
#cmp .cmp-sec>:not(.cmp-current),#cmp .cmp-fv>*,#cmp-shared .cmp-lbl,#cmp-shared .cmp-dot{transition:opacity 320ms var(--ease-state)}
.comparator-stage:not(.is-front) #cmp .cmp-fv>:not(.cmp-lbl):not(.cmp-dot){opacity:.32}
.comparator-stage.is-front #cmp .cmp-sec>:not(.cmp-current),.comparator-stage.is-front #cmp-shared .cmp-lbl,.comparator-stage.is-front #cmp-shared .cmp-dot{opacity:.32}
.comparator-stage.is-current #cmp .cmp-current{opacity:1}
.comparator-stage.is-current.is-visible #cmp .cmp-current{animation-play-state:running}
html:not(.motion) #cmp .cmp-current{animation:none}
/* the wipe: --mix is BC-ness (1 = back contact), the divider sits at (1 − mix); the SVG line #cmp-divider is the
   wipe edge, so the grip's own ::before line is dropped to avoid a doubled hairline */
.comparator-stage{--mix:.5}
.cmp-grip{left:calc((1 - var(--mix,.5)) * 100%)}
.cmp-grip::before{display:none}
.comparator-stage.is-dragging{cursor:ew-resize}
.comparator-stage.is-dragging .cmp-grip{transition:none}
/* labels: full text ≥ 900 px, numbers + leaders below (the legend under the plate carries the eight texts);
   the stage scales with the plate, so the 13-unit mono grows to 14 below 1200 px to stay near the 12 px floor */
@media (max-width:1199px){
  #cmp .cmp-txt,#cmp .cmp-note{display:none}
  #cmp .cmp-no{font-size:20px}
}
/* < 720 px — morph instead of wipe: comparator.js narrows the viewBox to one cell (4/3); BC fades in over FC,
   the front fingers sink toward the rear, the comb comes up with --mix */
@media (max-width:719px){
  #cmp-bc{clip-path:none;opacity:var(--mix,.5)}
  #cmp .cmp-comb{opacity:var(--mix,.5)}
  #cmp .cmp-fingers,#cmp .cmp-fshadow{transform:scaleY(calc(1 - var(--mix,.5)));transform-box:view-box;transform-origin:0 132px}
  #cmp .cmp-divider,#cmp .cmp-lbl,#cmp .cmp-dot,#cmp .cmp-min{display:none}
  .comparator-stage.is-front #cmp .cmp-sec>*{opacity:0}
}

/* ---------- 3. Dla-kogo drafting scenes ---------- */
.scene svg{color:var(--ink)}
.scene .sc-ln{fill:none;stroke:var(--ink);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.scene .sc-hair{fill:none;stroke:var(--hairline-strong);stroke-width:1;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.scene .sc-dim{fill:none;stroke:var(--hairline-strong);stroke-width:1;stroke-linecap:round;vector-effect:non-scaling-stroke;shape-rendering:crispEdges}
.scene .sc-mass{fill:var(--ink);fill-opacity:.07;stroke:none}
.scene .sc-mass-2{fill:var(--ink);fill-opacity:.1;stroke:none}
.scene .sc-shadow{fill:var(--ink);fill-opacity:.12;stroke:none}
.scene .sc-acc{fill:none;stroke:var(--champagne-line);stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.scene .sc-acc-fill{fill:var(--ink);fill-opacity:.1;stroke:none}
.scene .sc-lbl{fill:var(--ink-3)}
.scene .sc-lbl-2{fill:var(--ink-2)}
/* the 600-unit drawing sits in cols 1–5 (≈ 490 px at 1440) — the mono is sized per rendered width so it never drops under 12 px */
.scene svg .mono{font-size:16px}
@media (max-width:1199px){.scene svg .mono{font-size:22px}}
@media (max-width:899px){.scene svg .mono{font-size:13px}}
@media (max-width:599px){.scene svg .mono{font-size:18px}}
@media (max-width:419px){.scene svg .mono{font-size:24px}}
/* reveal: outlines draw first (900 ms), dimension strings and captions follow */
html.js.motion .scene .sc-draw{stroke-dasharray:1;stroke-dashoffset:1}
html.js.motion .scene.in .sc-draw,html.js.motion .scene.is-in .sc-draw{stroke-dashoffset:0;transition:stroke-dashoffset 900ms var(--ease-draw)}
html.js.motion .scene .sc-dims{opacity:0}
html.js.motion .scene.in .sc-dims,html.js.motion .scene.is-in .sc-dims{opacity:1;transition:opacity 400ms var(--ease-out) 900ms}
/* scene 1 — the sun travels its 21 VI arc once (offset-path) and rests at noon; static at noon otherwise */
#sc1 .sc1-sun{transform:translate(262px,78px)}
@supports (offset-path:path("M0 0")){
  #sc1 .sc1-sun{transform:none;offset-path:path("M52 214A230 230 0 0 1 472 214");offset-distance:50%;offset-rotate:0deg}
  html.js.motion .scene.in #sc1 .sc1-sun,html.js.motion .scene.is-in #sc1 .sc1-sun{animation:sc1-sun 1.6s var(--ease-state) 300ms both}
}
@keyframes sc1-sun{from{offset-distance:0%}to{offset-distance:50%}}

/* ---------- 4. Reduced motion / print ---------- */
@media (prefers-reduced-motion:reduce){
  .cmp-grip{transition:none}
  #cmp .cmp-current{animation:none}
}
@media print{
  #cmp .cmp-current{display:none}
}

/* ==========================================================================
   backcontact.pl — instruments.css (Instruments)
   Warunki tab rail + panes, the five instruments (shading simulator, temperature slope, low-light curve,
   degradation projection, mechanical section), the slope chart beside the comparison table, chart probes and
   HTML tooltips, sliders, power bars, and the checklist ROI overlay. Everything scoped under .pane / .instrument /
   .chart-slot / #ds-roi / .in-*. No box-shadow, radius ≤ 4 px, the accent only as lines, numerals and 6 px bars.
   ========================================================================== */

/* ---------- 1. Tab rail + panes ---------- */
.tabs{scroll-snap-type:x proximity;scroll-padding-inline:var(--page-x)}
.tabs [role=tab]{position:relative}
.tabs [role=tab]:focus-visible{outline-offset:-3px}
.panes{transition:min-height 200ms var(--ease-nav)}
/* hidden panes are laid out invisibly for one frame so instruments measure their real width and the rail locks to the tallest */
html.js .panes.is-measuring .pane{display:grid!important;position:absolute;left:0;top:0;width:100%;visibility:hidden;pointer-events:none}
html.js.motion .pane.is-leaving{opacity:0;transition:opacity 120ms var(--ease-state)}
html.js.motion .pane.is-entering{animation:in-pane 260ms var(--ease-out) both}
@keyframes in-pane{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (max-width:899px){
  .tabs{scroll-snap-type:x mandatory}
  .tabs [role=tab]{scroll-snap-align:center}
}

/* ---------- 2. Charts (generated at pixel size) ---------- */
.in-chart{position:relative;color:var(--ink)}
.in-wrap{position:relative}
.in-chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart-slot .in-chart svg{height:auto}
.in-chart text{user-select:none;-webkit-user-select:none}
.in-axis{fill:none;stroke:var(--hairline-strong);stroke-width:1;vector-effect:non-scaling-stroke}
.in-tick-l{fill:var(--ink-3)}
.in-lbl{fill:var(--ink)}
.in-lbl-2{fill:var(--ink-2)}
.in-lbl-3{fill:var(--ink-3)}
.in-rule{fill:none;stroke:var(--hairline-strong);stroke-width:1;stroke-dasharray:2 4;vector-effect:non-scaling-stroke}
.in-probe-rule{fill:none;stroke:var(--hairline-strong);stroke-width:1;vector-effect:non-scaling-stroke}
.in-lead{fill:none;stroke:var(--hairline-strong);stroke-width:1;vector-effect:non-scaling-stroke}
.in-line{fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.in-line.in-s-bc{stroke:var(--champagne-ui);stroke-width:1.5}
.in-line.in-s-40{stroke:var(--ink);stroke-opacity:.4}
.in-line.in-s-50{stroke:var(--ink);stroke-opacity:.5}
.in-line.in-s-60{stroke:var(--ink);stroke-opacity:.6}
.in-line.in-s-80{stroke:var(--ink);stroke-opacity:.8}
.in-endlbl.in-s-bc .in-lbl{fill:var(--ink)}
.in-endlbl .in-lbl-2{fill:var(--ink-2)}
/* probes: r 3 dot + 8 px crosshair; focusable, tooltip from instruments.js */
.in-probe{cursor:default;outline-offset:6px}
.in-probe .in-cross{fill:none;stroke:var(--ink-3);stroke-width:1;vector-effect:non-scaling-stroke}
.in-probe .in-dot{fill:var(--paper-3);stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke}
.in-probe.in-s-40 .in-dot{stroke-opacity:.5}
.in-probe.in-s-50 .in-dot{stroke-opacity:.6}
.in-probe.in-s-60 .in-dot{stroke-opacity:.7}
.in-probe.in-s-bc .in-dot{fill:var(--champagne-ui);stroke:var(--champagne-ui)}
.in-probe.in-s-bc .in-cross{stroke:var(--champagne-ui)}
.in-probe:focus-visible{outline:2px solid var(--focus);box-shadow:none;border-radius:0}
/* sun pictogram (low-light chart) */
.in-sun-disc{fill:none;stroke:var(--ink-2);stroke-width:1;vector-effect:non-scaling-stroke}
.in-ray{fill:none;stroke:var(--champagne-line);stroke-width:1;stroke-linecap:round;vector-effect:non-scaling-stroke}
/* draw-in: lines once (pathLength 1), labels and probes after their line; nothing under reduced motion */
html.js.motion .in-chart:not(.is-drawn) .in-draw{stroke-dasharray:1;stroke-dashoffset:1}
html.js.motion .in-chart.is-drawn .in-draw{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset var(--dur-draw) var(--ease-draw)}
html.js.motion .in-chart:not(.is-drawn) .in-late{opacity:0}
html.js.motion .in-chart.is-drawn .in-late{opacity:1;transition:opacity 400ms var(--ease-out) 1s}
/* tooltip: mono 13 px on a paper-3 plate with a 1 px hairline, positioned from the probe's rect */
.in-tip{position:absolute;z-index:3;left:0;top:0;transform:translate(-50%,calc(-100% - 10px));padding:3px 8px;background:var(--paper-3);border:1px solid var(--hairline);border-radius:var(--r-1);color:var(--ink);white-space:nowrap;pointer-events:none}
.in-tip.is-below{transform:translate(-50%,12px)}
.in-legend{margin-top:var(--s-2);color:var(--ink-3)}
/* sliders: native range restyled by Foundation (1 px --hairline-strong track, 14 px square --champagne-line thumb) */
.in-slider{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s-4);margin-top:var(--s-5);color:var(--ink-3)}
.in-slider input{--rule-2:var(--hairline-strong);--accent:var(--champagne-ui);min-width:0}
.in-slider input:focus-visible{outline:none;box-shadow:none}
.in-slider input:focus-visible::-webkit-slider-thumb{outline:2px solid var(--focus);outline-offset:3px;box-shadow:0 0 0 5px var(--focus-halo)}
.in-slider input:focus-visible::-moz-range-thumb{outline:2px solid var(--focus);outline-offset:3px;box-shadow:0 0 0 5px var(--focus-halo)}
.in-slider .in-slider-o{min-width:6.5ch;text-align:right;color:var(--ink)}
.in-readout{margin-top:var(--s-3);color:var(--ink-2)}
.in-note{margin-top:var(--s-2);color:var(--ink-3);max-width:62ch}
@media (max-width:479px){
  .in-slider{grid-template-columns:1fr auto;row-gap:var(--s-2)}
  .in-slider input{grid-column:1 / -1;grid-row:2}
}

/* ---------- 3. Shading simulator ---------- */
.in-sim{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-5) var(--s-6);align-items:start}
.in-sim.is-stack{grid-template-columns:1fr}
.in-sim-fig{min-width:0}
.instrument .in-sim-svg{display:block;width:auto;max-width:100%;height:auto;touch-action:none;overflow:visible;color:var(--ink)}
.in-sim.is-stack .in-sim-svg{margin:0 auto}
.in-frame{fill:none;stroke:var(--hairline-strong);stroke-width:1;vector-effect:non-scaling-stroke}
.in-cell{fill:var(--ink);fill-opacity:.08}
.in-cell.s1{fill-opacity:.32}
.in-cell.s2{fill-opacity:.52}
.in-cell.s3{fill-opacity:.72}
.in-strline{fill:none;stroke:var(--hairline-strong);stroke-width:1;vector-effect:non-scaling-stroke}
.in-hatch{stroke:var(--negative);stroke-width:1;stroke-opacity:.45}
.in-bypass{opacity:0;transition:opacity 120ms linear;pointer-events:none}
.in-bypass.is-on{opacity:1}
.in-diode{fill:var(--ink-3);transition:fill 120ms linear}
.in-diode.is-on{fill:var(--negative)}
.in-shade-g{cursor:grab;outline-offset:4px}
.in-sim.is-dragging .in-shade-g{cursor:grabbing}
.in-shade{fill:var(--ink);fill-opacity:.55;stroke:var(--negative);stroke-opacity:.6;stroke-width:1;stroke-linejoin:miter;vector-effect:non-scaling-stroke}
.in-shade-cap{fill:none;stroke:var(--negative);stroke-opacity:.35;stroke-width:1;vector-effect:non-scaling-stroke}
.in-shade-g:focus-visible{outline:2px solid var(--focus);box-shadow:none;border-radius:0}
.in-sim-side{min-width:0;display:flex;flex-direction:column;gap:var(--s-4)}
.in-sim-ctl{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.in-sim-ctl-l{color:var(--ink-3)}
.in-seg{display:inline-flex;border:1px solid var(--hairline-strong);border-radius:var(--r-1);overflow:hidden}
.in-seg [role=radio]{background:none;border:0;padding:7px 12px;font:500 13px/1 var(--font-text);color:var(--ink-2);cursor:pointer;transition:background-color var(--dur-fast),color var(--dur-fast)}
.in-seg [role=radio]+[role=radio]{border-left:1px solid var(--hairline-strong)}
.in-seg [role=radio][aria-checked=true]{background:var(--ink);color:var(--paper)}
.in-seg [role=radio]:focus-visible{outline-offset:-3px;box-shadow:none}
/* power bars: 6 px, track --hairline; BC --champagne-line, klasyczny --ink 50 %; width 120 ms */
.in-bars-head{color:var(--ink-3);margin-top:var(--s-2)}
.in-bars{display:grid;gap:var(--s-3);margin-top:calc(-1 * var(--s-2))}
.in-sim-side>.in-bars-head+.in-bars{margin-top:0}
.in-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s-1) var(--s-3)}
.in-bar-l{grid-column:1 / -1;color:var(--ink-2)}
.in-bar-track{display:block;position:relative;height:6px;background:var(--hairline)}
.in-bar-fill{position:absolute;left:0;top:0;bottom:0;width:100%;transition:width 120ms linear}
.in-bar-bc{background:var(--champagne-ui)}
.in-bar-cl{background:var(--ink);opacity:.5}
.in-bar-v{min-width:7.5ch;text-align:right;color:var(--ink);white-space:nowrap}
.in-sim .in-readout{margin-top:0}
.in-sim .in-note{margin-top:0}
@media (prefers-reduced-motion:reduce){.in-bar-fill,.in-bypass,.in-diode{transition:none}}

/* ---------- 4. Mechanical section (inline SVG #in-mech in index.html) ---------- */
#in-mech{display:block;width:100%;height:auto;color:var(--ink);overflow:visible}
#in-mech .in-m-hair{fill:none;stroke:var(--hairline-strong);stroke-width:1;vector-effect:non-scaling-stroke}
#in-mech .in-m-ink{fill:none;stroke:var(--ink);stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke}
#in-mech .in-m-mass{fill:var(--ink);fill-opacity:.08;stroke:none}
#in-mech .in-m-mass-2{fill:var(--ink);fill-opacity:.2;stroke:none}
#in-mech .in-m-cells{fill:var(--ink);fill-opacity:.55;stroke:none}
#in-mech .in-m-load{fill:none;stroke:var(--ink-2);stroke-width:1;vector-effect:non-scaling-stroke}
#in-mech .in-m-arrow{fill:var(--ink-2);stroke:none}
#in-mech .in-m-defl{fill:none;stroke:var(--champagne-ui);stroke-width:1.25;stroke-dasharray:3 4;stroke-linecap:round;vector-effect:non-scaling-stroke}
#in-mech .in-m-dim{fill:none;stroke:var(--hairline-strong);stroke-width:1;vector-effect:non-scaling-stroke}
#in-mech .in-lbl{fill:var(--ink)}
#in-mech .in-lbl-2{fill:var(--ink-2)}
#in-mech .in-lbl-3{fill:var(--ink-3)}
#in-mech .in-m-halo{paint-order:stroke;stroke:var(--paper);stroke-width:4px;stroke-linejoin:round}
html.js.motion .instrument:not(.is-drawn) #in-mech .in-m-draw{stroke-dasharray:1;stroke-dashoffset:1}
html.js.motion .instrument.is-drawn #in-mech .in-m-draw{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset var(--dur-draw) var(--ease-draw)}
html.js.motion .instrument:not(.is-drawn) #in-mech .in-m-late{opacity:0}
html.js.motion .instrument.is-drawn #in-mech .in-m-late{opacity:1;transition:opacity 400ms var(--ease-out) 900ms}
/* the drawing scales with its column; the 13-unit mono grows below 720 px so labels never drop under 12 device px */
@media (min-width:900px) and (max-width:1199px){#in-mech .mono{font-size:17px}}
@media (max-width:719px){#in-mech .mono{font-size:20px}}
@media (max-width:479px){#in-mech .mono{font-size:24px}}

/* ---------- 5. Checklist ROI overlay (#ds-roi) ---------- */
#ds-roi{overflow:visible}
#ds-roi .in-roi{opacity:.5;transition:opacity 200ms var(--ease-state)}
#ds-roi .in-roi.is-on{opacity:1}
#ds-roi.has-hover .in-roi{opacity:.4}
#ds-roi.has-hover .in-roi.is-hover{opacity:1}
#ds-roi .in-box{fill:none;stroke:var(--champagne-ui);stroke-width:1;vector-effect:non-scaling-stroke}
#ds-roi .in-ticks{fill:none;stroke:var(--champagne-ui);stroke-width:2;vector-effect:non-scaling-stroke}
#ds-roi .in-lead{fill:none;stroke:var(--champagne-ui);stroke-width:1;vector-effect:non-scaling-stroke}
#ds-roi .in-lead-dot{fill:var(--champagne-ui);stroke:none}
html.js.motion #ds-roi:not(.is-drawn) .in-box{stroke-dasharray:1;stroke-dashoffset:1}
html.js.motion #ds-roi.is-drawn .in-box{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 400ms var(--ease-draw) calc(var(--i,0) * 120ms)}
html.js.motion #ds-roi:not(.is-drawn) .in-ticks,html.js.motion #ds-roi:not(.is-drawn) .in-lead,html.js.motion #ds-roi:not(.is-drawn) .in-lead-dot{opacity:0}
html.js.motion #ds-roi.is-drawn .in-ticks,html.js.motion #ds-roi.is-drawn .in-lead,html.js.motion #ds-roi.is-drawn .in-lead-dot{opacity:1;transition:opacity 300ms var(--ease-out) calc(var(--i,0) * 120ms + 400ms)}

/* ---------- 6. Reduced motion / print ---------- */
html.js:not(.motion) .in-chart .in-draw,html.js:not(.motion) #in-mech .in-m-draw,html.js:not(.motion) #ds-roi .in-box{stroke-dasharray:none;transition:none}
html.js:not(.motion) .in-chart .in-late,html.js:not(.motion) #in-mech .in-m-late,html.js:not(.motion) #ds-roi .in-ticks,html.js:not(.motion) #ds-roi .in-lead,html.js:not(.motion) #ds-roi .in-lead-dot{opacity:1;transition:none}
html.js:not(.motion) .pane.is-entering{animation:none}
@media print{
  .in-tip,.in-slider,.in-seg{display:none}
}