/* zlatina.online — single stylesheet. No web fonts, no remote assets, no @import. */

:root{
  --ink:#10182b;
  --ink-2:#4a5b76;
  --ink-3:#6b7a92;
  --bg:#ffffff;
  --bg-soft:#f4f7fc;
  --bg-tint:#eef4ff;
  --brand:#0b1b3b;
  --brand-ink:#ffffff;
  --accent:#0057e0;
  --accent-dark:#003fa8;
  --amber:#ffb020;
  --amber-soft:#fff6e3;
  --amber-line:#f0c97a;
  --line:#dde5f0;
  --line-strong:#c3cfe0;
  --ok:#00845a;
  --radius:10px;
  --maxw:1180px;
  --f-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --f-head:-apple-system,BlinkMacSystemFont,"Segoe UI Semibold","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 17px/1.68 var(--f-body);
  overflow-wrap:break-word;
}
img,svg{max-width:100%;height:auto}
a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--accent-dark)}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}

.skip{position:absolute;left:-9999px;top:0;background:var(--brand);color:#fff;padding:10px 16px;z-index:99}
.skip:focus{left:8px;top:8px}

/* ---------- disclosure bar (must be the first thing in the document) ---------- */
.discbar{
  background:var(--amber-soft);
  border-bottom:1px solid var(--amber-line);
  color:#4a3a12;
  font-size:14px;
  line-height:1.5;
}
.discbar .in{max-width:var(--maxw);margin:0 auto;padding:9px 20px;display:flex;gap:8px;flex-wrap:wrap;align-items:baseline}
.discbar strong{font-family:var(--f-head);text-transform:uppercase;letter-spacing:.06em;font-size:12px}
.discbar a{color:#7a4b00}

/* ---------- header ---------- */
.nav{background:var(--brand);color:var(--brand-ink)}
.nav .in{max-width:var(--maxw);margin:0 auto;padding:14px 20px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.brand{display:flex;flex-direction:column;text-decoration:none;color:#fff;line-height:1.15}
.brand b{font:700 21px/1.1 var(--f-head);letter-spacing:.01em}
.brand span{font-size:11.5px;color:#a9bbdb;letter-spacing:.09em;text-transform:uppercase}
.nav nav{margin-left:auto}
.nav nav ul{list-style:none;display:flex;gap:6px 16px;flex-wrap:wrap;margin:0;padding:0}
.nav nav a{color:#dbe5f6;text-decoration:none;font-size:14.5px;padding:4px 2px;border-bottom:2px solid transparent}
.nav nav a:hover,.nav nav a[aria-current="page"]{color:#fff;border-bottom-color:var(--amber)}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:30px 20px 10px;display:grid;gap:34px;grid-template-columns:minmax(0,1fr) 312px}
.wrap.narrow{grid-template-columns:minmax(0,1fr);max-width:820px}
main{min-width:0}
aside.rail{min-width:0}

/* ---------- typography ---------- */
h1{font:700 clamp(1.75rem,1.25rem + 2vw,2.5rem)/1.2 var(--f-head);margin:0 0 14px;letter-spacing:-.01em}
h2{font:700 clamp(1.3rem,1.1rem + .8vw,1.65rem)/1.28 var(--f-head);margin:2.2em 0 .55em;letter-spacing:-.005em}
h3{font:600 1.12rem/1.35 var(--f-head);margin:1.8em 0 .4em}
h2:first-child,h3:first-child{margin-top:0}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.15em;padding-left:1.3em}
li{margin:0 0 .45em}
.lede{font-size:1.14rem;color:var(--ink-2);line-height:1.6}
.byline{font-size:14px;color:var(--ink-3);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0;margin:0 0 22px}
.byline b{color:var(--ink);font-weight:600}
small,.small{font-size:14px;line-height:1.55}
.muted{color:var(--ink-3)}
hr{border:0;border-top:1px solid var(--line);margin:2.2em 0}

/* ---------- boxes ---------- */
.box{border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin:0 0 1.6em;background:var(--bg-soft)}
.box h2,.box h3{margin-top:0}
.box>:last-child{margin-bottom:0}
.box-disc{background:var(--amber-soft);border-color:var(--amber-line)}
.box-key{background:var(--bg-tint);border-color:#c8dcff}
.box-warn{background:#fff3f3;border-color:#f0c2c2}
.tag{display:inline-block;font:600 11px/1 var(--f-head);letter-spacing:.09em;text-transform:uppercase;padding:5px 8px;border-radius:4px;background:var(--brand);color:#fff;margin:0 0 9px}
.box-disc .tag{background:#8a5a00}

/* ---------- affiliate CTA ---------- */
.cta{margin:1.8em 0;padding:18px 20px;border:1px solid var(--line-strong);border-radius:var(--radius);background:#fff}
.btn{
  display:block;text-align:center;text-decoration:none;
  background:var(--accent);color:#fff;
  font:600 17px/1.25 var(--f-head);
  padding:15px 20px;border-radius:8px;border:1px solid var(--accent-dark);
}
.btn:hover{background:var(--accent-dark);color:#fff}
.btn.alt{background:#fff;color:var(--accent);border-color:var(--accent)}
.btn.alt:hover{background:var(--bg-tint);color:var(--accent-dark)}
.btn.sm{font-size:15px;padding:12px 14px}
.btn-tag{display:block;margin-top:6px;font:600 11.5px/1 var(--f-head);letter-spacing:.08em;text-transform:uppercase;opacity:.92}
.cta-note{margin:11px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}

/* ---------- figures ---------- */
figure{margin:1.9em 0;padding:0}
figure .frame{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:14px}
figure svg{display:block;width:100%;height:auto}
figcaption{font-size:13.5px;line-height:1.55;color:var(--ink-3);margin-top:9px}
figcaption b{color:var(--ink-2)}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;margin:0 0 1.6em}
table{border-collapse:collapse;width:100%;font-size:15.5px;min-width:460px}
caption{text-align:left;font-size:13.5px;color:var(--ink-3);padding-bottom:8px}
th,td{border:1px solid var(--line);padding:9px 12px;vertical-align:top;text-align:left}
th{background:var(--bg-soft);font-family:var(--f-head);font-weight:600}

/* ---------- sidebar ---------- */
.card{border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin:0 0 20px;background:#fff}
.card h2,.card h3{font:600 15px/1.3 var(--f-head);text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);margin:0 0 10px}
.card ul{margin:0;padding-left:1.15em;font-size:15px}
.card p{font-size:15px}
.card>:last-child{margin-bottom:0}
.toc ol{margin:0;padding-left:1.25em;font-size:15px}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}
.dl{margin:0;font-size:15px}
.dl dt{font-family:var(--f-head);font-weight:600;color:var(--ink-3);font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;margin-top:10px}
.dl dt:first-child{margin-top:0}
.dl dd{margin:1px 0 0}

/* ---------- footer ---------- */
footer.foot{background:var(--brand);color:#c7d4ea;margin-top:46px;font-size:14.5px}
footer.foot .in{max-width:var(--maxw);margin:0 auto;padding:30px 20px 34px}
footer.foot h2{font:600 12px/1.3 var(--f-head);text-transform:uppercase;letter-spacing:.09em;color:#8fa6cc;margin:0 0 10px}
footer.foot a{color:#e3ebf8}
.foot-grid{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));margin-bottom:24px}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin:0 0 7px}
.foot-id{border-top:1px solid #23355c;padding-top:18px;font-size:13.5px;line-height:1.6;color:#a9bbdb}
.foot-id p{margin:0 0 .6em}
.foot-id p:last-child{margin:0}

/* ---------- misc ---------- */
.pill{display:inline-block;font:600 12px/1 var(--f-head);padding:5px 9px;border-radius:999px;background:var(--bg-tint);color:var(--accent-dark);border:1px solid #c8dcff;margin:0 6px 6px 0}
.center{text-align:center}
.mono{font-family:var(--f-mono);font-size:.93em}
.updated{font-size:13.5px;color:var(--ink-3);margin-top:2.6em;border-top:1px solid var(--line);padding-top:12px}

@media (max-width:980px){
  .wrap{grid-template-columns:minmax(0,1fr);gap:0;padding-top:22px}
  aside.rail{margin-top:26px}
}
@media (max-width:560px){
  body{font-size:16.5px}
  .nav .in{padding:12px 16px}
  .wrap{padding-left:16px;padding-right:16px}
  .discbar .in{padding:9px 16px}
  footer.foot .in{padding-left:16px;padding-right:16px}
}
@media print{
  .discbar,.nav,aside.rail,.cta{display:none}
  body{font-size:12pt}
}