/* fraunces italic latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/fraunces-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;
}
/* fraunces italic latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/fraunces-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;
}
/* fraunces normal latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/fraunces-normal-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;
}
/* fraunces normal latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/fraunces-normal-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;
}
/* plexmono normal latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/plexmono-normal-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;
}
/* plexmono normal latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/plexmono-normal-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ć. Design: "a quiet gallery wall; one storm behind the door."
   The art is the star; the chrome stays out of its way. One warm light theme, no toggle. */

/* ── fonts (self-hosted, subset latin + latin-ext; Š/š/Ć/ć verified present) ── */


:root {
  --wall:#F3EFE7; --wall-deep:#EAE4D6; --ink:#1C1917; --ink-soft:#6B6459;
  --line:#D8D1C2; --oxblood:#7A2E2A; --oxblood-hot:#A63A32; --night:#191512; --cream:#F3EFE7;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --col:1080px; --pad:clamp(20px,5vw,64px); --gap:clamp(64px,12vh,160px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--wall); color:var(--ink);
  font-family:var(--serif); font-optical-sizing:auto; font-weight:400;
  font-size:18px; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}

/* ── layout ── */
.wrap{max-width:var(--col); margin:0 auto; padding:0 var(--pad)}
.prose{max-width:65ch}
section{margin-top:var(--gap)}
hr.rule{border:0; border-top:1px solid var(--line); margin:var(--gap) 0}

/* ── nav ── */
.nav{max-width:var(--col); margin:0 auto; padding:28px var(--pad) 0;
  display:flex; align-items:baseline; justify-content:space-between; gap:20px 28px; flex-wrap:wrap}
.nav .mark{font-family:var(--serif); font-weight:540; font-size:22px; letter-spacing:.01em; text-decoration:none; white-space:nowrap}
.nav .links{display:flex; gap:22px; flex-wrap:wrap; font-family:var(--mono); font-size:13.5px; letter-spacing:.02em}
.nav .links a{color:var(--ink-soft); text-decoration:none; padding-bottom:3px; border-bottom:1.5px solid transparent; transition:color .15s,border-color .15s}
.nav .links a:hover{color:var(--ink)}
.nav .links a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--oxblood)}

/* the lit diacritics — the wordmark's whole idea */
.dia{color:var(--oxblood)}
/* on the night bands/footer the oxblood goes muddy — light the marks warmer so they stay legible */
.band .dia,.foot .dia,.hero .dia{color:#C6553F}

/* ── eyebrows / labels / mono bits ── */
.eyebrow{font-family:var(--mono); font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 14px}
.label{font-family:var(--mono); font-size:13px; letter-spacing:.02em; color:var(--ink-soft); margin:12px 0 0; line-height:1.5}

/* ── headings & text ── */
h1,h2,h3{font-family:var(--serif); font-weight:520; line-height:1.08; margin:0}
h1{font-size:clamp(36px,6vw,68px); letter-spacing:-.01em}
h2{font-size:clamp(26px,3.5vw,38px); letter-spacing:-.005em}
h3{font-size:22px}
.era{font-size:22px}  /* semantic h2 for bio eras, kept visually quiet */
.title-it{font-style:italic}
p{margin:1.05em 0}
.lead{font-size:clamp(20px,2.4vw,25px); line-height:1.5}
.link{color:inherit; text-decoration:none; background-image:linear-gradient(var(--oxblood),var(--oxblood));
  background-size:100% 1.5px; background-repeat:no-repeat; background-position:0 100%; padding-bottom:2px;
  transition:background-size .15s,color .15s}
.link:hover{color:var(--oxblood-hot); background-image:linear-gradient(var(--oxblood-hot),var(--oxblood-hot)); background-size:100% 2px}

/* ── hero (full-bleed exhibition poster) ── */
.hero{position:relative; width:100%; height:clamp(460px,85vh,880px); overflow:hidden; background:var(--night)}
.hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 62%}
.hero .scrim{position:absolute; inset:0; background:linear-gradient(transparent 30%,rgba(25,21,18,.34) 56%,rgba(25,21,18,.82))}
.hero .cap{position:absolute; left:0; right:0; bottom:0; padding:0 var(--pad) clamp(32px,6vh,64px)}
.hero .cap .in{max-width:var(--col); margin:0 auto; color:var(--cream)}
.hero .eyebrow{color:rgba(243,239,231,.82); margin-bottom:16px}
.hero h1{color:var(--cream); font-style:italic; font-weight:500; font-size:clamp(30px,7.6vw,92px); overflow-wrap:break-word; hyphens:none}
.hero .sub{margin:14px 0 22px; font-size:clamp(19px,2.3vw,24px); color:rgba(243,239,231,.9); max-width:22ch}
.hero .acts{display:flex; gap:26px; flex-wrap:wrap; font-family:var(--mono); font-size:14px; letter-spacing:.02em}
.hero .acts a{color:var(--cream); text-decoration:none; padding-bottom:3px; border-bottom:1.5px solid transparent}
.hero .acts a:first-child{border-bottom-color:var(--oxblood-hot)}
.hero .acts a:hover{border-bottom-color:var(--cream)}

/* ── figures / hung work ── */
figure{margin:0}
.art{margin:var(--gap) 0}
.art a.frame{display:block; text-decoration:none}
.art img{width:auto; max-width:100%; max-height:80vh; margin:0 auto; box-shadow:0 10px 30px rgba(28,25,23,.14)}
.art.full img{max-height:none; width:100%; box-shadow:none}
.art .label{text-align:left; max-width:65ch}
.art.full .label{max-width:var(--col); margin:14px auto 0; padding:0 var(--pad)}  /* align a full-bleed work's caption to the content column, not the viewport edge */
/* an eyebrow announcing a work should hug it, not float a full gallery-gap above it */
.eyebrow + .art,.eyebrow + .two{margin-top:22px}

/* photography pair / two-up */
.two{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,4vw,48px); align-items:start; margin:0}
.two figure{margin:0}
.two img{width:100%; max-height:74vh; box-shadow:0 10px 30px rgba(28,25,23,.14)}
.two + .label{margin:14px 0 var(--gap)}  /* a pair-caption ends a section — carry the gallery-gap like a hung work does */

/* video facade — poster + play button; swaps to a 16:9 iframe on click */
.art.video{margin:var(--gap) 0}
.vid{position:relative; max-width:900px}
.vid-link{display:block; position:relative; text-decoration:none}
.vid-link img{width:100%; box-shadow:0 10px 30px rgba(28,25,23,.14)}
.vid-play{position:absolute; inset:0; margin:auto; width:84px; height:84px; border-radius:50%;
  background:rgba(25,21,18,.55); display:flex; align-items:center; justify-content:center; transition:background .2s,transform .2s}
.vid-link:hover .vid-play{background:var(--oxblood); transform:scale(1.06)}
.vid-tri{width:0; height:0; margin-left:5px; border-style:solid; border-width:15px 0 15px 26px; border-color:transparent transparent transparent var(--cream)}
.vid-frame{position:relative; padding-top:56.25%; max-width:900px; box-shadow:0 10px 30px rgba(28,25,23,.14)}
.vid-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* archival "document" — smaller, on a mat */
.doc{max-width:64%; margin:44px 0}
.doc img{padding:16px; background:var(--wall-deep)}
@media(max-width:680px){.doc{max-width:100%}}

/* three-work strip on home — never crop the canvas: natural aspect, equal height, bottom-aligned row */
.strip{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,3vw,40px); margin-top:36px; align-items:end}
.strip a{text-decoration:none; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end}
.strip img{width:auto; max-width:100%; height:clamp(180px,24vw,270px); object-fit:contain; object-position:left bottom; box-shadow:0 8px 22px rgba(28,25,23,.13)}
.strip .label{margin-top:12px}
@media(max-width:680px){
  .strip{grid-template-columns:1fr; gap:38px; align-items:start} .strip img{height:auto; max-height:340px}
  .two{grid-template-columns:1fr}
  /* let the nav links take the full row and wrap within the viewport instead of clipping "Contact" */
  .nav{gap:14px 20px} .nav .links{width:100%; justify-content:flex-start; gap:16px 20px}
}

/* ── bands (night) ── */
.band{background:var(--night); color:var(--cream); margin-top:var(--gap)}
.band .wrap{padding-top:clamp(56px,10vh,120px); padding-bottom:clamp(56px,10vh,120px)}
.band h2{color:var(--cream)}
.band .eyebrow{color:rgba(243,239,231,.7)}
.band p{color:rgba(243,239,231,.92)}
.band a.link{color:var(--cream); background-image:linear-gradient(var(--oxblood-hot),var(--oxblood-hot))}

/* pull-block (from the study) */
.pull{background:var(--wall-deep); padding:clamp(28px,5vw,52px); margin:var(--gap) 0; max-width:none}
.pull .prose{max-width:60ch}

/* credits */
.credits{font-family:var(--mono); font-size:13.5px; letter-spacing:.01em; line-height:1.7; color:var(--ink-soft); max-width:60ch}
.credits b{color:var(--ink); font-weight:400}

/* ── page header block ── */
.phead{padding-top:clamp(40px,8vh,90px)}
.phead .sub{margin-top:16px; color:var(--ink-soft); font-size:clamp(19px,2.2vw,23px); font-style:italic; max-width:44ch}

/* ── footer ── */
.foot{background:var(--night); color:var(--cream); margin-top:var(--gap)}
.foot .in{max-width:var(--col); margin:0 auto; padding:40px var(--pad); display:flex; justify-content:space-between; align-items:center; gap:16px 28px; flex-wrap:wrap}
.foot .mark{font-family:var(--serif); font-weight:540; font-size:19px}
.foot .meta{font-family:var(--mono); font-size:12px; letter-spacing:.02em; color:rgba(243,239,231,.66); text-align:right}
.foot a{color:inherit; text-decoration:none; border-bottom:1px solid rgba(243,239,231,.3)}
.foot a:hover{border-bottom-color:var(--cream)}
/* when a page closes on a night band, merge it straight into the night footer — a hairline keeps the two dark blocks legible */
main:has(> .band:last-child) + .foot{margin-top:0; border-top:1px solid rgba(243,239,231,.14)}

/* ── motion (progressive) ── the .js gate is the safety net: without JS the class is never
   stamped, so .reveal is never hidden and ALL content shows. Only a JS-enabled, motion-ok
   client hides-then-reveals on scroll. */
@media(prefers-reduced-motion:no-preference){
  html.js .reveal{opacity:0; transform:translateY(12px); transition:opacity .5s ease-out,transform .5s ease-out}
  html.js .reveal.in{opacity:1; transform:none}
}

/* ── skip link (a11y) ── */
.skip{position:absolute; left:-999px; top:0}
.skip:focus{left:8px; top:8px; z-index:10; background:var(--night); color:var(--cream); padding:8px 12px; font-family:var(--mono); font-size:13px}