@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/iserif-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/iserif-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/iserif-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/iserif-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/isans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/isans-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* dusan.icu — Dušan Ristić. v3 "THE MEETING LINE".
   The centered axis is the seam between two sides — his subject, made structure.
   CINEMA rooms (near-black, full-bleed) alternate with CATALOGUE rooms (warm paper).
   Instrument Serif = crown + italic artwork titles; Instrument Sans = the functional voice. */



:root{
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;
  /* CATALOGUE (paper) — default room */
  --bg:#F2EEE6; --ink:#1A1613; --muted:#6E675D; --hairline:#E2DDD2; --accent:#8A3033;
  --cream:#EDE7DC; --footer:#141210;
  --col-text:640px; --col-art:880px; --col-wide:1120px; --pad:clamp(20px,5vw,56px);
  --s2:12px; --s3:16px; --s4:24px; --s5:40px; --s6:clamp(48px,6vw,72px); --s7:clamp(64px,8vw,104px);
}
/* CINEMA room — near-black; brighter oxblood for dark contrast */
[data-room="cinema"]{ --bg:#141210; --ink:#EDE7DC; --muted:#8C8579; --hairline:#2A2621; --accent:#C6534F; }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:#141210; color:var(--ink); font-family:var(--sans); font-weight:400; font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
img{max-width:100%; height:auto; display:block; margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
section{background:var(--bg); color:var(--ink)}

/* widths */
.wrap{max-width:var(--col-wide); margin:0 auto; padding:0 var(--pad)}
.col-text{max-width:var(--col-text); margin-inline:auto}

/* ── the seam — the signature mark ── */
.seam{width:1px; height:48px; background:var(--accent); opacity:.55; margin:0 auto var(--s4)}

/* ── type ── */
h1,h2{margin:0}
.h-mono{font-family:var(--serif); font-weight:400; font-size:clamp(4rem,17vw,12rem); letter-spacing:-.03em; line-height:.9}
.h-hero{font-family:var(--serif); font-weight:400; font-size:clamp(3.5rem,11vw,8rem); letter-spacing:-.02em; line-height:.98}
.h-page{font-family:var(--serif); font-weight:400; font-size:clamp(2.75rem,7vw,5rem); letter-spacing:-.015em; line-height:1}
h2{font-family:var(--sans); font-weight:600; font-size:clamp(1.25rem,2vw,1.6rem); letter-spacing:-.01em; line-height:1.15}
.eyebrow{font-family:var(--sans); font-size:.75rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0}
.lead{font-family:var(--sans); font-size:clamp(1.0625rem,1.4vw,1.25rem); font-weight:400; line-height:1.5}
.dek{font-family:var(--sans); font-size:clamp(1.0625rem,1.4vw,1.25rem); color:var(--muted); line-height:1.5}
p{margin:0 0 1em}
.prose{max-width:var(--col-text); margin-inline:auto; text-align:left}
.prose p{margin:0 0 16px} .prose p:last-child{margin-bottom:0}
em,.ital{font-style:italic}

/* centering law + optical polish */
.center,h1,h2,.eyebrow,figure,.cat,.pagenav,.foot .in{text-align:center}
.h-mono,.h-hero,.h-page,.dek,.lead,.pull p{text-wrap:balance}
.prose p{text-wrap:pretty}
figure{margin:0}

/* links */
a.link{color:var(--accent); text-decoration:none; border-bottom:1px solid var(--accent); padding-bottom:1px; transition:color .15s,border-color .15s}
a.link:hover{color:var(--ink); border-color:var(--ink)}

/* ── header: solid on interior; transparent-white over the home hero ── */
.site-head{position:relative; z-index:5; background:var(--bg); padding:32px var(--pad) 26px; text-align:center; border-bottom:1px solid var(--hairline)}
.site-head .mark{display:inline-block; font-family:var(--serif); font-weight:400; font-size:clamp(2.25rem,5vw,3.5rem); letter-spacing:-.015em; line-height:1; text-decoration:none; color:var(--ink); margin-bottom:18px}
.nav{display:flex; justify-content:center; flex-wrap:wrap; gap:12px 32px; margin:0; list-style:none; padding:0}
.nav a{font-family:var(--sans); font-size:.9375rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); text-decoration:none; padding-bottom:5px; border-bottom:1px solid transparent; transition:color .15s}
.nav a:hover{color:var(--ink)} .nav a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--accent)}
.site-head.over-hero{position:absolute; left:0; right:0; top:0; background:transparent; border-bottom:0}
.site-head.over-hero .mark{color:var(--cream)}
.site-head.over-hero .nav a{color:rgba(237,231,220,.85)} .site-head.over-hero .nav a:hover{color:#fff}

/* ── sections / rhythm ── */
main{background:var(--footer)}
.section{padding:var(--s7) 0}
.phead{padding-top:clamp(48px,6vw,80px)}
.phead .dek{margin-top:var(--s3)}

/* ── hero (full-bleed cinema, head-cropped) ── */
.hero{position:relative; width:100%; height:100vh; min-height:560px; overflow:hidden; background:#141210}
.hero>img,.hero picture img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 66%}
.hero .scrim{position:absolute; inset:0; background:linear-gradient(to top,rgba(10,8,6,.68) 0%,rgba(10,8,6,.28) 38%,rgba(10,8,6,.12) 62%,rgba(10,8,6,.30) 100%)}
.hero .cap{position:absolute; left:0; right:0; bottom:clamp(56px,11vh,120px); padding:0 var(--pad); text-align:center; color:var(--cream)}
.hero .eyebrow{color:rgba(237,231,220,.85); margin-bottom:var(--s3)}
.hero .h-hero{color:var(--cream); margin-bottom:var(--s3)}
.hero .dek{color:rgba(237,231,220,.9); margin-bottom:var(--s4)}
.hero .acts a{font-family:var(--sans); color:var(--cream); font-size:.9375rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; border-bottom:1px solid rgba(237,231,220,.8); padding-bottom:5px}
.hero .acts a:hover{border-bottom-color:var(--cream)}

/* ── showcase: a whole artwork, uncropped, large on the room (never cover-cropped) ── */
.show{margin:0 auto; padding:0 var(--pad); text-align:center}
.show img{width:auto; max-width:min(1400px,92vw); max-height:86vh; margin:0 auto}
.show figcaption{margin-top:var(--s4)}

/* ── full-bleed monumental art (PHOTOS only — cover-crop is intended here) ── */
.bleed{position:relative; width:100%; margin:0}
.bleed img{width:100%; height:clamp(70vh,80vh,900px); object-fit:cover; display:block}

/* ── full-bleed diptych — two photos across the whole page, meeting at the line ── */
.bleed-dip{position:relative; display:grid; grid-template-columns:1fr 1fr; width:100%; gap:0; margin:0}
.bleed-dip img{width:100%; height:clamp(64vh,80vh,900px); object-fit:cover; object-position:50% 34%; display:block}
.bleed-dip .seamline{position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--cream); opacity:.5; transform:translateX(-.5px); z-index:2}
@media(max-width:680px){ .bleed-dip{grid-template-columns:1fr} .bleed-dip .seamline{left:0; right:0; top:50%; bottom:auto; width:auto; height:1px; transform:translateY(-.5px)} .bleed-dip img{height:clamp(44vh,52vh,560px)} }

/* ── full-bleed WHOLE — a photo/composite shown across the page at natural aspect, nothing cropped ── */
.bleed-full{width:100%; margin:0}
.bleed-full img{width:100%; height:auto; display:block}
/* a diptych that shows both images WHOLE (not cover-cropped) — the two portraits at natural aspect */
.bleed-dip.whole img{height:auto; object-fit:unset}

/* ── captioned 3-across row (Hope · Life · Light) — like the self-portrait diptych, but three, captions kept ── */
.artrow{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s2); max-width:var(--col-wide); margin:0 auto; align-items:start}
.artrow figure{margin:0}
.artrow img{width:100%; height:auto; display:block}
.artrow .cat{margin-top:var(--s3)}
@media(max-width:680px){ .artrow{grid-template-columns:1fr; gap:var(--s5)} }
.bleed figcaption{position:absolute; left:0; right:0; bottom:clamp(28px,5vh,56px); padding:0 var(--pad); text-align:center; color:var(--cream)}
.bleed .cat-title{color:var(--cream)} .bleed .cat-meta{color:rgba(237,231,220,.82)} .bleed .cat-idx{color:rgba(237,231,220,.7)}

/* ── framed art (catalogue) ── */
.art{margin:0 auto; max-width:var(--col-art)}
.art img{width:auto; max-width:100%; max-height:84vh; margin-inline:auto; transition:filter .2s}
.art figcaption{margin-top:var(--s4)}
.stack .art + .art{margin-top:var(--s6)}
.art a:hover img{filter:saturate(1.06)}

/* ── museum catalogue caption (hung on the line) ── */
.cat{display:grid; gap:6px; justify-items:center}
.cat-idx{font:500 .75rem/1.4 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.cat-idx::before{content:""; display:block; width:1px; height:16px; background:var(--accent); margin:0 auto 8px; opacity:.6; transform-origin:top; transition:transform .2s}
.cat-title{font:italic 400 clamp(1.5rem,3vw,2.25rem)/1.1 var(--serif)}
.cat-meta{font:400 .8125rem/1.5 var(--sans); letter-spacing:.01em; color:var(--muted); transition:color .15s}
.art a:hover + .cat .cat-title,.trio a:hover + .cat .cat-meta{color:var(--ink)}

/* ── diptych: two works meeting at the line ── */
.diptych{display:grid; grid-template-columns:1fr 1px 1fr; gap:0; max-width:var(--col-art); margin:0 auto; align-items:center}
.diptych .seamline{width:1px; align-self:stretch; background:var(--accent); opacity:.4}
.diptych img{width:100%}
.diptych.bleedwide{max-width:none}

/* ── three-up catalogue strip ── */
.trio{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5) var(--s4); max-width:var(--col-wide); margin:var(--s5) auto 0}
.trio a{text-decoration:none; display:block}
.trio img{width:auto; max-width:100%; max-height:300px; margin-inline:auto; object-fit:contain; transition:filter .2s}
.trio a{display:flex; align-items:flex-end; justify-content:center; min-height:220px}
.trio a:hover img{filter:saturate(1.06)}

/* archival document — small, tender, in a field of paper */
.doc{max-width:clamp(340px,42vw,520px); margin-inline:auto}
.doc.wide{max-width:var(--col-art)}

/* manifesto pull-quote — serif italic */
.pull{max-width:var(--col-text); margin:0 auto; padding:var(--s6) 0; text-align:center}
.pull p{font-family:var(--serif); font-style:italic; font-size:clamp(1.75rem,3.6vw,2.75rem); line-height:1.2; margin:0}

.credits{max-width:var(--col-text); margin-inline:auto; font-size:.9375rem; color:var(--muted); line-height:1.7}
.credits b{color:var(--ink); font-weight:500}

/* current-project / invitation */
.invite,.join{max-width:var(--col-text); margin:0 auto; text-align:center}
.invite h2,.join h2{margin:var(--s3) 0}
.invite p,.join p{color:var(--muted); margin-bottom:var(--s3)}
.invite .h-page,.join .h-page{margin:var(--s3) 0}

/* video facade */
.vid{position:relative; max-width:var(--col-art); margin-inline:auto}
.vid-link{display:block; position:relative}
.vid-play{position:absolute; inset:0; margin:auto; width:80px; height:80px; border-radius:50%; background:rgba(10,8,6,.55); display:flex; align-items:center; justify-content:center; transition:background .2s,transform .2s}
.vid-link:hover .vid-play{background:var(--accent); transform:scale(1.06)}
.vid-tri{width:0; height:0; margin-left:5px; border-style:solid; border-width:14px 0 14px 24px; border-color:transparent transparent transparent var(--cream)}
.vid-frame{position:relative; padding-top:56.25%; margin-inline:auto}
.vid-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* next-room link */
.pagenav{max-width:var(--col-art); margin:var(--s7) auto 0; padding-top:var(--s5); border-top:1px solid var(--hairline)}
.pagenav a{font-family:var(--sans); font-size:.9375rem; font-weight:500; letter-spacing:.02em; color:var(--ink); text-decoration:none}
.pagenav a:hover{color:var(--accent)}
.pagenav .k{display:block; font-size:.75rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}

/* footer (cinema) */
.foot{background:var(--footer); color:var(--cream)}
.foot .in{max-width:var(--col-wide); margin:0 auto; padding:clamp(56px,7vw,88px) var(--pad); text-align:center}
.foot .mark{font-family:var(--serif); font-size:clamp(2rem,4vw,3rem); color:var(--cream)}
.foot .meta{margin-top:var(--s3); font-size:.8125rem; color:rgba(237,231,220,.66)}
.foot a{color:inherit; text-decoration:none; border-bottom:1px solid rgba(237,231,220,.34)}
.foot a:hover{border-bottom-color:var(--cream)}
.foot .footnav{margin:var(--s4) 0 0; font:500 .8125rem/1.8 var(--sans); letter-spacing:.08em; text-transform:uppercase}
.foot .footnav a{border-bottom:0; color:rgba(237,231,220,.72)} .foot .footnav a:hover{color:var(--cream)}
.foot .footnav a[aria-current="page"]{color:var(--cream)}
.foot .footnav .dot{margin:0 12px; color:rgba(237,231,220,.28)}

/* About era divider — small centered chapter mark with a seam */
h2.era{font-family:var(--sans); font-size:.8125rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); margin:var(--s6) 0 var(--s4); line-height:1.5}
/* in-text content sub-header (serif, centered) — preserves the artist's own section titles */
.subhead{font-family:var(--serif); font-weight:400; font-size:clamp(1.5rem,2.6vw,2rem); text-align:center; color:var(--ink); margin:var(--s5) 0 var(--s3); line-height:1.12}
.prose .subhead:first-child{margin-top:0}

/* chapter counter (JS-only, desktop) */
.counter{position:fixed; right:22px; bottom:20px; z-index:20; font:500 .75rem/1 var(--sans); letter-spacing:.14em; color:var(--muted); opacity:0; transition:opacity .4s; pointer-events:none; mix-blend-mode:difference}
html.js .counter.show{opacity:.8}
@media(max-width:900px){.counter{display:none}}

/* ── motion (js-gated; reduced-motion fully disables) ── */
@media(prefers-reduced-motion:no-preference){
  html.js .reveal{opacity:0; transform:translateY(14px); transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
  html.js .reveal.in{opacity:1; transform:none}
  html.js .gl{transform:translateX(-12px)} html.js .gr{transform:translateX(12px)}
  html.js .reveal.in.gl,html.js .reveal.in.gr{transform:none}
  /* the Arrival */
  @keyframes settle{from{opacity:0; transform:scale(1.06)} to{opacity:1; transform:none}}
  @keyframes wipe{from{clip-path:inset(0 50% 0 50%)} to{clip-path:inset(0 0 0 0)}}
  @keyframes rise{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
  html.js .arrival .hero picture{animation:settle 2s cubic-bezier(.16,1,.3,1) .2s both}
  html.js .arrival .hero .h-hero{clip-path:inset(0 50% 0 50%); animation:wipe .9s cubic-bezier(.2,.8,.2,1) 1s forwards}
  html.js .arrival .hero .eyebrow{opacity:0; animation:rise .7s ease-out .8s forwards}
  html.js .arrival .hero .dek{opacity:0; animation:rise .7s ease-out 1.3s forwards}
  html.js .arrival .hero .acts{opacity:0; animation:rise .7s ease-out 1.55s forwards}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* skip link */
.skip{position:absolute; left:-999px}
.skip:focus{left:8px; top:8px; z-index:30; background:var(--footer); color:var(--cream); padding:8px 12px; font-size:.8125rem}

/* ── mobile ── */
@media(max-width:680px){
  .site-head{padding:24px var(--pad) 18px} .site-head .mark{margin-bottom:14px}
  .trio{grid-template-columns:1fr; gap:var(--s5); max-width:var(--col-text)}
  .trio img{aspect-ratio:auto; max-height:70vh; width:auto; margin-inline:auto}
  .diptych{grid-template-columns:1fr; gap:var(--s3)} .diptych .seamline{width:auto; height:1px}
  .doc,.doc.wide{max-width:100%}
  .bleed img{height:clamp(56vh,66vh,760px)}
}