/* =====================================================================
   ten.sebelski.pl — design system (Sebelski child theme)
   Ported from the Claude Design handoff, pinned to the CANONICAL variant:
     skin = ink (dark)   ·   display font = DM Serif Display
   Skin/display/mosaic switching from the prototype is intentionally dropped.
   Source: extracted/ten-sebelski-pl/project/ten.sebelski.pl.html <style>
   ===================================================================== */

/* ── design tokens (ink skin baked in) ───────────────────────────── */
:root{
  --paper:#0f0d0b;
  --paper-2:#171411;
  --ink:#efeae1;
  --ink-2:#cfc6b7;
  --muted:#bcb2a3;
  --line:rgba(255,255,255,.10);
  --dark:#000;
  --dark-2:#0a0807;
  --accent:#c8312a;
  --accent-soft:#e8453d;

  /* typography — display pinned to heavy-serif (DM Serif Display) */
  --display:'DM Serif Display','Bodoni Moda',Georgia,serif;
  --display-tracking:-1.5px;
  --display-style:normal;
  --display-weight:400;
  --display-case:none;
  --serif:'Instrument Serif','Cormorant Garamond',Georgia,serif;
  --body:'Newsreader','Charter','Georgia',serif;
  --mono:'JetBrains Mono','IBM Plex Mono',ui-monospace,monospace;
  --maxw:1320px;
  --pad:32px;
}

/* ── Mokko theme typography remap ─────────────────────────────────────
   Mokko drives ALL chrome off two CSS variables:
     body  → var(--font-primary)   (theme default: Inter)
     h1–h6 → var(--font-heading)   (theme default: Neue Montreal)
   The theme prints inline `--font-primary:Inter; --font-heading:Neue Montreal`.
   Redefining them on `body` (a closer ancestor than :root) flips the whole
   site to the design fonts without any specificity fight. */
body{
  --font-primary:'Newsreader','Charter',Georgia,serif;
  --font-heading:'DM Serif Display','Bodoni Moda',Georgia,serif;
}
/* primary nav/menu → mono, per design */
.main-header__nav,
.main-header__nav .navbar-nav,
.main-header__nav .navbar-nav a,
#primary-menu-default,
#primary-menu-default a{
  font-family:var(--mono) !important;
  letter-spacing:.02em;
}

/* ── base ─────────────────────────────────────────────────────────── */
.ts *{box-sizing:border-box}
.ts img{display:block;max-width:100%}
.ts a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#fff}

/* ── nav (floating pill) ──────────────────────────────────────────── */
.nav{position:fixed;top:14px;left:var(--pad);right:0;z-index:50;display:flex;justify-content:flex-start;pointer-events:none}
.nav-inner{
  pointer-events:auto;display:flex;align-items:center;gap:28px;
  padding:10px 16px 10px 20px;
  background:rgba(14,12,10,.62);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  box-shadow:0 6px 24px rgba(0,0,0,.06);
  color:var(--ink);
}
.nav.dark .nav-inner{background:rgba(14,12,10,.42);border-color:rgba(255,255,255,.12);color:#efeae1}
.nav .logo{font-family:var(--serif);font-size:22px;letter-spacing:-.3px;line-height:1;display:flex;align-items:baseline;gap:0}
.nav .logo em{font-style:italic;color:var(--accent);font-weight:400;font-size:22px}
.nav ul{display:flex;list-style:none;margin:0;padding:0;gap:18px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:lowercase}
.nav ul a{padding:6px 4px;position:relative;opacity:.78;transition:opacity .2s, transform .2s}
.nav ul a:hover{opacity:1;transform:translateY(-1px)}
.nav ul a.active{opacity:1}
.nav ul a.active::after{content:'';position:absolute;left:4px;right:4px;bottom:2px;height:1px;background:var(--accent)}
.nav ul a.active::before{content:'';position:absolute;left:-8px;top:50%;width:4px;height:4px;border-radius:50%;background:var(--accent);transform:translateY(-50%);animation:dot 2.4s ease-in-out infinite}
@keyframes dot{0%,100%{opacity:.6;transform:translateY(-50%) scale(1)}50%{opacity:1;transform:translateY(-50%) scale(1.4)}}
.nav .right{display:flex;gap:6px;align-items:center;font-family:var(--mono);font-size:11px}
.nav .pill{padding:5px 12px;border:1px solid currentColor;border-radius:999px;opacity:.7;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
/* center the nav pill on desktop, keep it left-aligned on mobile */
@media(min-width:901px){
  .nav{justify-content:center;left:0;right:0}
}

/* ── hero ─────────────────────────────────────────────────────────── */
/* Elementor wraps the hero HTML widget in two extra divs that default to
   height:auto, collapsing the 100vh hero.  Force the chain to stretch. */
.elementor-element-79dabf2{height:100vh !important}
.elementor-element-79dabf2>.elementor-widget-html{flex:1 1 auto !important;height:100% !important;display:flex !important;flex-direction:column !important}
.hero{position:relative !important;width:100% !important;flex:1 1 auto !important;height:100% !important;min-height:100vh;overflow:hidden;background:var(--dark) center/cover no-repeat;color:#fff;visibility:visible !important}
.hero::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 55%,rgba(0,0,0,.55) 100%);z-index:1}
.hero .ph{position:absolute;inset:0;background:center/cover no-repeat;z-index:0;filter:saturate(.92) contrast(1.02);animation:kenburns 28s ease-in-out infinite;transform-origin:center}
.hero .meta{position:absolute;left:var(--pad);right:var(--pad);bottom:42px;z-index:2;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:end}
.ts.hero h1,.ts .hero h1,.elementor .hero h1,.hero .elementor-widget-container h1{font-family:'DM Serif Display',Georgia,serif !important}
.hero h1{font-family:'DM Serif Display',Georgia,serif !important;font-weight:var(--display-weight);font-size:clamp(48px,7.4vw,116px);line-height:.92;letter-spacing:var(--display-tracking);text-transform:var(--display-case);margin:0;max-width:1100px;text-wrap:balance;animation:rise 1.1s cubic-bezier(.2,.7,.2,1) .15s both;color:#fff !important}
.hero h1 em{font-style:italic;color:#fff;opacity:.95}
.hero h1 .red{color:var(--accent-soft)}
.hero .sub{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.8;margin-top:14px;animation:rise 1.1s cubic-bezier(.2,.7,.2,1) .45s both}
.hero .credit{font-family:var(--mono);font-size:11px;letter-spacing:.04em;opacity:.7;text-align:right;animation:rise 1.1s cubic-bezier(.2,.7,.2,1) .55s both}
.hero .badge{position:absolute;top:32px;right:var(--pad);z-index:2;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.7;animation:rise 1.1s cubic-bezier(.2,.7,.2,1) .05s both}
.hero .scroll-cue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:2;font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;opacity:.55;display:inline-flex;flex-direction:column;align-items:center;gap:6px;animation:scrollcue 2.4s ease-in-out infinite}

/* hero mini social icon row */
.hero-social{position:absolute;top:64px;right:var(--pad);z-index:3;display:flex;gap:8px;align-items:center;animation:rise 1.1s cubic-bezier(.2,.7,.2,1) .35s both}
.hero-social a{width:36px;height:36px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;color:#efeae1;opacity:.78;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.18);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:opacity .2s,color .2s,background .2s,transform .2s,border-color .2s,box-shadow .2s}
.hero-social a:hover{opacity:1;color:#fff;background:rgba(255,255,255,.10);transform:translateY(-2px);border-color:rgba(255,255,255,.35)}
.hero-social a.accent{color:var(--accent-soft);border-color:rgba(232,69,61,.55)}
.hero-social a.accent:hover{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 8px 20px rgba(200,49,42,.32)}
.hero-social svg{width:17px;height:17px}

/* ── section primitives ───────────────────────────────────────────── */
.section{padding:96px var(--pad);max-width:var(--maxw);margin:0 auto}
.section.tight{padding-top:48px;padding-bottom:48px}
.section.full{max-width:none;padding-left:0;padding-right:0}
.section.dark{background:var(--dark);color:#efeae1}
.label{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:8px}
.label::before{content:'';width:18px;height:1px;background:currentColor;display:inline-block;transition:width .6s ease .15s;will-change:width}
.dark .label{color:#a59a8c}
.h-display{font-family:var(--display) !important;font-weight:var(--display-weight);letter-spacing:var(--display-tracking);text-transform:var(--display-case);line-height:1;margin:.18em 0 .4em;text-wrap:balance;color:var(--ink) !important}
.h-display em{font-style:italic}
.h-display .red{color:var(--accent)}
.h-2{font-family:var(--display) !important;font-weight:var(--display-weight);text-transform:var(--display-case);font-size:48px;line-height:1;letter-spacing:var(--display-tracking);margin:0 0 .3em;color:var(--ink) !important}
.h-3{font-family:var(--display) !important;font-weight:var(--display-weight);font-size:30px;line-height:1.1;margin:0 0 .3em;color:var(--ink) !important}
.lead{font-size:21px;line-height:1.5;max-width:46ch;text-wrap:pretty;color:var(--ink-2)}
.dark .lead{color:#cfc6b7}
.muted{color:var(--muted)}
.dark .muted{color:#a59a8c}
.divider{height:1px;background:var(--line);margin:0;border:0}
.dark .divider{background:rgba(255,255,255,.12)}

/* ── Cześć (powitanie) ────────────────────────────────────────────── */
.czesc{display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:64px;align-items:start}
.czesc-photo{position:relative}
.czesc-photo img{width:100%;border-radius:2px;filter:saturate(.95) contrast(1.02)}
.czesc-photo .cap{position:absolute;left:0;bottom:-28px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--muted)}
.czesc-body{color:var(--ink)}
.czesc-body p{margin:0 0 1.1em;font-size:19px;line-height:1.6;text-wrap:pretty;color:var(--ink)}
.czesc-body p:last-child{margin-bottom:0}
.czesc-body .lead-czesc{font-family:var(--serif);font-size:32px;line-height:1.25;letter-spacing:-.5px;color:var(--ink);margin:0 0 .7em;text-wrap:balance}
.czesc-body .lead-czesc em{font-style:italic;color:var(--accent)}
.czesc-signoff{margin:32px 0 0 !important;font-family:var(--display);font-weight:var(--display-weight);font-style:italic;font-size:38px;line-height:1;letter-spacing:-.5px;color:var(--ink)}

/* ── socials block ────────────────────────────────────────────────── */
.socials-block{max-width:520px;font-family:var(--mono)}
.socials-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.socials-row{display:grid;grid-template-columns:22px 96px 1fr;align-items:center;gap:14px;padding:12px 2px;border-bottom:1px solid var(--line);font-size:13px;line-height:1.4}
.socials-ico{display:inline-flex;align-items:center;justify-content:center;color:var(--ink);opacity:.85}
.socials-ico svg{width:18px;height:18px}
.socials-platform{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.socials-links{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;color:var(--ink-2)}
.socials-links a{color:var(--ink);transition:color .2s,transform .2s;display:inline-block}
.socials-links a:hover{color:var(--accent);transform:translateY(-1px)}
.socials-sep{color:var(--muted);opacity:.55}
.socials-row:hover .socials-ico{color:var(--accent);opacity:1;transition:color .25s,opacity .25s}
.socials-coffee{margin-top:18px;display:inline-flex;align-items:center;gap:10px;padding:10px 16px 10px 12px;border:1px solid var(--accent);border-radius:999px;color:var(--accent) !important;font-family:var(--mono);font-size:13px;letter-spacing:.04em;transition:background .25s,color .25s,transform .2s,box-shadow .25s}
.socials-coffee:hover{background:var(--accent);color:#fff !important;transform:translateY(-2px);box-shadow:0 8px 20px rgba(200,49,42,.22)}
.socials-coffee:hover .socials-coffee-host{color:rgba(255,255,255,.7)}
.socials-coffee-ico{display:inline-flex}
.socials-coffee-ico svg{width:18px;height:18px}
.socials-coffee-host{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-left:4px;padding-left:10px;border-left:1px solid currentColor;opacity:.9}

/* ── mozaika foto (3-col CSS masonry) ─────────────────────────────── */
.mosaic-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:20px;margin-bottom:36px}
.mosaic{column-count:3;column-gap:8px}
.mosaic > a{display:block;margin:0 0 8px;break-inside:avoid;position:relative;overflow:hidden;background:#222;border-radius:1px}
.mosaic > a img{width:100%;height:auto;transition:transform .8s ease,filter .4s ease;filter:saturate(.95) contrast(1.02)}
.mosaic > a:hover img{transform:scale(1.02);filter:brightness(1.05)}
.mosaic > a .cap{position:absolute;left:10px;bottom:10px;right:10px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:#fff;opacity:0;transition:opacity .2s;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.mosaic > a:hover .cap{opacity:1}
@media (max-width:1100px){.mosaic{column-count:3}}
@media (max-width:720px){.mosaic{column-count:2;column-gap:6px}}
@media (max-width:480px){.mosaic{column-count:1}}
.gallery-wrap{padding:0 16px}
@media (min-width:1400px){.gallery-wrap{padding:0 24px}}

/* ── slowo / rysunek / cv blocks ──────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split .text p{font-size:19px;line-height:1.6}
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card-ph{aspect-ratio:4/5;background:#211c18;border:1px solid rgba(255,255,255,.08);overflow:hidden}
/* Słowo book-cover placeholder — cap height on all viewports */
.book-cover{max-height:480px}
.card-ph img{width:100%;height:100%;object-fit:cover}

/* ── CV teaser ────────────────────────────────────────────────────── */
.cv-teaser{background:var(--paper-2);border:1px solid var(--line);border-radius:6px;padding:48px;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}
.cv-tabs{display:flex;gap:6px;margin-top:18px}
.cv-tab{font-family:var(--mono);font-size:12px;letter-spacing:.06em;padding:8px 14px;border:1px solid var(--ink);border-radius:999px;color:var(--ink);transition:opacity .2s,background .2s,color .2s,transform .2s,border-color .2s,box-shadow .2s}
.cv-tab:hover{transform:translateY(-2px)}
.cv-tab.on{background:var(--ink);color:var(--paper)}

/* ── CF7 dark skin (ms-contact-form-7 on dark bg) ────────────────── */
.wpcf7 input:not([type="submit"]),
.wpcf7 textarea,
.wpcf7 select{
  width:100%;background:transparent !important;border:0 !important;
  border-bottom:1px solid rgba(255,255,255,.15) !important;
  color:var(--ink) !important;font-family:var(--body) !important;
  font-size:17px !important;padding:14px 0 10px !important;
  border-radius:0 !important;outline:none !important;box-shadow:none !important;
  transition:border-color .2s !important;
}
.wpcf7 input::placeholder,.wpcf7 textarea::placeholder{color:rgba(239,234,225,.55) !important}
.wpcf7 input:focus,.wpcf7 textarea:focus{border-bottom-color:var(--accent) !important}
.wpcf7 textarea{resize:vertical !important;min-height:120px !important;max-height:220px !important}
/* strip CF7's default <br> separators and <p> margins */
.wpcf7 br{display:none !important}
.wpcf7 p{margin:0 0 2px !important}
.wpcf7 .wpcf7-form-control-wrap{display:block;margin-bottom:6px}
.wpcf7 input[type="submit"]{
  font-family:var(--serif) !important;font-size:22px !important;
  font-style:italic !important;background:transparent !important;
  color:var(--accent) !important;cursor:pointer !important;
  border:0 !important;padding:0 !important;margin-top:16px !important;
  width:auto !important;letter-spacing:0 !important;
  display:inline-flex !important;align-items:center !important;gap:10px !important;
  transition:color .2s !important;
}
.wpcf7 input[type="submit"]:hover{color:var(--accent-soft) !important}
.wpcf7 input[type="submit"]::after{content:'→';font-style:normal;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.wpcf7 input[type="submit"]:hover::after{transform:translateX(6px)}
.wpcf7 .wpcf7-not-valid-tip{color:var(--accent-soft);font-size:13px;margin-top:4px;font-family:var(--mono);letter-spacing:.02em}
.wpcf7 .wpcf7-response-output{border:1px solid var(--line);padding:12px 16px;margin-top:16px;font-family:var(--mono);font-size:13px;color:var(--ink-2);border-radius:3px}

/* ── Elementor container width constraints ────────────────────────
   Kontakt (9f95a99) is a full-bleed Elementor flex container whose
   two widget children have no shared maxw wrapper — pin it here.
   Koncertowo text containers (6952899, d723019) are self-constrained
   via inline max-width on their mosaic-head divs; gallery/slider
   widgets now live in separate full-width sibling containers. */
.elementor-element-9f95a99{
  max-width:var(--maxw) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:var(--pad) !important;
  padding-right:var(--pad) !important;
  box-sizing:border-box;
}

/* ── kontakt ──────────────────────────────────────────────────────── */
.kontakt{padding:96px var(--pad);max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px}
.form input,.form textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);font-family:var(--body);font-size:17px;padding:14px 0 10px;color:var(--ink);outline:none;transition:border-color .2s}
.form input::placeholder,.form textarea::placeholder{color:rgba(239,234,225,.55)}
.form input:focus,.form textarea:focus{border-color:var(--accent)}
.form textarea{resize:vertical;min-height:120px}
.form .row{display:grid;gap:18px;margin-bottom:18px}
.form button{font-family:var(--serif);font-size:22px;font-style:italic;background:transparent;border:0;color:var(--accent);cursor:pointer;padding:0;margin-top:14px;display:inline-flex;align-items:center;gap:10px}
.form button::after{content:'→';font-style:normal;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.form button:hover::after{transform:translateX(6px)}

/* ── footer ───────────────────────────────────────────────────────── */
.footer{background:#000;color:#cfc6b7;padding:48px var(--pad) 20px;font-size:13px}
.footer-inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:start}
.footer-brand .brand{font-family:var(--serif);font-size:24px;line-height:1;color:#efeae1;letter-spacing:-.5px;margin-bottom:10px}
.footer-brand .brand em{font-style:italic;color:var(--accent-soft)}
.footer-brand p{max-width:340px;line-height:1.55;color:#cfc6b7;margin:0 0 14px;font-size:13px}
.footer-place{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#7a7064}
.footer-place a{color:#a59a8c;border-bottom:1px solid rgba(255,255,255,.12);transition:color .2s}
.footer-place a:hover{color:var(--accent-soft)}
.footer-social{justify-self:end;width:100%;max-width:460px}
.footer-social .socials-block{font-family:var(--mono)}
.footer-social .socials-list{border-top:1px solid rgba(255,255,255,.10)}
.footer-social .socials-row{border-bottom:1px solid rgba(255,255,255,.10);padding:9px 2px;font-size:12px;grid-template-columns:20px 84px 1fr;gap:12px}
.footer-social .socials-ico{color:#cfc6b7;opacity:.85}
.footer-social .socials-ico svg{width:16px;height:16px}
.footer-social .socials-platform{color:#7a7064;font-size:10px;letter-spacing:.16em}
.footer-social .socials-links{color:#cfc6b7}
.footer-social .socials-links a{color:#efeae1}
.footer-social .socials-links a:hover{color:var(--accent-soft)}
.footer-social .socials-sep{color:#7a7064;opacity:.5}
.footer-social .socials-row:hover .socials-ico{color:var(--accent-soft)}
.footer-social .socials-coffee{margin-top:14px;padding:8px 14px 8px 10px;font-size:12px}
.footer-social .socials-coffee-ico svg{width:16px;height:16px}
.footer-social .socials-coffee-host{font-size:10px}
.footer-colophon{max-width:var(--maxw);margin:32px auto 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#7a7064;padding-top:18px;border-top:1px solid rgba(255,255,255,.08)}
.footer-colophon a{color:#a59a8c;transition:color .2s}
.footer-colophon a:hover{color:var(--accent-soft)}
@media (max-width:760px){.footer-inner{grid-template-columns:1fr;gap:32px}.footer-social{justify-self:start;max-width:none}}

/* ── pasek koncertowy: infinite marquee ──────────────────────────── */
.marquee{position:relative;overflow:hidden;mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
.marquee-track{display:flex;gap:8px;width:max-content;animation:marquee 48s linear infinite;will-change:transform}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-item{flex:0 0 auto;width:280px;aspect-ratio:2/3;overflow:hidden;background:#1a1410;position:relative}
.marquee-item img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease,filter .4s ease;filter:saturate(.95) contrast(1.02)}
.marquee-item:hover img{transform:scale(1.04);filter:brightness(1.08)}
.marquee-item .cap{position:absolute;left:12px;bottom:10px;right:12px;color:#fff;font-family:var(--mono);font-size:11px;letter-spacing:.06em;opacity:0;transition:opacity .25s;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.marquee-item:hover .cap{opacity:.95}

/* ── reveal-on-scroll ─────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}
.reveal .label::before{width:0}
.reveal.in .label::before{width:18px}
.mosaic.reveal > a{opacity:0;transform:translateY(16px) scale(.985);transition:opacity .7s ease,transform .7s ease}
.mosaic.reveal.in > a{opacity:1;transform:none}
.mosaic.reveal.in > a:nth-child(1){transition-delay:0s}
.mosaic.reveal.in > a:nth-child(2){transition-delay:.05s}
.mosaic.reveal.in > a:nth-child(3){transition-delay:.10s}
.mosaic.reveal.in > a:nth-child(4){transition-delay:.15s}
.mosaic.reveal.in > a:nth-child(5){transition-delay:.20s}
.mosaic.reveal.in > a:nth-child(6){transition-delay:.25s}
.mosaic.reveal.in > a:nth-child(7){transition-delay:.30s}
.mosaic.reveal.in > a:nth-child(8){transition-delay:.35s}
.mosaic.reveal.in > a:nth-child(9){transition-delay:.40s}
.mosaic.reveal.in > a:nth-child(n+10){transition-delay:.45s}

/* ── offcanvas drawer (mobile nav) ───────────────────────────────── */
.nav-drawer{
  position:fixed;top:0;right:0;height:100dvh;width:min(300px,82vw);
  background:rgba(12,10,8,.97);
  border-left:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  display:flex;flex-direction:column;justify-content:center;
  padding:56px 36px;
  transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);
  z-index:200;
}
.nav-drawer-close{
  position:absolute;top:18px;right:20px;
  background:none;border:none;cursor:pointer;padding:6px;
  display:flex;flex-direction:column;gap:0;align-items:center;justify-content:center;
  width:32px;height:32px;
}
.nav-drawer-close span{
  display:block;width:20px;height:1.5px;background:var(--ink);
  border-radius:1px;position:absolute;
  transition:opacity .2s;
}
.nav-drawer-close span:nth-child(1){transform:rotate(45deg)}
.nav-drawer-close span:nth-child(2){transform:rotate(-45deg)}
.nav-drawer-close:hover span{background:var(--accent)}
.nav-drawer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:28px}
.nav-drawer ul a{
  font-family:var(--mono);font-size:16px;letter-spacing:.08em;text-transform:lowercase;
  color:var(--ink);opacity:.78;text-decoration:none;
  display:inline-block;transition:opacity .2s,color .2s,transform .2s;
}
.nav-drawer ul a:hover{opacity:1;color:var(--accent);transform:translateX(4px)}
.nav-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  opacity:0;pointer-events:none;
  transition:opacity .32s ease;
  z-index:199;
}
body.nav-open .nav-drawer{transform:translateX(0)}
body.nav-open .nav-backdrop{opacity:1;pointer-events:auto}

/* ── hamburger button ─────────────────────────────────────────────── */
.nav-burger{
  display:none;background:none;border:none;cursor:pointer;padding:6px 2px;
  flex-direction:column;gap:5px;align-items:flex-end;
}
.nav-burger span{
  display:block;height:1.5px;background:var(--ink);
  transition:transform .25s ease,opacity .25s ease,width .25s ease;
  border-radius:1px;
}
.nav-burger span:nth-child(1){width:22px}
.nav-burger span:nth-child(2){width:15px}
.nav-burger span:nth-child(3){width:22px}
body.nav-open .nav-burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.nav-open .nav-burger span:nth-child(2){opacity:0;width:0}
body.nav-open .nav-burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ── nav scroll state (transparent → solid after 40vh) ───────────── */
.nav-inner{transition:background .35s ease,border-color .35s ease,box-shadow .35s ease}
.nav.scrolled .nav-inner{
  background:rgba(14,12,10,.92);
  border-color:rgba(255,255,255,.16);
  box-shadow:0 4px 28px rgba(0,0,0,.22);
}

/* ── scroll progress bar ──────────────────────────────────────────── */
.scroll-progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent);z-index:60;transition:width .12s linear;opacity:.85}

/* ── keyframes ────────────────────────────────────────────────────── */
@keyframes kenburns{0%{transform:scale(1.04) translate(0,0)}50%{transform:scale(1.10) translate(-1.2%,-0.8%)}100%{transform:scale(1.04) translate(0,0)}}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes scrollcue{0%,100%{transform:translateX(-50%) translateY(0);opacity:.45}50%{transform:translateX(-50%) translateY(6px);opacity:.85}}

/* ── reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .hero .ph{animation:none}
  .marquee-track{animation:none}
}

/* ── responsive ───────────────────────────────────────────────────── */
@media (max-width:900px){
  :root{--pad:20px}
  .nav{top:8px}
  .nav-inner{gap:14px;padding:8px 12px}
  /* offcanvas mode: hide inline list, show burger */
  .nav ul{display:none}
  .nav-burger{display:flex}
  .nav .right .pill:nth-child(n+2){display:none}
  /* badge is redundant on mobile — nav pill already identifies the site */
  .hero .badge{display:none}
  /* align social icons with the nav pill on the same horizontal band */
  .hero-social{top:8px;bottom:auto;right:var(--pad);gap:6px}
  .hero-social a{width:34px;height:34px}
  .hero .credit{display:none}
  .czesc{grid-template-columns:1fr;gap:36px}
  .czesc-photo{max-width:320px}
  .section{padding:64px var(--pad)}
  .split{grid-template-columns:1fr}
  /* mosaic-head: stack button below text instead of awkward inline grid */
  .mosaic-head{grid-template-columns:1fr;gap:12px}
  /* cap placeholder tiles so they don't dominate on single-col mobile */
  .book-cover{max-height:300px;aspect-ratio:unset !important}
  .card-ph{aspect-ratio:unset;height:200px}
  .cards-3{grid-template-columns:1fr}
  .kontakt{grid-template-columns:1fr}
  .cv-teaser{padding:32px 24px;grid-template-columns:1fr}
}
@media (max-width:560px){
  .hero-social{top:8px;gap:5px}
  .socials-row{grid-template-columns:22px 1fr;row-gap:2px}
  .socials-platform{grid-column:2;font-size:10px}
  .socials-links{grid-column:2}
}

/* ═══════════════════════════════════════════════════════════════
   CV PAGE  ·  .cv-wrap  (scoped, won't bleed into home page)
   Two modes: data-mode="pro" (cream/light) · data-mode="off" (dark)
   ═══════════════════════════════════════════════════════════════ */

/* ── mode tokens ──────────────────────────────────────────────── */
.cv-wrap[data-mode="pro"],
.cv-wrap.mode-pro,
body[data-mode="pro"]{
  --cv-bg:#f3ede0;--cv-bg-2:#eae3d3;--cv-card:#fbf7ec;
  --cv-card-line:rgba(26,23,20,.10);--cv-ink:#1a1714;--cv-ink-2:#3a342d;
  --cv-muted:#7a7064;--cv-chip-line:rgba(26,23,20,.18);
  /* override Mokko's global --ink so theme heading rules render dark on cream bg */
  --ink:#1a1714;--font-heading:'DM Serif Display',Georgia,serif;
}
.cv-wrap[data-mode="off"],
.cv-wrap.mode-off,
body[data-mode="off"]{
  --cv-bg:#161210;--cv-bg-2:#1f1916;--cv-card:#221b17;
  --cv-card-line:rgba(239,234,225,.10);--cv-ink:#efeae1;--cv-ink-2:#d9d0c1;
  --cv-muted:#8a8175;--cv-chip-line:rgba(239,234,225,.22);
  --ink:#efeae1;
}

/* ── Elementor-built CV (/cv-elementor/) adaptations ──────────────
   The Elementor version reuses the CV classes but wraps everything in
   .e-con flex containers; these overrides restore the grid + pane toggle. */
.cv-wrap .cv-pane.cv-grid{display:grid !important}
.cv-wrap #pane-off{display:none}
.cv-wrap.mode-off #pane-off{display:grid !important}
.cv-wrap.mode-off #pane-pro{display:none !important}

/* ── wrapper ──────────────────────────────────────────────────── */
.cv-wrap{
  background:var(--cv-bg);color:var(--cv-ink);
  font-family:var(--body);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  transition:background .9s cubic-bezier(.7,.05,.3,1),color .9s ease;
  min-height:100vh;
}
.cv-wrap *{box-sizing:border-box}
.cv-wrap img{display:block;max-width:100%}
.cv-wrap a{color:inherit;text-decoration:none}

/* ── page header ──────────────────────────────────────────────── */
.cv-head{max-width:var(--maxw);margin:0 auto;padding:120px var(--pad) 0}
.cv-head .crumb{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cv-muted);display:inline-flex;align-items:center;gap:10px;
}
.cv-head .crumb a{color:var(--cv-muted);border-bottom:1px solid var(--cv-card-line);padding-bottom:1px;transition:color .2s}
.cv-head .crumb a:hover{color:var(--accent)}
.cv-dot{width:4px;height:4px;border-radius:50%;background:var(--accent);display:inline-block}
.cv-head h1{
  font-family:'DM Serif Display',Georgia,serif !important;font-weight:400;
  margin:18px 0 28px;font-size:clamp(56px,8.4vw,140px);line-height:.92;letter-spacing:-2px;
  color:var(--cv-ink);text-wrap:balance;
}
.cv-head h1 em{font-style:italic;color:var(--accent)}
.cv-head .deck{display:grid;grid-template-columns:1fr auto;align-items:end;gap:24px;margin-top:8px}
.cv-head .lede{font-size:20px;line-height:1.45;max-width:62ch;color:var(--cv-ink-2);text-wrap:pretty}
.cv-head .lede em{font-style:italic;color:var(--accent)}
.cv-updated{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cv-muted);text-align:right;line-height:1.5}
.cv-updated span{color:var(--cv-ink-2)}

/* ── tabs ─────────────────────────────────────────────────────── */
.tabs-row{max-width:var(--maxw);margin:42px auto 0;padding:0 var(--pad);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cv-wrap .tab{
  position:relative;cursor:pointer;
  font-family:'DM Serif Display',Georgia,serif;font-style:italic;font-size:28px;line-height:1;
  padding:14px 22px 16px;border:1px solid var(--cv-chip-line);border-radius:999px;
  background:transparent;color:var(--cv-ink);
  transition:background .3s,color .3s,border-color .3s,transform .2s;
}
.cv-wrap .tab small{display:block;font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cv-muted);margin-top:4px}
.cv-wrap .tab:hover{transform:translateY(-2px)}
.cv-wrap .tab.on{background:var(--cv-ink);color:var(--cv-bg);border-color:var(--cv-ink)}
.cv-wrap .tab.on small{color:rgba(255,255,255,.4)}
.cv-spacer{flex:1}
.cv-wrap .util{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;color:var(--cv-muted)}
.cv-wrap .util a{padding:8px 14px;border:1px solid var(--cv-chip-line);border-radius:999px;color:var(--cv-ink);transition:background .2s,color .2s,border-color .2s,transform .2s}
.cv-wrap .util a:hover{background:var(--cv-ink);color:var(--cv-bg);border-color:var(--cv-ink);transform:translateY(-1px)}
.cv-wrap .util a.accent{color:var(--accent);border-color:var(--accent)}
.cv-wrap .util a.accent:hover{background:var(--accent);color:#fff}

/* ── grid ─────────────────────────────────────────────────────── */
.cv-grid{
  max-width:var(--maxw);margin:28px auto 0;padding:0 var(--pad) 80px;
  display:grid;grid-template-columns:minmax(280px,1fr) minmax(360px,1.45fr) minmax(280px,1fr);
  gap:18px;align-items:start;
}
.cv-wrap .col{display:grid;gap:18px;align-content:start}

/* ── card ─────────────────────────────────────────────────────── */
.cv-wrap .card{
  background:var(--cv-card);border:1px solid var(--cv-card-line);border-radius:22px;
  padding:28px 28px 26px;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,background .9s ease,border-color .9s ease;
}
.cv-wrap .card:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.08)}
.cv-wrap .label{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--cv-muted);display:inline-flex;align-items:center;gap:8px}
.cv-wrap .label::before{content:'';width:14px;height:1px;background:currentColor;display:inline-block}

/* ── identity card ────────────────────────────────────────────── */
.card-id .ph-wrap{margin:-28px -28px 22px;border-radius:22px 22px 0 0;overflow:hidden;aspect-ratio:4/5;background:#211c18;position:relative}
.card-id .ph-wrap img{width:100%;height:100%;object-fit:cover;transition:transform 8s ease}
.card-id .ph-wrap .badge{position:absolute;left:14px;bottom:14px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#efeae1;background:rgba(0,0,0,.45);padding:6px 10px;border-radius:999px;backdrop-filter:blur(6px)}
.card-id h2{font-family:'DM Serif Display',Georgia,serif !important;font-style:italic;font-weight:400;font-size:38px;line-height:.95;letter-spacing:-1px;margin:8px 0 4px;color:var(--cv-ink)}
.card-id .role{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cv-ink-2);margin-top:6px}
.card-id .bio{margin-top:14px;font-size:15px;line-height:1.55;color:var(--cv-ink-2)}
.card-id .bio em{font-style:italic;color:var(--accent)}

/* ── h-3 ──────────────────────────────────────────────────────── */
.cv-wrap .h-3{font-family:'DM Serif Display',Georgia,serif !important;font-weight:400;font-size:30px;line-height:1.05;margin:12px 0 4px;letter-spacing:-.4px;color:var(--cv-ink)}
.cv-wrap .h-3 em{font-style:italic;color:var(--accent)}

/* ── chips ────────────────────────────────────────────────────── */
.cv-wrap .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.cv-wrap .chip{font-family:var(--mono);font-size:11px;letter-spacing:.06em;padding:6px 10px;border:1px solid var(--cv-chip-line);border-radius:999px;color:var(--cv-ink-2);transition:background .2s,color .2s,transform .2s,border-color .2s}
.cv-wrap .chip:hover{background:var(--cv-ink);color:var(--cv-bg);border-color:var(--cv-ink);transform:translateY(-1px)}

/* ── languages ────────────────────────────────────────────────── */
.lang{display:grid;gap:10px;margin-top:14px}
.lang-row{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:baseline;font-size:14.5px}
.lang-name{color:var(--cv-ink)}
.lang-level{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--cv-muted);text-transform:uppercase}
.lang-bar{grid-column:1/-1;height:3px;background:var(--cv-card-line);border-radius:2px;overflow:hidden;margin-top:2px}
.lang-fill{height:100%;background:var(--cv-ink);border-radius:2px;transform-origin:left;transform:scaleX(var(--w,.5));transition:transform 1s cubic-bezier(.2,.7,.2,1)}

/* ── links ────────────────────────────────────────────────────── */
.cv-links{display:grid;gap:0;margin-top:14px;font-family:var(--mono);font-size:13px}
.cv-links a{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--cv-card-line);color:var(--cv-ink);transition:color .2s}
.cv-links a:last-child{border-bottom:0}
.cv-links a:hover{color:var(--accent)}
.cv-links-platform{color:var(--cv-muted)}

/* ── experience timeline ──────────────────────────────────────── */
.xp{display:grid;gap:0;margin-top:6px}
.xp-row{display:grid;grid-template-columns:96px 1fr;gap:18px;padding:18px 0;border-top:1px dashed var(--cv-card-line)}
.xp-row:first-child{border-top:0;padding-top:8px}
.xp-when{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--cv-muted);padding-top:4px;text-transform:uppercase}
.xp-role{font-family:'DM Serif Display',Georgia,serif !important;font-style:italic;font-size:24px;line-height:1.1;letter-spacing:-.3px;color:var(--cv-ink);margin:0}
.xp-where{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-top:6px}
.xp-desc{font-size:15px;line-height:1.55;color:var(--cv-ink-2);margin-top:8px;max-width:60ch}
.xp-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}

/* ── projects ─────────────────────────────────────────────────── */
.plist{display:grid;gap:14px;margin-top:14px}
.pli{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:baseline;padding-bottom:14px;border-bottom:1px dashed var(--cv-card-line)}
.pli:last-child{border-bottom:0;padding-bottom:0}
.pli .num{font-family:var(--mono);font-size:11px;color:var(--cv-muted);letter-spacing:.06em;padding-top:4px}
.pli h4{font-family:'DM Serif Display',Georgia,serif !important;font-style:italic;font-weight:400;font-size:20px;line-height:1.15;margin:0;color:var(--cv-ink)}
.pli p{margin:6px 0 0;font-size:14.5px;line-height:1.5;color:var(--cv-ink-2)}
.pli .meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--cv-muted)}

/* ── education ────────────────────────────────────────────────── */
.edu{display:grid;gap:14px;margin-top:14px}
.edu-row{display:grid;grid-template-columns:74px 1fr;gap:14px;font-size:14.5px;align-items:baseline}
.edu-when{font-family:var(--mono);font-size:11px;color:var(--cv-muted);letter-spacing:.06em}
.edu-name{font-weight:600;color:var(--cv-ink)}
.edu-school{color:var(--cv-muted);font-size:13px;margin-top:2px}

/* ── callout ──────────────────────────────────────────────────── */
.cv-wrap .callout{
  background:var(--cv-ink);color:var(--cv-bg);
  border-radius:22px;padding:28px;display:grid;gap:14px;border:1px solid var(--cv-ink);
}
.cv-wrap .callout .label{color:rgba(255,255,255,.55)}
.cv-wrap .callout .label::before{background:rgba(255,255,255,.55)}
.cv-wrap .callout h3{font-family:'DM Serif Display',Georgia,serif !important;font-style:italic;font-weight:400;font-size:30px;line-height:1.05;margin:4px 0 0;letter-spacing:-.5px;color:inherit}
.cv-wrap .callout h3 em{font-style:italic;color:inherit;opacity:.85}
.cv-wrap .callout p{margin:0;font-size:15px;line-height:1.55;opacity:.75}
.cv-wrap .callout .btn{
  align-self:start;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:11px 16px;border:1px solid var(--accent);border-radius:999px;color:#fff !important;
  background:var(--accent) !important;
  display:inline-flex;align-items:center;gap:10px;transition:background .2s,color .2s,transform .2s,border-color .2s;
}
.cv-wrap .callout .btn:hover{background:#e8453d !important;border-color:#e8453d;color:#fff;transform:translateY(-2px)}
.cv-wrap .callout.accent{background:var(--accent);border-color:var(--accent);color:#fff}
.cv-wrap .callout.accent .label{color:rgba(255,255,255,.85)}
.cv-wrap .callout.accent .label::before{background:rgba(255,255,255,.85)}
.cv-wrap .callout.accent .btn:hover{background:#fff;color:var(--accent);border-color:#fff}

/* ── now playing ──────────────────────────────────────────────── */
.nowp{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;margin-top:14px;padding:14px;border:1px dashed var(--cv-card-line);border-radius:14px}
.nowp .eq{width:44px;height:44px;border-radius:10px;background:var(--accent);display:inline-flex;align-items:flex-end;justify-content:center;gap:3px;padding:6px}
.nowp .eq span{display:block;width:5px;background:#fff;border-radius:2px;animation:eq 1.1s ease-in-out infinite}
.nowp .eq span:nth-child(1){height:60%;animation-delay:.0s}
.nowp .eq span:nth-child(2){height:90%;animation-delay:.15s}
.nowp .eq span:nth-child(3){height:40%;animation-delay:.30s}
.nowp .eq span:nth-child(4){height:75%;animation-delay:.45s}
@keyframes eq{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.35)}}
.nowp .what{font-size:13.5px;color:var(--cv-ink)}
.nowp .who{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cv-muted);margin-top:4px}

/* ── timeline ─────────────────────────────────────────────────── */
.tl{display:grid;gap:14px;margin-top:14px}
.tl-row{display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:baseline}
.tl-mark{width:32px;height:32px;border-radius:50%;border:1px solid var(--cv-chip-line);display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;color:var(--cv-ink-2)}
.tl-head{font-family:'DM Serif Display',Georgia,serif !important;font-style:italic;font-size:22px;line-height:1.1;color:var(--cv-ink);margin:0}
.tl-body{font-size:14.5px;line-height:1.55;color:var(--cv-ink-2);margin:4px 0 0;max-width:55ch}

/* ── mini gallery ─────────────────────────────────────────────── */
.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:14px}
.mini-grid a{display:block;aspect-ratio:1/1;background:#211c18;border-radius:8px;overflow:hidden}
.mini-grid img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.mini-grid a:hover img{transform:scale(1.08)}

/* ── slim footer ──────────────────────────────────────────────── */
.cv-foot{
  border-top:1px solid var(--cv-card-line);
  padding:32px var(--pad);font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--cv-muted);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  max-width:var(--maxw);margin:0 auto;
}
.cv-foot a{color:var(--cv-ink-2);border-bottom:1px solid var(--cv-card-line);transition:color .2s}
.cv-foot a:hover{color:var(--accent)}

/* ── CV responsive ────────────────────────────────────────────── */
@media (max-width:1080px){
  .cv-grid{grid-template-columns:1fr 1fr;gap:14px}
  .cv-grid .col-c{grid-column:1 / -1}
  .cv-wrap .col{gap:14px}
}
@media (max-width:760px){
  .cv-grid{grid-template-columns:1fr}
  .cv-grid .col-c{grid-column:auto}
  .cv-head .deck{grid-template-columns:1fr}
  .cv-updated{text-align:left}
  .tabs-row .desktop-only{display:none}
}
@media (max-width:560px){
  .cv-head h1{font-size:clamp(44px,12vw,64px) !important}
  .cv-head{padding-top:88px}
}

/* ── Elementor CV page — body-level mode tokens ───────────────── */
body[data-mode="pro"],
body[data-mode="off"]{
  background:var(--cv-bg);
  color:var(--cv-ink);
  transition:background .9s cubic-bezier(.7,.05,.3,1),color .9s ease;
}

/* ── Elementor CV — tab buttons (scoped to .cv-wrap so the bare
      .cv-tab selector can't override the home-page CV teaser pills) ── */
.cv-wrap .cv-tab{
  position:relative;cursor:pointer;
  font-family:'DM Serif Display',Georgia,serif;font-style:italic;font-size:28px;line-height:1;
  padding:14px 22px 16px;border:1px solid var(--cv-chip-line,rgba(26,23,20,.18));border-radius:999px;
  background:transparent;color:var(--cv-ink,#1a1714);
  transition:background .3s,color .3s,border-color .3s,transform .2s;
}
.cv-wrap .cv-tab small{display:block;font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cv-muted,#7a7064);margin-top:4px}
.cv-wrap .cv-tab:hover{transform:translateY(-2px)}
.cv-wrap .cv-tab-on{background:var(--cv-ink,#1a1714);color:var(--cv-bg,#f3ede0);border-color:var(--cv-ink,#1a1714)}
.cv-wrap .cv-tab-on small{color:rgba(255,255,255,.4)}

/* ── Elementor CV — language bars ─────────────────────────────── */
.cv-lang-list{display:grid;gap:10px;margin-top:14px}
.cv-lang-row{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:baseline;font-size:14.5px}
.cv-lang-name{color:var(--cv-ink,#1a1714)}
.cv-lang-level{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--cv-muted,#7a7064);text-transform:uppercase}
.cv-lang-bar{grid-column:1/-1;height:3px;background:var(--cv-card-line,rgba(26,23,20,.10));border-radius:2px;overflow:hidden;margin-top:2px}
.cv-lang-fill{height:100%;background:var(--cv-ink,#1a1714);border-radius:2px;transform-origin:left;transform:scaleX(var(--w,.5));transition:transform 1s cubic-bezier(.2,.7,.2,1)}

/* ── Elementor CV — heading color fix (beats Mokko on cream bg) ── */
body[data-mode="pro"] .elementor-widget-heading .elementor-heading-title{
  color:var(--cv-ink,#1a1714);
}
body[data-mode="off"] .elementor-widget-heading .elementor-heading-title{
  color:var(--cv-ink,#efeae1);
}
body[data-mode="pro"] .elementor-widget-text-editor,
body[data-mode="pro"] .elementor-widget-text-editor p{
  color:var(--cv-ink-2,#3a342d);
}
body[data-mode="off"] .elementor-widget-text-editor,
body[data-mode="off"] .elementor-widget-text-editor p{
  color:var(--cv-ink-2,#d9d0c1);
}

/* ══════════════════════════════════════════════════════════════
   GALERIA KONCERTOWA — page-specific styles
   ═══════════════════════════════════════════════════════════ */

/* ── body bg ──────────────────────────────────────────────── */
.page-id-4607{background:#0e0c0a;color:#efeae1}

/* ── hero ─────────────────────────────────────────────────── */
.gal-hero{
  overflow:hidden;isolation:isolate;position:relative;
  min-height:min(88vh,820px) !important;
  display:flex !important;align-items:flex-end !important;
  padding:160px 32px 64px !important;
  background-position:50% 32% !important;
}
.gal-hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    linear-gradient(180deg,rgba(14,12,10,.55) 0%,rgba(14,12,10,.1) 32%,rgba(14,12,10,.78) 82%,#0e0c0a 100%),
    linear-gradient(90deg,rgba(14,12,10,.6) 0%,transparent 60%);
}
.gal-hero>.elementor-container,.gal-hero>.e-con-inner,.gal-hero .elementor-column,.gal-hero .elementor-col-100{position:relative;z-index:2}
/* push hero content to the bottom of the full-height inner */
.gal-hero>.e-con-inner{justify-content:flex-end !important}
.gal-hero .elementor-widget-heading .elementor-heading-title{
  color:#efeae1 !important;text-shadow:0 2px 40px rgba(0,0,0,.5)
}
/* hero-inner row: left col flex:1, right col auto */
.elementor-element-b133fdf>.e-con-inner{
  flex-direction:row !important;align-items:flex-end !important;gap:32px !important;
}
.elementor-element-f66ef37{flex:1 1 auto !important;min-width:0;width:0 !important}
.elementor-element-f66ef37>.e-con-inner{max-width:none !important;width:100% !important;align-items:flex-start !important;text-align:left !important}
.elementor-element-a7be625{flex:0 0 auto !important;width:auto !important;min-width:120px;text-align:right}
.elementor-element-a7be625>.e-con-inner{max-width:none !important;width:auto !important;align-items:flex-end !important;text-align:right !important}
/* filter bar: left-align in its container */
.elementor-element-d71f05f>.e-con-inner{align-items:flex-start !important}

/* hero label "01a · koncertowo" — mono, dash prefix */
.elementor-element-ccd1641 .elementor-heading-title{
  font-family:var(--mono) !important;font-size:11px !important;
  letter-spacing:.18em !important;text-transform:uppercase !important;
  color:rgba(239,234,225,.8) !important;margin-bottom:20px;
  display:flex !important;align-items:center;gap:10px;
}
.elementor-element-ccd1641 .elementor-heading-title::before{
  content:'';width:18px;height:1px;background:#e8453d;display:inline-block;flex:0 0 auto;
}
/* hero h1 */
.gal-hero h1.elementor-heading-title{
  font-size:clamp(52px,8vw,124px) !important;
  line-height:.9 !important;letter-spacing:-2px !important;
  text-wrap:balance;
}
/* red italic second line */
.gal-hero h1.elementor-heading-title em{
  color:#e8453d;font-style:italic;
}
/* lead paragraph */
.elementor-element-fb1ca9d,
.elementor-element-fb1ca9d p{
  margin-top:20px;font-size:18px !important;line-height:1.6 !important;
  color:rgba(239,234,225,.82) !important;max-width:50ch;
}
/* hero meta right col — "43" */
.elementor-element-9f9f2b3 .elementor-heading-title{
  font-size:32px !important;font-weight:400 !important;
  color:#fff !important;letter-spacing:-.5px !important;line-height:1 !important;
  margin-bottom:4px;
}
/* hero meta text — sesje · od 2017 */
.elementor-element-a7be625 .elementor-widget-text-editor,
.elementor-element-a7be625 .elementor-widget-text-editor p{
  color:rgba(239,234,225,.7) !important;font-size:11px !important;line-height:1.8 !important;
  font-family:var(--mono) !important;letter-spacing:.06em !important;
}

/* ── filter bar ───────────────────────────────────────────── */
.gal-filter-row{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  padding-bottom:32px;
}
.gal-filter-label{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:#8a8175;margin-right:4px;
}
.gal-filter-btn{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  padding:6px 14px;border:1px solid rgba(255,255,255,.14);border-radius:999px;
  color:rgba(239,234,225,.6);cursor:pointer;background:transparent;
  transition:color .2s,border-color .2s,background .2s;
}
.gal-filter-btn:hover{color:#efeae1;border-color:rgba(255,255,255,.3)}
.gal-filter-btn.gal-on{background:var(--accent,#c8312a);border-color:var(--accent,#c8312a);color:#fff}
.gal-rule{height:1px;background:rgba(255,255,255,.10);margin-bottom:0}

/* ── filter transitions + group separators ───────────────────── */
/* smooth fade when chips toggle galleries (JS sets inline opacity) */
.e-con.gal-fade-box{transition:opacity .34s ease, height .4s ease !important;will-change:opacity,height}
/* faint divider above each visible group after the first (JS toggles
   .gal-sep) — explains the gaps left by independent masonry blocks.
   high specificity + !important to beat Elementor's per-element padding/border */
.e-con.gal-sep{
  border-top:1px solid rgba(255,255,255,.10) !important;
  padding-top:48px !important;margin-top:24px !important;
}

/* ── home mosaic sub-gallery headers (gal-mhead) ─────────────── */
.gal-mhead{
  max-width:var(--maxw);width:100%;margin:32px auto 16px !important;
  padding:0 var(--pad) 14px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.gal-mhead .elementor-heading-title{
  font-family:'Instrument Serif',Georgia,serif !important;
  font-style:italic;font-weight:400;
  font-size:clamp(22px,3.5vw,34px) !important;
  letter-spacing:-.5px;color:#efeae1 !important;line-height:1.1;
}

/* ── session heads ────────────────────────────────────────── */
.gal-session-head{
  border-bottom:1px solid rgba(255,255,255,.10);
  margin-bottom:12px;
}
/* session header row containers: title left, date right */
.elementor-element-b82bbac>.e-con-inner,
.elementor-element-6b2a39b>.e-con-inner,
.elementor-element-5526e5f>.e-con-inner,
.elementor-element-9d53047>.e-con-inner,
.elementor-element-f2597ae>.e-con-inner{
  flex-direction:row !important;align-items:baseline !important;
  justify-content:space-between !important;gap:16px !important;
  padding-bottom:12px !important;border-bottom:1px solid rgba(255,255,255,.10);
}
.gal-session-head .elementor-heading-title{color:#efeae1 !important}
.gal-session-head h2.elementor-heading-title{
  font-size:clamp(22px,3.5vw,36px) !important;
  letter-spacing:-.5px !important;
}
/* session h2: titles in italic white */
.elementor-element-b82bbac h2.elementor-heading-title,
.elementor-element-6b2a39b h2.elementor-heading-title,
.elementor-element-5526e5f h2.elementor-heading-title,
.elementor-element-9d53047 h2.elementor-heading-title,
.elementor-element-f2597ae h2.elementor-heading-title{
  color:#efeae1 !important;font-style:italic;
}
/* session date: right-aligned, dimmed, mono */
.elementor-element-b82bbac p.elementor-heading-title,
.elementor-element-6b2a39b p.elementor-heading-title,
.elementor-element-5526e5f p.elementor-heading-title,
.elementor-element-9d53047 p.elementor-heading-title,
.elementor-element-f2597ae p.elementor-heading-title{
  color:#8a8175 !important;font-family:var(--mono) !important;
  font-size:11px !important;letter-spacing:.08em !important;
  text-transform:uppercase;white-space:nowrap;
}

/* ── gallery items (masonry gap) ─────────────────────────── */
.gal-session .elementor-widget-ms_gallery,.page-id-4607 .elementor-widget-ms_gallery{padding:0 16px;width:100%;min-width:100%}

/* ── CTA ──────────────────────────────────────────────────── */
.gal-cta{margin-top:80px}
/* cta-row: text-left / buttons-right, space-between, border-top */
.elementor-element-9d14076>.e-con-inner{
  flex-direction:row !important;flex-wrap:wrap !important;
  align-items:center !important;justify-content:space-between !important;
  gap:32px !important;padding:64px 0 !important;
  border-top:1px solid rgba(255,255,255,.10);
}
.elementor-element-20df4bb{flex:1 1 380px !important;width:auto !important}
.elementor-element-20df4bb>.e-con-inner{align-items:flex-start !important;text-align:left !important}
.gal-cta .elementor-heading-title{color:#efeae1 !important}
.gal-cta h2.elementor-heading-title{
  font-size:clamp(28px,4vw,52px) !important;letter-spacing:-.5px !important;
  font-style:italic;
}
.elementor-element-bd8595f,
.elementor-element-bd8595f p{
  color:rgba(239,234,225,.6) !important;font-size:17px !important;
  margin-top:10px;max-width:46ch;line-height:1.5 !important;
}
/* buttons row */
.elementor-element-bd62a7c{flex:0 0 auto !important;width:auto !important}
.elementor-element-bd62a7c>.e-con-inner{
  flex-direction:row !important;flex-wrap:wrap !important;
  align-items:center !important;gap:12px !important;
}
/* primary "napisz →" — accent fill, serif italic */
.elementor-element-6df3b38 .ms-button,
.elementor-element-6df3b38 a{
  font-family:'Instrument Serif',Georgia,serif !important;font-style:italic !important;
  font-size:20px !important;padding:16px 28px !important;
  background:#c8312a !important;color:#fff !important;border:none !important;
  border-radius:4px !important;text-transform:none !important;letter-spacing:0 !important;
}
.elementor-element-6df3b38 a .ms-btn__text{color:#fff !important}
.elementor-element-6df3b38 .ms-button:hover,
.elementor-element-6df3b38 a:hover{background:#e8453d !important;transform:translateY(-2px)}
/* secondary "archiwum →" — bordered, mono uppercase */
.elementor-element-ecab500 .ms-button,
.elementor-element-ecab500 a{
  font-family:var(--mono) !important;font-size:12px !important;
  letter-spacing:.08em !important;text-transform:uppercase !important;
  padding:16px 22px !important;background:transparent !important;
  border:1px solid rgba(255,255,255,.22) !important;border-radius:4px !important;
  color:rgba(239,234,225,.72) !important;
}
.elementor-element-ecab500 a .ms-btn__text{color:rgba(239,234,225,.72) !important}
.elementor-element-ecab500 .ms-button:hover,
.elementor-element-ecab500 a:hover{
  border-color:rgba(255,255,255,.5) !important;color:#efeae1 !important;transform:translateY(-2px);
}
.elementor-element-ecab500 a:hover .ms-btn__text{color:#efeae1 !important}

/* ── serif → Instrument Serif (mock uses it, not DM Serif Display) ── */
.page-id-4607 h1.elementor-heading-title,
.page-id-4607 h2.elementor-heading-title,
.elementor-element-9f9f2b3 .elementor-heading-title{
  font-family:'Instrument Serif',Georgia,serif !important;
  font-weight:400 !important;
}

/* ── heading color override for dark page ─────────────────── */
.page-id-4607 .elementor-widget-heading .elementor-heading-title{color:#efeae1}
.page-id-4607 .elementor-widget-text-editor,
.page-id-4607 .elementor-widget-text-editor p{color:rgba(239,234,225,.75)}

/* ── responsive ───────────────────────────────────────────── */
@media(max-width:900px){
  .gal-hero{padding-top:120px !important}
  .elementor-element-b133fdf>.e-con-inner{flex-direction:column !important}
  .elementor-element-a7be625{text-align:left !important}
  .elementor-element-b82bbac>.e-con-inner,
  .elementor-element-6b2a39b>.e-con-inner,
  .elementor-element-5526e5f>.e-con-inner,
  .elementor-element-9d53047>.e-con-inner,
  .elementor-element-f2597ae>.e-con-inner{flex-direction:column !important}
  .elementor-element-9d14076>.e-con-inner{flex-direction:column !important;align-items:flex-start !important}
}
@media(max-width:560px){
  .gal-session .elementor-widget-ms_gallery,.page-id-4607 .elementor-widget-ms_gallery{padding:0 8px}
}