/* ossso.art — dark, quiet, type-led. Colour comes only from the work. */

:root{
  --bg:#0A0A0A;
  --fg:#EDEDED;
  --dim:#8A8A8A;
  --faint:#5C5C5C;
  --line:#232323;
  --pad:clamp(20px,4vw,64px);
  --sans:"Montserrat",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --maxw:1440px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font:400 15px/1.65 var(--sans);
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:1px solid var(--fg);outline-offset:3px}
h1,h2,h3{font-weight:500;margin:0;letter-spacing:-.015em}
p{margin:0 0 1em}
time{font-variant-numeric:tabular-nums}

.sr,.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;top:8px;left:8px;width:auto;height:auto;clip:auto;padding:8px 12px;background:var(--fg);color:var(--bg);z-index:100}

/* ------------------------------------------------------------------ chrome */

.bar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--pad);
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.mark{font-size:15px;font-weight:600;letter-spacing:.12em}
.mark span{color:var(--faint);font-weight:400}
.bar nav{display:flex;gap:26px;font-size:13px;color:var(--dim)}
.bar nav a{transition:color .2s}
.bar nav a:hover,.bar nav a[aria-current]{color:var(--fg)}

.foot{
  display:grid;gap:32px;grid-template-columns:repeat(3,1fr);
  max-width:var(--maxw);margin:120px auto 0;
  padding:40px var(--pad) 56px;border-top:1px solid var(--line);
  font-size:13px;
}
.foot-col{display:flex;flex-direction:column;gap:6px}
.foot-col a{color:var(--dim);transition:color .2s}
.foot-col a:hover{color:var(--fg)}
.lbl{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.dim{color:var(--faint)}

main{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

/* -------------------------------------------------------------------- home */

.home{
  position:relative;min-height:100svh;max-width:none;padding:0;
  display:grid;place-items:center;overflow:hidden;
}
.home-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.62;filter:grayscale(.15)
}
.home::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 45%,transparent 0%,rgba(10,10,10,.72) 100%)}
.home-inner{position:relative;z-index:2;text-align:center;padding:0 24px;color:var(--fg);
  --linew:clamp(240px,21vw,290px);--taglinesize:clamp(9.5px,.82vw,11.5px)}
.home-name{
  width:fit-content;margin:0 auto 26px;text-align:right;
  font-size:clamp(52px,12vw,150px);line-height:.9;font-weight:200;letter-spacing:.03em;
}
.home-first{display:block;font-size:.22em;font-weight:300;letter-spacing:.02em;margin-bottom:.5em}
.home-last{display:block;margin-right:-.03em}

/* Подпись и навигация делят одну ширину: строка начинается на «P» в Project
   и заканчивается на «t» в About. */
.home-block{width:var(--linew);margin:0 auto}
.home-tagline{
  width:100%;margin:0 0 22px;
  font-size:var(--taglinesize);font-weight:300;line-height:1.5;
  text-align:justify;text-align-last:justify;
}
.home-nav{display:flex;justify-content:space-between;width:100%;font-size:15px;font-weight:300}
.home-nav a{transition:opacity .2s}
.home-nav a:hover{opacity:.6}
.home-social{
  position:absolute;z-index:2;left:50%;translate:-50% 0;bottom:34px;
  display:flex;gap:26px;align-items:center;
}
.home-social a{transition:opacity .2s}
.home-social a:hover{opacity:.6}
.home-caption{position:absolute;z-index:2;left:var(--pad);bottom:22px;margin:0;font-size:11px;color:var(--fg);letter-spacing:.04em}

/* --------------------------------------------------------------- page head */

.page-head{padding:clamp(56px,9vw,120px) 0 clamp(32px,5vw,56px);max-width:56ch}
.page-head h1{font-size:clamp(34px,5.2vw,64px);line-height:1.02}
.page-head h1 .sub{display:block;font-size:.42em;color:var(--dim);margin-top:.5em;letter-spacing:0}
.standfirst{color:var(--dim);font-size:clamp(15px,1.7vw,19px);margin-top:18px}

/* ------------------------------------------------------------------- rows */

.rows{border-top:1px solid var(--line)}
.row{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,72px);
  align-items:start;padding:clamp(32px,4.5vw,56px) 0;border-bottom:1px solid var(--line);
}
.row-text h2{font-size:clamp(22px,2.6vw,34px);line-height:1.1}
.row-text h2 a{transition:opacity .2s}
.row-text h2 a:hover{opacity:.6}
.row-text h2 .sub{display:block;font-size:.58em;color:var(--dim);margin-top:.35em;letter-spacing:0}
.meta{margin:14px 0 16px;font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--faint)}
.desc{color:var(--dim);max-width:46ch}
.more{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);border-bottom:1px solid var(--line);padding-bottom:2px;transition:color .2s,border-color .2s}
.more:hover{color:var(--fg);border-color:var(--fg)}
.row-thumb{display:block;overflow:hidden;background:#131313;aspect-ratio:16/9}
.row-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1),opacity .8s}
.row-thumb:hover img{transform:scale(1.03)}
.reveal{opacity:0;transform:translateY(18px)}
.reveal.in{opacity:1;transform:none;transition:opacity .9s cubic-bezier(.2,.7,.3,1),transform .9s cubic-bezier(.2,.7,.3,1)}

/* ------------------------------------------------------------ touch strand */

.strand{
  display:grid;grid-template-columns:1fr auto;align-items:end;gap:12px 24px;
  padding:26px;margin-bottom:8px;border:1px solid var(--line);background:#0E0E0E;
  transition:border-color .3s,background .3s;
}
.strand:hover{border-color:var(--faint);background:#121212}
.strand-lbl{grid-column:1/-1;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.strand-title{font-size:clamp(24px,3vw,38px);letter-spacing:-.02em}
.strand-desc{grid-column:1;color:var(--dim);max-width:52ch}
.strand-more{font-size:22px;color:var(--faint)}

/* ----------------------------------------------------------------- detail */

.detail{padding-bottom:24px}
.back{display:inline-block;margin:clamp(28px,5vw,48px) 0 clamp(24px,4vw,40px);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);transition:color .2s}
.back:hover{color:var(--fg)}
.detail-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,72px);align-items:start}
.detail-head h1{font-size:clamp(32px,4.6vw,58px);line-height:1.03}
.detail-head h1 .sub{display:block;font-size:.4em;color:var(--dim);margin-top:.5em;letter-spacing:0}
.lead{margin:22px 0 28px;font-size:clamp(16px,1.9vw,21px);line-height:1.5;color:var(--fg);opacity:.92;max-width:40ch}
.lead.big{font-size:clamp(18px,2.4vw,28px)}
.facts{margin:0;display:grid;gap:8px;font-size:13px;border-top:1px solid var(--line);padding-top:16px}
.facts div{display:grid;grid-template-columns:112px 1fr;gap:12px}
.facts dt{color:var(--faint);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding-top:2px}
.facts dd{margin:0;color:var(--dim)}
.detail-head-img{background:#131313;aspect-ratio:16/9;overflow:hidden}
.detail-head-img img{width:100%;height:100%;object-fit:cover}

.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px);margin:clamp(48px,7vw,88px) 0;border-top:1px solid var(--line);padding-top:28px}
.cols.two{grid-template-columns:repeat(2,1fr)}
.col h2{font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);margin-bottom:14px}
.col p{color:var(--dim);margin:0}

.media-grid{display:grid;gap:clamp(12px,1.6vw,20px)}
.media{margin:0;background:#131313;aspect-ratio:16/9;position:relative;overflow:hidden}
.media video,.media iframe{width:100%;height:100%;display:block;border:0}
.media .play{all:unset;display:block;cursor:pointer;width:100%;height:100%;position:relative}
.media .play img{width:100%;height:100%;object-fit:cover}
.play-i{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:62px;height:62px;border:1px solid rgba(237,237,237,.75);border-radius:50%;
  background:rgba(10,10,10,.35);backdrop-filter:blur(2px);transition:background .25s,scale .25s;
}
.play-i::after{content:"";position:absolute;left:54%;top:50%;translate:-50% -50%;border:9px solid transparent;border-left:15px solid var(--fg)}
.media .play:hover .play-i{background:rgba(10,10,10,.6);scale:1.06}

.poem{margin:clamp(40px,6vw,72px) auto;max-width:44ch;text-align:center;color:var(--dim);border:0;padding:0}
.poem p{line-height:1.9}
.poem cite{display:block;font-style:normal;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:22px}

.exh{margin-top:clamp(48px,7vw,88px);border-top:1px solid var(--line);padding-top:26px}
.exh h2,.cv-grid h2,.gal h2{font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);margin-bottom:16px}
.exh ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px}
.exh li{display:grid;grid-template-columns:64px 1fr;gap:14px;color:var(--dim)}
.exh time{color:var(--faint)}

.pn{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(56px,8vw,104px);border-top:1px solid var(--line);padding-top:26px;font-size:15px}
.pn a{color:var(--dim);transition:color .2s}
.pn a:hover{color:var(--fg)}
.pn .lbl{display:block}
.pn-next{text-align:right}

/* -------------------------------------------------------------- touch page */

.invert{--bg:#F2F0EB;--fg:#111;--dim:#4A4A4A;--faint:#8A8683;--line:#DAD6CF;background:var(--bg);color:var(--fg);max-width:none;padding:0}
.invert .detail{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) 80px}
body:has(.invert){background:#F2F0EB}
body:has(.invert) .bar{background:color-mix(in srgb,#F2F0EB 88%,transparent);border-bottom-color:#DAD6CF;color:#111}
body:has(.invert) .bar nav a{color:#4A4A4A}
body:has(.invert) .bar nav a:hover{color:#111}
body:has(.invert) .mark span{color:#8A8683}
body:has(.invert) .foot{border-top-color:#DAD6CF;color:#111}
body:has(.invert) .foot-col a{color:#4A4A4A}
body:has(.invert) .foot-col a:hover{color:#111}
body:has(.invert) .lbl,body:has(.invert) .dim{color:#8A8683}

.stages{list-style:none;margin:clamp(40px,6vw,72px) 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.stages li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:clamp(16px,3vw,48px);padding:clamp(24px,3.5vw,40px) 0;border-bottom:1px solid var(--line)}
.stage-n{font-size:clamp(28px,4vw,48px);color:var(--faint);line-height:1}
.stage-b h2{font-size:clamp(20px,2.4vw,30px);margin-bottom:12px}
.status{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);vertical-align:middle;margin-left:10px}
.stage-b p{color:var(--dim);max-width:62ch;margin:0}
.closing{margin-top:clamp(40px,6vw,72px);font-size:clamp(16px,2vw,22px);max-width:52ch;line-height:1.5}

/* ------------------------------------------------------------------- info */

.bio-wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(24px,5vw,72px);align-items:start;padding-bottom:clamp(48px,7vw,88px);border-bottom:1px solid var(--line)}
.bio p{max-width:52ch;color:var(--dim)}
.bio p:first-child{color:var(--fg);font-size:clamp(16px,1.9vw,20px);line-height:1.5}
.bio-touch a{color:var(--fg);border-bottom:1px solid var(--faint)}
.bio-img{margin:0;background:#131313}
.cv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(32px,5vw,72px);padding:clamp(40px,6vw,72px) 0}
.cv{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:14px}
.cv li{display:grid;grid-template-columns:74px 1fr;gap:14px;color:var(--dim)}
.cv time{color:var(--faint);font-size:12px;padding-top:2px}
.cv a{border-bottom:1px solid var(--line)}
.cv a:hover{border-color:var(--fg);color:var(--fg)}
.gal{padding-top:clamp(32px,5vw,56px);border-top:1px solid var(--line)}
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:clamp(10px,1.4vw,18px)}
.gal figure{margin:0;background:#131313;aspect-ratio:3/2;overflow:hidden}
.gal img{width:100%;height:100%;object-fit:cover}

/* ------------------------------------------------------------------ small */

@media (max-width:900px){
  .row,.detail-head,.bio-wrap{grid-template-columns:1fr}
  .row-thumb,.detail-head-img{order:-1;margin-bottom:18px}
  .cols,.cols.two,.cv-grid,.foot{grid-template-columns:1fr}
  .stages li{grid-template-columns:56px 1fr}
  .home-caption{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}