:root{color-scheme:light;--ink:#1c2730;--paper:#f7f6f3;--line:#ceccc7}
html{scroll-behavior:smooth}
body{width:100%!important;max-width:1024px;margin:0 auto!important;background:var(--paper);color:var(--ink)}
.page{width:100%!important;max-width:1024px;margin:0 auto;overflow:visible!important}
img{max-width:100%}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.site-header,.site-footer{width:100%;min-height:70px;height:auto!important;padding:14px 48px!important;display:flex!important;align-items:center;justify-content:space-between;gap:30px;border-bottom:1px solid var(--line)}
.site-header{background:var(--paper)}
.site-footer{min-height:82px;border-top:1px solid var(--line);border-bottom:0}
.site-brand{font:22px/1.1 Arial,sans-serif;letter-spacing:.19em;white-space:nowrap}
.site-brand small{display:block;font:10px/1.2 Arial,sans-serif;letter-spacing:.04em;color:#7d8285;margin-top:5px}.site-footer-brand small{display:block;font:9px/1.2 Arial,sans-serif;letter-spacing:.04em;color:#7d8285;margin-top:5px}
.site-footer-brand{font:18px Arial,sans-serif;letter-spacing:.19em;white-space:nowrap}
.site-nav{width:auto!important;display:flex!important;align-items:center;justify-content:flex-end!important;gap:17px!important;font:13px/1.3 Arial,sans-serif!important;white-space:nowrap}
.site-nav a{display:inline-block;border-bottom:1px solid transparent;padding:7px 0;margin:0!important}
.site-nav a.active{border-bottom-color:var(--ink)}
.site-nav a:hover{border-bottom-color:#777}
.language-link{flex:0 0 auto;font:10px Arial,sans-serif;letter-spacing:.12em;border-bottom:1px solid var(--line);padding:7px 0}.language-link:hover{border-bottom-color:var(--ink)}

/* Keep the adopted desktop compositions while making the long reading pages usable. */
.hero-copy p,.purpose p,.pair p{font-size:16px!important;line-height:1.52!important}
.card p{font-size:14.5px!important;line-height:1.48!important}
.work p,.audience p{font-size:16px!important;line-height:1.52!important}
.keyword span,.keyword{font-size:12px!important}
.hero img{display:block}
.route{transition:background-color .2s ease}
.route:hover{background:#e9e8e4}
.route:focus-visible{outline-offset:-4px}
.contact-page{min-height:620px;display:grid;grid-template-columns:52% 48%;border-bottom:1px solid var(--line)}
.contact-copy{padding:72px 52px;background:#fbfaf8}
.contact-eyebrow{font:11px Arial,sans-serif;letter-spacing:.28em;color:#7d8285}
.contact-copy h1{font:normal 54px/1.1 Arial,sans-serif;margin:40px 0 35px}
.contact-copy p{font:20px/1.5 Georgia,serif;max-width:410px}.contact-methods{display:grid;gap:22px;margin-top:28px}.contact-methods span{display:block;font:10px Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#7d8285;margin-bottom:7px}.contact-methods a{display:block;font:20px/1.4 Georgia,serif;text-decoration:none}.contact-methods a:hover{text-decoration:underline;text-underline-offset:4px}.contact-methods .whatsapp-link{font:13px/1.4 Arial,sans-serif;margin-top:5px;letter-spacing:.03em}
.contact-art{background:url('pocetna-assets/uvod.png') center/cover no-repeat;filter:grayscale(1)}

@media (max-width:900px){
  .site-header,.site-footer{padding:18px 28px!important;flex-wrap:wrap;gap:14px}
  .site-nav{justify-content:flex-start!important;flex-wrap:wrap;white-space:normal;gap:10px 18px!important}
  .hero{height:auto!important;min-height:0!important}
  .hero-copy{padding:45px 32px!important}
  .purpose,.cards,.pair,.audience{margin-left:28px!important;margin-right:28px!important}
  .section-head{padding-left:28px!important;padding-right:28px!important}
  .card-image{width:43%;height:240px}
}
@media (max-width:700px){
  .site-header,.site-footer{display:block!important;padding:18px 23px!important}
  .site-nav{display:flex!important;margin-top:15px;gap:4px 17px!important;font-size:13px!important;overflow:visible}
  .site-nav a{padding:6px 0}
  h1{font-size:clamp(34px,9vw,46px)!important}
  .hero{display:block!important}
  .hero-copy{padding:38px 25px!important}
  .hero img,.hero-art{height:330px!important;min-height:0!important;width:100%;object-fit:cover}
  .purpose,.cards,.pair,.audience{display:block!important;margin:0 20px 24px!important}
  .purpose article,.pair article,.card{min-height:0!important;margin-bottom:12px}
  .card{display:block}
  .card-content{display:block}
  .card-image,.card img{display:block;float:none!important;width:100%!important;height:235px!important;margin:0 0 18px!important;object-fit:cover}
  .card p{font-size:16px!important;line-height:1.5!important}
  .keywords{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;overflow:visible!important;padding:20px 24px!important;gap:14px}
  .keyword{min-height:90px;border-right:0!important;border-bottom:1px solid var(--line);padding:8px 0!important;margin:0!important}
  .keyword:last-child{border-bottom:0}
  .work,.outcome,.coda,.note{display:block!important}
  .work{margin:0 24px 24px!important}
  .work article+article{border-left:0!important;border-top:1px solid var(--line);padding-left:0!important}
  .outcome,.coda{margin:0!important}
  .outcome-art,.note img{height:220px!important;width:100%;object-fit:cover}
  .outcome-copy,.note>div{padding:30px 24px!important}
  .audience article+article{border-left:0!important;border-top:1px solid var(--line);padding-left:0!important}
  .essay{display:block!important;min-height:0!important}
  .essay h2{padding:26px 25px 0!important}
  .essay .copy{border-left:0!important;padding:22px 25px 34px!important}
  .signature{padding:30px 25px!important}
  .contact-page{display:block;min-height:0}
  .contact-copy{padding:48px 26px 55px}
  .contact-art{height:320px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.route{transition:none}}