/* Webfonts via Google Fonts CDN (no font binaries were provided). latin-ext covers Polish diacritics. */
@import url('https://fonts.googleapis.com/css2?family=Young+Serif&family=Schibsted+Grotesk:wght@400;500;700&family=IBM+Plex+Mono:wght@400;600&display=swap');
:root{
/* base ramps */
--ink:oklch(20% 0.02 60);--ink-soft:oklch(35% 0.02 60);--ink-mute:oklch(50% 0.02 60);--ink-faint:oklch(72% 0.02 75);
--paper:oklch(96.5% 0.015 85);--paper-raised:oklch(99% 0.008 90);--paper-dim:oklch(92% 0.02 85);
--pink-700:oklch(40% 0.17 15);--pink-600:oklch(47% 0.18 15);--pink-500:oklch(54% 0.19 15);--pink-100:oklch(93% 0.04 15);
--lime-500:oklch(89% 0.13 95);--lime-600:oklch(82% 0.13 95);
--green-600:oklch(58% 0.14 150);--amber-600:oklch(76% 0.15 75);--red-600:oklch(54% 0.21 25);
/* semantic aliases */
--brand:var(--pink-500);--brand-strong:var(--pink-600);--brand-press:var(--pink-700);--brand-tint:var(--pink-100);
--highlight:var(--lime-500);--highlight-strong:var(--lime-600);
--text-body:var(--ink);--text-muted:var(--ink-mute);--text-inverse:var(--paper);
--surface-page:var(--paper);--surface-card:var(--paper-raised);--surface-dim:var(--paper-dim);--surface-inverse:var(--ink);
--border-strong:var(--ink);--border-subtle:oklch(85% 0.02 80);
--success:var(--green-600);--warning:var(--amber-600);--danger:var(--red-600);
--focus-ring:oklch(54% 0.19 15 / 0.25);
}
:root{
--font-display:'Young Serif',Georgia,serif;
--font-body:'Schibsted Grotesk',system-ui,sans-serif;
--font-mono:'IBM Plex Mono',ui-monospace,monospace;
--text-xs:12px;--text-sm:14px;--text-base:16px;--text-lg:18px;--text-xl:22px;--text-2xl:28px;--text-3xl:36px;--text-4xl:48px;--text-5xl:64px;--text-hero:clamp(48px,7vw,88px);
--leading-tight:1.02;--leading-snug:1.15;--leading-body:1.55;
--track-display:-0.01em;--track-caps:0.1em;
--weight-display:400;--weight-bold:700;--weight-medium:500;
}
:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;
--container:1160px;--container-narrow:720px;
/* Height of the sticky nav - sticky offsets and scroll-margin read this so anchors don't land under it. */
--nav-h:62px;
}
:root{
--radius-sm:8px;--radius-md:12px;--radius-lg:20px;--radius-xl:28px;--radius-pill:999px;
--border-w:1px;
--shadow-sm:0 1px 2px oklch(20% 0.02 60 / 0.07),0 2px 8px oklch(20% 0.02 60 / 0.06);
--shadow-md:0 2px 4px oklch(20% 0.02 60 / 0.07),0 12px 28px oklch(20% 0.02 60 / 0.11);
--shadow-lg:0 4px 8px oklch(20% 0.02 60 / 0.08),0 24px 56px oklch(20% 0.02 60 / 0.16);
--shadow-lift:inset 0 1px 0 oklch(100% 0 0 / 0.22); /* @kind shadow */
/* deprecated aliases (pre-redesign names) */
--shadow-pop-sm:var(--shadow-sm);--shadow-pop:var(--shadow-md);--shadow-pop-lg:var(--shadow-lg);--shadow-soft:var(--shadow-md);
--ease-snap:cubic-bezier(.2,.8,.3,1.05); /* @kind other */
--dur-fast:120ms; /* @kind other */
--dur-med:220ms; /* @kind other */
}
/* Per-ebook palettes. Set data-book="<slug>" on any container; components read --book-* tokens.
   Full contract per book - a book may be light or dark, so it owns its ink ramp as well:
     accent / accent-strong   action + emphasis colour
     tint / deep              a filled surface and the text that sits on it
     contrast / oncontrast    the loud highlight and the text that sits on it
     page / card / dim        surface ramp
     text / text-soft / text-muted / text-faint / border   ink ramp */
:root,[data-book="poop"]{
/* Ebook #1 - „Kupa wiedzy": warm browns + golden amber */
--book-accent:oklch(48% 0.09 65);--book-accent-strong:oklch(37% 0.08 62);--book-tint:oklch(93% 0.035 80);--book-deep:oklch(28% 0.06 60);--book-contrast:oklch(84% 0.14 85);--book-oncontrast:oklch(28% 0.06 60);
--book-page:oklch(95.8% 0.028 80);--book-card:oklch(98.6% 0.014 84);--book-dim:oklch(92.5% 0.035 80);
--book-text:oklch(20% 0.02 60);--book-text-soft:oklch(35% 0.02 60);--book-text-muted:oklch(50% 0.02 60);--book-text-faint:oklch(72% 0.02 75);--book-border:oklch(85% 0.02 80);
}

/* Ebook #2 - „Złote kajdanki": red on black, deliberately the darkest room in the shop. */
[data-book="kajdanki"]{
--book-accent:oklch(58% 0.23 25);--book-accent-strong:oklch(68% 0.22 25);--book-tint:oklch(19% 0.03 20);--book-deep:oklch(64% 0.21 25);--book-contrast:oklch(80% 0.14 85);--book-oncontrast:oklch(18% 0.03 25);
--book-page:oklch(15% 0.014 25);--book-card:oklch(20% 0.02 22);--book-dim:oklch(25% 0.025 22);
--book-text:oklch(95% 0.008 60);--book-text-soft:oklch(82% 0.015 40);--book-text-muted:oklch(66% 0.02 30);--book-text-faint:oklch(52% 0.02 30);--book-border:oklch(32% 0.03 22);
}

/* Sample future themes - replace when real ebooks ship */
[data-book="sex"]{--book-accent:oklch(52% 0.2 20);--book-accent-strong:oklch(40% 0.17 18);--book-tint:oklch(94% 0.03 15);--book-deep:oklch(28% 0.1 15);--book-contrast:oklch(85% 0.1 15);--book-oncontrast:oklch(28% 0.1 15);
--book-page:oklch(96.2% 0.022 18);--book-card:oklch(98.8% 0.01 18);--book-dim:oklch(93% 0.03 16);
--book-text:oklch(20% 0.02 20);--book-text-soft:oklch(35% 0.02 20);--book-text-muted:oklch(50% 0.02 20);--book-text-faint:oklch(72% 0.02 20);--book-border:oklch(86% 0.02 18);}
[data-book="death"]{--book-accent:oklch(45% 0.12 300);--book-accent-strong:oklch(33% 0.1 300);--book-tint:oklch(94% 0.02 300);--book-deep:oklch(25% 0.06 300);--book-contrast:oklch(85% 0.07 300);--book-oncontrast:oklch(25% 0.06 300);
--book-page:oklch(96.5% 0.016 300);--book-card:oklch(99% 0.008 300);--book-dim:oklch(93.5% 0.022 300);
--book-text:oklch(20% 0.02 300);--book-text-soft:oklch(35% 0.02 300);--book-text-muted:oklch(50% 0.02 300);--book-text-faint:oklch(72% 0.02 300);--book-border:oklch(86% 0.015 300);}

/* Wearing the book's palette. Scoped to the attribute (never bare :root), so the house palette
   still owns the shop and static pages - only a themed view recolours. The ink ramp is remapped
   too, otherwise a dark book would paint near-black text onto a near-black page. */
[data-book]{
--surface-page:var(--book-page);--surface-card:var(--book-card);--surface-dim:var(--book-dim);
/* --ink stays put on purpose: it is the "always near-black" used by the censor bar, the inverse
   surfaces and text sitting on the lime highlight, none of which should flip with the theme. */
--text-body:var(--book-text);--ink-soft:var(--book-text-soft);
--text-muted:var(--book-text-muted);--ink-mute:var(--book-text-muted);--ink-faint:var(--book-text-faint);
--border-subtle:var(--book-border);
}
*{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);line-height:var(--leading-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--weight-display);letter-spacing:var(--track-display);line-height:var(--leading-snug);margin:0}
a{color:var(--brand-press);text-decoration-thickness:2px;text-underline-offset:2px}
a:hover{color:var(--brand-strong)}
::selection{background:var(--highlight);color:var(--ink)}
/* tabooks component classes - soft editorial: no hard borders, layered shadows, pill CTAs */
/* Default size is baked in: a .tb-btn without a --sm/--md/--lg modifier used to have no height
   and no padding at all, so "Kup ebooka" and "Zapisz się" rendered as bare coloured text. */
.tb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 24px;font-family:var(--font-body);font-size:var(--text-base);font-weight:700;white-space:nowrap;border:none;border-radius:var(--radius-pill);cursor:pointer;text-decoration:none;line-height:1;background:var(--surface-card);color:var(--text-body);box-shadow:var(--shadow-lift),var(--shadow-sm);transition:transform var(--dur-fast) ease,box-shadow var(--dur-fast) ease,background var(--dur-fast) ease}
.tb-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-lift),var(--shadow-md)}
.tb-btn:active{transform:translateY(0) scale(.98);box-shadow:var(--shadow-sm)}
.tb-btn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.tb-btn--primary{background:var(--brand);color:var(--paper-raised)}
.tb-btn--primary:hover{background:var(--brand-strong)}
.tb-btn--secondary{background:var(--surface-card);box-shadow:var(--shadow-lift),var(--shadow-sm),inset 0 0 0 1px var(--border-subtle)}
.tb-btn--ghost{box-shadow:none;background:transparent}
.tb-btn--ghost:hover{transform:none;box-shadow:none;background:var(--surface-dim)}
.tb-btn--ghost:active{transform:none;box-shadow:none;background:var(--brand-tint)}
.tb-btn--sm{height:36px;padding:0 16px;font-size:var(--text-sm)}
.tb-btn--md{height:46px;padding:0 24px;font-size:var(--text-base)}
.tb-btn--lg{height:56px;padding:0 32px;font-size:var(--text-lg)}
.tb-btn[disabled]{opacity:.45;pointer-events:none}
.tb-iconbtn{padding:0}
.tb-iconbtn.tb-btn--sm{width:36px}.tb-iconbtn.tb-btn--md{width:46px}.tb-iconbtn.tb-btn--lg{width:56px}
.tb-field{display:flex;flex-direction:column;gap:6px;font-family:var(--font-body)}
.tb-field__label{font:700 var(--text-sm) var(--font-body)}
.tb-field__hint{font-size:var(--text-xs);color:var(--text-muted)}
.tb-field__error{font-size:var(--text-xs);font-weight:600;color:var(--danger)}
.tb-input{height:46px;padding:0 16px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--surface-card);font:500 var(--text-base) var(--font-body);color:var(--text-body);width:100%;transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.tb-input::placeholder{color:var(--ink-faint)}
.tb-input:focus-visible,.tb-select:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--focus-ring)}
.tb-input.is-error{border-color:var(--danger)}
.tb-selectwrap{position:relative;display:inline-flex;width:100%}
.tb-select{appearance:none;width:100%;height:46px;padding:0 40px 0 16px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--surface-card);font:500 var(--text-base) var(--font-body);color:var(--text-body);cursor:pointer;transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.tb-selectwrap::after{content:"";position:absolute;right:16px;top:50%;margin-top:-3px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--ink-mute);pointer-events:none}
.tb-check,.tb-radio{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font:500 var(--text-base) var(--font-body);color:var(--text-body)}
.tb-check input,.tb-radio input{appearance:none;width:22px;height:22px;margin:0;border:1.5px solid var(--ink-faint);background:var(--surface-card);display:grid;place-items:center;cursor:pointer;flex:none;transition:background var(--dur-fast),border-color var(--dur-fast)}
.tb-check input{border-radius:7px}
.tb-check input:checked{background:var(--brand);border-color:var(--brand)}
.tb-check input:checked::after{content:"✓";font:700 14px var(--font-body);color:var(--paper-raised)}
.tb-radio input{border-radius:50%}
.tb-radio input:checked{background:var(--brand);border-color:var(--brand);box-shadow:inset 0 0 0 4px var(--surface-card)}
.tb-check input:focus-visible,.tb-radio input:focus-visible,.tb-switch input:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring)}
.tb-radio input:checked:focus-visible{box-shadow:inset 0 0 0 4px var(--surface-card),0 0 0 3px var(--focus-ring)}
.tb-switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font:500 var(--text-base) var(--font-body)}
.tb-switch input{appearance:none;width:48px;height:28px;margin:0;border:none;border-radius:var(--radius-pill);background:var(--ink-faint);position:relative;cursor:pointer;flex:none;transition:background var(--dur-med)}
.tb-switch input::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--paper-raised);box-shadow:var(--shadow-sm);transition:left var(--dur-med) var(--ease-snap)}
.tb-switch input:checked{background:var(--brand)}
.tb-switch input:checked::after{left:23px}
.tb-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}
.tb-card--flat{box-shadow:none;border-color:var(--border-subtle)}
.tb-card--inverse{background:var(--surface-inverse);color:var(--text-inverse);border:none}
.tb-badge{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 12px;border:none;border-radius:var(--radius-pill);font:700 var(--text-xs) var(--font-body);letter-spacing:0.06em;text-transform:uppercase;background:var(--surface-dim);color:var(--ink-soft)}
.tb-badge--brand{background:var(--brand-tint);color:var(--brand-press)}
.tb-badge--highlight{background:var(--highlight);color:var(--ink)}
.tb-badge--book{background:var(--book-contrast);color:var(--book-oncontrast)}
.tb-badge--inverse{background:var(--ink);color:var(--paper)}
.tb-tagchip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 14px;border:none;border-radius:var(--radius-pill);font:600 var(--text-sm) var(--font-body);background:var(--surface-dim);color:var(--ink-soft)}
.tb-tagchip button{all:unset;cursor:pointer;font-weight:700;line-height:1;padding:0 2px}
.tb-tagchip button:hover{color:var(--brand-press)}
.tb-tabs{display:flex;gap:24px;border-bottom:1px solid var(--border-subtle);font-family:var(--font-body)}
.tb-tab{margin-bottom:-1px;padding:12px 2px;font:700 var(--text-base) var(--font-body);background:transparent;border:none;border-bottom:2.5px solid transparent;cursor:pointer;color:var(--text-muted);transition:color var(--dur-fast),border-color var(--dur-fast)}
.tb-tab:hover{color:var(--text-body)}
.tb-tab.is-active{border-bottom-color:var(--brand);color:var(--text-body)}
.tb-dialog-overlay{position:fixed;inset:0;background:oklch(20% 0.02 60 / 0.45);display:grid;place-items:center;padding:24px;z-index:50}
.tb-dialog{background:var(--surface-card);border:none;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);max-width:440px;width:100%;padding:28px;font-family:var(--font-body)}
.tb-dialog__title{font:400 var(--text-xl) var(--font-display);letter-spacing:var(--track-display);margin:0 0 10px}
.tb-dialog__body{font-size:var(--text-base);line-height:var(--leading-body)}
.tb-dialog__footer{display:flex;gap:10px;justify-content:flex-end;margin-top:22px}
.tb-toast{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;background:var(--surface-inverse);color:var(--text-inverse);border:none;border-radius:var(--radius-pill);box-shadow:var(--shadow-md);font:500 var(--text-sm) var(--font-body)}
.tb-toast::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--highlight);flex:none}
.tb-toast--success::before{background:oklch(72% 0.14 150)}
.tb-toast--danger::before{background:oklch(65% 0.19 25)}
.tb-toast button{all:unset;cursor:pointer;font-weight:700;margin-left:6px}
.tb-tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);font:600 var(--text-xs) var(--font-body);padding:7px 12px;border-radius:var(--radius-sm);white-space:nowrap;z-index:40;box-shadow:var(--shadow-sm)}
/* Padding/radius in em so the bar keeps the same proportions at 15px and at 76px - fixed px
   made it read as a slab at hero scale. */
/* inline-block with its own line-height: as a plain inline box the background painted the
   font's full content area (Young Serif has tall metrics), which at hero size overlapped the
   line below. This keeps the bar about one em tall, so it redacts the word and nothing else. */
.tb-censor{display:inline-block;line-height:0.78;padding:0.14em 0.1em 0.08em;vertical-align:-0.04em;background:var(--ink);color:transparent;border-radius:0.07em;cursor:pointer;user-select:none;transition:background var(--dur-fast),color var(--dur-fast)}
.tb-censor:hover{background:var(--ink-soft)}
.tb-censor:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.tb-censor.is-revealed{background:var(--highlight);color:var(--ink)}
/* text-decoration/color are reset explicitly: the cover is often wrapped in an <a>, and the
   global a{} rule underlined every line of the cover (kicker, title, subtitle) in brand pink. */
.tb-cover{position:relative;display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:5/7;border:none;border-radius:var(--radius-md);box-shadow:var(--shadow-md);background:var(--book-tint);color:var(--book-deep);text-decoration:none;overflow:hidden;padding:9%;font-family:var(--font-display);flex:none;transition:transform var(--dur-fast) ease,box-shadow var(--dur-fast) ease}
a.tb-cover:hover{color:var(--book-deep);text-decoration:none;transform:translateY(-2px);box-shadow:var(--shadow-lg)}
a.tb-cover:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
.tb-cover::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px oklch(20% 0.02 60 / 0.06),inset 3px 0 6px -3px oklch(20% 0.02 60 / 0.25);pointer-events:none}
.tb-cover--sm{width:140px;font-size:19px}.tb-cover--md{width:220px;font-size:30px}.tb-cover--lg{width:320px;font-size:42px}
.tb-cover__kicker{font:700 0.36em var(--font-body);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--book-accent-strong);display:flex;justify-content:space-between;align-items:center;gap:0.8em}
.tb-cover__title{font-weight:var(--weight-display);line-height:var(--leading-tight);letter-spacing:var(--track-display);font-size:1em;margin:auto 0}
.tb-cover__hl{background:var(--book-accent);color:var(--book-tint);padding:0 0.14em;border-radius:0.12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.tb-cover__sub{font:500 0.44em var(--font-body);color:var(--book-accent-strong);line-height:1.3}
.tb-price{display:inline-flex;align-items:baseline;gap:8px;font-family:var(--font-body);font-variant-numeric:tabular-nums}
.tb-price__now{font-weight:700;font-size:var(--text-2xl);letter-spacing:-0.01em}
.tb-price__was{font-size:var(--text-base);color:var(--text-muted);text-decoration:line-through;font-family:var(--font-body)}
/* Selectors cover <a> as well as <button>: the PHP toggle renders real links (it has to
   navigate), and the button-only rules never matched - it shipped as underlined "PLEN". */
.tb-lang{display:inline-flex;gap:2px;padding:3px;border:none;border-radius:var(--radius-pill);background:var(--surface-dim)}
.tb-lang a,.tb-lang button{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;cursor:pointer;padding:5px 13px;border-radius:var(--radius-pill);font:700 var(--text-sm) var(--font-body);line-height:1;color:var(--text-muted);text-decoration:none;transition:color var(--dur-fast),background var(--dur-fast)}
.tb-lang a.is-active,.tb-lang button.is-active{background:var(--surface-card);color:var(--text-body);box-shadow:var(--shadow-sm)}
.tb-lang a:not(.is-active):hover,.tb-lang button:not(.is-active):hover{color:var(--text-body)}
.tb-lang a:focus-visible,.tb-lang button:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}