/* ==========================================================================
   MARIBOR TEBI, PRILOŽNOST VSEM  |  Bor Greiner
   ---------------------------------------------------------------------------
   Visual idea, playbook 08/2026 v3: a switch. The city is set to "enim", for
   the few. The campaign throws it to "vsem", for everyone. So the toggle is
   not decoration, it is the argument: it is the logo, the bullet, the button
   and the agreement control, and green only ever means the ON state.

   The radio metaphor of the first build is retired. What replaced it is
   vrnitev, giving the city back, and the toggle carries that.

   No external fonts, no CDN, no third party requests anywhere. Deliberate:
   nothing about a visitor leaves for another host, which keeps the site clean
   under GDPR and matches what the campaign is promising.
   ========================================================================== */

/* ---- Licensed webfonts, installed 1 September 2026 ------------------
   Rettiko (display) and Borna (body) ship with the campaign's own webfont
   licences, so the files are served from this origin. No CDN, no external
   request, the CSP stays locked to 'self'.

   Rolina is the unmodified TTF from Toni's 31 August FONTI campaign email,
   added to this local preview at the user's request. A separate ž glyph
   combines its original z and caron outlines. The logo retains its PDF paths. */
@font-face{font-family:"Rettiko";src:url("pisave/rettiko-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Borna";src:url("pisave/borna-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Borna";src:url("pisave/borna-medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Borna";src:url("pisave/borna-semibold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Borna";src:url("pisave/borna-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Rolina";src:url("pisave/rolina-regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Rolina";src:url("pisave/rolina-caron.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+017E}

:root{
  /* ---- Start! brand palette, playbook 08/2026 v3 ----------------------
     Karmin is the loud primary, Bež is the canvas, Merlot grounds long
     text, Zelena is reserved for the ON state of the toggle and for
     positive action. Nothing else should be green.

     These four are the exact RGB values printed on the Barvni sistem
     page. Do not eyeball them, they also have to match print CMYK.    */
  --karmin:#ff1900;        /* Karmin   RGB 255/25/0     */
  --bez:#ebe6d7;           /* Bež      RGB 235/230/215  */
  --merlot:#a50000;        /* Merlot   RGB 165/0/0      */
  --zelena:#0fb43c;        /* Zelena   RGB 15/180/60    */
  --papir:#f7f3f2;         /* page off white */

  /* semantic tokens used across the site */
  --ink:#1c1a19;
  --ink2:#4a4340;
  --muted:#7a716c;
  --line:#ddd5c8;
  --paper:var(--papir);
  --cream:var(--bez);
  --signal:var(--karmin);       /* the loud accent is now Karmin  */
  --signal-dk:#d91500;
  --violet:var(--merlot);
  --red:var(--karmin);
  --good:var(--zelena);
  --radius:14px;
  --maxw:1140px;

  /* ---- type ------------------------------------------------------------
     Rettika  display, retro poster, leading 1:1, tracking +10
     Borna    body, modern and even, leading 1:1, tracking -10
     Rolina   short personal accents, using supported characters
     All three font families are served locally above. The stacks behind
     them stay as fallbacks for a failed font load. */
  --font-display:"Rettiko","Rettika Trial",Impact,"Haettenschweiler","Arial Narrow Bold",sans-serif;
  --font-body:"Borna","Borna Trial","Inter","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --font-hand:"Rolina",cursive;
}

*{box-sizing:border-box}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:17px/1.6 var(--font-body);
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--ink);text-underline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--signal);padding:12px 18px;z-index:100;font-weight:800}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px}

/* --- Poster type --------------------------------------------------------- */
.huge,h1.huge{
  font-family:var(--font-display);
  font-size:clamp(24px,3.1vw,40px);line-height:1.05;font-weight:400;
  letter-spacing:.01em;margin:0;text-transform:none;
}
.big{
  font-family:var(--font-display);
  font-size:clamp(28px,4.6vw,56px);line-height:1.04;font-weight:400;
  letter-spacing:.01em;margin:0 0 18px;
}
.kick{
  font-size:12px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;
  display:inline-block;
}

/* --- Draft banner. DELETE BEFORE LAUNCH ---------------------------------- */
.osnutek{background:#7a1020;color:#fff;text-align:center;padding:9px 16px;font-size:12.5px;font-weight:800;letter-spacing:.02em}

/* --- Silence bar --------------------------------------------------------- */
.molk-bar{background:var(--ink);color:#fff;padding:16px 0;text-align:center;font-size:15px}
.molk-bar strong{color:var(--signal)}

/* --- Header -------------------------------------------------------------- */
header.site{position:sticky;top:0;z-index:40;background:var(--karmin);border-bottom:3px solid var(--ink)}
.navbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:12px;padding-bottom:12px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--bez)}
.brand .bt .b1{font-size:18px;font-weight:900;letter-spacing:-.03em;text-transform:uppercase;line-height:1}
.brand .bt .b2{font-size:9.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;margin-top:3px;display:block}
nav.main ul{display:flex;gap:2px;list-style:none;margin:0;padding:0;align-items:center;flex-wrap:wrap}
nav.main a{
  display:block;padding:8px 11px;border-radius:6px;text-decoration:none;
  font-size:13.5px;font-weight:700;color:var(--bez);letter-spacing:0;
}
nav.main a:hover{background:rgba(0,0,0,.18)}
nav.main a[aria-current="page"]{background:var(--bez);color:var(--karmin)}
.btn-nav{background:var(--zelena)!important;color:#fff!important}
.btn-nav:hover{background:#0c9832!important}
.burger{display:none;background:var(--bez);color:var(--karmin);border:0;border-radius:7px;padding:9px 13px;font-size:13px;font-weight:800;cursor:pointer;text-transform:uppercase}
@media(max-width:1010px){
  .burger{display:block}
  nav.main{display:none;width:100%;order:3;border-top:2px solid var(--ink);margin-top:4px}
  nav.main.open{display:block}
  nav.main ul{flex-direction:column;align-items:stretch;padding:8px 0}
  nav.main a{padding:12px 10px}
  .navbar{flex-wrap:wrap}
}

/* --- Hero ----------------------------------------------------------------
   Staged as the playbook stages it on the Branding page: the claim is the
   headline, in Bež poster type on a flat Karmin ground, the reason to run
   sits under it, and the CTA lockup closes the block. The sound wave that
   used to close the section belonged to the radio idea and is gone.    */
.hero{background:var(--karmin);color:var(--bez);padding:30px 0 0;border-bottom:3px solid var(--ink);position:relative}
.hero .kick{background:var(--bez);color:var(--karmin);padding:5px 12px;border-radius:100px;margin-bottom:16px;font-size:10.5px;letter-spacing:.16em}
.hero h1.claim{
  font-family:var(--font-display);color:var(--bez);font-weight:400;
  font-size:clamp(38px,5.6vw,74px);line-height:1.02;letter-spacing:.01em;
  margin:0 0 18px;max-width:14ch;
}
.hero .manifest{
  font-size:clamp(16px,1.65vw,20px);font-weight:700;line-height:1.42;
  max-width:34ch;margin:0 0 24px;color:var(--bez);
}
.hero .sub{font-size:clamp(14.5px,1.35vw,16.5px);font-weight:600;max-width:52ch;margin:22px 0 0;line-height:1.5}
/* The hero's way out of itself. It used to end on a sentence telling the
   visitor to say what they would change, with nothing to press, so the
   sentence is now the buttons instead. Each one is named after the section
   it lands on rather than being a verb, so nobody has to guess where they
   are being sent. */
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0 0;padding-bottom:40px}
.hero .cta .btn{border-width:3px}
@media(max-width:520px){
  .hero .cta{gap:9px}
  .hero .cta .btn{padding:12px 18px;font-size:14px}
}

/* The header is sticky, so an anchor target would otherwise land with its
   heading tucked underneath it. */
#sodeluj,#obljube,#bor,#plakat{scroll-margin-top:86px}

/* --- Buttons ------------------------------------------------------------- */
.btn{
  display:inline-block;padding:14px 26px;border-radius:100px;text-decoration:none;
  font-weight:750;font-size:15px;border:3px solid var(--ink);cursor:pointer;
  font-family:var(--font-body);letter-spacing:-.01em;
  transition:transform .08s ease;
}
.btn:active{transform:translateY(2px)}
.btn-primary{background:var(--zelena);color:#fff;border-color:var(--zelena)}
.btn-primary:hover{background:#0c9832}
.btn-ghost{background:transparent;color:var(--bez);border-color:var(--bez)}
.btn-ghost:hover{background:rgba(0,0,0,.18)}
.btn-solid{background:var(--zelena);color:#fff;border-color:var(--zelena)}
.btn-solid:hover{background:#0c9832}
.btn-outline{background:transparent;color:var(--ink)}
.btn-outline:hover{background:var(--cream)}
.btn-yellow{background:var(--bez);color:var(--karmin);border-color:var(--bez)}
.btn-yellow:hover{background:#fff}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-sm{padding:11px 20px;font-size:13px;border-width:2px}

/* --- Page header --------------------------------------------------------- */
.phead{background:var(--cream);border-bottom:3px solid var(--ink);padding:52px 0 44px}
.phead h1{font-family:var(--font-display);font-size:clamp(32px,5.4vw,64px);line-height:1.03;margin:0 0 16px;font-weight:400;letter-spacing:.01em}
.phead p{font-size:18.5px;color:var(--ink2);max-width:720px;margin:0}

/* --- Sections ------------------------------------------------------------ */
section.blk{padding:64px 0;border-bottom:3px solid var(--ink)}
section.blk:last-of-type{border-bottom:none}
section.blk.alt{background:var(--cream)}
section.blk.dark{background:var(--merlot);color:var(--bez);border-bottom-color:var(--merlot)}
section.blk.dark a{color:var(--bez)}
section.blk.yellow{background:var(--karmin);color:var(--bez)}
section.blk.yellow h2.sec{color:var(--bez)}
section.blk.yellow .sec-sub{color:#f3ded8}
h2.sec{font-family:var(--font-display);font-size:clamp(28px,3.8vw,46px);margin:0 0 12px;font-weight:400;letter-spacing:.01em;line-height:1.06}
p.sec-sub{font-size:18px;color:var(--muted);max-width:740px;margin:0 0 32px}
section.dark p.sec-sub{color:#b7ada0}
h3{font-size:21px;font-weight:800;margin:30px 0 10px;letter-spacing:-.015em}
h4{font-size:16px;font-weight:800;margin:20px 0 8px}
p{margin:0 0 15px}

/* Bullets are switches that are already thrown, exactly as the pledge lists
   are set on the posters: a green pill with the knob to the right. Never a
   dot, never a tick. The bullet has to be the same object as the logo.   */
ul.b{list-style:none;padding:0;margin:0 0 16px}
ul.b li{position:relative;padding-left:38px;margin-bottom:10px}
ul.b li::before{content:"";position:absolute;left:0;top:.34em;width:28px;height:15px;background:var(--zelena);border-radius:100px}
ul.b li::after{content:"";position:absolute;left:15px;top:calc(.34em + 2px);width:11px;height:11px;background:var(--bez);border-radius:50%}
section.dark ul.b li::before{background:var(--zelena)}
section.dark ul.b li::after{background:var(--bez)}

.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.grid3,.grid4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:660px){.grid2,.grid3,.grid4{grid-template-columns:1fr}}

.card{background:var(--paper);border:3px solid var(--ink);border-radius:var(--radius);padding:24px}
.card.tint{background:var(--cream)}
section.dark .card{background:#1e1a16;border-color:#3a352f;color:var(--cream)}
.card h3,.card h4{margin-top:0}
.card.brandline{border-top-width:10px}
.card.accentline{border-top-width:10px;border-top-color:var(--red)}
.card.goodline{border-top-width:10px;border-top-color:var(--good)}

.stat{background:var(--paper);border:3px solid var(--ink);border-radius:var(--radius);padding:20px}
.stat .n{font-size:34px;font-weight:900;letter-spacing:-.035em;line-height:1}
.stat .l{font-size:13.5px;color:var(--muted);margin-top:9px;font-weight:600}

.pill{display:inline-block;background:var(--signal);border:2px solid var(--ink);border-radius:100px;padding:5px 14px;font-size:12.5px;font-weight:800;margin:0 6px 6px 0;text-transform:uppercase}

.quote{
  font-family:var(--font-display);
  font-size:clamp(24px,3.6vw,40px);line-height:1.08;font-weight:400;letter-spacing:.01em;
  border-left:8px solid var(--zelena);padding:6px 0 6px 26px;margin:34px 0;
}
.quote span{display:block;font-size:14px;font-weight:700;color:var(--muted);margin-top:16px;letter-spacing:.06em;text-transform:uppercase}
section.dark .quote{border-left-color:var(--signal)}
section.dark .quote span{color:#b7ada0}

/* --- ZAKAJ NE: the negative-space manifesto ------------------------------ */
.zakaj-ne{max-width:1000px}
.zakaj-ne .line{
  font-family:var(--font-display);
  font-size:clamp(20px,2.9vw,34px);line-height:1.15;font-weight:400;letter-spacing:.01em;
  padding:16px 0;border-bottom:1px solid rgba(255,255,255,.18);
}
.zakaj-ne .line.no{color:#e8c9c4;opacity:.92}
.zakaj-ne .line.no s{text-decoration-thickness:3px;text-decoration-color:var(--karmin)}
.zakaj-ne .line.yes{color:#fff;border-bottom:none;padding-top:26px}

/* --- Three promises ------------------------------------------------------ */
.promise{
  border:3px solid var(--ink);border-radius:var(--radius);padding:26px;background:var(--paper);
  display:flex;flex-direction:column;
}
.promise .pn{
  font-size:clamp(46px,6vw,72px);font-weight:900;line-height:.95;letter-spacing:-.05em;
  color:var(--ink);margin-bottom:14px;
}
.promise .pt{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.2;margin-bottom:10px;color:var(--ink)}
/* flex:1 belonged to the old number cards, where it pushed a single CTA to
   the bottom edge. With two hooks under every promise it only opens dead
   space in whichever card has the shortest text, so the copy now sits
   top aligned and the cards rag naturally at the bottom. */
.promise .pd{font-size:15.5px;color:var(--ink2);margin:0}
.promise .pn{color:var(--karmin)}
.promise .pl{color:var(--zelena)}
.promise .pl{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}

/* Promise headline replaced the big number: the canonical three are
   sentences, not figures, so the display weight moves onto the sentence. */
.promise .pt-big{
  font-family:var(--font-display);font-weight:400;letter-spacing:.01em;
  font-size:clamp(26px,2.9vw,34px);line-height:1.05;color:var(--karmin);
  margin:0 0 12px;
}
/* Two hooks per promise. Bold names the idea, span carries it, em is the
   route to delivery. Every promise on the site must carry all three. */
.promise .hook{border-top:2px solid var(--line);padding-top:14px;margin-top:14px}
.promise .hook h4{display:block;font-size:16px;font-weight:800;letter-spacing:-.02em;
  line-height:1.25;color:var(--ink);margin:0 0 6px}
.promise .hook span{display:block;font-size:14.5px;line-height:1.5;color:var(--ink2)}
.promise .hook em{display:block;margin-top:8px;font-style:normal;font-size:12.5px;
  font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--zelena)}

/* --- Five pillars -------------------------------------------------------- */
.grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
@media(max-width:1000px){.grid5{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid5{grid-template-columns:1fr}}
.steber{border-top:5px solid var(--karmin);padding-top:14px}
.steber h3{font-family:var(--font-display);font-weight:400;letter-spacing:.01em;
  font-size:23px;line-height:1.05;margin:0 0 8px;color:var(--ink)}
.steber p{font-size:15.5px;line-height:1.5;color:var(--ink2);margin:0}

/* --- 30 seconds ---------------------------------------------------------- */
.sek{border-left:5px solid var(--signal);padding-left:20px}
.sek h3{font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);margin:0 0 8px}
.sek p{font-size:17.5px;font-weight:650;margin:0}

/* --- Glas mesta: the wall ------------------------------------------------ */
.zid{columns:3;column-gap:18px}
@media(max-width:900px){.zid{columns:2}}
@media(max-width:600px){.zid{columns:1}}
.glas{
  break-inside:avoid;margin:0 0 18px;background:var(--paper);border:3px solid var(--ink);
  border-radius:var(--radius);padding:20px 22px;
}
.glas:nth-child(4n+1){background:var(--signal)}
.glas:nth-child(4n+3){background:var(--cream)}
.glas .t{font-size:18px;font-weight:750;line-height:1.35;margin:0 0 14px}
.glas .m{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.glas .m b{color:var(--ink)}

/* --- Share card preview -------------------------------------------------- */
.cardwrap{position:sticky;top:96px}
#kartica-prikaz.pulse{animation:pulse .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes pulse{0%{transform:scale(.965) rotate(-.7deg)}60%{transform:scale(1.015) rotate(.3deg)}100%{transform:none}}
@media(prefers-reduced-motion:reduce){#kartica-prikaz.pulse{animation:none}}
.tema-chip{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:var(--signal);
  border-radius:100px;padding:8px 16px;font-size:12.5px;font-weight:900;text-transform:uppercase;
  letter-spacing:.1em;margin-bottom:14px}
.tema-chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--signal);
  animation:blip 1.4s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:.25}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.tema-chip::before{animation:none;opacity:1}}
#kartica-prikaz{
  width:100%;max-width:360px;border:3px solid var(--ink);border-radius:var(--radius);
  display:block;background:var(--signal);
}
.share-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;max-width:360px}
.counter{font-size:13px;color:var(--muted);font-weight:700;text-align:right;margin-top:6px}
.counter.over{color:var(--red)}

/* --- Pledges accordion --------------------------------------------------- */
.obljuba{border:3px solid var(--ink);border-radius:var(--radius);overflow:hidden;margin-bottom:16px;background:var(--paper)}
.obljuba > .oh{
  display:flex;gap:16px;align-items:center;padding:18px 22px;background:var(--cream);
  width:100%;text-align:left;border:0;cursor:pointer;font-family:inherit;
}
.obljuba > .oh:hover{background:var(--signal)}
.obljuba .num{flex:none;width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--signal);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:16px}
.obljuba .ot{font-weight:850;font-size:18px;letter-spacing:-.02em;flex:1;text-transform:uppercase;line-height:1.15}
.obljuba .chev{font-size:14px;transition:transform .2s}
.obljuba.open .chev{transform:rotate(180deg)}
.obljuba .ob{padding:22px}
.obljuba .row{display:grid;grid-template-columns:130px 1fr;gap:14px;padding:10px 0;border-bottom:2px dotted var(--line)}
.obljuba .row:last-child{border-bottom:none}
.obljuba .row .k{font-size:11.5px;font-weight:900;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);padding-top:3px}
@media(max-width:620px){.obljuba .row{grid-template-columns:1fr;gap:3px}}

/* --- Callouts ------------------------------------------------------------ */
.note{background:var(--cream);border:3px solid var(--ink);border-radius:var(--radius);padding:18px 22px;margin:22px 0}
.note.warn{background:#fff4d6}
.note.legal{background:var(--paper);font-size:14.5px;color:var(--ink2)}
.note h4{margin-top:0}
.note p:last-child{margin-bottom:0}
section.dark .note{background:#1e1a16;border-color:#3a352f;color:var(--cream)}

/* --- Forms --------------------------------------------------------------- */
form.f{max-width:720px}
.fld{margin-bottom:20px}
.fld > label,.fset > legend{display:block;font-weight:800;font-size:15px;margin-bottom:7px}
.fld .hint{font-size:14px;color:var(--muted);margin:-2px 0 8px}
input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%;padding:13px 15px;border:3px solid var(--ink);border-radius:10px;
  font:inherit;font-size:16px;background:var(--paper);color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 4px var(--signal)}
textarea{min-height:120px;resize:vertical}
.fset{border:3px solid var(--ink);border-radius:12px;padding:18px 20px;margin:0 0 20px;background:var(--paper)}
.fset legend{padding:0 8px;font-size:15.5px;font-weight:800}
.opt{display:flex;gap:12px;align-items:flex-start;padding:9px 0;cursor:pointer}
.opt input{margin-top:4px;width:19px;height:19px;flex:none;accent-color:var(--ink)}
.opt span{font-size:16px;line-height:1.5}
.consent{background:var(--cream);border:3px solid var(--ink);border-radius:12px;padding:16px 18px;margin:0 0 22px}
.consent .opt span{font-size:14.5px;color:var(--ink2)}
.err{color:var(--red);font-size:14px;font-weight:800;margin-top:6px;display:none}
.err.show{display:block}
.hp{position:absolute;left:-9999px}

/* --- Survey -------------------------------------------------------------- */
.q{margin-bottom:36px;padding-bottom:32px;border-bottom:3px solid var(--line)}
.q:last-of-type{border-bottom:none}
.q h3{margin:0 0 8px;font-size:24px;display:flex;gap:13px;align-items:baseline;line-height:1.15;text-transform:uppercase;letter-spacing:-.025em;font-weight:900}
.qn{flex:none;width:34px;height:34px;border-radius:50%;background:var(--signal);border:3px solid var(--ink);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:900;transform:translateY(3px)}
.qhint{font-size:15px;color:var(--muted);margin:0 0 18px;padding-left:47px}
@media(max-width:560px){.qhint{padding-left:0}}
.extra{border:3px solid var(--ink);border-radius:12px;margin:0 0 24px;background:var(--paper)}
.extra > summary{padding:15px 20px;cursor:pointer;font-weight:800;font-size:15px;list-style:none}
.extra > summary::-webkit-details-marker{display:none}
.extra > summary::before{content:"+ ";font-weight:900}
.extra[open] > summary::before{content:"– "}
.extra[open] > summary{border-bottom:3px solid var(--ink)}
.extra-body{padding:18px 20px}
.nav-btns{display:flex;gap:12px;margin-top:28px;padding-top:24px;border-top:3px solid var(--ink)}
.done{text-align:center;padding:44px 20px}
.done .tick{width:70px;height:70px;border-radius:50%;background:var(--signal);border:3px solid var(--ink);font-size:34px;display:flex;align-items:center;justify-content:center;margin:0 auto 22px}

/* --- Tables -------------------------------------------------------------- */
.tw{overflow-x:auto;margin:18px 0 24px;border:3px solid var(--ink);border-radius:12px}
table{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
th{background:var(--ink);color:var(--signal);text-align:left;padding:12px 14px;font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;font-weight:900}
td{padding:12px 14px;border-bottom:2px solid var(--line);vertical-align:top}
tbody tr:last-child td{border-bottom:none}
tbody tr:nth-child(even){background:var(--cream)}

/* --- Timeline ------------------------------------------------------------ */
.tl{border-left:3px solid var(--ink);padding-left:26px;margin:24px 0}
.tl .it{position:relative;padding-bottom:26px}
.tl .it::before{content:"";position:absolute;left:-35px;top:5px;width:14px;height:14px;border-radius:50%;background:var(--signal);border:3px solid var(--ink)}
.tl .d{font-weight:900;font-size:14px;text-transform:uppercase;letter-spacing:.06em}

/* --- Badge --------------------------------------------------------------- */

/* --- Footer -------------------------------------------------------------- */
footer.site{background:var(--merlot);color:#e6d3ce;padding:56px 0 30px;font-size:15px;border-top:3px solid var(--ink)}
footer.site h4{color:var(--bez);font-size:11.5px;text-transform:uppercase;letter-spacing:.16em;margin:0 0 14px;font-weight:900}
footer.site a{color:#fff;text-decoration:none}
footer.site a:hover{color:var(--signal);text-decoration:underline}
footer.site ul{list-style:none;padding:0;margin:0}
footer.site li{margin-bottom:9px}
.foot-brand{display:flex;align-items:center;gap:12px;color:var(--bez);margin-bottom:30px}
.foot-brand .ft{font-family:var(--font-display);font-size:28px;font-weight:400;letter-spacing:.01em;line-height:1.1}
.foot-legal{border-top:2px solid #870000;margin-top:34px;padding-top:22px;font-size:13px;color:#d8b8b3;line-height:1.75}
.foot-legal strong{color:#f0dcd8}

@media print{
  header.site,footer.site,.osnutek,.nav-btns,.share-btns{display:none}
  .hero{background:#fff}
}

/* ==========================================================================
   PREDLOGI MESTA
   Problem plus solution board, agreement, and the discussion panel.
   ========================================================================== */

/* --- the two landing cards ---------------------------------------------- */
/* One card, not two. The form used to hold the left half permanently and
   the section read as paperwork with a list beside it, so it now sits
   folded under the list instead. A single column at full width would run
   the rows to uncomfortable line lengths on a desktop, so it is capped. */
.landing{display:grid;grid-template-columns:1fr;gap:24px;align-items:start;
  max-width:680px;margin-inline:auto}
.lcard{background:var(--paper);border:3px solid var(--ink);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.lcard > .lh{background:var(--ink);color:var(--signal);padding:16px 22px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.lcard > .lh .n{font-size:11px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;opacity:.75}
.lcard > .lh .t{font-size:21px;font-weight:900;letter-spacing:-.02em;line-height:1.15;margin:4px 0 0;text-transform:uppercase;font-family:var(--font-body)}
.lcard > .lh .skupaj{font-size:13px;opacity:.8;white-space:nowrap}
.lcard > .lh .skupaj b{font-family:var(--font-display);font-size:22px;opacity:1;margin-right:4px}
.lcard > .lb{padding:22px}
.lcard.alt > .lh{background:var(--signal);color:var(--ink)}

/* --- proposal list -------------------------------------------------------
   Ranked, busiest first, five deep. It used to scroll inside its own box,
   which hid everything below the fifth row behind a scrollbar most people
   never found. Now the rest sits behind one button that says how many.  */
.predlogi{display:flex;flex-direction:column;gap:14px}
/* Three things only: the problem, what is proposed about it, and the way
   into the conversation. Everything else was costing a line each and
   pushing the fifth problem off the screen.                           */
.predlog{border:2px solid var(--ink);border-radius:12px;padding:14px 16px;background:var(--cream)}

/* which theme this problem belongs to, and how many problems it gathers.
   This is the roll up the separate overview card used to carry.        */
.predlog .obrv{display:flex;align-items:center;gap:9px;margin-bottom:7px;flex-wrap:wrap}
.predlog .obrv .tm{font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--merlot)}
.predlog .obrv .kolk{font-size:11.5px;color:var(--muted);white-space:nowrap;margin-left:auto}

/* the expander */
.vec{
  display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  margin-top:16px;padding:12px 18px;border:2px dashed var(--line);border-radius:100px;
  background:transparent;font:inherit;font-size:13.5px;font-weight:800;color:var(--ink2);
  cursor:pointer;letter-spacing:-.01em;transition:background .15s,border-color .15s,color .15s;
}
.vec:hover{background:var(--cream);border-color:var(--ink);border-style:solid;color:var(--ink)}
.vec .p{color:var(--zelena);font-weight:900}
.pf{margin:16px 0 0;font-size:13px;color:var(--muted)}

/* --- the way into the form ----------------------------------------------
   The single Karmin element in a column of beige rows and green buttons.
   It has to out-rank "join the conversation" without being mistaken for
   it, which is why it is the accent colour and a different shape: square
   corners against their pill, a plus against their arrow.

   Yellow was asked for and is deliberately not used: it belonged to the
   retired radio identity, and brand v3 has no yellow in it.            */
.dodaj{
  display:flex;align-items:center;gap:14px;width:100%;margin-top:16px;
  padding:15px 18px;border:3px solid var(--ink);border-radius:12px;
  background:var(--signal);color:#fff;font:inherit;text-align:left;
  cursor:pointer;box-shadow:0 3px 0 var(--ink);
  transition:transform .13s,box-shadow .13s,background .13s;
}
.dodaj:hover{background:var(--signal-dk);transform:translateY(-1px);box-shadow:0 4px 0 var(--ink)}
.dodaj:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.dodaj .plus{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.22);display:grid;place-items:center;
  font-size:21px;font-weight:900;line-height:1;padding-bottom:2px;
}
.dodaj .dt{display:flex;flex-direction:column;gap:2px;min-width:0}
.dodaj .d1{font-size:15.5px;font-weight:900;letter-spacing:-.01em}
.dodaj .d2{font-size:12.5px;font-weight:600;opacity:.85;line-height:1.3}
.dodaj .p{flex:0 0 auto;margin-left:auto;font-weight:900;font-size:18px;transition:transform .15s}
.dodaj:hover .p{transform:translateX(3px)}
/* On a narrow phone the second line wraps rather than disappearing. It is
   the line that says what pressing this actually does, and hiding it on
   the screens most people arrive on would remove the explanation exactly
   where there is least room to guess. */
@media(max-width:420px){
  .dodaj{gap:11px;padding:14px}
  .dodaj .d1{font-size:15px}
  .dodaj .d2{font-size:12px}
}

/* Open state: the button has done its job and gets out of the way, so the
   form is not competing with the control that summoned it. */
.dodaj[hidden]{display:none}

/* Once asked for. The rule above it is there so it reads as something that
   opened rather than something that was always there. */
.predlog-ovoj{
  margin-top:18px;padding-top:20px;border-top:3px solid var(--ink);
  animation:odpriObrazec .22s ease-out;
}
/* Same fold, section scale rather than card scale, so it gets air instead
   of a rule: a 3px line across a full width section reads as a divider
   between sections, not as something that just opened. */
.plakat-ovoj{margin-top:26px;animation:odpriObrazec .22s ease-out}
/* The poster maker sits inside a section rather than a card, so its opener
   is capped to the reading width instead of running the full band. */
#plakat-odpri{max-width:560px}
@keyframes odpriObrazec{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.predlog-ovoj{animation:none}}

/* .btn-ghost is drawn for the dark hero, cream on dark. On this card it
   would be cream on cream, so the cancel gets its own ink outline. */
#predlog-zapri{background:transparent;color:var(--ink2);border-color:var(--ink)}
#predlog-zapri:hover{background:var(--cream);color:var(--ink)}

.predlog .pp{font-size:16px;font-weight:750;line-height:1.35;margin:0 0 6px}
.predlog .pr{font-size:14px;line-height:1.45;margin:0 0 12px;color:var(--ink2)}

/* The only action on a row now, so it is a filled green button rather than
   an outline that has to compete with a toggle beside it. Full width, so
   there is no aiming at a small pill.                                  */
.talk{
  display:flex;align-items:center;gap:9px;width:100%;
  background:var(--zelena);border:0;border-radius:100px;
  padding:10px 12px 10px 18px;font:inherit;font-size:13px;font-weight:800;
  color:#fff;cursor:pointer;text-transform:uppercase;letter-spacing:.02em;
  box-shadow:0 2px 0 #0a7d29;
  transition:background .15s,transform .15s,box-shadow .15s;
}
.talk:hover{background:#0c9832;transform:translateY(-1px);box-shadow:0 3px 0 #0a7d29}
.talk:active{transform:translateY(1px);box-shadow:0 1px 0 #0a7d29}
.talk .ch{opacity:.72;text-transform:lowercase;letter-spacing:0;font-weight:700}
.talk .c{background:rgba(0,0,0,.2);border-radius:100px;padding:1px 8px;font-variant-numeric:tabular-nums}
.talk .p{margin-left:auto;background:rgba(255,255,255,.22);border-radius:50%;
  width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;transition:transform .15s,background .15s}
.talk:hover .p{transform:translateX(3px);background:rgba(255,255,255,.34)}
@media(max-width:420px){.talk .ch{display:none}}

/* --- Pogovor: modern messenger on IRC bones -----------------------------
   Keeps what IRC got right, a channel per topic, chosen nicknames, ops and
   slash commands, but drops the 1995 terminal surface. Light, generous and
   in the Start! palette, so it sits inside the identity instead of fighting
   it. Green is presence and your own voice; nothing else here is green.  */
.pogovor-ozadje{position:fixed;inset:0;background:rgba(28,26,25,.45);z-index:60;opacity:0;
  pointer-events:none;transition:opacity .22s;backdrop-filter:blur(3px)}
.pogovor-ozadje.on{opacity:1;pointer-events:auto}
.pogovor{position:fixed;top:0;right:0;bottom:0;width:min(560px,100%);background:var(--papir);
  z-index:61;transform:translateX(100%);transition:transform .3s cubic-bezier(.32,.72,0,1);
  display:flex;flex-direction:column;box-shadow:-24px 0 60px rgba(28,26,25,.18);font-family:var(--font-body)}
.pogovor.on{transform:none}
@media(prefers-reduced-motion:reduce){.pogovor,.pogovor-ozadje{transition:none}}

/* header */
.pogovor header{background:var(--papir);border-bottom:1px solid var(--line);padding:15px 22px 12px;flex:none}
.pogovor header .top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.pogovor header .lbl{display:none}
.pogovor header .q{font-family:var(--font-body);font-size:19px;font-weight:750;letter-spacing:-.02em;
  margin:0;color:var(--ink);display:flex;align-items:center;gap:9px}
.pogovor header .q::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--zelena);flex:none;
  box-shadow:0 0 0 3px rgba(15,180,60,.18)}
.pogovor header .topic{margin:6px 0 0;font-size:13px;color:var(--muted);line-height:1.45}
.zapri{background:transparent;border:0;color:var(--muted);border-radius:9px;width:34px;height:34px;
  font-size:17px;cursor:pointer;flex:none;line-height:1;font-family:inherit;transition:background .15s}
.zapri:hover{background:var(--bez);color:var(--ink)}

/* channel switcher */
.kanali{display:flex;gap:7px;overflow-x:auto;padding:10px 22px;background:var(--papir);
  border-bottom:1px solid var(--line);flex:none;scrollbar-width:none}
.kanali::-webkit-scrollbar{display:none}
.kanali button{flex:none;background:var(--bez);border:0;border-radius:100px;padding:7px 14px;
  font:inherit;font-size:13px;font-weight:650;color:var(--ink2);cursor:pointer;white-space:nowrap;transition:.15s}
.kanali button:hover{background:#ddd5c6}
.kanali button.on{background:var(--ink);color:var(--papir)}
.kanali button .n{opacity:.55;margin-left:5px;font-variant-numeric:tabular-nums}

/* the pinned brief, folded by default so the conversation gets the height */
.pogovor .objava{flex:none;border-bottom:1px solid var(--line);background:var(--bez)}
.pogovor .oq{width:100%;display:flex;align-items:center;gap:9px;background:none;border:0;
  padding:11px 22px;font:inherit;font-size:12px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);cursor:pointer;text-align:left}
.pogovor .oq:hover{color:var(--ink)}
.pogovor .oq .st{background:#fff;border:1px solid var(--line);border-radius:100px;
  padding:1px 7px;font-size:11px;letter-spacing:0;color:var(--ink2)}
.pogovor .oq .kljuka{margin-left:auto;font-size:15px;transition:transform .2s}
.pogovor .objava.odprto .oq .kljuka{transform:rotate(180deg)}
.pogovor .oq-telo{display:none;padding:0 22px 13px}
.pogovor .objava.odprto .oq-telo{display:block}
.pogovor .oq-telo .mini{padding:5px 0;border-top:1px solid rgba(28,26,25,.09)}
.pogovor .oq-telo .mq{margin:0;font-size:14px;line-height:1.45;color:var(--ink2)}
.pogovor .oq-telo .vec{margin:7px 0 0;font-size:12.5px;color:var(--muted)}

/* proposed solution pinned under the header */
.pogovor .sol{background:var(--bez);padding:14px 22px;font-size:14.5px;line-height:1.5;flex:none;
  color:var(--ink2);border-left:4px solid var(--zelena)}
.pogovor .sol b{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  display:block;margin-bottom:4px;color:var(--muted)}

/* message list */
/* The room, and it takes every pixel the panel is not using for something
   else. min-height:0 is what actually lets it shrink and scroll inside a
   flex column instead of pushing the composer off the bottom. */
.sporocila{flex:1 1 auto;min-height:0;overflow-y:auto;padding:18px 22px;
  display:flex;flex-direction:column;gap:4px;background:var(--papir);
  overscroll-behavior:contain}
.msg{display:flex;gap:11px;align-items:flex-start;padding:4px 0;animation:vstop .22s ease}
@keyframes vstop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.msg{animation:none}}
.msg .av{width:34px;height:34px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;color:#fff;font-size:13.5px;font-weight:800;letter-spacing:-.02em}
.msg .bd{min-width:0;max-width:78%}
.msg .meta{display:flex;align-items:baseline;gap:8px;margin-bottom:3px}
.msg .who{font-size:13.5px;font-weight:750;color:var(--ink)}
.msg .op{font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  background:var(--zelena);color:#fff;border-radius:4px;padding:2px 5px}
.msg .cas{font-size:11.5px;color:var(--muted)}
.msg .bub{background:#fff;border:1px solid var(--line);border-radius:4px 14px 14px 14px;
  padding:10px 14px;font-size:15px;line-height:1.5;color:var(--ink);word-break:break-word}

/* system + action lines */
.sys-ln{align-self:center;background:var(--bez);color:var(--muted);border-radius:100px;
  padding:5px 14px;font-size:12.5px;margin:8px 0;max-width:90%;text-align:center}
.act-ln{align-self:center;color:var(--merlot);font-size:13.5px;font-style:italic;margin:6px 0;text-align:center}
.prazno{text-align:center;color:var(--muted);font-size:15px;padding:44px 16px;margin:auto}
.prazno b{display:block;color:var(--ink);font-size:16.5px;margin-bottom:6px}

/* --- the read only footer ------------------------------------------------
   What stands in for the composer when the live room is off, closed for
   election silence, or not configured yet. It is a route through to the
   moderated proposal form rather than an apology for an empty box.    */
.vabilo{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px;
  font-family:var(--font-body);text-align:center}
.vabilo .n{font-size:14px;color:var(--ink2);line-height:1.5;margin:0 0 14px}
.vabilo .d{font-size:12px;color:var(--muted);line-height:1.5;margin:12px 0 0}
.vabilo .btn{border-width:2px}

/* --- live: presence, own voice, composer -------------------------------
   The read only panel already looked like a messenger. These are the parts
   that make it behave like one: a pulse on the dot while the room is open,
   a real count of who is here, your own messages on your own side, and a
   composer that grows with what you type.

   Green stays what the identity says it is, the ON state. Here that reads
   as presence and as your own voice, which is the same idea: the switch is
   thrown when somebody is actually there.                                */

/* the live dot, breathing rather than static */
.pogovor header .q::before{animation:utrip 2.4s ease-in-out infinite}
@keyframes utrip{0%,100%{box-shadow:0 0 0 3px rgba(15,180,60,.18)}
  50%{box-shadow:0 0 0 7px rgba(15,180,60,.05)}}
@media(prefers-reduced-motion:reduce){.pogovor header .q::before{animation:none}}

.pogovor header .prisotni{margin:4px 0 0 18px;font-size:12.5px;color:var(--zelena);
  font-weight:650;min-height:1em;letter-spacing:-.01em}

/* your own messages, mirrored to the right the way every messenger does it,
   because "which of these did I write" should cost nobody a second glance */
.msg.moje{flex-direction:row-reverse}
.msg.moje .av{display:none}
.msg.moje .bd{margin-left:auto}
.msg.moje .meta{flex-direction:row-reverse}
.msg.moje .who{color:var(--zelena)}
.msg.moje .bub{background:var(--zelena);border-color:var(--zelena);color:#fff;
  border-radius:14px 4px 14px 14px}
.msg .sos{font-size:11.5px;color:var(--muted)}

/* in flight, and failed. A message that has not landed yet is dimmed rather
   than replaced by a spinner: it is already readable, it is just not certain
   yet, and that is exactly what half opacity says. */
.msg.caka{opacity:.55}
.msg.caka .bub{position:relative}
.msg.zadrzano .bub{background:var(--bez);color:var(--ink2);border-style:dashed}
.msg.spodletelo .bub{background:#fff;border-color:var(--karmin);color:var(--ink)}
.msg.spodletelo .razlog{display:block;margin-top:8px;font-size:12.5px;color:var(--karmin);
  line-height:1.45}
.msg .znova{display:inline-block;margin-left:8px;background:none;border:0;padding:0;
  font:inherit;font-size:12.5px;font-weight:700;color:var(--karmin);text-decoration:underline;
  cursor:pointer}
.msg.brise{opacity:.4}
.msg.odstranjeno{opacity:0;transform:translateX(24px);transition:opacity .24s,transform .24s}

/* moderator delete. Deliberately quiet until the message is hovered: the
   room belongs to the people in it, not to the person holding the keys. */
.msg .bub{position:relative}
.briši{position:absolute;top:-9px;right:-9px;width:24px;height:24px;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--karmin);font-size:12px;
  line-height:1;cursor:pointer;opacity:0;transition:opacity .15s;font-family:inherit;
  box-shadow:0 2px 8px rgba(28,26,25,.14)}
.msg:hover .briši,.briši:focus-visible{opacity:1}
.briši:hover{background:var(--karmin);color:#fff;border-color:var(--karmin)}
.briši:disabled{cursor:default;opacity:.4}

/* --- composer ---------------------------------------------------------- */
.sestavi{position:relative;padding:0 22px 16px;flex:none;background:var(--papir)}

/* "new messages" only appears when you have scrolled up, so arriving
   messages never yank the room out from under somebody reading. */
.pilula{position:absolute;top:-46px;left:50%;transform:translateX(-50%);z-index:2;
  background:var(--ink);color:var(--papir);border:0;border-radius:100px;
  padding:8px 16px;font:inherit;font-size:13px;font-weight:650;cursor:pointer;
  box-shadow:0 6px 20px rgba(28,26,25,.24);animation:vstop .2s ease}

/* somebody is typing. Real, off the server, or hidden. */
.tipkanje{display:flex;align-items:center;gap:9px;padding:0 2px 9px;
  font-size:12.5px;color:var(--muted);animation:vstop .2s ease}
.tipkanje .pike{display:inline-flex;gap:3px}
.tipkanje .pike i{width:5px;height:5px;border-radius:50%;background:var(--muted);
  animation:skok 1.15s ease-in-out infinite}
.tipkanje .pike i:nth-child(2){animation-delay:.16s}
.tipkanje .pike i:nth-child(3){animation-delay:.32s}
@keyframes skok{0%,60%,100%{transform:translateY(0);opacity:.45}
  30%{transform:translateY(-4px);opacity:1}}
@media(prefers-reduced-motion:reduce){.tipkanje .pike i{animation:none}}

.vnos{background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px 14px;
  font-family:var(--font-body)}
.vnos:focus-within{border-color:var(--zelena);box-shadow:0 0 0 3px rgba(15,180,60,.13)}

/* `display:flex` from an author stylesheet beats the browser's own
   `[hidden]{display:none}`, so an element hidden from JavaScript stays on
   screen. This is why the saved name and the two name fields were showing
   at the same time. `!important` rather than a specificity fight, because
   `.pogovor [hidden]` and `.vnos .kdo` weigh exactly the same and whichever
   is written second would silently win. Anything hidden in this panel is
   hidden, and no later rule gets to argue. */
.pogovor [hidden]{display:none !important}
.vnos .kdo{display:flex;gap:8px;margin-bottom:9px}
.vnos .kdo input{flex:1;min-width:0;background:var(--bez);border:1px solid transparent;
  border-radius:10px;padding:8px 11px;font:inherit;font-size:13.5px;color:var(--ink)}
.vnos .kdo input:focus{outline:none;border-color:var(--line);background:#fff}

/* after the first message the name collapses to one line, so the second
   message costs a sentence and nothing else */
.vnos .podpis{margin:0 0 9px;font-size:12.5px;color:var(--muted);padding-left:2px}
.vnos .podpis b{color:var(--ink);font-weight:700}
.vnos .spremeni{background:none;border:0;padding:0;font:inherit;font-size:12.5px;
  color:var(--merlot);text-decoration:underline;cursor:pointer;margin-left:4px}

.vnos .vrstica{display:flex;gap:10px;align-items:flex-end}
.vnos textarea{flex:1;min-width:0;border:0;background:transparent;resize:none;
  font:inherit;font-size:15px;line-height:1.5;color:var(--ink);
  height:26px;min-height:26px;max-height:132px;padding:2px;overflow-y:auto}
.vnos textarea:focus{outline:none}
.vnos textarea::placeholder{color:var(--muted)}

.poslji{flex:none;width:38px;height:38px;border-radius:50%;border:0;background:var(--zelena);
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s}
.poslji svg{width:17px;height:17px;fill:#fff}
.poslji:hover{background:#0da034}
.poslji:disabled{background:var(--line);cursor:default}

.vnos .pravilo{margin:9px 0 0;font-size:11px;line-height:1.45;color:var(--muted);padding-left:2px}

@media(max-width:560px){
  .sestavi{padding:0 14px 14px}
  .msg .bd{max-width:86%}
}

/* ==========================================================================
   STIKALO
   The toggle is the whole idea of the Start! identity: the city is switched
   to the wrong setting. Red and off means "enim", for the few. Green and on
   means "vsem", for everyone. It is the logo, the bullet, the button and the
   agreement control, so it is built once here and reused everywhere.
   ========================================================================== */
.stikalo{
  display:inline-flex;align-items:center;flex:none;
  width:62px;height:34px;border-radius:100px;
  background-image:linear-gradient(90deg,var(--karmin) 0 30%,var(--zelena) 70% 100%);
  background-size:300% 100%;background-position:0% 0;background-repeat:no-repeat;
  padding:4px;position:relative;transition:background-position .24s ease;
  box-shadow:3px 3px 0 rgba(0,0,0,.18);
}
.stikalo .gumb{
  width:26px;height:26px;border-radius:50%;background:var(--bez);
  transition:transform .18s cubic-bezier(.34,1.4,.64,1);
}
.stikalo.on{background-position:100% 0}
.stikalo.on .gumb{transform:translateX(28px)}
.stikalo.sm{width:48px;height:26px;padding:3px}
.stikalo.sm .gumb{width:20px;height:20px}
.stikalo.sm.on .gumb{transform:translateX(22px)}
@media(prefers-reduced-motion:reduce){.stikalo,.stikalo .gumb{transition:none}}

/* the toggle with a word inside it, as on the posters */
.stikalo-beseda{
  display:inline-flex;align-items:center;gap:10px;background:var(--zelena);
  border-radius:100px;padding:5px 6px 5px 18px;color:#fff;
  font-family:var(--font-hand);font-size:20px;line-height:1;
  box-shadow:3px 3px 0 var(--karmin);
}
.stikalo-beseda .gumb{width:26px;height:26px;border-radius:50%;background:var(--bez);flex:none}

/* the BOR lockup: two stacked toggles forming the B */
.logo-bor{display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.logo-bor .stack{display:flex;flex-direction:column;gap:3px}
.logo-bor .bar{width:44px;height:19px;border-radius:100px;background:var(--zelena);position:relative}
.logo-bor .bar::after{content:"";position:absolute;right:2px;top:2px;width:15px;height:15px;border-radius:50%;background:var(--bez)}
.logo-bor .or{font-family:var(--font-display);font-size:38px;line-height:.9;color:var(--zelena);letter-spacing:.01em}
header.site .logo-bor .bar{background:var(--bez)}
header.site .logo-bor .bar::after{background:var(--zelena)}
header.site .logo-bor .or{color:var(--bez)}

/* handwritten accent, only for za / nazaj / spet / vrniti */
.rocno{font-family:var(--font-hand);color:var(--zelena);font-size:1.15em;line-height:1}

/* enim / vsem comparison block from the playbook */
.enim-vsem{display:flex;flex-direction:column;gap:14px}
.enim-vsem .vrsta{display:flex;align-items:center;gap:14px;font-family:var(--font-display);font-size:34px;line-height:1}
.enim-vsem .vrsta.off,
.enim-vsem .vrsta.on{color:var(--merlot)}

/* --- the CTA lockup ------------------------------------------------------
   BOR, the switch carrying the word za, then spet naš MB. One object, set
   on one baseline, never broken across a line if it can be helped.     */
.cta-lockup{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap}
.cta-lockup .bor{font-family:var(--font-display);font-size:clamp(22px,2.6vw,34px);color:var(--bez);line-height:1}
.cta-lockup .stikalo-beseda{padding:4px 5px 4px 17px;font-size:clamp(18px,2vw,25px);box-shadow:2px 2px 0 rgba(0,0,0,.28)}
.cta-lockup .stikalo-beseda .gumb{width:clamp(24px,2.4vw,30px);height:clamp(24px,2.4vw,30px)}
.cta-lockup .rocno-w{font-family:var(--font-hand);font-size:clamp(18px,2vw,25px);line-height:1}
.hero .sub{color:#f7ded8}

/* --- hero layout: photograph beside the claim, so the landing cards are
       still reachable without scrolling --------------------------------- */
.hero-grid{display:grid;grid-template-columns:250px 1fr;gap:34px;align-items:center;padding-bottom:34px}
@media(max-width:900px){
  /* Stacked, the claim leads and the photograph follows, the order the
     playbook uses on its own mobile mock.                             */
  .hero-grid{grid-template-columns:1fr;gap:22px;padding-bottom:26px;align-items:start}
  .hero-l{order:1}
  .hero-foto{order:2}
}

/* --- Instagram follow strip ---------------------------------------------
   Sits above the sticky header so it is the first thing on the page and
   scrolls away rather than stealing permanent space. It is an ordinary
   link: nothing is requested from Meta until someone clicks it, so the
   site keeps its no third party requests promise.                       */
.ig-strip{
  display:block;background:var(--merlot);color:var(--bez);text-decoration:none;
  font-family:var(--font-body);font-size:13.5px;transition:background .15s;
}
.ig-strip:hover{background:#870000}
.ig-strip .wrap{
  display:flex;align-items:center;gap:10px;padding:9px 24px;
  max-width:var(--maxw);margin:0 auto;flex-wrap:wrap;
}
.ig-strip svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7}
.ig-strip svg .dot{fill:currentColor;stroke:none}
.ig-strip b{font-weight:700;letter-spacing:-.01em}
.ig-strip .hd{opacity:.72}
.ig-strip .go{
  margin-left:auto;background:var(--zelena);color:#fff;border-radius:100px;
  padding:4px 13px;font-weight:750;font-size:12.5px;white-space:nowrap;
}
@media(max-width:640px){
  .ig-strip .wrap{padding:8px 18px;gap:8px;font-size:12.5px}
  .ig-strip .hd{display:none}
}

/* any light card sitting inside a Karmin or Merlot section keeps its own
   text colours rather than inheriting the beige meant for the background */
section.blk.yellow .card,
section.blk.yellow .promise,
section.blk.yellow .stat,
section.blk.yellow .glas{color:var(--ink)}
section.blk.yellow .card h3,
section.blk.yellow .card h4,
section.blk.yellow .promise .pt{color:var(--ink)}
section.blk.yellow .card p,
section.blk.yellow .glas .t{color:var(--ink2)}

/* the pinned post: the proposal a thread belongs to, Reddit style */
.objava{background:var(--bez);padding:14px 22px;flex:none;border-bottom:1px solid var(--line)}
.objava .oq{margin:0 0 10px;font-size:15.5px;font-weight:700;line-height:1.45;color:var(--ink)}
.objava .orr{font-size:14px;line-height:1.5;color:var(--ink2);padding-left:12px;border-left:3px solid var(--zelena)}
.objava .orr b{display:block;font-size:10.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:3px}

/* --- research results panel on the survey page -------------------------- */
.rezultati .viri{font-size:12px;color:var(--muted);margin:0 0 16px;line-height:1.45}
.rezultati h5{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:18px 0 9px}
.rezultati .lestvica{list-style:none;padding:0;margin:0 0 4px;counter-reset:l}
.rezultati .lestvica li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;
  line-height:1.4;padding:6px 0;border-bottom:1px solid var(--line)}
.rezultati .lestvica li:last-child{border-bottom:0}
.rezultati .lestvica b{flex:none;width:20px;height:20px;border-radius:50%;background:var(--zelena);
  color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;margin-top:1px}
.rezultati .bari{display:flex;flex-direction:column;gap:7px}
.rezultati .bar{position:relative;display:flex;align-items:center;gap:9px;font-size:13.5px}
.rezultati .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--karmin);opacity:.14;border-radius:5px}
.rezultati .bar.zelen i{background:var(--zelena);opacity:.18}
.rezultati .bar em{font-style:normal;font-weight:650;color:var(--ink);padding:5px 0 5px 9px;position:relative}
.rezultati .bar b{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--muted);
  font-size:12.5px;position:relative;padding-right:8px}
.rezultati .opomba{font-size:11.5px;color:var(--muted);margin:7px 0 0;line-height:1.45}
.predlog .talk .ch{font-weight:800;opacity:.85}
.objava .mini{padding:7px 0;border-top:1px solid rgba(0,0,0,.08)}
.objava .mini .mq{margin:0;font-size:13.5px;line-height:1.4;color:var(--ink2);font-weight:600}
.objava .vec{margin:7px 0 0;font-size:12px;color:var(--muted)}

/* --- hero photo timeline -------------------------------------------------
   A visitor should know who this is within a couple of seconds, so the
   photographs sit level with the headline rather than below the fold. The
   strip underneath doubles as a progress bar and a picker.              */
.hero-foto{position:relative}
.okvir{position:relative;border:3px solid var(--ink);border-radius:var(--radius);overflow:hidden;
  background:var(--merlot);aspect-ratio:4/5;box-shadow:6px 6px 0 rgba(0,0,0,.22)}
.diapozitivi{position:absolute;inset:0}
/* Foto: the playbook offers two grades. The greyscale one, posterized 12 to
   17, is for a cut out portrait sitting on a brand colour, and it crushes
   these shots, which are editorial, of Bor among people. So they take the
   other one, the warm bronze colour grade, which is also what the Foto /
   Editorial page shows: warmth added, colour kept, nothing crushed.   */
/* The outgoing photograph does not fade. It holds at full opacity underneath
   while the incoming one fades in above it, then snaps away once the new one
   has fully arrived. Fading both at once let the Merlot backdrop through at
   the midpoint, so the frame flashed dark red every five seconds.       */
.diapozitivi img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;z-index:1;transition:opacity 0s linear .62s, transform 6s linear;
  object-position:center 22%;
  filter:sepia(.2) saturate(1.2) contrast(.97) brightness(1.08)}
.diapozitivi img.on{opacity:1;z-index:2;transform:scale(1.05);
  transition:opacity .6s ease, transform 6s linear}
@media(prefers-reduced-motion:reduce){
  .diapozitivi img{transition:opacity 0s linear .3s}
  .diapozitivi img.on{transform:none;transition:opacity .28s ease}
}
/* z-index:3 because the active photograph carries z-index:2. Without it the
   photograph painted over the caption and the neighbourhood names were never
   visible on the page at all, on any width. */
.podnapis{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:30px 12px 10px;color:#fff;
  background:linear-gradient(to top,rgba(20,10,8,.72),rgba(20,10,8,.34) 46%,rgba(20,10,8,0));
  text-shadow:0 1px 3px rgba(20,10,8,.5)}
.podnapis .n{font-family:var(--font-display);font-size:16px;line-height:1.1;color:var(--bez)}
.podnapis .o{font-size:12px;line-height:1.4;margin-top:3px;opacity:.94}
.casovnica{display:flex;gap:5px;margin-top:0}
/* The visible bar is still 5px. The button around it is 24px tall and
   transparent, so the tap target clears WCAG 2.5.8 without the strip
   getting any heavier to look at. */
.casovnica button{flex:1;height:24px;border:0;padding:0;border-radius:100px;background:none;
  cursor:pointer;position:relative;display:flex;align-items:center}
.casovnica button::before{content:"";display:block;width:100%;height:5px;border-radius:100px;
  background:rgba(255,255,255,.42)}
.casovnica button .fill{position:absolute;left:0;top:50%;transform:translateY(-50%);
  height:5px;width:0;background:var(--bez);border-radius:100px}
.casovnica button.on .fill{width:100%;transition:width 5s linear}
.casovnica button.done .fill{width:100%}
@media(max-width:900px){
  /* Was max-width:300px, which left a 24px gutter on the left of the frame
     and a 66px one on its right at 390px. It now fills the column, so the
     hero reads to the same margins as every other block. */
  .hero-foto{max-width:none}
  .okvir{aspect-ratio:4/5}
}
/* Tablets. The full column would be up to 852px wide, and the largest
   photograph on file is 760px, so it would be upscaled and soft. Capped and
   centred instead, which keeps the left and right margins equal. */
@media(max-width:900px) and (min-width:601px){
  .hero-foto{width:100%;max-width:460px;margin-inline:auto}
  .okvir{aspect-ratio:4/5}
}
.zakaj-ne .line .mala{display:block;font-family:var(--font-body);font-size:15.5px;
  line-height:1.5;font-weight:500;letter-spacing:-.01em;margin-top:7px;opacity:.85;text-transform:none}
.zakaj-ne .line.yes .mala{opacity:.8}

/* --- Plakat: the browser only poster maker -------------------------------
   Form on the left, live canvas on the right. Nothing here is a real form:
   there is no <form>, no submit and no endpoint, because the poster never
   leaves the visitor's machine unless they share the image themselves.  */
.plakat-grid{display:grid;grid-template-columns:1fr 400px;gap:44px;align-items:start}
@media(max-width:900px){.plakat-grid{grid-template-columns:1fr;gap:28px}}
.plakat-grid .cardwrap{position:sticky;top:96px}
@media(max-width:900px){.plakat-grid .cardwrap{position:static}}
.plakat-grid textarea{min-height:104px}