/* ==========================================================================
   zs-components.css — shared UI components for Zvjezdane Staze
   --------------------------------------------------------------------------
   Components canonized 2026-05-05 (brand consolidation pass). All blocks
   below were previously inline in programmes/index.php and de/programme/index.php.
   Extracted here so they can be referenced from any page module without
   duplication.

   Contents:
     1. Now-line (live status pill above page title)
     2. Now-context (solar context italic line)
     3. Section eyebrow (gold caps + leading mark + fade line)
     4. Section pause (Vez Dijamant divider glyph between sections)
     5. Meta-strip (Mijakovići data line before footer CTA)
     6. Format tag (RESIDENCY, FELLOWSHIP, GATHERING, etc.)
     7. Status pill (live countdown / state)
     8. Card-tags row (format-tag + status pill side by side)
     9. Programme card (standard / residency / featured variants)
    10. Season-aware sun-blob tint
    11. Foundation note (nosilac programa: ZS + Fondacija Prostor)
    12. Journal objava (back-link, dates-callout, end-mark, mjera)

   All tokens reference :root vars from zs-base.css.
   ========================================================================== */


/* ==========================================================================
   1. NOW-LINE — live status above the page title
   ========================================================================== */

.now-line {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 0.95rem;
    background: rgba(196, 160, 80, 0.08);
    border-radius: 22px;
    line-height: 1.4;
}
.now-line::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--gold);
    animation: nowPulse 3.2s ease-in-out infinite;
}
.now-line.urgent {
    background: rgba(160, 64, 96, 0.08);
    color: var(--magenta);
}
.now-line.urgent::before { background: var(--magenta); }

@keyframes nowPulse {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.18); }
}


/* ==========================================================================
   2. NOW-CONTEXT — solar context italic line under the now-line
   ========================================================================== */

.now-context {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 13px;
    color: var(--light);
    margin-top: 0.3rem;
    margin-bottom: 0.5rem;
    letter-spacing: 0.01em;
}
.now-context .sep {
    color: var(--gold);
    margin: 0 0.5rem;
    font-style: normal;
}


/* ==========================================================================
   3. SECTION EYEBROW — gold caps with leading mark + fade line
   --------------------------------------------------------------------------
   Used above each programme grid section. Default tone is gold. Magenta
   (eyebrow--launch) for sections driven by an imminent launch event.
   ========================================================================== */

.section-eyebrow {
    position: relative; z-index: 100;
    max-width: 900px;
    margin: 2rem auto 1rem;
    padding: 0 2rem;
    font-family: var(--font-sans);
    font-size: 10.5px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.section-eyebrow::before {
    content: '';
    width: 18px; height: 1px;
    background: var(--gold);
    flex-shrink: 0;
}
.section-eyebrow::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right,
        rgba(196, 160, 80, 0.55) 0%,
        rgba(196, 160, 80, 0.10) 60%,
        transparent 100%);
    margin-left: 0.4rem;
}
.section-eyebrow .ctx {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 13.5px;
    color: var(--muted);
    margin-left: 0.6rem;
    flex-shrink: 0;
}

/* Launch variant — magenta accent for imminent-event sections */
.section-eyebrow.eyebrow--launch {
    color: var(--magenta);
    font-size: 12px;
    letter-spacing: 0.32em;
}
.section-eyebrow.eyebrow--launch::before { background: var(--magenta); }
.section-eyebrow.eyebrow--launch::after {
    background: linear-gradient(to right,
        rgba(160, 64, 96, 0.40) 0%,
        rgba(160, 64, 96, 0.08) 60%,
        transparent 100%);
}


/* ==========================================================================
   4. SECTION PAUSE — Vez Dijamant divider glyph between sections
   --------------------------------------------------------------------------
   Brand glyph from Vez Dijamant pattern: 8 forest squares (0.7 opacity) +
   central gold square. Quiet visual breath between major content blocks.
   Element is rendered in PHP via pulse_section_pause(); CSS handles only
   the wrapper alignment.
   ========================================================================== */

.section-pause {
    max-width: 900px;
    margin: 4rem auto;
    padding: 0 2rem;
    user-select: none;
    position: relative;
    z-index: 100;
    text-align: center;
}
.section-pause svg {
    display: block;
    margin: 0 auto;
}


/* ==========================================================================
   5. META-STRIP — Mijakovići data line before footer CTA
   ========================================================================== */

.meta-strip {
    position: relative; z-index: 100;
    max-width: 720px;
    margin: 4rem auto 1.5rem;
    padding: 1.5rem 2rem 0;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 13.5px;
    color: var(--muted);
    text-align: center;
    border-top: 1px solid rgba(196, 160, 80, 0.18);
    line-height: 1.7;
}
.meta-strip .sep {
    color: var(--gold);
    margin: 0 0.55rem;
    font-style: normal;
}
.meta-strip .geo {
    display: block;
    font-family: var(--font-sans);
    font-style: normal;
    font-size: 9.5px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--light);
    font-weight: 600;
    margin-top: 0.5rem;
}


/* ==========================================================================
   6. FORMAT TAG — programme category label (RESIDENCY, GATHERING, etc.)
   ========================================================================== */

.format-tag {
    font-family: var(--font-sans);
    font-size: 9.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--gold);
    padding: 0.4rem 0.75rem;
    /* Zaobljenje izbaceno 2026-08-05: bio je jedini zaobljeni oblik
       na sajtu. Pet od sedam mjerenih stranica nema nijedan. */
    border-radius: 0;
    background: rgba(196, 160, 80, 0.08);
    line-height: 1;
}


/* ==========================================================================
   7. STATUS PILL — live countdown / programme state
   --------------------------------------------------------------------------
   Default tone: forest. Variants: urgent (magenta), upcoming (gold), idle.
   Idle uses a dashed ring instead of a filled dot.
   ========================================================================== */

.status {
    font-family: var(--font-sans);
    font-size: 9.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.75rem;
    /* Zaobljenje izbaceno 2026-08-05: bio je jedini zaobljeni oblik
       na sajtu. Pet od sedam mjerenih stranica nema nijedan. */
    border-radius: 0;
    background: var(--whisper);
    color: var(--forest);
    line-height: 1;
}
.status::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.status--urgent   { background: rgba(160, 64, 96, 0.10);  color: var(--magenta); }
.status--upcoming { background: rgba(196, 160, 80, 0.14); color: var(--gold); }
.status--idle     { background: rgba(45, 74, 45, 0.04);     color: var(--light); }
.status--idle::before {
    background: transparent;
    border: 1px dashed currentColor;
    width: 5px; height: 5px;
}


/* ==========================================================================
   8. CARD-TAGS — format-tag + status pill row at top of card
   ========================================================================== */

.card-tags {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 1.4rem;
    flex-wrap: wrap;
}


/* ==========================================================================
   9. PROGRAMME CARD — base + variants
   --------------------------------------------------------------------------
   Base card: cream-ish wash + subtle hover (translateY + shadow + gold
   underline). Variants:
     .residency  — full-width highlight (forest tinted, forest accent rail)
     .featured   — full-width 2-col grid (Dvonoćje, Zvuчne Staze)
   On mobile (<= 768px) the featured grid collapses to single column with
   tags-on-top, content below.
   ========================================================================== */

.programme-card {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(45, 74, 45, 0.03);
    padding: 2rem;
    text-decoration: none;
    transition: all 0.4s;
    position: relative;
    overflow: hidden;
}
.programme-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 3px; height: 0;
    background: var(--teal);
    transition: height 0.4s;
}
/* Gold underline that grows from left on hover — soft polish */
.programme-card::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s ease;
}
.programme-card:hover {
    background: rgba(255, 255, 255, 0.85);
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(45, 74, 45, 0.06);
}
.programme-card:hover::before { height: 100%; }
.programme-card:hover::after  { transform: scaleX(1); }

/* Symbol — programme SVG icon at top-left of card */
.programme-card .symbol {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    display: block;
    color: var(--muted);
}
.programme-card .symbol svg {
    width: 2rem;
    height: 2rem;
    vertical-align: middle;
}

/* Title */
.programme-card h3 {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--forest);
    margin-bottom: 0.5rem;
}

/* Tagline — gold uppercase line under title */
.programme-card .tagline {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1rem;
}

/* Body · kanon proze je 15 / 1.9, izmjeren na /about i razgovoristu.
   Pravilo je zajednicko za /programmes, /de/programme, /join,
   /de/unterstuetzen i /programmes/pulse. Kartice nemaju fiksnu visinu,
   pa samo malo narastu. (2026-08-05) */
.programme-card p {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.9;
    margin-bottom: 1rem;
}

/* Meta — small bottom row */
.programme-card .meta {
    font-size: 12px;
    color: var(--light);
}
.programme-card .meta span { margin-right: 1rem; }

/* ----- residency variant (highlight, forest tinted) ----- */
.programme-card.residency {
    grid-column: span 2;
    background: rgba(45, 74, 45, 0.04);
    border: 1px solid rgba(45, 74, 45, 0.10);
}
.programme-card.residency::before { background: var(--forest); }
.programme-card.residency h3       { color: var(--forest-deep); }

/* ----- featured variant (Dvonoćje, Zvuчne Staze) -----
   2-col grid: full-width tags row on top, then symbol/title/tagline (left)
   and description/deadline (right). Magenta accent rail. */
.programme-card.featured {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "tags tags"
        "left right";
    gap: 1.4rem 2rem;
    align-items: stretch;
}
.programme-card.featured::before { background: var(--magenta); }

.programme-card.featured .card-tags     { grid-area: tags; }
.programme-card.featured .featured-left {
    grid-area: left;
    align-self: start;
}
.programme-card.featured .featured-right {
    grid-area: right;
    align-self: end;
    display: flex;
    flex-direction: column;
}
.programme-card.featured .symbol { font-size: 2.5rem; }
.programme-card.featured h3      { font-size: 1.8rem; }


/* ==========================================================================
   10. SEASON-AWARE SUN-BLOB TINT
   --------------------------------------------------------------------------
   Subtle palette shift on .sun-blob based on season class set on body.
   Aligns the ambient atmosphere to the time of year — spring fresh, summer
   warm, autumn copper, winter cool blue. Brand-safe gradients.
   ========================================================================== */

body.season-spring .sun-blob {
    background: radial-gradient(ellipse at center,
        rgba(221, 230, 192, 0.85) 0%,
        rgba(232, 232, 197, 0.55) 25%,
        rgba(240, 232, 200, 0.30) 50%,
        rgba(244, 238, 208, 0.12) 75%,
        transparent 95%);
}
body.season-summer .sun-blob {
    background: radial-gradient(ellipse at center,
        rgba(244, 220, 170, 0.88) 0%,
        rgba(248, 230, 190, 0.55) 25%,
        rgba(250, 235, 200, 0.28) 50%,
        transparent 95%);
}
body.season-autumn .sun-blob {
    background: radial-gradient(ellipse at center,
        rgba(232, 196, 150, 0.82) 0%,
        rgba(220, 180, 140, 0.50) 25%,
        rgba(208, 165, 130, 0.26) 50%,
        transparent 95%);
}
body.season-winter .sun-blob {
    background: radial-gradient(ellipse at center,
        rgba(220, 220, 230, 0.78) 0%,
        rgba(208, 215, 225, 0.45) 25%,
        rgba(196, 205, 220, 0.22) 50%,
        transparent 95%);
}


/* ==========================================================================
   RESPONSIVE — stacks layouts on tablet (≤ 900px) and mobile (≤ 768px)
   ========================================================================== */

@media (max-width: 900px) {
    .programme-card.featured {
        grid-column: span 1;
        grid-template-columns: 1fr;
        grid-template-areas:
            "tags"
            "left"
            "right";
        gap: 1.4rem;
    }
    .programme-card.residency { grid-column: span 1; }
}

@media (max-width: 768px) {
    /* Section pause — tighter margins on mobile */
    .section-pause {
        margin: 2.5rem auto;
        padding: 0 1.5rem;
    }

    /* Eyebrow — stack label and ctx on two lines, drop trailing gradient,
       tighten letter-spacing so the uppercase label fits without breaking. */
    .section-eyebrow {
        flex-wrap: wrap;
        gap: 0.5rem 0.6rem;
        font-size: 10px;
        letter-spacing: 0.18em;
        padding: 0 1.5rem;
        margin: 1.5rem auto 0.75rem;
    }
    .section-eyebrow::before { width: 14px; }
    .section-eyebrow::after  { display: none; }
    .section-eyebrow .ctx {
        flex: 1 1 100%;
        margin-left: 0;
        font-size: 12.5px;
        line-height: 1.4;
    }
    .section-eyebrow.eyebrow--launch {
        font-size: 11px;
        letter-spacing: 0.2em;
    }

    /* Featured card — single column, smaller h3 */
    .programme-card.featured {
        gap: 1rem;
    }
    .programme-card.featured h3 {
        font-size: 1.3rem;
        word-break: break-word;
    }
}

/* ==========================================================================
   11. Foundation note — blok nosioca (Zvjezdane Staze + Fondacija Prostor)
   --------------------------------------------------------------------------
   Dodato 2026-08-02. Stoji na dnu stranice, iznad footera: ko stoji iza
   programa, u dva logotipa i jednoj recenici. Markup je u
   includes/foundation-note.php.

   Zvjezdane Staze se NE crtaju iz zvjezdane-staze-horizontal-*.svg. Razlog je
   nekad bio da taj fajl nosi <text> i @import Google Fonts, pa bi pismo palo na
   zamjensko; od prepravke logo paketa fajl je u obrisima i taj razlog vise ne
   vazi. Ovdje se i dalje crta rucno jer blok trazi rijec u istom pismu kao
   okolni tekst, a ne zaledjenu geometriju. Ovdje: zvjezdunika (cista
   geometrija) + rijec u HTML-u, u Space Grotesku koji stranica ionako ima.

   Fondacija se crta iz img/logo/prostor/, rez500 (clan XS). Tinta je Bazalt,
   njihova osnovna; ne dira se. Zastitno polje je 2/5 visine znaka — otud
   --fn-gap ne smije pasti ispod 0.4 × --fn-prostor-h.
   ========================================================================== */

.foundation-note {
    /* Blok cesto stoji izvan .article-shell, a stranica ima fiksne ukrasne
       slojeve na z 1, 3 i 5. Bez vlastitog sloja blok se izmjeri ali se ne
       vidi. Deset je iznad ukrasa, ispod navigacije (1000). */
    position: relative;
    z-index: 10;

    --fn-mark: 34px;        /* okvir zvjezdunike; otisak je 0.64 od toga */
    --fn-word: 12px;        /* rijec ZVJEZDANE STAZE */
    /* Logogram nosi PROSTOR u visini 700/778 okvira, dakle na 19 px versal je
       17 px. Na 21 px je rijec PROSTOR bila najglasnija stvar u bloku i
       nadjacavala ZVJEZDANE STAZE, koje su u razmaknutom slogu. */
    --fn-prostor-h: 19px;   /* visina logograma fondacije */
    --fn-gap: 1.75rem;      /* > 0.4 × --fn-prostor-h, dakle iznad polja */

    margin: 3.25rem auto 0;
    max-width: 640px;
    padding: 1.85rem 2rem 1.6rem;
    border-top: 1px solid rgba(196, 160, 80, 0.35);
    text-align: center;
}

.foundation-note .fn-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-bottom: 1.35rem;
}

/* ---------- red logotipa ---------- */
.foundation-note .fn-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--fn-gap);
    margin-bottom: 1.35rem;
}

.foundation-note .fn-zs {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
.foundation-note .fn-zs-mark {
    width: var(--fn-mark);
    height: var(--fn-mark);
    display: block;
    flex: none;
}
.foundation-note .fn-zs-word {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: var(--fn-word);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--forest);
    white-space: nowrap;
}

.foundation-note .fn-rule {
    width: 1px;
    height: calc(var(--fn-mark) * 0.8);
    background: rgba(196, 160, 80, 0.45);
    flex: none;
}

.foundation-note .fn-prostor {
    height: var(--fn-prostor-h);
    width: auto;
    display: block;
    flex: none;
}

/* ---------- tekst ---------- */
.foundation-note .fn-body {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 13px;
    line-height: 1.7;
    color: var(--light);
    max-width: 560px;
    margin: 0 auto;
}

/* Statutarni nazivi, redoslijed po kanonu: Fondacija -> Fondacija -> Zaklada. */
.foundation-note .fn-registry {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--moss);
    margin-top: 1.35rem;
    line-height: 1.9;
}
.foundation-note .fn-registry span { white-space: nowrap; }

@media (max-width: 620px) {
    .foundation-note {
        --fn-mark: 30px;
        --fn-prostor-h: 19px;
        --fn-gap: 1.1rem;
        padding: 1.6rem 1.25rem 1.4rem;
    }
    /* Red se lomi umjesto da se stisne ispod zastitnog polja. */
    .foundation-note .fn-logos { flex-direction: column; gap: 1rem; }
    .foundation-note .fn-rule { width: 46px; height: 1px; }
    .foundation-note .fn-registry { font-size: 9px; letter-spacing: 0.12em; }
}

/* ==========================================================================
   12. Journal objava — back-link i mjera bloka izmedju pasusa
   --------------------------------------------------------------------------
   Dodato 2026-08-02. Pravilo je do sada zivjelo prekucano u inline <style>
   svake objave, pa su dvije nove objave ostale bez njega i link je pao na
   default preglednika, plav i podvucen.

   NAMJERNO USKO. Klasa .back-link na ovom sajtu ima dva razlicita znacenja:
   na journal objavama i u bhs/ je sam link, a na programmes/dvonocje/,
   programmes/odjeci i drugim programskim stranicama je omotac <div> oko linka
   (pozicija, max-width, padding). garden/plant.php je opet link ali drugog
   crteza: 11px, verzal, bez zlatne linije. Golo pravilo .back-link bi tim
   stranicama nametnulo display i border-bottom koje one ne postavljaju, pa bi
   omotac postao inline-block a ispod njega bi izasla zlatna crta.

   Zato je vezano za body.page-journal-post, klasu koju nose samo objave.
   Starije objave i dalje nose svoju inline kopiju; ona samo ponavlja isto.
   ========================================================================== */

body.page-journal-post a.back-link {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--forest);
    text-decoration: none;
    border-bottom: 1px solid var(--gold);
    transition: color 0.3s, border-bottom-color 0.3s;
}
body.page-journal-post a.back-link:hover {
    color: var(--magenta);
    border-bottom-color: var(--magenta);
}

/* ---------- mjera objave ----------
   Tekst stoji u .editorial-body: 720 px, centrirano, 2rem unutrasnjeg razmaka,
   dakle slog pocinje 32 px unutar te kutije. Sve sto stoji izmedju pasusa mora
   se drzati te iste mjere, inace stranica dobije vise lijevih ivica. */

body.page-journal-post .dates-callout {
    max-width: 640px;
    margin: 2.5rem auto;
    padding: 1.25rem 1.75rem;
    background: rgba(45, 74, 45, 0.04);
    border-left: 3px solid var(--forest);
}
body.page-journal-post .dates-callout .label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-bottom: 0.4rem;
}
body.page-journal-post .dates-callout .value {
    font-family: var(--font-mono);
    font-size: 15px;
    color: var(--forest-deep);
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* Zadnja dva pasusa objave: poziv i link na programsku stranicu. */
body.page-journal-post .editorial-body .footer-cta {
    margin-top: 2rem;
    margin-bottom: 0.4rem;
}
body.page-journal-post .editorial-body .footer-link { margin-bottom: 0; }
body.page-journal-post .editorial-body .footer-link a { font-weight: 500; }

body.page-journal-post .end-mark {
    text-align: center;
    margin-top: 3rem;
    color: var(--gold);
}
body.page-journal-post .footer-divider {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    margin: 3rem auto;
    max-width: 720px;
}
body.page-journal-post .back-link-wrap {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 2rem;
}

@media (max-width: 768px) {
    body.page-journal-post .dates-callout {
        margin-left: 1.5rem;
        margin-right: 1.5rem;
        padding: 1.1rem 1.25rem;
    }
    body.page-journal-post .back-link-wrap { padding: 0 1.5rem; }
}

/* ==========================================================================
   13. SECTION LEAD — uvodna rečenica sekcije na stranicama umjetnika
   --------------------------------------------------------------------------
   Bila je definisana po stranici, i to samo na dvije od pet. Šesta stranica
   (natasa-jevtic, 2026-08-04) građena je iz predloška koji je nema, pa je
   klasa sletjela bez ijednog pravila: naslijeđeni sans 16px, margin-bottom 0.

   Eksplicitno `p.section-lead`, a ne `.cv-section > p`, jer bi taj selektor
   pregazio .photo-credit unutar iste sekcije.

   Mjera je serif registar: proza 17 / 1.85, isto kao .project-statement p.
   ========================================================================== */
.cv-section p.section-lead {
    font-family: var(--font-serif);
    font-size: 17px;
    line-height: 1.85;
    color: var(--muted);
    margin-bottom: 1.6em;
}

/* ==========================================================================
   14. ARTIST FIGURES — poravnanje i mjera
   --------------------------------------------------------------------------
   .zs-figure--hero-wide je u zs-images.css centriran (`margin: 0 auto`). Na
   artist stranicama sadrzajni okvir je 856px a slika 720, pa je slika stajala
   68px desno od proze, koja je lijevo poravnata. Ovdje se poravnavaju.

   Uspravna slika 4:5 na punoj sirini je 900px visoka i preuzme stranicu, pa
   se kapira na 520, cime pada na 650. Polozene ostaju na sirini teksta.
   (2026-08-05)
   ========================================================================== */

/* Artist stranice su jedini slucaj gdje `margin: 0 auto` iz zs-images.css
   promasi: ljuska je 856 a tekstualna kolona 720, pa se slika centrira u
   ljusku i zavrsi 68px desno od teksta. Ovdje se poravnava sa kolonom.
   Drugdje se NE dira: tamo je kolona 836 a slika 720, pa centriranje jeste
   ispravno i lijevo poravnanje ostavlja 116px praznine sa desne strane. */
body.page-artist .zs-figure--hero-wide {
    margin-left: 0;
    margin-right: 0;
}

/* Uspravne (4:5) na punoj sirini su 900px visoke i preuzmu stranicu. Suzavaju
   se na 520 i centriraju unutar kolone. Suzava se sadrzaj figure, a ne sama
   figura: tako se `auto` racuna prema 720 kolone, a ne prema 856 okvira.
   Potpis dobija istu sirinu da mu desno poravnanje padne na ivicu slike.

   Prag je 700px, jer se ispod njega kolona suzi na oko 520 pa razmak spadne
   na nekoliko piksela, sto se cita kao promasaj a ne kao centriranje. Tu
   uspravne idu punom sirinom kolone, kao i polozene. */
@media (min-width: 700px) {
    body.page-artist .zs-figure--hero-wide > .zs-image--4x5,
    body.page-artist .zs-figure--hero-wide:has(.zs-image--4x5) > figcaption {
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ==========================================================================
   15. ARTIST SECTIONS — jedna mjera po stranici
   --------------------------------------------------------------------------
   Sekcija Concept (.project-statement) je 720 široka, a .cv-section je bila
   856, pa je stranica imala dvije mjere: proza i zlatna crta ispod naslova
   Concept staju na 925, a sve poslije njih ide do 1061. Razlika od 136px se
   vidi kao da tekst ispod strši udesno.

   Izmjereno na svih devet artist stranica, svugdje isto. Ovdje se .cv-section
   spušta na istu mjeru, a s njom i zlatni panel .active-residency, koji je
   bio jednako širok. Sada naslovi, crte, proza, panel i slike dijele jednu
   desnu ivicu. (2026-08-05)
   ========================================================================== */

body.page-artist .cv-section,
body.page-artist .active-residency,
body.page-artist .funding-note,
body.page-artist .photo-credit,
body.page-artist .artist-hero {
    max-width: 720px;
}

/* Duga linija prakse je isticala do 1060, dok proza staje na 924. Cetiri od
   devet stranica su prelazile kolonu, najvise Tea za 92px i Natasa za 75.
   Sada se prelama unutar kolone, a `balance` dijeli prelom na dva priblizno
   jednaka reda umjesto da drugi red ostane sa dvije rijeci. */
body.page-artist .practice-tags {
    text-wrap: balance;
}


/* ==========================================================================
   16. ARTIST WORKS GALLERY — opis uz svoj rad
   --------------------------------------------------------------------------
   Kod Tee je sekcija Works bila spisak: mjera, materijal i konac za pet
   radova, bez ijedne slike, dok su dvije fotografije stajale odvojeno gore i
   nisu bile vezane ni za jedan opis. Belma: „to moramo napraviti kao galeriju,
   showcase, ne ovako."

   Mreža je kanonska, .zs-gallery-grid--large, ista koja nosi /about/space i
   /about/region, sa lightboxom preko data-zs-gallery. Ovdje se dodaje samo
   potpis, jer .zs-caption je 11px kurziv desno, što je potpis ispod slike a ne
   opis rada od četrdesetak riječi.

   Pet radova je portretno a jedan pejzažni, pa `align-items: start` drži svaku
   ćeliju na vlastitoj visini umjesto da se rastežu na visinu reda. (2026-08-07)
   ========================================================================== */

body.page-artist .works-gallery {
    align-items: start;
    gap: 1.6rem 1.4rem;
}

body.page-artist .works-gallery .work-caption {
    display: block;
    margin-top: 0.7rem;
    font-family: var(--font-sans);
    text-align: left;
}
body.page-artist .works-gallery .work-dim {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--gold-deep);
    margin-bottom: 0.35rem;
}
body.page-artist .works-gallery .work-material {
    display: block;
    font-size: 13px;
    line-height: 1.65;
    color: rgba(45, 74, 45, 0.86);
}
body.page-artist .works-gallery .work-thread {
    display: block;
    margin-top: 0.3rem;
    font-size: 12.5px;
    line-height: 1.7;
    color: rgba(45, 74, 45, 0.58);
}

/* ==========================================================================
   17. FINAL PRESENTATION — šta se pokazuje na kraju boravka
   --------------------------------------------------------------------------
   Umjetnici pred kraj šalju naslov, format i kratak opis onoga što će pokazati.
   To nije koncept iz prijave: prijava je namjera, ovo je ishod, i često se
   razlikuje. Kod Zarim je i naslov drugi.

   Zato zaseban blok, a ne dopisivanje u Concept. Stoji na dnu stranice, poslije
   Work in progress, pa se stranica čita kao luk: namjera, metod, rad, ishod.
   Datum se ponavlja gore u zlatnom bloku kao poveznica, jer je to jedina
   informacija sa te sekcije koja ima rok.

   Bez zlata i bez okvira. Zlatni blok gore nosi boravak, ovo mu je nastavak a
   ne takmac, pa se odvaja samo tankom linijom i kurzivom. (2026-08-07)
   ========================================================================== */

body.page-artist .presentation-head {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(196, 160, 80, 0.22);
}
body.page-artist .presentation-head .pres-when {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--moss);
    margin-bottom: 0.9rem;
}
body.page-artist .presentation-head .pres-title {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.6rem, 3.4vw, 2rem);
    line-height: 1.2;
    color: var(--forest-deep);
    margin-bottom: 0.35rem;
}
body.page-artist .presentation-head .pres-sub {
    font-family: var(--font-serif);
    font-size: 18px;
    line-height: 1.45;
    color: var(--muted);
    margin-bottom: 0.9rem;
}
body.page-artist .presentation-head .pres-format {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-deep);
}
/* Isti registar kao .project-statement p, da tekst umjetnika svugdje
   izgleda isto bez obzira u kojoj sekciji stoji. */
body.page-artist .pres-body {
    font-family: var(--font-serif);
    font-size: 17px;
    line-height: 1.85;
    color: var(--muted);
    max-width: 720px;
    margin: 0 0 2.5rem;
}

@media (max-width: 700px) {
    body.page-artist .presentation-head .pres-when { letter-spacing: 0.14em; }
    body.page-artist .presentation-head .pres-format {
        font-size: 11px;
        letter-spacing: 0.16em;
    }
    body.page-artist .presentation-head .pres-sub { font-size: 16.5px; }
}