/* Skórka w stylu C: sztych i wycinanka. Tusz na kremowym papierze, kreskowanie zamiast gradientów,
   nierówne brzegi kartek z twardym cieniem. Ładowana po mechanisms.css i page.css, nadpisuje ich robocze gradienty. */
:root {
  --ink: #2a211a; --ink-soft: rgb(42 33 26 / .55); --ink-faint: rgb(42 33 26 / .18);
  --paper: #efe4cb; --paper-light: #f7efdd; --paper-dark: #e1d2ad;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .16  0 0 0 0 .13  0 0 0 0 .10  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --hatch: repeating-linear-gradient(135deg, rgb(42 33 26 / .22) 0 1px, transparent 1px 5px);
  --hatch-x: repeating-linear-gradient(45deg, rgb(42 33 26 / .16) 0 1px, transparent 1px 5px);
  --woodgrain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='60' viewBox='0 0 120 60'><g fill='none' stroke='%232a211a' stroke-width='1' stroke-opacity='.35'><path d='M0 6 q30 4 60 0 t60 0'/><path d='M0 18 q30 -5 60 0 t60 0'/><path d='M0 31 q30 4 60 0 t60 0'/><path d='M0 44 q30 -4 60 0 t60 0'/><path d='M0 56 q30 3 60 0 t60 0'/></g><g fill='none' stroke='%232a211a' stroke-width='.6' stroke-opacity='.25'><path d='M0 12 q30 2 60 0 t60 0'/><path d='M0 25 q30 -2 60 0 t60 0'/><path d='M0 38 q30 2 60 0 t60 0'/><path d='M0 50 q30 -2 60 0 t60 0'/></g></svg>");
  --chain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='28' viewBox='0 0 14 28'><ellipse cx='7' cy='8' rx='4.5' ry='7.5' fill='none' stroke='%232a211a' stroke-width='2.2'/><ellipse cx='7' cy='22' rx='2.2' ry='7.5' fill='%232a211a' stroke='%232a211a' stroke-width='1.5'/></svg>");
}

/* ---------- niebo i chmury ---------- */
body { background: linear-gradient(180deg, #e6edf3 0%, #c3d0dc 100%) fixed; }
html.has-cloud body { background: linear-gradient(180deg, #b7d9ee 0%, #7fb3d9 55%, #6aa3d2 100%) fixed; }   /* niebo wg wzorca: mocniejszy błękit */
/* niebo z faktury malowanego papieru (kafelek bezszwowy z ryciny, 2x2 odbicie) + lekkie przyciemnienie ku dołowi; chmury rozmyte wyłączone */
html.has-sky body { background-color: #5e9fd4; background-image: linear-gradient(180deg, rgb(255 255 255 / .10), rgb(0 0 0 / 0) 30%, rgb(0 0 0 / .10)), var(--eng-sky); background-size: 100% 100%, 1100px auto; background-repeat: no-repeat, repeat; background-attachment: fixed, scroll; background-position: 0 0, center top; }
html.has-sky:not(.has-cloud) body::before, html.has-sky:not(.has-cloud) body::after { display: none; }
body::before, body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; border-radius: 50%; background: rgb(255 255 255 / .6); filter: blur(26px); }
body::before { width: 46vw; height: 16vw; left: -8vw; top: 12vh; }
body::after { width: 52vw; height: 18vw; right: -12vw; bottom: 8vh; }

/* ---------- papier i wycinanki ---------- */
.paper, .sheet-inner, .cab-doc, .lobby-card, .sb-card, .peg-card, .bust-card, .flap-ticket, .vault-tray, .slot-tray, .sign, .tape {
  background-color: var(--paper); background-image: var(--grain); background-blend-mode: multiply;
}
/* Wycinanka: kartka przycięta nierównym wielokątem; cień rysuje opakowanie (sekcja albo scena) jako kopię kształtu pod spodem. */
:root { --tear: polygon(0 1.2%, 2.5% 0, 97.5% .5%, 100% 1.8%, 99.6% 98.2%, 97% 100%, 2% 99.3%, 0 97.6%); }
.sheet-inner { clip-path: var(--tear); }
.sheet, .sheet.stage > .stage-sticky { isolation: isolate; }
.sheet:not(.stage)::before, .sheet.stage > .stage-sticky::before { content: ""; position: absolute; inset: 0; transform: translate(10px, 12px); background: rgb(42 33 26 / .22); clip-path: var(--tear); z-index: -1; pointer-events: none; }
.sheet-inner::after { content: ""; position: absolute; inset: 10px; border: 1px solid var(--ink-faint); box-shadow: inset 0 0 0 3px transparent, inset 0 0 0 4px var(--ink-faint); pointer-events: none; }
/* karty wewnątrz mechanizmów: proste brzegi, twardy cień */
.cut, .cab-doc, .lobby-card, .sb-card, .peg-card, .bust-card, .vault-tray { box-shadow: 7px 8px 0 rgb(42 33 26 / .2); border-radius: 0; border: 1px solid var(--ink-faint); }
.cut::after { inset: 8px; border: 1px solid var(--ink-faint); }

/* ---------- nagłówki sekcji: kartusz z ornamentem ---------- */
.sheet h2 { font: 700 20px var(--font-sc); letter-spacing: .14em; color: var(--ink); justify-content: center; text-align: center; }
.sheet h2::before, .sheet h2::after { content: ""; flex: 1; border-top: 1px solid var(--ink-soft); border-bottom: 1px solid var(--ink-soft); height: 3px; }
.sheet h2 span:first-child::before { content: "❧ "; color: var(--gold); } .sheet h2 span:first-child::after { content: " ❧"; color: var(--gold); }
.sheet h2 small { flex: 0 0 100%; order: 10; display: block; text-align: center; margin-top: 6px; letter-spacing: .22em; }
.sheet h2 { flex-wrap: wrap; }

/* ---------- nagłówek: litery, portret, przełączniki ---------- */
.banner { font-size: 20px; color: var(--ink-soft); }
.masthead mech-letters .letter { background-color: var(--paper-light); background-image: var(--grain); background-blend-mode: multiply; border: 2px solid var(--ink); box-shadow: 5px 6px 0 rgb(42 33 26 / .28); color: var(--ink); text-shadow: 1px 1px 0 var(--paper-dark); }
.masthead mech-letters .string { background: var(--ink); opacity: .85; }
.masthead mech-letters .letters-sub { color: var(--ink-soft); }
.portrait { transform: rotate(2.5deg); }
.portrait .clip { stroke: var(--ink); top: -36px; left: 30px; }
.portrait-frame { width: 250px; height: 300px; padding: 0; border-radius: 50% / 46%; border: 8px double var(--gold); box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--ink-faint), 9px 11px 0 rgb(42 33 26 / .22); background: #fff; overflow: hidden; display: grid; place-items: start center; }
.portrait-frame head-widget { --head-size: 300px; width: 300px !important; margin-top: -20px; -webkit-mask-image: none; mask-image: none; }
.portrait figcaption { color: var(--ink-soft); }
.controls { gap: 30px; }
.scroll-toggle { background-color: var(--paper-light); background-image: var(--grain); border: 1px solid var(--ink); box-shadow: 3px 3px 0 rgb(42 33 26 / .22); }
.scroll-toggle[aria-pressed="true"] { background: var(--ink); color: var(--paper-light); }
.mech-biglever .bl-plate { background: var(--paper-light) var(--grain); border: 1px solid var(--ink); box-shadow: 2px 2px 0 rgb(42 33 26 / .3); color: var(--ink); }
.mech-biglever .bl-arm { background: var(--ink); } .mech-biglever .bl-knob { background: radial-gradient(circle at 35% 30%, #c9533f, #a4382a 60%, #5e1d14); border: 2px solid var(--ink); }

/* ---------- szafa aktowa: drewno sztychem ---------- */
.mech-cabinet .cabinet { background-color: var(--paper-dark); background-image: var(--woodgrain), var(--grain); background-blend-mode: multiply, multiply; border: 3px solid var(--ink); border-radius: 0; box-shadow: 10px 12px 0 rgb(42 33 26 / .22); padding-top: 26px; position: relative; }
.mech-cabinet .cabinet::before { content: ""; position: absolute; left: -8px; right: -8px; top: -10px; height: 14px; background: var(--paper-dark) var(--grain); border: 3px solid var(--ink); }   /* gzyms */
.mech-cabinet .cabinet::after { content: ""; position: absolute; left: 10px; right: 10px; top: 8px; height: 4px; background: repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 12px); opacity: .6; }   /* ząbki */
.mech-cabinet .cab-plate { background: var(--paper-light) var(--grain); border: 1px solid var(--ink); border-radius: 0; box-shadow: 2px 2px 0 rgb(42 33 26 / .3); color: var(--ink); }
.mech-cabinet .drawer { background: var(--ink); border-radius: 0; }
.mech-cabinet .drawer-face { background-color: var(--paper-dark); background-image: var(--woodgrain); background-blend-mode: multiply; border: 2px solid var(--ink); border-radius: 0; box-shadow: inset 0 0 0 1px var(--paper-light); color: var(--ink); }
.mech-cabinet .drawer.is-open .drawer-face { box-shadow: inset 0 0 0 1px var(--paper-light), -12px 10px 0 rgb(42 33 26 / .28); }
.mech-cabinet .label { background: var(--paper-light) var(--grain); border: 1px solid var(--ink); padding: 3px 8px; box-shadow: 2px 2px 0 rgb(42 33 26 / .2); }
.mech-cabinet .label b { color: var(--ink); } .mech-cabinet .label small { color: var(--ink-soft); opacity: 1; }
.mech-cabinet .pull { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--ink); background: radial-gradient(circle at 40% 35%, #e2c98a, var(--brass) 55%, #7a5c22); box-shadow: 2px 2px 0 rgb(42 33 26 / .3), inset 0 0 0 4px rgb(255 255 255 / .25); }
.mech-cabinet .chain { width: 14px; margin-left: -7px; background: var(--chain) repeat-y; background-size: 14px 28px; border-radius: 0; box-shadow: none; }
.mech-cabinet .lift { background: var(--paper-light) var(--grain); border: 2px solid var(--ink); border-radius: 0; box-shadow: 3px 4px 0 rgb(42 33 26 / .3); color: var(--ink); background-image: var(--hatch-x), var(--grain); }
.mech-cabinet .lift span { background: var(--paper-light); padding: 0 6px; border: 1px solid var(--ink); font-size: 14px; }
.mech-cabinet .gear circle, .mech-cabinet .gear rect { fill: var(--paper-light); stroke: var(--ink); stroke-width: 4; }
.mech-cabinet .gear .arm, .mech-cabinet .gear circle:nth-of-type(2) { fill: var(--ink); }
.mech-cabinet .gear .knob { fill: #a4382a; stroke: var(--ink); }
.mech-cabinet .crank-caption { color: var(--ink-soft); }
.mech-cabinet .cab-doc { border: 0; }
#s-experience .cab-doc .pos-company { font: 700 26px/1.1 var(--font-display); }
#s-experience .cab-doc .pos-role { color: var(--ink-soft); }
#s-experience .cab-doc .pos-head { border-bottom: 3px double var(--ink-faint); }
.mech-cabinet .doc-items .n, #s-experience .pos-mech .n { color: var(--red); }

/* ---------- mechanizmy w szufladzie: tusz zamiast gradientów (pierwsze przybliżenie, reszta w kolejnym kroku) ---------- */
.brass { background: linear-gradient(180deg, #e9d59f, #c9a85c 50%, #9c7b35); border: 1px solid var(--ink); }
.wood { background-color: var(--paper-dark); background-image: var(--woodgrain), var(--grain); background-blend-mode: multiply, multiply; }

/* ---------- mechanizmy w szufladach: tusz na papierze, metale płaskie z obrysem ---------- */
/* sejf */
.mech-vault .vault-interior { background: var(--ink); background-image: var(--hatch-x); border: 12px solid var(--ink); box-shadow: 8px 10px 0 rgb(42 33 26 / .22); }
.mech-vault .vault-interior::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--paper-dark); }
.mech-vault .shelf { background: var(--paper-dark); box-shadow: 0 4px 0 rgb(0 0 0 / .5); }
.mech-vault .shelf::before { background: repeating-linear-gradient(90deg, var(--paper-light) 0 26px, var(--ink) 26px 28px); border: 1px solid var(--ink); }
.mech-vault .vault-door { background: var(--brass) var(--grain); background-blend-mode: multiply; box-shadow: inset 0 0 0 8px var(--ink), inset 0 0 0 11px var(--paper-light), inset 0 0 0 12px var(--ink), 10px 10px 0 rgb(42 33 26 / .18); border: 3px solid var(--ink); }
.mech-vault .wheel circle, .mech-vault .wheel rect { stroke: var(--ink); }
.mech-vault .bolts span { background: var(--paper-light); border: 2px solid var(--ink); box-shadow: 2px 2px 0 rgb(42 33 26 / .3); }
.mech-vault .vault-label { color: var(--ink); background: var(--paper-light); padding: 2px 8px; border: 1px solid var(--ink); }
.mech-vault .tray-items li { background: var(--paper-light) var(--grain); border: 1px solid var(--ink-faint); box-shadow: 3px 4px 0 rgb(42 33 26 / .12); }
.mech-vault .band { background: var(--paper-dark); border: 1px solid var(--ink); color: var(--ink); }
/* jednoręki bandyta */
.mech-slot .slot-cabinet { background: #b23a2c var(--grain); background-blend-mode: multiply; background-image: var(--hatch), var(--grain); border: 3px solid var(--ink); box-shadow: 8px 10px 0 rgb(42 33 26 / .22); border-radius: 10px 10px 4px 4px; }
.mech-slot .slot-marquee { background: var(--paper-light) var(--grain); border: 1px solid var(--ink); color: var(--ink); border-radius: 0; box-shadow: 2px 2px 0 rgb(42 33 26 / .3); }
.mech-slot .reel-window { background: var(--paper-light) var(--grain); border: 3px solid var(--ink); border-radius: 0; box-shadow: inset 0 8px 10px rgb(42 33 26 / .22), inset 0 -8px 10px rgb(42 33 26 / .22); }
.mech-slot .slot-counter { color: var(--paper-light); }
.mech-slot .slot-tray { border: 1px solid var(--ink); box-shadow: 3px 3px 0 rgb(42 33 26 / .2); }
.mech-slot .arm-rod, .mech-splitflap .lever-arm, .mech-counter .cl-rod { background: var(--ink); }
.mech-slot .arm-ball, .mech-splitflap .lever-knob, .mech-counter .cl-knob { background: radial-gradient(circle at 35% 30%, #c9533f, #a4382a 60%, #5e1d14); border: 2px solid var(--ink); }
/* dalekopis */
.mech-ticker .ticker-machine { background: var(--ink) var(--hatch-x); border: 3px solid var(--ink); box-shadow: 8px 10px 0 rgb(42 33 26 / .22); border-radius: 6px; color: var(--paper-light); }
.mech-ticker .ticker-plate { background: var(--paper-light) var(--grain); border: 1px solid var(--ink); color: var(--ink); border-radius: 0; }
.mech-ticker .ticker-dome { background: var(--paper-dark) var(--hatch); border: 3px solid var(--ink); }
.mech-ticker .ticker-reel { border: 4px solid var(--ink); background: repeating-conic-gradient(var(--ink) 0 20deg, var(--paper-light) 20deg 40deg); }
.mech-ticker .ticker-slot { background: var(--paper-light); border: 2px solid var(--ink); }
.mech-ticker .tkey-arm { background: var(--paper-light); border: 2px solid var(--ink); } .mech-ticker .tkey-knob { background: var(--ink); border: 3px solid var(--paper-light); }
.mech-ticker .tape { border-left: 10px solid var(--paper-dark); border-right: 10px solid var(--paper-dark); box-shadow: 6px 8px 0 rgb(42 33 26 / .16); }
/* drzwi obrotowe */
.mech-revolving .door-top { background: var(--paper-dark) var(--grain); border: 3px solid var(--ink); box-shadow: 6px 6px 0 rgb(42 33 26 / .22); }
.mech-revolving .door-floor { background: var(--ink) var(--hatch-x); border: 3px solid var(--ink); }
.mech-revolving .axis { background: var(--ink); }
.mech-revolving .pane { border: 4px solid var(--ink); background: linear-gradient(160deg, rgb(215 228 236 / .6), rgb(255 255 255 / .35) 50%, rgb(183 198 212 / .6)); }
.mech-revolving .plate { background: var(--paper-light) var(--grain); border: 1px solid var(--ink); color: var(--ink); box-shadow: 2px 2px 0 rgb(42 33 26 / .3); }
/* centralka */
.mech-switchboard .switchboard { background-color: var(--paper-dark); background-image: var(--woodgrain), var(--grain); background-blend-mode: multiply, multiply; border: 3px solid var(--ink); box-shadow: 8px 10px 0 rgb(42 33 26 / .22); border-radius: 0; }
.mech-switchboard .sb-plate { background: var(--paper-light) var(--grain); border: 1px solid var(--ink); color: var(--ink); border-radius: 0; }
.mech-switchboard .jack { background: var(--paper-light) var(--grain); border: 2px solid var(--ink); color: var(--ink); border-radius: 0; }
.mech-switchboard .jack-label small { color: var(--ink-soft); }
.mech-switchboard .lamp { background: var(--paper-dark); border: 2px solid var(--ink); box-shadow: none; }
.mech-switchboard .jack.is-live .lamp { background: radial-gradient(circle at 40% 35%, #fff4b0, #f0b400 60%, #a66d00); box-shadow: 0 0 10px #ffd54a; }
.mech-switchboard .hole, .mech-switchboard .socket { background: var(--paper-light); border: 2px solid var(--ink); }
.mech-switchboard .plug { background: var(--brass); border: 2px solid var(--ink); }
/* tablica z klapkami */
.mech-splitflap .board { background: var(--ink); border: 6px solid var(--ink); box-shadow: 8px 10px 0 rgb(42 33 26 / .22); border-radius: 0 6px 6px 6px; outline: 2px solid var(--paper-light); outline-offset: -8px; }
.mech-splitflap .cell { background: linear-gradient(180deg, #3a3129 0 48%, #1a1410 48% 52%, #302823 52%); color: var(--paper-light); }
.mech-splitflap .flap-plate { background: var(--paper-light) var(--grain); border: 1px solid var(--ink); color: var(--ink); border-radius: 0; }
.mech-splitflap .flap-btn { background: var(--paper-light) var(--grain); border: 1px solid var(--ink); color: var(--ink); border-radius: 0; box-shadow: 2px 2px 0 rgb(42 33 26 / .3); }
.mech-splitflap .flap-ticket { border: 1px solid var(--ink-faint); box-shadow: 4px 5px 0 rgb(42 33 26 / .14); }
/* auto i tablica przy drodze */
.mech-car .sign { border: 1px solid var(--ink-faint); box-shadow: 5px 6px 0 rgb(42 33 26 / .18); }
.mech-car .sign-post { background: var(--ink); }
.mech-car .road { background: repeating-linear-gradient(90deg, var(--ink) 0 46px, transparent 46px 70px); border-top: 3px solid var(--ink); }
/* reszta strony: popiersie, licznik, tablica z haczykami, dyplomy, latarnia (pierwsze przybliżenie) */
.mech-counter .drums { background: var(--ink) var(--hatch-x); border: 3px solid var(--ink); box-shadow: 8px 10px 0 rgb(42 33 26 / .22); border-radius: 4px; }
.mech-counter .drum-window { background: var(--paper-light) var(--grain); border: 2px solid var(--paper-light); border-radius: 0; }
.mech-counter .plate-ch { color: var(--paper-light); }
.mech-pegboard .pegboard { background-color: var(--paper-dark); background-image: radial-gradient(circle at 10px 10px, var(--ink-faint) 2px, transparent 2.5px), var(--grain); border: 3px solid var(--ink); box-shadow: 8px 10px 0 rgb(42 33 26 / .22); border-radius: 0; }
.mech-pegboard .peg-group { background: var(--paper-light) var(--grain); border: 1px solid var(--ink); color: var(--ink); border-radius: 0; }
.mech-pegboard .tag-paper, .mech-pegboard .company-plate { background: var(--paper-light) var(--grain); border: 1px solid var(--ink-soft); }
.mech-pegboard .hook { border-color: var(--ink); }
.mech-diplomas .beam { background: var(--paper-dark) var(--woodgrain); border: 2px solid var(--ink); border-radius: 0; }
.mech-diplomas .frame { background: var(--brass) var(--grain); background-blend-mode: multiply; border: 3px solid var(--ink); box-shadow: 8px 10px 0 rgb(42 33 26 / .22); }
.mech-diplomas .pulley { background: radial-gradient(circle, var(--ink) 30%, var(--paper-light) 32%); border: 2px solid var(--ink); }
.mech-diplomas .rope, .mech-diplomas .rope-line { background: var(--ink); }
.mech-diplomas .rope-knob { background: var(--paper-dark) var(--woodgrain); border: 2px solid var(--ink); }
.mech-lantern .wall { background: var(--paper-dark) var(--grain); border: 5px solid var(--ink); box-shadow: 8px 10px 0 rgb(42 33 26 / .22); }
.mech-lantern .slide { background: var(--paper-light) var(--grain); box-shadow: inset 0 0 0 1px var(--ink-faint); }
.mech-bust .bust-card { border: 1px solid var(--ink-faint); }

/* ---------- ryciny generowane (gdy są pliki) ---------- */
html.has-hand .sheet h2 small::before { content: ""; display: inline-block; width: 26px; height: 18px; margin-right: 8px; vertical-align: -3px; background: var(--eng-hand) center / contain no-repeat; }
html.has-hand .manicule::before { content: ""; display: inline-block; width: 22px; height: 16px; margin-right: 6px; vertical-align: -2px; background: var(--eng-hand) center / contain no-repeat; }
html.has-hand .mech-pegboard .peg-card .hint::before { content: ""; display: inline-block; width: 24px; height: 16px; margin-right: 8px; vertical-align: -2px; background: var(--eng-hand) center / contain no-repeat; }
/* Rama-rycina (880x1100, proporcja 0.8) w pudełku 320x400. Otwór ramy = elipsa zmierzona z kanału alfa: środek (50%, 49.7%),
   szerokość 65.2%, wysokość 64% -> --hole-*. Portret (kwadrat) ma bok = 2*(ry + zapas), stoi absolutnie tak, by jego środek
   trafił w środek otworu, i jest przycięty elipsą otworu powiększoną o zapas (chowa się pod krawędź ramy). --head-dx/--head-shift
   przesuwają samo zdjęcie w oknie (elipsa zostaje na otworze). Tło lustra = kolor tła zdjęć (#e4e4e6), więc nigdy nie prześwituje niebo. */
.portrait-frame.has-ornament { --hole-cx: 160px; --hole-cy: 199px; --hole-rx: 104.4px; --hole-ry: 127.8px; --over: 7px; --head-dx: 5px; --head-shift: 0px; --mirror-bg: #fff;
  position: relative; width: 320px; height: 400px; padding: 0; border: 0; box-shadow: none; background: transparent; overflow: visible; display: block; }
.portrait-frame.has-ornament::before { content: ""; position: absolute; left: calc(var(--hole-cx) - var(--hole-rx) - var(--over)); top: calc(var(--hole-cy) - var(--hole-ry) - var(--over)); width: calc(2 * (var(--hole-rx) + var(--over))); height: calc(2 * (var(--hole-ry) + var(--over))); border-radius: 50%; background: var(--mirror-bg); z-index: 0; }
.portrait-frame.has-ornament .frame-img { position: absolute; inset: 0; width: 100%; height: 100%; transform: none; pointer-events: none; z-index: 2; filter: drop-shadow(6px 7px 0 rgb(42 33 26 / .2)); }
.portrait-frame.has-ornament head-widget { position: absolute !important; left: calc(var(--hole-cx) - var(--hole-ry) - var(--over) + var(--head-dx)); top: calc(var(--hole-cy) - var(--hole-ry) - var(--over) + var(--head-shift)); width: calc(2 * (var(--hole-ry) + var(--over))) !important; height: calc(2 * (var(--hole-ry) + var(--over))); --head-size: 270px; margin: 0; z-index: 1; background: var(--mirror-bg); border-radius: 0; overflow: hidden;
  clip-path: ellipse(calc(var(--hole-rx) + var(--over)) calc(var(--hole-ry) + var(--over)) at calc(50% - var(--head-dx)) calc(50% - var(--head-shift))); -webkit-mask-image: none; mask-image: none; }
.portrait figcaption { display: none; }


/* ======================================================================
   Reszta sekcji: podsumowanie, liczby, umiejętności, edukacja, zainteresowania, kontakt
   ====================================================================== */
/* podsumowanie: popiersie tuszem, karta z inicjałem */
.mech-bust .bust-svg g[fill="#efe3c8"] { fill: var(--paper-light); stroke: var(--ink); }
.mech-bust .bust-svg .lid path:first-child { fill: var(--paper-light); stroke: var(--ink); }
.mech-bust .bust-svg .scroll rect:first-child { fill: var(--paper-light); }
.mech-bust .bust { filter: drop-shadow(8px 10px 0 rgb(42 33 26 / .22)); }
.mech-bust .bust-card p::first-letter { font: 900 44px/1 var(--font-display); float: left; margin: 4px 8px 0 0; color: var(--red); }
.mech-bust .bust-card h4 { letter-spacing: .12em; }
/* liczby: tabliczki jednostek i firm */
.mech-counter .counter-unit { background: var(--paper-light) var(--grain); border: 1px solid var(--ink); padding: 2px 8px; font-size: 11px; box-shadow: 2px 2px 0 rgb(42 33 26 / .22); }
.mech-counter .counter-co { font-family: var(--font-sc); letter-spacing: .06em; font-size: 12px; }
/* umiejętności: nitki i etykiety */
.mech-pegboard .thread { stroke: var(--red); stroke-width: 2; stroke-dasharray: 6 3; }
.mech-pegboard .tag.is-on .tag-paper { background: var(--red); border-color: var(--ink); }
.mech-pegboard .peg-card { border: 1px solid var(--ink-faint); }
.mech-pegboard .ctx .co { font-family: var(--font-sc); }
/* edukacja i nagrody: złocone ramy sztychem, wstęga */
.mech-diplomas .frame { padding: 9px; border: 3px double var(--ink); background: var(--brass) var(--hatch); }
.mech-diplomas .frame-inner { border: 1px solid var(--ink-faint); box-shadow: inset 0 0 0 3px transparent, inset 0 0 0 4px var(--ink-faint); background: var(--paper-light) var(--grain); font-family: var(--font-type); }
.mech-diplomas .ribbon { background: var(--paper-light) var(--grain); border: 1px solid var(--ink); box-shadow: 4px 5px 0 rgb(42 33 26 / .18); }
.mech-diplomas .ribbon::before, .mech-diplomas .ribbon::after { background: var(--paper-dark); border-right: 1px solid var(--ink-faint); border-left: 1px solid var(--ink-faint); }
.mech-diplomas .trumpet { filter: drop-shadow(5px 6px 0 rgb(42 33 26 / .2)); }
.mech-diplomas .trumpet svg g[fill="#c9a85c"] { fill: var(--paper-light); stroke: var(--ink); }
/* zainteresowania: latarnia i ściana */
.mech-lantern .lantern svg g[fill="#2a211a"] { fill: var(--ink); stroke: var(--paper-light); }
.mech-lantern .beam { background: linear-gradient(90deg, rgb(255 236 170 / .6), rgb(255 236 170 / .06)); }
.mech-lantern .slide-title { font-family: var(--font-sc); letter-spacing: .1em; }
/* kontakt */
#s-contact .contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 30px; align-items: center; }
#s-contact .contact-line { font-size: 17px; line-height: 1.9; }
#s-contact .contact-line a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink-faint); }
#s-contact .exit { color: var(--ink-soft); }
#s-contact .exit button { background: var(--paper-light) var(--grain); border: 1px solid var(--ink); border-radius: 0; box-shadow: 3px 3px 0 rgb(42 33 26 / .22); font-family: var(--font-type); letter-spacing: .06em; }
#s-contact .exit button:hover { background: var(--red); color: var(--paper-light); border-color: var(--ink); }
#s-contact .contact-art { min-height: 240px; background: center / contain no-repeat; display: none; }
#s-contact .stamp { position: absolute; left: 64px; bottom: 30px; transform: rotate(-7deg); color: var(--red); border: 3px double var(--red); padding: 6px 14px; font: 400 14px var(--font-type); letter-spacing: .22em; text-transform: uppercase; opacity: .7; mix-blend-mode: multiply; }

/* ---------- kolejne ryciny (gdy są pliki) ---------- */
/* chmury: wycinanki zamiast rozmytych plam */
html.has-cloud body::before, html.has-cloud body::after { background: var(--eng-cloud) center / contain no-repeat; border-radius: 0; filter: drop-shadow(6px 8px 0 rgb(42 33 26 / .12)); opacity: .92; }
html.has-cloud body::before { width: 34vw; height: 16vw; left: -3vw; top: 9vh; }
html.has-cloud body::after { width: 42vw; height: 20vw; right: -7vw; bottom: 5vh; transform: scaleX(-1); }
/* winiety przy tytułach: linia + akant po obu stronach */
html.has-flourish .sheet h2::before, html.has-flourish .sheet h2::after { border: 0; height: 30px; opacity: .9;
  background: var(--eng-flourish) right center / auto 100% no-repeat, linear-gradient(var(--ink-soft), var(--ink-soft)) left center / calc(100% - 100px) 1px no-repeat; }
html.has-flourish .sheet h2::after { background-position: left center, right center; }
html.has-flourish .sheet h2 span:first-child::before, html.has-flourish .sheet h2 span:first-child::after { content: none; }
/* latarnia magiczna (obiektyw po prawej, korbka z boku) */
html.has-lantern .mech-lantern .lantern > svg { display: none; }
html.has-lantern .mech-lantern .lantern { background: var(--eng-lantern) center / contain no-repeat; filter: drop-shadow(8px 10px 0 rgb(42 33 26 / .2)); }
html.has-lantern .mech-lantern .lcrank { left: -11px; top: 120px; }
html.has-lantern .mech-lantern .beam { left: 206px; top: calc(50% + 31px); }
/* trąbka herolda (ustnik po lewej, obrót wokół ustnika) */
html.has-trumpet .mech-diplomas .trumpet svg g:first-child { display: none; }
html.has-trumpet .mech-diplomas .trumpet { background: var(--eng-trumpet) center / contain no-repeat; width: 240px; height: 130px; transform-origin: 3% 33%; }
html.has-trumpet .mech-diplomas .trumpet .blast { transform: translateY(-20px); }
/* telefon w kontakcie */
html.has-phone #s-contact .contact-art { display: block; background-image: var(--eng-phone); filter: drop-shadow(6px 8px 0 rgb(42 33 26 / .18)); }
@media (max-width: 900px) { #s-contact .contact-grid { grid-template-columns: 1fr; } #s-contact .contact-art { min-height: 160px; } #s-contact .stamp { position: static; display: inline-block; margin-bottom: 12px; } }

/* ======================================================================
   Nagłówek na rycinach: litery wood-type, wstęga, wyłącznik, dźwignia, przełącznik
   ====================================================================== */
.masthead mech-letters .letter.has-img { background: transparent; border: 0; box-shadow: none; padding: 0; text-shadow: none; display: block; height: var(--letter-h, 96px); filter: drop-shadow(5px 6px 0 rgb(42 33 26 / .28)); }
.masthead mech-letters .letter.has-img img { display: block; height: 100%; width: auto; }
.masthead mech-letters .line-0 .letter.has-img { --letter-h: clamp(64px, 8.6vw, 124px); }
.masthead mech-letters .line-1 .letter.has-img { --letter-h: clamp(40px, 5.6vw, 86px); }
.masthead mech-letters .letter-line { gap: 6px; flex-wrap: wrap; }
.masthead mech-letters .line-1 { margin-left: 40px; margin-top: -6px; }
.masthead mech-letters .string { height: calc(26px + (var(--k) % 3) * 10px); }
.masthead mech-letters .letters-stage { min-height: 0; }
/* portret: podpis jako papierowa etykieta pod ramą, nad ryciną ramy (wcześniej chował się za nią) */
.portrait figcaption { position: absolute; left: 50%; bottom: -40px; z-index: 3; margin: 0; transform: translateX(-50%) rotate(-2deg); white-space: nowrap; background: var(--paper-light) var(--grain); border: 1px solid var(--ink); padding: 4px 10px; box-shadow: 3px 3px 0 rgb(42 33 26 / .22); color: var(--ink-soft); }
.masthead .controls { margin-top: 40px; align-items: center; }
/* wyłącznik nożowy: trzy klatki-ryciny (lewo / pion / prawo) */
.mech-knife .knife { position: relative; }
.mech-knife.has-art .knife { width: 200px; height: 134px; filter: none; }
.mech-knife.has-art .knife svg { display: none; }
.mech-knife .knife-art { display: none; position: absolute; inset: 0; }
.mech-knife.has-art .knife-art { display: block; filter: drop-shadow(5px 6px 0 rgb(42 33 26 / .22)); }
.mech-knife .knife-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
.mech-knife[data-st="left"] .knife-art img[data-st="left"], .mech-knife[data-st="up"] .knife-art img[data-st="up"], .mech-knife[data-st="right"] .knife-art img[data-st="right"] { opacity: 1; }
.mech-knife .knife-lbl { display: none; position: absolute; bottom: -22px; font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--ink); }
.mech-knife.has-art .knife-lbl { display: block; } .mech-knife .knife-lbl-l { left: 26px; } .mech-knife .knife-lbl-r { right: 26px; }
.mech-knife.has-art[data-st="left"] .knife-lbl-l, .mech-knife.has-art[data-st="right"] .knife-lbl-r { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.mech-knife .knife-flash { position: absolute; top: 18px; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle, #fff7c0, rgb(240 180 0 / .9) 40%, transparent 70%); opacity: 0; pointer-events: none; z-index: 2; }
.mech-knife.has-art.is-flash .knife-flash { opacity: 1; } .mech-knife[data-st="left"] .knife-flash { left: 26px; } .mech-knife[data-st="right"] .knife-flash { right: 26px; }
/* wielka dźwignia: dwie klatki-ryciny (pion / przełożona), tabliczka pod spodem */
.mech-biglever.has-art .biglever { width: 150px; height: 190px; }
.mech-biglever.has-art .bl-arm, .mech-biglever.has-art .bl-knob { display: none; }
.mech-biglever .bl-art { display: none; position: absolute; left: 0; right: 0; top: 0; bottom: 34px; filter: drop-shadow(5px 6px 0 rgb(42 33 26 / .22)); }
.mech-biglever.has-art .bl-art { display: block; }
.mech-biglever .bl-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; opacity: 0; }
.mech-biglever[data-st="up"] .bl-art img[data-st="up"], .mech-biglever[data-st="down"] .bl-art img[data-st="down"] { opacity: 1; }
.mech-biglever.has-art .bl-plate { top: auto; bottom: 0; }
/* przełącznik napędu scrollem: mosiężna płytka z dźwigienką (góra = wł.) + papierowa etykieta */
.scroll-toggle { display: inline-flex; align-items: center; gap: 12px; }
.scroll-toggle .tg-art { display: none; position: relative; width: 60px; height: 66px; filter: drop-shadow(4px 5px 0 rgb(42 33 26 / .22)); }
html.has-toggle_on.has-toggle_off .scroll-toggle .tg-art { display: block; }
html.has-toggle_on.has-toggle_off .scroll-toggle { background: transparent; border: 0; box-shadow: none; padding: 0; }
html.has-toggle_on.has-toggle_off .scroll-toggle[aria-pressed="true"] { background: transparent; color: inherit; }
.scroll-toggle .tg-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
.scroll-toggle[aria-pressed="true"] .tg-art img[data-st="on"], .scroll-toggle[aria-pressed="false"] .tg-art img[data-st="off"] { opacity: 1; }
html.has-toggle_on.has-toggle_off .scroll-toggle .tg-label { background: var(--paper-light) var(--grain); border: 1px solid var(--ink); padding: 5px 10px; box-shadow: 3px 3px 0 rgb(42 33 26 / .22); color: var(--ink); }
html.has-toggle_on.has-toggle_off .scroll-toggle[aria-pressed="true"] .tg-label { background: var(--ink); color: var(--paper-light); }
/* popiersie jako rycina: dwie klatki (zamknięte / otwarty czubek głowy), z otworu wyjeżdża pasek papieru z tytułem */
.mech-bust.has-art .bust-wrap { grid-template-columns: 270px minmax(0, 1fr); }
.mech-bust .bust { position: relative; }
.mech-bust.has-art .bust { width: 262px; height: 386px; border-radius: 0; filter: drop-shadow(8px 10px 0 rgb(42 33 26 / .2)); }
.mech-bust.has-art .bust-svg { display: none; }
.mech-bust .bust-art { display: none; position: absolute; inset: 0; z-index: 1; }
.mech-bust.has-art .bust-art { display: block; }
.mech-bust .bust-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; opacity: 0; }
.mech-bust[data-st="closed"] .bust-art img[data-st="closed"], .mech-bust[data-st="open"] .bust-art img[data-st="open"] { opacity: 1; }
.mech-bust .bust-paper { display: none; position: absolute; left: 29%; width: 36%; bottom: 77.5%; height: 34%; overflow: hidden; pointer-events: none; z-index: 2; }
.mech-bust.has-art .bust-paper { display: block; }
.mech-bust .bust-paper-inner { position: absolute; left: 6%; right: 6%; bottom: -4px; height: 100%; padding: 10px 8px 0; box-sizing: border-box; background: var(--paper-light) var(--grain); border: 1px solid var(--ink); border-bottom: 0; box-shadow: 3px 0 0 rgb(42 33 26 / .18); font: 700 10px/1.5 var(--font-type); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); text-align: center; transform: translateY(100%); }
.mech-bust .bust-paper-inner::after { content: ""; position: absolute; left: 10px; right: 10px; top: 34px; height: 60px; background: repeating-linear-gradient(180deg, transparent 0 9px, var(--ink-faint) 9px 10px); }

/* ======================================================================
   Wzorzec stylu (assets/ref/wzorzec-styl.png): stary papier kart, skrawki gazet pod literami, niebo pełne chmur, rekwizyty
   ====================================================================== */
/* karty = rycina arkusza (postrzępione brzegi, plamy) jako border-image z wypełnieniem; cień = ta sama rycina jako czarna sylwetka */
html.has-paper_a .sheet-inner { clip-path: none; background: transparent; border: var(--paper-w, 46px) solid transparent; border-image: var(--eng-paper_a) var(--paper-slice, 150) fill / var(--paper-w, 46px) / 0 round; padding: 22px 20px 26px; }
html.has-paper_a.has-paper_b .sheet:nth-of-type(even) .sheet-inner { border-image-source: var(--eng-paper_b); }
html.has-paper_a .sheet-inner::after { inset: 4px; }   /* ::after liczy się od krawędzi dopełnienia (za 46px border-image): linia 50px od brzegu, treść od 66px */
html.has-paper_a .sheet:not(.stage)::before, html.has-paper_a .sheet.stage > .stage-sticky::before { clip-path: none; background: transparent; box-sizing: border-box; border: var(--paper-w, 46px) solid transparent; border-image: var(--eng-paper_a) var(--paper-slice, 150) fill / var(--paper-w, 46px) / 0 round; filter: brightness(0); opacity: .22; }
html.has-paper_a.has-paper_b .sheet:nth-of-type(even)::before, html.has-paper_a.has-paper_b .sheet.stage:nth-of-type(even) > .stage-sticky::before { border-image-source: var(--eng-paper_b); }
/* litery nazwiska na skrawkach gazet (każda litera dostaje --scrap z manifestu) */
.masthead mech-letters .letter.has-img.has-scrap { background: var(--scrap) center / 100% 100% no-repeat; padding: 8px 11px 9px; height: calc(var(--letter-h, 96px) + 17px); filter: drop-shadow(4px 5px 0 rgb(42 33 26 / .3)); }
.masthead mech-letters .letter.has-img.has-scrap img { height: 100%; filter: none; }
/* niebo: warstwa chmur za kartami, balon i ptaki w nagłówku */
#page { position: relative; }
.sky { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: visible; }
html, body { overflow-x: clip; }   /* chmury mogą wystawać poza szerokość strony bez poziomego przewijania */
.sky i { position: absolute; display: block; height: auto !important; background: center / contain no-repeat; filter: drop-shadow(6px 8px 0 rgb(42 33 26 / .12)); opacity: .95; }   /* wysokość z proporcji ryciny, nie z % strony */
.sky .c1 { aspect-ratio: 1200 / 567; } .sky .c2 { aspect-ratio: 1200 / 332; } .sky .c3 { aspect-ratio: 618 / 838; }
.sky .c1 { background-image: var(--eng-cloud); } .sky .c2 { background-image: var(--eng-cloud2, var(--eng-cloud)); } .sky .c3 { background-image: var(--eng-cloud3, var(--eng-cloud)); }
.sky .flip { transform: scaleX(-1); }
html:not(.has-cloud) .sky { display: none; }
.mast-grid { position: relative; }
html.has-balloon .masthead::before { content: ""; position: absolute; right: 360px; top: 70px; width: 110px; height: 140px; background: var(--eng-balloon) center / contain no-repeat; filter: drop-shadow(5px 6px 0 rgb(42 33 26 / .18)); z-index: 3; animation: sky-drift 9s ease-in-out infinite alternate; pointer-events: none; }
html.has-birds .masthead::after { content: ""; position: absolute; left: 44%; top: 300px; width: 180px; height: 70px; background: var(--eng-birds) center / contain no-repeat; opacity: .85; pointer-events: none; }
@keyframes sky-drift { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(10px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { html.has-balloon .masthead::before { animation: none; } }
@media (max-width: 900px) { html.has-balloon .masthead::before, html.has-birds .masthead::after { display: none; } }

/* ---------- Liczby wg wzorca: mosiężna obudowa (rycina z wyciętym oknem) i dźwignia sygnałowa ---------- */
html.has-counter_frame .mech-counter .drums { position: relative; background: #2a211a; border: 0; border-radius: 0; box-shadow: none; padding: 10px 12px; }
html.has-counter_frame .mech-counter .drums::after { content: ""; position: absolute; inset: calc(-1 * var(--cf-top, 24px)) calc(-1 * var(--cf-right, 36px)) calc(-1 * var(--cf-bottom, 24px)) calc(-1 * var(--cf-left, 36px)); pointer-events: none; border-style: solid; border-width: var(--cf-top, 24px) var(--cf-right, 36px) var(--cf-bottom, 24px) var(--cf-left, 36px); border-image: var(--eng-counter_frame) var(--cf-slice, 20% 15.5% 20% 15.5%) / var(--cf-top, 24px) var(--cf-right, 36px) var(--cf-bottom, 24px) var(--cf-left, 36px) / 0 stretch; filter: drop-shadow(5px 6px 0 rgb(42 33 26 / .22)); }
html.has-counter_frame .mech-counter .counter { gap: 34px 10px; padding-top: 26px; }
html.has-counter_frame .mech-counter .counter-unit { margin-top: 2px; }
.mech-counter.has-art .counter-lever { width: 110px; height: 150px; }
.mech-counter.has-art .cl-rod, .mech-counter.has-art .cl-knob { display: none; }
.mech-counter .cl-art { display: none; position: absolute; inset: 0; filter: drop-shadow(5px 6px 0 rgb(42 33 26 / .22)); }
.mech-counter.has-art .cl-art { display: block; }
.mech-counter .cl-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; opacity: 0; }
.mech-counter[data-st="up"] .cl-art img[data-st="up"], .mech-counter[data-st="down"] .cl-art img[data-st="down"] { opacity: 1; }

/* ---------- Szafa wg wzorca: korpus-rycina z 7 otworami (pozycje zmierzone z alfy), fronty szuflad z ryciny, łańcuch, koło ---------- */
html.has-cabinet #s-experience .cab-wrap, html.has-cabinet .mech-cabinet .cab-wrap { grid-template-columns: 300px 80px minmax(0, 1fr); }
html.has-cabinet .mech-cabinet .cabinet { position: relative; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: var(--eng-cabinet) center / 100% 100% no-repeat; aspect-ratio: 689 / 1379; filter: drop-shadow(8px 10px 0 rgb(42 33 26 / .22)); }
html.has-cabinet .mech-cabinet .cabinet::before, html.has-cabinet .mech-cabinet .cabinet::after { display: none; }
html.has-cabinet .mech-cabinet .cab-plate { position: absolute; left: 20%; right: 20%; top: 2.4%; margin: 0; z-index: 2; font-size: 10px; letter-spacing: .18em; padding: 3px 6px; }
html.has-cabinet .mech-cabinet .drawers { position: absolute; left: 18.72%; top: 9.86%; width: 62.84%; height: 82.46%; display: grid; grid-template-rows: repeat(7, 1fr); }
html.has-cabinet .mech-cabinet .drawer { height: 71% !important; margin: 0; align-self: start; background: transparent; border-radius: 0; }
html.has-cabinet .mech-cabinet .drawer-face { position: relative; display: block; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: var(--eng-drawer) center / 100% 100% no-repeat; }
html.has-cabinet .mech-cabinet .drawer.is-open .drawer-face { box-shadow: none; filter: drop-shadow(-10px 8px 0 rgb(0 0 0 / .25)); }
html.has-cabinet .mech-cabinet .label { position: absolute; left: 7%; width: 66%; top: 16%; height: 68%; min-width: 0; display: grid; align-content: center; gap: 1px; padding: 0 6px; background: var(--paper-light) var(--grain); border: 1px solid var(--ink); box-shadow: 2px 2px 0 rgb(42 33 26 / .25); }
html.has-cabinet .mech-cabinet .label b { font-size: 10px; line-height: 1.05; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } html.has-cabinet .mech-cabinet .label small { font-size: 8px; letter-spacing: .03em; }
html.has-cabinet .mech-cabinet .pull { display: none; }
html.has-chain_segment .mech-cabinet .chain { width: 16px; margin-left: -8px; border-radius: 0; box-shadow: none; background: var(--eng-chain_segment) center top / 100% auto repeat-y; }
html.has-gear .mech-cabinet .crank svg { display: none; }
html.has-gear .mech-cabinet .crank::before { content: ""; position: absolute; inset: 0; background: var(--eng-gear) center / contain no-repeat; transform: rotate(var(--angle, 0deg)); filter: drop-shadow(4px 5px 0 rgb(42 33 26 / .22)); }

/* ---------- Dyplomy wg wzorca: złocona rama-rycina (pusta w środku, border-image bez fill), bloczek, pieczęć lakowa ---------- */
html.has-frame_gilt .mech-diplomas .frame { padding: 0; background: transparent; border: solid transparent; border-width: var(--fg-w, 22px 24px 24px 24px); border-image: var(--eng-frame_gilt) var(--fg-slice, 12.1% 15.2% 13% 15.3%) / var(--fg-w, 22px 24px 24px 24px) / 0 stretch; box-shadow: none; filter: drop-shadow(6px 8px 0 rgb(42 33 26 / .22)); }
html.has-frame_gilt .mech-diplomas .frame-inner { border: 0; box-shadow: none; background: var(--paper-light) var(--grain); min-height: 110px; }
html.has-prop_pulley .mech-diplomas .pulley { width: 34px; height: 44px; margin-left: -17px; top: -22px; border-radius: 0; border: 0; background: var(--eng-prop_pulley) center / contain no-repeat; box-shadow: none; }
html.has-prop_seal .mech-diplomas .ribbon { position: relative; }
html.has-prop_seal .mech-diplomas .ribbon::after { content: ""; position: absolute; right: -18px; bottom: -22px; width: 64px; height: 64px; background: var(--eng-prop_seal) center / contain no-repeat; filter: drop-shadow(3px 4px 0 rgb(42 33 26 / .25)); pointer-events: none; }
/* ---------- Umiejętności wg wzorca: lornetka i globus przy tablicy ---------- */
#s-skills .sheet-inner { position: relative; }
html.has-prop_binoculars #s-skills .sheet-inner::before { content: ""; position: absolute; left: -26px; bottom: 28px; width: 150px; height: 100px; background: var(--eng-prop_binoculars) center / contain no-repeat; filter: drop-shadow(5px 6px 0 rgb(42 33 26 / .22)); transform: rotate(-8deg); z-index: 3; pointer-events: none; }
html.has-prop_globe #s-skills .sheet-inner::after { content: ""; position: absolute; inset: auto -20px 22px auto; width: 130px; height: 160px; background: var(--eng-prop_globe) center / contain no-repeat; filter: drop-shadow(5px 6px 0 rgb(42 33 26 / .22)); z-index: 3; pointer-events: none; border: 0; box-shadow: none; }
/* ---------- Kontakt wg wzorca: ikony przy danych, buty przy przyciskach wyjścia ---------- */
#s-contact .contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 16px; }
#s-contact .contact-list li { display: flex; align-items: center; gap: 12px; }
#s-contact .contact-list li::before { content: ""; flex: none; width: 30px; height: 30px; background: var(--ic) center / contain no-repeat; display: none; }
html.has-icons #s-contact .contact-list li::before { display: block; }
#s-contact .contact-list .ic-mail { --ic: var(--eng-ic_mail); } #s-contact .contact-list .ic-phone { --ic: var(--eng-ic_phone); } #s-contact .contact-list .ic-in { --ic: var(--eng-ic_in); } #s-contact .contact-list .ic-web { --ic: var(--eng-ic_web); }
html.has-prop_boot #s-contact .exit button { position: relative; padding-left: 44px; }
html.has-prop_boot #s-contact .exit button::before { content: ""; position: absolute; left: 6px; top: 50%; width: 32px; height: 24px; transform: translateY(-50%); background: var(--eng-prop_boot) center / contain no-repeat; }
html.has-prop_boot #s-contact .exit button[data-fx="kick"]::before { transform: translateY(-50%) scaleX(-1); }

/* ======================================================================
   Mechanizmy w szufladach wg wzorca: dalekopis, sejf, tablica klapkowa, bandyta, auto (ryciny + wspólne dźwignie)
   ====================================================================== */
.mech .lv-art { display: none; position: absolute; inset: 0; filter: drop-shadow(5px 6px 0 rgb(42 33 26 / .22)); pointer-events: none; }
.mech.has-art .lv-art { display: block; }
.mech .lv-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; opacity: 0; }
.mech[data-st="up"] .lv-art img[data-st="up"], .mech[data-st="down"] .lv-art img[data-st="down"] { opacity: 1; }
/* dalekopis */
html.has-teleprinter .mech-ticker .ticker-machine { padding: 0; border: 0; border-radius: 0; box-shadow: none; background: var(--eng-teleprinter) center / contain no-repeat; aspect-ratio: 900 / 573; filter: drop-shadow(6px 8px 0 rgb(42 33 26 / .22)); margin-top: 22px; }
html.has-teleprinter .mech-ticker .ticker-dome, html.has-teleprinter .mech-ticker .ticker-slot { display: none; }
html.has-teleprinter .mech-ticker .ticker-plate { position: absolute; left: 22%; right: 22%; top: -20px; margin: 0; z-index: 2; }
html.has-teleprinter .mech-ticker .tkey { position: absolute; left: 68%; right: 0; top: 60%; bottom: 0; width: auto; height: auto; margin: 0; }
html.has-teleprinter .mech-ticker .tkey-arm, html.has-teleprinter .mech-ticker .tkey-knob { opacity: 0; }
html.has-teleprinter .mech-ticker .ticker-counter { position: absolute; left: 0; bottom: -22px; margin: 0; background: var(--paper-light) var(--grain); border: 1px solid var(--ink); padding: 2px 8px; font-size: 11px; }
/* sejf */
html.has-vault_door .mech-vault .vault-door { border: 0; border-radius: 0; box-shadow: none; background: var(--eng-vault_door) center / contain no-repeat; }
html.has-vault_door .mech-vault .bolts { display: none; }
html.has-vault_wheel .mech-vault .wheel { position: relative; width: 44%; height: 44%; background: transparent; border: 0; box-shadow: none; }
html.has-vault_wheel .mech-vault .wheel svg { display: none; }
html.has-vault_wheel .mech-vault .wheel::before { content: ""; position: absolute; inset: 0; background: var(--eng-vault_wheel) center / contain no-repeat; transform: rotate(var(--angle, 0deg)); filter: drop-shadow(3px 4px 0 rgb(42 33 26 / .3)); }
html.has-vault_door .mech-vault .vault-label { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); background: var(--paper-light) var(--grain); border: 1px solid var(--ink); padding: 2px 10px; }
/* tablica klapkowa: żeliwna rama-rycina wokół tablicy, dźwignia z rycin */
html.has-board_frame .mech-splitflap .flap-plate { margin-bottom: 48px; }
html.has-board_frame .mech-splitflap .board { position: relative; border: 0; border-radius: 0; box-shadow: none; }
html.has-board_frame .mech-splitflap .board::after { content: ""; position: absolute; inset: -40px -22px -22px -22px; pointer-events: none; border: solid transparent; border-width: 40px 22px 22px 22px; border-image: var(--eng-board_frame) 25.6% 8% 14.2% 8.1% / 40px 22px 22px 22px / 0 stretch; filter: drop-shadow(6px 8px 0 rgb(42 33 26 / .22)); }
html.has-board_frame .mech-splitflap .flap-bar { margin-top: 30px; }
.mech-splitflap.has-art .lever { width: 90px; height: 120px; }
.mech-splitflap.has-art .lever-arm, .mech-splitflap.has-art .lever-knob { display: none; }
/* bandyta: szafka-rycina z wyciętym oknem na bębny, dźwignia z rycin */
html.has-slot_cabinet .mech-slot .slot-wrap { grid-template-columns: 360px 120px; gap: 0; align-items: end; }
html.has-slot_cabinet .mech-slot .slot-cabinet { --sym: 63px; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: var(--eng-slot_cabinet) center / 100% 100% no-repeat; aspect-ratio: 592 / 742; margin-bottom: 150px; filter: drop-shadow(8px 10px 0 rgb(42 33 26 / .22)); }
html.has-slot_cabinet .mech-slot .slot-marquee { position: absolute; left: 24%; right: 24%; top: -18px; margin: 0; z-index: 2; }
html.has-slot_cabinet .mech-slot .reels { position: absolute; left: 21.6%; top: 27.9%; width: 56.8%; height: 14%; gap: 2%; }
html.has-slot_cabinet .mech-slot .reel-window { height: 100%; border: 0; border-radius: 0; box-shadow: inset 0 6px 8px rgb(0 0 0 / .3), inset 0 -6px 8px rgb(0 0 0 / .3); }
html.has-slot_cabinet .mech-slot .slot-counter { position: absolute; left: 28%; right: 28%; top: 45%; margin: 0; background: var(--paper-light) var(--grain); border: 1px solid var(--ink); color: var(--ink); padding: 2px 6px; font-size: 10px; }
html.has-slot_cabinet .mech-slot .slot-tray { position: absolute; left: 3%; right: 3%; top: 100%; margin-top: -4%; clip-path: inset(0 0 calc((1 - var(--print)) * 100%) 0); }
.mech-slot.has-art .arm { width: 120px; height: 150px; }
.mech-slot.has-art .arm-rod, .mech-slot.has-art .arm-ball { display: none; }
/* auto: rycina (odbita, by jechało w prawo jak dotąd), kłąb z ryciny, kierownica i korba z rycin */
html.has-car .mech-car .car { height: auto; aspect-ratio: 993 / 462; }
html.has-car .mech-car .car-body { visibility: hidden; }
html.has-car .mech-car .car::before { content: ""; position: absolute; inset: 0; background: var(--eng-car) center / contain no-repeat; transform: scaleX(-1); }
html.has-puff .mech-car .puff { background: var(--eng-puff) center / 100% 100% no-repeat; border: 0; border-radius: 0; padding: 30px 34px 34px; }
html.has-puff .mech-car .puff::after { display: none; }
html.has-car_steer .mech-car .steer svg { display: none; }
html.has-car_steer .mech-car .steer::before { content: ""; position: absolute; inset: 0; background: var(--eng-car_steer) center / contain no-repeat; transform: rotate(var(--angle, 0deg)); }
html.has-car_crank .mech-car .starter svg { display: none; }
html.has-car_crank .mech-car .starter::before { content: ""; position: absolute; inset: 0; background: var(--eng-car_crank) center / contain no-repeat; transform: rotate(var(--angle, 0deg)); }

/* ======================================================================
   Porządek w nagłówku (uwagi Jacka 17.10): tytuł na tabliczce, podpis w 2 wierszach wewnątrz płaskiej części szarfy,
   przełączniki na jednej papierowej półce z czytelnymi etykietami, chmury nie pod literami, ptaki pod balonem
   ====================================================================== */
.masthead .banner { display: table; margin: 0 auto 18px; padding: 5px 18px 4px; background: var(--paper-light) var(--grain); border: 1px solid var(--ink); box-shadow: 3px 3px 0 rgb(42 33 26 / .22); color: var(--ink); font-size: 17px; }
.masthead mech-letters .line-1 { margin-left: 22px; }
.masthead mech-letters .letters-sub { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 10px 0 0 10px; color: var(--ink); font-size: 12px; letter-spacing: .18em; }
/* półka na przełączniki: papier z ryciny (border-image), etykiety na papierze */
.masthead .controls .mech-knife, .masthead .controls .mech-biglever { display: block; }
.mech-knife.has-art .knife { margin-bottom: 26px; }
.mech-knife .knife-lbl { bottom: -24px; font-size: 12px; }
.mech-knife .knife-lbl-l { left: 22px; } .mech-knife .knife-lbl-r { right: 22px; }
.scroll-toggle { align-self: center; margin-bottom: 44px; }
/* chmury: żadnych przyklejonych do okna; w nagłówku tylko spod kart */
html.has-sky body::before, html.has-sky body::after { display: none; }
/* ptaki pod balonem, balon między nazwiskiem a portretem */
html.has-birds .masthead::after { left: auto; right: 310px; top: 220px; width: 130px; height: 50px; }

/* ---------- nagłówek na siatce: pola nazwane, stały rytm odstępów (--gap-*), zero luźnych marginesów ---------- */
.masthead { --gap-s: 12px; --gap-m: 24px; --gap-l: 40px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 330px; grid-template-areas: "banner banner" "name portrait" "controls portrait"; column-gap: var(--gap-l); row-gap: 0; align-items: start; padding: var(--gap-s) 0 var(--gap-l); }
.masthead .mast-grid { display: contents; }
.masthead .banner { grid-area: banner; justify-self: center; margin: 0 0 var(--gap-m); }
.masthead mech-letters { grid-area: name; min-width: 0; }
.masthead .portrait { grid-area: portrait; justify-self: end; margin: 0; }
.masthead .controls { grid-area: controls; justify-self: start; margin: var(--gap-m) 0 0; }
@media (max-width: 900px) { .masthead { grid-template-columns: minmax(0, 1fr); grid-template-areas: "banner" "name" "portrait" "controls"; } .masthead .portrait { justify-self: start; margin-top: var(--gap-m); } }
/* popiersie: pasek z głowy krótszy i wyśrodkowany na otworze */
.mech-bust .bust-paper { left: 33%; width: 30%; height: 27%; }

.mech-bust .bust-paper-inner { font-size: 7.5px; letter-spacing: .05em; padding: 8px 5px 0; }

/* ======================================================================
   Nagłówek wg wzorca 1:1 (proporcje zmierzone z assets/ref/wzorzec-styl.png, skala 1180/667):
   tagline = czarna etykieta nad „Jacek”; dwa rzędy dużych liter na skrawkach (Jacek wcięty), bez sznurków; podpis maszynowy
   tuż pod nazwiskiem; rząd przełączników bezpośrednio na niebie; owalny portret duży, od góry, w prawej kolumnie;
   balon między nazwiskiem a portretem; chmury spod skraju lewego i za ramą. Wysokość całości ok. 520 px.
   ====================================================================== */
.masthead { grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "banner portrait" "name portrait" "controls portrait"; column-gap: 10px; padding: 6px 0 18px; }
.masthead .banner { justify-self: start; margin: 0 0 var(--gap-s) 8%; padding: 3px 14px 2px; background: var(--ink); color: var(--paper-light); border: 1px solid var(--gold); box-shadow: 3px 3px 0 rgb(42 33 26 / .25); font-size: 15px; }
.masthead .portrait { margin-top: 10px; }
.masthead mech-letters .letters-stage { padding-top: 0; }
.masthead mech-letters .string { height: 6px; opacity: 0; }
.masthead mech-letters .letter-line { gap: 4px; }
.masthead mech-letters .line-0 { margin-left: 8%; }
.masthead mech-letters .line-1 { margin: -2px 0 0 0; }
.masthead mech-letters .line-0 .letter.has-img, .masthead mech-letters .line-1 .letter.has-img { --letter-h: clamp(58px, 9.4vw, 112px); }
.masthead mech-letters .letter.has-img.has-scrap { padding: calc(var(--letter-h) * .07) calc(var(--letter-h) * .1) calc(var(--letter-h) * .08); height: calc(var(--letter-h) * 1.15); }
.masthead mech-letters .letters-sub { display: inline-block; margin: 8px 0 0 8%; padding: 4px 12px 3px; background: rgb(246 240 226 / .92); border: 1px solid var(--ink-faint); box-shadow: 2px 3px 0 rgb(42 33 26 / .18); color: var(--ink); font-size: 13px; letter-spacing: .2em; white-space: nowrap; font-weight: 700; }
.masthead mech-letters .letters-sub span { display: inline; }
.masthead mech-letters .letters-sub span + span::before { content: " · "; }
/* rząd przełączników: bez półki, mniejsze, etykiety na przyrządach lub tuż obok */
.masthead .controls { display: flex; align-items: flex-start; gap: 26px; margin: 16px 0 0 8%; padding: 0; background: none; border: 0; box-shadow: none; filter: none; }
.mech-knife.has-art .knife { width: 160px; height: 97px; margin: 0; }
.mech-knife.has-art .knife-lbl { bottom: auto; top: 54%; font-size: 10px; padding: 0 5px; background: var(--paper-light) var(--grain); border: 1px solid var(--ink); color: var(--ink); line-height: 1.5; }
.mech-knife .knife-lbl-l { left: 7%; } .mech-knife .knife-lbl-r { right: 7%; }
.mech-knife.has-art[data-st="left"] .knife-lbl-l, .mech-knife.has-art[data-st="right"] .knife-lbl-r { color: var(--red); text-decoration: none; }
.mech-biglever.has-art .biglever { width: 70px; height: 112px; margin-right: 200px; }
.mech-biglever.has-art .bl-art { bottom: 0; }
.mech-biglever.has-art .bl-plate { top: 4px; bottom: auto; left: 100%; right: auto; margin-left: 10px; white-space: nowrap; padding: 4px 10px; font-size: 10px; }
html.has-hand .mech-biglever.has-art .biglever::after { content: ""; position: absolute; left: calc(100% + 6px); top: 44px; width: 78px; height: 52px; background: var(--eng-hand) center / contain no-repeat; pointer-events: none; }
.scroll-toggle { align-self: flex-start; margin: 8px 0 0; }
html.has-toggle_on.has-toggle_off .scroll-toggle .tg-label, html.has-toggle_on.has-toggle_off .scroll-toggle[aria-pressed="true"] .tg-label { background: var(--ink); color: var(--paper-light); border: 1px solid var(--gold); box-shadow: 3px 3px 0 rgb(42 33 26 / .25); }
.scroll-toggle .tg-art { width: 44px; height: 48px; }
/* balon między nazwiskiem a portretem; ptaków we wzorcu nie ma */
html.has-balloon .masthead::before { right: 345px; top: 4px; width: 96px; height: 124px; }
html.has-birds .masthead::after { display: none; }
@media (max-width: 900px) { .masthead { grid-template-columns: minmax(0, 1fr); grid-template-areas: "banner" "name" "portrait" "controls"; } .masthead .banner, .masthead mech-letters .line-0, .masthead mech-letters .letters-sub, .masthead .controls { margin-left: 0; } .masthead .controls { flex-wrap: wrap; } .masthead mech-letters .letters-sub { white-space: normal; } .mech-biglever.has-art .biglever { margin-right: 190px; } }

/* nagłówek: balon i ręka większe jak we wzorcu, etykieta dźwigni czytelniejsza */
html.has-balloon .masthead::before { right: 335px; top: 0; width: 120px; height: 150px; }
html.has-hand .mech-biglever.has-art .biglever::after { left: calc(100% + 2px); top: 40px; width: 112px; height: 72px; }
.mech-biglever.has-art .bl-plate { font-size: 11.5px; padding: 5px 12px; }

/* dźwignia i ręka większe, jak we wzorcu */
.mech-biglever.has-art .biglever { width: 84px; height: 132px; margin-right: 210px; }
html.has-hand .mech-biglever.has-art .biglever::after { left: calc(100% - 2px); top: 52px; width: 130px; height: 84px; }
.mech-biglever.has-art .bl-plate { top: 10px; }

/* ======================================================================
   Podsumowanie: plansza (arkusz) zwija się do głowy popiersia; popiersie poza arkuszem, po zamknięciu samo na niebie i lewituje
   ====================================================================== */
#s-summary { position: relative; }
/* geometria planszy: linia ramki 50px od brzegu (46px border + 4px), treść 80px od brzegu => równy margines 30px od ramki z każdej strony;
   popiersie zaczyna się na tej samej linii treści (x=80), karta zaczyna się za popiersiem (80 + 262 + 40) i kończy 80px przed prawym brzegiem */
#s-summary { --board-gutter: 34px; --board-content: 80px; --bust-w: 262px; --bust-gap: 40px; }
#s-summary { --bust-h: 386px; }
#s-summary .sheet-inner { padding: var(--board-gutter) var(--board-gutter) var(--board-gutter) calc(var(--board-content) + var(--bust-w) + var(--bust-gap) - 46px); min-height: calc(var(--bust-h) + 2 * (var(--board-content) - 46px) + 2 * 46px); box-sizing: border-box; display: grid; grid-template-rows: auto minmax(0, 1fr); }
#s-summary .bust-card { display: flex; flex-direction: column; justify-content: center; }   /* karta wypełnia wysokość planszy, tekst wyśrodkowany w pionie */
#s-summary::before { clip-path: var(--roll-clip, none); }                    /* cień arkusza zwija się razem z planszą */
#s-summary .bust-card { margin: 0; max-width: none; width: auto; }
#s-summary .sheet h2 { margin: 0 0 24px; }
#s-summary mech-bust { position: absolute; left: var(--board-content, 80px); top: 50%; transform: translateY(-50%); z-index: 3; transition: left .9s ease, transform .9s ease; }
#s-summary mech-bust .bust-wrap { display: block; }
#s-summary mech-bust.is-floating { left: 50%; transform: translate(-50%, -50%); }
#s-summary mech-bust.is-floating .bust { animation: bust-float 3.8s ease-in-out infinite; }
@keyframes bust-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@media (prefers-reduced-motion: reduce) { #s-summary mech-bust.is-floating .bust { animation: none; } }
.mech-bust .bust-paper { display: none !important; }
.bust-roll { position: absolute; z-index: 2; height: 30px; pointer-events: none; border-radius: 15px; background: linear-gradient(180deg, #fff9ea, #e2d3ad 55%, #8f7b55); box-shadow: 0 3px 0 rgb(42 33 26 / .3); }
/* rulon z ryciny (1200x193): końce jako stałe nakładki, środek rozciągany — border-image 3-plastrowy, proporcje końcówek zachowane */
html.has-prop_scroll .bust-roll { height: 46px; border-radius: 0; box-shadow: none; background: none; box-sizing: border-box; border: solid transparent; border-width: 0 46px; border-image: var(--eng-prop_scroll) 0 13.3% 0 13.3% fill / 0 46px 0 46px / 0 stretch; filter: drop-shadow(0 4px 0 rgb(42 33 26 / .25)); }
@media (max-width: 900px) { #s-summary .sheet-inner { padding: 300px var(--board-gutter) var(--board-gutter); } #s-summary mech-bust { left: 50%; top: 40px; transform: translateX(-50%) scale(.7); transform-origin: top center; } }

/* tekst karty podsumowania wyjustowany, z dzieleniem wyrazów; ostatni wiersz do lewej */
#s-summary .bust-card p { text-align: justify; text-align-last: left; hyphens: auto; -webkit-hyphens: auto; }
#s-summary .bust-card h4 { text-align: left; }

/* karta podsumowania leży poza <mech-bust> (id summary-card), więc dawne reguły .mech-bust .bust-card jej nie łapały: brak paddingu,
   tekst wchodził na wewnętrzną ramkę (.cut::after, 8px od brzegu). Teraz: tekst 30px od LINII wewnętrznej ramki (8 + 30 = 38px). */
#s-summary .bust-card { --card-line: 8px; --card-gutter: 30px; padding: calc(var(--card-line) + var(--card-gutter)); }
#s-summary .bust-card h4 { margin: 0 0 12px; font-size: 18px; letter-spacing: .12em; }
#s-summary .bust-card p { margin: 0; font-size: 15px; line-height: 1.6; }
#s-summary .bust-card p::first-letter { font: 900 44px/1 var(--font-display); float: left; margin: 4px 8px 0 0; color: var(--red); }

/* ======================================================================
   Szafa wg wzorca (uwagi Jacka 17.10): korpus w ujęciu 3/4 z widocznym bokiem (cabinet_body2), szuflady jako skrzynki
   z boczkiem odsłanianym przy wysuwaniu (drawer_box, etykieta w wyciętym oknie), łańcuch z przypiętą strzałką, bloczek u góry,
   korba z zębatką u dołu (crank_gear) kręci łańcuchem (background-position-y jedzie razem ze strzałką).
   ====================================================================== */
html.has-cabinet2 .mech-cabinet .cabinet { background-image: var(--eng-cabinet2); aspect-ratio: 752 / 1332; }
html.has-cabinet2 .mech-cabinet .drawers { left: 28.06%; top: 12.84%; width: 60.37%; height: 81.98%; }   /* otwory zmierzone z alfy cabinet_body2 */
html.has-cabinet2 .mech-cabinet .drawer { height: 63.9% !important; }
html.has-cabinet2 .mech-cabinet .cab-plate { left: 32.1%; right: 15.6%; top: 5.2%; font-size: 9.5px; }
/* szuflada-skrzynka: front = szerokość otworu, boczek doklejony z prawej (--end); clip-path odsłania boczek dopiero gdy szuflada wyjeżdża */
/* łańcuch grubszy, strzałka na łańcuchu, bloczek u góry, korba z rączką */
html.has-chain_segment .mech-cabinet .chain { width: 22px; margin-left: -11px; }
html.has-prop_pointer .mech-cabinet .lift { left: 50%; right: auto; margin: 0 0 0 -14px; z-index: 3; width: 96px; height: 54px; background: var(--eng-prop_pointer) center / contain no-repeat; border: 0; box-shadow: none; filter: drop-shadow(4px 5px 0 rgb(42 33 26 / .25)); }
html.has-prop_pointer .mech-cabinet .lift span { display: none; }
html.has-prop_pulley_top .mech-cabinet .shaft::before { content: ""; position: absolute; left: 50%; top: -30px; width: 54px; height: 70px; margin-left: -27px; background: var(--eng-prop_pulley_top) center / contain no-repeat; z-index: 2; filter: drop-shadow(3px 4px 0 rgb(42 33 26 / .25)); }
html.has-crank_gear .mech-cabinet .crank::before { background-image: var(--eng-crank_gear); }
html.has-crank_gear .mech-cabinet .crank { width: 110px; height: 110px; margin-left: -55px; bottom: 6px; }

/* szafa: szersza kolumna, etykiety szuflad w jednym wierszu (długie nazwy z wielokropkiem; pełna nazwa jest w dokumencie obok) */
html.has-cabinet2 #s-experience .cab-wrap, html.has-cabinet2 .mech-cabinet .cab-wrap { grid-template-columns: 330px 90px minmax(0, 1fr); }
html.has-drawer_front2 .mech-cabinet .label { padding: 0 5px; gap: 0; }
html.has-drawer_front2 .mech-cabinet .label b { display: block; font-size: 9.5px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset; }
html.has-drawer_front2 .mech-cabinet .label small { font-size: 7.5px; line-height: 1.1; }

html.has-chain_segment .mech-cabinet .chain { bottom: 60px; }   /* łańcuch dochodzi do osi zębatki */

/* szafa jak we wzorcu: szersza (czytelne etykiety), strzałka większa */
html.has-cabinet2 #s-experience .cab-wrap, html.has-cabinet2 .mech-cabinet .cab-wrap { grid-template-columns: 380px 96px minmax(0, 1fr); }
html.has-drawer_front2 .mech-cabinet .label b { font-size: 10.5px; } html.has-drawer_front2 .mech-cabinet .label small { font-size: 8.5px; }
html.has-prop_pointer .mech-cabinet .lift { width: 124px; height: 68px; margin-left: -18px; }

/* szuflada: front (drawer_front2, bez ścianki) + boczek z LEWEJ (drawer_side) jako równoległobok: szerokość = wysuw (--out),
   pochylony skewY(11.3°) = tangens 0.2 (front jedzie w prawo i o 0.2 wysuwu w dół, jak „ku widzowi” przy głębi uciekającej w górę-lewo) */
html.has-drawer_front2 .mech-cabinet .drawer { overflow: visible; clip-path: none; }
html.has-drawer_front2 .mech-cabinet .drawer.is-open { z-index: 2; }
html.has-drawer_front2 .mech-cabinet .drawer-face { position: relative; z-index: 1; width: 100%; background: var(--eng-drawer_front2) center / 100% 100% no-repeat; }
html.has-drawer_front2 .mech-cabinet .drawer.is-open .drawer-face { filter: drop-shadow(-4px 4px 3px rgb(0 0 0 / .45)); }
html.has-drawer_front2 .mech-cabinet .label { left: 19.5%; width: 72.1%; top: 23.3%; height: 56.4%; box-shadow: none; border: 0; background: var(--paper-light) var(--grain); }
.mech-cabinet .drawer-side { display: none; }
html.has-drawer_side .mech-cabinet .drawer-side { display: block; position: absolute; left: 0; top: 0; height: 100%; width: var(--out, 0px); transform-origin: left top; transform: skewY(11.3deg); background: var(--eng-drawer_side) center / 100% 100% no-repeat; z-index: 0; pointer-events: none; }

/* ---------- szuflada jako skrzynka: ciemne wnętrze otworu, boczek niższy od frontu (skrzynka jest niższa niż front), cień krawędzi ---------- */
html.has-cabinet .mech-cabinet .drawer { background: #241910; box-shadow: inset 0 0 16px rgb(0 0 0 / .65); }   /* wnętrze szafy widoczne za wysuniętym frontem */
/* siatka (debug=wire): zielony = otwór (nieruchomy), czerwony = front, niebieski = boczek; ryciny wyłączone */
html.debug-wire .mech-cabinet .cabinet { background-image: none !important; filter: none !important; outline: 2px solid #999; }
html.debug-wire .mech-cabinet .drawer { background: rgb(0 128 0 / .08) !important; box-shadow: none !important; outline: 2px dashed #0a0; }
html.debug-wire .mech-cabinet .drawer-face { background: rgb(255 255 255 / .6) !important; outline: 2px solid #c00; filter: none !important; }
html.debug-wire .mech-cabinet .drawer-side { background: rgb(0 0 255 / .15) !important; outline: 2px solid #06c; box-shadow: none !important; filter: none !important; }
html.debug-wire .mech-cabinet .label { visibility: hidden; }

/* ---------- skrzynka szuflady w rzucie ukośnym szafy: oś głębi o nachyleniu --depth-slope (zmierzone z korpusu: 0.471) ----------
   front jedzie o (out, out*slope); lewy boczek = równoległobok skewY(atan slope) między krawędzią otworu a frontem, niższy od frontu o lip 9%;
   wierzch skrzynki = równoległobok skewX między tylną a przednią krawędzią górną (widać do środka: kartki jak w kartotece) */
html.has-cabinet2 .mech-cabinet { --depth-slope: 0.471; --vp-x: -1.8644; --vp-y: 0.4469; --front-x: 0.1841; }   /* punkt zbiegu i horyzont ryciny korpusu (ułamki pudełka szafy) */
html.has-drawer_front2 .mech-cabinet .drawer-face { transform-origin: left center; }
/* nad horyzontem (--skew ujemny) widać SPÓD skrzynki zamiast wierzchu: ten sam element zakotwiczony u dołu, bez kartek */
html.has-drawer_side .mech-cabinet .drawer.is-above .drawer-top { top: auto; bottom: 9%; height: var(--abs-rise, 0px); transform-origin: left bottom; transform: skewX(calc(-1 * (90deg - var(--abs-skew, 11.3deg)))); background: linear-gradient(90deg, rgb(0 0 0 / .35), rgb(0 0 0 / .1)), var(--eng-drawer_side) center / 100% 100% no-repeat; filter: brightness(.7); }
html.has-cabinet .mech-cabinet .drawer { background: #1b120c; box-shadow: inset 0 0 18px rgb(0 0 0 / .7); }
html.has-drawer_side .mech-cabinet .drawer-side { top: 9%; height: 82%; transform: skewY(var(--skew, 11.3deg)); background: linear-gradient(90deg, rgb(0 0 0 / .55), rgb(0 0 0 / .18)), var(--eng-drawer_side) center / 100% 100% no-repeat; filter: brightness(.85); }
.mech-cabinet .drawer-top { display: none; }
html.has-drawer_side .mech-cabinet .drawer-top { display: block; position: absolute; left: 0; top: 9%; width: 100%; height: var(--abs-rise, 0px); transform-origin: left top; transform: skewX(calc(90deg - var(--abs-skew, 11.3deg))); background: repeating-linear-gradient(180deg, rgb(236 222 190 / .38) 0 1px, transparent 1px 3px), linear-gradient(180deg, #17100a, #3b2918); z-index: 0; pointer-events: none; }   /* kartki widziane od góry: linie równoległe do frontu, gęściej w głąb */
html.debug-wire .mech-cabinet .drawer-top { background: rgb(255 140 0 / .25) !important; outline: 2px solid #e80; }

/* ======================================================================
   Szafa 3.0 — rzut ukośny z modelu (assets/model/cabinet_model.json): korpus i skrzynka wygenerowane Z SIATEK, więc dzielą oś głębi
   (nachylenie 0.4). Szuflada = JEDNA rycina wysuniętej skrzynki; stan q∈[0,1] przesuwa ją o (q−1)·pull wzdłuż osi głębi,
   a to, co wjeżdża za płaszczyznę frontu (lewo/góra otworu), ucina clip-path. Jednostki cqw = % szerokości otworu (kontener = .drawer).
   ====================================================================== */
html.has-cabinet3 .mech-cabinet .cabinet { background-image: var(--eng-cabinet3); aspect-ratio: var(--cab3-ar, 1122 / 1402); }
html.has-cabinet3 .mech-cabinet .drawers { left: var(--cab3-left, 9.00%); top: var(--cab3-top, 12%); width: var(--cab3-w, 82.00%); height: var(--cab3-h, 78%); }
html.has-cabinet3 .mech-cabinet .drawer { height: var(--cab3-row, 70.8%) !important; }
html.has-cabinet3 .mech-cabinet .cab-plate { left: var(--cab3-plate-left, 30%); right: var(--cab3-plate-right, 30%); top: var(--cab3-plate-top, 7%); font-size: 9.5px; }
html.has-drawer_box3 .mech-cabinet { --box-pull: 0.32; --box-slope: 0.4; --lbl-x: 0.18; --lbl-y: 0.0456; --lbl-w: 0.76; --lbl-h: 0.1161; --box-l: 0.03; --box-t: 0.0166; --box-w: 1.2900; --box-h: 0.3187; }
html.has-drawer_box3 .mech-cabinet .drawer { container-type: inline-size; --q: 0; overflow: visible; clip-path: inset(0 -60% -140% 0); background: #1b120c; box-shadow: inset 0 0 18px rgb(0 0 0 / .7); border-radius: 0; }
html.has-drawer_box3 .mech-cabinet .drawer.is-open { z-index: 2; }
html.has-drawer_box3 .mech-cabinet .drawer-side, html.has-drawer_box3 .mech-cabinet .drawer-top, html.has-drawer_box3 .mech-cabinet .pull { display: none !important; }
html.has-drawer_box3 .mech-cabinet .drawer-face { position: absolute; inset: 0; width: auto; height: auto; padding: 0; border: 0; background: none !important; box-shadow: none; filter: none !important; transform: translate(calc((var(--q) - 1) * var(--box-pull) * 100cqw), calc((var(--q) - 1) * var(--box-pull) * var(--box-slope) * 100cqw)) !important; }
html.has-drawer_box3 .mech-cabinet .drawer-face::before { content: ""; position: absolute; z-index: 1; left: calc(var(--box-l) * 100cqw); top: calc(var(--box-t) * 100cqw); width: calc(var(--box-w) * 100cqw); height: calc(var(--box-h) * 100cqw); background: var(--eng-drawer_box3) center / 100% 100% no-repeat; pointer-events: none; }
html.has-drawer_box3 .mech-cabinet .drawer.is-open .drawer-face::before { filter: drop-shadow(-4px 5px 3px rgb(0 0 0 / .45)); }
html.has-drawer_box3 .mech-cabinet .label { z-index: 0; left: calc((var(--box-pull) + var(--lbl-x)) * 100cqw); top: calc((var(--box-pull) * var(--box-slope) + var(--lbl-y)) * 100cqw); width: calc(var(--lbl-w) * 100cqw); height: calc(var(--lbl-h) * 100cqw); min-width: 0; padding: 0 4px; gap: 0; display: grid; align-content: center; background: var(--paper-light) var(--grain); border: 0; box-shadow: none; }
html.has-drawer_box3 .mech-cabinet .label b { display: block; font-size: 10.5px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.has-drawer_box3 .mech-cabinet .label small { font-size: 8.5px; line-height: 1.1; }
html.debug-wire .mech-cabinet .drawer-face::before { background: rgb(255 255 255 / .5) !important; outline: 2px solid #c00; }

/* pomiary rycin 3.0 (scripts/measure-cabinet.py): otwory korpusu i położenie frontu w rycinie skrzynki */
html.has-cabinet3 .mech-cabinet { --cab3-ar: 866 / 1323; --cab3-left: 34.64%; --cab3-top: 21.62%; --cab3-w: 50.46%; --cab3-h: 69.31%; --cab3-row: 64.78%; --cab3-plate-left: 43%; --cab3-plate-right: 28%; --cab3-plate-top: 15.9%; }
html.has-drawer_box3 .mech-cabinet { --box-l: 0.0063; --box-t: -0.0168; --box-w: 1.3399; --box-h: 0.3697; --lbl-x: 0.18; --lbl-y: 0.0456; --lbl-w: 0.76; --lbl-h: 0.1086; }

/* tabliczka szafy: jedna linia, mniejsza; etykiety szuflad odrobinę mniejsze */
html.has-cabinet3 .mech-cabinet .cab-plate { font-size: 7.5px; letter-spacing: .1em; padding: 2px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.has-drawer_box3 .mech-cabinet .label b { font-size: 10px; } html.has-drawer_box3 .mech-cabinet .label small { font-size: 8px; }

/* korpus ozdobny (cabinet_body3b): tabliczka = grawer na mosiężnej płytce z ryciny, bez papieru */
html.has-cabinet3 .mech-cabinet .cab-plate { background: transparent; border: 0; box-shadow: none; color: #2a1a0a; height: 3.4%; display: grid; place-items: center; padding: 0 4px; font-size: 7px; letter-spacing: .12em; text-shadow: 0 1px 0 rgb(255 240 200 / .5); }

/* etykiety szuflad 3.0: marginesy 7% szerokości okna, fonty skalowane z szufladą (cqw), nic nie wychodzi poza okno */
html.has-drawer_box3 .mech-cabinet .label { padding: 0 7%; box-sizing: border-box; overflow: hidden; }
html.has-drawer_box3 .mech-cabinet .label b { font-size: 4.4cqw; line-height: 1.15; letter-spacing: .01em; }
html.has-drawer_box3 .mech-cabinet .label small { font-size: 3.3cqw; line-height: 1.1; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* plakietka: sama nazwa w jednej linii (daty są w nagłówku dokumentu obok) — większe marginesy pionowe */
html.has-drawer_box3 .mech-cabinet .label small { display: none; }
html.has-drawer_box3 .mech-cabinet .label b { font-size: 4.8cqw; line-height: 1; }

/* mosiężna płytka zmierzona z ryciny (kolor mosiądzu): napis wyśrodkowany na płytce, z marginesem 6% jej szerokości */
html.has-cabinet3 .mech-cabinet .cab-plate { left: 38.64%; right: 22.64%; top: 15.55%; height: 5.40%; font-size: 6.6px; letter-spacing: .1em; }

/* płytka zmierzona ze zrzutu: x 45.0%..74.7%, y 16.0%..19.0% pudełka szafy; napis wyśrodkowany z marginesem 6% szerokości płytki */
html.has-cabinet3 .mech-cabinet .cab-plate { left: 46.8%; right: 27.1%; top: 16.0%; height: 3.0%; }

/* napis na płytce w dwóch częściach po obu stronach środkowego guzika (szczelina 14% na guzik) */
html.has-cabinet3 .mech-cabinet .cab-plate { display: flex; align-items: center; justify-content: space-between; gap: 14%; padding: 0 3%; font-size: 5.8px; letter-spacing: .06em; }
html.has-cabinet3 .mech-cabinet .cab-plate span { flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; }

html.has-cabinet3 .mech-cabinet .cab-plate { font-size: 5.1px; letter-spacing: .02em; gap: 13%; }

html.has-cabinet3 .mech-cabinet .cab-plate { padding: 0 2%; gap: 11%; font-size: 4.9px; letter-spacing: .02em; box-sizing: border-box; }

/* procentowe padding/gap liczą się od szerokości SZAFY (380px), nie płytki — stąd px */
html.has-cabinet3 .mech-cabinet .cab-plate { padding: 0 3px; gap: 10px; font-size: 4.8px; }

/* ======================================================================
   Katalog umiejętności: ryciny korpusu (okno wycięte → papier pod spodem), zakładek, okładki, rolodeksu, korby, winiet grup i stempli
   ====================================================================== */
html.has-catalogue .mech-catalogue .catalogue { background: var(--eng-catalogue) center / 100% 100% no-repeat; }
html.has-catalogue_tab .mech-catalogue .tab { background: var(--eng-catalogue_tab) center / 100% 100% no-repeat; border: 0; box-shadow: none; filter: drop-shadow(2px 2px 0 rgb(42 33 26 / .2)); }
html.has-catalogue_cover .mech-catalogue .cover { background: var(--eng-catalogue_cover) center / 100% 100% no-repeat; border: 0; filter: drop-shadow(8px 10px 0 rgb(42 33 26 / .2)); }
html.has-rolodex .mech-catalogue .rolo-drum { background: var(--eng-rolodex) center / contain no-repeat; border-radius: 0; filter: drop-shadow(6px 8px 0 rgb(42 33 26 / .2)); }
html.has-rolodex_crank .mech-catalogue .rolo-crank svg { display: none; }
html.has-rolodex_crank .mech-catalogue .rolo-crank { background: var(--eng-rolodex_crank) center / contain no-repeat; transform: rotate(var(--angle, 0deg)); filter: drop-shadow(3px 4px 0 rgb(42 33 26 / .25)); }
html.has-vig0 .mech-catalogue .vig.v0 { background-image: var(--eng-vig0); }
html.has-vig1 .mech-catalogue .vig.v1 { background-image: var(--eng-vig1); }
html.has-vig2 .mech-catalogue .vig.v2 { background-image: var(--eng-vig2); }
html.has-vig3 .mech-catalogue .vig.v3 { background-image: var(--eng-vig3); }
html.has-vig4 .mech-catalogue .vig.v4 { background-image: var(--eng-vig4); }
html.has-vig5 .mech-catalogue .vig.v5 { background-image: var(--eng-vig5); }
html.has-vig6 .mech-catalogue .vig.v6 { background-image: var(--eng-vig6); }
html.has-stamp0 .mech-catalogue .stamp.v0 { border: 0; border-radius: 0; background: var(--eng-stamp0) center / 100% 100% no-repeat; min-width: 36px; height: 17px; padding: 0 7px; }
html.has-stamp1 .mech-catalogue .stamp.v1 { border: 0; border-radius: 0; background: var(--eng-stamp1) center / 100% 100% no-repeat; min-width: 36px; height: 17px; padding: 0 7px; }
html.has-stamp2 .mech-catalogue .stamp.v2 { border: 0; border-radius: 0; background: var(--eng-stamp2) center / 100% 100% no-repeat; min-width: 36px; height: 17px; padding: 0 7px; }

/* pomiary rycin katalogu (okno korpusu v1, karta rolodeksu) */
html.has-catalogue .mech-catalogue { --cat-ar: 1536 / 1024; --cat-win-x: 10.03%; --cat-win-y: 15.33%; --cat-win-w: 77.28%; --cat-win-h: 66.8%; --cat-tabs-x: 91.86%; }   /* korpus v2 (wyższa karta) */
html.has-rolodex .mech-catalogue { --rolo-card-x: 26.93%; --rolo-card-y: 1.56%; --rolo-card-w: 42.34%; --rolo-card-h: 19.55%; --rolo-crank-cx: 0.9214; --rolo-crank-cy: 0.4647; }

/* globus w prawym górnym rogu arkusza umiejętności (dół prawy zajęły zakładki katalogu) */
html.has-prop_globe #s-skills .sheet-inner::after { inset: 44px -14px auto auto; width: 110px; height: 136px; }

/* duży rolodeks (rolodex2) — po regułach has-rolodex / has-rolodex_crank, więc wygrywa kolejnością i specyficznością */
html.has-rolodex2 .mech-catalogue .rolodex .rolo-drum { background: var(--eng-rolodex2) center / 100% 100% no-repeat; border-radius: 0; filter: drop-shadow(9px 11px 0 rgb(42 33 26 / .22)); }
html.has-rolodex2 .mech-catalogue .rolodex .rolo-card { display: none; }
html.has-rolodex2.has-rolodex_crank .mech-catalogue .rolodex .rolo-crank { left: var(--hub-x, 93%); top: var(--hub-y, 41%); width: 26%; height: auto; aspect-ratio: 160 / 148; transform: translate(-50%, -50%) rotate(var(--angle, 0deg)); }

/* maszyna zachodzi na lewy brzeg katalogu (jak w koncepcji); lornetka znika — kompozycję niesie maszyna */
html.has-rolodex2 .mech-catalogue .rolodex { margin-right: -16%; }
html.has-rolodex2 #s-skills .sheet-inner::before { display: none; }
@media (max-width: 900px) { html.has-rolodex2 .mech-catalogue .cat-wrap { grid-template-columns: minmax(0, 1fr); } html.has-rolodex2 .mech-catalogue .rolodex { display: none; } }

/* części korby: url w zmiennych --eng-* rozwiązuje się względem arkusza, który ich używa — dlatego tu (katalog główny), nie w kit/ */
html.has-crank_arm .mech-catalogue .crank-arm { background-image: var(--eng-crank_arm); }
html.has-crank_grip .mech-catalogue .crank-grip { background-image: var(--eng-crank_grip); }

/* tryb klatek całej maszyny (rolo16): tło bębna ustawia JS (klatka), kanwa kwadratowa z miejscem na korbę; winiety gasną na czas obrotu */
html.has-rolo16 .mech-catalogue[data-crank="machine"] .rolodex .rolo-drum { background-size: 100% 100%; background-position: center; background-repeat: no-repeat; }
.mech-catalogue[data-crank="machine"] .crank-parts { display: none; }
.mech-catalogue .rolo-faces { transition: opacity .12s steps(2); }

/* układ dla klatek maszyny: kanwa kwadratowa (maszyna 77% szerokości, zamach korby do 96%); katalog wsunięty pod zamach korby
   tylko na szerokość swojego ozdobnego marginesu — tekst karty zaczyna się za najdalszym wychyleniem rączki */
html.has-rolo16 .mech-catalogue[data-crank="machine"] .cat-wrap { grid-template-columns: 45% minmax(0, 1fr); }
html.has-rolo16 .mech-catalogue[data-crank="machine"] .rolodex { margin-right: 0; }
html.has-rolo16 .mech-catalogue[data-crank="machine"] .catalogue { margin-left: -16.8%; }