/* FAQ articles in the shared content-page design (see page-fx.css): a calm reading column, a contents list that
   follows you down the page, and a thin line that fills as you read. Words and links are untouched.
   Everything is at rest under prefers-reduced-motion; the page reads fine without JavaScript. */
.art-main{padding-top:clamp(52px,6vw,88px)}
/* long reading: the background artwork sits further back than on the short pages */
.pg-article .antibody-image{opacity:.5}
.art-hero .pg-lead{max-width:38em;font-size:clamp(17.5px,1.55vw,19.5px);line-height:1.7}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- Reading progress ---------- */
.art-progress{position:fixed;z-index:60;top:0;left:0;right:0;height:3px;pointer-events:none;background:linear-gradient(90deg,#7f9ff2,var(--blue,#3158c9));transform-origin:0 50%;transform:scaleX(var(--read,0));opacity:calc(var(--read,0) * 40)}

/* ---------- Back link ---------- */
.art-back{display:inline-flex;align-items:center;gap:12px;margin:0 0 clamp(26px,3vw,38px);font:600 15px/1 Inter,Arial,sans-serif;color:var(--ink);animation:pg-fade 1s var(--ease) both}
.art-back i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(49,88,201,.1);color:var(--blue);transition:background .35s ease,color .35s ease,transform .55s var(--ease)}
.art-back:hover i,.art-back:focus-visible i{background:var(--blue);color:#fff;transform:translateX(-4px)}
.art-back:focus-visible{outline:3px solid var(--ink);outline-offset:4px;border-radius:999px}
.art-back--end{margin:clamp(56px,7vw,88px) 0 0;animation:none}

/* ---------- Layout ---------- */
.art-layout{display:grid;grid-template-columns:210px minmax(0,1fr);column-gap:clamp(40px,6vw,84px);align-items:start;margin-top:clamp(52px,6.5vw,88px)}
.art-body{max-width:720px;min-width:0;counter-reset:art}

/* ---------- Contents (follows the reader) ---------- */
.art-toc{position:sticky;top:132px;animation:pg-fade 1s var(--ease) .7s both}
.art-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.art-toc a{display:block;padding:9px 0 9px 18px;border-left:2px solid var(--rule);font:500 14.5px/1.4 Inter,Arial,sans-serif;color:var(--soft);transition:color .3s ease,border-color .3s ease,padding .4s var(--ease)}
.art-toc a:hover{color:var(--ink)}
.art-toc a[aria-current="true"]{color:var(--ink);border-left-color:var(--blue);padding-left:22px}
.art-toc a:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:4px}

/* ---------- Text ---------- */
.art-body p{margin:0 0 1.3em;font-size:clamp(17px,1.4vw,18.5px);line-height:1.85;color:var(--body);text-wrap:pretty}
.art-body strong{color:var(--ink);font-weight:600}
.art-intro p:first-child:not(.art-example){font-size:clamp(18px,1.6vw,20px);color:var(--text)}
/* links inside the running text */
.art-body :where(p,.art-list li) a{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:rgba(49,88,201,.4);text-underline-offset:.22em;transition:text-decoration-color .3s ease}
.art-body :where(p,.art-list li) a:hover{text-decoration-color:currentColor}
.art-body :where(p,.art-list li) a:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:3px}
/* a bold line that introduces the paragraph below it */
.art-body p.art-subhead{margin:1.9em 0 .45em;color:var(--ink)}
.art-body p.art-subhead:first-child{margin-top:0}
.art-body p:has(+ .art-list){margin-bottom:.9em}
/* smaller headings inside a section */
.art-body h3{margin:clamp(34px,4vw,48px) 0 14px;font:600 clamp(21px,2vw,26px)/1.2 'DM Sans',Inter,Arial,sans-serif;letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
.art-body h4{margin:clamp(28px,3.4vw,38px) 0 12px;font:600 17px/1.35 Inter,Arial,sans-serif;color:var(--blue)}
.art-body h3:first-child,.art-body h4:first-child{margin-top:0}
.art-body h3+h4{margin-top:clamp(18px,2.4vw,26px)}
/* titles longer than a word or two get a smaller size and may wrap */
.pg .pg-title.pg-title--m{font-size:clamp(38px,5.4vw,76px);line-height:1.02;text-wrap:balance}
.pg .pg-title.pg-title--l{font-size:clamp(32px,4.4vw,60px);line-height:1.05;text-wrap:balance}
.pg .pg-title.pg-title--xl{font-size:clamp(28px,3.5vw,48px);line-height:1.08;letter-spacing:-.05em;text-wrap:balance}
.pg-title--m .pg-line,.pg-title--l .pg-line,.pg-title--xl .pg-line{white-space:normal;overflow-wrap:break-word}
.art-hero .art-note{margin:16px 0 0;max-width:38em;font-size:14.5px;line-height:1.65;color:var(--soft)}
.art-section,.art-sources{scroll-margin-top:120px;margin-top:clamp(56px,7vw,92px)}
.art-intro+.art-section{margin-top:clamp(52px,6vw,80px)}
.art-section h2,.art-sources h2{counter-increment:art;margin:0 0 clamp(20px,2.4vw,30px);font:600 clamp(28px,3.1vw,40px)/1.1 'DM Sans',Inter,Arial,sans-serif;letter-spacing:-.045em;color:var(--ink);text-wrap:balance}
.art-section h2::before,.art-sources h2::before{content:counter(art,decimal-leading-zero);display:block;margin:0 0 14px;font:700 12px/1 Inter,Arial,sans-serif;letter-spacing:.18em;color:var(--blue)}
/* headings that already carry their own number ("1. Izbira antigena ...") do not get a second one */
.art-section--own-number h2::before{display:none}

/* bullets typed as "•" in the old page are real lists now */
.art-list{list-style:none;margin:0 0 1.5em;padding:0;display:grid;gap:10px}
.art-list li{position:relative;padding:15px 20px 15px 52px;border-radius:20px;background:rgba(255,255,255,.8);outline:1.5px solid rgba(0,44,79,.07);outline-offset:-1.5px;font-size:clamp(16px,1.3vw,17.5px);line-height:1.7;color:var(--body);text-wrap:pretty}
.art-list li::before{content:"";position:absolute;left:22px;top:24px;width:8px;height:8px;border-radius:50%;background:var(--blue)}

/* worked examples */
.art-body .art-example{position:relative;margin:0 0 1.6em;padding:24px 28px;border-radius:24px;background:rgba(255,255,255,.78);outline:1.5px solid rgba(0,44,79,.08);outline-offset:-1.5px;box-shadow:0 1px 0 #fff inset,0 26px 44px -34px rgba(25,64,99,.32);font-size:clamp(16.5px,1.35vw,18px)}
.art-example strong{color:var(--blue)}

/* question-and-answer lists (one small heading, one short answer) */
.art-rows{margin:0 0 1.6em;padding:4px clamp(20px,2.6vw,32px);border-radius:26px;background:rgba(255,255,255,.8);outline:1.5px solid rgba(0,44,79,.07);outline-offset:-1.5px}
.art-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:6px 28px;align-items:baseline;padding:17px 0;border-bottom:1.5px solid rgba(0,44,79,.07)}
.art-row:last-child{border-bottom:0}
.art-body .art-row h3{margin:0;font:600 17px/1.4 Inter,Arial,sans-serif;letter-spacing:0;color:var(--ink)}
.art-body .art-row p{margin:0;font-size:16.5px;line-height:1.6}
/* short data lines, one card each */
.art-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 1.6em}
.art-body .art-lines{margin:0;padding:18px 22px;border-radius:20px;background:rgba(255,255,255,.8);outline:1.5px solid rgba(0,44,79,.07);outline-offset:-1.5px;font-size:16px;line-height:1.75}
.art-lines strong{color:var(--blue)}
.art-lines strong:first-child{color:var(--ink)}

/* the diagram */
/* The illustration's own pale blue (#ecf4ff) fills the whole top of the card, so the artwork sits in it with no visible box. */
.art-figure{--fig:#ecf4ff;margin:clamp(30px,4vw,48px) 0;padding:0;overflow:hidden;border-radius:30px;background:rgba(255,255,255,.78);outline:1.5px solid rgba(0,44,79,.08);outline-offset:-1.5px;box-shadow:0 1px 0 #fff inset,0 32px 54px -38px rgba(25,64,99,.4)}
.art-img{display:block;box-sizing:border-box;width:100%;max-width:none;height:auto;margin:0;border-radius:0;background:var(--fig);padding:clamp(22px,3.4vw,44px) max(clamp(22px,3.4vw,44px),calc((100% - 520px)/2))}
.art-figure figcaption{margin:0;padding:clamp(18px,2.2vw,26px) clamp(22px,3vw,36px) clamp(20px,2.4vw,28px);font-size:16px;line-height:1.8;color:var(--soft);text-wrap:pretty}
/* a title above the picture ("Slika 1: ...") */
.art-figure--cap figcaption{padding:clamp(18px,2.2vw,24px) clamp(22px,3vw,36px) clamp(16px,2vw,22px);font:600 15.5px/1.5 Inter,Arial,sans-serif;color:var(--ink)}

/* ---------- Sources ---------- */
.art-sources{padding-top:0}
.art-links{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:src}
.art-links li{counter-increment:src}
.art-links a{position:relative;display:flex;align-items:center;gap:16px;padding:15px 14px 15px 22px;border-radius:22px;background:rgba(255,255,255,.66);outline:1.5px solid rgba(0,44,79,.07);outline-offset:-1.5px;font:600 16px/1.4 Inter,Arial,sans-serif;color:var(--ink);transition:transform .55s var(--ease),background .35s ease,box-shadow .55s var(--ease)}
.art-links a::before{content:counter(src,decimal-leading-zero);flex:none;width:2.2em;font:700 12px/1 Inter,Arial,sans-serif;letter-spacing:.12em;color:var(--blue)}
.art-links a i{flex:none;margin-left:auto;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(49,88,201,.1);color:var(--blue);transition:background .35s ease,color .35s ease,transform .55s var(--ease)}
.art-links a:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
@media(hover:hover){
  .art-links a:hover{transform:translateY(-3px);background:#fff;box-shadow:0 1px 0 #fff inset,0 24px 40px -28px rgba(25,64,99,.45)}
  .art-links a:hover i{background:var(--blue);color:#fff;transform:translate(2px,-2px)}
}

/* ---------- Responsive ---------- */
.art-layout--solo{grid-template-columns:minmax(0,1fr)}
@media(max-width:1000px){
  .art-layout{grid-template-columns:minmax(0,1fr)}
  .art-toc{display:none}
}
@media(max-width:760px){
  .art-main{padding-left:28px;padding-right:28px}
  .art-list li{padding:18px 22px 18px 52px}
  .art-list li::before{left:24px;top:27px}
  .art-body .art-example{padding:22px 22px;border-radius:22px}
  .art-figure{border-radius:24px}
  .art-links a{padding:14px 12px 14px 18px;gap:12px}
  .art-rows{border-radius:22px}
  .art-row{grid-template-columns:minmax(0,1fr);gap:4px;padding:16px 0}
  .art-cards{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .art-back,.art-toc{animation:none}
  .art-back i,.art-toc a,.art-links a,.art-links a i{transition:none}
  .art-back:hover i,.art-links a:hover,.art-links a:hover i{transform:none}
}