/* Igor Andrić — homepage.
   Confirmed sections only: the scroll film hero and the biography (statement + the sheet).
   Everything still being explored lives under /assets/... and is linked from /explorations.html.

   Two rules from earlier rounds are load-bearing here:
   · the accent is ONE variable (--accent) so the palette can be swapped in a single line;
   · when the sheet locks the page it locks BODY, never HTML — locking html turns body into the scroll
     container and every position:sticky section (the film) comes loose. */

/* ---------------------------------------------------------------- fonts */
@font-face{font-family:'Halyard Display';src:url('../Halyard_Display_Light.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Halyard Display';src:url('../Halyard_Display_Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Halyard Display';src:url('../Halyard_Display_SemiBold.otf') format('opentype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Halyard Display';src:url('../Halyard_Display_Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Halyard Text';src:url('../Halyard_Text_Light.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Halyard Text';src:url('../Halyard_Text_Light_Italic.otf') format('opentype');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'Halyard Text';src:url('../Halyard_Text_Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Halyard Micro';src:url('../Halyard_Micro_Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Halyard Micro';src:url('../Halyard_Micro_Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}

/* ---------------------------------------------------------------- tokens */
:root{
  --bg:#1A1513;
  --ink:#F2EDE6;
  --accent:#C7B9A6;              /* the one accent variable — palette swap happens here */
  --amb:#6C3D1F;                 /* ambient light only: huge, blurred, never a readable shape */
  --mute:rgba(242,237,230,.58);
  --staff:#3A2D26;               /* staff lines, 1px */

  --gut:clamp(20px,4.2vw,60px);
  --nav-h:84px;
  --film-track:420vh;            /* how much scroll the three clips are spread over */

  --u2:33px;                     /* one staff space inside the sheet (recomputed in JS to fit the screen) */
  --sys:90px;                    /* one system of the score */
  --sysgap:48px;                 /* air between two systems */
  --u3:22.5px;                   /* one staff space inside a system */
  --staffShift:0px;              /* pushes text down so its baselines land on the lines (measured in JS) */
  --staffImg:repeating-linear-gradient(to bottom,var(--staff) 0 1px,transparent 1px var(--u2));

  --display:'Halyard Display',Helvetica,Arial,sans-serif;
  --text:'Halyard Text','Halyard Display',Georgia,serif;
  --micro:'Halyard Micro','Halyard Display',Helvetica,Arial,sans-serif;

  /* THE TYPE SYSTEM (Lazar, 26 Sep) — the only font sizes on the site. Never invent a new one and never write
     a font-size in px in a component: use a .text-* class or one of these tokens.
     Fluid from a 375px to a 1440px viewport, in rem so the visitor's own font setting is respected; no max is
     more than 2.5× its min (WCAG 1.4.4). Nothing is lighter than SemiBold, so all type is Halyard Display. */
  --fs-h1:clamp(4.25rem, 2.14rem + 9.01vw, 10.25rem);   /* 68 → 164px */
  --fs-h2:clamp(3rem, 1.59rem + 6.01vw, 7rem);          /* 48 → 112px */
  --fs-h3:clamp(2.5rem, 1.71rem + 3.38vw, 4.75rem);     /* 40 → 76px */
  --fs-h4:clamp(2rem, 1.56rem + 1.88vw, 3.25rem);       /* 32 → 52px */
  --fs-h5:clamp(1.5rem, 1.24rem + 1.13vw, 2.25rem);     /* 24 → 36px */
  --fs-h6:clamp(1.25rem, 1.16rem + 0.38vw, 1.5rem);     /* 20 → 24px */
  --fs-body-l:1.125rem;                                 /* 18px lead / intro */
  --fs-body:1rem;                                       /* 16px standard */
  --fs-body-s:0.875rem;                                 /* 14px caption, label, meta — the floor */

  --lh-h1:1.0;  --ls-h1:-0.04em;
  --lh-h2:1.0;  --ls-h2:-0.03em;
  --lh-h3:1.05; --ls-h3:-0.03em;
  --lh-h4:1.1;  --ls-h4:-0.02em;
  --lh-h5:1.2;  --ls-h5:-0.01em;
  --lh-h6:1.3;  --ls-h6:0;
  --lh-body:1.6;
  --lh-body-s:1.5;

  --fw-semi:600;
  --fw-bold:700;

  /* THE SPACING SYSTEM (Lazar, 27 Sep) — a scale of four. Every margin, gap and padding is one of these;
     never write a spacing in px in a component. The name is the step: --sp-N is N × 4px.
     In rem since 5 Oct (Lazar: "prebaci u rem"): identical at the default 16px, and when a visitor sets a bigger
     font in the browser the air grows with the type. JS that needs a number reads them through cssNum (site.js). */
  --sp-1:.25rem;     /*   4px */
  --sp-2:.5rem;      /*   8px */
  --sp-3:.75rem;     /*  12px */
  --sp-4:1rem;       /*  16px */
  --sp-5:1.25rem;    /*  20px */
  --sp-6:1.5rem;     /*  24px */
  --sp-8:2rem;       /*  32px */
  --sp-10:2.5rem;    /*  40px */
  --sp-12:3rem;      /*  48px */
  --sp-16:4rem;      /*  64px */
  --sp-20:5rem;      /*  80px */
  --sp-24:6rem;      /*  96px */
  --sp-32:8rem;      /* 128px */
  --sp-40:10rem;     /* 160px */
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--display);font-weight:var(--fw-semi);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
body.is-locked{overflow:hidden}          /* NEVER on html — see the note at the top */
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3,p,figure,dl,dd{margin:0}

/* ---------------------------------------------------------------- type: utility classes + heading defaults
   The tag says what the text MEANS, the class says how it LOOKS: <h2 class="text-h4"> is a section heading
   drawn smaller. Weight, case and colour belong to the component; size, leading and tracking belong here. */
h1,.text-h1{font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-h1)}
h2,.text-h2{font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2)}
h3,.text-h3{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3)}
h4,.text-h4{font-size:var(--fs-h4);line-height:var(--lh-h4);letter-spacing:var(--ls-h4)}
h5,.text-h5{font-size:var(--fs-h5);line-height:var(--lh-h5);letter-spacing:var(--ls-h5)}
h6,.text-h6{font-size:var(--fs-h6);line-height:var(--lh-h6);letter-spacing:var(--ls-h6)}
.text-body-l{font-size:var(--fs-body-l);line-height:var(--lh-body);max-width:65ch}
.text-body{font-size:var(--fs-body);line-height:var(--lh-body);max-width:65ch}
.text-body-s{font-size:var(--fs-body-s);line-height:var(--lh-body-s);max-width:65ch}

/* ---------------------------------------------------------------- ambient light + grain */
/* The fixed house light at the top centre was removed on 26 Sep (Lazar). The only ambient light on
   the page now is the pool in the bottom-left corner of the gallery (.gal::before). */
.grain{position:fixed;inset:-40px;z-index:200;pointer-events:none;
  background:url('../grain.svg') 0 0/200px 200px;opacity:.07;mix-blend-mode:overlay}

/* ---------------------------------------------------------------- the roll: letters change on hover
   Every letter sits in its own clipped box with a copy of itself waiting underneath. On hover the
   pair slides up by exactly one letter-height, so the copy lands where the original was — letter by
   letter, left to right. Nothing fades; the word is replaced by itself.

   The label is written twice for a reason. The copy that moves is `aria-hidden`, and the real text
   lives in `.roll-sr`, which is off-screen but readable: a screen reader gets one clean word instead
   of a string of single letters. That is the part worth copying from the references.

   `--roll-pad` is the room above a letter for an accent (Ć, Š) or a tall diacritic. Without it the
   clip would cut the accent off while the letter is standing still, which is the usual way this
   effect goes wrong.

   `--roll-pad-b` is the same below the letter, for lower case (the works in Music): the descender of p, g, y
   hangs under the line box and would be cut. It sits inside the letter's own box, so the letter moves up by
   its height plus that room, and it must be larger than the descender by at least --roll-pad — otherwise the
   tail of the letter that left stays visible in the room above. Capitals need none.
   Measured 1 Oct: at line-height 1.2 Halyard's descender ends inside the line box, so the works need only .1em.
   It was .5em, and that room reached into the line under the title (Lazar: the letters ran over it).

   The copy waits one --roll-pad lower than the letter's own box and the pair travels that much further.
   A tight line-height (the Music categories) leaves the foot of a capital near the bottom of its box, so a
   move of exactly one letter-height parked that foot inside the accent room: a few pixels of the word
   that left stayed visible above the one that arrived. The extra distance takes it out of the window. */
.roll{--roll-d:560ms;--roll-e:cubic-bezier(.22,.9,.24,1);--roll-s:18ms;--roll-pad:.16em;--roll-pad-b:0em}
.roll-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.roll-i{display:inline-block}
.roll-w{display:inline-block;white-space:nowrap}
.roll .ch{display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-top:var(--roll-pad);margin-top:calc(var(--roll-pad) * -1);margin-bottom:calc(var(--roll-pad-b) * -1)}
.roll .ch>i{display:inline-block;position:relative;font-style:inherit;padding-bottom:var(--roll-pad-b);
  transition:transform var(--roll-d) var(--roll-e) calc(var(--i) * var(--roll-s))}
/* the works in Music: the window is the line itself (Lazar, 1 Oct — a letter on its way must not show above
   the title or over the line under it). Measured at 36px on a 43.2px line: Halyard's accents stay inside the
   line, and of the descenders only g reaches past it, by 1.4px, so .04em is the only room the window keeps. */
.mus-t.roll{--roll-pad:0em;--roll-pad-b:.04em}
/* Music categories: the letter's box is drawn in to the capitals (Halyard's caps take .68em of a 1.05em line),
   so the pair travels .92em instead of 1.21em — a shorter, calmer change. The button keeps
   its own line-height, so the list's spacing does not move. .82 is the least that still holds the foot of a
   capital; .1em of room still holds the accent of Ć and Š. */
.mus-cat.roll{--roll-pad:.1em}
.mus-cat.roll .roll-i{line-height:.82}
.roll .ch>i>b{position:absolute;left:0;top:calc(100% + var(--roll-pad));font-weight:inherit;font-style:inherit}
.roll:hover .ch>i,.roll:focus-visible .ch>i{transform:translateY(calc(-100% - var(--roll-pad)))}
/* the movement is the feedback now, so the old dimming would only fight it */
.nav-links a.roll:hover,.ev-tab.roll:hover,.mus-cat.roll:hover{opacity:1}
.mus-row:hover .mus-t.roll{opacity:1}
/* a label inside a bigger target rolls when the target is hovered: a work's whole row, a network's whole link */
.mus-row:hover .roll .ch>i,.mus-row:focus-visible .roll .ch>i,
.cta-links a:hover .roll .ch>i,.cta-links a:focus-visible .roll .ch>i{transform:translateY(calc(-100% - var(--roll-pad)))}

/* ---------------------------------------------------------------- the gallery: one slide left
   Nothing in this section is ever resized. There are three windows with overflow:hidden — the middle
   one exactly the size of the big frame, and one the size of a thumbnail on each side — and three
   rows that slide behind them, each at its own pitch. A picture does not grow into the middle: a
   different row arrives there. The middle row has a gap of zero, so what you see during a change is
   the tail of one picture and the head of the next passing through the same opening.
   Every size below is written by site.js from the height of the stage.
   Since 24 Sep the section is one screen tall and the row moves only on the arrows (Lazar: the visitor
   is not made to scroll through it); each press plays the same slide the scroll used to. */
/* 100svh: the screen without a phone's toolbars, so they never cut the arrows off or resize the frame
   (it is the same as 100vh on a desktop) */
.gal{position:relative;z-index:1;height:100vh;height:100svh}
.g-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;touch-action:pan-y}

/* light spilling in from the bottom left corner (Lazar, 26 Sep, after the oryzo reference): the same
   ambient colour as the house light, a large soft pool, never a readable shape.
   It hangs on the section, not on the stage: the stage clips (overflow:hidden), and that cut the pool off
   in a hard line where the music begins (Lazar, 27 Sep). Here it runs on under the top of the music and
   fades out by itself — the music section has no background of its own. */
.gal::before{content:'';position:absolute;left:-26vw;bottom:-40vh;width:80vw;height:90vh;z-index:0;
  pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(108,61,31,1),rgba(108,61,31,.55) 45%,rgba(108,61,31,0));
  filter:blur(60px)}

/* the arrows sit under the frame, edge to edge with it (arrows.css draws them); a frame narrower than the two of
   them (a phone on its side) never pushes them into each other — they keep --sp-8 apart and outgrow it */
.g-nav{position:absolute;left:50%;top:var(--g-navY,90vh);z-index:6;
  width:calc(var(--g-bigW,440px) + 2 * var(--g-mat,13px));min-width:max-content;gap:var(--sp-8);transform:translateX(-50%);
  display:flex;align-items:center;justify-content:space-between}

.g-win{position:absolute;top:var(--g-axis,50%);overflow:hidden;z-index:2}
.g-win-c{left:50%;width:var(--g-bigW,440px);height:var(--g-bigH,660px);
  transform:translate(-50%,-50%);z-index:3}
/* Both side windows are placed from the centre, in CSS, so they are mirror images whatever the page
   width — computing them from innerWidth counted the scrollbar and pushed the left one ~8px closer.
   --g-wingap runs from the picture's edge: the 13px mat + 16px of air to the frame line. */
.g-win-l,.g-win-r{height:var(--g-smallH,280px);transform:translateY(-50%)}
.g-win-l{left:0;width:calc(50% - var(--g-bigW,440px) / 2 - var(--g-wingap,29px))}
/* "tight" (site.js, a phone on its side): the title stands where the left row would show */
.gal.is-tight .g-win-l{visibility:hidden}
.g-win-r{left:calc(50% + var(--g-bigW,440px) / 2 + var(--g-wingap,29px));right:0}

/* a row is a flat strip; only its transform is touched while scrolling */
.g-row{position:absolute;top:0;display:flex;will-change:transform}
.g-row-c{left:0}
/* the pictures already passed come in from the right edge of the left window … */
.g-row-l{left:calc(100% + var(--g-tgap,16px))}
/* … and the coming ones start one pitch before the left edge of the right window, so the picture
   standing in the middle is never also showing as a thumbnail */
.g-row-r{left:calc(-1 * var(--g-pitch,200px))}

.g-cell{position:relative;flex:0 0 auto;overflow:hidden;margin:0}
.g-row-c .g-cell{width:var(--g-bigW,440px);height:var(--g-bigH,660px)}   /* gap 0: they butt together */
.g-row-l .g-cell,.g-row-r .g-cell{width:var(--g-smallW,185px);height:var(--g-smallH,280px);
  margin-right:var(--g-tgap,16px)}
.g-cell img{width:100%;height:100%;object-fit:cover;object-position:50% var(--g-op,45%);
  filter:saturate(.92) contrast(1.03)}
/* every picture is veiled in the page colour: the thumbnails heavily, the one in the frame barely */
.g-cell::after{content:'';position:absolute;inset:0;background:var(--bg);opacity:var(--g-veil,.1);pointer-events:none}
.g-row-l .g-cell::after,.g-row-r .g-cell::after{opacity:var(--g-veilSide,.5)}
/* the picture sits a little larger than its frame so it can drift inside it while the row slides */
.g-row-c .g-cell img{transform:scale(var(--g-zoom,1.14)) translateX(var(--par,0px))}

/* the frame belongs to the middle slot, so it is drawn once and never moves */
.g-mat{position:absolute;left:50%;top:var(--g-axis,50%);z-index:4;pointer-events:none;
  width:calc(var(--g-bigW,440px) + 2 * var(--g-mat,13px));height:calc(var(--g-bigH,660px) + 2 * var(--g-mat,13px));
  transform:translate(-50%,-50%);border:1px solid rgba(242,237,230,.26)}

/* the title and the aside stand on the thumbnails with one step of air (--sp-8) between: their bottom is
   measured from the top of the thumbnails, so a title that wraps grows upward and never touches them.
   Stacked (tablets upright, phones) they stand --sp-4 over the frame line instead, flush with the picture.
   site.js sets --g-base (the line their foot stands on) and --g-textX (how far in from the screen's edges). */
.g-title{position:absolute;left:var(--g-textX,var(--gut));top:var(--g-base,288px);z-index:5;
  width:var(--g-textW,420px);transform:translateY(-100%);
  font-weight:var(--fw-bold);text-transform:uppercase;
  color:var(--ink)}
.g-aside{position:absolute;right:var(--g-textX,var(--gut));top:var(--g-base,288px);z-index:5;
  width:var(--g-textW,420px);transform:translateY(-100%);text-align:right}

@media (hover:hover) and (pointer:fine){
  html.has-cur,html.has-cur *{cursor:none !important}
}
/* The cursor is the site's dot. It opens into a ring over anything clickable, and the biography is one of those:
   the whole section is a button, and the ring is the site's one sign for "this can be clicked".
   (1 Oct, Lazar: Igor is a composer, not a conductor — the baton that drew itself out of the dot over the biography,
   and the hold that lifted it for the upbeat, are gone. A click opens the sheet.)
   The element sits exactly on the pointer and the dot is centred on it. */
.cur{position:fixed;left:0;top:0;z-index:300;pointer-events:none;opacity:0;
  transition:opacity .25s ease;will-change:transform}
.cur.is-on{opacity:1}
.cur .cdot{position:absolute;left:0;top:0;width:9px;height:9px;border-radius:50%;
  transform:translate(-50%,-50%);background:var(--ink);box-shadow:0 0 0 1px rgba(12,9,8,.18);
  transition:width .3s cubic-bezier(.2,.8,.2,1),height .3s cubic-bezier(.2,.8,.2,1),
    background-color .3s ease,border-color .3s ease,opacity .2s ease;border:1px solid transparent}
.cur.is-link .cdot{width:34px;height:34px;background:rgba(242,237,230,.1);border-color:rgba(242,237,230,.7);
  box-shadow:none}
.cur.is-down .cdot{width:6px;height:6px}
body.no-cur .cur{display:none}

/* The words beside the cursor (27 Sep: no box — the dark rounded one read like a system tooltip; just the words).
   Bare words in the page's small caps, which invert against whatever is behind them (difference), so they stay
   readable over the huge white letters of the statement and over the dark page alike. They follow the pointer on
   their own layer and stand LEFT of it, centred on it: --sp-5 from the dot, and clear of the ring by --sp-3
   (half the 34px ring + --sp-3) when the dot has opened into one. */
.cur-lbl{position:fixed;left:0;top:0;z-index:301;pointer-events:none;mix-blend-mode:difference;
  font-size:var(--fs-body-s);line-height:var(--lh-body-s);
  color:var(--ink);opacity:0;transition:opacity .3s ease;will-change:transform}
.cur-lbl>*{position:absolute;right:var(--sp-5);transition:right .3s cubic-bezier(.2,.8,.2,1)}
.cur-lbl.is-ring>*{right:calc(34px / 2 + var(--sp-3))}
.cur-lbl.has-label{opacity:1}
body.no-cur .cur-lbl{display:none}
.cur-t{top:-.75em;font-weight:var(--fw-semi);letter-spacing:.15em;text-transform:uppercase;white-space:nowrap}

/* How the biography says it opens — ?k= on the URL until Lazar picks one (site.js):
   a · Prsten  the ring, and the words beside it (the default, all rules above)
   b · Natpis  the words ARE the cursor: over the biography the dot gives way to them, centred on the pointer
   c · Poziv   the words stand under the statement on every device (.bio-cue below); the cursor is just the ring */
.cur.is-words .cdot{opacity:0;width:4px;height:4px}
.cur-lbl.is-words>*{right:auto;left:0;transform:translateX(-50%);transition:none}

/* ---------------------------------------------------------------- nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:120;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;padding:0 var(--gut)}
.nav::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(26,21,19,.72),rgba(26,21,19,0));
  opacity:var(--navbg,0);transition:opacity .4s ease}
.mark-dot{width:13px;height:13px;border-radius:50%;background:var(--ink);flex:0 0 auto}
.nav-links{display:flex;gap:clamp(18px,2vw,28px)}
.nav-links a{font-weight:var(--fw-bold);letter-spacing:.01em;text-transform:uppercase;
  color:var(--ink);opacity:.92;transition:opacity .25s ease}
.nav-links a:hover{opacity:.6}
/* the section on screen (6 Oct, Lazar): a dotted line under its link. Drawn, not text-decoration — the roll splits
   the label into inline-blocks, and a decoration does not reach into those. Round dots, 2px, on a 6px pitch. */
.nav-links a{position:relative}
.nav-links a::after{content:'';position:absolute;left:0;right:0;bottom:-.45em;height:2px;pointer-events:none;
  background:radial-gradient(circle,currentColor 0 1px,transparent 1.2px) 0 0/6px 2px repeat-x;
  opacity:0;transition:opacity .35s ease}
.nav-links a[aria-current]::after{opacity:1}

/* ---------------------------------------------------------------- hero */
.hero{position:relative;height:var(--film-track);z-index:1}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:#0B0907}
.stage video,.stage .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage video{z-index:0;opacity:0}
.stage .poster{z-index:1}
.shade{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,9,7,.62) 0%,rgba(11,9,7,0) 22%,rgba(11,9,7,0) 42%,rgba(11,9,7,.5) 76%,rgba(11,9,7,.88) 100%)}

.hero-type{position:absolute;left:var(--gut);right:var(--gut);bottom:var(--gut);z-index:3;
  opacity:var(--typeIn,1)}
.hero-name{font-weight:var(--fw-bold);text-transform:uppercase;
  color:var(--ink);white-space:nowrap;margin:0 0 26px;text-shadow:0 2px 40px rgba(0,0,0,.45)}
.hero-facts{display:flex;flex-wrap:wrap;gap:16px clamp(40px,10.4vw,150px)}
.fact{font-weight:var(--fw-bold);letter-spacing:.012em;text-transform:uppercase;color:var(--ink);
  text-shadow:0 1px 18px rgba(0,0,0,.55)}
.fact .colon{animation:tick 1s steps(1,end) infinite}
@keyframes tick{50%{opacity:.25}}

/* ---------------------------------------------------------------- biography statement
   Every row is a staff: five 1px lines, and the staff is exactly as tall as the capitals.
   The size is fluid all the way down (5 Oct, responsive pass) — rem and the width of the section (cqi, so a
   desktop scrollbar is not counted), no px, no breakpoint, so it never jumps while the window is dragged:
   · five rows — a block 12.5 × the type wide (the narrowest that still gives five rows is 12.24 ×), never above
     H2. This is the desktop: 112px at 1440, 79px at 1024, exactly as before.
   · the phone — the largest size at which every row is still a whole phrase: nine rows, the widest
     ("LONGER TO TELL.", held together by ~ in content.js) 7.40 × the type. 47.7px at 385, and the nine rows
     hold at any width below 440, so they also hold under 385.
   · between 440 and 1024 the type grows on a straight line from the phone's size to the desktop's
     (55px → 79px) and the rows go from nine to five by themselves.
   Whichever is larger wins, so the three meet without a step. --stmt-k (fitStatement) only shrinks it when the
   window is too short. A staff is drawn behind every row the text breaks into (buildStaves, site.js). */
/* its own, tighter gutter: 20px leaves exactly 1400px at 1440, the width full H2 (112px) needs */
.bio{position:relative;z-index:1;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;
  padding:calc(var(--nav-h) + 12px) clamp(1rem,1.4vw,1.25rem) 40px;overflow:hidden;
  container-type:inline-size;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
  --stmt-five:min(var(--fs-h2), 100cqi / 12.5);
  --stmt-phone:min(100cqi / 7.4, 2.3881rem + 4.1481cqi);
  --stmt:calc(max(var(--stmt-five), var(--stmt-phone)) * var(--stmt-k,1));
  --stmt-w:calc(var(--stmt) * 12.5)}
.bio>div{width:min(100%,var(--stmt-w))}

/* One text block that wraps by itself inside --stmt-w, with one staff drawn behind each line it wraps to.
   The staves are built in JS from the real line boxes, so the text stays a single block. */
.stmt-box{position:relative}
.statement{position:relative;z-index:1;margin:0;width:100%;text-align:center;
  font-family:var(--display);font-weight:var(--fw-semi);font-size:var(--stmt);text-transform:uppercase;color:var(--ink)}
.staves{position:absolute;inset:0;z-index:0;pointer-events:none}
/* the five rules sit on whole pixels, one staff space (--stf-s, a whole number set in site.js) apart, so every
   line is equally sharp; the staff is four spaces plus the last rule */
.stf{position:absolute;left:0;right:0;height:calc(var(--stf-s,19px) * 4 + 1px)}
.stf::before{content:'';position:absolute;left:0;top:0;width:3px;height:100%;background:var(--staff)}
.stf i{position:absolute;left:0;right:0;height:1px;background:var(--staff)}
.stf i:nth-child(1){top:0}
.stf i:nth-child(2){top:var(--stf-s,19px)}
.stf i:nth-child(3){top:calc(var(--stf-s,19px) * 2)}
.stf i:nth-child(4){top:calc(var(--stf-s,19px) * 3)}
.stf i:nth-child(5){top:calc(var(--stf-s,19px) * 4)}
/* The invitation under the statement: a short rule and the words. On a touch screen there is no cursor to say the
   section opens, so it always shows there (body.no-cur, and every narrow screen); on a desktop only in k=c, where
   it brightens while the pointer is anywhere over the section. */
/* auto sides: .text-body-s caps the line at 65ch, so on a wide screen the box would sit left of the statement's axis */
.bio-cue{display:none;margin:5vh auto 0;text-align:center;
  font-weight:var(--fw-semi);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);
  transition:color .3s ease}
.bio-cue b{display:block;width:44px;height:1px;background:var(--staff);margin:0 auto 14px;transition:background-color .3s ease}
body.no-cur .bio-cue,html[data-k="c"] .bio-cue{display:block}
html[data-k="c"] .bio:hover .bio-cue{color:var(--ink)}
html[data-k="c"] .bio:hover .bio-cue b{background:var(--mute)}
.bio:focus{outline:none}
.bio:focus-visible{outline:1px solid var(--mute);outline-offset:-10px}

/* ---------------------------------------------------------------- the sheet: a score read left to right */
/* it rises quickly and settles; it goes back down softly — eases off the top, eases into the bottom (Lazar, 1 Oct:
   the old fall started too sharp). 1s on the in-out curve the page's glide uses in site.js, so the two move as one */
.sheet{position:fixed;inset:0;z-index:180;background:var(--bg);
  transform:translate3d(0,100%,0);visibility:hidden;
  transition:transform 1s cubic-bezier(.65,0,.35,1),visibility 0s linear 1s}
.sheet.is-open{transform:none;visibility:visible;transition:transform .95s cubic-bezier(.16,1,.3,1),visibility 0s}
.sheet-amb{position:absolute;inset:-25vh -20vw;z-index:0;pointer-events:none;
  background:radial-gradient(40vw 32vw at 50% 18%, rgba(108,61,31,.42), rgba(108,61,31,0) 70%);
  filter:blur(70px)}
.sheet-bar{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;
  gap:clamp(20px,3vw,48px);height:var(--nav-h);padding:0 var(--gut);
  background:linear-gradient(180deg,var(--bg) 58%,rgba(26,21,19,0))}
.sheet-bar .nav-links{flex:1;justify-content:center}
.sheet-prog{position:absolute;top:0;left:0;right:0;z-index:6;height:2px;background:rgba(242,237,230,.08)}
.sheet-prog i{display:block;height:100%;width:var(--p,0%);background:var(--ink);opacity:.55}
/* close: an X (Lazar, 29 Sep) — two 1px strokes, drawn like the arrows and the player's close; 44px to hit */
.sheet-close{position:relative;width:44px;height:44px;margin-right:-11px;color:var(--mute);
  background:none;border:0;padding:0;transition:color .25s ease}
.sheet-close i,.sheet-close i::before{position:absolute;left:50%;top:50%;width:22px;height:1px;margin-left:-11px;
  background:currentColor;transform:rotate(45deg)}
.sheet-close i::before{content:'';left:0;top:0;margin:0;transform:rotate(90deg)}
.sheet-close:hover{color:var(--ink)}
.sheet-close:focus{outline:none}
.sheet-close:focus-visible{outline:1px solid var(--mute);outline-offset:6px}
@media (hover:hover) and (pointer:fine){.sheet-close{cursor:none}}

.sheet-scroll{position:absolute;inset:0;z-index:1;overflow-x:auto;overflow-y:hidden;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.sheet-scroll::-webkit-scrollbar{height:0}

/* Five staff systems run the whole length of the biography; the chapters are written along them.
   One system: 90px tall, five 1px rules spread space-between, a 3px barline at the very start. */
.score{position:relative;height:100%;width:max-content;display:flex;align-items:stretch}
.sheet-staves{position:absolute;left:0;top:var(--scoreTop,150px);width:100%;
  height:calc(5 * var(--sys) + 4 * var(--sysgap));pointer-events:none;z-index:0}
.sys5{position:absolute;left:0;right:0;height:var(--sys)}
.sys5 i{position:absolute;left:0;right:0;height:1px;background:var(--staff)}
.sys5 i:nth-child(1){top:0}
.sys5 i:nth-child(2){top:25%}
.sys5 i:nth-child(3){top:50%}
.sys5 i:nth-child(4){top:75%}
.sys5 i:nth-child(5){bottom:0}
.sys5::before{content:'';position:absolute;left:0;top:0;width:3px;height:100%;background:var(--staff)}

.pan{position:relative;flex:0 0 auto;width:var(--w);height:100%;z-index:1}
.pc{position:absolute;left:var(--x);top:var(--t);width:var(--w2,auto)}

/* THE TYPE SCALE — the site tokens H2 / H3 / H6 / body-s. Line-height stays 100% here: the sheet is set on
   staff systems and every block is measured against them, so the leading is part of the staff geometry.
   132px  the name and the years   ·   80px  the word marks
    28px  the opening of a sentence ·  14px  its continuation, the labels and the lists */
.p-name,.p-mark{position:absolute;left:var(--x);top:var(--t)}
.p-name>span,.p-mark>span{position:absolute;left:0;bottom:calc(-1em * var(--descR,.21));
  font-family:var(--display);font-weight:var(--fw-semi);font-size:var(--fs);line-height:100%;
  letter-spacing:-.035em;text-transform:uppercase;color:var(--ink);white-space:nowrap}

.p-lead,.p-big{font-family:var(--display);font-weight:var(--fw-semi);font-size:var(--fs-h6);line-height:100%;
  letter-spacing:.005em;text-transform:uppercase;color:var(--ink)}
.p-stmt{white-space:nowrap;font-family:var(--display);font-weight:var(--fw-semi);font-size:var(--fs-h3);line-height:100%;
  letter-spacing:-.02em;text-transform:uppercase;color:var(--ink)}
.p-small{font-family:var(--display);font-weight:var(--fw-semi);font-size:var(--fs-body-s);line-height:100%;
  letter-spacing:.03em;text-transform:uppercase;color:rgba(242,237,230,.66)}
.p-big i,.p-small i,.p-stmt i,.p-lead i{font-style:normal}
.p-big b,.p-small b{font-weight:inherit;color:var(--ink)}

/* the label: the mark and its place, set like a bar number under the system */
.p-num{display:flex;gap:12px;font:var(--fw-semi) var(--fs-body-s)/100% var(--display);letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap}
.p-num span:first-child{color:var(--ink)}
.p-num span:last-child{color:var(--mute)}

/* five names, one per line of a system */
.p-list{list-style:none;margin:0;padding:0}
.p-list li{position:absolute;left:0;height:var(--u3);white-space:nowrap}
.p-list li span{position:absolute;left:0;bottom:calc(-1em * var(--descR,.21));
  font:var(--fw-semi) var(--fs-body-s)/100% var(--display);letter-spacing:.03em;text-transform:uppercase;
  color:rgba(242,237,230,.86)}
.p-list li span b{font-weight:var(--fw-semi);color:var(--ink)}

/* the place beside a mark, on the mark's own baseline (Takt sheet) */
.p-place{margin-left:28px;font:var(--fw-semi) var(--fs-body-s)/100% var(--display);font-style:normal;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);vertical-align:baseline}

/* a melody: one phrase per line, each line standing on a rule (placed in JS) */
.p-ln{white-space:nowrap;width:auto}
.p-item{font:var(--fw-semi) var(--fs-body-s)/100% var(--display);letter-spacing:.03em;text-transform:uppercase;color:rgba(242,237,230,.86)}
.p-item b{font-weight:var(--fw-semi);color:var(--ink)}
.p-item i{font-style:normal}

.p-fig{margin:0}
.p-fig img{width:100%;height:var(--fh);object-fit:cover;filter:saturate(.86) contrast(1.02)}
.p-fig figcaption{margin-top:9px;font:var(--fw-semi) var(--fs-body-s)/100% var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}

.p-seal img{width:260px;filter:invert(1) brightness(1.15);opacity:.8;mix-blend-mode:screen;margin-bottom:12px}
.p-seal dl{display:flex;gap:0 44px;margin:0;font:var(--fw-semi) var(--fs-body-s)/100% var(--display);
  letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.p-seal dt{color:rgba(242,237,230,.35)}
.p-seal dd{margin:0}
.p-end{font:var(--fw-semi) var(--fs-h3)/100% var(--display);letter-spacing:.02em;text-transform:uppercase;
  color:rgba(242,237,230,.16);white-space:nowrap}

/* ---------------------------------------------------------------- narrow screens */
@media (max-width:760px){
  :root{--nav-h:64px}
  /* five links do not fit beside the dot on a phone: from 6 Oct the bar and the sheet's bar hide them and the
     phone gets its own menu (menu.css) — the sideways strip that stood in for it is gone */
  .hero-name{white-space:normal}         /* 68px does not hold IGOR ANDRIĆ on one line of a phone */
  .hero-facts{gap:12px 26px}
  .bio-cue{display:block}
  .chap{padding-left:28px;padding-right:28px}
}

@media (prefers-reduced-motion:reduce){
  .sheet{transition-duration:.01ms}
}