@charset "UTF-8";
/*
  Design tokens — bold navy & gold, built for real contrast rather than
  a single light/dark toggle. Sections alternate between a deep navy
  ground and a crisp ivory ground; gold is a confident secondary color
  (rules, numerals, CTAs), not a whisper-thin detail.
*/
:root {
  /* ---- Navy ramp (anchored on brand navy #18073a / navy-light #281054) ---- */
  --navy-950: #12062a;
  --navy-900: #18073a;
  --navy-800: #1e0a45;
  --navy-700: #281054;
  --navy-600: #3d2369;

  /* ---- Gold ramp (anchored on brand gold #ee945d / gold-light #f5b889) ---- */
  --gold-700: #c14915;
  --gold-600: #ee945d;   /* primary gold — confident, used at real size */
  --gold-500: #f0a06a;
  --gold-400: #f5b889;
  --gold-300: #fad2ae;

  /* ---- Neutrals — strictly navy / gold / white / black / grey, no
     beige or cream undertone anywhere ---- */
  --white: #ffffff;
  --grey-50: #f4f5f7;
  --grey-100: #e7e9ed;
  --grey-300: #c4c9d2;
  --grey-500: #7d8494;
  --ink: #0c1018;
  --ink-muted: #4d5562;
  /* --ink-faint is the lightest text tone on this site, used for captions,
     search-result meta, empty states and other secondary small text (12
     rules). It was #848b98, which measures only 3.43:1 against white —
     below the 4.5:1 WCAG AA minimum for text under 18.66px, i.e. every
     place it is actually used. Darkened 2026-07-31 to the lightest tone in
     the same blue-grey family that clears the threshold against BOTH
     grounds this token actually sits on — plain white (5.21:1) and the
     slightly grey --bg-sunken #f4f5f7 (4.77:1). Checking only against white
     is not enough: a value can pass there and still fail on the sunken
     panels (e.g. the homepage archive caption). Still clearly secondary
     next to --ink-muted (7.52:1). */
  --ink-faint: #666d7a;

  /* ---- Semantic ---- */
  --bg: var(--white);
  --bg-elevated: var(--white);
  --bg-sunken: var(--grey-50);
  --text: var(--ink);
  --text-soft: var(--navy-900);
  --text-muted: var(--ink-muted);
  --text-faint: var(--ink-faint);
  --text-on-dark: var(--white);
  --accent: var(--gold-600);
  --accent-strong: var(--gold-700);
  --accent-soft: var(--gold-300);
  --link: var(--accent-strong);
  --link-hover: var(--gold-600);
  --border-color: var(--grey-100);
  --border-strong: var(--grey-300);
  --footer-bg: var(--navy-950);
  --footer-text: #c7cee0;

  /* ---- Layout ----
     Container widths grow with the viewport past the point where a fixed
     px max would start to feel cramped on large/ultra-wide monitors, but
     are capped so line length (readability) never runs away — clamp()
     gives every tier its own floor (today's value) and ceiling. */
  --container: clamp(1320px, 78vw, 1680px);
  --container-wide: clamp(1480px, 86vw, 1840px);
  --container-list: clamp(1100px, 68vw, 1280px);
  --container-narrow: clamp(880px, 54vw, 1000px);
  --pad: clamp(24px, 4.5vw, 72px);
  --header-h: 6.25rem;
  /* ---- Radius ---------------------------------------------------------
     Four steps. A radius is a statement about how soft an object is, and
     mixing 2, 3, 4, 10 and 12px across a page reads as inconsistency rather
     than as intent. --radius-full is for circles (dots, avatars). */
  --radius-sm:   2px;
  --radius:      2px;
  --radius-lg:   4px;
  --radius-xl:  12px;
  --radius-full: 50%;

  /* ---- Elevation ------------------------------------------------------
     Three shadows for light grounds, two for dark. A shadow on navy needs
     to be deeper and tighter than the same shadow on white, or it simply
     disappears — which is why the dark pair exists rather than reusing the
     light ones at higher opacity. */

  /* ---- Typography ----
     Playfair Display (display) is a dramatic, high-contrast serif for
     real editorial weight on headlines. Inter (body/UI) carries native
     Greek and Cyrillic glyphs, so quoted theology terms and the
     language switcher render in the same typeface as the rest of the
     UI rather than jumping to a fallback. Noto Sans is appended purely
     as a silent glyph-coverage net for the rare non-Latin headline. */
  --font-display: 'Playfair Display', 'Noto Serif', serif;
  --font-serif: 'Playfair Display', 'Noto Serif', serif;
  --font-sans: 'Inter', 'Noto Sans', sans-serif;
  --font-nav: 'Oswald', 'Inter', 'Noto Sans', sans-serif;

  /* ---- Type scale ----------------------------------------------------
     One ladder for the whole site. Nothing outside this block should set a
     raw font-size: a rule picks the step its role belongs to, so two things
     of the same rank cannot drift apart, and the whole page scales together
     when the window narrows.

     Before this existed there were 51 different font-sizes across the
     stylesheets — including .76, .78, .8, .82, .84 and .85rem, five values
     inside 1.4px of each other. That is not a decision anyone can defend or
     reproduce; it is what happens when each rule picks its own number.

     ANCHOR: --fs-base is body text (17px). Nothing that introduces prose is
     ever allowed below it, or a heading renders smaller than the paragraph
     it heads. Each step is roughly 1.12x its neighbour, at BOTH ends.

     ALL STEPS ARE FLUID. Every one narrows with the viewport, so the page
     shrinks as a whole rather than headlines collapsing onto static UI
     text. Both ends land on whole pixels at the default 16px root.

     rem, never px: the A-/A+ control (main.js FONT_STEPS) resizes the root
     font, and px would ignore a visitor who enlarged the text.

       token        px min -> max   role
       --fs-3xs      11 -> 12       counters, finest labels
       --fs-2xs      12 -> 13       eyebrows, dates, metadata
       --fs-xs       13 -> 14       buttons, nav, small UI
       --fs-sm       15 -> 16       secondary prose, captions
       --fs-base     17 -> 18       body text
       --fs-lg       19 -> 21       lead paragraphs, pull quotes
       --fs-xl       22 -> 26       in-article section heading (h2)
       --fs-2xl      26 -> 31       section heading outside articles
       --fs-3xl      30 -> 36       page title (h1)
       --fs-4xl      32 -> 45       homepage section banners
       --fs-5xl      48 -> 90       homepage hero name

     Two sizes stay outside the ladder on purpose, and only these two: the
     oversized " glyph on quote blocks and the homepage announcement's date
     numeral. Both are drawn shapes rather than text being read, so tying
     them to a reading size would be pretending they are something they are
     not. Everything a visitor actually reads is on the scale.
  */
  --fs-3xs:  clamp(.6875rem, .95vw, .75rem);
  --fs-2xs:  clamp(.75rem, 1.05vw, .8125rem);
  --fs-xs:   clamp(.8125rem, 1.15vw, .875rem);
  --fs-sm:   clamp(.9375rem, 1.3vw, 1rem);
  --fs-base: clamp(1.0625rem, 1.45vw, 1.125rem);
  --fs-lg:   clamp(1.1875rem, 1.65vw, 1.3125rem);
  --fs-xl:   clamp(1.375rem, 1.9vw, 1.625rem);
  --fs-2xl:  clamp(1.625rem, 2.25vw, 1.9375rem);
  --fs-3xl:  clamp(1.875rem, 2.7vw, 2.25rem);
  --fs-4xl:  clamp(2rem, 3.6vw, 2.8125rem);
  --fs-5xl:  clamp(3rem, 7.2vw, 5.625rem);

  /* ---- Line height ----------------------------------------------------
     The second axis. Leading is not one number: it has to loosen as type
     gets smaller and tighten as it gets larger, or long prose feels cramped
     while a two-line headline falls apart. Six steps, each with one job:

       --lh-none      1     decorative glyphs, single-line numerals
       --lh-display   1.05  hero-scale type, where 1.2 would look slack
       --lh-tight     1.2   headings
       --lh-snug      1.35  short multi-line labels, captions, list titles
       --lh-normal    1.5   secondary prose, UI paragraphs
       --lh-relaxed   1.7   body prose, long quotations, verse

     There were 17 different values before this, including 1.45, 1.5 and
     1.55 doing the same job three ways. */
  --lh-none:    1;
  --lh-display: 1.05;
  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  /* ---- Weight ---------------------------------------------------------
     The third axis. Both fonts are variable, so any value renders — which
     is exactly why the set has to be closed, or every rule invents its own.
     There were eight, including 350, 650 and 800 used once each.

       --fw-light     350  the one deliberately light Playfair italic
                           (.article-excerpt); an optical choice, not a
                           lighter version of body text
       --fw-display   450  Playfair at --fs-4xl and above. Large display
                           type carries more visual weight per stroke, so it
                           needs LESS weight than text to look the same
                           density. This is optical sizing, not indecision.
       --fw-regular   400  body text
       --fw-medium    500  headings
       --fw-semibold  600  labels, eyebrows, buttons
       --fw-bold      700  strongest emphasis */
  --fw-light:    350;
  --fw-display:  450;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---- Measure --------------------------------------------------------
     Line length. Not a fixed character count: the measure is whatever the
     article column is, so prose ends exactly where a photograph, gallery or
     table ends. Text and image share one edge at every screen size.

     A ch-based cap was tried and reverted (owner's call): pinned at 70
     characters, prose stopped well short of the images beside it and the
     ragged right edge read as a layout fault rather than as care. On a page
     that is as much photographic archive as it is text, one shared column
     edge is worth more than a textbook character count.

     The real control is therefore --container-narrow, which caps the column
     itself. The resulting line length is a consequence of that width, not a
     target — at the default size it runs to roughly 80-90 characters, above
     the classic 60-75 but deliberately so. */
  --measure: var(--container-narrow);

  /* ---- Spacing --------------------------------------------------------
     The fifth axis. Measured before this: 142 distinct margin / padding /
     gap values, among them .5, .55, .6, .65, .7, .75, .8, .85 and .9rem —
     nine steps inside 6px, which no eye distinguishes and no one chose.

     A 4px-based ladder. Small enough at the bottom for optical nudges,
     wide enough at the top for page sections, and every step a whole number
     of pixels at the default root:

       --sp-4xs   2px    optical nudges (a label off a rule)
       --sp-3xs   4px    tight pairs (icon to its text)
       --sp-2xs   8px    inside a control
       --sp-xs   12px    between related lines
       --sp-sm   16px    between paragraphs, list rows
       --sp-md   24px    between blocks
       --sp-lg   32px    between groups
       --sp-xl   40px    around a panel
       --sp-2xl  48px    between subsections
       --sp-3xl  64px    between major blocks

     Fluid steps for page rhythm — these have to grow with the viewport, or
     a layout that breathes on a monitor suffocates on a phone: */
  /* --sp-5xs is a hairline, for optical correction rather than layout: see
     "Optička simetrija" in STYLE.md. A line box reserves room for ascenders
     and descenders that a given string may not use, so text can sit low in
     its own box even when the padding around it is equal. Correcting that
     needs a smaller unit than the layout ladder provides. */
  --sp-5xs:  1px;
  --sp-4xs:  .125rem;
  --sp-3xs:  .25rem;
  --sp-2xs:  .5rem;
  --sp-xs:   .75rem;
  --sp-sm:   1rem;
  --sp-md:   1.5rem;
  --sp-lg:   2rem;
  --sp-xl:   2.5rem;
  --sp-2xl:  3rem;
  --sp-3xl:  4rem;

  /* ---- Letter spacing -------------------------------------------------
     Tracking. Not a system axis in the way the others are — it is an
     optical correction that depends on the typeface and the size it is set
     at — but it still had 18 values, including .04, .05 and .06em doing one
     job three ways, so it gets a closed set like everything else.

     The principle behind the shape of this scale: large type needs
     NEGATIVE tracking (letters set close look right when they are big),
     and small uppercase needs generous POSITIVE tracking (capitals set
     tight are hard to read at label size).

       --ls-tight   -.015em  hero-scale display type
       --ls-snug    -.01em   headings
       --ls-slight   .02em   fine adjustment on body-scale text
       --ls-wide     .04em   buttons, links in caps
       --ls-wider    .08em   small caps, cite lines
       --ls-widest   .14em   eyebrows, section labels
       --ls-ultra    .22em   the widest labels on the site */
  --ls-tight:  -.015em;
  --ls-snug:   -.01em;
  --ls-slight:  .02em;
  --ls-wide:    .04em;
  --ls-wider:   .08em;
  --ls-widest:  .14em;
  --ls-ultra:   .22em;

  /* Fluid steps for page rhythm. These have to grow with the viewport or a
     layout that breathes on a monitor suffocates on a phone. One ladder,
     named like the fixed one, rather than a second vocabulary:

       --sp-fluid-3xs   10 ->  20   inside a framed image
       --sp-fluid-2xs   16 ->  28   tight block separation
       --sp-fluid-xs    20 ->  32   grid and flex gaps
       --sp-fluid-sm    24 ->  44   between content blocks
       --sp-fluid-md    32 ->  56   between groups of blocks
       --sp-fluid-lg    44 ->  80   generous block separation
       --sp-fluid-xl    56 -> 112   between page sections
       --sp-fluid-2xl   80 -> 165   the tallest hero/section padding */
  --sp-fluid-3xs: clamp(10px, 1.5vw, 20px);
  --sp-fluid-2xs: clamp(16px, 2.5vw, 28px);
  --sp-fluid-xs:  clamp(20px, 3vw, 32px);
  --sp-fluid-sm:  clamp(24px, 3.5vw, 44px);
  --sp-fluid-md:  clamp(32px, 5vw, 56px);
  --sp-fluid-lg:  clamp(44px, 6vw, 80px);
  --sp-fluid-xl:  clamp(56px, 8vw, 112px);
  --sp-fluid-2xl: clamp(80px, 11vw, 165px);

  --shadow-sm: 0 2px 10px rgba(5, 13, 31, .08);
  --shadow-md: 0 12px 36px rgba(5, 13, 31, .14);
  --shadow-lg: 0 32px 80px rgba(5, 13, 31, .22);
  --shadow-dark-sm: 0 2px 8px rgba(0, 0, 0, .35);
  --shadow-dark-md: 0 8px 32px rgba(0, 0, 0, .45);

  /* ---- Layers ---------------------------------------------------------
     Named stacking levels. Nine ad-hoc z-index values (1, 45, 50, 190, 200,
     300, 400, 500, 1000) cannot be reasoned about: whether one thing sits
     above another becomes something you discover by testing. Named levels
     make the stack readable, and the gaps leave room to insert between.

       --z-base      1   raised within its own component
       --z-sticky   50   sticky subheader
       --z-header  200   site header
       --z-overlay 300   search overlay, mobile nav
       --z-modal   500   lightbox
       --z-top    1000   skip link — must clear everything */
  /* ---- Focus ----------------------------------------------------------
     The ring a keyboard user follows. WCAG 2.2 (2.4.11 / 2.4.13) asks for a
     ring at least 2px thick with at least 3:1 contrast against what
     surrounds it; these values are chosen against measurement, not taste:

       --accent-strong  #c14915   4.96:1 on white, 4.55:1 on --bg-sunken
       --gold-400       #f5b889  10.70:1 on navy, 10.87:1 on the lightbox

     --accent-strong on navy is only 3.74:1 — it would technically pass and
     still be hard to see, which is why dark grounds get their own colour
     rather than one ring everywhere.

     --focus-ring is a TOKEN, not a fixed colour, so a dark container simply
     redefines it and every focusable element inside inherits the right one.
     One rule, no per-component focus styles. See STYLE.md, "Stanje fokusa". */
  --focus-ring: var(--accent-strong);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  --z-base:     1;
  --z-sticky:  50;
  --z-header: 200;
  --z-overlay: 300;
  --z-modal:  500;
  --z-top:   1000;

  --ease: cubic-bezier(.4, 0, .2, 1);
  --transition: .25s var(--ease);
}