/* maciejkryczka.com
   Warm editorial pages taken from the book cover: paper ground, slate-blue ink, ochre sun only for action.
   Signature motif: organic line dissolving into pixel squares (tree vs. screen). Single light look. */
:root{
  --paper:#F5F0E6; --paper-2:#ECE5D6; --surface:#FFFDF8;
  --ink:#1F3347; --ink-soft:#4C5E70; --line:#D8CFBE;
  --sun:#E3A23B; --sun-ink:#1F3347; --sun-text:#9A5E0E; --sun-soft:#FBF0DC;
  --pixel:#5E7F9E; --sage:#7E9A86; --on-ink:#F3EEE4; --on-ink-soft:#BCC8D4; --error:#A3341C;
  --f-display:"Fraunces",Georgia,"Times New Roman",serif;
  --f-body:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --wrap:72rem; --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;background:var(--paper);color:var(--ink);font:1.0625rem/1.65 var(--f-body);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0}
main{outline:none}
h1,h2,h3{font-family:var(--f-display);font-weight:400;margin:0;line-height:1.1;text-wrap:balance;letter-spacing:-.01em}
h1 em,h2 em{font-style:italic;color:var(--sun-text)}
h2{font-size:clamp(1.9rem,3.6vw,2.8rem)}
h3{font-size:1.3rem;font-weight:600}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:1.25rem}
.eyebrow{font:500 .74rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--pixel);display:inline-flex;align-items:center;gap:.6rem}
.eyebrow::before{content:"";width:.5rem;height:.5rem;background:currentColor}
.muted{color:var(--ink-soft)}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.skip{position:absolute;left:.75rem;top:-4rem;z-index:80;background:var(--sun);color:var(--sun-ink);padding:.6rem 1rem;font-weight:700}
.skip:focus{top:.75rem}
.linklike{all:unset;cursor:pointer;text-decoration:underline}
.linklike:focus-visible{outline:3px solid var(--sun)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;font:700 1rem var(--f-body);padding:.9em 1.4em;border:2px solid transparent;border-radius:999px;cursor:pointer;text-decoration:none;transition:transform .25s var(--ease),background .2s,box-shadow .25s}
.btn:hover{transform:translateY(-2px)}
.btn:disabled{opacity:.6;cursor:wait;transform:none}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn-main{background:var(--sun);color:var(--sun-ink);box-shadow:0 10px 24px -14px rgba(154,94,14,.9)}
.btn-line{border-color:currentColor;background:transparent;color:inherit}
.btn-line:hover{background:rgba(31,51,71,.06)}
.on-ink .btn-line:hover{background:rgba(255,255,255,.08)}
.btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.textlink{font-weight:700;text-decoration:none;border-bottom:2px solid var(--sun);padding-bottom:.1rem}
.textlink:hover{color:var(--sun-text)}

/* header */
header.top{position:sticky;top:0;z-index:50;background:rgba(245,240,230,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s,transform .35s var(--ease)}
header.top.solid{border-bottom-color:var(--line);box-shadow:0 8px 30px -22px rgba(31,51,71,.5)}
/* przy przewijaniu w dół pasek się chowa, przy przewijaniu w górę wraca */
.scroll-down header.top:not(.menu-open){transform:translateY(-100%);box-shadow:none}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.8rem}
.logo{display:flex;align-items:center;gap:.65rem;text-decoration:none}
.logo .mark{display:grid;grid-template-columns:repeat(3,.42rem);gap:2px}
.logo .mark i{width:.42rem;height:.42rem;background:var(--pixel)}
.logo .mark i:nth-child(1),.logo .mark i:nth-child(4),.logo .mark i:nth-child(7){background:var(--sage);border-radius:50%}
.logo .mark i:nth-child(3){opacity:.4}.logo .mark i:nth-child(9){opacity:.6}
.logo strong{font:600 1.3rem var(--f-display);letter-spacing:-.01em}
.nav ul{display:flex;gap:1.6rem;list-style:none;margin:0;padding:0;font-weight:600;font-size:.98rem}
.nav ul a{text-decoration:none;position:relative;padding-block:.3rem;white-space:nowrap}
.nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--sun);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav ul a:hover::after,.nav ul a[aria-current="page"]::after{transform:scaleX(1)}
.nav .cta{padding:.6em 1.15em;font-size:.95rem}
.burger{display:none;width:2.75rem;height:2.75rem;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:50%;cursor:pointer;font-size:1.15rem}
@media (max-width:62rem){
  .burger{display:inline-flex;align-items:center;justify-content:center}
  .nav{flex-wrap:wrap}
  .nav ul{display:none}
  .nav ul.open{display:flex;flex-direction:column;gap:.1rem;order:5;width:100%;padding:.5rem 0 1rem;font-size:1.1rem}
  .nav ul.open a{display:block;padding:.55rem 0}
  .nav .cta{margin-left:auto}
}
@media (max-width:26rem){.nav .cta{display:none}}

/* motion – slow and quiet; switched off for reduced motion */
.intro>*{animation:fade .9s var(--ease) both}
.intro>*:nth-child(2){animation-delay:.08s}.intro>*:nth-child(3){animation-delay:.16s}
.intro>*:nth-child(4){animation-delay:.24s}.intro>*:nth-child(5){animation-delay:.32s}
@keyframes fade{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.js .rvj{opacity:.001;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.js .rvj.in{opacity:1;transform:none}
.hero h1 .w{display:inline-block;white-space:pre}
.hero h1 .w{animation:word .9s var(--ease) both;animation-delay:calc(.15s + var(--i) * .07s)}
@keyframes word{from{opacity:0;transform:translateY(.35em);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.bookchip{animation:bob 6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px)}}
.cover .sun{animation:sway 9s ease-in-out infinite}
@keyframes sway{50%{transform:rotate(-4deg) scale(1.04)}}
.seam::after{animation:drift 14s linear infinite}
@keyframes drift{to{background-position:140px 0,280px 6px}}
h1 em,h2 em{background:linear-gradient(var(--sun),var(--sun)) 0 92%/0 2px no-repeat;transition:background-size 1.2s var(--ease) .5s}
h1 em.in,h2 em.in{background-size:100% 2px}
.qcard.live{animation:breathe 7s ease-in-out infinite}
@keyframes breathe{50%{box-shadow:0 36px 70px -38px rgba(31,51,71,.75);transform:translateY(-4px)}}
.proof span::before{animation:pulse 3.2s ease-in-out infinite}
.proof span:nth-child(2)::before{animation-delay:1s}.proof span:nth-child(3)::before{animation-delay:2s}
@keyframes pulse{50%{transform:scale(1.6);opacity:.55}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rvj{opacity:1;transform:none}
  h1 em,h2 em{background-size:100% 2px}
  html{scroll-behavior:auto}
}

/* seam divider: line that turns into pixels */
.seam{height:18px;position:relative;max-width:var(--wrap);margin-inline:auto}
.seam::before{content:"";position:absolute;left:1.25rem;right:40%;top:50%;height:1px;background:var(--sage)}
.seam::after{content:"";position:absolute;right:1.25rem;left:60%;top:3px;height:12px;background:
 linear-gradient(90deg,var(--pixel) 0 6px,transparent 6px 14px) 0 0/14px 6px repeat-x,
 linear-gradient(90deg,transparent 0 7px,var(--pixel) 7px 13px,transparent 13px 28px) 0 6px/28px 6px repeat-x;opacity:.55;
 -webkit-mask:linear-gradient(90deg,#000,transparent);mask:linear-gradient(90deg,#000,transparent)}

section.block{padding-block:5.5rem}
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 3rem;align-items:end;margin-bottom:2.75rem}
.sec-head>*{min-width:0}
.sec-head h2{margin-top:.6rem}
.sec-head p{color:var(--ink-soft);max-width:38em}
@media (max-width:48rem){.sec-head{grid-template-columns:1fr}}
.on-ink{background:var(--ink);color:var(--on-ink)}
.on-ink .eyebrow{color:var(--sun)}
.on-ink .muted,.on-ink p{color:var(--on-ink-soft)}
.on-ink h2 em,.on-ink h1 em{color:var(--sun)}
.tint{background:var(--paper-2)}

/* hero */
.hero{padding-block:4rem 4.5rem;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:3.5rem;align-items:center}
.hero-grid>*{min-width:0}
.hero h1{font-size:clamp(2.6rem,6.2vw,5rem);line-height:1.02;margin-top:1.1rem}
.hero .lead{font-size:1.2rem;margin-top:1.4rem;max-width:34em;color:var(--ink-soft)}
.proof{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:2rem;font-size:.9rem;color:var(--ink-soft)}
.proof span{display:inline-flex;align-items:center;gap:.5rem}
.proof span::before{content:"";width:.45rem;height:.45rem;background:var(--sage);border-radius:50%}
.portrait{position:relative;max-width:100%;isolation:isolate;margin-bottom:2.5rem}
.portrait figure{margin:0;position:relative;aspect-ratio:1/1;max-width:100%;border-radius:50%;overflow:hidden;background:var(--paper-2);border:10px solid var(--surface);box-shadow:0 40px 80px -50px rgba(31,51,71,.7)}
.portrait figure img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.portrait canvas{position:absolute;right:-1.5rem;bottom:-1.5rem;width:62%;height:62%;pointer-events:none;z-index:-1}
/* karta książki pod twarzą: na dole koła, wyśrodkowana, w większości poniżej zdjęcia */
.bookchip{position:absolute;left:0;right:0;margin-inline:auto;width:max-content;bottom:-2.5rem;display:flex;align-items:center;gap:.9rem;background:var(--surface);padding:.7rem 1.1rem .7rem .7rem;border-radius:10px;box-shadow:0 24px 50px -24px rgba(31,51,71,.55);text-decoration:none;max-width:calc(100% + 1rem)}
.bookchip img{width:3.2rem;border-radius:2px;box-shadow:0 6px 14px rgba(31,51,71,.3)}
.bookchip small{display:block;font:500 .68rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--pixel)}
.bookchip b{font:600 1.05rem var(--f-display)}
.bookchip span.p{display:block;font-size:.85rem;color:var(--ink-soft)}
@media (max-width:54rem){
  .hero{padding-block:2.5rem 3.5rem}
  .hero-grid{grid-template-columns:1fr;gap:2.5rem}
  .portrait{max-width:24rem;margin-inline:auto;width:100%}
  .portrait canvas{right:-.5rem}
}

/* proof strip */
.strip{border-block:1px solid var(--line);background:var(--surface)}
.strip ul{list-style:none;margin:0;padding-block:1.4rem;display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.strip li{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.strip b{font:600 1.1rem var(--f-display);font-variant-numeric:tabular-nums}
.strip span{font-size:.88rem;color:var(--ink-soft)}
@media (max-width:54rem){.strip ul{grid-template-columns:1fr 1fr}}

/* mirror cards */
.mirror{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.mirror article{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:1.5rem 1.3rem;display:flex;flex-direction:column;gap:.7rem;min-width:0}
.mirror q{font:italic 400 1.35rem/1.25 var(--f-display);quotes:"„" "”"}
.mirror p{color:var(--ink-soft);font-size:.98rem}
@media (max-width:62rem){.mirror{grid-template-columns:1fr 1fr}}
@media (max-width:34rem){.mirror{grid-template-columns:1fr}}
.after-mirror{margin-top:2rem;display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem}
.after-mirror p{font:400 1.3rem var(--f-display);max-width:32em}

/* split + compass teaser */
.split{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center}
.split>*{min-width:0}
.split h2{margin:.6rem 0 1.1rem}
.split p+p{margin-top:1rem}
@media (max-width:54rem){.split{grid-template-columns:1fr;gap:2.25rem}}
.qcard{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1.6rem;box-shadow:0 30px 60px -40px rgba(31,51,71,.6);position:relative}
.qcard .meta{display:flex;justify-content:space-between;gap:1rem;font:500 .74rem var(--f-mono);color:var(--pixel);letter-spacing:.06em}
.qbar{height:6px;background:var(--paper-2);border-radius:3px;margin:.8rem 0 1.3rem;overflow:hidden}
.qbar i{display:block;height:100%;background:var(--sage);border-radius:3px}
.qcard h3{font:400 1.45rem/1.25 var(--f-display);margin-bottom:1.1rem}
.opts{display:grid;gap:.55rem}
.opts span{display:flex;align-items:center;gap:.8rem;padding:.85rem 1rem;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.opts span::before{content:"";flex:none;width:1rem;height:1rem;border:2px solid var(--pixel);border-radius:50%}
.facts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.facts span{font:500 .78rem var(--f-mono);border:1px solid var(--line);background:var(--surface);padding:.35rem .7rem;border-radius:999px}

/* book band */
.book{display:grid;grid-template-columns:.8fr 1.2fr;gap:4rem;align-items:center}
.book>*{min-width:0}
.cover{position:relative;max-width:22rem;margin-inline:auto;width:100%;display:block}
.cover img{width:100%;border-radius:3px 8px 8px 3px;box-shadow:0 40px 70px -30px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.06);transform:rotate(-2deg);transition:transform .6s var(--ease)}
.cover:hover img{transform:rotate(0) translateY(-6px)}
.cover .sun{position:absolute;right:-1rem;top:-1rem;width:5.5rem;height:5.5rem;border-radius:50%;background:var(--sun);color:var(--sun-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;font:600 1.4rem/1 var(--f-display);text-align:center}
.cover .sun small{font:500 .6rem var(--f-mono);letter-spacing:.06em;text-transform:uppercase;margin-top:.2rem}
.book h1,.book h2{margin:.6rem 0 .4rem}
.book .sub{font:italic 400 1.3rem var(--f-display);color:var(--on-ink-soft)}
.gains{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.9rem}
.gains li{display:grid;grid-template-columns:1.6rem 1fr;gap:.6rem;align-items:baseline}
.gains li::before{content:"";width:.7rem;height:.7rem;background:var(--sun);transform:translateY(-1px)}
.gains b{color:var(--on-ink);font-weight:600}
.buy{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:2rem}
.buy a{display:flex;justify-content:space-between;align-items:center;gap:1rem;text-decoration:none;padding:1rem 1.2rem;border-radius:10px;border:1px solid rgba(255,255,255,.22);transition:background .2s,transform .2s}
.buy a:hover{transform:translateY(-2px);background:rgba(255,255,255,.06)}
.buy a.primary{background:var(--sun);color:var(--sun-ink);border-color:var(--sun)}
.buy small{display:block;font:500 .7rem var(--f-mono);letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.buy b{font:600 1.05rem var(--f-body)}
.buy .price{font:600 1.5rem var(--f-display);font-variant-numeric:tabular-nums;white-space:nowrap}
.fine{font-size:.85rem;margin-top:.9rem}
@media (max-width:54rem){.book{grid-template-columns:1fr;gap:2.5rem}.cover{max-width:15rem}}
@media (max-width:30rem){.buy{grid-template-columns:1fr}}

/* voices */
.voices{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:1rem;align-items:stretch}
.voices>*{min-width:0}
.voice{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:1.6rem;display:flex;flex-direction:column;justify-content:space-between;gap:1.2rem}
.voice blockquote{margin:0;font:400 1.25rem/1.4 var(--f-display)}
.voice cite{font-style:normal;font-size:.9rem;color:var(--ink-soft)}
.voice cite b{display:block;color:var(--ink)}
.review{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.review .eyebrow{color:var(--sun)}
.review p,.review cite{color:var(--on-ink-soft)}
.review cite b{color:var(--on-ink)}
@media (max-width:62rem){.voices{grid-template-columns:1fr}}

/* approach */
.approach{display:grid;grid-template-columns:.75fr 1.25fr;gap:4rem;align-items:center}
.approach>*{min-width:0}
.approach figure{margin:0;aspect-ratio:1/1;max-width:100%;border-radius:50%;overflow:hidden;border:10px solid var(--surface);box-shadow:0 30px 60px -40px rgba(31,51,71,.7)}
.approach figure img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.approach blockquote{margin:.8rem 0 0;font:400 clamp(1.6rem,3vw,2.3rem)/1.2 var(--f-display)}
.approach blockquote em{color:var(--sun-text)}
.approach p{margin-top:1.2rem;color:var(--ink-soft);max-width:36em}
@media (max-width:54rem){.approach{grid-template-columns:1fr;gap:2rem}.approach figure{max-width:15rem}}

/* lead magnet + forms */
.magnet{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:2.5rem;position:relative;overflow:hidden}
.magnet>*{min-width:0}
.magnet h2{font-size:clamp(1.7rem,3vw,2.3rem);margin:.6rem 0 .9rem}
.magnet .dots{position:absolute;right:-2rem;top:-2rem;width:9rem;height:9rem;opacity:.12;background:radial-gradient(circle,var(--pixel) 30%,transparent 31%) 0 0/14px 14px}
@media (max-width:54rem){.magnet{grid-template-columns:1fr;padding:1.6rem}}
.form{display:grid;gap:.75rem}
.form label{display:flex;flex-direction:column;gap:.3rem;font-weight:600;font-size:.9rem}
.form input,.form textarea{font:400 1rem var(--f-body);padding:.75em .95em;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:10px;width:100%}
.form textarea{min-height:7rem;resize:vertical}
.form .check{flex-direction:row;align-items:flex-start;gap:.6rem;font-weight:400;font-size:.85rem;color:var(--ink-soft)}
.form .check input{width:auto;margin-top:.3rem;accent-color:var(--sun)}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
@media (max-width:30rem){.form .two{grid-template-columns:1fr}}
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.status{font-size:.95rem;min-height:1.3em;color:var(--ink-soft)}
.status.ok{color:var(--ink);font-weight:600}
.status.err{color:var(--error)}

/* posts list */
.posts{border-top:2px solid var(--ink)}
.post{display:grid;grid-template-columns:9rem 1fr auto;gap:1.5rem;align-items:baseline;padding:1.5rem 0;border-bottom:1px solid var(--line);text-decoration:none;transition:padding .3s var(--ease)}
.post:hover{padding-left:.6rem}
.post .date{font:500 .78rem var(--f-mono);color:var(--pixel);letter-spacing:.04em}
.post h3{font:400 1.45rem/1.25 var(--f-display)}
.post p{color:var(--ink-soft);margin-top:.4rem;font-size:.98rem;max-width:44em}
.post .tag{font:500 .72rem var(--f-mono);border:1px solid var(--line);padding:.25rem .6rem;border-radius:999px;white-space:nowrap}
.post>div{min-width:0}
.post[hidden]{display:none}
@media (max-width:44rem){.post{grid-template-columns:1fr;gap:.4rem}.post .tag{justify-self:start}}
.posts.compact .post{grid-template-columns:1fr;gap:.3rem;padding:1.1rem 0}
.posts.compact .post p,.posts.compact .tag{display:none}
.posts.compact .post h3{font-size:1.25rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.6rem}
.chips button{font:600 .9rem var(--f-body);padding:.5rem 1rem;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;cursor:pointer}
.chips button[aria-pressed="true"]{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}

/* najbliższe spotkania */
.events-band{padding-block:4rem}
.events{display:grid;gap:.8rem}
.event{display:grid;grid-template-columns:4.5rem 1fr auto;gap:1.2rem;align-items:center;padding:1.2rem 1.4rem;background:var(--surface);border:1px solid var(--line);border-radius:12px;text-decoration:none;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.event:hover{transform:translateY(-3px);border-color:var(--sun);box-shadow:0 24px 40px -28px rgba(31,51,71,.6)}
.event[hidden]{display:none}
.ev-date{display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1;max-width:100%;border-radius:10px;background:var(--ink);color:var(--on-ink);font:500 .72rem var(--f-mono);text-transform:uppercase;letter-spacing:.08em}
.ev-date b{font:600 1.7rem/1 var(--f-display);letter-spacing:0;color:var(--sun)}
.ev-body{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.ev-body small{font:500 .74rem var(--f-mono);color:var(--pixel);letter-spacing:.04em}
.ev-body strong{font:600 1.2rem/1.25 var(--f-display)}
.ev-body span{color:var(--ink-soft);font-size:.96rem}
.ev-body em{font-style:normal;font-size:.88rem;color:var(--ink-soft)}
.ev-go{font-size:1.2rem;color:var(--sun-text)}
@media (max-width:34rem){.event{grid-template-columns:3.6rem 1fr;padding:1rem}.ev-go{display:none}}

/* cards linking out */
.work{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.work a,.work article{display:flex;flex-direction:column;gap:.7rem;padding:1.6rem;background:var(--surface);border:1px solid var(--line);border-radius:10px;text-decoration:none;min-width:0;transition:transform .3s var(--ease),box-shadow .3s}
.work a:hover{transform:translateY(-4px);box-shadow:0 24px 40px -28px rgba(31,51,71,.6)}
.work p{color:var(--ink-soft);font-size:.98rem}
.work .go{margin-top:auto;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-top:.6rem}
.work .go small{font:500 .7rem var(--f-mono);color:var(--pixel)}
@media (max-width:54rem){.work{grid-template-columns:1fr}}

/* faq */
.faq{border-top:2px solid var(--ink);max-width:50rem}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;padding:1.15rem 0;font:400 1.25rem var(--f-display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--sun-text);font:400 1.6rem/1 var(--f-body);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 1.2rem;color:var(--ink-soft);max-width:44em}

.cband .in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.5rem}
.cband h2{max-width:20ch;margin-top:.6rem}

/* sub-page heads */
.phead{padding-block:4rem 3rem}
.phead h1{font-size:clamp(2.4rem,5.5vw,4.2rem);margin-top:1rem;max-width:18ch}
.phead .lead{font-size:1.2rem;color:var(--ink-soft);margin-top:1.2rem;max-width:36em}
.crumbs{font:500 .74rem var(--f-mono);letter-spacing:.06em;color:var(--ink-soft)}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.on-ink .crumbs{color:var(--on-ink-soft)}

/* book page */
.parts{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.parts article{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:1.5rem;min-width:0}
.parts .no{display:block;font:500 .72rem var(--f-mono);color:var(--pixel);letter-spacing:.06em;text-transform:uppercase;margin-bottom:.7rem}
.parts p{color:var(--ink-soft);font-size:.96rem;margin-top:.5rem}
@media (max-width:62rem){.parts{grid-template-columns:1fr 1fr}}
@media (max-width:34rem){.parts{grid-template-columns:1fr}}
.list-dots{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.6rem}
.list-dots li{display:grid;grid-template-columns:1.4rem 1fr}
.list-dots li::before{content:"";width:.6rem;height:.6rem;margin-top:.55rem;background:var(--sage);border-radius:50%}

/* about */
.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:4rem;align-items:start}
.about>*{min-width:0}
.about figure{margin:0;position:sticky;top:6.5rem;aspect-ratio:1/1;max-width:100%;border-radius:50%;overflow:hidden;border:10px solid var(--surface);box-shadow:0 30px 60px -40px rgba(31,51,71,.7)}
.about figure img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.about h2{font-size:clamp(1.6rem,2.8vw,2.1rem);margin:2.4rem 0 .9rem}
.about p{color:var(--ink-soft)}
.about p+p{margin-top:1rem}
.about .lede{font:400 1.35rem/1.45 var(--f-display);color:var(--ink)}
.creds{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin:1.8rem 0}
.creds div{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:1rem}
.creds b{display:block;font:600 1.15rem var(--f-display)}
.creds span{font-size:.9rem;color:var(--ink-soft)}
@media (max-width:54rem){.about{grid-template-columns:1fr}.about figure{position:static;max-width:20rem}}

/* contact page */
.cgrid{display:grid;grid-template-columns:1fr 1.25fr;gap:3.5rem}
.cgrid>*{min-width:0}
.cline{display:flex;flex-direction:column;gap:.2rem;margin-bottom:1.6rem}
.cline .val{font:400 1.5rem var(--f-display);word-break:break-word}
.copy{align-self:flex-start;font:600 .82rem var(--f-body);background:var(--surface);border:1px solid var(--line);color:var(--ink);padding:.35rem .8rem;border-radius:999px;cursor:pointer;margin-top:.4rem}
fieldset.topics{border:0;padding:0;margin:0}
fieldset.topics legend{font-weight:600;font-size:.9rem;margin-bottom:.5rem}
.topic-list{display:flex;flex-wrap:wrap;gap:.5rem}
.topic-list label{flex-direction:row;align-items:center;gap:.45rem;font-weight:600;font-size:.9rem;border:1px solid var(--line);padding:.5rem .85rem;border-radius:999px;cursor:pointer;background:var(--paper)}
.topic-list label:has(input:checked){background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.topic-list input{width:auto;accent-color:var(--sun)}
@media (max-width:54rem){.cgrid{grid-template-columns:1fr}}

/* article */
.article-head{padding-block:3.5rem 2rem;max-width:52rem}
.article-head h1{font-size:clamp(2.1rem,4.6vw,3.4rem);margin-top:1rem}
.article-head .meta{margin-top:1rem;font:500 .8rem var(--f-mono);color:var(--ink-soft);letter-spacing:.04em}
.article-img{max-width:60rem;margin-bottom:2.5rem}
.article-img img{width:100%;border-radius:12px;background:var(--paper-2);aspect-ratio:16/9;object-fit:cover}
.prose{max-width:44rem;padding-bottom:4.5rem;font-size:1.13rem;line-height:1.75}
.prose>*+*{margin-top:1.15em}
.share{max-width:44rem;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:-2rem;padding-top:1.5rem;padding-bottom:4.5rem;border-top:1px solid var(--line)}
.share-label{font-weight:700;color:var(--ink-soft);margin-right:.4rem}
.share .btn{padding:.55em 1.1em;font-size:.95rem}
.share-status{font-size:.9rem;color:var(--ink-soft)}
.prose h2{font-size:1.8rem;margin-top:1.8em}
.prose h3{font-size:1.35rem;margin-top:1.6em}
.prose a{color:var(--ink);text-decoration-color:var(--sun);text-decoration-thickness:2px;text-underline-offset:3px}
.prose a:hover{color:var(--sun-text)}
.prose blockquote{margin-inline:0;padding-left:1.2rem;border-left:4px solid var(--sun);font:italic 400 1.3rem/1.5 var(--f-display)}
.prose hr{border:0;height:18px;margin-block:2.5rem;background:linear-gradient(90deg,var(--sage) 0 40%,transparent 40%) 0 50%/100% 1px no-repeat,linear-gradient(90deg,transparent 60%,var(--pixel) 60% 61.5%,transparent 61.5% 64%,var(--pixel) 64% 65.5%,transparent 65.5% 70%,var(--pixel) 70% 71.5%,transparent 71.5%) 0 50%/100% 6px no-repeat;opacity:.7}
.prose hr+p em,.prose p:last-child em{font-size:.95rem;color:var(--ink-soft)}
.prose img,.prose figure img{border-radius:8px}
.prose figure{margin-inline:0}
.prose figcaption{font-size:.88rem;color:var(--ink-soft);margin-top:.5rem}
.prose ul,.prose ol{padding-left:1.3rem}
.prose table{border-collapse:collapse;width:100%;font-size:.95rem;display:block;overflow-x:auto}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:.6rem .8rem .6rem 0;text-align:left}
.after-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:start}
.after-grid>*{min-width:0}
.box-cta h2{font-size:clamp(1.7rem,3vw,2.3rem);margin:.6rem 0 .9rem}
.after-grid .posts{margin-top:1rem}
@media (max-width:54rem){.after-grid{grid-template-columns:1fr}}

/* kompas (rkc) */
.kompas-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:3.5rem;align-items:start}
.kompas-wrap>*{min-width:0}
@media (max-width:54rem){.kompas-wrap{grid-template-columns:1fr;gap:2rem}}
.rkc-app{min-height:22rem}
.rkc-shell{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1.8rem;box-shadow:0 30px 60px -40px rgba(31,51,71,.6)}
.rkc-eyebrow{font:500 .74rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--pixel)}
.rkc-shell h2{font-size:clamp(1.6rem,3vw,2.1rem);margin:.6rem 0 .8rem}
.rkc-lead{color:var(--ink-soft);font-size:1.08rem}
.rkc-note{font-size:.9rem;color:var(--ink-soft);margin:1rem 0 1.4rem;padding:.8rem 1rem;background:var(--paper);border-radius:8px}
.rkc-button{font:700 1rem var(--f-body);padding:.85em 1.4em;border-radius:999px;border:2px solid transparent;cursor:pointer;transition:transform .2s var(--ease)}
.rkc-button:hover:not(:disabled){transform:translateY(-2px)}
.rkc-button:disabled{opacity:.4;cursor:default}
.rkc-button-primary{background:var(--sun);color:var(--sun-ink)}
.rkc-button-secondary{background:transparent;border-color:var(--ink);color:var(--ink);text-decoration:none;display:inline-block}
.rkc-question-meta{display:flex;justify-content:space-between;gap:1rem;font:500 .74rem var(--f-mono);color:var(--pixel);letter-spacing:.06em}
.rkc-progress{height:6px;background:var(--paper-2);border-radius:3px;margin:.8rem 0 1.4rem;overflow:hidden}
.rkc-progress span{display:block;height:100%;background:var(--sage);border-radius:3px;transition:width .4s var(--ease)}
.rkc-fieldset{border:0;padding:0;margin:0}
.rkc-fieldset legend{font:400 1.4rem/1.3 var(--f-display);margin-bottom:1.1rem;padding:0}
.rkc-answers{display:grid;gap:.55rem}
.rkc-answer{display:flex;align-items:center;gap:.8rem;padding:.85rem 1rem;border:1px solid var(--line);border-radius:10px;background:var(--paper);cursor:pointer;transition:border-color .2s,background .2s,transform .15s}
.rkc-answer:hover{border-color:var(--pixel);transform:translateX(3px)}
.rkc-answer input{accent-color:var(--ink);width:1.1rem;height:1.1rem;flex:none;margin:0}
.rkc-answer.is-selected{border-color:var(--ink);background:var(--sun-soft)}
.rkc-validation{color:var(--error);font-size:.92rem;margin-top:.8rem}
.rkc-actions{display:flex;justify-content:space-between;gap:.75rem;margin-top:1.4rem}
.rkc-result h2{margin-top:.4rem}
.rkc-result-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:1.2rem 0}
.rkc-result-section{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:1.1rem}
.rkc-result-section h3{font:600 1.25rem var(--f-display);margin:.2rem 0 .5rem}
.rkc-result-section p:last-child{color:var(--ink-soft);font-size:.96rem}
.rkc-focus{border-color:var(--sun);background:var(--sun-soft)}
.rkc-section-label{font:500 .7rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--pixel)}
.rkc-scale h3,.rkc-reading h3{font:600 1.1rem var(--f-display);margin:1.4rem 0 .7rem}
.rkc-scale-list{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.rkc-scale-head{display:flex;justify-content:space-between;gap:1rem;font-size:.92rem;flex-wrap:wrap}
.rkc-scale-name{font-weight:600}
.rkc-scale-level{font:500 .76rem var(--f-mono);color:var(--ink-soft);font-variant-numeric:tabular-nums}
.rkc-scale-badge{font:500 .66rem var(--f-mono);background:var(--ink);color:var(--on-ink);padding:.15rem .45rem;border-radius:999px;margin-left:.35rem;vertical-align:middle}
.rkc-scale-track{position:relative;height:10px;background:var(--paper-2);border-radius:5px;margin-top:.35rem;overflow:hidden}
.rkc-scale-fill{position:absolute;inset:0 auto 0 0;background:var(--pixel);border-radius:5px}
.rkc-scale-cut{position:absolute;top:0;bottom:0;width:2px;background:var(--surface)}
.rkc-scale-legend{display:flex;justify-content:space-between;font:500 .68rem var(--f-mono);color:var(--ink-soft);margin-top:.5rem}
.rkc-note-small{font-size:.85rem;color:var(--ink-soft);margin-top:.6rem}
.rkc-first-step{margin-top:1.4rem;padding:1.1rem 1.2rem;border-left:4px solid var(--sun);background:var(--paper);border-radius:0 10px 10px 0}
.rkc-first-step p:last-child{font:400 1.12rem/1.45 var(--f-display);margin-top:.3rem}
.rkc-reading ul{margin:0;padding-left:1.2rem}
.rkc-reading a{text-decoration-color:var(--sun);text-decoration-thickness:2px}
.rkc-conversion-grid{display:grid;gap:.8rem;margin-top:1.4rem}
.rkc-newsletter,.rkc-book{padding:1.2rem;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.rkc-newsletter h3,.rkc-book h3{font:600 1.2rem var(--f-display);margin:.3rem 0 .4rem}
.rkc-newsletter p,.rkc-book p{color:var(--ink-soft);font-size:.96rem;margin-bottom:.8rem}
.rkc-newsletter form{display:grid;gap:.6rem}
.rkc-label{display:flex;flex-direction:column;gap:.3rem;font-weight:600;font-size:.9rem}
.rkc-input{font:400 1rem var(--f-body);padding:.75em .95em;border:1px solid var(--line);background:var(--surface);border-radius:10px}
.rkc-honeypot{position:absolute;left:-10000px}
.rkc-consent{display:flex;gap:.6rem;font-size:.85rem;color:var(--ink-soft)}
.rkc-consent input{accent-color:var(--sun);margin-top:.25rem}
.rkc-form-message{font-size:.92rem}
.rkc-emergency{margin-top:1.2rem;padding:.9rem 1rem;background:#FBE9E4;border:1px solid #E7B9AC;border-radius:8px;font-size:.92rem}
.rkc-reset{all:unset;cursor:pointer;font-size:.9rem;color:var(--ink-soft);text-decoration:underline;margin-top:1.2rem;display:inline-block}
.rkc-reset:focus-visible{outline:3px solid var(--sun)}
@media (max-width:34rem){.rkc-result-grid{grid-template-columns:1fr}.rkc-shell{padding:1.3rem}}

/* legal text */
.legal{max-width:46rem;padding-bottom:4.5rem}
.legal h2{font-size:1.6rem;margin:2.2rem 0 .8rem}
.legal p,.legal li{color:var(--ink-soft)}
.legal p+p{margin-top:.9rem}
.legal ul{padding-left:1.2rem;display:grid;gap:.4rem}

/* footer */
footer.site{background:var(--ink);color:var(--on-ink-soft);padding-block:3.5rem 2rem;font-size:.95rem}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
footer.site .cols>*{min-width:0}
footer.site h2{font:500 .72rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-ink);margin-bottom:.8rem}
footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
footer.site a{text-decoration:none}
footer.site a:hover{color:var(--on-ink);text-decoration:underline}
footer.site .logo strong{color:var(--on-ink)}
footer.site .fnote{margin-top:1rem;max-width:22em}
footer.site .bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem;margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.12);font-size:.85rem}
@media (max-width:54rem){footer.site .cols{grid-template-columns:1fr 1fr}}
@media (max-width:30rem){footer.site .cols{grid-template-columns:1fr}}
@media (max-width:48rem){footer.site{padding-bottom:6rem}}

/* sticky mobile CTA */
.mcta{position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;gap:.5rem;padding:.65rem 1rem calc(.65rem + env(safe-area-inset-bottom,0px));background:rgba(245,240,230,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .35s var(--ease)}
.mcta.show{transform:none}
.scroll-down .mcta.show{transform:translateY(110%)}
.mcta .btn{flex:1;padding:.75em 1em;font-size:.95rem}
@media (max-width:48rem){.mcta{display:flex}}
.page-kompas .mcta,.page-kontakt .mcta,.page-read .mcta{display:none}

/* consent banner */
.consent{position:fixed;left:1rem;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px));z-index:60;max-width:34rem;margin-left:auto;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1.2rem 1.3rem;box-shadow:0 30px 60px -20px rgba(31,51,71,.45);font-size:.95rem}
.consent a{color:var(--ink)}
.consent-btns{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.9rem}
.consent .btn{padding:.6em 1.1em;font-size:.92rem}