/* ============================================================================ Direction C · UNIVERS — sub-page shell + typographic primitives Loaded after c-base.css on every text page. The whole system is the Lovers Tour section's grammar, generalised. That block is three vertical stops and two rule strengths: hang −.5 × --gut the display headline (.hang-l) edge the content column labels, rows, lists indent +--ind the mono line under the headline and one sequence: label → monument → mono fact → hairline rows → label → list. Small→huge→small→medium→small. "Playful" is produced by SKIPPING steps of that ladder and by moving type between the three stops — never by ornament. There is no colour accent, no quote glyph, no bullet, no arrow anywhere below. The ONE box is .cta, the donate call-to-action, which inherits c-base.css's already-sanctioned header chip. Weight semantics, one job each (all already in the page's font request): Inter Tight 800 place city monuments, nowhere else Inter Tight 700 title page + chapter titles, pull-quotes Inter Tight 600 value row values, work titles --sans 300 voice ledes, statements, dialogue, stairs --sans 400 prose body --sans 600 label .eyebrow (tracked caps) mono 400 fact years, dates, counts, provenance mono 500 marked the acrostic capitals, nowhere else Rule strengths, only two: --hair between rows · --ink above a chapter. ============================================================================ */ /* ── SHELL ────────────────────────────────────────────────────────────────── */ /* page header — the Lovers Tour opening with h1 in place of h2. No eyebrow above the title on any sub-page, so it opens higher than the homepage gives #upcoming. */ .phead{padding-block:clamp(2.6rem,6vh,5rem) clamp(2.5rem,6vh,4.5rem)} .phead .body{grid-column:3/10} /* BACK, above the page title. A real href to the homepage section that owns this page — not history.back(), which has nothing to go back to on a page opened cold from a link or a bookmark. It carries .hang-l so it starts on the title's own left edge, not the body column's: the h1 hangs half a gutter left of the text, and a back link indented from it would look like a mistake. Deliberately quiet — soft grey going ink on hover: it is navigation chrome above a 76px title, not content. No .reveal, so it is there the moment the page paints. */ .back{display:inline-block;margin-bottom:clamp(.9rem,2.2vh,1.5rem);font-family:var(--mono); font-size:.78rem;letter-spacing:.05em;color:var(--ink-soft);transition:color .3s} .back:hover{color:var(--ink)} .back .ar{display:inline-block;margin-right:.5em;transition:transform .3s} .back:hover .ar{transform:translateX(-.2em)} .back:focus-visible{outline:1px solid var(--ink);outline-offset:.4rem} /* the mono line under a display title. .season is the homepage's instance; both sit in the headline's indent and carry METADATA, never prose. */ .subline{margin-top:.9rem;font-size:.84rem;letter-spacing:.12em;text-transform:uppercase;padding-left:var(--ind)} /* on-page view switch — left column, indented to the same stop as the subline. NOT the right margin: a right-hand off-grid label was ruled "completely lost". */ .phead .seg{margin-top:clamp(1.8rem,4vh,2.8rem);margin-left:var(--ind);max-width:19rem} .seg.caps button{text-transform:uppercase;letter-spacing:.14em;font-size:.62rem;padding:.6rem .5rem} /* text-page band rhythm — the homepage cadence is far too tall for reading pages */ .band.tight{padding-block:var(--pad-s)} /* ── PRIMITIVES ───────────────────────────────────────────────────────────── */ /* reading prose. Pair with .measure (52ch) — the liner-notes column. */ .read{font-size:var(--read);line-height:1.78} .read p + p{margin-top:1.15em} /* display lede — a first sentence spoken in the Light voice. Deliberately NOT Inter Tight: that face is only loaded 600/700/800. */ .dlede{font-weight:300;font-size:clamp(1.55rem,3.1vw,2.7rem);line-height:1.14;letter-spacing:-.014em; max-width:30ch;text-wrap:balance} /* THE EMPHASIS VOICE — one size for everything a page lifts out of running prose. No rule, no quote mark: the whitespace and the gutter hang do the work; a box would read as a callout. ONE recipe across the site, per the client ("ako se nesto istice, mozda uvek istim vecim fontom"); only .lead sits above it. Projects' 2018 values lines are the sole user — the manifesto sets every lifted sentence as prose instead, so this voice appears once site-wide. Adding a second user is a design decision, not a styling one. */ .stair.caps > *{font-family:"Inter Tight",var(--sans);font-weight:700; text-transform:uppercase;font-size:clamp(1.6rem,3.6vw,3rem);line-height:1.04;letter-spacing:.005em} /* row modifiers (the base rule lives in c-base.css beside .gig). .row is sub-page-only, so anything set here leaves the homepage's .gig — which shares the base rule — at its approved size. Projects sizes its own concert and programme rows in its style block; note that if you ever give a .row a second grid ROW, the base `gap` is both axes and will open a 2.5rem gutter inside the row. */ .row.light .v{font-family:var(--sans);font-weight:300;font-size:clamp(1.25rem,2.4vw,2.1rem); line-height:1.16;letter-spacing:-.012em;text-transform:none} .row.tight{padding:1.1rem 0} body.panels-dark .field .row + .row{border-top-color:rgba(251,251,250,.16)} body.panels-dark .field .row .k,body.panels-dark .field .row .t{color:rgba(251,251,250,.62)} /* roster — a running chorus, never a column of
  • . The city is promoted from a parenthetical to tracked caps, so the places become the block's visible pulse. */ .roster{font-size:.98rem;line-height:1.9;text-wrap:pretty} .roster.cols{columns:2;column-gap:clamp(1.6rem,4vw,3.4rem)} /* ONE tag voice for both cities. The home city was tracked caps and the second city was mono, so the same place rendered in two unrelated faces and never looked like itself (client: "npr. berlin/munich"). The tracking matches .eyebrow, so the page now has a single micro-caps style rather than three near-identical ones. */ .roster .ct,.roster .now{font-size:.66rem;text-transform:uppercase;letter-spacing:.26em; font-weight:600;color:var(--ink-soft);white-space:nowrap} .roster .ct{margin-left:.45em} .roster .now{margin-left:.5em} /* the second city is the same voice, set apart by a thin rule rather than a different font */ .roster .now::before{content:"";display:inline-block;width:.5em;height:1px;vertical-align:.28em; margin-right:.5em;background:currentColor;opacity:.55} /* a name never breaks away from its place, and the tracked-caps place IS the delimiter — no dots needed between entries, and no justification: justify stretches the space inside a person's name, which looks broken. */ .roster .e{white-space:nowrap;margin-right:1.15em} body.panels-dark .field .roster .ct,body.panels-dark .field .roster .now{color:rgba(251,251,250,.62)} /* chapter — a monument in the label column under a full-ink rule. That rule is the only structural device on a page carrying six or nineteen chapters. */ .chap{border-top:1px solid var(--ink);padding-top:1.2rem;margin-top:var(--pad-s)} /* A CHAPTER'S YEAR IS SMALLER THAN THE PAGE TITLE — it is a step DOWN the ladder, not a second h1 (client, 2026-08-03). Lives here rather than per page so both year-keyed pages take one value; Projects states the identical clamp in its own block, which now just agrees with this. */ .chap .lead{font-size:clamp(1.7rem,3.4vw,2.9rem)} .chap .n{grid-column:1/3;align-self:stretch} .chap .n > span{position:sticky;top:6.4rem;display:block} /* parks under the 5.2rem header + air */ .chap .n.num > span{font-family:var(--mono);font-weight:400;font-variant-numeric:tabular-nums; font-size:clamp(2.6rem,7vw,6rem);line-height:.82;letter-spacing:-.02em} .chap .b{grid-column:3/12} .chap .lbl{grid-column:1/4} /* composer statement — the one block using all three stops at once: work title hangs left, name on the edge, the statement inset to the indent. */ .stmt{border-top:1px solid var(--hair);padding-block:clamp(2.4rem,5vh,4rem)} .stmt .who{font-size:.66rem;text-transform:uppercase;letter-spacing:.26em;font-weight:600;color:var(--ink-soft)} .stmt .work{margin-left:calc(-.5 * var(--gut));margin-top:.6rem;font-weight:300; font-size:clamp(1.4rem,2.7vw,2.3rem);line-height:1.1;letter-spacing:-.014em} .stmt .say{margin-left:var(--ind);margin-top:1.2rem;max-width:52ch;font-size:var(--read);line-height:1.78} .stmt .say p + p{margin-top:1.15em} /* ── THE TEXT PAGE ───────────────────────────────────────────────────────────────────────── ONE composition for every long-form page under ABOUT — Manifesto, Mission, NBO CV, and any text-heavy page added later. Opt in with . It is deliberately a SHORT set of rules, because the page's whole argument is that a reading page needs almost nothing (client, 2026-07-30: "Manifesto stranu bih još pojednostavio"). ONE BODY VOICE. Every sentence is the same face, size, weight and colour — .read, and nothing else. The page has exactly two other voices: the title (.lead) and the micro-caps .eyebrow that names a section. What used to be three more sizes — a display lede, a lifted-out emphasis line, a bigger question — is gone: an opening sentence is emphatic because it is first, not because it is large. ONE COLUMN. Every text block shares one left edge, cols 3/10, including the title. The photo row is the only thing on the page allowed to leave it. ONE RHYTHM, two tiers. --gap-b separates blocks (prose → photo, prose → a new labelled section). --gap-t, on .cont, joins two paragraphs of the SAME argument, where --gap-b's 59px read as a change of subject. A row contributes no padding of its own, so a join is never the sum of two sections' padding. TWO ANIMATIONS, and no more. The TITLE arrives on load — alone, so the page settles once and then holds still while you read. The FOOTER arrives on scroll, which is the only reason the page is not wholly inert. Nothing between them moves, the opening paragraph included: every paragraph carries .reveal-opt, which is inert until ?reveal=all switches the scroll-in on for a side-by-side look. Photos never move either — no reveal, and no [data-par]: parallax is a homepage device, and on a page you read it drifts the one thing you are looking at. ──────────────────────────────────────────────────────────────────────────────────────────── */ body.textpage{--gap-t:clamp(1.7rem,3.4vh,3rem); /* prose → prose, the same argument continuing */ --gap-b:clamp(3rem,6.6vh,5.2rem)} /* block → block: prose to a photo, to a new section */ /* the one column band — the page title sits on it too, so the title's left edge IS the text's */ .textpage .phead .body,.textpage .tcol{grid-column:3/10} /* the one rhythm */ .textpage .erow{padding-block:0} .textpage .erow + .erow{margin-top:var(--gap-b)} /* .cont — "this row continues the argument above it". Same class count as the rule it overrides, so it has to stay AFTER it to win. A row that opens a new labelled section is never .cont. */ .textpage .erow.cont{margin-top:var(--gap-t)} /* ── THE FOOTER SITS ON THE BOTTOM, EVEN WHEN THE PAGE IS SHORT ────────────────────────────── Donate is 900px of content in a 900px viewport and left 203px of bare paper UNDER the footer; Board (1048), Team (1125), Discography (1503) and NBO CV (1507) do the same on any tall monitor. A footer floating mid-screen with blank paper below it reads as a page that failed to finish loading rather than as a page that ended. body.sub — NOT body: index.html is not a sub-page, carries no .sitefoot, and its hero/panel composition must not be turned into flex items. On a long page margin-top:auto resolves to 0, so this is inert on all ten pages that already overflow the viewport. ⚠️ svh, not vh. On mobile vh is the LARGEST viewport (browser chrome retracted), so 100vh overshoots by the toolbar's height and puts a scrollbar on a page that actually fits. ⚠️ AND `width:100%` on the sections is LOAD-BEARING, for a reason that is easy to miss: `.wrap` carries `margin-inline:auto`, and an AUTO MARGIN IN THE CROSS AXIS DISABLES `align-self:stretch`. Without this line every section stopped filling the body and shrink-wrapped to its own content, which moved the one text edge off 322px on all ten pages and changed their heights. Scoped to `> .wrap` and NOT `> *`: `body.sub > *` would outrank `.pdlg` on specificity and blow up Projects' modal width. */ body.sub{display:flex;flex-direction:column;min-height:100svh} body.sub > .wrap{width:100%} body.sub .sitefoot{margin-top:auto} /* ── THE THREE SHORT LINES, AND WHY NONE OF THEM IS A SECOND VOICE ───────────────────────── A text page needs three kinds of short line that are not paragraphs: a SECTION NAME, a QUOTE ATTRIBUTION, and — on the list pages — a CREDIT above a person's name. All three are plain prose, and ONE mechanism tells them apart: a short line welded to its block by a gap tighter than any paragraph join, plus, for the credit, ink dropped to the page's soft grey. ink, welded DOWN → it names what follows → .slabel, a section heading grey, welded DOWN → it credits the name below it → .qual, a role on Team / Board ink, welded UP → it answers what precedes → .cite, an attribution The grey is the page's own voice dimmed, not a new style — and it is what lets a column of names form one unbroken vertical edge the eye can run down, which is the whole job of a list page. Nothing else is added: no rule, no hairline, no display size, no tracked caps. The first two were set in the .eyebrow micro-caps — and that was a real failure, because the two jobs then rendered byte-identically: "ERHARD BUSEK" under a quoted passage looked exactly like "CULTURAL CONTEXT" over a new section, so an attribution read as a heading and nothing at all marked the passage above it as someone else's words (client, 2026-07-30). Both are now plain prose — same face, size, weight and ink as every sentence on the page, which is the rule this template exists to hold. What separates them is POSITION, made unambiguous by ONE gap: a short line welded to its block by a gap TIGHTER than any paragraph join on the page. welded DOWNWARD → it names what follows → a section heading welded UPWARD → it answers what precedes → an attribution .5em is below the .85em list join and well below the 1.15em paragraph join, so a welded line can never be misread as a stray one-line paragraph. The attribution also keeps the em-dash the source writes it with (mission.md:27) — that dash is the only mark the client's own page gives the quote, and it is what tells a reader at a glance which of the two kinds of short line this one is. */ /* THE SECTION HEADING takes the site's TITLE voice — Inter Tight 700 uppercase, the same face and weight as the page title and every chapter title on Projects — but at the PROSE SIZE. A different style, not a bigger one (client, 2026-07-30: "a bit of a different font style than the rest, it should stand out a little bit"). That makes it the gentlest possible step in a hierarchy the site already has: PROJECTS 77px → 2025 46px → TURNING POINT TOUR 32px → a section heading at 17px. It has to differ from the CREDIT, not just from prose: both are short lines that name something, so if they shared a treatment we would be back to the collision that made "ERHARD BUSEK" read as a heading. They now differ on every axis — title face, full ink, prose size, caps VERSUS the credit's micro-caps grey. The hairline still separates sections; this labels them. Tracking is .04em rather than .lead's .005em: uppercase at 17px sets far too tight at a display face's tracking, which is calibrated for 46–77px. */ .textpage .slabel{margin-bottom:.5em;font-family:"Inter Tight",var(--sans);font-weight:700; text-transform:uppercase;letter-spacing:.04em} /* `+ *`, not `+ p`: a heading welds down to whatever opens its section — a paragraph on Mission, a name list on Partners. Same 8px either way. */ .textpage .read .slabel + *{margin-top:0} /* THE CREDIT sits UNDER the name and is the one short line that is also SMALLER (client, 2026-07-30: above the name and at full size it competed with the name instead of serving it, and on Board it made a third stacked line between the section heading and the person). Under and smaller, it is unmistakably subordinate — you read the name, then what they do. It carries .eyebrow IN THE MARKUP rather than restating that recipe here, so the site keeps ONE micro-caps label and this cannot drift from it. That recipe is already doing exactly this job elsewhere: `.stmt .who` names the speaker under a composer statement. It is the only place a text page uses a second size, and it buys the thing a list page needs most — names as the one thing at full size, so the column of them reads as the content and the roles as annotation. */ .textpage .qual,.textpage .cite{margin-top:.5em} /* both welded UP: they answer the line above */ /* a list of one-line statements — the manifesto's twelve questions. Identical face, size and weight to prose; only the line gap says "list" rather than "paragraph". The list is a
    , so .read's `p + p` join does NOT reach it and the first question would sit flush against the sentence that introduces it, reading as that sentence's last line. It takes the paragraph join instead — wider than the .85em between questions, so where the list starts is unambiguous while every gap on the page stays one of the values the page already uses. */ /* `*:not(.slabel) +` and not a bare `.qlist`: a list that OPENS a section must take the heading's own 8px weld, not this join, and the two rules would otherwise tie on specificity and be decided by their order in this file — which is exactly the kind of fragility to write out rather than inherit. The :not() lifts this rule above the tie and excludes the case it shouldn't win. */ .textpage .read *:not(.slabel) + .qlist{margin-top:1.15em} .textpage .qlist p + p{margin-top:.85em} /* ── PARTNERS' NAME LISTS: TWO COLUMNS, ALIGNED TO THE SHEET ABOVE ──────────────────────────── Client, 2026-08-05: "sami nazivi organizacija da budu manji font. I da budu u dve kolone uskladjeno sa logoima gore". They were full prose size in ONE column running the whole 10-track content width, with nothing tying them to the 600px sheet they sit under — so a season's logos and its names read as two unrelated blocks. ⚠️ THE SIZE IS `.roster`'s .98rem, NOT A NEW VALUE. That is already this site's "a list of names" voice (Musicians' 161-city roster), and `.roster.cols` is already its two-column form — so this invents no type size and no new column recipe, which is the doctrine the page leans on everywhere else. 600px is `.textpage .sheet`'s own fixed width, so the list's right edge lands on the sheet's. ⚠️ Scoped to `.cgroup` — `.qlist` also sets Manifesto's twelve questions, which are prose at the reading size and must not shrink or split. Only Partners uses `.cgroup`. */ .textpage .cgroup .qlist{max-width:600px;columns:2;column-gap:clamp(1.6rem,4vw,3.4rem); font-size:.98rem;line-height:1.9} /* a column break between a name and its city would read as two entries */ .textpage .cgroup .qlist p{break-inside:avoid} /* ⚠️ AND THE PER-ITEM MARGIN GOES, because `.roster`'s 1.9 line-height already IS the separation. Keeping `.qlist p + p`'s .85em on top of it double-spaced the list — ~43px a row, so ten names occupied more height in two columns than they had in one, which is the opposite of the ask. */ .textpage .cgroup .qlist p + p{margin-top:0} /* ── THE CLICKABLE MONO LINE ───────────────────────────────────────────────────────────────── Shared: Projects' "Project Details" control and Donate's PayPal submit are the same object — a line of mono you can press. Full ink plus a STANDING hairline underline, because a soft grey label with only a hover underline read as a second footnote and nothing said it could be clicked. Grey stays the passive voice everywhere on this site; hover darkens the rule. It carries no button chrome at all, so a