/* ============================================================
   (Po)vezivanje generacija — stil
   Boje i tipografija po posteru: crvena / papir / crna,
   teški grotesk (Archivo) + serif (Lora). Mobile-first.
   ============================================================ */

:root{
  --red:        #9d1c1f;
  --red-dark:   #7c1416;
  --red-deep:   #5f0f12;
  --ink:        #17130f;
  --paper:      #f5f1e8;
  --cream:      #ece5d6;
  --muted:      #6c655b;
  --line:       rgba(23,19,15,.14);
  --line-light: rgba(245,241,232,.22);
  --shadow:     0 10px 30px rgba(23,19,15,.12);
  --maxw:       1120px;
  --r:          4px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:64px; }
body{
  margin:0;
  font-family:"Lora", Georgia, serif;
  color:var(--ink);
  background:var(--paper);
  font-size:18px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:var(--red); text-decoration:none; }
a:hover{ text-decoration:underline; }

h1,h2,h3,h4,.brand,.kicker,.btn,.nav__links a,.read__title,.read__cta{
  font-family:"Archivo", Helvetica, Arial, sans-serif;
}

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 22px; }
.wrap--narrow{ max-width:780px; }
.center{ text-align:center; }

/* ---------------- NAV ---------------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(245,241,232,.94);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid var(--line);
}
.nav__inner{
  max-width:var(--maxw); margin:0 auto; padding:10px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{
  font-weight:900; font-size:19px; letter-spacing:-.01em;
  color:var(--ink); text-transform:uppercase; white-space:nowrap;
}
.brand:hover{ text-decoration:none; }
.brand__po{ color:var(--red); font-weight:600; }
.brand__rest{ font-weight:900; }

.nav__links{ display:flex; align-items:center; gap:22px; }
.nav__links a{
  color:var(--ink); font-weight:600; font-size:14px;
  letter-spacing:.01em; text-transform:uppercase;
}
.nav__links a:hover{ color:var(--red); text-decoration:none; }
.nav__ig{
  color:var(--red) !important; border:1.5px solid var(--red);
  padding:6px 12px; border-radius:999px; font-size:13px !important;
}
.nav__ig:hover{ background:var(--red); color:#fff !important; }

.nav__toggle{
  display:none; flex-direction:column; gap:5px;
  background:none; border:0; cursor:pointer; padding:8px;
}
.nav__toggle span{ width:24px; height:2.5px; background:var(--ink); border-radius:2px; transition:.25s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* ---------------- HERO ---------------- */
.hero{
  position:relative; overflow:hidden;
  background:var(--red);
  color:var(--paper);
  padding:72px 0 80px;
}
.hero__bg{ position:absolute; inset:0; pointer-events:none; }
.hero__tie{
  position:absolute; right:-10px; top:-20px; height:118%;
  opacity:.10;
}
.hero__tie path{ fill:var(--paper); }
.hero__tie-knot{ fill:var(--paper); }

.hero__content{
  position:relative; z-index:2;
  max-width:var(--maxw); margin:0 auto; padding:0 22px;
}
.hero__eyebrow{
  font-family:"Archivo",sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.18em; font-size:13px; margin:0 0 18px;
  color:var(--paper); opacity:.85;
}
.hero__title{
  font-family:"Archivo",sans-serif; font-weight:900;
  font-size:clamp(2.6rem, 11vw, 6rem); line-height:.92;
  letter-spacing:-.02em; margin:0 0 22px; text-transform:uppercase;
}
.hero__po{ font-weight:600; opacity:.92; }
.hero__sub{
  font-size:clamp(1.05rem,2.6vw,1.4rem); font-style:italic;
  max-width:30ch; margin:0 0 30px; opacity:.95;
}
.hero__facts{ list-style:none; margin:0 0 32px; padding:0; display:grid; gap:10px; max-width:520px; }
.hero__facts li{
  display:flex; gap:14px; align-items:baseline;
  border-top:1px solid var(--line-light); padding-top:10px;
}
.fact__k{
  font-family:"Archivo",sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; font-size:12px; opacity:.8; min-width:74px;
}
.fact__v{ font-size:1.02rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; }

/* ---------------- BUTTONS ---------------- */
.btn{
  display:inline-block; cursor:pointer; border:0;
  font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  font-size:14px; padding:13px 24px; border-radius:var(--r);
  transition:.2s; text-align:center;
}
.btn:hover{ text-decoration:none; transform:translateY(-1px); }
.btn--solid{ background:var(--ink); color:var(--paper); }
.btn--solid:hover{ background:#000; }
.btn--invert{ background:var(--paper); color:var(--ink); }
.btn--invert:hover{ background:#fff; }
.btn--ghost{ background:transparent; color:var(--paper); box-shadow:inset 0 0 0 2px var(--paper); }
.btn--ghost:hover{ background:var(--paper); color:var(--red); }
.btn--small{ padding:9px 16px; font-size:12.5px; background:var(--ink); color:var(--paper); }
.btn--small:hover{ background:#000; }
.btn--link{ background:transparent; color:var(--red); box-shadow:inset 0 0 0 1.5px var(--red); }
.btn--link:hover{ background:var(--red); color:#fff; }

/* ---------------- SECTIONS ---------------- */
.section{ padding:72px 0; }
.section--paper{ background:var(--paper); }
.section--cream{ background:var(--cream); }
.section--red{ background:var(--red); color:var(--paper); }

.kicker{
  font-family:"Archivo",sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.2em; font-size:12.5px; color:var(--red); margin:0 0 12px;
}
.kicker--light{ color:var(--paper); opacity:.85; }
.section__title{
  font-family:"Archivo",sans-serif; font-weight:800;
  font-size:clamp(1.8rem,5vw,2.8rem); line-height:1.05; letter-spacing:-.015em;
  margin:0 0 18px;
}
.section__title--light{ color:var(--paper); }
.section__intro{ max-width:60ch; color:var(--muted); margin:0 0 36px; font-size:1.05rem; }
.section--red .section__intro{ color:rgba(245,241,232,.85); }

/* O akciji */
.lead{
  font-family:"Lora",serif; font-style:italic; font-weight:500;
  font-size:clamp(1.35rem,3.6vw,2rem); line-height:1.4;
  border-left:4px solid var(--red); margin:0 0 34px; padding:6px 0 6px 24px;
  max-width:34ch;
}
.prose{ max-width:64ch; }
.prose--center{ margin:0 auto; }
.prose p{ margin:0 0 18px; }
.parola{
  font-family:"Archivo",sans-serif; font-weight:800; text-transform:uppercase;
  letter-spacing:.04em; color:var(--red); font-size:1.15rem; margin-top:26px;
}

/* ---------------- CARDS ---------------- */
.cards{ display:grid; gap:26px; grid-template-columns:1fr; }
.card{
  background:var(--paper); color:var(--ink); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column;
}
.card__photo{ aspect-ratio:4/5; overflow:hidden; background:#cfc8b8; }
.card__photo img{
  width:100%; height:100%; object-fit:cover; object-position:center top;
  filter:grayscale(100%) contrast(1.02); transition:.5s;
}
.card:hover .card__photo img{ filter:grayscale(0%); transform:scale(1.03); }
.card__body{ padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.card__name{ font-size:1.5rem; font-weight:800; margin:0 0 2px; letter-spacing:-.01em; }
.card__role{ color:var(--red); font-family:"Archivo",sans-serif; font-weight:600; font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; margin:0 0 2px; }
.card__years{ color:var(--muted); font-size:.9rem; margin:0 0 14px; }
.card__text{ font-size:.98rem; margin:0 0 20px; flex:1; }
.card__actions{ display:flex; flex-wrap:wrap; gap:10px; }

/* ---------------- ČITAONICA ---------------- */
.reads{ display:grid; gap:18px; grid-template-columns:1fr; }
.read{
  text-align:left; cursor:pointer; background:var(--paper);
  border:1px solid var(--line); border-left:5px solid var(--red);
  border-radius:var(--r); padding:22px 22px; display:grid; gap:6px;
  transition:.2s;
}
.read:hover{ box-shadow:var(--shadow); transform:translateY(-2px); }
.read__author{ font-family:"Archivo",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:12px; color:var(--red); }
.read__title{ font-size:1.25rem; font-weight:700; line-height:1.2; color:var(--ink); }
.read__meta{ color:var(--muted); font-size:.86rem; }
.read__cta{ font-family:"Archivo",sans-serif; font-weight:700; font-size:13px; color:var(--ink); margin-top:4px; }

/* ---------------- PROGRAM ---------------- */
.program{ list-style:none; margin:0; padding:0; display:grid; gap:0; max-width:820px; }
.program__item{
  display:flex; align-items:center; gap:20px;
  padding:22px 0; border-top:1px solid var(--line);
}
.program__item:last-child{ border-bottom:1px solid var(--line); }
.program__item--lead{ }
.program__logo{
  flex:0 0 86px; width:86px; height:86px; border-radius:8px;
  background:#fff; display:flex; align-items:center; justify-content:center;
  padding:8px; box-shadow:0 2px 8px rgba(23,19,15,.08);
}
.program__logo img{ max-width:100%; max-height:100%; object-fit:contain; }
.program__txt h3{ font-size:1.2rem; font-weight:700; margin:0 0 4px; }
.program__txt p{ margin:0; color:var(--muted); font-size:.98rem; }
.program__item--lead .program__txt h3{ color:var(--red); font-size:1.35rem; }

/* ---------------- PODRŽI ---------------- */
.support__text{ max-width:54ch; margin:0 auto 30px; font-size:1.1rem; }
.support__facts{
  display:grid; gap:16px; grid-template-columns:1fr; max-width:520px; margin:0 auto 30px;
}
.support__facts > div{
  display:flex; flex-direction:column; gap:2px;
  border-top:1px solid var(--line-light); padding-top:12px;
}
.sf__k{ font-family:"Archivo",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:12px; opacity:.8; }
.sf__v{ font-size:1.05rem; }

/* ---------------- LOKACIJA / MAPA ---------------- */
.map{
  border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow);
  border:1px solid var(--line); aspect-ratio:16/9; background:#ddd;
}
.map iframe{ width:100%; height:100%; border:0; display:block; }
.map__link{ margin-top:14px; font-family:"Archivo",sans-serif; font-weight:600; font-size:14px; }

/* ---------------- INICIJATORKE ---------------- */
.initiators{
  list-style:none; padding:0; margin:0 auto 14px; display:flex; flex-wrap:wrap;
  justify-content:center; gap:14px 28px; max-width:640px;
}
.initiators__name{
  font-family:"Archivo",sans-serif; font-weight:700; font-size:1.15rem;
  border-bottom:2px solid var(--red); padding-bottom:3px;
}
.initiators__note{ color:var(--muted); font-style:italic; font-size:.95rem; }

/* ---------------- FOOTER ---------------- */
.footer{ background:var(--ink); color:var(--paper); padding:56px 0 24px; }
.footer__grid{ display:grid; gap:34px; grid-template-columns:1fr; }
.footer__word{ font-family:"Archivo",sans-serif; font-weight:900; text-transform:uppercase; font-size:1.25rem; letter-spacing:-.01em; margin:0 0 6px; }
.footer__word .brand__po{ color:#e9908f; }
.footer__parola{ font-style:italic; opacity:.8; margin:0; }
.footer__col h4{ font-family:"Archivo",sans-serif; text-transform:uppercase; letter-spacing:.12em; font-size:12px; opacity:.7; margin:0 0 10px; font-weight:700; }
.footer__col p{ margin:0 0 8px; font-size:.96rem; line-height:1.5; }
.footer a{ color:var(--paper); text-decoration:underline; text-underline-offset:3px; }
.footer a:hover{ color:#e9908f; }
.footer__orglogo{ width:74px; border-radius:6px; background:#fff; padding:6px; margin-top:6px; }
.footer__logos{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.footer__logos img{ height:46px; width:auto; background:#fff; border-radius:6px; padding:6px; }
.footer__copy{ text-align:center; opacity:.6; font-size:.82rem; margin:40px 0 0; }

/* ---------------- MODAL ---------------- */
.modal{ position:fixed; inset:0; z-index:100; display:flex; align-items:flex-start; justify-content:center; }
.modal[hidden]{ display:none; }
.modal__overlay{ position:absolute; inset:0; background:rgba(23,19,15,.62); backdrop-filter:blur(2px); }
.modal__dialog{
  position:relative; z-index:2; background:var(--paper);
  width:min(760px, calc(100% - 28px)); max-height:calc(100vh - 56px);
  margin:28px 14px; border-radius:6px; overflow:auto;
  box-shadow:0 24px 60px rgba(0,0,0,.4); -webkit-overflow-scrolling:touch;
}
.modal__close{
  position:sticky; top:0; float:right; margin:10px 10px -10px 0;
  width:42px; height:42px; border:0; border-radius:50%;
  background:var(--ink); color:#fff; font-size:24px; line-height:1; cursor:pointer; z-index:3;
}
.modal__close:hover{ background:var(--red); }
.modal__body{ padding:18px 30px 44px; }

/* DOC typography (u modalu) */
.doc__eyebrow{ font-family:"Archivo",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:12px; color:var(--red); margin:8px 0 8px; }
.doc__title{ font-family:"Archivo",sans-serif; font-weight:800; font-size:clamp(1.6rem,4.5vw,2.3rem); line-height:1.08; letter-spacing:-.015em; margin:0 0 6px; }
.doc__sub{ color:var(--muted); margin:0 0 22px; font-size:.98rem; }
.doc__fig{ margin:0 0 24px; }
.doc__fig img{ width:100%; border-radius:4px; }
.doc__fig figcaption{ color:var(--muted); font-size:.85rem; font-style:italic; margin-top:8px; }
.doc__fig--scan{ background:#fff; padding:10px; border:1px solid var(--line); border-radius:4px; }
.doc__text{ font-size:1.06rem; line-height:1.72; max-width:62ch; }
.doc__text p{ margin:0 0 17px; }
.doc__h3{ font-family:"Archivo",sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:.06em; font-size:1rem; color:var(--red); margin:30px 0 12px; }
.doc__strong{ font-weight:600; font-size:1.12rem; }
.doc__foot{ color:var(--muted); font-style:italic; font-size:.95rem; border-top:1px solid var(--line); padding-top:14px; margin-top:8px; }
.doc__sign{ font-family:"Archivo",sans-serif; font-weight:700; color:var(--ink); margin-top:24px; }
.doc__note{ background:var(--cream); border-left:3px solid var(--red); padding:12px 16px; font-size:.95rem; font-style:italic; }
.doc__scanlink{ font-family:"Archivo",sans-serif; font-weight:700; font-size:14px; }

/* ---------------- RESP ---------------- */
@media (min-width:720px){
  .cards{ grid-template-columns:repeat(3,1fr); }
  .reads{ grid-template-columns:1fr 1fr; }
  .support__facts{ grid-template-columns:repeat(3,1fr); }
  .footer__grid{ grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:30px; }
}
@media (max-width:719px){
  .nav__toggle{ display:flex; }
  .nav__links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:8px 22px 18px; box-shadow:var(--shadow);
    transform:translateY(-8px); opacity:0; pointer-events:none; transition:.2s;
  }
  .nav__links.open{ transform:none; opacity:1; pointer-events:auto; }
  .nav__links a{ padding:11px 0; width:100%; border-bottom:1px solid var(--line); }
  .nav__ig{ margin-top:12px; display:inline-block; }
  .section{ padding:56px 0; }
  .hero{ padding:54px 0 60px; }
}

@media (prefers-reduced-motion:reduce){
  *{ scroll-behavior:auto !important; transition:none !important; }
}