/* Oblikovni sistem – Žiga Šeško · uredniški slog */
:root {
  /* Barve: papir, črnilo, globoka zelena trave, rumena žogice (le kot iskra) */
  --bg: #F6F5F0;
  --bg-soft: #EDEBE3;
  --ink: #0A0A0A;
  --ink-70: rgba(10,10,10,.72);
  --ink-50: rgba(10,10,10,.58);
  --ink-30: rgba(10,10,10,.2);
  --line: rgba(10,10,10,.9);
  --line-soft: rgba(10,10,10,.14);
  --ink-surface: #0B0B0A;
  --ink-surface-2: #161614;
  --green: #0E3B2A;
  --on-dark-70: rgba(255,255,255,.74);
  --on-dark-50: rgba(255,255,255,.58);
  --on-dark-line: rgba(255,255,255,.18);

  --accent: #DCF24A;
  --accent-press: #C9E234;
  --accent-dark: #556510;
  --accent-soft: rgba(220,242,74,.2);

  /* Pisave: serif za glas, ozek grotesk za VELIKE ČRKE */
  --h: "Instrument Serif", "Times New Roman", serif;
  --b: "Inter", system-ui, sans-serif;
  --c: "Inter Tight", "Inter", system-ui, sans-serif;

  /* Fluidna tipografija */
  --fs-micro: clamp(.688rem, .676rem + .048vw, .719rem);
  --fs-caption: clamp(.75rem, .738rem + .048vw, .8rem);
  --fs-small: clamp(.875rem, .852rem + .095vw, .938rem);
  --fs-body: clamp(1rem, .965rem + .143vw, 1.094rem);
  --fs-lead: clamp(1.125rem, 1.06rem + .28vw, 1.3rem);
  --fs-h4: clamp(1.5rem, 1.38rem + .5vw, 2rem);
  --fs-h3: clamp(2rem, 1.7rem + 1.2vw, 3rem);
  --fs-h2: clamp(2.6rem, 1.9rem + 3vw, 5rem);
  --fs-h1: clamp(3.5rem, 2.2rem + 5.6vw, 8rem);
  --fs-display: clamp(4.5rem, 1.8rem + 11.5vw, 15rem);
  --lh-tight: .95; --lh-snug: 1.15; --lh-lead: 1.55; --lh-body: 1.65;

  /* Razmiki */
  --sp-1: 2px; --sp-2: 4px; --sp-3: 8px; --sp-4: 12px; --sp-5: 16px; --sp-6: 24px;
  --sp-7: 32px; --sp-8: 40px; --sp-9: 48px; --sp-10: 64px; --sp-11: 80px; --sp-12: 96px; --sp-13: 160px;
  --max: 1440px;
  --gutter: clamp(16px, 4.5vw, 64px);

  /* Oblika: ostri robovi, tanke črte */
  --r-xs: 2px; --r-sm: 4px; --r-pill: 999px;

  /* Gibanje */
  --d-3: 150ms; --d-4: 240ms; --d-5: 400ms; --d-6: 700ms;
  --ease: cubic-bezier(.76,0,.24,1);
  --e-out: cubic-bezier(.22,1,.36,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 var(--fs-body)/var(--lh-body) var(--b);
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
h1, h2, h3, h4 { font-family: var(--h); font-weight: 400; letter-spacing: -0.025em; line-height: var(--lh-tight); margin: 0; }
h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-h4); }
em { font-style: italic; }
p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.dark :focus-visible, .section--dark :focus-visible { outline-color: var(--accent); }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--sp-13); }
@media (max-width: 767px) { .section { padding-block: var(--sp-11); } }
.section--dark { background: var(--ink-surface); color: #fff; }

/* VELIKE ČRKE: oznake, meni, gumbi */
.caps { font: 500 var(--fs-caption)/1.3 var(--c); text-transform: uppercase; letter-spacing: .08em; }
.eyebrow { font: 500 var(--fs-caption)/1.3 var(--c); text-transform: uppercase; letter-spacing: .08em; color: var(--ink); }
.section--dark .eyebrow { color: #fff; }
.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--ink-70); }
.section--dark .lead { color: var(--on-dark-70); }

/* Gumb: pravokotnik z oknom za puščico */
.btn-box {
  display: inline-grid; grid-template-columns: auto 72px; align-items: stretch; min-height: 56px;
  border: 1px solid currentColor; color: inherit; text-decoration: none; background: transparent; cursor: pointer; padding: 0;
  font: inherit;
}
.btn-box__label { display: flex; align-items: center; gap: .35em; padding: 0 var(--sp-6); border-right: 1px solid currentColor; font: 500 var(--fs-caption)/1 var(--c); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.btn-box__label em { font: italic 400 1.15rem/1 var(--h); text-transform: none; letter-spacing: 0; }
.btn-box__arrow { position: relative; overflow: hidden; display: grid; place-items: center; }
.btn-box__arrow svg { width: 34px; height: 14px; transition: transform var(--d-5) var(--e-out); }
.btn-box:hover .btn-box__arrow svg { transform: translateX(8px); }
.btn-box--light { color: #fff; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.js [data-reveal] { opacity: 0; transform: translateY(24px); }
.no-motion [data-reveal] { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Zaobljen obrobni gumb */
.pill {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 var(--sp-8);
  border: 1.5px solid currentColor; border-radius: var(--r-pill); color: inherit; text-decoration: none;
  font: 600 var(--fs-small)/1 var(--c); text-transform: uppercase; letter-spacing: .06em;
  transition: background var(--d-4) var(--e-out), color var(--d-4) var(--e-out);
}
.pill:hover { background: #fff; color: var(--ink); }