/* YFCH, design 1B "Warm community". Tokens frozen from demo/yfch/1b.html. */
:root{
  --bg:#FAF8F3; --ink:#2b2b2b; --muted:#5c574d; --soft:#8a857b;
  --card:#fff; --line:#eee9df; --line2:#e6e0d3;
  --cyan:#45D6DC; --cyan-ink:#17393b; --cyan-soft:#DFF6F7;
  --pink:#EE6FB0; --yellow:#F5D664; --teal:#0e9aa6;
  --ph-bg:#F1EDE2; --ph-line:#CCC5B4;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font:400 16px/1.65 'Albert Sans',system-ui,sans-serif}
h1,h2,h3{font-family:'Familjen Grotesk',sans-serif;line-height:1.15;margin:0}
p{margin:0}
a{color:var(--teal)}
/* height:auto ide UZ max-width, inace slika s width/height atributima
   zadrzi visinu iz atributa dok joj se sirina steze, pa se razvuce.
   Tako su 10.09. zavrsili logo i svih 11 plakata na /projects/. */
img{max-width:100%;height:auto}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
@media(min-width:760px){.wrap{padding:0 48px}}

/* header */
.site-head{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:14px;padding-bottom:14px}
.site-head img{height:38px;width:auto;display:block}
.nav{display:flex;align-items:center;gap:22px;font-weight:500;font-size:15px}
.nav a{color:var(--ink);text-decoration:none}
.nav a:hover{color:var(--teal)}
.nav a.cta{background:var(--cyan);color:var(--cyan-ink);padding:10px 20px;border-radius:99px;font-weight:700}
.nav a.cta:hover{background:#5FDDE2}
.nav a[aria-current="page"]{color:var(--teal);font-weight:700}
@media(max-width:640px){
  .site-head .wrap{flex-wrap:wrap;justify-content:center;gap:10px;padding-top:12px;padding-bottom:12px}
  .nav{gap:14px;font-size:14px;flex-wrap:wrap;justify-content:center}
  .nav a.cta{padding:8px 16px}
  .site-head img{height:32px;width:auto}
}
/* Five nav items plus the button wrapped to three rows on a 320px phone and
   made the sticky header 159px tall, which is half that screen. Tighter type
   and gaps put it back to two rows. */
@media(max-width:400px){
  .nav{gap:11px;font-size:13px}
  .nav a.cta{padding:7px 13px}
  .site-head img{height:32px;width:auto}
  .site-head .wrap{gap:8px;padding-top:10px;padding-bottom:10px}
}

/* buttons */
.btn{display:inline-block;text-decoration:none;border-radius:99px;
  font:700 15px 'Albert Sans',sans-serif;padding:14px 26px}
.btn:hover{opacity:.92}
.btn-dark{background:var(--ink);color:#fff}
.btn-line{color:var(--ink);border:2px solid #e3ddd0;padding:12px 24px}
.btn-line:hover{border-color:var(--ink);opacity:1}
.btn-deep{background:var(--cyan-ink);color:#fff}

/* hero */
.hero{display:grid;gap:36px;padding:44px 0 52px;align-items:center}
@media(min-width:860px){.hero{grid-template-columns:1.05fr 1fr;gap:48px;padding:64px 0}}
/* Pecina recenica (11.09.2026) je dvostruko dulja od stare, pa se prelama sama i ide malo manja. */
.hero h1{font-size:clamp(27px,3.8vw,40px);font-weight:700;margin-bottom:20px;text-wrap:pretty;line-height:1.15}
.hero p{font-size:17px;color:var(--muted);max-width:480px;margin-bottom:28px}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-art{position:relative}
.hero-art .dot-a{position:absolute;left:-12px;top:-12px;width:28px;height:28px;border-radius:50%;background:var(--pink)}
.hero-art .dot-b{position:absolute;right:-8px;bottom:34px;width:20px;height:20px;border-radius:50%;background:var(--yellow)}

/* photo placeholder (visible gap by design: no photo yet) */
.ph{background:var(--ph-bg);border:1.5px dashed var(--ph-line);border-radius:24px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--soft);font:500 13px/1.5 'Albert Sans',sans-serif;padding:12px}

/* cards */
.cards3{display:grid;gap:20px;padding-bottom:56px}
@media(min-width:760px){.cards3{grid-template-columns:1fr 1fr 1fr}.cards4{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.cards4{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--card);border-radius:20px;padding:28px}
.card .dot{width:12px;height:12px;border-radius:50%;margin-bottom:14px}
.card h3{font-size:20px;margin-bottom:8px}
.card p{font-size:14.5px;color:var(--muted)}

/* open call panel */
.call-panel{background:var(--cyan-soft);border-radius:24px;padding:32px 24px;
  display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
@media(min-width:760px){.call-panel{padding:40px 44px}}
.call-panel h2{font-size:28px;margin-bottom:8px}
.call-panel p{font-size:15px;color:#33555a;max-width:560px}
.call-tag{display:inline-block;background:#fff;border-radius:99px;padding:5px 14px;
  font:700 12px 'Albert Sans',sans-serif;color:var(--teal);letter-spacing:.04em;
  text-transform:uppercase;margin-bottom:12px}

/* section headings */
.section{padding:56px 0 8px}
.section>h2{font-size:30px;margin-bottom:24px}
.section-foot{padding:20px 0 0;font-size:15px}

/* project rows */
.proj-list,.proj-next{display:flex;flex-direction:column;gap:16px}
.proj{background:var(--card);border-radius:20px;padding:22px 24px;display:grid;gap:16px;align-items:center}
@media(min-width:760px){.proj{grid-template-columns:200px 1fr auto;gap:24px;padding:22px 28px}}
.proj .ph{height:110px;border-radius:12px;font-size:11px}
.proj h3{font-size:20px}
.proj .meta{font-size:14px;color:var(--muted);margin-top:4px}
.proj .date{font:600 14px 'Albert Sans',sans-serif;color:var(--teal);white-space:nowrap}
.proj.compact{grid-template-columns:1fr auto}

/* team */
.team{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;text-align:center}
@media(min-width:760px){.team{grid-template-columns:repeat(4,1fr)}}
.team .face,.team img{width:150px;height:150px;margin:0 auto;border-radius:50%;object-fit:cover;display:block}
.team .face{font-size:11px}
.team .name{font:700 16px 'Familjen Grotesk',sans-serif;margin-top:14px}
.team .role{font-size:13px;color:var(--soft)}

/* partners */
.partners{padding:52px 0;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.partners .label{font:600 14px 'Albert Sans',sans-serif;color:var(--soft);margin-right:6px}
.partners .pill{background:var(--card);border-radius:99px;padding:9px 18px;font:600 14px 'Albert Sans',sans-serif}
.partners .more{font-size:13px;color:var(--soft)}

/* footer */
.site-foot{border-top:1px solid var(--line2);margin-top:44px}
.site-foot .cols{display:grid;gap:28px;padding:36px 0 20px;font-size:14px;line-height:1.7;color:var(--muted)}
@media(min-width:760px){.site-foot .cols{grid-template-columns:1.2fr 1fr 1fr 1fr}}
.site-foot img{height:34px;width:auto;display:block;margin-bottom:12px}
.site-foot .h{font:700 13px 'Albert Sans',sans-serif;color:var(--ink);margin-bottom:8px}
.site-foot a{color:var(--muted);text-decoration:none}
.site-foot a:hover{color:var(--teal)}
.site-foot a.mail{color:var(--teal)}
.site-foot .fine{padding:0 0 28px;font-size:13px;color:var(--soft)}

/* inner pages */
.page-head{padding:48px 0 8px}
.page-head h1{font-size:clamp(28px,4vw,40px);margin-bottom:14px}
.page-head p{font-size:17px;color:var(--muted);max-width:620px}
.prose{max-width:640px;font-size:16px;color:var(--muted)}
.prose p{margin-bottom:16px}
.prose strong{color:var(--ink)}

/* contact cards */
.contact-grid{display:grid;gap:20px;padding:36px 0 8px}
@media(min-width:760px){.contact-grid{grid-template-columns:1fr 1fr}}
.contact-card{background:var(--card);border-radius:20px;padding:28px}
.contact-card h3{font-size:19px;margin-bottom:10px}
.contact-card p{font-size:15px;color:var(--muted)}
.contact-card a.big{font:700 19px 'Familjen Grotesk',sans-serif;color:var(--teal);text-decoration:none;word-break:break-all}
.contact-card ul{margin:8px 0 0;padding:0;list-style:none;font-size:15px}
.contact-card li{margin-bottom:6px}

/* ============================================================
   Effects layer, added 09.09.2026. Everything above is the base
   design; everything below is motion and depth on top of it.
   All of it is switched off under prefers-reduced-motion at the
   end of this file.
   ============================================================ */

/* ambient: film grain, drifting colour, a light that follows the cursor */
.stage{position:relative;isolation:isolate}
.grain{position:fixed;inset:-50%;pointer-events:none;opacity:.05;mix-blend-mode:multiply;z-index:6;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grainshift 8s steps(6) infinite}
@keyframes grainshift{0%{transform:translate(0,0)}20%{transform:translate(-4%,2%)}40%{transform:translate(3%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(2%,3%)}100%{transform:translate(0,0)}}
.orbs{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.orb{position:absolute;border-radius:50%;filter:blur(3px);animation:drift 15s ease-in-out infinite alternate;will-change:transform}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(20px,-30px) scale(1.14)}}
.spot{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,30%),rgba(69,214,220,.20),transparent 62%)}

/* entrance */
.js .rise{opacity:0;transform:translateY(18px);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.d1{animation-delay:.05s}.d2{animation-delay:.18s}.d3{animation-delay:.32s}.d4{animation-delay:.46s}.d5{animation-delay:.6s}
.line{display:block}
.js .line{opacity:0;transform:translateY(24px);filter:blur(6px);animation:lineup .95s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes lineup{to{opacity:1;transform:none;filter:blur(0)}}
.l1{animation-delay:.06s}.l2{animation-delay:.2s}.l3{animation-delay:.34s}
/* Only ever on a heading with NO animated children: a child with its own
   opacity or filter makes a new rendering context and background-clip:text
   stops clipping, which renders the whole heading invisible. */
.sheen{background:linear-gradient(100deg,#2b2b2b 0 40%,#0e9aa6 50%,#2b2b2b 60% 100%);background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:sheen 2.8s 1s cubic-bezier(.4,0,.2,1) 1 both}
@keyframes sheen{from{background-position:120% 0}to{background-position:-40% 0}}
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}

/* header sits on frosted glass */
.site-head{background:rgba(255,255,255,.74);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.nav a:not(.cta){position:relative}
.nav a:not(.cta)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--cyan);
  transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.nav a:not(.cta):hover::after{transform:scaleX(1);transform-origin:left}
.nav a.cta{transition:box-shadow .35s,transform .25s cubic-bezier(.2,.7,.2,1)}
.nav a.cta:hover{box-shadow:0 0 0 7px rgba(69,214,220,.22);transform:translateY(-1px);background:var(--cyan)}

/* buttons: a shine crosses them, and they lean toward the cursor */
.btn{position:relative;overflow:hidden;min-height:44px;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}
.btn::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);transform:skewX(-18deg);
  transition:left .6s cubic-bezier(.2,.7,.2,1)}
.btn:hover::before{left:120%}
.btn svg{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.btn:hover svg{transform:translateX(4px)}
.btn-dark{box-shadow:0 10px 24px -14px rgba(43,43,43,.7)}
.btn-dark:hover{box-shadow:0 20px 34px -14px rgba(43,43,43,.78);opacity:1}
.btn-deep{box-shadow:0 12px 26px -16px rgba(23,57,59,.9)}
.btn-deep:hover{box-shadow:0 20px 36px -16px rgba(23,57,59,.95);opacity:1}
.btn-line:hover{opacity:1}

/* hero photo: gradient edge, wipes open on load */
.hero-art .ring{position:relative;border-radius:26px;padding:2px;
  background:linear-gradient(150deg,var(--cyan),var(--pink) 55%,var(--yellow));
  box-shadow:0 30px 60px -40px rgba(23,57,59,.55);transition:box-shadow .6s cubic-bezier(.2,.7,.2,1)}
.hero-art .ring:hover{box-shadow:0 40px 70px -40px rgba(23,57,59,.7)}
.hero-art .ring .hero-photo{display:block;width:100%;height:400px;object-fit:cover;
  object-position:50% 42%;border-radius:24px}
.hero-art .ring .ph{border-radius:24px;margin:0;height:400px;
  clip-path:inset(0 0 100% 0);animation:wipe 1.1s .35s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes wipe{to{clip-path:inset(0 0 0 0)}}

/* value cards tilt under the pointer and glow in their own colour */
.cards3{perspective:1000px}
.card{transform-style:preserve-3d;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.card:hover{box-shadow:0 34px 56px -34px rgba(23,57,59,.4)}
.card::before{content:"";position:absolute;inset:0;border-radius:20px;opacity:0;transition:opacity .45s;pointer-events:none;
  background:radial-gradient(260px circle at var(--gx,50%) var(--gy,50%),color-mix(in oklch,var(--glow,#45D6DC) 26%,transparent),transparent 70%)}
.card:hover::before{opacity:1}
.card::after{content:"";position:absolute;inset:0;border-radius:20px;opacity:0;transition:opacity .45s;pointer-events:none;
  box-shadow:0 0 0 1px var(--glow,#45D6DC),0 0 46px -10px var(--glow,#45D6DC)}
.card:hover::after{opacity:.55}
.card>*{position:relative}
.card .dot{transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.card:hover .dot{transform:scale(1.6);box-shadow:0 0 0 6px color-mix(in oklch,var(--glow,#45D6DC) 22%,transparent)}

/* open call: a still gradient edge, with light travelling across the panel */
.call-shell{position:relative;border-radius:24px;padding:2px;
  background:linear-gradient(110deg,var(--cyan),var(--cyan-soft) 40%,var(--pink) 70%,var(--yellow))}
.call-shell .call-panel{position:relative;overflow:hidden;border-radius:22px;margin:0}
.call-shell .call-panel::before{content:"";position:absolute;top:0;bottom:0;left:-40%;width:28%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.72),transparent);transform:skewX(-16deg);
  animation:glide 6.5s cubic-bezier(.5,0,.5,1) 1.6s infinite}
@keyframes glide{0%{left:-40%}55%,100%{left:130%}}
.call-panel>*{position:relative;z-index:1}
.call-tag::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--pink);
  margin-left:8px;vertical-align:middle;animation:blink 2.4s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

/* section headings draw their own rule when they arrive */
.head-rule{position:relative;display:inline-block;padding-bottom:10px}
.head-rule::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--cyan),var(--pink),var(--yellow));
  transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.2,.7,.2,1) .15s}
.reveal.in .head-rule::after,.head-rule.in::after{transform:scaleX(1)}

/* ticker of past projects */
.marq{overflow:hidden;white-space:nowrap;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);
  padding:14px 0;font:600 14px 'Albert Sans',sans-serif;color:var(--muted);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marq div{display:inline-block;animation:marq 38s linear infinite}
.marq:hover div{animation-play-state:paused}
.marq span{margin:0 28px;transition:color .3s}
.marq span:hover{color:var(--teal)}
.marq i{color:var(--cyan);font-style:normal}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---- the map: where we have been ---- */
.mapwrap{position:relative;background:var(--cyan-ink);border-radius:28px;overflow:hidden;padding:34px;
  box-shadow:0 50px 80px -50px rgba(23,57,59,.75);margin-top:52px}
.mapwrap::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.13) 1px,transparent 1px);background-size:26px 26px}
.mapwrap::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(700px 420px at 62% 30%,rgba(69,214,220,.20),transparent 65%)}
.maphead{position:relative;z-index:2}
.maphead h2{color:#fff;font-size:30px}
.maphead p{margin:14px 0 0;color:rgba(255,255,255,.62);font-size:14.5px;max-width:520px}
.mapscroll{position:relative;z-index:2;margin-top:10px}
.mapsvg{width:100%;height:auto;display:block}
.arc{fill:none;stroke-width:2;stroke-linecap:round;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-width .35s,opacity .35s;opacity:.75}
.reveal.in .arc{animation:draw 1.5s cubic-bezier(.16,1,.3,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.node{cursor:pointer}
.node circle.hit{fill:transparent}
.node .halo{opacity:0;transition:opacity .4s}
.node:hover .halo,.node.on .halo{opacity:.28}
.node .core{transition:r .35s cubic-bezier(.16,1,.3,1)}
.node:hover .core,.node.on .core{r:9}
.node text{fill:#fff;font:600 13px 'Albert Sans',sans-serif}
.ping{animation:ping 2.8s ease-out infinite}
@keyframes ping{0%{r:7;opacity:.5}70%,100%{r:22;opacity:0}}
.legend{position:relative;z-index:2;display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.lg{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.9);
  border-radius:99px;padding:8px 16px;font:600 13px 'Albert Sans',sans-serif;cursor:pointer;
  transition:background .3s,border-color .3s,transform .3s}
.stops{display:none}
.lg:hover,.lg.on{background:rgba(69,214,220,.2);border-color:var(--cyan);transform:translateY(-2px)}
.detail{position:relative;z-index:2;margin-top:22px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-radius:18px;padding:20px 24px;min-height:96px}
.detail .k{font:700 11px 'Albert Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.detail .t{font:700 21px 'Familjen Grotesk',sans-serif;color:#fff;margin-top:6px}
.detail .s{color:rgba(255,255,255,.7);font-size:14.5px;margin-top:4px}
.waiting{position:relative;z-index:2;margin-top:20px;color:rgba(255,255,255,.55);font-size:13.5px}
.waiting b{color:var(--yellow);font-weight:700}
@media(max-width:760px){
  .mapwrap{padding:22px;border-radius:22px;margin-top:36px}
  .maphead h2{font-size:24px}
  /* Europe is wider than a phone. Squeezed to ~306px the 13-unit place names
     render at 7px, and enlarging them makes Wieleń and Gołanice collide. Until
     26.09.2026 the map kept its real size and scrolled sideways inside its box,
     which on a phone read as broken. Now the map fits the width (effects.js
     crops the viewBox to the dots), the names inside the picture are hidden,
     and the same names sit under it as tappable chips (.stops). */
  .mapsvg .node text{display:none}
  .mapsvg .node .core{r:9}
  .mapsvg .arc{stroke-width:3}
  .stops{display:flex;flex-wrap:wrap;gap:8px;position:relative;z-index:2;margin-top:12px}
  .stops .lg{background:transparent;font-size:12px;padding:6px 12px}
  .stops+.legend{margin-top:22px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12)}
  .legend{gap:8px}
  .lg{padding:7px 13px;font-size:12px}
}

/* project rows lift a little too */
.proj{transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.proj:hover{transform:translateY(-3px);box-shadow:0 26px 44px -32px rgba(23,57,59,.4)}
.contact-card{transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.contact-card:hover{transform:translateY(-3px);box-shadow:0 26px 44px -32px rgba(23,57,59,.35)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important}
  .rise,.line,.reveal{opacity:1 !important;transform:none !important;filter:none !important}
  .hero-art .ring .ph{clip-path:none !important}
  .arc{stroke-dashoffset:0 !important}
  .sheen{color:var(--ink);-webkit-text-fill-color:var(--ink);background:none;
    -webkit-background-clip:border-box;background-clip:border-box}
  .head-rule::after{transform:scaleX(1) !important}
  .spot,.grain{display:none}
}

/* the credit line: present, readable, and not shouting */
.site-foot .fine a.by{color:var(--soft);text-decoration:none;border-bottom:1px solid rgba(138,133,123,.45);
  transition:color .3s,border-color .3s}
.site-foot .fine a.by:hover{color:var(--teal);border-color:var(--teal)}


/* facts table on /partners/, and the question blocks under it */
.facts{background:var(--card);border-radius:20px;padding:8px 28px;margin-top:28px}
.facts dl{margin:0;display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:640px){.facts dl{grid-template-columns:230px 1fr}}
.facts dt{font:600 15px 'Albert Sans',sans-serif;color:var(--muted);
  padding:14px 0 2px;border-top:1px solid var(--line)}
.facts dd{margin:0;padding:2px 0 14px;font-size:16px}
@media(min-width:640px){.facts dd{padding:14px 0;border-top:1px solid var(--line)}
  .facts dt{padding:14px 0}}
.facts dl>dt:first-of-type,.facts dl>dt:first-of-type+dd{border-top:0}
.facts .code{font:600 16px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em}
.qa{margin-top:14px}
.qa h3{font-size:18px;margin-bottom:6px}
.qa p{color:var(--muted);margin-bottom:22px;max-width:640px}


/* photo strip on the homepage. object-fit cover means the crop is deliberate,
   so the aspect check skips these on purpose. */
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
@media(min-width:760px){.gallery{grid-template-columns:repeat(3,1fr);gap:16px}}
.gallery figure{margin:0;position:relative;border-radius:18px;overflow:hidden;
  background:var(--ph-bg);transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.gallery figure:hover{transform:translateY(-4px);box-shadow:0 26px 44px -30px rgba(23,57,59,.45)}
.gallery img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
@media(prefers-reduced-motion:reduce){.gallery figure{transition:none}
  .gallery figure:hover{transform:none}}

/* partneri kao poveznice: ista boja kao ostale pilule, ne tirkizna od <a> */
a.pill{color:inherit;text-decoration:none}
a.pill:hover{border-color:var(--cyan);color:inherit}

/* ---- blog (12.09.2026) ---- */
.posts-list{display:flex;flex-direction:column;gap:16px;margin-top:24px}
.post-card{display:block;background:var(--card);border-radius:20px;padding:22px 24px;color:inherit;text-decoration:none;border:1px solid transparent;transition:border-color .15s,transform .15s}
.post-card:hover{border-color:var(--cyan);transform:translateY(-2px);color:inherit}
.post-card h2{font-size:21px;margin:0 0 6px}
.post-card p{margin:8px 0 0;color:var(--muted);font-size:15px}
.post-meta{font:600 13.5px 'Albert Sans',sans-serif;color:var(--teal)}
/* Cinjenice projekta ispod datuma: vrsta, mjesto, termin. Isto sto stoji u
   strukturiranim podacima, da citatelj moze provjeriti ono sto tvrdimo. */
.post-facts{margin-top:6px;font:400 14px 'Albert Sans',sans-serif;color:var(--muted)}
.crumbs{font-size:13px;color:var(--muted);margin-bottom:8px}
.post-body{max-width:680px}
.post-body p,.post-body ul{font-size:16.5px;line-height:1.7;margin:0 0 18px}
.post-body h2{font-size:23px;margin:30px 0 10px}
.post-body h3{font-size:19px;margin:24px 0 8px}
.post-body ul{padding-left:22px}
.post-body li{margin-bottom:6px}
/* Bez rezanja na 16/9. Njihove fotke imaju utisnut okvir s YFCH logom i
   oznakom sufinanciranja pri dnu, pa je rez skidao bas taj dio. */
.post-cover{width:100%;height:auto;border-radius:18px;margin-bottom:22px}

/* ---- fotografije objave ---- */
/* .shot je gumb, da se slika moze otvoriti i tipkovnicom, ali izgleda kao
   slika: bez okvira, bez pozadine, bez razmaka. */
.shot{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;border-radius:18px}
.shot:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.shot img{display:block;width:100%;height:auto}
.shot.lead{margin-bottom:22px}
.shot.lead .post-cover{margin-bottom:0}

/* vrtuljak vodece fotke: kontrole gradi skripta, pa bez JavaScripta ovoga nema */
.lead-wrap{position:relative;margin-bottom:22px}
.lead-wrap .shot.lead{margin-bottom:0}
.lead-nav{display:flex;align-items:center;justify-content:center;gap:10px;
          margin-top:10px;flex-wrap:wrap}
.lead-b{display:inline-flex;align-items:center;justify-content:center;
        width:38px;height:38px;padding:0;border:1px solid var(--line);
        border-radius:999px;background:#fff;color:#2b2b2b;font-size:18px;
        line-height:1;cursor:pointer}
.lead-b:hover{border-color:#cfc9bb}
.lead-b:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.lead-play{font-size:11px}
.lead-dots{display:flex;align-items:center;gap:0}
/* Vidljiva tocka je 9px, ali je meta za prst 25px: padding plus
   background-clip:content-box. Bez toga je meta bila 9px, sto je ispod
   minimuma od 24px (WCAG 2.5.8) i na mobitelu se jednostavno ne pogodi. */
.lead-dot{width:9px;height:9px;padding:8px;box-sizing:content-box;border:0;
          border-radius:999px;background:#d8d2c5;background-clip:content-box;
          cursor:pointer}
.lead-dot.on{background:var(--teal,#0e9aa6);background-clip:content-box}
.lead-dot:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.lead-dot{transition:none}}
/* Mreza fotki ispod teksta je MAKNUTA 17.09.2026, pa su i njena pravila otisla.
   Vodeca fotka od istoga dana prolazi kroz sve fotke, pa je mreza pokazivala
   iste slike drugi put; Pece ju je zaokruzio i rekao da tu ne treba, Anto
   potvrdio. Razlog i povijest stoje uz kod koji je crtao, u
   functions/blog/[slug].js. Klasa se zvala .post-shots; ako se ikad vraca, NE
   zvati je .gallery, ta klasa vec postoji na naslovnici i ima svoj raspored. */

/* povecana fotka */
/* 9999 i premjestanje u <body> skriptom: zaglavlje je ljepljivo i zivi u
   svom slojevitom kontekstu, pa je bez toga gumb za zatvaranje zavrsavao
   ispod njega. */
.lb{position:fixed;inset:0;z-index:9999;background:rgba(20,18,15,.93);
    display:flex;align-items:center;justify-content:center;padding:52px 16px}
.lb[hidden]{display:none}
.lb img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:10px}
.lb-btn{position:absolute;border:0;background:rgba(255,255,255,.12);color:#fff;
        width:46px;height:46px;border-radius:50%;font-size:26px;line-height:1;cursor:pointer}
.lb-btn:hover{background:rgba(255,255,255,.24)}
.lb-btn:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.lb-x{top:12px;right:12px}
.lb-p{left:12px;top:50%;transform:translateY(-50%)}
.lb-n{right:12px;top:50%;transform:translateY(-50%)}
.lb-count{position:absolute;bottom:16px;left:0;right:0;text-align:center;
          color:#fff;font:600 13px 'Albert Sans',sans-serif;opacity:.75}

/* ---- oznaka sufinanciranja EU ---- */
/* Sklop je onakav kakav je original: kod 'eu' zastava lijevo i izjava desno,
   kod 'erasmus' izjava u tri retka lijevo i zastava desno, tekst u EU plavoj.
   Redoslijed dolazi iz HTML-a, ne iz CSS-a, pa je isti i kad stilovi ne
   ucitaju. */
.eu-fund{display:flex;align-items:center;gap:16px;margin:34px 0 4px;padding-top:22px;
         border-top:1px solid var(--line2)}
.eu-fund img{width:90px;height:60px;flex:none}
.eu-say{font:400 16px/1.25 'Albert Sans',sans-serif;color:#039}
.eu-eu .eu-say{font-size:15px}
@media(max-width:420px){
  .eu-fund{gap:12px}
  .eu-fund img{width:72px;height:48px}
  .eu-say{font-size:14px}
}
.eu-tag{display:inline-flex;align-items:center;gap:8px;margin-top:8px;
        font:600 12.5px 'Albert Sans',sans-serif;color:var(--soft)}
.eu-tag img{width:24px;height:16px;flex:none;border-radius:1px}

@media(max-width:520px){
  .lb{padding:56px 10px}
  .lb-p{left:6px}
  .lb-n{right:6px}
}

.post-card.with-thumb{display:grid;gap:18px;align-items:start}
@media(min-width:760px){.post-card.with-thumb{grid-template-columns:200px 1fr}}
.post-thumb{width:100%;border-radius:14px;aspect-ratio:4/3;object-fit:cover;display:block}